diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/business-hours/components/day-edit.js')
-rw-r--r-- | plugins/jetpack/extensions/blocks/business-hours/components/day-edit.js | 200 |
1 files changed, 200 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/business-hours/components/day-edit.js b/plugins/jetpack/extensions/blocks/business-hours/components/day-edit.js new file mode 100644 index 00000000..bab6958a --- /dev/null +++ b/plugins/jetpack/extensions/blocks/business-hours/components/day-edit.js @@ -0,0 +1,200 @@ +/** + * External dependencies + */ +import classNames from 'classnames'; +import { __ } from '@wordpress/i18n'; +import { Component, Fragment } from '@wordpress/element'; +import { IconButton, TextControl, ToggleControl } from '@wordpress/components'; +import { isEmpty } from 'lodash'; + +const defaultOpen = '09:00'; +const defaultClose = '17:00'; + +class DayEdit extends Component { + renderInterval = ( interval, intervalIndex ) => { + const { day } = this.props; + const { opening, closing } = interval; + return ( + <Fragment key={ intervalIndex }> + <div className="business-hours__row"> + <div className={ classNames( day.name, 'business-hours__day' ) }> + { intervalIndex === 0 && this.renderDayToggle() } + </div> + <div className={ classNames( day.name, 'business-hours__hours' ) }> + <TextControl + type="time" + label={ __( 'Opening', 'jetpack' ) } + value={ opening } + className="business-hours__open" + placeholder={ defaultOpen } + onChange={ value => { + this.setHour( value, 'opening', intervalIndex ); + } } + /> + <TextControl + type="time" + label={ __( 'Closing', 'jetpack' ) } + value={ closing } + className="business-hours__close" + placeholder={ defaultClose } + onChange={ value => { + this.setHour( value, 'closing', intervalIndex ); + } } + /> + </div> + <div className="business-hours__remove"> + { day.hours.length > 1 && ( + <IconButton + isSmall + isLink + icon="trash" + onClick={ () => { + this.removeInterval( intervalIndex ); + } } + /> + ) } + </div> + </div> + { intervalIndex === day.hours.length - 1 && ( + <div className="business-hours__row business-hours-row__add"> + <div className={ classNames( day.name, 'business-hours__day' ) }> </div> + <div className={ classNames( day.name, 'business-hours__hours' ) }> + <IconButton + isLink + label={ __( 'Add Hours', 'jetpack' ) } + onClick={ this.addInterval } + > + { __( 'Add Hours', 'jetpack' ) } + </IconButton> + </div> + <div className="business-hours__remove"> </div> + </div> + ) } + </Fragment> + ); + }; + + setHour = ( hourValue, hourType, hourIndex ) => { + const { day, attributes, setAttributes } = this.props; + const { days } = attributes; + setAttributes( { + days: days.map( value => { + if ( value.name === day.name ) { + return { + ...value, + hours: value.hours.map( ( hour, index ) => { + if ( index === hourIndex ) { + return { + ...hour, + [ hourType ]: hourValue, + }; + } + return hour; + } ), + }; + } + return value; + } ), + } ); + }; + + toggleClosed = nextValue => { + const { day, attributes, setAttributes } = this.props; + const { days } = attributes; + + setAttributes( { + days: days.map( value => { + if ( value.name === day.name ) { + const hours = nextValue + ? [ + { + opening: defaultOpen, + closing: defaultClose, + }, + ] + : []; + return { + ...value, + hours, + }; + } + return value; + } ), + } ); + }; + + addInterval = () => { + const { day, attributes, setAttributes } = this.props; + const { days } = attributes; + day.hours.push( { opening: '', closing: '' } ); + setAttributes( { + days: days.map( value => { + if ( value.name === day.name ) { + return { + ...value, + hours: day.hours, + }; + } + return value; + } ), + } ); + }; + + removeInterval = hourIndex => { + const { day, attributes, setAttributes } = this.props; + const { days } = attributes; + + setAttributes( { + days: days.map( value => { + if ( day.name === value.name ) { + return { + ...value, + hours: value.hours.filter( ( hour, index ) => { + return hourIndex !== index; + } ), + }; + } + return value; + } ), + } ); + }; + + isClosed() { + const { day } = this.props; + return isEmpty( day.hours ); + } + + renderDayToggle() { + const { day, localization } = this.props; + return ( + <Fragment> + <span className="business-hours__day-name">{ localization.days[ day.name ] }</span> + <ToggleControl + label={ this.isClosed() ? __( 'Closed', 'jetpack' ) : __( 'Open', 'jetpack' ) } + checked={ ! this.isClosed() } + onChange={ this.toggleClosed } + /> + </Fragment> + ); + } + + renderClosed() { + const { day } = this.props; + return ( + <div className="business-hours__row business-hours-row__closed"> + <div className={ classNames( day.name, 'business-hours__day' ) }> + { this.renderDayToggle() } + </div> + <div className={ classNames( day.name, 'closed', 'business-hours__hours' ) }> </div> + <div className="business-hours__remove"> </div> + </div> + ); + } + + render() { + const { day } = this.props; + return this.isClosed() ? this.renderClosed() : day.hours.map( this.renderInterval ); + } +} + +export default DayEdit; |