66 lines
1.5 KiB
JavaScript
66 lines
1.5 KiB
JavaScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { Component } from '@wordpress/element';
|
|
import { xor } from 'lodash';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import SectionControls from './section-controls';
|
|
|
|
export default class Section extends Component {
|
|
constructor( props ) {
|
|
super( props );
|
|
const { title } = props;
|
|
|
|
this.state = {
|
|
titleInput: title,
|
|
};
|
|
|
|
this.onToggleHiddenBlock = this.onToggleHiddenBlock.bind( this );
|
|
this.onTitleChange = this.onTitleChange.bind( this );
|
|
this.onTitleBlur = this.onTitleBlur.bind( this );
|
|
}
|
|
|
|
onTitleChange( updatedTitle ) {
|
|
this.setState( { titleInput: updatedTitle } );
|
|
}
|
|
|
|
onTitleBlur() {
|
|
const { onTitleUpdate, title } = this.props;
|
|
const { titleInput } = this.state;
|
|
|
|
if ( titleInput === '' ) {
|
|
this.setState( { titleInput: title } );
|
|
} else if ( onTitleUpdate ) {
|
|
onTitleUpdate( titleInput );
|
|
}
|
|
}
|
|
|
|
onToggleHiddenBlock( key ) {
|
|
return () => {
|
|
const hiddenBlocks = xor( this.props.hiddenBlocks, [ key ] );
|
|
this.props.onChangeHiddenBlocks( hiddenBlocks );
|
|
};
|
|
}
|
|
|
|
render() {
|
|
const { component: SectionComponent, ...props } = this.props;
|
|
const { titleInput } = this.state;
|
|
|
|
return (
|
|
<div className="woocommerce-dashboard-section">
|
|
<SectionComponent
|
|
onTitleChange={ this.onTitleChange }
|
|
onTitleBlur={ this.onTitleBlur }
|
|
onToggleHiddenBlock={ this.onToggleHiddenBlock }
|
|
titleInput={ titleInput }
|
|
controls={ SectionControls }
|
|
{ ...props }
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
}
|