strapi-plugin-content-manager/admin/src/components/FilterOptions/index.js

A powerful UI to easily manage your data.

/**
 *
 * FilterOptions
 *
 */

import React from 'react';
import PropTypes from 'prop-types';
import { get } from 'lodash';
import cn from 'classnames';

import InputSelect from 'components/InputSelect/Loadable';

import Add from './Add';
import Div from './Div';
import InputWithAutoFocus from './InputWithAutoFocus';
import Remove from './Remove';
import styles from './styles.scss';

import getFilters from './filterTypes';

const defaultInputStyle = { width: '210px', marginRight: '10px', paddingTop: '4px' };
const midSelectStyle = { minWidth: '130px', maxWidth: '200px', marginLeft: '10px', marginRight: '10px' };

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' ?
    Object.assign(selectStyle, { minWidth: '100px'})
    : defaultInputStyle;

  // This component is needed in order to add the date icon inside the InputDate
  const isDate = get(schema, [filter.attr, 'type'], 'string') === 'date';
  const isBool = get(schema, [filter.attr, 'type']) === 'boolean';
  const selectOptionsSchema = Object
    .keys(schema)
    .filter(x => schema[x].type !== 'json');

  return (
    <Div borderLeft={!showAddButton || get(filter, 'value', '') !== ''}>
      <div className={styles.filterOptionsWrapper}>
        <Remove type="button" onClick={() => onClickRemove(index)} />
        <InputSelect
          onChange={onChange}
          name={`${index}.attr`}
          value={get(filter, 'attr', '')}
          selectOptions={selectOptionsSchema}
          style={selectStyle}
        />
        <InputSelect
          onChange={onChange}
          name={`${index}.filter`}
          value={get(filter, 'filter', '=')}
          selectOptions={getFilters(attrType)}
          style={midSelectStyle}
        />
        <div className={cn(isDate ? styles.filterOptionsInputWrapper : '')}>
          {show && (
            <InputWithAutoFocus
              filter={filter}
              filterToFocus={filterToFocus}
              index={index}
              inputStyle={inputStyle}
              name={`${index}.value`}
              onChange={onChange}
              schema={schema}
              style={inputStyle}
              value={get(filter, 'value')}
            />
          )}
        </div>
        {showAddButton && (
          <Add
            onClick={onClickAdd}
            style={{ marginLeft: isBool? '14px': '6px' }}
            type="button"
          />
        )}
      </div>
    </Div>
  );
}

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,
};

export default FilterOptions;