fixed react select props

This commit is contained in:
ronronscelestes 2022-06-14 09:19:51 +01:00
parent 3f88672cee
commit 1cd29edebb
3 changed files with 6 additions and 12 deletions

View File

@ -9,7 +9,7 @@ import IndicatorSeparator from './components/IndicatorSeparator';
import getSelectStyles from './utils/getSelectStyles'; import getSelectStyles from './utils/getSelectStyles';
const ReactSelect = ({ components, styles, error, ...props }) => { const ReactSelect = ({ components, styles, error, ariaErrorMessage, ...props }) => {
const theme = useTheme(); const theme = useTheme();
const customStyles = getSelectStyles(theme, error); const customStyles = getSelectStyles(theme, error);
@ -17,7 +17,7 @@ const ReactSelect = ({ components, styles, error, ...props }) => {
<Select <Select
{...props} {...props}
components={{ ClearIndicator, DropdownIndicator, IndicatorSeparator, ...components }} components={{ ClearIndicator, DropdownIndicator, IndicatorSeparator, ...components }}
aria-errormessage={error && 'folder-parent-error'} aria-errormessage={error && ariaErrorMessage}
aria-invalid={!!error} aria-invalid={!!error}
styles={{ ...customStyles, ...styles }} styles={{ ...customStyles, ...styles }}
/> />
@ -27,12 +27,14 @@ const ReactSelect = ({ components, styles, error, ...props }) => {
export default ReactSelect; export default ReactSelect;
ReactSelect.defaultProps = { ReactSelect.defaultProps = {
ariaErrorMessage: undefined,
components: undefined, components: undefined,
error: undefined, error: undefined,
styles: undefined, styles: undefined,
}; };
ReactSelect.propTypes = { ReactSelect.propTypes = {
ariaErrorMessage: PropTypes.string,
components: PropTypes.object, components: PropTypes.object,
error: PropTypes.string, error: PropTypes.string,
styles: PropTypes.object, styles: PropTypes.object,

View File

@ -207,6 +207,7 @@ export const EditFolderDialog = ({ onClose, folder, parentFolderId }) => {
inputId="folder-parent" inputId="folder-parent"
disabled={formDisabled} disabled={formDisabled}
error={errors?.parent} error={errors?.parent}
ariaErrorMessage="folder-parent-error"
/> />
{errors.parent && ( {errors.parent && (

View File

@ -12,13 +12,7 @@ const hasParent = option => !option.parent;
const hasParentOrMatchesValue = (option, value) => const hasParentOrMatchesValue = (option, value) =>
option.value === value || option.parent === value; option.value === value || option.parent === value;
const SelectTree = ({ const SelectTree = ({ options: defaultOptions, maxDisplayDepth, defaultValue, ...props }) => {
options: defaultOptions,
maxDisplayDepth,
defaultValue,
error,
...props
}) => {
const flatDefaultOptions = useMemo(() => flattenTree(defaultOptions), [defaultOptions]); const flatDefaultOptions = useMemo(() => flattenTree(defaultOptions), [defaultOptions]);
const optionsFiltered = useMemo(() => flatDefaultOptions.filter(hasParent), [flatDefaultOptions]); const optionsFiltered = useMemo(() => flatDefaultOptions.filter(hasParent), [flatDefaultOptions]);
const [options, setOptions] = useState(optionsFiltered); const [options, setOptions] = useState(optionsFiltered);
@ -51,7 +45,6 @@ const SelectTree = ({
components={{ Option }} components={{ Option }}
options={options} options={options}
defaultValue={defaultValue} defaultValue={defaultValue}
error={error}
/* -- custom props, used by the Option component */ /* -- custom props, used by the Option component */
maxDisplayDepth={maxDisplayDepth} maxDisplayDepth={maxDisplayDepth}
openValues={openValues} openValues={openValues}
@ -76,7 +69,6 @@ OptionShape.defaultProps = {
SelectTree.defaultProps = { SelectTree.defaultProps = {
defaultValue: undefined, defaultValue: undefined,
error: undefined,
maxDisplayDepth: 5, maxDisplayDepth: 5,
}; };
@ -84,7 +76,6 @@ SelectTree.propTypes = {
defaultValue: PropTypes.shape({ defaultValue: PropTypes.shape({
value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
}), }),
error: PropTypes.string,
maxDisplayDepth: PropTypes.number, maxDisplayDepth: PropTypes.number,
options: PropTypes.arrayOf(OptionShape).isRequired, options: PropTypes.arrayOf(OptionShape).isRequired,
}; };