OHIF-32: Wrapping React-select with our style requirements (#1529)

* Custom Select component

* Including inpot section

* Adding missing import sections on docz

* Change cursor once is disabled

* update date range color font

platform/ui/index.js

@@ -6,6 +6,7 @@ export {
   DateRange,
   Icon,
   IconButton,
+  Select,
   Svg,
   Input,
   ThemeWrapper,

platform/ui/package.json

@@ -40,6 +40,7 @@
     "react-dates": "^21.8.0",
     "react-dom": "16.11.0",
     "react-powerplug": "1.0.0",
+    "react-select": "^3.0.8",
     "theme-ui": "^0.2.38"
   },
   "devDependencies": {

platform/ui/src/components/DateRange/DateRange.css

@@ -29,7 +29,7 @@
   @apply bg-no-repeat;
 }
 .DateInput_input {
-  @apply cursor-pointer border-custom-blue mt-2 bg-black shadow transition duration-300 appearance-none border-t border-l border-r border-b border-solid rounded w-full py-2 px-3 text-sm text-gray-700 leading-tight pl-8;
+  @apply cursor-pointer border-custom-blue mt-2 bg-black shadow transition duration-300 appearance-none border-t border-l border-r border-b border-solid rounded w-full py-2 px-3 text-sm text-white leading-tight pl-8;
 }
 .DateInput_input:hover {
   @apply border-gray-500;

platform/ui/src/components/Icon/icon.mdx

@@ -10,6 +10,12 @@ import { ICONS } from './getIcon';
 
 # Icon
 
+## Import
+
+```javascript
+import { Icon } from '@ohfi/ui';
+```
+
 ## Basic usage
 
 <Playground>

platform/ui/src/components/Input/Input.jsx

@@ -4,7 +4,7 @@ import Label from '../Label';
 import classnames from 'classnames';
 
 const baseInputClasses =
-  'shadow transition duration-300 appearance-none border rounded w-full py-2 px-3 text-sm text-gray-700 hover:border-gray-500 leading-tight focus:border-gray-500 focus:outline-none';
+  'shadow transition duration-300 appearance-none border rounded w-full py-2 px-3 text-sm text-white hover:border-gray-500 leading-tight focus:border-gray-500 focus:outline-none';
 
 const transparentClasses = {
   true: 'bg-transparent',

platform/ui/src/components/Input/Input.mdx

@@ -9,6 +9,12 @@ import Input from './';
 
 # Input
 
+## Import
+
+```javascript
+import { Input } from '@ohfi/ui';
+```
+
 ## Basic usage
 
 <Playground>

platform/ui/src/components/Label/Label.mdx

@@ -9,6 +9,12 @@ import Label from './';
 
 # Label
 
+## Import
+
+```javascript
+import { Label } from '@ohfi/ui';
+```
+
 ## Basic usage
 
 <Playground>

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

@@ -0,0 +1,39 @@
+.customSelect__wrapper .customSelect__control {
+  @apply bg-black border-custom-blue shadow transition duration-300 border rounded w-full text-sm text-white leading-tight;
+  min-height: 33px;
+}
+.customSelect__wrapper .customSelect__control:hover {
+  @apply border-gray-500;
+}
+
+.customSelect__wrapper .customSelect__control:focus {
+  @apply border-gray-500 outline-none;
+}
+
+.customSelect__wrapper .customSelect__control--menu-is-open {
+  @apply border-gray-500 outline-none;
+}
+
+.customSelect__wrapper .customSelect__indicator-separator {
+  @apply hidden;
+}
+
+.customSelect__wrapper .customSelect__dropdown-indicator {
+  padding: 4px;
+}
+
+.customSelect__wrapper .customSelect__option {
+  @apply text-black;
+}
+
+.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;
+}

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import ReactSelect from 'react-select';
+
+import './Select.css';
+
+const Select = ({
+  autoFocus,
+  className,
+  isDisabled,
+  isMulti,
+  isSearchable,
+  name,
+  onChange,
+  options,
+  placeholder,
+  noOptionsMessage,
+  value,
+}) => {
+  return (
+    <ReactSelect
+      autoFocus={autoFocus}
+      className={classnames(
+        className,
+        'flex flex-col flex-1 mt-2 customSelect__wrapper'
+      )}
+      classNamePrefix="customSelect"
+      isDisabled={isDisabled}
+      isMulti={isMulti}
+      isSearchable={isSearchable}
+      name={name}
+      onChange={onChange}
+      options={options}
+      placeholder={placeholder}
+      noOptionsMessage={noOptionsMessage}
+      value={value}
+    ></ReactSelect>
+  );
+};
+
+Select.propTypes = {
+  autoFocus: PropTypes.bool,
+  className: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isMulti: PropTypes.bool,
+  isSearchable: PropTypes.bool,
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string,
+      label: PropTypes.string,
+    })
+  ),
+  placeholder: PropTypes.string,
+  noOptionsMessage: PropTypes.func,
+  value: PropTypes.string,
+};
+
+export default Select;

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

@@ -0,0 +1,70 @@
+---
+name: Select
+menu: Components
+route: components/select
+---
+
+import { Playground, Props } from 'docz';
+import Select from './';
+
+# Select
+
+## Import
+
+```javascript
+import { Select } from '@ohfi/ui';
+```
+
+## Basic usage
+
+<Playground>
+  <div className="flex flex-col flex-1 p-4 items-center">
+    <div className="w-20">
+      <Select
+        options={[
+          { value: 'one', label: 'one' },
+          { value: 'two', label: 'two' },
+          { value: 'three', label: 'three' },
+          { value: 'four', label: 'four' },
+        ]}
+      />
+    </div>
+  </div>
+</Playground>
+
+## Disabled
+
+<Playground>
+  <div className="flex flex-col flex-1 p-4 items-center">
+    <div className="w-20">
+      <Select
+        isDisabled
+        options={[
+          { value: 'one', label: 'one' },
+          { value: 'two', label: 'two' },
+          { value: 'three', label: 'three' },
+          { value: 'four', label: 'four' },
+        ]}
+      />
+    </div>
+  </div>
+</Playground>
+
+## No Options
+
+<Playground>
+  <div className="flex flex-col flex-1 p-4 items-center">
+    <div className="w-20">
+      <Select
+        noOptionsMessage={() => {
+          'No Options';
+        }}
+        options={[]}
+      />
+    </div>
+  </div>
+</Playground>
+
+## Properties
+
+<Props of={Select} />

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

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

platform/ui/src/components/index.js

@@ -4,6 +4,7 @@ import DateRange from './DateRange';
 import Icon from './Icon';
 import IconButton from './IconButton';
 import Input from './Input';
+import Select from './Select';
 import Svg from './Svg';
 import ThemeWrapper from './ThemeWrapper/';
 import Typography from './Typography';
@@ -15,6 +16,7 @@ export {
   Icon,
   IconButton,
   Input,
+  Select,
   Svg,
   ThemeWrapper,
   Typography,

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

@@ -39,7 +39,13 @@ const filtersMeta = [
   {
     name: 'modality',
     displayName: 'Modality',
-    inputType: 'text',
+    inputType: 'select',
+    selectOptions: [
+      { value: 'seg', label: 'seg' },
+      { value: 'ct', label: 'ct' },
+      { value: 'mr', label: 'mr' },
+      { value: 'sr', label: 'sr' },
+    ],
     isSortable: true,
     gridCol: 3,
   },

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

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import { Button, Icon, Input, Typography, DateRange } from '@ohif/ui';
+import { Button, Icon, Input, Typography, Select, DateRange } from '@ohif/ui';
 
 const sortIconMap = {
   '-1': 'sorting-active-down',
@@ -127,7 +127,7 @@ const StudyListFilter = ({
     });
   };
 
-  const renderInput = (inputType, name) => {
+  const renderInput = (inputType, name, { selectOptions }) => {
     switch (inputType) {
       case 'date-range': {
         return (
@@ -146,8 +146,10 @@ const StudyListFilter = ({
           </div>
         );
       }
-
-      default:
+      case 'select': {
+        return <Select options={selectOptions}></Select>;
+      }
+      case 'text': {
         return (
           <Input
             className="border-custom-blue mt-2 bg-black"
@@ -157,6 +159,9 @@ const StudyListFilter = ({
             onChange={event => handleFilterValueChange(event, name)}
           />
         );
+      }
+      default:
+        break;
     }
   };
 
@@ -220,7 +225,14 @@ const StudyListFilter = ({
           <div className="container m-auto relative flex flex-col">
             <div className="flex flex-row w-full">
               {filtersMeta.map(
-                ({ name, displayName, inputType, isSortable, gridCol }) => {
+                ({
+                  name,
+                  displayName,
+                  inputType,
+                  isSortable,
+                  gridCol,
+                  selectOptions,
+                }) => {
                   return (
                     <div
                       key={name}
@@ -240,7 +252,7 @@ const StudyListFilter = ({
                         onLabelClick={() => handleFilterLabelClick(name)}
                         inputType={inputType}
                       >
-                        {inputType !== 'none' && renderInput(inputType, name)}
+                        {renderInput(inputType, name, { selectOptions })}
                       </FilterLabel>
                     </div>
                   );