diff --git a/packages/strapi-plugin-content-manager/admin/src/components/CustomTable/styledComponents.js b/packages/strapi-plugin-content-manager/admin/src/components/CustomTable/styledComponents.js index ab6f332f26..14eb0726e3 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/CustomTable/styledComponents.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/CustomTable/styledComponents.js @@ -95,7 +95,7 @@ const TableRow = styled.tr` } `; -const Arrow = styled(props => )` +const Arrow = styled(({ isUp, ...rest }) => )` margin-left: 5px; ${({ isUp }) => isUp && diff --git a/packages/strapi-plugin-upload/admin/src/components/FiltersCard/InputWrapper.js b/packages/strapi-plugin-upload/admin/src/components/FiltersCard/InputWrapper.js index 9d93991f2d..5957fb1400 100644 --- a/packages/strapi-plugin-upload/admin/src/components/FiltersCard/InputWrapper.js +++ b/packages/strapi-plugin-upload/admin/src/components/FiltersCard/InputWrapper.js @@ -2,6 +2,9 @@ import styled from 'styled-components'; const InputWrapper = styled.div` margin-bottom: 11px; + #datetime { + max-width: 130px; + } `; export default InputWrapper; diff --git a/packages/strapi-plugin-upload/admin/src/components/FiltersCard/index.js b/packages/strapi-plugin-upload/admin/src/components/FiltersCard/index.js index a8f7f88fef..8b0025b7b2 100644 --- a/packages/strapi-plugin-upload/admin/src/components/FiltersCard/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/FiltersCard/index.js @@ -19,7 +19,6 @@ const FiltersCard = ({ filters, onChange }) => { const name = state.get('name'); const type = filters[name].type; - const defaultValue = filters[name].defaultValue; const filtersOptions = getFilterType(type); @@ -48,12 +47,9 @@ const FiltersCard = ({ filters, onChange }) => { // Change the attribute handleChange(e); // Change other inputs so it reset values - const { - target: { value }, - } = e; handleChange({ target: { name: 'filter', value: '=' } }); handleChange({ - target: { name: 'value', value: filters[value].defaultValue }, + target: { name: 'value', value: defaultValue }, }); }} name="name" diff --git a/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/index.js b/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/index.js index 69bcd85009..843fb05263 100644 --- a/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/index.js @@ -1,10 +1,12 @@ -import React, { useState } from 'react'; +import React, { useState, useRef } from 'react'; import PropTypes from 'prop-types'; import moment from 'moment'; import { isObject } from 'lodash'; import { FormattedMessage } from 'react-intl'; import { FilterIcon } from 'strapi-helper-plugin'; +import useOutsideClick from '../../hooks/useOutsideClick'; + import DropdownButton from '../DropdownButton'; import DropdownSection from '../DropdownSection'; @@ -13,16 +15,20 @@ import FiltersCard from '../FiltersCard'; const FiltersPicker = ({ filters, onChange }) => { const [isOpen, setIsOpen] = useState(false); + const dropdownRef = useRef(); + + useOutsideClick(dropdownRef, () => { + if (isOpen) { + setIsOpen(false); + } + }); const handleChange = ({ target: { value } }) => { if (value.value) { let formattedValue = value; if (value.value._isAMomentObject === true) { - formattedValue.value = moment( - value.value, - 'YYYY-MM-DD HH:mm:ss' - ).format(); + formattedValue.value = moment(value.value).format(); } else if (isObject(value)) { formattedValue.value = Object.values(value.value).join(''); } @@ -43,7 +49,7 @@ const FiltersPicker = ({ filters, onChange }) => { - + diff --git a/packages/strapi-plugin-upload/admin/src/components/SortPicker/index.js b/packages/strapi-plugin-upload/admin/src/components/SortPicker/index.js index 3999153398..1e574e7c1e 100644 --- a/packages/strapi-plugin-upload/admin/src/components/SortPicker/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/SortPicker/index.js @@ -1,9 +1,10 @@ -import React, { useState } from 'react'; +import React, { useState, useRef } from 'react'; import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; import { Carret } from '@buffetjs/icons'; import getTrad from '../../utils/getTrad'; +import useOutsideClick from '../../hooks/useOutsideClick'; import DropdownButton from '../DropdownButton'; import DropdownSection from '../DropdownSection'; @@ -12,6 +13,13 @@ import Wrapper from './Wrapper'; const SortPicker = ({ onChange, value }) => { const [isOpen, setIsOpen] = useState(false); + const dropdownRef = useRef(); + + useOutsideClick(dropdownRef, () => { + if (isOpen) { + setIsOpen(false); + } + }); const orders = { created_at_asc: 'created_at:ASC', @@ -38,7 +46,7 @@ const SortPicker = ({ onChange, value }) => { - + { const getSearchParams = () => { const params = {}; + query.forEach((value, key) => { if (includes(paramsKeys, key)) { params[key] = value; @@ -59,7 +60,7 @@ const HomePage = () => { return params; }; - const getUpdatedSearchParams = updatedParams => { + const getUpdatedQueryParams = updatedParams => { return { ...getSearchParams(), filters: generateFiltersFromSearch(search), @@ -68,17 +69,15 @@ const HomePage = () => { }; const handleChangeFilters = ({ target: { value } }) => { - if (value) { - const updatedFilters = generateFiltersFromSearch(search); + const updatedFilters = generateFiltersFromSearch(search); - // Add filter if it doesn't exist yet - if (!some(updatedFilters, value)) { - updatedFilters.push(value); + // Add filter if it doesn't exist yet + if (!some(updatedFilters, value)) { + updatedFilters.push(value); - handleChangeParams({ - target: { name: 'filters', value: updatedFilters }, - }); - } + handleChangeParams({ + target: { name: 'filters', value: updatedFilters }, + }); } }; @@ -109,8 +108,8 @@ const HomePage = () => { }; const handleChangeParams = ({ target: { name, value } }) => { - const updatedSearch = getUpdatedSearchParams({ [name]: value }); - const newSearch = generateSearchFromFilters(updatedSearch); + const updatedQueryParams = getUpdatedQueryParams({ [name]: value }); + const newSearch = generateSearchFromFilters(updatedQueryParams); push({ search: encodeURI(newSearch) }); }; diff --git a/packages/strapi-plugin-upload/admin/src/hooks/useOutsideClick.js b/packages/strapi-plugin-upload/admin/src/hooks/useOutsideClick.js new file mode 100644 index 0000000000..ac03d9e47e --- /dev/null +++ b/packages/strapi-plugin-upload/admin/src/hooks/useOutsideClick.js @@ -0,0 +1,19 @@ +import { useEffect } from 'react'; + +const useOutsideClick = (ref, callback) => { + const handleClick = e => { + if (ref.current && !ref.current.contains(e.target)) { + callback(); + } + }; + + useEffect(() => { + document.addEventListener('click', handleClick); + + return () => { + document.removeEventListener('click', handleClick); + }; + }); +}; + +export default useOutsideClick;