Creating combo input with label, naming and input for Text, Select and DateRange (#1553)

* Issues: OHIF-46, OHIF-47, OHIF-48

platform/ui/index.js

@@ -15,6 +15,10 @@ export {
   Button,
   ButtonGroup,
   DateRange,
+  InputDateRange,
+  InputMultiSelect,
+  InputText,
+  InputLabelWrapper,
   EmptyStudies,
   Icon,
   IconButton,

platform/ui/src/components/InputDateRange/InputDateRange.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { DateRange, InputLabelWrapper } from '@ohif/ui';
+
+const InputDateRange = ({
+  label,
+  isSortable,
+  sortDirection,
+  onLabelClick,
+  value,
+  onChange,
+}) => {
+  const { startDate, endDate } = value;
+  return (
+    <InputLabelWrapper
+      label={label}
+      isSortable={isSortable}
+      sortDirection={sortDirection}
+      onLabelClick={onLabelClick}
+    >
+      <div className="relative">
+        <DateRange
+          startDate={startDate}
+          endDate={endDate}
+          onChange={onChange}
+        />
+      </div>
+    </InputLabelWrapper>
+  );
+};
+
+InputDateRange.defaultProps = {
+  value: {},
+};
+
+InputDateRange.propTypes = {
+  label: PropTypes.string.isRequired,
+  isSortable: PropTypes.bool.isRequired,
+  sortDirection: PropTypes.oneOf(['ascending', 'descending', 'none'])
+    .isRequired,
+  onLabelClick: PropTypes.func.isRequired,
+  value: PropTypes.shape({
+    /** Start date moment object */
+    startDate: PropTypes.object, // moment date is an object
+    /** End date moment object */
+    endDate: PropTypes.object, // moment date is an object
+  }),
+  onChange: PropTypes.func.isRequired,
+};
+
+export default InputDateRange;

platform/ui/src/components/InputDateRange/InputDateRange.mdx

@@ -0,0 +1,43 @@
+---
+name: InputDateRange
+menu: Components
+route: components/InputDateRange
+---
+
+import { useState } from 'react';
+import { Playground, Props } from 'docz';
+import InputDateRange from './';
+
+# Input Date Range
+
+## Import
+
+```javascript
+import { InputDateRange } from '@ohif/ui';
+```
+
+## Basic usage
+
+<Playground>
+  {() => {
+    const [dates, setDates] = useState({
+      startDate: null,
+      endDate: null,
+    });
+    return (
+      <div className="p-4 flex flex-col items-center">
+        <div className="w-56">
+          <InputDateRange
+            label="Dates"
+            value={dates}
+            onChange={dates => setDates(dates)}
+          />
+        </div>
+      </div>
+    );
+  }}
+</Playground>
+
+## Properties
+
+<Props of={InputDateRange} />

platform/ui/src/components/InputDateRange/index.js

@@ -0,0 +1,2 @@
+import InputDateRange from './InputDateRange';
+export default InputDateRange;

platform/ui/src/components/InputLabelWrapper/InputLabelWrapper.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import { Icon } from '@ohif/ui';
+
+const baseLabelClassName =
+  'flex flex-col flex-1 text-white text-lg pl-1 select-none';
+const spanClassName = 'flex flex-row items-center cursor-pointer';
+const sortIconMap = {
+  ascending: 'sorting-active-up',
+  descending: 'sorting-active-down',
+  none: 'sorting',
+};
+
+const InputLabelWrapper = ({
+  label,
+  isSortable,
+  sortDirection,
+  onLabelClick,
+  className,
+  children,
+}) => {
+  return (
+    <label className={classnames(baseLabelClassName, className)}>
+      <span
+        className={spanClassName}
+        onClick={onLabelClick}
+        onKeyDown={onLabelClick}
+      >
+        {label}
+        {isSortable && (
+          <Icon
+            name={sortIconMap[sortDirection]}
+            className={classnames(
+              'mx-2 w-2',
+              sortDirection !== 'none'
+                ? 'text-custom-aquaBright'
+                : 'text-custom-blue'
+            )}
+          />
+        )}
+      </span>
+      <span>{children}</span>
+    </label>
+  );
+};
+
+InputLabelWrapper.defaultProps = {
+  className: '',
+};
+
+InputLabelWrapper.propTypes = {
+  label: PropTypes.string.isRequired,
+  isSortable: PropTypes.bool.isRequired,
+  sortDirection: PropTypes.oneOf(['ascending', 'descending', 'none'])
+    .isRequired,
+  onLabelClick: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+export default InputLabelWrapper;

platform/ui/src/components/InputLabelWrapper/index.js

@@ -0,0 +1,2 @@
+import InputLabelWrapper from './InputLabelWrapper';
+export default InputLabelWrapper;

platform/ui/src/components/InputMultiSelect/InputMultiSelect.jsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Select, InputLabelWrapper } from '@ohif/ui';
+
+const InputMultiSelect = ({
+  label,
+  isSortable,
+  sortDirection,
+  onLabelClick,
+  value,
+  placeholder,
+  options,
+  onChange,
+}) => {
+  return (
+    <InputLabelWrapper
+      label={label}
+      isSortable={isSortable}
+      sortDirection={sortDirection}
+      onLabelClick={onLabelClick}
+    >
+      <Select
+        placeholder={placeholder}
+        className="mt-2"
+        options={options}
+        value={value}
+        isMulti={true}
+        isClearable={false}
+        isSearchable={false}
+        closeMenuOnSelect={false}
+        hideSelectedOptions={false}
+        onChange={(inputvalues, { action }) => {
+          switch (action) {
+            case 'select-option':
+            case 'remove-value':
+            case 'deselect-option':
+            case 'clear':
+              onChange(inputvalues);
+              break;
+            default:
+              break;
+          }
+        }}
+      />
+    </InputLabelWrapper>
+  );
+};
+
+InputMultiSelect.defaultProps = {
+  value: [],
+  placeholder: '',
+  options: [],
+};
+
+InputMultiSelect.propTypes = {
+  label: PropTypes.string.isRequired,
+  isSortable: PropTypes.bool.isRequired,
+  sortDirection: PropTypes.oneOf(['ascending', 'descending', 'none'])
+    .isRequired,
+  onLabelClick: PropTypes.func.isRequired,
+  placeholder: PropTypes.string,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string,
+      label: PropTypes.string,
+    })
+  ),
+  value: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.shape({
+        value: PropTypes.string,
+        label: PropTypes.string,
+      })
+    ),
+    PropTypes.shape({
+      value: PropTypes.string,
+      label: PropTypes.string,
+    }),
+  ]),
+  onChange: PropTypes.func.isRequired,
+};
+
+export default InputMultiSelect;

platform/ui/src/components/InputMultiSelect/InputMultiSelect.mdx

@@ -0,0 +1,48 @@
+---
+name: InputMultiSelect
+menu: Components
+route: components/InputMultiSelect
+---
+
+import { useState } from 'react';
+import { Playground, Props } from 'docz';
+import InputMultiSelect from './';
+
+# Input Multi Select
+
+## Import
+
+```javascript
+import { InputMultiSelect } from '@ohif/ui';
+```
+
+## Basic usage
+
+<Playground>
+  {() => {
+    const [values, setValues] = useState([]);
+    return (
+      <div className="flex flex-col flex-1 p-4 items-center">
+        <div className="w-56">
+          <InputMultiSelect
+            label="Modality"
+            options={[
+              { value: 'SEG', label: 'SEG' },
+              { value: 'CT', label: 'CT' },
+              { value: 'MR', label: 'MR' },
+              { value: 'SR', label: 'SR' },
+            ]}
+            value={values}
+            onChange={values => {
+              setValues(values);
+            }}
+          />
+        </div>
+      </div>
+    );
+  }}
+</Playground>
+
+## Properties
+
+<Props of={InputMultiSelect} />

platform/ui/src/components/InputMultiSelect/index.js

@@ -0,0 +1,2 @@
+import InputMultiSelect from './InputMultiSelect';
+export default InputMultiSelect;

platform/ui/src/components/InputText/InputText.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Input, InputLabelWrapper } from '@ohif/ui';
+
+const InputText = ({
+  label,
+  isSortable,
+  sortDirection,
+  onLabelClick,
+  value,
+  onChange,
+}) => {
+  return (
+    <InputLabelWrapper
+      label={label}
+      isSortable={isSortable}
+      sortDirection={sortDirection}
+      onLabelClick={onLabelClick}
+    >
+      <Input
+        className="border-custom-blue mt-2 bg-black"
+        type="text"
+        containerClassName="mr-2"
+        value={value}
+        onChange={event => {
+          onChange(event.target.value);
+        }}
+      />
+    </InputLabelWrapper>
+  );
+};
+
+InputText.defaultProps = {
+  value: '',
+};
+
+InputText.propTypes = {
+  label: PropTypes.string.isRequired,
+  isSortable: PropTypes.bool.isRequired,
+  sortDirection: PropTypes.oneOf(['ascending', 'descending', 'none'])
+    .isRequired,
+  onLabelClick: PropTypes.func.isRequired,
+  value: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default InputText;

platform/ui/src/components/InputText/InputText.mdx

@@ -0,0 +1,41 @@
+---
+name: InputText
+menu: Components
+route: components/InputText
+---
+
+import { useState } from 'react';
+import { Playground, Props } from 'docz';
+import InputText from './';
+
+# Input Text
+
+## Import
+
+```javascript
+import { InputText } from '@ohif/ui';
+```
+
+## Basic usage
+
+<Playground>
+  {() => {
+    const [text, setText] = useState('');
+    return (
+      <div className="flex flex-col flex-1 p-4 items-center">
+        <div className="w-56">
+          <InputText
+            label='Name'
+            value={text}
+            onChange={value => {setText(value)}}
+          />
+        </div>
+      </div>
+    )
+  }}
+
+</Playground>
+
+## Properties
+
+<Props of={InputText} />

platform/ui/src/components/InputText/index.js

@@ -0,0 +1,2 @@
+import InputText from './InputText';
+export default InputText;

platform/ui/src/components/Select/Select.css

@@ -6,12 +6,13 @@
   @apply border-gray-500;
 }
 
-.customSelect__wrapper .customSelect__control:focus {
+.customSelect__wrapper .customSelect__control:focus,
+.customSelect__wrapper .customSelect__control--menu-is-open {
   @apply border-gray-500 outline-none;
 }
 
-.customSelect__wrapper .customSelect__control--menu-is-open {
-  @apply border-gray-500 outline-none;
+.customSelect--is-disabled .customSelect__control--is-disabled {
+  @apply pointer-events-none;
 }
 
 .customSelect__wrapper .customSelect__indicator-separator {
@@ -23,17 +24,25 @@
 }
 
 .customSelect__wrapper .customSelect__option {
-  @apply text-black;
+  @apply text-black flex flex-row items-center;
+}
+
+.customSelect__wrapper .customSelect__option:focus {
+  @apply bg-custom-blue;
+}
+
+.customSelect__wrapper .customSelect__option--is-selected {
+  @apply bg-transparent;
 }
 
 .customSelect__wrapper .customSelect__single-value {
   @apply text-white;
 }
 
-.customSelect--is-disabled .customSelect__control--is-disabled {
-  @apply pointer-events-none;
-}
-
 .customSelect__wrapper.customSelect--is-disabled {
   @apply cursor-not-allowed pointer-events-auto;
 }
+
+.customSelect__wrapper .customSelect__value-container--is-multi {
+  @apply px-3 py-2 inline-block truncate;
+}

platform/ui/src/components/Select/Select.jsx

@@ -1,52 +1,93 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import ReactSelect from 'react-select';
+import ReactSelect, { components } from 'react-select';
 
 import './Select.css';
 
+const MultiValue = props => {
+  const values = props.selectProps.value;
+  const lastValue = values[values.length - 1];
+  let label = props.data.label;
+  if (lastValue.label !== label) {
+    label += ', ';
+  }
+
+  return <span>{label}</span>;
+};
+
+const Option = props => {
+  return (
+    <div>
+      <components.Option {...props}>
+        <input
+          type="checkbox"
+          checked={props.isSelected}
+          className="w-6 h-6 mr-2"
+          onChange={e => null}
+        />
+        <label>{props.value} </label>
+      </components.Option>
+    </div>
+  );
+};
+
 const Select = ({
-  autoFocus,
   className,
+  closeMenuOnSelect,
+  hideSelectedOptions,
+  isClearable,
   isDisabled,
   isMulti,
   isSearchable,
-  name,
   onChange,
   options,
   placeholder,
-  noOptionsMessage,
   value,
 }) => {
+  const _components = isMulti ? { Option, MultiValue } : {};
+
   return (
     <ReactSelect
-      autoFocus={autoFocus}
       className={classnames(
         className,
-        'flex flex-col flex-1 mt-2 customSelect__wrapper'
+        'flex flex-col flex-1 customSelect__wrapper'
       )}
       classNamePrefix="customSelect"
       isDisabled={isDisabled}
+      isClearable={isClearable}
       isMulti={isMulti}
       isSearchable={isSearchable}
-      name={name}
-      onChange={onChange}
-      options={options}
+      closeMenuOnSelect={closeMenuOnSelect}
+      hideSelectedOptions={hideSelectedOptions}
+      components={_components}
       placeholder={placeholder}
-      noOptionsMessage={noOptionsMessage}
+      options={options}
       value={value}
+      onChange={onChange}
     ></ReactSelect>
   );
 };
 
+Select.defaultProps = {
+  className: '',
+  closeMenuOnSelect: true,
+  hideSelectedOptions: true,
+  isClearable: true,
+  isDisabled: false,
+  isMulti: false,
+  isSearchable: true,
+};
+
 Select.propTypes = {
-  autoFocus: PropTypes.bool,
   className: PropTypes.string,
+  closeMenuOnSelect: PropTypes.bool,
+  hideSelectedOptions: PropTypes.bool,
+  isClearable: PropTypes.bool,
   isDisabled: PropTypes.bool,
   isMulti: PropTypes.bool,
   isSearchable: PropTypes.bool,
-  name: PropTypes.string,
-  onChange: PropTypes.func,
+  onChange: PropTypes.func.isRequired,
   options: PropTypes.arrayOf(
     PropTypes.shape({
       value: PropTypes.string,
@@ -54,8 +95,18 @@ Select.propTypes = {
     })
   ),
   placeholder: PropTypes.string,
-  noOptionsMessage: PropTypes.func,
-  value: PropTypes.string,
+  value: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.shape({
+        value: PropTypes.string,
+        label: PropTypes.string,
+      })
+    ),
+    PropTypes.shape({
+      value: PropTypes.string,
+      label: PropTypes.string,
+    }),
+  ]),
 };
 
 export default Select;

platform/ui/src/components/Select/Select.mdx

@@ -19,13 +19,13 @@ import { Select } from '@ohif/ui';
 
 <Playground>
   <div className="flex flex-col flex-1 p-4 items-center">
-    <div className="w-20">
+    <div className="w-56">
       <Select
         options={[
-          { value: 'one', label: 'one' },
-          { value: 'two', label: 'two' },
-          { value: 'three', label: 'three' },
-          { value: 'four', label: 'four' },
+          { value: 'ONE', label: 'ONE' },
+          { value: 'TWO', label: 'TWO' },
+          { value: 'THREE', label: 'THREE' },
+          { value: 'FOUR', label: 'FOUR' },
         ]}
       />
     </div>
@@ -36,14 +36,14 @@ import { Select } from '@ohif/ui';
 
 <Playground>
   <div className="flex flex-col flex-1 p-4 items-center">
-    <div className="w-20">
+    <div className="w-56">
       <Select
         isDisabled
         options={[
-          { value: 'one', label: 'one' },
-          { value: 'two', label: 'two' },
-          { value: 'three', label: 'three' },
-          { value: 'four', label: 'four' },
+          { value: 'ONE', label: 'ONE' },
+          { value: 'TWO', label: 'TWO' },
+          { value: 'THREE', label: 'THREE' },
+          { value: 'FOUR', label: 'FOUR' },
         ]}
       />
     </div>
@@ -54,7 +54,7 @@ import { Select } from '@ohif/ui';
 
 <Playground>
   <div className="flex flex-col flex-1 p-4 items-center">
-    <div className="w-20">
+    <div className="w-56">
       <Select
         noOptionsMessage={() => {
           'No Options';

platform/ui/src/components/index.js

@@ -5,7 +5,10 @@ import EmptyStudies from './EmptyStudies';
 import Icon from './Icon';
 import IconButton from './IconButton';
 import Input from './Input';
-import NavBar from './NavBar';
+import InputDateRange from './InputDateRange';
+import InputLabelWrapper from './InputLabelWrapper';
+import InputMultiSelect from './InputMultiSelect';
+import InputText from './InputText';
 import Select from './Select';
 import Svg from './Svg';
 import Table from './Table';
@@ -24,7 +27,10 @@ export {
   Icon,
   IconButton,
   Input,
-  NavBar,
+  InputDateRange,
+  InputLabelWrapper,
+  InputMultiSelect,
+  InputText,
   Select,
   Svg,
   Table,

platform/ui/src/views/StudyList/StudyList.js

@@ -11,60 +11,78 @@ const filtersMeta = [
   {
     name: 'patientName',
     displayName: 'Patient Name',
-    inputType: 'text',
+    inputType: 'Text',
     isSortable: true,
     gridCol: 4,
   },
   {
     name: 'mrn',
     displayName: 'MRN',
-    inputType: 'text',
+    inputType: 'Text',
     isSortable: true,
     gridCol: 2,
   },
   {
     name: 'studyDate',
     displayName: 'Study date',
-    inputType: 'date-range',
+    inputType: 'DateRange',
     isSortable: true,
     gridCol: 5,
   },
   {
     name: 'description',
     displayName: 'Description',
-    inputType: 'text',
+    inputType: 'Text',
     isSortable: true,
     gridCol: 4,
   },
   {
     name: 'modality',
     displayName: 'Modality',
-    inputType: 'select',
-    selectOptions: [
-      { value: 'seg', label: 'seg' },
-      { value: 'ct', label: 'ct' },
-      { value: 'mr', label: 'mr' },
-      { value: 'sr', label: 'sr' },
-    ],
+    inputType: 'MultiSelect',
+    inputProps: {
+      options: [
+        { value: 'SEG', label: 'SEG' },
+        { value: 'CT', label: 'CT' },
+        { value: 'MR', label: 'MR' },
+        { value: 'SR', label: 'SR' },
+      ],
+    },
     isSortable: true,
     gridCol: 3,
   },
   {
     name: 'accession',
     displayName: 'Accession',
-    inputType: 'text',
+    inputType: 'Text',
     isSortable: true,
     gridCol: 4,
   },
   {
     name: 'instances',
     displayName: 'Instances',
-    inputType: 'none',
-    isSortable: false,
+    inputType: 'None',
+    isSortable: true,
     gridCol: 2,
   },
 ];
 
+const filtersValues = {
+  patientName: '',
+  mrn: '',
+  studyDate: {
+    startDate: null,
+    endDate: null,
+  },
+  description: '',
+  modality: undefined,
+  accession: '',
+  sortBy: '',
+  sortDirection: 'none',
+  page: 0,
+  resultsPerPage: 25,
+};
+
 const StudyList = ({ studies, perPage }) => {
   const studiesData = studies.slice(0, perPage);
   const numOfStudies = studies.length;
@@ -76,7 +94,11 @@ const StudyList = ({ studies, perPage }) => {
       })}
     >
       <Header />
-      <StudyListFilter numOfStudies={numOfStudies} filtersMeta={filtersMeta} />
+      <StudyListFilter
+        numOfStudies={numOfStudies}
+        filtersMeta={filtersMeta}
+        filtersValues={filtersValues}
+      />
       <StudyListTable
         studies={studiesData}
         numOfStudies={numOfStudies}

platform/ui/src/views/StudyList/components/StudyListFilter.js

@@ -2,100 +2,36 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import { Button, Icon, Input, Typography, Select, DateRange } from '@ohif/ui';
+import {
+  Button,
+  Icon,
+  Typography,
+  InputText,
+  InputDateRange,
+  InputMultiSelect,
+  InputLabelWrapper,
+} from '@ohif/ui';
 
-const sortIconMap = {
-  '-1': 'sorting-active-down',
-  0: 'sorting',
-  1: 'sorting-active-up',
+const isFiltering = (currentFiltersValues, filtersValues) => {
+  return Object.keys(currentFiltersValues).some(name => {
+    const filterValue = currentFiltersValues[name];
+    return filterValue !== filtersValues[name];
+  });
 };
 
-const defaultProps = {
-  filtersValues: {
-    patientName: '',
-    mrn: '',
-    startDate: null,
-    endDate: null,
-    description: '',
-    modality: '',
-    accession: '',
-    sortBy: '',
-    sortDirection: 0,
-    page: 0,
-    resultsPerPage: 25,
-  },
-};
-
-const FilterLabel = ({
-  label = '',
-  isSortable = false,
-  isBeingSorted = false,
-  sortDirection = 0,
-  onLabelClick,
-  className,
-  children,
-}) => {
-  const handleLabelClick = () => {
-    if (onLabelClick) {
-      onLabelClick();
-    }
-  };
-
-  const iconProps = {
-    name: isBeingSorted ? sortIconMap[sortDirection] : 'sorting',
-    colorClass: isBeingSorted ? 'text-custom-aquaBright' : 'text-custom-blue',
-  };
-
-  return (
-    <label
-      className={classnames(
-        'flex flex-col flex-1 text-white text-lg pl-1 select-none',
-        className
-      )}
-    >
-      <span
-        className="flex flex-row items-center cursor-pointer"
-        onClick={handleLabelClick}
-      >
-        {label}
-        {isSortable && (
-          <Icon
-            name={iconProps.name}
-            className={classnames('mx-2 w-2', iconProps.colorClass)}
-          />
-        )}
-      </span>
-      <span>{children}</span>
-    </label>
-  );
-};
-
-FilterLabel.propTypes = {
-  label: PropTypes.string,
-  isSortable: PropTypes.bool,
-  isBeingSorted: PropTypes.bool,
-  sortDirection: PropTypes.number,
-  onLabelClick: PropTypes.func,
-  className: PropTypes.string,
-  children: PropTypes.node,
-};
-
-const StudyListFilter = ({
-  filtersMeta = [],
-  filtersValues = defaultProps.filtersValues,
-  numOfStudies = 90,
-}) => {
+const StudyListFilter = ({ filtersMeta, filtersValues, numOfStudies }) => {
   const [currentFiltersValues, setcurrentFiltersValues] = useState(
     filtersValues
   );
   const { sortBy, sortDirection } = currentFiltersValues;
 
   const handleFilterLabelClick = name => {
-    let _sortDirection = 1;
+    let _sortDirection = 'ascending';
     if (sortBy === name) {
-      _sortDirection = sortDirection + 1;
-      if (_sortDirection > 1) {
-        _sortDirection = -1;
+      if (sortDirection === 'ascending') {
+        _sortDirection = 'descending';
+      } else if (sortDirection === 'descending') {
+        _sortDirection = 'none';
       }
     }
 
@@ -108,58 +44,88 @@ const StudyListFilter = ({
     }
   };
 
-  const handleFilterValueChange = (event, name) => {
-    const { value } = event.target;
-    setcurrentFiltersValues(prevState => ({
-      ...prevState,
-      [name]: value,
-    }));
-  };
-
   const clearFilters = () => {
-    setcurrentFiltersValues(defaultProps.filtersValues);
+    setcurrentFiltersValues(filtersValues);
   };
 
-  const isFiltering = () => {
-    return Object.keys(currentFiltersValues).some(name => {
-      const filterValue = currentFiltersValues[name];
-      return filterValue !== defaultProps.filtersValues[name];
-    });
-  };
-
-  const renderInput = (inputType, name, { selectOptions }) => {
+  const renderFieldInputComponent = ({
+    name,
+    displayName,
+    inputProps,
+    isSortable,
+    inputType,
+  }) => {
+    const _isSortable = isSortable && numOfStudies <= 100 && numOfStudies > 0;
+    const _sortDirection = sortBy !== name ? 'none' : sortDirection;
+    const onLabelClick = () => {
+      if (_isSortable) {
+        handleFilterLabelClick(name);
+      }
+    };
     switch (inputType) {
-      case 'date-range': {
+      case 'Text':
         return (
-          <div className="relative">
-            <DateRange
-              startDate={currentFiltersValues.startDate}
-              endDate={currentFiltersValues.endDate}
-              onChange={({ startDate, endDate, preset = false }) => {
-                setcurrentFiltersValues(state => ({
-                  ...state,
-                  startDate,
-                  endDate,
-                }));
-              }}
-            />
-          </div>
-        );
-      }
-      case 'select': {
-        return <Select options={selectOptions}></Select>;
-      }
-      case 'text': {
-        return (
-          <Input
-            className="border-custom-blue mt-2 bg-black"
-            type="text"
-            containerClassName="mr-2"
-            value={currentFiltersValues[name] || ''}
-            onChange={event => handleFilterValueChange(event, name)}
+          <InputText
+            key={name}
+            label={displayName}
+            isSortable={_isSortable}
+            sortDirection={_sortDirection}
+            onLabelClick={onLabelClick}
+            value={currentFiltersValues[name]}
+            onChange={newValue => {
+              setcurrentFiltersValues(prevState => ({
+                ...prevState,
+                [name]: newValue,
+              }));
+            }}
+          />
+        );
+        break;
+      case 'MultiSelect':
+        return (
+          <InputMultiSelect
+            key={name}
+            label={displayName}
+            isSortable={_isSortable}
+            sortDirection={_sortDirection}
+            onLabelClick={onLabelClick}
+            options={inputProps.options}
+            value={currentFiltersValues[name]}
+            onChange={newValue => {
+              setcurrentFiltersValues(prevState => ({
+                ...prevState,
+                [name]: newValue,
+              }));
+            }}
+          />
+        );
+      case 'DateRange':
+        return (
+          <InputDateRange
+            key={name}
+            label={displayName}
+            isSortable={_isSortable}
+            sortDirection={_sortDirection}
+            onLabelClick={onLabelClick}
+            value={currentFiltersValues[name]}
+            onChange={newValue => {
+              setcurrentFiltersValues(prevState => ({
+                ...prevState,
+                [name]: newValue,
+              }));
+            }}
+          />
+        );
+      case 'None':
+        return (
+          <InputLabelWrapper
+            key={name}
+            label={displayName}
+            isSortable={_isSortable}
+            sortDirection={_sortDirection}
+            onLabelClick={onLabelClick}
           />
         );
-      }
       default:
         break;
     }
@@ -194,7 +160,7 @@ const StudyListFilter = ({
                 </div>
               </div>
               <div className="flex flex-row">
-                {isFiltering() && (
+                {isFiltering(currentFiltersValues, filtersValues) && (
                   <Button
                     rounded="full"
                     variant="outlined"
@@ -224,40 +190,19 @@ const StudyListFilter = ({
         <div className="bg-custom-navyDark pt-3 pb-3 ">
           <div className="container m-auto relative flex flex-col">
             <div className="flex flex-row w-full">
-              {filtersMeta.map(
-                ({
-                  name,
-                  displayName,
-                  inputType,
-                  isSortable,
-                  gridCol,
-                  selectOptions,
-                }) => {
-                  return (
-                    <div
-                      key={name}
-                      className={classnames(
-                        `w-${gridCol}/24`,
-                        'pl-4 first:pl-12'
-                      )}
-                    >
-                      <FilterLabel
-                        key={name}
-                        label={displayName}
-                        isSortable={
-                          isSortable && numOfStudies <= 100 && numOfStudies > 0
-                        }
-                        isBeingSorted={sortBy === name}
-                        sortDirection={sortDirection}
-                        onLabelClick={() => handleFilterLabelClick(name)}
-                        inputType={inputType}
-                      >
-                        {renderInput(inputType, name, { selectOptions })}
-                      </FilterLabel>
-                    </div>
-                  );
-                }
-              )}
+              {filtersMeta.map(filterMeta => {
+                return (
+                  <div
+                    key={filterMeta.name}
+                    className={classnames(
+                      'pl-4 first:pl-12',
+                      `w-${filterMeta.gridCol}/24`
+                    )}
+                  >
+                    {renderFieldInputComponent(filterMeta)}
+                  </div>
+                );
+              })}
             </div>
           </div>
         </div>
@@ -275,20 +220,24 @@ const StudyListFilter = ({
   );
 };
 
+StudyListFilter.defaultProps = {
+  filtersMeta: [],
+  filtersValues: {},
+  numOfStudies: 0,
+};
+
 StudyListFilter.propTypes = {
   filtersMeta: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string,
       dsplayName: PropTypes.string,
-      inputType: PropTypes.oneOf(['text', 'select', 'date-range', 'none']),
+      inputType: PropTypes.oneOf(['Text', 'MultiSelect', 'DateRange', 'None']),
       isSortable: PropTypes.bool,
       gridCol: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
     })
   ),
   filtersValues: PropTypes.object,
   numOfStudies: PropTypes.number,
-  startDate: PropTypes.string,
-  endDate: PropTypes.string,
 };
 
 export default StudyListFilter;