CHIEFSOFT\ameye
89 lines
1.6 KiB
React
89 lines
1.6 KiB
React
/**
|
|
* External dependencies
|
|
*/
|
|
import classnames from 'classnames';
|
|
|
|
/**
|
|
* WordPress dependencies
|
|
*/
|
|
const {
|
|
Component,
|
|
Fragment,
|
|
} = wp.element;
|
|
|
|
const {
|
|
ResizableBox,
|
|
} = wp.components;
|
|
|
|
/**
|
|
* Component
|
|
*/
|
|
export default class ProgressBlockEdit extends Component {
|
|
render() {
|
|
const {
|
|
setAttributes,
|
|
isSelected,
|
|
} = this.props;
|
|
|
|
let {
|
|
className,
|
|
} = this.props;
|
|
|
|
const {
|
|
height,
|
|
width,
|
|
striped,
|
|
animated,
|
|
displayPercent,
|
|
canvasClassName,
|
|
} = this.props.attributes;
|
|
|
|
className = classnames(
|
|
'cnvs-block-progress',
|
|
{
|
|
'cnvs-block-progress-striped': striped,
|
|
'cnvs-block-progress-animated': striped && animated,
|
|
'is-selected': isSelected,
|
|
},
|
|
canvasClassName,
|
|
className
|
|
);
|
|
|
|
return (
|
|
<Fragment>
|
|
<ResizableBox
|
|
className={ className }
|
|
size={ {
|
|
height,
|
|
} }
|
|
minHeight="1"
|
|
maxHeight="20"
|
|
enable={ { bottom: true } }
|
|
onResizeStop={ ( event, direction, elt, delta ) => {
|
|
setAttributes( {
|
|
height: parseInt( height + delta.height, 10 ),
|
|
} );
|
|
} }
|
|
>
|
|
<ResizableBox
|
|
className="cnvs-block-progress-bar"
|
|
size={ {
|
|
width: `${ width }%`,
|
|
} }
|
|
minHeight="1"
|
|
maxHeight="100"
|
|
enable={ { right: true } }
|
|
onResizeStop={ ( event, direction, elt, delta ) => {
|
|
setAttributes( {
|
|
width: Math.min( 100, Math.max( 0, width + parseInt( 100 * delta.width / jQuery( elt ).parent().width(), 10 ) ) ),
|
|
} );
|
|
} }
|
|
>
|
|
{ displayPercent ? `${ width }%` : '' }
|
|
</ResizableBox>
|
|
</ResizableBox>
|
|
</Fragment>
|
|
);
|
|
}
|
|
}
|