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

Fixes #5771

Browse Source 
Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
soupette 2020-04-16 11:32:24 +02:00
parent eab4312b82
commit 873f810099
1 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,5 @@
import React, { createRef, useEffect, useState } from 'react';
import React, { useEffect, useState, useRef } from 'react';
import { useClickAwayListener } from '@buffetjs/hooks';
import { Label, ErrorMessage } from '@buffetjs/styles';
import { AutoSizer, Collection } from 'react-virtualized';
import PropTypes from 'prop-types';
@ -21,13 +22,18 @@ const ComponentIconPicker = ({ error, isCreating, label, name, onChange, value }
// Edition
return !allComponentsIconAlreadyTaken.filter(icon => icon !== originalIcon).includes(ico);
});
const ref = createRef();
const ref = useRef();
const searchWrapperRef = useRef();
const [originalIcon] = useState(value);
const [showSearch, setShowSearch] = useState(false);
const [search, setSearch] = useState('');
const [icons, setIcons] = useState(initialIcons);
const toggleSearch = () => setShowSearch(prev => !prev);
useClickAwayListener(searchWrapperRef, () => {
setShowSearch(false);
});
useEffect(() => {
if (showSearch && ref.current) {
ref.current.focus();
@ -58,6 +64,11 @@ const ComponentIconPicker = ({ error, isCreating, label, name, onChange, value }
};
};
const handleChangeSearch = ({ target: { value } }) => {
setSearch(value);
setIcons(() => initialIcons.filter(icon => icon.includes(value)));
};
return (
<Wrapper error={error !== null}>
<div className="search">
@ -69,18 +80,10 @@ const ComponentIconPicker = ({ error, isCreating, label, name, onChange, value }
<FontAwesomeIcon icon="search" />
</button>
) : (
<SearchWrapper>
<SearchWrapper ref={searchWrapperRef}>
<FontAwesomeIcon icon="search" />
<button onClick={toggleSearch} type="button" />
<Search
ref={ref}
onChange={({ target: { value } }) => {
setSearch(value);
setIcons(() => initialIcons.filter(icon => icon.includes(value)));
}}
value={search}
placeholder="Search…"
/>
<Search ref={ref} onChange={handleChangeSearch} value={search} placeholder="Search…" />
<button
onClick={() => {
setSearch('');