yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-21 06:22:30 +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>
</div>
) : (
<IconButton onClick={toggleSearch} aria-label="Edit" icon={<SearchIcon />} />
<IconButton onClick={toggleSearch} aria-label="Edit" icon={<SearchIcon />} noBorder />
)}
</Row>
<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 PropTypes from 'prop-types';
import { Select, Option } from '@strapi/parts/Select';
import { ComboboxOption, CreatableCombobox } from '@strapi/parts/Combobox';
import useDataManager from '../../hooks/useDataManager';
// FIXME replace with Creatable Combobox
const SelectCategory = ({ error, intlLabel, name, onChange, value }) => {
const { formatMessage } = useIntl();
const { allComponentsCategories } = useDataManager();
const [categories, setCategories] = useState(allComponentsCategories);
const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';
const label = formatMessage(intlLabel);
const handleChange = value => {
onChange({ target: { name, value, type: 'select-category' } });
};
const handleCreateOption = value => {
setCategories(prev => [...prev, value]);
handleChange(value);
};
return (
<Select
<CreatableCombobox
error={errorMessage}
label={label}
id={name}
label={label}
name={name}
onChange={value => {
onChange({ target: { name, value, type: 'select-category' } });
}}
value={value || ''}
onChange={handleChange}
onCreateOption={handleCreateOption}
value={value}
>
{allComponentsCategories.map(category => {
return (
<Option key={category} value={category}>
{category}
</Option>
);
})}
</Select>
{categories.map(category => (
<ComboboxOption key={category} value={category}>
{category}
</ComboboxOption>
))}
</CreatableCombobox>
);
};