store
1 year ago
AddonRow.jsx
1 year ago
App.jsx
1 year ago
Metabox.jsx
1 year ago
Modal.jsx
1 year ago
Notices.jsx
1 year ago
Select2.jsx
1 year ago
Settings.jsx
1 year ago
Step1.jsx
1 year ago
Step2.jsx
1 year ago
Step3.jsx
1 year ago
StepWrapper.jsx
1 year ago
main.js
1 year ago
Select2.jsx
136 lines
| 1 | /** |
| 2 | * External Dependencies |
| 3 | */ |
| 4 | import 'select2'; |
| 5 | import jQuery from 'jquery'; |
| 6 | import shallowEqualFuzzy from 'shallow-equal-fuzzy'; |
| 7 | |
| 8 | /** |
| 9 | * WordPress Dependencies |
| 10 | */ |
| 11 | import { useEffect, useRef, useState, forwardRef } from '@wordpress/element'; |
| 12 | |
| 13 | const namespace = 'react-select2'; |
| 14 | |
| 15 | const Select2 = forwardRef((props, ref) => { |
| 16 | const { |
| 17 | defaultValue = '', |
| 18 | value: propValue, |
| 19 | data = [], |
| 20 | events = [ |
| 21 | [`change.${namespace}`, 'onChange'], |
| 22 | [`select2:open.${namespace}`, 'onOpen'], |
| 23 | [`select2:close.${namespace}`, 'onClose'], |
| 24 | [`select2:select.${namespace}`, 'onSelect'], |
| 25 | [`select2:unselect.${namespace}`, 'onUnselect'], |
| 26 | ], |
| 27 | options = {}, |
| 28 | multiple = false, |
| 29 | onChange, |
| 30 | onOpen, |
| 31 | onClose, |
| 32 | onSelect, |
| 33 | onUnselect, |
| 34 | ...rest |
| 35 | } = props; |
| 36 | |
| 37 | const selectRef = ref || useRef(null); |
| 38 | const [internalValue, setInternalValue] = useState(propValue || defaultValue); |
| 39 | |
| 40 | useEffect(() => { |
| 41 | const $el = jQuery(selectRef.current); |
| 42 | |
| 43 | // Initialize select2 |
| 44 | $el.select2(prepareOptions(options)); |
| 45 | attachEventHandlers($el); |
| 46 | |
| 47 | // Set initial value |
| 48 | updateSelect2Value($el, internalValue); |
| 49 | |
| 50 | return () => { |
| 51 | // Cleanup: destroy select2 instance |
| 52 | detachEventHandlers($el); |
| 53 | $el.select2('destroy'); |
| 54 | }; |
| 55 | }, []); |
| 56 | |
| 57 | useEffect(() => { |
| 58 | const $el = jQuery(selectRef.current); |
| 59 | |
| 60 | // Update select2 options if they change |
| 61 | $el.select2(prepareOptions(options)); |
| 62 | |
| 63 | // Update value if propValue changes |
| 64 | if (propValue !== undefined && !fuzzyValuesEqual($el.val(), propValue)) { |
| 65 | updateSelect2Value($el, propValue); |
| 66 | } |
| 67 | }, [propValue, options]); |
| 68 | |
| 69 | const prepareOptions = options => { |
| 70 | const opt = { ...options }; |
| 71 | if (typeof opt.dropdownParent === 'string') { |
| 72 | opt.dropdownParent = jQuery(opt.dropdownParent); |
| 73 | } |
| 74 | return opt; |
| 75 | }; |
| 76 | |
| 77 | const attachEventHandlers = $el => { |
| 78 | const handlers = { onChange, onOpen, onClose, onSelect, onUnselect }; |
| 79 | events.forEach(([event, handlerName]) => { |
| 80 | if (handlers[handlerName]) { |
| 81 | $el.on(event, handlers[handlerName]); |
| 82 | } |
| 83 | }); |
| 84 | }; |
| 85 | |
| 86 | const detachEventHandlers = $el => { |
| 87 | events.forEach(([event]) => { |
| 88 | $el.off(event); |
| 89 | }); |
| 90 | }; |
| 91 | |
| 92 | const updateSelect2Value = ($el, value) => { |
| 93 | $el.off(`change.${namespace}`).val(value).trigger('change'); |
| 94 | if (onChange) { |
| 95 | $el.on(`change.${namespace}`, onChange); |
| 96 | } |
| 97 | }; |
| 98 | |
| 99 | const fuzzyValuesEqual = (currentValue, newValue) => { |
| 100 | return (currentValue === null && newValue === '') || shallowEqualFuzzy(currentValue, newValue); |
| 101 | }; |
| 102 | |
| 103 | const makeOption = item => { |
| 104 | if (typeof item === 'object') { |
| 105 | const { value, label, ...itemParams } = item; |
| 106 | return ( |
| 107 | <option key={`option-${value}`} value={value} {...itemParams}> |
| 108 | {label} |
| 109 | </option> |
| 110 | ); |
| 111 | } |
| 112 | |
| 113 | return ( |
| 114 | <option key={`option-${item}`} value={item}> |
| 115 | {item} |
| 116 | </option> |
| 117 | ); |
| 118 | }; |
| 119 | |
| 120 | return ( |
| 121 | <select ref={selectRef} {...rest}> |
| 122 | {data.map((item, index) => |
| 123 | item.children ? ( |
| 124 | <optgroup key={`optgroup-${index}`} label={item.label} {...item}> |
| 125 | {item.children.map(child => makeOption(child))} |
| 126 | </optgroup> |
| 127 | ) : ( |
| 128 | makeOption(item) |
| 129 | ) |
| 130 | )} |
| 131 | </select> |
| 132 | ); |
| 133 | }); |
| 134 | |
| 135 | export default Select2; |
| 136 |