| 1 |
import { __ } from '@wordpress/i18n'; |
| 2 |
import { useState } from '@wordpress/element'; |
| 3 |
import { |
| 4 |
SelectControl, |
| 5 |
TextControl, |
| 6 |
Popover, |
| 7 |
Button, |
| 8 |
Icon |
| 9 |
} from '@wordpress/components'; |
| 10 |
|
| 11 |
const TypographyControls = ({ label, attributes, setAttributes, attributeKey, nextDefaultSize }) => { |
| 12 |
const [isVisible, setIsVisible] = useState(false); |
| 13 |
const typography = attributes[attributeKey] || {}; |
| 14 |
|
| 15 |
const _nextDefaultSize = nextDefaultSize || false; |
| 16 |
|
| 17 |
const toggleVisible = () => { |
| 18 |
setIsVisible((state) => !state); |
| 19 |
}; |
| 20 |
|
| 21 |
const updateTypography = (newAttrs) => { |
| 22 |
const nextTypography = { |
| 23 |
...typography, |
| 24 |
...newAttrs |
| 25 |
}; |
| 26 |
|
| 27 |
setAttributes({ |
| 28 |
[attributeKey]: nextTypography |
| 29 |
}); |
| 30 |
}; |
| 31 |
|
| 32 |
return ( |
| 33 |
<div className="eshb-typography-control" style={{ position: 'relative' }}> |
| 34 |
<Button |
| 35 |
variant="secondary" |
| 36 |
onClick={toggleVisible} |
| 37 |
style={{ width: '100%', justifyContent: 'space-between', marginBottom: '15px', boxShadow: 'none' }} |
| 38 |
> |
| 39 |
{label} |
| 40 |
<Icon icon="plus" /> |
| 41 |
</Button> |
| 42 |
{isVisible && ( |
| 43 |
<Popover |
| 44 |
position="bottom center" |
| 45 |
onFocusOutside={() => setIsVisible(false)} |
| 46 |
> |
| 47 |
<div style={{ padding: '20px', width: '260px' }}> |
| 48 |
<TextControl |
| 49 |
label={__('Font Size', 'easy-hotel')} |
| 50 |
value={typography.fontSize} |
| 51 |
onChange={(val) => updateTypography({ fontSize: val })} |
| 52 |
help={__('Include unit (e.g., 14px, 1.2rem)', 'easy-hotel')} |
| 53 |
/> |
| 54 |
<SelectControl |
| 55 |
label={__('Font Weight', 'easy-hotel')} |
| 56 |
value={typography.fontWeight} |
| 57 |
options={[ |
| 58 |
{ label: __('Default', 'easy-hotel'), value: 'inherit' }, |
| 59 |
{ label: __('Thin (100)', 'easy-hotel'), value: '100' }, |
| 60 |
{ label: __('Light (300)', 'easy-hotel'), value: '300' }, |
| 61 |
{ label: __('Regular (400)', 'easy-hotel'), value: '400' }, |
| 62 |
{ label: __('Medium (500)', 'easy-hotel'), value: '500' }, |
| 63 |
{ label: __('Semi Bold (600)', 'easy-hotel'), value: '600' }, |
| 64 |
{ label: __('Bold (700)', 'easy-hotel'), value: '700' }, |
| 65 |
{ label: __('Extra Bold (800)', 'easy-hotel'), value: '800' }, |
| 66 |
{ label: __('Black (900)', 'easy-hotel'), value: '900' }, |
| 67 |
]} |
| 68 |
onChange={(val) => updateTypography({ fontWeight: val })} |
| 69 |
__next40pxDefaultSize={true} |
| 70 |
__nextHasNoMarginBottom={true} |
| 71 |
/> |
| 72 |
<SelectControl |
| 73 |
label={__('Text Transform', 'easy-hotel')} |
| 74 |
value={typography.textTransform} |
| 75 |
options={[ |
| 76 |
{ label: __('None', 'easy-hotel'), value: 'none' }, |
| 77 |
{ label: __('Uppercase', 'easy-hotel'), value: 'uppercase' }, |
| 78 |
{ label: __('Lowercase', 'easy-hotel'), value: 'lowercase' }, |
| 79 |
{ label: __('Capitalize', 'easy-hotel'), value: 'capitalize' }, |
| 80 |
]} |
| 81 |
onChange={(val) => updateTypography({ textTransform: val })} |
| 82 |
__next40pxDefaultSize={true} |
| 83 |
__nextHasNoMarginBottom={true} |
| 84 |
/> |
| 85 |
<TextControl |
| 86 |
__next40pxDefaultSize={_nextDefaultSize} |
| 87 |
label={__('Line Height', 'easy-hotel')} |
| 88 |
value={typography.lineHeight} |
| 89 |
onChange={(val) => updateTypography({ lineHeight: val })} |
| 90 |
/> |
| 91 |
<TextControl |
| 92 |
__next40pxDefaultSize={_nextDefaultSize} |
| 93 |
label={__('Letter Spacing', 'easy-hotel')} |
| 94 |
value={typography.letterSpacing} |
| 95 |
onChange={(val) => updateTypography({ letterSpacing: val })} |
| 96 |
help={__('Include unit (e.g., 1px)', 'easy-hotel')} |
| 97 |
/> |
| 98 |
<Button |
| 99 |
variant="secondary" |
| 100 |
isSmall |
| 101 |
onClick={() => { |
| 102 |
setAttributes({ |
| 103 |
[attributeKey]: { |
| 104 |
fontSize: '', |
| 105 |
fontWeight: 'inherit', |
| 106 |
lineHeight: '', |
| 107 |
textTransform: 'none', |
| 108 |
letterSpacing: '' |
| 109 |
} |
| 110 |
}); |
| 111 |
setIsVisible(false); |
| 112 |
}} |
| 113 |
style={{ marginTop: '10px', width: '100%', justifyContent: 'center' }} |
| 114 |
> |
| 115 |
{__('Reset Typography', 'easy-hotel')} |
| 116 |
</Button> |
| 117 |
</div> |
| 118 |
</Popover> |
| 119 |
)} |
| 120 |
</div> |
| 121 |
); |
| 122 |
}; |
| 123 |
|
| 124 |
export default TypographyControls; |
| 125 |
|
