mirror of
https://github.com/strapi/strapi.git
synced 2025-11-10 15:19:00 +00:00
fixed react select props
This commit is contained in:
parent
3f88672cee
commit
1cd29edebb
@ -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,
|
||||||
|
|||||||
@ -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 && (
|
||||||
|
|||||||
@ -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,
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user