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/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';