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
FieldWithPreset.js
59 lines
| 1 | import ActionModal from '../../action-modal/components/ActionModal'; |
| 2 | |
| 3 | const { |
| 4 | Path, |
| 5 | SVG, |
| 6 | BaseControl, |
| 7 | } = wp.components; |
| 8 | |
| 9 | const { |
| 10 | useState, |
| 11 | } = wp.element; |
| 12 | |
| 13 | function FieldWithPreset( { |
| 14 | children = null, |
| 15 | ModalEditor, |
| 16 | triggerClasses = [], |
| 17 | baseControlProps = {}, |
| 18 | } ) { |
| 19 | |
| 20 | const [ modalState, setModalState ] = useState( false ); |
| 21 | |
| 22 | const changeModalState = () => { |
| 23 | setModalState( prev => !prev ); |
| 24 | }; |
| 25 | const classNames = [ |
| 26 | 'jet-form-dynamic-preset__trigger', |
| 27 | ...triggerClasses, |
| 28 | ].join( ' ' ); |
| 29 | |
| 30 | return <> |
| 31 | <BaseControl |
| 32 | className="jet-form-dynamic-preset" |
| 33 | { ...baseControlProps } |
| 34 | > |
| 35 | { children } |
| 36 | <div |
| 37 | className={ classNames } |
| 38 | onClick={ changeModalState } |
| 39 | ><SVG viewBox="0 0 54 64" fill="none" |
| 40 | xmlns="http://www.w3.org/2000/svg"><Path |
| 41 | d="M42.6396 26.4347C37.8682 27.3436 32.5666 28.0252 27.1894 28.0252C21.8121 28.0252 16.4348 27.3436 11.7391 26.4347C6.96774 25.4502 3.18093 23.8597 0.37868 21.9663L0.37868 28.0252C0.37868 29.5399 1.59046 31.1304 3.78682 32.4179C5.98317 33.7054 9.46704 34.9172 13.6325 35.5988C17.798 36.2805 22.115 36.8106 27.1894 36.8106C32.2637 36.8106 36.6564 36.5077 40.7462 35.5988C44.8359 34.69 48.3198 33.7054 50.5162 32.4179C52.7125 31.1304 54 29.5399 54 28.0252L54 21.9663C51.122 23.8597 47.3352 25.4502 42.6396 26.4347ZM42.6396 53.5484C37.8682 54.5329 32.5666 55.1388 27.1894 55.1388C21.8121 55.1388 16.4348 54.5329 11.7391 53.5484C7.04348 52.5638 3.18093 51.0491 0.378682 49.1556L0.378682 55.1388C0.378683 56.7293 1.59046 58.3197 3.78682 59.5315C6.36186 60.819 9.46705 62.1066 13.6325 62.7125C17.7223 63.697 22.115 64 27.1894 64C32.2637 64 36.6564 63.697 40.7462 62.7125C44.8359 61.8036 48.3198 60.819 50.5162 59.5315C52.7125 57.9411 54 56.7293 54 54.8359L54 48.8527C51.122 51.0491 47.3352 52.2608 42.6396 53.5484ZM42.6396 39.9915C37.8682 40.9004 32.5666 41.582 27.1894 41.582C21.8121 41.582 16.4348 40.9004 11.7391 39.9915C6.96774 39.007 3.18093 37.4922 0.378681 35.5988L0.378681 41.582C0.378681 43.1725 1.59046 44.6872 3.78682 45.9747C6.36185 47.2622 9.46705 48.474 13.6325 49.1556C17.7223 50.0645 22.115 50.3674 27.1894 50.3674C32.2637 50.3674 36.6564 50.0645 40.7462 49.1556C44.8359 48.1711 48.3198 47.2622 50.5162 45.9747C52.7125 44.3843 54 43.1725 54 41.582L54 35.5988C51.122 37.4922 47.3352 39.007 42.6396 39.9915ZM40.4432 2.12337C36.3535 1.13879 31.885 0.835848 26.8864 0.835849C21.8878 0.835849 17.4194 1.13879 13.2539 2.12337C9.08836 3.10794 5.68022 4.01678 3.48387 5.3043C1.28751 6.59181 -3.4782e-06 8.10654 -3.33916e-06 9.697L-2.95513e-06 14.0897C-2.81609e-06 15.6802 1.28752 17.2706 3.48387 18.5582C6.05891 19.7699 9.1641 21.0575 13.2539 21.6633C17.3436 22.2692 21.8121 22.9509 26.8864 22.9509C31.9607 22.9509 36.3535 22.9509 40.4432 22.345C44.533 21.7391 48.0169 20.4516 50.2132 19.164C52.7125 17.5736 54 15.9831 54 14.3927L54 9.99995C54 8.40948 52.7125 6.81902 50.5162 5.60724C48.3198 4.39546 44.533 2.72926 40.4432 2.12337Z" |
| 42 | fill="#7E8993"/></SVG> |
| 43 | </div> |
| 44 | </BaseControl> |
| 45 | { modalState && ( |
| 46 | <ActionModal |
| 47 | onRequestClose={ changeModalState } |
| 48 | classNames={ [ 'width-60' ] } |
| 49 | title={ 'Edit Preset' } |
| 50 | > |
| 51 | { modalProps => <ModalEditor |
| 52 | { ...modalProps } |
| 53 | /> } |
| 54 | </ActionModal> |
| 55 | ) } |
| 56 | </>; |
| 57 | } |
| 58 | |
| 59 | export default FieldWithPreset; |