canvas / components / basic-elements / block-progress / edit.jsx

edit.jsx in Canvas 2.4.9, at components/basic-elements/block-progress/edit.jsx

89 lines 1.6 KB

Raw Download Zip

1	/**
2	* External dependencies
3	*/
4	import classnames from 'classnames';
5
6	/**
7	* WordPress dependencies
8	*/
9	const {
10	Component,
11	Fragment,
12	} = wp.element;
13
14	const {
15	ResizableBox,
16	} = wp.components;
17
18	/**
19	* Component
20	*/
21	export default class ProgressBlockEdit extends Component {
22	render() {
23	const {
24	setAttributes,
25	isSelected,
26	} = this.props;
27
28	let {
29	className,
30	} = this.props;
31
32	const {
33	height,
34	width,
35	striped,
36	animated,
37	displayPercent,
38	canvasClassName,
39	} = this.props.attributes;
40
41	className = classnames(
42	'cnvs-block-progress',
43	{
44	'cnvs-block-progress-striped': striped,
45	'cnvs-block-progress-animated': striped && animated,
46	'is-selected': isSelected,
47	},
48	canvasClassName,
49	className
50	);
51
52	return (
53	<Fragment>
54	<ResizableBox
55	className={ className }
56	size={ {
57	height,
58	} }
59	minHeight="1"
60	maxHeight="20"
61	enable={ { bottom: true } }
62	onResizeStop={ ( event, direction, elt, delta ) => {
63	setAttributes( {
64	height: parseInt( height + delta.height, 10 ),
65	} );
66	} }
67	>
68	<ResizableBox
69	className="cnvs-block-progress-bar"
70	size={ {
71	width: `${ width }%`,
72	} }
73	minHeight="1"
74	maxHeight="100"
75	enable={ { right: true } }
76	onResizeStop={ ( event, direction, elt, delta ) => {
77	setAttributes( {
78	width: Math.min( 100, Math.max( 0, width + parseInt( 100 * delta.width / jQuery( elt ).parent().width(), 10 ) ) ),
79	} );
80	} }
81	>
82	{ displayPercent ? `${ width }%` : '' }
83	</ResizableBox>
84	</ResizableBox>
85	</Fragment>
86	);
87	}
88	}
89