icon-padding.js
24 lines
| 1 | import { __ } from '@wordpress/i18n'; |
| 2 | import DimensionsControl from '../../../../../components/dimensions'; |
| 3 | import getDeviceType from '../../../../../utils/get-device-type'; |
| 4 | import useDeviceAttributes from '../../../../../hooks/useDeviceAttributes'; |
| 5 | import getResponsivePlaceholder from '../../../../../utils/get-responsive-placeholder'; |
| 6 | |
| 7 | export default function IconPadding( { attributes, setAttributes } ) { |
| 8 | const device = getDeviceType(); |
| 9 | const [ deviceAttributes, setDeviceAttributes ] = useDeviceAttributes( attributes, setAttributes ); |
| 10 | const attributeNames = [ 'paddingTop', 'paddingLeft', 'paddingRight', 'paddingBottom' ]; |
| 11 | |
| 12 | return ( |
| 13 | <DimensionsControl |
| 14 | label={ __( 'Padding', 'generateblocks' ) } |
| 15 | attributeNames={ attributeNames } |
| 16 | values={ deviceAttributes.iconStyles } |
| 17 | placeholders={ attributeNames.reduce( ( o, key ) => ( |
| 18 | { ...o, [ key ]: getResponsivePlaceholder( key, attributes.iconStyles, device, '' ) } |
| 19 | ), {} ) } |
| 20 | onChange={ ( newAttributes ) => setDeviceAttributes( newAttributes, 'iconStyles' ) } |
| 21 | /> |
| 22 | ); |
| 23 | } |
| 24 |