From 20d896c92ae5a1931d2c190ee28395eef7a768e8 Mon Sep 17 00:00:00 2001 From: soupette Date: Thu, 24 May 2018 14:40:43 +0200 Subject: [PATCH] Open FilterPickWrapper when clicking on a filter with correct input autofocus --- .../lib/src/components/InputDate/index.js | 2 +- .../admin/src/components/Filter/Flex.js | 9 ++---- .../admin/src/components/Filter/index.js | 15 +++++++-- .../FilterOptions/InputWithAutoFocus.js | 20 ++++++++++++ .../src/components/FilterOptions/index.js | 31 +++++++++++++------ .../components/FiltersPickWrapper/index.js | 9 +++++- .../admin/src/containers/ListPage/actions.js | 8 +++++ .../src/containers/ListPage/constants.js | 1 + .../admin/src/containers/ListPage/index.js | 8 ++++- .../admin/src/containers/ListPage/reducer.js | 12 +++++-- 10 files changed, 92 insertions(+), 23 deletions(-) diff --git a/packages/strapi-helper-plugin/lib/src/components/InputDate/index.js b/packages/strapi-helper-plugin/lib/src/components/InputDate/index.js index 2ed4faa85e..5fc2358f6a 100644 --- a/packages/strapi-helper-plugin/lib/src/components/InputDate/index.js +++ b/packages/strapi-helper-plugin/lib/src/components/InputDate/index.js @@ -60,7 +60,7 @@ function InputDate(props) { } InputDate.defaultProps = { - autoFocus: true, + autoFocus: false, className: '', deactivateErrorHighlight: false, disabled: false, diff --git a/packages/strapi-plugin-content-manager/admin/src/components/Filter/Flex.js b/packages/strapi-plugin-content-manager/admin/src/components/Filter/Flex.js index ea664d7898..3f4989efef 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/Filter/Flex.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/Filter/Flex.js @@ -6,11 +6,8 @@ import styled from 'styled-components'; const Flex = styled.div` - ${'' /* display: flex; */} height: 30px; display: inline-block; - ${'' /* max-width: 250px; */} - ${'' /* min-width: 200px; */} margin-bottom: 6px; margin-right: 10px; padding: 0 10px; @@ -20,12 +17,12 @@ const Flex = styled.div` line-height: 30px; color: #007EFF; font-size: 13px; - > div:first-child { - flex: 2; - } > span:nth-child(2) { font-weight: 700; } + > span:nth-child(3) { + cursor: pointer; + } -webkit-font-smoothing-antialiased; `; diff --git a/packages/strapi-plugin-content-manager/admin/src/components/Filter/index.js b/packages/strapi-plugin-content-manager/admin/src/components/Filter/index.js index 40d33654ae..91009e617e 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/Filter/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/Filter/index.js @@ -14,7 +14,7 @@ import Remove from './Remove'; import Separator from './Separator'; -function Filter({ filter, index, onClick, schema }) { +function Filter({ filter, index, onClick, onClickOpen, schema }) { let value = filter.value; if (schema[filter.attr].type === 'date') { @@ -29,7 +29,13 @@ function Filter({ filter, index, onClick, schema }) { } return ( - + { + e.preventDefault(); + e.stopPropagation(); + onClickOpen(index); + }} + > {upperFirst(filter.attr)}   {toString(value)} @@ -43,6 +49,10 @@ Filter.defaultProps = { filter: {}, index: 0, onClick: () => {}, + onClickOpen: (e) => { + e.preventDefault(); + e.stopPropagation(); + }, schema: {}, }; @@ -50,6 +60,7 @@ Filter.propTypes = { filter: PropTypes.object, index: PropTypes.number, onClick: PropTypes.func, + onClickOpen: PropTypes.func, schema: PropTypes.object, }; diff --git a/packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/InputWithAutoFocus.js b/packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/InputWithAutoFocus.js index 97da1498e1..2d458eb096 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/InputWithAutoFocus.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/InputWithAutoFocus.js @@ -31,6 +31,21 @@ const getInputType = (attrType) => { class InputWithAutofocus extends React.Component { + componentDidMount() { + if (this.props.filterToFocus === this.props.index) { + return new Promise(resolve => { + setTimeout(() => { + if (this.inputEl.hasOwnProperty('openCalendar')) { + this.inputEl.openCalendar(); + } else { + this.inputEl.focus(); + } + resolve(); + }, 300); + }); + } + } + render() { const { filter, inputStyle, name, onChange, schema } = this.props; const Input = getInputType(get(schema, [filter.attr, 'type'], 'string')); @@ -50,6 +65,11 @@ class InputWithAutofocus extends React.Component { InputWithAutofocus.propTypes = { filter: PropTypes.object.isRequired, + filterToFocus: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.number, + ]).isRequired, + index: PropTypes.number.isRequired, inputStyle: PropTypes.object.isRequired, name: PropTypes.string.isRequired, onChange: PropTypes.func.isRequired, diff --git a/packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/index.js b/packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/index.js index 13390e7300..7126dc840f 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/index.js @@ -21,7 +21,7 @@ import FILTER_TYPES from './filterTypes'; const defaultInputStyle = { width: '210px', marginRight: '10px', paddingTop: '4px' }; const midSelectStyle = { minWidth: '130px', maxWidth: '200px', marginLeft: '10px', marginRight: '10px' }; -function FilterOptions({ filter, index, onChange, onClickAdd, onClickRemove, schema, showAddButton }) { +function FilterOptions({ filter, filterToFocus, index, onChange, onClickAdd, onClickRemove, schema, show, showAddButton }) { const selectStyle = { minWidth: '170px', maxWidth: '200px' }; const attrType = get(schema, [filter.attr, 'type'], 'string'); const inputStyle = attrType === 'boolean' ? @@ -49,15 +49,19 @@ function FilterOptions({ filter, index, onChange, onClickAdd, onClickRemove, sch style={midSelectStyle} /> - + {show && ( + + )} {showAddButton && ( {}, onClickAdd: () => {}, onClickRemove: () => {}, schema: {}, + show: false, showAddButton: false, }; FilterOptions.propTypes = { filter: PropTypes.object, + filterToFocus: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.number, + ]), index: PropTypes.number, onChange: PropTypes.func, onClickAdd: PropTypes.func, onClickRemove: PropTypes.func, schema: PropTypes.object, + show: PropTypes.bool, showAddButton: PropTypes.bool, }; 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 6ca18594a6..18a9641686 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 @@ -112,7 +112,7 @@ class FiltersPickWrapper extends React.PureComponent { ); render() { - const { appliedFilters, schema, show } = this.props; + const { appliedFilters, filterToFocus, schema, show } = this.props; return (
@@ -131,11 +131,13 @@ class FiltersPickWrapper extends React.PureComponent { ))} @@ -156,6 +158,7 @@ class FiltersPickWrapper extends React.PureComponent { FiltersPickWrapper.defaultProps = { appliedFilters: [], + filterToFocus: null, modelName: '', schema: {}, }; @@ -164,6 +167,10 @@ FiltersPickWrapper.propTypes = { addFilter: PropTypes.func.isRequired, appliedFilters: PropTypes.array, close: PropTypes.func.isRequired, + filterToFocus: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.number, + ]), modelName: PropTypes.string, onChange: PropTypes.func.isRequired, onSubmit: PropTypes.func.isRequired, diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/actions.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/actions.js index 6471f29403..76ff20fc99 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/actions.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/actions.js @@ -14,6 +14,7 @@ import { ON_CHANGE, ON_CLICK_REMOVE, ON_TOGGLE_FILTERS, + OPEN_FILTERS_WITH_SELECTION, REMOVE_ALL_FILTERS, REMOVE_FILTER, SET_PARAMS, @@ -82,6 +83,13 @@ export function onClickRemove(index) { }; } +export function openFiltersWithSelections(index) { + return { + type: OPEN_FILTERS_WITH_SELECTION, + index, + }; +} + export function onToggleFilters() { return { type: ON_TOGGLE_FILTERS, diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/constants.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/constants.js index 0e3c382b1b..36da3f1292 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/constants.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/constants.js @@ -14,6 +14,7 @@ export const GET_DATA_SUCCEEDED = 'ContentManager/ListPage/GET_DATA_SUCCEEDED'; export const ON_CHANGE = 'ContentManager/ListPage/ON_CHANGE'; export const ON_CLICK_REMOVE = 'ContentManager/ListPage/ON_CLICK_REMOVE'; export const ON_TOGGLE_FILTERS = 'ContentManager/ListPage/ON_TOGGLE_FILTERS'; +export const OPEN_FILTERS_WITH_SELECTION = 'ContentManager/ListPage/OPEN_FILTERS_WITH_SELECTION'; export const REMOVE_ALL_FILTERS = 'ContentManager/ListPage/REMOVE_ALL_FILTERS'; export const REMOVE_FILTER = 'ContentManager/ListPage/REMOVE_FILTER'; export const SET_PARAMS = 'ContentManager/ListPage/SET_PARAMS'; diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/index.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/index.js index 95c210cfc9..7312bf1933 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/index.js @@ -43,6 +43,7 @@ import { onChange, onClickRemove, onToggleFilters, + openFiltersWithSelections, removeAllFilters, removeFilter, setParams, @@ -296,10 +297,11 @@ export class ListPage extends React.Component { const { addFilter, listPage, - listPage: { appliedFilters, filters, params, showFilter }, + listPage: { appliedFilters, filters, filterToFocus, params, showFilter }, onChange, onClickRemove, onToggleFilters, + openFiltersWithSelections, removeAllFilters, removeFilter, } = this.props; @@ -324,6 +326,7 @@ export class ListPage extends React.Component { addFilter={addFilter} appliedFilters={appliedFilters} close={onToggleFilters} + filterToFocus={filterToFocus} modelName={this.getCurrentModelName()} onChange={onChange} onSubmit={this.handleSubmit} @@ -364,6 +367,7 @@ export class ListPage extends React.Component { filter={filter} index={key} onClick={onClickRemove} + onClickOpen={openFiltersWithSelections} schema={this.getCurrentSchema()} /> ))} @@ -425,6 +429,7 @@ ListPage.propTypes = { onChange: PropTypes.func.isRequired, onClickRemove: PropTypes.func.isRequired, onToggleFilters: PropTypes.func.isRequired, + openFiltersWithSelections: PropTypes.func.isRequired, removeAllFilters: PropTypes.func.isRequired, removeFilter: PropTypes.func.isRequired, schema: PropTypes.object.isRequired, @@ -442,6 +447,7 @@ function mapDispatchToProps(dispatch) { onChange, onClickRemove, onToggleFilters, + openFiltersWithSelections, removeAllFilters, removeFilter, setParams, diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/reducer.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/reducer.js index f18889453d..b297dcc085 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/reducer.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListPage/reducer.js @@ -15,6 +15,7 @@ import { ON_CHANGE, ON_CLICK_REMOVE, ON_TOGGLE_FILTERS, + OPEN_FILTERS_WITH_SELECTION, REMOVE_ALL_FILTERS, REMOVE_FILTER, SET_PARAMS, @@ -25,6 +26,8 @@ const initialState = fromJS({ appliedFilters: List([]), count: 0, filters: List([]), + filtersUpdated: false, + filterToFocus: null, params: Map({ _limit: 10, _page: 1, @@ -32,7 +35,6 @@ const initialState = fromJS({ }), records: List([]), showFilter: false, - filtersUpdated: false, }); function listPageReducer(state = initialState, action) { @@ -65,7 +67,13 @@ function listPageReducer(state = initialState, action) { .update('filters', list => list.splice(action.index, 1)) .update('filtersUpdated', v => v = !v); case ON_TOGGLE_FILTERS: - return state.update('showFilter', v => !v); + return state + .update('filterToFocus', () => null) + .update('showFilter', v => !v); + case OPEN_FILTERS_WITH_SELECTION: + return state + .update('showFilter', () => true) + .update('filterToFocus', () => action.index); case REMOVE_ALL_FILTERS: return state .update('appliedFilters', () => List([]))