edit.js
253 lines
| 1 | import { |
| 2 | fieldTypesList, |
| 3 | maskPlaceholdersList, |
| 4 | maskTypesList, |
| 5 | maskVisibilitiesList, |
| 6 | } from './options'; |
| 7 | import preview from './preview'; |
| 8 | |
| 9 | const { |
| 10 | ToolBarFields, |
| 11 | BlockName, |
| 12 | BlockLabel, |
| 13 | BlockDescription, |
| 14 | AdvancedFields, |
| 15 | FieldWrapper, |
| 16 | FieldSettingsWrapper, |
| 17 | ValidationToggleGroup, |
| 18 | ValidationBlockMessage, |
| 19 | BlockAdvancedValue, |
| 20 | EditAdvancedRulesButton, |
| 21 | BaseHelp, |
| 22 | AdvancedInspectorControl, |
| 23 | AttributeHelp, |
| 24 | } = JetFBComponents; |
| 25 | const { |
| 26 | useIsAdvancedValidation, |
| 27 | useUniqueNameOnDuplicate, |
| 28 | } = JetFBHooks; |
| 29 | const { |
| 30 | __, |
| 31 | } = wp.i18n; |
| 32 | const { |
| 33 | InspectorControls, |
| 34 | useBlockProps, |
| 35 | } = wp.blockEditor; |
| 36 | |
| 37 | const { |
| 38 | TextControl, |
| 39 | SelectControl, |
| 40 | ToggleControl, |
| 41 | PanelBody, |
| 42 | __experimentalNumberControl, |
| 43 | } = wp.components; |
| 44 | |
| 45 | let { NumberControl } = wp.components; |
| 46 | |
| 47 | NumberControl = NumberControl || __experimentalNumberControl; |
| 48 | |
| 49 | export default function TextEdit( props ) { |
| 50 | const { |
| 51 | attributes, |
| 52 | setAttributes, |
| 53 | isSelected, |
| 54 | editProps: { uniqKey, attrHelp }, |
| 55 | } = props; |
| 56 | |
| 57 | const blockProps = useBlockProps(); |
| 58 | const isAdvancedValidation = useIsAdvancedValidation(); |
| 59 | |
| 60 | useUniqueNameOnDuplicate(); |
| 61 | |
| 62 | if ( attributes.isPreview ) { |
| 63 | return <div style={ { |
| 64 | width: '100%', |
| 65 | display: 'flex', |
| 66 | justifyContent: 'center', |
| 67 | } }> |
| 68 | { preview } |
| 69 | </div>; |
| 70 | } |
| 71 | |
| 72 | return [ |
| 73 | <ToolBarFields |
| 74 | key={ uniqKey( 'ToolBarFields' ) } |
| 75 | { ...props } |
| 76 | />, |
| 77 | isSelected && <InspectorControls |
| 78 | key={ uniqKey( 'InspectorControls' ) } |
| 79 | > |
| 80 | <PanelBody title={ __( 'General', 'jet-form-builder' ) }> |
| 81 | <BlockLabel/> |
| 82 | <BlockName/> |
| 83 | <BlockDescription/> |
| 84 | </PanelBody> |
| 85 | <PanelBody title={ __( 'Value', 'jet-form-builder' ) }> |
| 86 | <BlockAdvancedValue/> |
| 87 | </PanelBody> |
| 88 | <FieldSettingsWrapper { ...props }> |
| 89 | <SelectControl |
| 90 | key="field_type" |
| 91 | label={ __( 'Field Type' ) } |
| 92 | labelPosition="top" |
| 93 | value={ attributes.field_type } |
| 94 | onChange={ newValue => { |
| 95 | setAttributes( { field_type: newValue } ); |
| 96 | } } |
| 97 | options={ fieldTypesList } |
| 98 | /> |
| 99 | <AdvancedInspectorControl |
| 100 | value={ attributes.minlength } |
| 101 | label={ __( 'Min length (symbols)', 'jet-form-builder' ) } |
| 102 | onChangePreset={ minlength => setAttributes( |
| 103 | { minlength } ) } |
| 104 | > |
| 105 | { ( { instanceId } ) => ( |
| 106 | <TextControl |
| 107 | id={ instanceId } |
| 108 | className="jet-fb m-unset" |
| 109 | value={ attributes.minlength } |
| 110 | onChange={ minlength => setAttributes( |
| 111 | { minlength } ) } |
| 112 | /> |
| 113 | ) } |
| 114 | </AdvancedInspectorControl> |
| 115 | <AttributeHelp name="minlength"/> |
| 116 | <AdvancedInspectorControl |
| 117 | value={ attributes.maxlength } |
| 118 | label={ __( 'Max length (symbols)', 'jet-form-builder' ) } |
| 119 | onChangePreset={ maxlength => setAttributes( |
| 120 | { maxlength } ) } |
| 121 | > |
| 122 | { ( { instanceId } ) => <TextControl |
| 123 | id={ instanceId } |
| 124 | className="jet-fb m-unset" |
| 125 | value={ attributes.maxlength } |
| 126 | onChange={ maxlength => setAttributes( { maxlength } ) } |
| 127 | /> } |
| 128 | </AdvancedInspectorControl> |
| 129 | <AttributeHelp name="maxlength"/> |
| 130 | <ToggleControl |
| 131 | key={ 'enable_input_mask' } |
| 132 | label={ __( 'Set Input Mask' ) } |
| 133 | checked={ attributes.enable_input_mask } |
| 134 | help={ __( |
| 135 | 'Check this to setup specific input format for the current field' ) } |
| 136 | onChange={ newVal => { |
| 137 | setAttributes( { enable_input_mask: newVal } ); |
| 138 | } } |
| 139 | /> |
| 140 | { attributes.enable_input_mask && <React.Fragment> |
| 141 | <ToggleControl |
| 142 | label={ __( |
| 143 | 'Clear mask before submit', |
| 144 | 'jet-form-builder', |
| 145 | ) } |
| 146 | checked={ attributes.clear_on_submit } |
| 147 | onChange={ clear_on_submit => setAttributes( |
| 148 | { clear_on_submit }, |
| 149 | ) } |
| 150 | /> |
| 151 | <SelectControl |
| 152 | key="mask_type" |
| 153 | label={ __( 'Mask type' ) } |
| 154 | labelPosition="top" |
| 155 | value={ attributes.mask_type } |
| 156 | onChange={ ( newValue ) => { |
| 157 | setAttributes( { mask_type: newValue } ); |
| 158 | } } |
| 159 | options={ maskTypesList } |
| 160 | /> |
| 161 | <TextControl |
| 162 | key="input_mask" |
| 163 | label={ __( 'Input mask' ) } |
| 164 | value={ attributes.input_mask } |
| 165 | onChange={ ( newValue ) => { |
| 166 | setAttributes( { input_mask: newValue } ); |
| 167 | } } |
| 168 | /> |
| 169 | { ( |
| 170 | !attributes.mask_type |
| 171 | ) && <BaseHelp style={ { marginBottom: '2em' } }> |
| 172 | { attrHelp( 'input_mask_default' ) } |
| 173 | </BaseHelp> } |
| 174 | |
| 175 | { 'datetime' === attributes.mask_type && ( |
| 176 | <BaseHelp style={ { marginBottom: '2em' } }> |
| 177 | { __( 'Examples:', |
| 178 | 'jet-form-builder' ) } dd/mm/yyyy, |
| 179 | mm/dd/yyyy<br/> |
| 180 | { __( 'More info - ', 'jet-form-builder' ) } |
| 181 | <a href={ attrHelp( 'input_mask_datetime_link' ) } |
| 182 | target="_blank">{ __( 'here', |
| 183 | 'jet-form-builder' ) }</a> |
| 184 | </BaseHelp> |
| 185 | ) } |
| 186 | |
| 187 | <SelectControl |
| 188 | key="mask_visibility" |
| 189 | label={ __( 'Mask visibility' ) } |
| 190 | labelPosition="top" |
| 191 | value={ attributes.mask_visibility } |
| 192 | onChange={ ( newValue ) => { |
| 193 | setAttributes( { mask_visibility: newValue } ); |
| 194 | } } |
| 195 | options={ maskVisibilitiesList } |
| 196 | /> |
| 197 | <SelectControl |
| 198 | key="mask_placeholder" |
| 199 | label={ __( 'Mask placeholder' ) } |
| 200 | labelPosition="top" |
| 201 | value={ attributes.mask_placeholder } |
| 202 | onChange={ ( newValue ) => { |
| 203 | setAttributes( { mask_placeholder: newValue } ); |
| 204 | } } |
| 205 | options={ maskPlaceholdersList } |
| 206 | /> |
| 207 | </React.Fragment> } |
| 208 | </FieldSettingsWrapper> |
| 209 | <PanelBody |
| 210 | title={ __( 'Validation', 'jet-form-builder' ) } |
| 211 | > |
| 212 | <ValidationToggleGroup/> |
| 213 | { isAdvancedValidation && <> |
| 214 | <EditAdvancedRulesButton/> |
| 215 | { 'email' === attributes.field_type && ( |
| 216 | <ValidationBlockMessage name="email"/> |
| 217 | ) } |
| 218 | { 'url' === attributes.field_type && ( |
| 219 | <ValidationBlockMessage name="url"/> |
| 220 | ) } |
| 221 | { attributes.enable_input_mask && ( |
| 222 | <ValidationBlockMessage name="inputmask"/> |
| 223 | ) } |
| 224 | { Boolean( attributes.minlength ) && <> |
| 225 | <ValidationBlockMessage name="char_min"/> |
| 226 | </> } |
| 227 | { Boolean( attributes.maxlength ) && <> |
| 228 | <ValidationBlockMessage name="char_max"/> |
| 229 | </> } |
| 230 | <ValidationBlockMessage name="empty"/> |
| 231 | </> } |
| 232 | </PanelBody> |
| 233 | <AdvancedFields |
| 234 | key={ uniqKey( 'AdvancedFields' ) } |
| 235 | { ...props } |
| 236 | /> |
| 237 | </InspectorControls>, |
| 238 | <div key={ uniqKey( 'viewBlock' ) } { ...blockProps }> |
| 239 | <FieldWrapper |
| 240 | key={ uniqKey( 'FieldWrapper' ) } |
| 241 | { ...props } |
| 242 | > |
| 243 | <TextControl |
| 244 | placeholder={ attributes.placeholder } |
| 245 | key={ uniqKey( 'place_holder_block' ) } |
| 246 | onChange={ () => { |
| 247 | } } |
| 248 | /> |
| 249 | </FieldWrapper> |
| 250 | </div>, |
| 251 | ]; |
| 252 | }; |
| 253 |