refactor: StudyListFilter refactor (#1580)

* Creating InputGroup

* Updating Views with new InputGroup

* Creating Docz for InputGroup

* Fixing eslint issues

* Renaming inputGroup props naming to be more generic.

platform/ui/src/components/InputGroup/InputGroup.jsx

@@ -0,0 +1,162 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import {
+  InputText,
+  InputDateRange,
+  InputMultiSelect,
+  InputLabelWrapper,
+} from '@ohif/ui';
+
+const InputGroup = ({
+  inputMeta,
+  values,
+  onValuesChange,
+  sorting,
+  onSortingChange,
+  isSortingEnable,
+}) => {
+  const { sortBy, sortDirection } = sorting;
+
+  const handleFilterLabelClick = name => {
+    if (isSortingEnable) {
+      let _sortDirection = 'ascending';
+      if (sortBy === name) {
+        if (sortDirection === 'ascending') {
+          _sortDirection = 'descending';
+        } else if (sortDirection === 'descending') {
+          _sortDirection = 'none';
+        }
+      }
+
+      onSortingChange({
+        sortBy: _sortDirection !== 'none' ? name : '',
+        sortDirection: _sortDirection,
+      });
+    }
+  };
+
+  const renderFieldInputComponent = ({
+    name,
+    displayName,
+    inputProps,
+    isSortable,
+    inputType,
+  }) => {
+    const _isSortable = isSortable && isSortingEnable;
+    const _sortDirection = sortBy !== name ? 'none' : sortDirection;
+
+    const onLabelClick = () => {
+      handleFilterLabelClick(name);
+    };
+
+    const handleFieldChange = newValue => {
+      onValuesChange({
+        ...values,
+        [name]: newValue,
+      });
+    };
+
+    switch (inputType) {
+      case 'Text':
+        return (
+          <InputText
+            key={name}
+            label={displayName}
+            isSortable={_isSortable}
+            sortDirection={_sortDirection}
+            onLabelClick={onLabelClick}
+            value={values[name]}
+            onChange={handleFieldChange}
+          />
+        );
+      case 'MultiSelect':
+        return (
+          <InputMultiSelect
+            key={name}
+            label={displayName}
+            isSortable={_isSortable}
+            sortDirection={_sortDirection}
+            onLabelClick={onLabelClick}
+            value={values[name]}
+            onChange={handleFieldChange}
+            options={inputProps.options}
+          />
+        );
+      case 'DateRange':
+        return (
+          <InputDateRange
+            key={name}
+            label={displayName}
+            isSortable={_isSortable}
+            sortDirection={_sortDirection}
+            onLabelClick={onLabelClick}
+            value={values[name]}
+            onChange={handleFieldChange}
+          />
+        );
+      case 'None':
+        return (
+          <InputLabelWrapper
+            key={name}
+            label={displayName}
+            isSortable={_isSortable}
+            sortDirection={_sortDirection}
+            onLabelClick={onLabelClick}
+          />
+        );
+      default:
+        break;
+    }
+  };
+  return (
+    <div className="container m-auto relative flex flex-col">
+      <div className="flex flex-row w-full">
+        {inputMeta.map(inputMeta => {
+          return (
+            <div
+              key={inputMeta.name}
+              className={classnames(
+                'pl-4 first:pl-12',
+                `w-${inputMeta.gridCol}/24`
+              )}
+            >
+              {renderFieldInputComponent(inputMeta)}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+InputGroup.propTypes = {
+  inputMeta: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      displayName: PropTypes.string.isRequired,
+      inputType: PropTypes.oneOf(['Text', 'MultiSelect', 'DateRange', 'None'])
+        .isRequired,
+      isSortable: PropTypes.bool.isRequired,
+      gridCol: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12])
+        .isRequired,
+      option: PropTypes.arrayOf(
+        PropTypes.shape({
+          value: PropTypes.string,
+          label: PropTypes.string,
+        })
+      ),
+    })
+  ).isRequired,
+  values: PropTypes.object.isRequired,
+  onValuesChange: PropTypes.func.isRequired,
+  sorting: PropTypes.shape({
+    sortBy: PropTypes.string,
+    sortDirection: PropTypes.oneOf(['ascending', 'descending', 'none']),
+  }).isRequired,
+  onSortingChange: PropTypes.func.isRequired,
+  isSortingEnable: PropTypes.bool.isRequired,
+};
+
+export default InputGroup;

platform/ui/src/components/InputGroup/InputGroup.mdx

@@ -0,0 +1,90 @@
+---
+name: InputGroup
+menu: Components
+route: components/InputGroup
+---
+
+import { useState } from 'react';
+import { Playground, Props } from 'docz';
+import { InputGroup } from '@ohif/ui';
+
+# Input Group
+
+## Import
+
+```javascript
+import { InputGroup } from '@ohif/ui';
+```
+
+## Basic usage
+
+<Playground>
+  {() => {
+    const [filterValues, setFilterValues] = useState({
+      patient: '',
+      studyDate: {
+        startDate: null,
+        endDate: null,
+      },
+      modality: [],
+    });
+    const [filterSorting, setFilterSorting] = useState({
+      sortBy: '',
+      sortDirection: 'none',
+    });
+    const filtersMeta = [
+      {
+        name: 'patient',
+        displayName: 'Patient Name',
+        inputType: 'Text',
+        isSortable: true,
+        gridCol: 6,
+      },
+      {
+        name: 'studyDate',
+        displayName: 'Study date',
+        inputType: 'DateRange',
+        isSortable: true,
+        gridCol: 6,
+      },
+      {
+        name: 'modality',
+        displayName: 'Modality',
+        inputType: 'MultiSelect',
+        inputProps: {
+          options: [
+            { value: 'SEG', label: 'SEG' },
+            { value: 'CT', label: 'CT' },
+            { value: 'MR', label: 'MR' },
+            { value: 'SR', label: 'SR' },
+          ],
+        },
+        isSortable: true,
+        gridCol: 6,
+      },
+      {
+        name: 'numberOfInstance',
+        displayName: 'Number of Instances',
+        inputType: 'None',
+        isSortable: true,
+        gridCol: 6,
+      },
+    ];
+    return (
+      <div className="py-4">
+        <InputGroup
+          inputMeta={filtersMeta}
+          values={filterValues}
+          onValuesChange={setFilterValues}
+          sorting={filterSorting}
+          onSortingChange={setFilterSorting}
+          isSortingEnable={true}
+        />
+      </div>
+    );
+  }}
+</Playground>
+
+## Properties
+
+<Props of={InputGroup} />

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

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