yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-22 14:59:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #11314 from strapi/ctb/create-cat

Browse Source 
[V4] CTB: Add combobox in CTB to create component category
This commit is contained in:
cyril lopez 2021-10-21 16:02:18 +02:00 committed by GitHub
commit cae639a20f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/content-type-builder/admin/src/components/ComponentIconPicker/index.js
View File

@ -104,7 +104,7 @@ const ComponentIconPicker = ({ error, isCreating, intlLabel, name, onChange, val
</Searchbar> </Searchbar>
</div> </div>
) : ( ) : (
<IconButton onClick={toggleSearch} aria-label="Edit" icon={<SearchIcon />} /> <IconButton onClick={toggleSearch} aria-label="Edit" icon={<SearchIcon />} noBorder />
)} )}
</Row> </Row>
<Stack size={1}> <Stack size={1}>

40
packages/core/content-type-builder/admin/src/components/SelectCategory/index.js
View File

@ -4,39 +4,45 @@
* *
*/ */
import React from 'react'; import React, { useState } from 'react';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Select, Option } from '@strapi/parts/Select'; import { ComboboxOption, CreatableCombobox } from '@strapi/parts/Combobox';
import useDataManager from '../../hooks/useDataManager'; import useDataManager from '../../hooks/useDataManager';
// FIXME replace with Creatable Combobox
const SelectCategory = ({ error, intlLabel, name, onChange, value }) => { const SelectCategory = ({ error, intlLabel, name, onChange, value }) => {
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
const { allComponentsCategories } = useDataManager(); const { allComponentsCategories } = useDataManager();
const [categories, setCategories] = useState(allComponentsCategories);
const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : ''; const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';
const label = formatMessage(intlLabel); const label = formatMessage(intlLabel);
const handleChange = value => {
onChange({ target: { name, value, type: 'select-category' } });
};
const handleCreateOption = value => {
setCategories(prev => [...prev, value]);
handleChange(value);
};
return ( return (
<Select <CreatableCombobox
error={errorMessage} error={errorMessage}
label={label}
id={name} id={name}
label={label}
name={name} name={name}
onChange={value => { onChange={handleChange}
onChange({ target: { name, value, type: 'select-category' } }); onCreateOption={handleCreateOption}
}} value={value}
value={value || ''}
> >
{allComponentsCategories.map(category => { {categories.map(category => (
return ( <ComboboxOption key={category} value={category}>
<Option key={category} value={category}> {category}
{category} </ComboboxOption>
</Option> ))}
); </CreatableCombobox>
})}
</Select>
); );
}; };