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;