BorderControl.js
1 year ago
BoxShadowControl.js
1 year ago
ColorSelectorControl.js
1 year ago
FontSizeControl.js
1 year ago
LatepointIcons.js
1 year ago
LetterSpacingControl.js
1 year ago
LineHeightControl.js
1 year ago
PaddingBoxControl.js
1 year ago
TypographyControl.js
1 year ago
PaddingBoxControl.js
53 lines
| 1 | import { __ } from '@wordpress/i18n'; |
| 2 | import { __experimentalBoxControl as BoxControl } from '@wordpress/components'; |
| 3 | import React from "react"; |
| 4 | |
| 5 | const PaddingBoxControl = ({ label, paddingAttribute, attributes, setAttributes }) => { |
| 6 | const defaultPadding = { |
| 7 | top: '', |
| 8 | right: '', |
| 9 | bottom: '', |
| 10 | left: '' |
| 11 | }; |
| 12 | |
| 13 | const handleBoxControlChange = (newValues) => { |
| 14 | setAttributes({ [paddingAttribute]: paddingToString(newValues) }); |
| 15 | }; |
| 16 | |
| 17 | const paddingValues = () => { |
| 18 | if (!attributes[paddingAttribute]) return defaultPadding; |
| 19 | |
| 20 | const values = attributes[paddingAttribute].split(' '); |
| 21 | const positions = ['top', 'right', 'bottom', 'left']; |
| 22 | |
| 23 | return positions.reduce((acc, position, index) => { |
| 24 | acc[position] = values[index] || ''; |
| 25 | return acc; |
| 26 | }, {}); |
| 27 | }; |
| 28 | |
| 29 | const paddingToString = (padding) => { |
| 30 | if (!padding.top && !padding.right && !padding.bottom && !padding.left) { |
| 31 | return ''; |
| 32 | } |
| 33 | return [ |
| 34 | padding.top || '0', |
| 35 | padding.right || '0', |
| 36 | padding.bottom || '0', |
| 37 | padding.left || '0', |
| 38 | ].join(' ').trim(); |
| 39 | }; |
| 40 | |
| 41 | return ( |
| 42 | <div className="lb-boxcontrol"> |
| 43 | <BoxControl |
| 44 | label={__(label)} |
| 45 | values={paddingValues()} |
| 46 | onChange={handleBoxControlChange} |
| 47 | resetValues={defaultPadding} |
| 48 | /> |
| 49 | </div> |
| 50 | ); |
| 51 | }; |
| 52 | |
| 53 | export default PaddingBoxControl; |