diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/repeat-visitor/components/edit.js')
-rw-r--r-- | plugins/jetpack/extensions/blocks/repeat-visitor/components/edit.js | 114 |
1 files changed, 114 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/repeat-visitor/components/edit.js b/plugins/jetpack/extensions/blocks/repeat-visitor/components/edit.js new file mode 100644 index 00000000..ff954162 --- /dev/null +++ b/plugins/jetpack/extensions/blocks/repeat-visitor/components/edit.js @@ -0,0 +1,114 @@ +/** + * External dependencies + */ +import { __, _n, sprintf } from '@wordpress/i18n'; +import { Notice, TextControl, RadioControl, Placeholder } from '@wordpress/components'; +import { Component } from '@wordpress/element'; +import { InnerBlocks } from '@wordpress/editor'; +import { withSelect } from '@wordpress/data'; +import classNames from 'classnames'; + +/** + * Internal dependencies + */ +import { CRITERIA_AFTER, CRITERIA_BEFORE } from '../constants'; +import { icon } from '../index'; + +const RADIO_OPTIONS = [ + { + value: CRITERIA_AFTER, + label: __( 'Show after threshold', 'jetpack' ), + }, + { + value: CRITERIA_BEFORE, + label: __( 'Show before threshold', 'jetpack' ), + }, +]; + +class RepeatVisitorEdit extends Component { + state = { + isThresholdValid: true, + }; + + setCriteria = criteria => this.props.setAttributes( { criteria } ); + setThreshold = threshold => { + if ( /^\d+$/.test( threshold ) && +threshold > 0 ) { + this.props.setAttributes( { threshold: +threshold } ); + this.setState( { isThresholdValid: true } ); + return; + } + this.setState( { isThresholdValid: false } ); + }; + + getNoticeLabel() { + if ( this.props.attributes.criteria === CRITERIA_AFTER ) { + return sprintf( + _n( + 'This block will only appear to people who have visited this page more than once.', + 'This block will only appear to people who have visited this page more than %d times.', + +this.props.attributes.threshold, + 'jetpack' + ), + this.props.attributes.threshold + ); + } + + return sprintf( + _n( + 'This block will only appear to people who are visiting this page for the first time.', + 'This block will only appear to people who have visited this page at most %d times.', + +this.props.attributes.threshold, + 'jetpack' + ), + this.props.attributes.threshold + ); + } + + render() { + return ( + <div + className={ classNames( this.props.className, { + 'wp-block-jetpack-repeat-visitor--is-unselected': ! this.props.isSelected, + } ) } + > + <Placeholder + icon={ icon } + label={ __( 'Repeat Visitor', 'jetpack' ) } + className="wp-block-jetpack-repeat-visitor-placeholder" + > + <TextControl + className="wp-block-jetpack-repeat-visitor-threshold" + defaultValue={ this.props.attributes.threshold } + help={ + this.state.isThresholdValid ? '' : __( 'Please enter a valid number.', 'jetpack' ) + } + label={ __( 'Visit count threshold', 'jetpack' ) } + min="1" + onChange={ this.setThreshold } + pattern="[0-9]" + type="number" + /> + + <RadioControl + label={ __( 'Visibility', 'jetpack' ) } + selected={ this.props.attributes.criteria } + options={ RADIO_OPTIONS } + onChange={ this.setCriteria } + /> + </Placeholder> + + <Notice status="info" isDismissible={ false }> + { this.getNoticeLabel() } + </Notice> + <InnerBlocks /> + </div> + ); + } +} + +export default withSelect( ( select, ownProps ) => { + const { isBlockSelected, hasSelectedInnerBlock } = select( 'core/editor' ); + return { + isSelected: isBlockSelected( ownProps.clientId ) || hasSelectedInnerBlock( ownProps.clientId ), + }; +} )( RepeatVisitorEdit ); |