Open FilterPickWrapper when clicking on a filter with correct input autofocus

2025-11-03 11:25:17 +00:00 · 2018-05-24 14:40:43 +02:00 · 2018-05-24 14:40:43 +02:00 · 20d896c92a
commit 20d896c92a
parent 2ece502650
10 changed files with 92 additions and 23 deletions
--- 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,
--- 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;
 `;

--- 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 (
-    <Flex>
+    <Flex
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClickOpen(index);
+      }}
+    >
      <span>{upperFirst(filter.attr)}&nbsp;</span>
      <FormattedMessage id={`content-manager.components.FilterOptions.FILTER_TYPES.${filter.filter}`} />
      <span>&nbsp;{toString(value)}</span>
@ -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,
 };

--- 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,
--- 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}
      />
      <Wrapper>
-        <InputWithAutofocus
-          filter={filter}
-          inputStyle={inputStyle}
-          name={`${index}.value`}
-          onChange={onChange}
-          schema={schema}
-          style={inputStyle}
-          value={get(filter, 'value')}
-        />
+        {show && (
+          <InputWithAutofocus
+            filter={filter}
+            filterToFocus={filterToFocus}
+            index={index}
+            inputStyle={inputStyle}
+            name={`${index}.value`}
+            onChange={onChange}
+            schema={schema}
+            style={inputStyle}
+            value={get(filter, 'value')}
+          />
+        )}
      </Wrapper>
      {showAddButton && (
        <Add
@ -72,21 +76,28 @@ function FilterOptions({ filter, index, onChange, onClickAdd, onClickRemove, sch

 FilterOptions.defaultProps = {
  filter: {},
+  filterToFocus: null,
  index: 0,
  onChange: () => {},
  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,
 };

--- 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 (
      <form onSubmit={this.handleSubmit}>
@ -131,11 +131,13 @@ class FiltersPickWrapper extends React.PureComponent {
                  <FilterOptions
                    key={key}
                    filter={filter}
+                    filterToFocus={filterToFocus}
                    index={key}
                    onChange={this.handleChange}
                    onClickAdd={this.handleClickAdd}
                    onClickRemove={this.handleClickRemove}
                    schema={schema}
+                    show={show}
                    showAddButton={this.shouldDisplayAddButton(key)}
                  />
                ))}
@ -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,
--- 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,
--- 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';
--- 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,
--- 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([]))