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
FieldWrapper.js
133 lines
| 1 | import { |
| 2 | classnames, |
| 3 | } from '../../tools'; |
| 4 | import useSelectPostMeta from '../../hooks/useSelectPostMeta'; |
| 5 | import ChangeNameByLabel from '../helpers/ChangeNameByLabel'; |
| 6 | import useUniqKey from '../hooks/useUniqKey'; |
| 7 | |
| 8 | const { |
| 9 | BaseControl, |
| 10 | } = wp.components; |
| 11 | |
| 12 | const { |
| 13 | RichText, |
| 14 | } = wp.blockEditor; |
| 15 | let { |
| 16 | __experimentalUseFocusOutside, |
| 17 | useFocusOutside, |
| 18 | } = wp.compose; |
| 19 | |
| 20 | useFocusOutside = useFocusOutside || __experimentalUseFocusOutside; |
| 21 | |
| 22 | const { __ } = wp.i18n; |
| 23 | |
| 24 | function RichDescription( content ) { |
| 25 | return <small style={ { |
| 26 | whiteSpace: 'nowrap', |
| 27 | padding: '0.2em 0.8em 0 0', |
| 28 | color: '#8e8a8a', |
| 29 | } }> |
| 30 | { content } |
| 31 | </small>; |
| 32 | } |
| 33 | |
| 34 | function FieldWrapper( props ) { |
| 35 | const { |
| 36 | attributes, |
| 37 | children, |
| 38 | wrapClasses = [], |
| 39 | valueIfEmptyLabel = '', |
| 40 | setAttributes, |
| 41 | childrenPosition = 'between', |
| 42 | } = props; |
| 43 | |
| 44 | const uniqKey = useUniqKey(); |
| 45 | |
| 46 | const _jf_args = useSelectPostMeta( '_jf_args' ); |
| 47 | |
| 48 | function onBlurLabel() { |
| 49 | ChangeNameByLabel( attributes, setAttributes ); |
| 50 | } |
| 51 | |
| 52 | const ref = useFocusOutside( onBlurLabel ); |
| 53 | |
| 54 | function renderLabel() { |
| 55 | return <BaseControl.VisualLabel> |
| 56 | { RichDescription( __( 'input label:', 'jet-form-builder' ) ) } |
| 57 | <div |
| 58 | className="jet-form-builder__label" |
| 59 | > |
| 60 | <RichText |
| 61 | key={ uniqKey( 'rich-label' ) } |
| 62 | placeholder="Label..." |
| 63 | allowedFormats={ [] } |
| 64 | value={ attributes.label |
| 65 | ? attributes.label |
| 66 | : valueIfEmptyLabel } |
| 67 | onChange={ newLabel => setAttributes( |
| 68 | { label: newLabel } ) } |
| 69 | isSelected={ false } |
| 70 | { ...ref } |
| 71 | /> |
| 72 | { attributes.required && |
| 73 | <span className={ 'jet-form-builder__required' }> |
| 74 | { _jf_args.required_mark ? _jf_args.required_mark : '*' } |
| 75 | </span> } |
| 76 | </div> |
| 77 | </BaseControl.VisualLabel>; |
| 78 | } |
| 79 | |
| 80 | function renderDescription() { |
| 81 | return <div className="jet-form-builder__desc--wrapper"> |
| 82 | { RichDescription( |
| 83 | __( 'input description:', 'jet-form-builder' ) ) } |
| 84 | <BaseControl key={ 'custom_help_description' } |
| 85 | className={ 'jet-form-builder__desc' }> |
| 86 | <div className="components-base-control__help"> |
| 87 | <RichText |
| 88 | key={ uniqKey( 'rich-description' ) } |
| 89 | tagName="small" |
| 90 | placeholder="Description..." |
| 91 | allowedFormats={ [] } |
| 92 | value={ attributes.desc } |
| 93 | onChange={ desc => setAttributes( { desc } ) } |
| 94 | style={ { marginTop: '0px' } } |
| 95 | /> |
| 96 | </div> |
| 97 | </BaseControl> |
| 98 | </div>; |
| 99 | } |
| 100 | |
| 101 | if ( 'row' === _jf_args.fields_layout ) { |
| 102 | wrapClasses.push( 'jet-form-builder-row__flex' ); |
| 103 | } |
| 104 | |
| 105 | return ( |
| 106 | <BaseControl |
| 107 | key={ uniqKey( 'placeHolder_block' ) } |
| 108 | className={ classnames( |
| 109 | 'jet-form-builder__field-wrap', |
| 110 | 'jet-form-builder-row', |
| 111 | wrapClasses, |
| 112 | ) } |
| 113 | > |
| 114 | { 'row' !== _jf_args.fields_layout && <> |
| 115 | { 'top' === childrenPosition && children } |
| 116 | { renderLabel() } |
| 117 | { 'between' === childrenPosition && children } |
| 118 | { renderDescription() } |
| 119 | { 'bottom' === childrenPosition && children } |
| 120 | </> } |
| 121 | { 'row' === _jf_args.fields_layout && <> |
| 122 | <div className="jet-form-builder-row__flex--label"> |
| 123 | { renderLabel() } |
| 124 | { renderDescription() } |
| 125 | </div> |
| 126 | <div |
| 127 | className="jet-form-builder-row__flex--content">{ children }</div> |
| 128 | </> } |
| 129 | </BaseControl> |
| 130 | ); |
| 131 | } |
| 132 | |
| 133 | export default FieldWrapper; |