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
LetterSpacingControl.js
78 lines
| 1 | import { |
| 2 | Button, |
| 3 | RangeControl, |
| 4 | ButtonGroup |
| 5 | } from '@wordpress/components'; |
| 6 | import {useState} from '@wordpress/element'; |
| 7 | import React from "react"; |
| 8 | |
| 9 | const LetterSpacingControl = ({attributes, setAttributes}) => { |
| 10 | |
| 11 | const unitOptions = ['px', 'em']; |
| 12 | |
| 13 | const getLetterSpacingUnit = () => { |
| 14 | const letterSpacing = attributes.letter_spacing; |
| 15 | if (letterSpacing) { |
| 16 | const match = letterSpacing.match(/[a-zA-Z%]+$/); |
| 17 | return match ? match[0] : 'px'; |
| 18 | } |
| 19 | return 'px'; |
| 20 | }; |
| 21 | |
| 22 | const [unit, setUnit] = useState(getLetterSpacingUnit()); |
| 23 | const getLetterSpacingValue = () => { |
| 24 | if (attributes.letter_spacing) { |
| 25 | return parseFloat(attributes.letter_spacing); |
| 26 | } |
| 27 | return ""; |
| 28 | }; |
| 29 | |
| 30 | const handleLetterSpacingChange = (newSize) => { |
| 31 | if (!newSize) { |
| 32 | setAttributes({letter_spacing: ''}); |
| 33 | return; |
| 34 | } |
| 35 | setAttributes({letter_spacing: `${newSize}${unit}`}); |
| 36 | }; |
| 37 | |
| 38 | const handleUnitChange = (newUnit) => { |
| 39 | setUnit(newUnit); |
| 40 | const currentSize = parseFloat(attributes.letter_spacing); |
| 41 | setAttributes({letter_spacing: `${currentSize}${newUnit}`}); |
| 42 | }; |
| 43 | |
| 44 | return ( |
| 45 | <div className="letter-spacing-control"> |
| 46 | <div className="latepoint-block-header"> |
| 47 | <label className="latepoint-control-label">Letter Spacing</label> |
| 48 | |
| 49 | <div className="latepoint-block-header-actions"> |
| 50 | |
| 51 | <Button className="latepoint-block-reset" |
| 52 | onClick={() => handleLetterSpacingChange("")} |
| 53 | isSmall |
| 54 | disabled={attributes.letter_spacing === ''} |
| 55 | icon="dashicon dashicons dashicons-image-rotate" |
| 56 | /> |
| 57 | |
| 58 | <ButtonGroup className="latepoint-unit-selector"> |
| 59 | {unitOptions.map((option) => ( |
| 60 | <Button key={option} isPrimary={unit === option} onClick={() => handleUnitChange(option)}> |
| 61 | {option} |
| 62 | </Button> |
| 63 | ))} |
| 64 | </ButtonGroup> |
| 65 | </div> |
| 66 | </div> |
| 67 | <RangeControl |
| 68 | value={getLetterSpacingValue()} |
| 69 | onChange={handleLetterSpacingChange} |
| 70 | min="0" |
| 71 | max="20" |
| 72 | step="0.01" |
| 73 | /> |
| 74 | </div> |
| 75 | ) |
| 76 | }; |
| 77 | |
| 78 | export default LetterSpacingControl; |