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
LineHeightControl.js
86 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 LineHeightControl = ({attributes, setAttributes}) => { |
| 10 | |
| 11 | const unitOptions = ['px', 'em']; |
| 12 | |
| 13 | const getLineHeightUnit = () => { |
| 14 | const lineHeight = attributes.line_height; |
| 15 | if (lineHeight) { |
| 16 | const match = lineHeight.match(/[a-zA-Z%]+$/); |
| 17 | return match ? match[0] : 'px'; |
| 18 | } |
| 19 | return 'px'; |
| 20 | }; |
| 21 | |
| 22 | const [unit, setUnit] = useState(getLineHeightUnit()); |
| 23 | const getLineHeightValue = () => { |
| 24 | if (attributes.line_height) { |
| 25 | return parseFloat(attributes.line_height); |
| 26 | } |
| 27 | return ""; |
| 28 | }; |
| 29 | |
| 30 | const handleLineHeightChange = (newSize) => { |
| 31 | if (!newSize) { |
| 32 | setAttributes({line_height: ''}); |
| 33 | return; |
| 34 | } |
| 35 | setAttributes({line_height: `${newSize}${unit}`}); |
| 36 | }; |
| 37 | |
| 38 | const handleUnitChange = (newUnit) => { |
| 39 | setUnit(newUnit); |
| 40 | let newSize; |
| 41 | const currentSize = parseFloat(attributes.line_height); |
| 42 | if (unit === 'px' && newUnit !== 'px') { |
| 43 | newSize = (currentSize / 16).toFixed(2); |
| 44 | } else if (unit !== 'px' && newUnit === 'px') { |
| 45 | newSize = Math.round(currentSize * 16); |
| 46 | } else { |
| 47 | newSize = currentSize; |
| 48 | } |
| 49 | setAttributes({line_height: `${newSize}${newUnit}`}); |
| 50 | }; |
| 51 | |
| 52 | return ( |
| 53 | <div className="line-height-control"> |
| 54 | <div className="latepoint-block-header"> |
| 55 | <label className="latepoint-control-label">Line Height</label> |
| 56 | |
| 57 | <div className="latepoint-block-header-actions"> |
| 58 | |
| 59 | <Button className="latepoint-block-reset" |
| 60 | onClick={() => handleLineHeightChange("")} |
| 61 | isSmall |
| 62 | disabled={attributes.line_height === ''} |
| 63 | icon="dashicon dashicons dashicons-image-rotate" |
| 64 | /> |
| 65 | |
| 66 | <ButtonGroup className="latepoint-unit-selector"> |
| 67 | {unitOptions.map((option) => ( |
| 68 | <Button key={option} isPrimary={unit === option} onClick={() => handleUnitChange(option)}> |
| 69 | {option} |
| 70 | </Button> |
| 71 | ))} |
| 72 | </ButtonGroup> |
| 73 | </div> |
| 74 | </div> |
| 75 | <RangeControl |
| 76 | value={getLineHeightValue()} |
| 77 | onChange={handleLineHeightChange} |
| 78 | min={unit === 'px' ? 5 : 0.3125} |
| 79 | max={unit === 'px' ? 80 : 8} |
| 80 | step={unit === 'px' ? 1 : 0.1} |
| 81 | /> |
| 82 | </div> |
| 83 | ) |
| 84 | }; |
| 85 | |
| 86 | export default LineHeightControl; |