Merge pull request #13687 from strapi/ML-folder/fix-select-tree-disabled

[ML Folder] Select Tree disabled state
This commit is contained in:
Julie Plantey 2022-07-05 17:19:25 +02:00 committed by GitHub
commit dd38b618e7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 13 deletions

View File

@ -7,24 +7,17 @@ const getSelectStyles = (theme, error) => {
lineHeight: 'normal', lineHeight: 'normal',
}), }),
control: (base, state) => { control: (base, state) => {
let border; let border = `1px solid ${theme.colors.neutral200} !important`;
let borderBottom;
let backgroundColor; let backgroundColor;
if (state.isFocused) { if (state.isFocused) {
border = `1px solid ${theme.colors.primary600} !important`; border = `1px solid ${theme.colors.primary200} !important`;
} else if (error) { } else if (error) {
border = `1px solid ${theme.colors.danger600} !important`; border = `1px solid ${theme.colors.danger600} !important`;
} else {
border = `1px solid ${theme.colors.neutral200} !important`;
}
if (state.menuIsOpen === true) {
borderBottom = `1px solid ${theme.colors.primary600} !important`;
} }
if (state.isDisabled) { if (state.isDisabled) {
backgroundColor = '#fafafb !important'; backgroundColor = `${theme.colors.neutral150} !important`;
} }
return { return {
@ -35,7 +28,6 @@ const getSelectStyles = (theme, error) => {
outline: 0, outline: 0,
boxShadow: 0, boxShadow: 0,
borderRadius: '2px !important', borderRadius: '2px !important',
borderBottom,
backgroundColor, backgroundColor,
borderTopLeftRadius: '4px !important', borderTopLeftRadius: '4px !important',
borderTopRightRadius: '4px !important', borderTopRightRadius: '4px !important',
@ -90,7 +82,15 @@ const getSelectStyles = (theme, error) => {
}; };
}, },
placeholder: base => ({ ...base, marginLeft: 0 }), placeholder: base => ({ ...base, marginLeft: 0 }),
singleValue: base => ({ ...base, marginLeft: 0, color: theme.colors.neutral800 }), singleValue: (base, state) => {
let color = theme.colors.neutral800;
if (state.isDisabled) {
color = theme.colors.neutral600;
}
return { ...base, marginLeft: 0, color };
},
valueContainer: base => ({ valueContainer: base => ({
...base, ...base,
padding: 0, padding: 0,

View File

@ -270,7 +270,7 @@ export const EditAssetDialog = ({
}} }}
menuPortalTarget={document.querySelector('body')} menuPortalTarget={document.querySelector('body')}
inputId="asset-folder" inputId="asset-folder"
disabled={formDisabled} isDisabled={formDisabled}
error={errors?.parent} error={errors?.parent}
ariaErrorMessage="folder-parent-error" ariaErrorMessage="folder-parent-error"
/> />

View File

@ -201,6 +201,7 @@ export const EditFolderDialog = ({ onClose, folder, parentFolderId }) => {
onChange={value => { onChange={value => {
setFieldValue('parent', value); setFieldValue('parent', value);
}} }}
isDisabled={formDisabled}
defaultValue={values.parent} defaultValue={values.parent}
name="parent" name="parent"
menuPortalTarget={document.querySelector('body')} menuPortalTarget={document.querySelector('body')}