AdvancedFields.js
2 years ago
AttributeHelp.js
2 years ago
BlockAddPrevButton.js
2 years ago
BlockAdvancedValue.js
2 years ago
BlockClassName.js
2 years ago
BlockDefaultValue.js
2 years ago
BlockDescription.js
2 years ago
BlockLabel.js
2 years ago
BlockName.js
2 years ago
BlockPlaceholder.js
2 years ago
BlockPrevButtonLabel.js
2 years ago
BlockRequired.js
2 years ago
BlockVisibility.js
2 years ago
FieldControl.js
2 years ago
FieldSettingsWrapper.js
2 years ago
FieldWrapper.js
2 years ago
GeneralFields.js
2 years ago
SelectVariations.js
2 years ago
ToggleGroupVariations.js
2 years ago
ToolBarDefault.js
2 years ago
ToolBarFields.js
2 years ago
BlockLabel.js
45 lines
| 1 | import useBlockAttributes from '../hooks/useBlockAttributes'; |
| 2 | import ChangeNameByLabel from '../helpers/ChangeNameByLabel'; |
| 3 | import AttributeHelp from './AttributeHelp'; |
| 4 | |
| 5 | const { |
| 6 | __, |
| 7 | } = wp.i18n; |
| 8 | const { |
| 9 | TextControl, |
| 10 | } = wp.components; |
| 11 | |
| 12 | let { |
| 13 | __experimentalUseFocusOutside, |
| 14 | useFocusOutside, |
| 15 | } = wp.compose; |
| 16 | |
| 17 | useFocusOutside = useFocusOutside || __experimentalUseFocusOutside; |
| 18 | |
| 19 | function BlockLabel( { label, help } ) { |
| 20 | const [ |
| 21 | attributes, |
| 22 | setAttributes, |
| 23 | ] = useBlockAttributes(); |
| 24 | |
| 25 | function onBlurLabel() { |
| 26 | ChangeNameByLabel( attributes, setAttributes ); |
| 27 | } |
| 28 | |
| 29 | const ref = useFocusOutside( onBlurLabel ); |
| 30 | |
| 31 | return <> |
| 32 | <TextControl |
| 33 | label={ label ?? __( 'Field Label', 'jet-form-builder' ) } |
| 34 | className="jet-fb m-unset" |
| 35 | value={ attributes.label } |
| 36 | onChange={ label => setAttributes( { label } ) } |
| 37 | { ...ref } |
| 38 | /> |
| 39 | <AttributeHelp name="label"> |
| 40 | { help ?? '' } |
| 41 | </AttributeHelp> |
| 42 | </>; |
| 43 | } |
| 44 | |
| 45 | export default BlockLabel; |