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
BoxShadowControl.js
88 lines
| 1 | import { __ } from '@wordpress/i18n'; |
| 2 | import React from "react"; |
| 3 | import { Dropdown, RangeControl, ColorIndicator, ColorPicker, Button } from '@wordpress/components'; |
| 4 | |
| 5 | const BoxShadowControl = ({ shadowAttribute, attributes, setAttributes }) => { |
| 6 | const shadowString = attributes[shadowAttribute] || ''; |
| 7 | const [x, y, blur, spread, color] = shadowString.split(' '); |
| 8 | |
| 9 | const shadowValues = { |
| 10 | x: x || '', |
| 11 | y: y || '', |
| 12 | blur: blur || '', |
| 13 | spread: spread || '', |
| 14 | color: color || '', |
| 15 | }; |
| 16 | |
| 17 | const handleBoxShadowChange = (key, value) => { |
| 18 | const newShadow = { ...shadowValues, [key]: value }; |
| 19 | const shadowString = `${newShadow.x} ${newShadow.y} ${newShadow.blur} ${newShadow.spread} ${newShadow.color}`.trim(); |
| 20 | setAttributes({ [shadowAttribute]: shadowString }); |
| 21 | }; |
| 22 | |
| 23 | const renderColorPicker = () => ( |
| 24 | <ColorPicker |
| 25 | color={shadowValues.color || ''} |
| 26 | onChangeComplete={(value) => handleBoxShadowChange('color', value.hex)} |
| 27 | disableAlpha |
| 28 | /> |
| 29 | ); |
| 30 | |
| 31 | const getValue = (value = '') => (value ? parseInt(value) : null); |
| 32 | |
| 33 | return ( |
| 34 | <> |
| 35 | <div className="lb-boxshadow-actions"> |
| 36 | <Button |
| 37 | className="latepoint-block-reset" |
| 38 | onClick={() => setAttributes({ [shadowAttribute]: "" })} |
| 39 | isSmall |
| 40 | disabled={!shadowString} |
| 41 | icon="dashicon dashicons dashicons-image-rotate" |
| 42 | /> |
| 43 | </div> |
| 44 | <RangeControl |
| 45 | label={__('Horizontal')} |
| 46 | value={getValue(shadowValues.x)} |
| 47 | onChange={(value) => handleBoxShadowChange('x', `${value}px`)} |
| 48 | min={-100} |
| 49 | max={100} |
| 50 | /> |
| 51 | <RangeControl |
| 52 | label={__('Vertical')} |
| 53 | value={getValue(shadowValues.y)} |
| 54 | onChange={(value) => handleBoxShadowChange('y', `${value}px`)} |
| 55 | min={-100} |
| 56 | max={100} |
| 57 | /> |
| 58 | <RangeControl |
| 59 | label={__('Blur')} |
| 60 | value={getValue(shadowValues.blur)} |
| 61 | onChange={(value) => handleBoxShadowChange('blur', `${value}px`)} |
| 62 | min={0} |
| 63 | max={100} |
| 64 | /> |
| 65 | <RangeControl |
| 66 | label={__('Spread')} |
| 67 | value={getValue(shadowValues.spread)} |
| 68 | onChange={(value) => handleBoxShadowChange('spread', `${value}px`)} |
| 69 | min={-100} |
| 70 | max={100} |
| 71 | /> |
| 72 | <Dropdown |
| 73 | className="lb-color-settings-dropdown" |
| 74 | renderToggle={({ isOpen, onToggle }) => ( |
| 75 | <div className="lb-row lb-color-settings-w"> |
| 76 | <div className="lb-label">{__('Color')}</div> |
| 77 | <Button onClick={onToggle} aria-expanded={isOpen}> |
| 78 | <ColorIndicator className="lb-color-indicator" colorValue={shadowValues.color || ''} /> |
| 79 | </Button> |
| 80 | </div> |
| 81 | )} |
| 82 | renderContent={renderColorPicker} |
| 83 | /> |
| 84 | </> |
| 85 | ); |
| 86 | }; |
| 87 | |
| 88 | export default BoxShadowControl; |