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

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

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;