yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-15 09:39:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Created WrapperSelect

Browse Source
This commit is contained in:
soupette 2019-11-27 11:34:11 +01:00
parent a4c9556d6a
commit cda2e0eab1
4 changed files with 118 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
packages/strapi-plugin-content-type-builder/admin/src/components/ComponentSelect/index.js
View File

@ -1,140 +1,87 @@
import React from 'react';
import Select from 'react-select';
import PropTypes from 'prop-types';
import { SelectWrapper, SelectNav } from 'strapi-helper-plugin';
import { ErrorMessage } from '@buffetjs/styles';
import useDataManager from '../../hooks/useDataManager';
const ComponentSelect = ({ error, label, onChange, name }) => {
const { componentsGroupedByCategory, components } = useDataManager();
console.log({ componentsGroupedByCategory });
const styles = {
container: base => ({
...base,
'z-index': 9999,
// padding: 0,
}),
control: (base, state) => ({
...base,
'z-index': 9999,
border: state.isFocused
? '1px solid #78caff !important'
: error
? '1px solid red !important'
: '1px solid #E3E9F3 !important',
}),
menu: base => {
return {
...base,
// const SingleValue = ({ children, ...props }) => {
// console.log({ propss: props });
// return <div {...props}>{children}</div>;
// };
border: '1px solid #78caff !important',
borderColor: '#78caff !important',
borderTopColor: '#E3E9F3 !important',
};
},
const ComponentSelect = ({ onChange, name, value, styles }) => {
const { componentsGroupedByCategory } = useDataManager();
const handleChange = (inputValue, actionMeta) => {
const { action } = actionMeta;
if (action === 'clear') {
onChange({ target: { name, value: '' } });
}
};
const Menu = props => {
console.log({ props });
return (
<div style={{ border: '1px solid black' }}>
<ul style={{ backgroundColor: '#fff', margin: '0 -10px' }}>
<div style={{ bordere: '1px solid black' }}>
<ul
style={{
backgroundColor: '#fff',
// margin: '0 -10px',
maxHeight: 150,
overflow: 'auto',
}}
>
{Object.keys(componentsGroupedByCategory).map(categoryName => {
return (
<li key={categoryName}>
{categoryName}
<ul>
{componentsGroupedByCategory[categoryName].map(component => {
return <li key={component.uid}>{component.schema.name}</li>;
})}
</ul>
</li>
);
})}
</ul>
{/* <ul>
<li>
Default
<ul>
<li>Closing period</li>
</ul>
</li>
</ul> */}
</div>
);
};
const formattedOptions = Object.keys(componentsGroupedByCategory).reduce(
(acc, current) => {
const optionValueObject = componentsGroupedByCategory[current];
const option = {
label: current,
value: optionValueObject.map(val => val.uid),
// value:
options: optionValueObject.map(val => ({
label: val.schema.name,
value: val.uid,
})),
};
acc.push(option);
return acc;
},
[]
);
const formattedOptions2 = Object.keys(components).reduce((acc, current) => {
const option = {
label: `${current} - ${components[current].schema.name}`,
value: current,
};
acc.push(option);
return acc;
}, []);
console.log(formattedOptions);
return (
<SelectWrapper className="form-group" style={{ marginBottom: 0 }}>
<SelectNav>
<div>
<label htmlFor={name}>{label}</label>
<li
key={component.uid}
onClick={e => {
e.stopPropagation();
console.log('click');
onChange({ target: { name, value: component.uid } });
}}
>
{component.schema.name}
</li>
);
})}
</ul>
</li>
);
})}
</ul>
</div>
</SelectNav>
);
};
return (
<Select
isClearable
// onChange={handleChange}
onChange={handleChange}
styles={styles}
// value={{ label: 'coucou', value: 'coucou' }}
// value="coucou"
options={formattedOptions2}
// options={[
// {
// label: 'coucou',
// value: 'coucou',
// options: [{ label: 'un', value: 'deux' }],
// },
// ]}
// options={componentsGroupedByCategory}
components={{ Menu }}
menuIsOpen
// options={formatOptions()}
// menuIsOpen
value={{ label: value, value }}
options={[]}
components={{ MenuList: Menu }}
/>
{error && <ErrorMessage style={{ paddingTop: 9 }}>{error}</ErrorMessage>}
</SelectWrapper>
);
};
ComponentSelect.defaultProps = {
error: null,
value: null,
};
ComponentSelect.propTypes = {
error: PropTypes.string,
label: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
styles: PropTypes.object.isRequired,
value: PropTypes.string,
};
export default ComponentSelect;

35
packages/strapi-plugin-content-type-builder/admin/src/components/CreatableSelect/index.js
View File

@ -1,11 +1,9 @@
import React from 'react';
import Creatable from 'react-select/creatable';
import PropTypes from 'prop-types';
import { SelectWrapper, SelectNav } from 'strapi-helper-plugin';
import { ErrorMessage } from '@buffetjs/styles';
import useDataManager from '../../hooks/useDataManager';
const CreatableSelect = ({ error, label, onChange, name }) => {
const CreatableSelect = ({ onChange, name, styles }) => {
const { allComponentsCategories } = useDataManager();
const handleChange = (inputValue, actionMeta) => {
@ -20,45 +18,17 @@ const CreatableSelect = ({ error, label, onChange, name }) => {
}
};
const styles = {
control: (base, state) => ({
...base,
border: state.isFocused
? '1px solid #78caff !important'
: error
? '1px solid red !important'
: '1px solid #E3E9F3 !important',
}),
menu: base => {
return {
...base,
border: '1px solid #78caff !important',
borderColor: '#78caff !important',
borderTopColor: '#E3E9F3 !important',
};
},
};
const formatOptions = () => {
return allComponentsCategories.map(cat => ({ value: cat, label: cat }));
};
return (
<SelectWrapper className="form-group" style={{ marginBottom: 0 }}>
<SelectNav>
<div>
<label htmlFor={name}>{label}</label>
</div>
</SelectNav>
<Creatable
isClearable
onChange={handleChange}
styles={styles}
options={formatOptions()}
// menuIsOpen
/>
{error && <ErrorMessage style={{ paddingTop: 9 }}>{error}</ErrorMessage>}
</SelectWrapper>
);
};
@ -67,10 +37,9 @@ CreatableSelect.defaultProps = {
};
CreatableSelect.propTypes = {
error: PropTypes.string,
label: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
styles: PropTypes.object.isRequired,
};
export default CreatableSelect;

60
packages/strapi-plugin-content-type-builder/admin/src/components/WrapperSelect/index.js Normal file
View File

@ -0,0 +1,60 @@
import React from 'react';
import PropTypes from 'prop-types';
import { SelectWrapper, SelectNav } from 'strapi-helper-plugin';
import { ErrorMessage } from '@buffetjs/styles';
import CreatableSelect from '../CreatableSelect';
import ComponentSelect from '../ComponentSelect';
const WrapperSelect = ({ error, label, name, type, ...rest }) => {
const styles = {
container: base => ({
...base,
'z-index': 9999,
}),
control: (base, state) => ({
...base,
border: state.isFocused
? '1px solid #78caff !important'
: error
? '1px solid red !important'
: '1px solid #E3E9F3 !important',
}),
menu: base => {
return {
...base,
border: '1px solid #78caff !important',
borderColor: '#78caff !important',
borderTopColor: '#E3E9F3 !important',
};
},
};
const Component =
type === 'creatableSelect' ? CreatableSelect : ComponentSelect;
return (
<SelectWrapper className="form-group" style={{ marginBottom: 0 }}>
<SelectNav>
<div>
<label htmlFor={name}>{label}</label>
</div>
</SelectNav>
<Component name={name} {...rest} styles={styles} />
{error && <ErrorMessage style={{ paddingTop: 9 }}>{error}</ErrorMessage>}
</SelectWrapper>
);
};
WrapperSelect.defaultProps = {
error: null,
};
WrapperSelect.propTypes = {
error: PropTypes.string,
label: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
type: PropTypes.string.isRequired,
};
export default WrapperSelect;

8
packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/index.js
View File

@ -21,13 +21,12 @@ import useDataManager from '../../hooks/useDataManager';
import AttributeOption from '../../components/AttributeOption';
import BooleanBox from '../../components/BooleanBox';
import ComponentIconPicker from '../../components/ComponentIconPicker';
import ComponentSelect from '../../components/ComponentSelect';
import CustomCheckbox from '../../components/CustomCheckbox';
import CreatableSelect from '../../components/CreatableSelect';
import ModalHeader from '../../components/ModalHeader';
import HeaderModalNavContainer from '../../components/HeaderModalNavContainer';
import RelationForm from '../../components/RelationForm';
import HeaderNavLink from '../../components/HeaderNavLink';
import WrapperSelect from '../../components/WrapperSelect';
import getTrad from '../../utils/getTrad';
import getAttributes from './utils/attributes';
import forms from './utils/forms';
@ -602,8 +601,9 @@ const FormModal = () => {
<Inputs
customInputs={{
componentIconPicker: ComponentIconPicker,
componentSelect: ComponentSelect,
creatableSelect: CreatableSelect,
componentSelect: WrapperSelect,
// creatableSelect: CreatableSelect,
creatableSelect: WrapperSelect,
customCheckboxWithChildren: CustomCheckbox,
booleanBox: BooleanBox,
}}