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

component feedback

Browse Source
This commit is contained in:
ronronscelestes 2021-11-04 15:41:47 +01:00
parent 345b8ac158
commit aebb87b5e5
2 changed files with 16 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/core/admin/admin/src/content-manager/pages/ListView/index.js
View File

@ -297,13 +297,6 @@ function ListView({
startActions={ startActions={
<> <>
{isSearchable && ( {isSearchable && (
// <Search
// label={formatMessage(
// { id: 'app.component.search.label', defaultMessage: 'Search for {target}' },
// { target: headerLayoutTitle }
// )}
// trackedEvent="didSearch"
// />
<SearchURLQuery <SearchURLQuery
label={formatMessage( label={formatMessage(
{ id: 'app.component.search.label', defaultMessage: 'Search for {target}' }, { id: 'app.component.search.label', defaultMessage: 'Search for {target}' },

44
packages/core/helper-plugin/lib/src/components/SearchURLQuery/index.js
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState, useRef } from 'react'; import React, { useLayoutEffect, useState, useRef } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
import SearchIcon from '@strapi/icons/Search'; import SearchIcon from '@strapi/icons/Search';
@ -10,35 +10,24 @@ import useTracking from '../../hooks/useTracking';
const SearchURLQuery = ({ label, trackedEvent }) => { const SearchURLQuery = ({ label, trackedEvent }) => {
const wrapperRef = useRef(null); const wrapperRef = useRef(null);
const iconButtonRef = useRef(null); const iconButtonRef = useRef(null);
const isMountedRef = useRef(false);
const [didSearch, setDidSearch] = useState(false);
const [isOpen, setIsOpen] = useState(false);
const [{ query }, setQuery] = useQueryParams(); const [{ query }, setQuery] = useQueryParams();
const [value, setValue] = useState(query?._q || ''); const [value, setValue] = useState(query?._q || '');
const [isOpen, setIsOpen] = useState(!!value);
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
const { trackUsage } = useTracking(); const { trackUsage } = useTracking();
const handleToggle = () => setIsOpen(prev => !prev); const handleToggle = () => setIsOpen(prev => !prev);
useEffect(() => { useLayoutEffect(() => {
if (isMountedRef.current) { if (isOpen) {
if (isOpen) { setTimeout(() => {
wrapperRef.current.querySelector('input').focus(); wrapperRef.current.querySelector('input').focus();
} }, 0);
} }
isMountedRef.current = true;
}, [isOpen]); }, [isOpen]);
useEffect(() => {
if (value && !isOpen) {
handleToggle();
}
}, [value, isOpen]);
const handleClear = () => { const handleClear = () => {
setDidSearch(false);
setValue(''); setValue('');
setQuery({ _q: '' }, 'remove'); setQuery({ _q: '' }, 'remove');
}; };
@ -46,14 +35,16 @@ const SearchURLQuery = ({ label, trackedEvent }) => {
const handleSubmit = e => { const handleSubmit = e => {
e.preventDefault(); e.preventDefault();
setQuery({ _q: value, page: 1 }); if (value) {
}; if (trackedEvent) {
trackUsage(trackedEvent);
useEffect(() => { }
if (didSearch && trackedEvent) { setQuery({ _q: value, page: 1 });
trackUsage(trackedEvent); } else {
handleToggle();
setQuery({ _q: '' }, 'remove');
} }
}, [didSearch, trackedEvent, trackUsage]); };
if (isOpen) { if (isOpen) {
return ( return (
@ -61,10 +52,7 @@ const SearchURLQuery = ({ label, trackedEvent }) => {
<SearchForm onSubmit={handleSubmit}> <SearchForm onSubmit={handleSubmit}>
<Searchbar <Searchbar
name="search" name="search"
onChange={({ target: { value } }) => { onChange={({ target: { value } }) => setValue(value)}
setDidSearch(true);
setValue(value);
}}
value={value} value={value}
clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })} clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}
onClear={handleClear} onClear={handleClear}