Add disabled options to selects

This commit is contained in:
soupette 2019-07-25 13:44:35 +02:00
parent fa5096e3c5
commit 386c5a5776
6 changed files with 42 additions and 14 deletions

View File

@ -51,6 +51,24 @@ const FieldForm = ({
return null;
}
if (
formType === 'media' &&
!['label', 'description'].includes(meta)
) {
return null;
}
if (
(formType === 'json' || formType === 'boolean') &&
meta === 'placeholder'
) {
return null;
}
if (formType === 'wysiwyg' && meta === 'editable') {
return null;
}
return (
<Input
inputDescription={

View File

@ -42,8 +42,10 @@ const FieldItem = forwardRef(
'json',
'text',
'file',
'media',
'group',
'WYSIWYG',
'wysiwyg',
].includes(type);
const carretStyle = withLongerHeight ? { height: '84px' } : {};
const renderIcon = () => {

View File

@ -29,11 +29,15 @@ const getInputType = (type = '') => {
return 'text';
case 'text':
return 'textarea';
case 'media':
case 'file':
case 'files':
return 'file';
case 'json':
return 'json';
case 'wysiwyg':
case 'WYSIWYG':
return 'wysiwyg';
default:
return 'text';
}
@ -45,15 +49,6 @@ function Inputs({ autoFocus, keys, layout, modifiedData, name, onChange }) {
() => get(layout, ['schema', 'attributes', name], {}),
[layout, name]
);
const { model, collection } = attribute;
const isMedia = useMemo(() => {
return (
get(attribute, 'plugin', '') === 'upload' &&
(model || collection) === 'file'
);
}, [attribute, collection, model]);
const multiple = collection == 'file';
const metadatas = useMemo(
() => get(layout, ['metadatas', name, 'edit'], {}),
[layout, name]
@ -61,7 +56,7 @@ function Inputs({ autoFocus, keys, layout, modifiedData, name, onChange }) {
const disabled = useMemo(() => !get(metadatas, 'editable', true), [
metadatas,
]);
const type = isMedia ? 'file' : get(attribute, 'type', null);
const type = useMemo(() => get(attribute, 'type', null), [attribute]);
const inputStyle = type === 'text' ? { height: '196px' } : {};
const validations = omit(attribute, [
'type',
@ -89,8 +84,11 @@ function Inputs({ autoFocus, keys, layout, modifiedData, name, onChange }) {
errors={inputErrors}
inputDescription={description}
inputStyle={inputStyle}
customInputs={{ json: InputJSONWithErrors, wysiwyg: WysiwygWithErrors }}
multiple={multiple}
customInputs={{
json: InputJSONWithErrors,
wysiwyg: WysiwygWithErrors,
}}
multiple={get(attribute, 'multiple', false)}
name={name}
onChange={onChange}
selectOptions={get(attribute, 'enum', [])}

View File

@ -13,6 +13,7 @@ function SelectMany({
addRelation,
mainField,
name,
isDisabled,
isLoading,
move,
nextSearch,
@ -50,6 +51,7 @@ function SelectMany({
return (
<>
<Select
isDisabled={isDisabled}
id={name}
filterOption={el => {
if (isEmpty(value)) {
@ -100,6 +102,7 @@ SelectMany.defaultProps = {
SelectMany.propTypes = {
addRelation: PropTypes.func.isRequired,
isDisabled: PropTypes.bool.isRequired,
mainField: PropTypes.string.isRequired,
move: PropTypes.func,
name: PropTypes.string.isRequired,

View File

@ -7,6 +7,7 @@ import Select from 'react-select';
function SelectOne({
mainField,
name,
isDisabled,
isLoading,
onChange,
onInputChange,
@ -19,8 +20,9 @@ function SelectOne({
return (
<Select
id={name}
isLoading={isLoading}
isClearable
isDisabled={isDisabled}
isLoading={isLoading}
options={options}
onChange={onChange}
onInputChange={onInputChange}
@ -39,9 +41,10 @@ SelectOne.defaultProps = {
};
SelectOne.propTypes = {
isDisabled: PropTypes.bool.isRequired,
isLoading: PropTypes.bool.isRequired,
mainField: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
isLoading: PropTypes.bool.isRequired,
onChange: PropTypes.func.isRequired,
onInputChange: PropTypes.func.isRequired,
onMenuClose: PropTypes.func.isRequired,

View File

@ -13,6 +13,7 @@ import SelectMany from '../SelectMany';
import { Nav, Wrapper } from './components';
function SelectWrapper({
editable,
label,
mainField,
name,
@ -148,6 +149,7 @@ function SelectWrapper({
addRelation({ target: { name, value } });
}}
id={name}
isDisabled={!editable}
isLoading={isLoading}
isClearable
mainField={mainField}
@ -180,6 +182,7 @@ function SelectWrapper({
}
SelectWrapper.defaultProps = {
editable: true,
description: '',
label: '',
plugin: '',
@ -188,6 +191,7 @@ SelectWrapper.defaultProps = {
};
SelectWrapper.propTypes = {
editable: PropTypes.bool,
description: PropTypes.string,
label: PropTypes.string,
mainField: PropTypes.string.isRequired,