diff --git a/packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/Div.js b/packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/Div.js index 01ac82c5cc..3fbb6e8a16 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/Div.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/Div.js @@ -1,10 +1,14 @@ import styled from 'styled-components'; const Div = styled.div` - width: 100%; + overflow-x: hidden; + width: calc(100% + 60px); + margin: ${props => props.show ? '-100px -30px 30px' : '-280px -30px 120px'}; background: #fff; box-shadow: 0 2px 4px #E3E9F3; padding: 18px 30px 0px 30px; + transition: ${props => props.show ? 'margin-top .3s ease-out, margin-bottom .2s ease-out' : 'margin .3s ease-in'};; `; + export default Div; diff --git a/packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/index.js b/packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/index.js index a6d336ce93..0336302fa8 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/index.js @@ -7,8 +7,7 @@ import React from 'react'; import moment from 'moment'; import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; -import { isObject } from 'lodash'; -import { Collapse } from 'reactstrap'; +import { isObject, size } from 'lodash'; import FilterOptions from 'components/FilterOptions/Loadable'; // You can find these components in either @@ -35,7 +34,7 @@ class FiltersPickWrapper extends React.PureComponent { componentDidUpdate(prevProps) { const { appliedFilters, show } = this.props; - if (prevProps.show !== show && show && appliedFilters.length === 0) { + if (size(prevProps.appliedFilters) !== size(appliedFilters) && size(appliedFilters) === 0) { this.handleClickAdd(); } @@ -136,43 +135,41 @@ class FiltersPickWrapper extends React.PureComponent { const { appliedFilters, filterToFocus, schema, show } = this.props; return ( -
+