OHIF-298: Fix dropdown color in win browsers (#1981)

* ohif-298: use new select in pagination

* ohif-298: add menu placement

* ohif-298: update border

* ohif-298: fix sticky menu

Co-authored-by: Danny Brown <danny.ri.brown@gmail.com>

extensions/default/src/ViewerLayout/index.jsx

@@ -143,6 +143,7 @@ function ViewerLayout({
   extensionManager,
   servicesManager,
   hotkeysManager,
+  commandsManager,
   // From Modes
   leftPanels,
   rightPanels,

platform/ui/src/components/Header/Header.jsx

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 import { NavBar, Svg, Icon, IconButton, Dropdown } from '@ohif/ui';
 
-function Header({ children, menuOptions, isReturnEnabled }) {
+function Header({ children, menuOptions, isReturnEnabled, isSticky }) {
   const { t } = useTranslation();
   const history = useHistory();
 
@@ -17,7 +17,7 @@ function Header({ children, menuOptions, isReturnEnabled }) {
   };
 
   return (
-    <NavBar className="justify-between border-b-4 border-black">
+    <NavBar className='justify-between border-b-4 border-black' isSticky={isSticky}>
       <div className="flex justify-between flex-1">
         <div className="flex items-center">
           {/* // TODO: Should preserve filter/sort
@@ -60,12 +60,21 @@ function Header({ children, menuOptions, isReturnEnabled }) {
 }
 
 Header.propTypes = {
+  menuOptions: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string.isRequired,
+      icon: PropTypes.string,
+      onClick: PropTypes.func.isRequired,
+    })
+  ),
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  isReturnEnabled: PropTypes.bool
+  isReturnEnabled: PropTypes.bool,
+  isSticky: PropTypes.bool
 };
 
 Header.defaultProps = {
-  isReturnEnabled: true
+  isReturnEnabled: true,
+  isSticky: false
 };
 
 export default Header;

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

@@ -43,9 +43,13 @@ const Select = ({
   onChange,
   options,
   placeholder,
+  noIcons,
+  menuPlacement,
   value,
 }) => {
-  const _components = isMulti ? { Option, MultiValue } : {};
+  const _noIconComponents = { DropdownIndicator: () => null, IndicatorSeparator: () => null };
+  let _components = isMulti ? { Option, MultiValue } : {};
+  _components = noIcons ? { ..._components, ..._noIconComponents } : _components;
   const selectedOptions = [];
 
   // Map array of values to an array of selected options
@@ -69,12 +73,13 @@ const Select = ({
       isClearable={isClearable}
       isMulti={isMulti}
       isSearchable={isSearchable}
+      menuPlacement={menuPlacement}
       closeMenuOnSelect={closeMenuOnSelect}
       hideSelectedOptions={hideSelectedOptions}
       components={_components}
       placeholder={placeholder}
       options={options}
-      value={isMulti ? selectedOptions : value}
+      value={value && Array.isArray(value) ? selectedOptions : value}
       onChange={(selectedOptions, { action }) => {
         const newSelection = !selectedOptions.length
           ? selectedOptions
@@ -93,6 +98,8 @@ Select.defaultProps = {
   isDisabled: false,
   isMulti: false,
   isSearchable: true,
+  noIcons: false,
+  menuPlacement: 'auto',
   value: [],
 };
 
@@ -104,6 +111,8 @@ Select.propTypes = {
   isDisabled: PropTypes.bool,
   isMulti: PropTypes.bool,
   isSearchable: PropTypes.bool,
+  noIcons: PropTypes.bool,
+  menuPlacement: PropTypes.oneOf(['auto', 'bottom', 'top']),
   onChange: PropTypes.func.isRequired,
   options: PropTypes.arrayOf(
     PropTypes.shape({
@@ -112,7 +121,7 @@ Select.propTypes = {
     })
   ),
   placeholder: PropTypes.string,
-  value: PropTypes.oneOfType(PropTypes.string, PropTypes.arrayOf(PropTypes.string)),
+  value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.any]),
 };
 
 export default Select;

platform/ui/src/components/StudyListPagination/StudyListPagination.js

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Button, ButtonGroup, Icon, Typography } from '../';
+import { Button, ButtonGroup, Typography, Select } from '../';
 
 const StudyListPagination = ({
   onChangePage,
@@ -13,30 +13,33 @@ const StudyListPagination = ({
     onChangePage(toPage);
   };
 
+  const ranges = [
+    { value: '25', label: '25' },
+    { value: '50', label: '50' },
+    { value: '100', label: '100' },
+  ];
+  const [selectedRange, setSelectedRange] = useState(ranges.find(r => r.value == perPage));
+  const onSelectedRange = (selectedRange) => {
+    setSelectedRange(selectedRange);
+    onChangePerPage(selectedRange.value);
+  };
+
   return (
     <div className="bg-black py-10">
       <div className="container m-auto relative px-8">
         <div className="flex justify-between">
           <div className="flex items-center">
-            <div className="relative mr-3">
+            <Select
-              <select
+              className="relative mr-3 w-16 border-primary-main"
-                value={perPage}
+              options={ranges}
-                className="block appearance-none w-full bg-transparent border border-common-active text-white text-base px-2 pr-4 rounded leading-tight focus:outline-none h-8"
+              value={selectedRange}
-                onChange={e => onChangePerPage(e.target.value)}
+              isMulti={false}
-                onBlur={() => {}}
+              isClearable={false}
-              >
+              isSearchable={false}
-                <option value="25">25</option>
+              closeMenuOnSelect={false}
-                <option value="50">50</option>
+              hideSelectedOptions={true}
-                <option value="100">100</option>
+              onChange={onSelectedRange}
-              </select>
+            />
-              <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
-                <Icon
-                  name="arrow-down"
-                  className="text-white"
-                  style={{ width: 6 }}
-                />
-              </div>
-            </div>
             <Typography className="text-base opacity-60">
               Results per page
             </Typography>
@@ -49,7 +52,7 @@ const StudyListPagination = ({
               <ButtonGroup color="primary">
                 <Button
                   size="initial"
-                  className="border-common-active px-4 py-2 text-base"
+                  className="border-primary-main px-4 py-2 text-base"
                   color="white"
                   onClick={() => navigateToPage(1)}
                 >
@@ -57,13 +60,13 @@ const StudyListPagination = ({
                 </Button>
                 <Button
                   size="initial"
-                  className="border-common-active py-2 px-2 text-base"
+                  className="border-primary-main py-2 px-2 text-base"
                   color="white"
                   onClick={() => navigateToPage(currentPage - 1)}
                 >{`< Previous`}</Button>
                 <Button
                   size="initial"
-                  className="border-common-active py-2 px-4 text-base"
+                  className="border-primary-main py-2 px-4 text-base"
                   color="white"
                   onClick={() => navigateToPage(currentPage + 1)}
                 >

platform/viewer/src/routes/WorkList/WorkList.jsx

@@ -377,7 +377,7 @@ function WorkList({ history, data: studies, isLoadingData, dataSource, hotkeysMa
         'h-screen': !hasStudies,
       })}
     >
-      <Header menuOptions={menuOptions} isReturnEnabled={false} />
+      <Header isSticky menuOptions={menuOptions} isReturnEnabled={false} />
       <StudyListFilter
         numOfStudies={numOfStudies}
         filtersMeta={filtersMeta}