| 1 |
// Import vendor dependencies |
| 2 |
import PropTypes from 'prop-types'; |
| 3 |
import Select from 'react-select'; |
| 4 |
|
| 5 |
// Import utilities |
| 6 |
import {toUniqueId} from '../../utils'; |
| 7 |
import {useAccentColor} from '../../hooks'; |
| 8 |
|
| 9 |
// Import styles |
| 10 |
import './style.scss'; |
| 11 |
|
| 12 |
import {__} from '@wordpress/i18n'; |
| 13 |
|
| 14 |
const SelectControl = ({value, options, isLoading, label = null, onChange = null, placeholder = __('Select...', 'give'), width = null, isClearable = false}) => { |
| 15 |
if (options && options.length < 2) { |
| 16 |
return null; |
| 17 |
} |
| 18 |
|
| 19 |
const accentColor = useAccentColor(); |
| 20 |
|
| 21 |
const id = toUniqueId(label); |
| 22 |
|
| 23 |
const selectedOptionValue = options !== null ? options.filter((option) => option.value === value) : null; |
| 24 |
const selectStyles = { |
| 25 |
menu: (provided) => ({ |
| 26 |
...provided, |
| 27 |
zIndex: '9999', |
| 28 |
}), |
| 29 |
control: (provided) => ({ |
| 30 |
...provided, |
| 31 |
fontSize: '14px', |
| 32 |
fontFamily: 'Montserrat, Arial, Helvetica, sans-serif', |
| 33 |
fontWeight: '500', |
| 34 |
color: '#828382', |
| 35 |
lineHeight: '1.2', |
| 36 |
boxSizing: 'border-box', |
| 37 |
marginTop: '8px', |
| 38 |
border: '1px solid #b8b8b8', |
| 39 |
borderRadius: '4px', |
| 40 |
}), |
| 41 |
input: (provided) => ({ |
| 42 |
...provided, |
| 43 |
fontSize: '14px', |
| 44 |
fontFamily: 'Montserrat, Arial, Helvetica, sans-serif', |
| 45 |
fontWeight: '500', |
| 46 |
color: '#828382', |
| 47 |
lineHeight: '1.2', |
| 48 |
}), |
| 49 |
valueContainer: (provided) => ({ |
| 50 |
...provided, |
| 51 |
padding: '7px 12px', |
| 52 |
}), |
| 53 |
clearIndicator: (provided) => ({ |
| 54 |
...provided, |
| 55 |
padding: '0px', |
| 56 |
}), |
| 57 |
dropdownIndicator: (provided) => ({ |
| 58 |
...provided, |
| 59 |
padding: '0 8px 0 0', |
| 60 |
}), |
| 61 |
option: (provided, state) => ({ |
| 62 |
...provided, |
| 63 |
fontSize: '14px', |
| 64 |
fontFamily: 'Montserrat, Arial, Helvetica, sans-serif', |
| 65 |
fontWeight: '500', |
| 66 |
color: state.isSelected ? '#fff' : '#333', |
| 67 |
lineHeight: '1.2', |
| 68 |
}), |
| 69 |
indicatorSeparator: () => ({ |
| 70 |
display: 'none', |
| 71 |
}), |
| 72 |
}; |
| 73 |
|
| 74 |
return ( |
| 75 |
<div className="give-donor-dashboard-select-control" style={width ? {maxWidth: width} : null}> |
| 76 |
{label && ( |
| 77 |
<label className="give-donor-dashboard-select-control__label" htmlFor={id}> |
| 78 |
{label} |
| 79 |
</label> |
| 80 |
)} |
| 81 |
<Select |
| 82 |
placeholder={placeholder} |
| 83 |
isLoading={isLoading} |
| 84 |
inputId={id} |
| 85 |
value={selectedOptionValue} |
| 86 |
onChange={(selectedOption) => onChange(selectedOption ? selectedOption.value : '')} |
| 87 |
options={options} |
| 88 |
styles={selectStyles} |
| 89 |
maxMenuHeight="200px" |
| 90 |
isDisabled={isLoading} |
| 91 |
isClearable={isClearable} |
| 92 |
theme={(theme) => ({ |
| 93 |
...theme, |
| 94 |
colors: { |
| 95 |
...theme.colors, |
| 96 |
primary: accentColor, |
| 97 |
}, |
| 98 |
})} |
| 99 |
/> |
| 100 |
</div> |
| 101 |
); |
| 102 |
}; |
| 103 |
|
| 104 |
SelectControl.propTypes = { |
| 105 |
label: PropTypes.string, |
| 106 |
value: PropTypes.string.isRequired, |
| 107 |
onChange: PropTypes.func, |
| 108 |
options: PropTypes.array.isRequired, |
| 109 |
placeholder: PropTypes.string, |
| 110 |
width: PropTypes.string, |
| 111 |
isClearable: PropTypes.bool, |
| 112 |
}; |
| 113 |
|
| 114 |
export default SelectControl; |
| 115 |
|
