AvailableMapFieldPreset.js
2 years ago
DynamicPreset.js
2 years ago
FieldWithPreset.js
2 years ago
GlobalFieldPreset.js
2 years ago
MapFieldPreset.js
2 years ago
PresetButton.js
2 years ago
withPreset.js
2 years ago
AvailableMapFieldPreset.js
145 lines
| 1 | import GroupedSelectControl from '../../components/GroupedSelectControl'; |
| 2 | |
| 3 | const { |
| 4 | TextControl, |
| 5 | SelectControl, |
| 6 | CustomSelectControl, |
| 7 | Card, |
| 8 | CardBody, |
| 9 | CardHeader, |
| 10 | } = wp.components; |
| 11 | |
| 12 | function AvailableMapFieldPreset( { |
| 13 | fieldsMap, |
| 14 | field, |
| 15 | index, |
| 16 | value, |
| 17 | onChangeValue, |
| 18 | isMapFieldVisible, |
| 19 | } ) { |
| 20 | |
| 21 | let currentVal = null; |
| 22 | |
| 23 | if ( ! fieldsMap ) { |
| 24 | fieldsMap = {}; |
| 25 | } |
| 26 | |
| 27 | currentVal = fieldsMap[ field ]; |
| 28 | |
| 29 | if ( ! currentVal || 'object' !== typeof currentVal ) { |
| 30 | currentVal = {}; |
| 31 | } |
| 32 | |
| 33 | const AvailableFieldWrapper = ( { field, name, index, fIndex, children } ) => <Card |
| 34 | key={ field + name + index + fIndex } |
| 35 | size={ 'extraSmall' } |
| 36 | style={ { marginBottom: '10px' } } |
| 37 | > |
| 38 | <CardHeader> |
| 39 | <span className='jet-label-overflow'>{ field }</span> |
| 40 | </CardHeader> |
| 41 | <CardBody |
| 42 | key={ field + name + index + fIndex } |
| 43 | className={ 'jet-form-preset__fields-map-item' } |
| 44 | > |
| 45 | { children } |
| 46 | </CardBody> |
| 47 | </Card>; |
| 48 | |
| 49 | function AvailableFieldWrapperFunc( { field, name, index, fIndex }, children ) { |
| 50 | return <Card |
| 51 | key={ field + name + index + fIndex } |
| 52 | size={ 'extraSmall' } |
| 53 | style={ { marginBottom: '10px' } } |
| 54 | > |
| 55 | <CardHeader> |
| 56 | <span className='jet-label-overflow'>{ field }</span> |
| 57 | </CardHeader> |
| 58 | <CardBody |
| 59 | key={ field + name + index + fIndex } |
| 60 | className={ 'jet-form-preset__fields-map-item' } |
| 61 | > |
| 62 | { children } |
| 63 | </CardBody> |
| 64 | </Card>; |
| 65 | } |
| 66 | |
| 67 | return <React.Fragment key={ `map_field_preset_${ field + index }` }> |
| 68 | |
| 69 | { window.JetFormEditorData.presetConfig.map_fields.map( ( data, fIndex ) => { |
| 70 | const props = { field, name: data.name, index, fIndex }; |
| 71 | |
| 72 | const uniqKey = 'control_' + field + data.name + index + fIndex; |
| 73 | |
| 74 | switch ( data.type ) { |
| 75 | case 'text': |
| 76 | return ( isMapFieldVisible( value, data, field ) && |
| 77 | AvailableFieldWrapperFunc( props, <TextControl |
| 78 | key={ uniqKey + 'TextControl' } |
| 79 | placeholder={ data.label } |
| 80 | value={ currentVal[ data.name ] } |
| 81 | onChange={ newVal => { |
| 82 | currentVal[ data.name ] = newVal; |
| 83 | onChangeValue( { |
| 84 | ...fieldsMap, |
| 85 | [ field ]: currentVal, |
| 86 | }, 'fields_map' ); |
| 87 | } } |
| 88 | /> ) |
| 89 | ); |
| 90 | case 'select': |
| 91 | return ( isMapFieldVisible( value, data, field ) && |
| 92 | <AvailableFieldWrapper { ...props } key={ uniqKey }> |
| 93 | <SelectControl |
| 94 | options={ data.options } |
| 95 | //label={ data.label } |
| 96 | labelPosition="top" |
| 97 | value={ currentVal[ data.name ] } |
| 98 | onChange={ newVal => { |
| 99 | currentVal[ data.name ] = newVal; |
| 100 | onChangeValue( { |
| 101 | ...fieldsMap, |
| 102 | [ field ]: currentVal, |
| 103 | }, 'fields_map' ); |
| 104 | } } |
| 105 | /> |
| 106 | </AvailableFieldWrapper> |
| 107 | ); |
| 108 | case 'custom_select': |
| 109 | return ( isMapFieldVisible( value, data, field ) && |
| 110 | <AvailableFieldWrapper { ...props } key={ uniqKey }> |
| 111 | <CustomSelectControl |
| 112 | options={ data.options } |
| 113 | onChange={ ( { selectedItem } ) => { |
| 114 | currentVal[ data.name ] = selectedItem.key; |
| 115 | onChangeValue( { |
| 116 | ...fieldsMap, |
| 117 | [ field ]: currentVal, |
| 118 | }, 'fields_map' ); |
| 119 | } } |
| 120 | value={ data.options.find( option => option.key === currentVal[ data.name ] ) } |
| 121 | /> |
| 122 | </AvailableFieldWrapper> ); |
| 123 | case 'grouped_select': |
| 124 | return ( isMapFieldVisible( value, data, field ) && |
| 125 | <AvailableFieldWrapper { ...props } key={ uniqKey }> |
| 126 | <GroupedSelectControl |
| 127 | options={ data.options } |
| 128 | //label={ data.label } |
| 129 | labelPosition="top" |
| 130 | value={ currentVal[ data.name ] } |
| 131 | onChange={ newVal => { |
| 132 | currentVal[ data.name ] = newVal; |
| 133 | onChangeValue( { |
| 134 | ...fieldsMap, |
| 135 | [ field ]: currentVal, |
| 136 | }, 'fields_map' ); |
| 137 | } } |
| 138 | /> |
| 139 | </AvailableFieldWrapper> ); |
| 140 | } |
| 141 | } ) } |
| 142 | </React.Fragment>; |
| 143 | } |
| 144 | |
| 145 | export default AvailableMapFieldPreset; |