add machine table dropdown menu

SaladTechnologies · Jan 30, 2025 · a302d8d · a302d8d
1 parent be847bd
commit a302d8d
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 8 deletions.
diff --git a/packages/web-app/src/components/Dropdown/Dropdown.tsx b/packages/web-app/src/components/Dropdown/Dropdown.tsx
@@ -16,28 +16,43 @@ export interface DropdownOption {
   value: string
 }
 
-export type DropdownStylesConfig = StylesConfig<DropdownOption | '', false, GroupBase<DropdownOption | ''>>
+export type DropdownStylesConfig = StylesConfig<DropdownOption, false, GroupBase<DropdownOption>>
 
 export interface Props extends WithStyles<typeof styles> {
+  control?: JSX.Element
   customStyles?: DropdownStylesConfig
   options?: DropdownOption[]
   value?: string
+  isSearchable?: boolean
   onChange?: (value?: any) => void
 }
 
-const _Dropdown: FC<Props> = ({ classes, customStyles, options, value, onChange }) => {
-  const selectedValue = value && options?.find((option) => option.value === value)
+const _Dropdown: FC<Props> = ({ classes, control, customStyles, isSearchable=true, options, value, onChange }) => {
+  const selectedValue = value ? options?.find((option) => option.value === value) : undefined
 
   const defaultStyles: DropdownStylesConfig = {
     control: (baseStyles: CSSObjectWithLabel) => ({
       ...baseStyles,
-      backgroundColor: DefaultTheme.darkBlue,
+      backgroundColor: control ? 'transparent' : DefaultTheme.darkBlue,
       borderRadius: 0,
+      ...(control && {
+        cursor: 'pointer',
+        border: 'none',
+        outline: 'none',
+        boxShadow: 'none',
+        '& input': {
+          position: 'absolute',
+        },
+        '&:hover svg': {
+          color: DefaultTheme.green,
+        },
+      }),
     }),
     menu: (baseStyles: CSSObjectWithLabel) => ({
       ...baseStyles,
       color: DefaultTheme.lightGreen,
       backgroundColor: DefaultTheme.darkBlue,
+      ...(control && { width: '150px' }),
     }),
     option: (baseStyles: CSSObjectWithLabel, state: { isSelected: boolean; isFocused: boolean }) => {
       let backgroundColor = DefaultTheme.darkBlue
@@ -60,6 +75,10 @@ const _Dropdown: FC<Props> = ({ classes, customStyles, options, value, onChange
       transition: 'opacity 300ms',
       color: DefaultTheme.lightGreen,
     }),
+    placeholder: (baseStyles: CSSObjectWithLabel) => ({
+      ...baseStyles,
+      ...(control && { color: DefaultTheme.lightGreen }),
+    }),
   }
 
   return (
@@ -68,8 +87,17 @@ const _Dropdown: FC<Props> = ({ classes, customStyles, options, value, onChange
       value={selectedValue}
       options={options}
       onChange={onChange}
-      defaultValue={options && options[0]}
+      defaultValue={control ? undefined : options && options[0]}
       styles={customStyles ?? defaultStyles}
+      {...(control && {
+        components: {
+          IndicatorSeparator: () => null,
+          DropdownIndicator: () => null,
+          SingleValue: () => control,
+        },
+      })}
+      placeholder={control}
+      isSearchable={isSearchable}
     />
   )
 }

diff --git a/packages/web-app/src/components/Dropdown/DropdownLight/DropdownLight.tsx b/packages/web-app/src/components/Dropdown/DropdownLight/DropdownLight.tsx
@@ -38,6 +38,6 @@ const dropdownLightStyles: DropdownStylesConfig = {
   }),
 }
 
-export const DropdownLight: FC<Omit<Props, 'customStyles' | 'classes'>> = ({ options, value, onChange }) => {
-  return <Dropdown customStyles={dropdownLightStyles} options={options} value={value} onChange={onChange} />
+export const DropdownLight: FC<Omit<Props, 'customStyles' | 'classes'>> = (props) => {
+  return <Dropdown {...props} customStyles={dropdownLightStyles}  />
 }
diff --git a/packages/web-app/src/modules/earn-views/components/AllMachines/AllMachines.tsx b/packages/web-app/src/modules/earn-views/components/AllMachines/AllMachines.tsx
@@ -7,6 +7,7 @@ import { DateTime } from 'luxon'
 import { useState } from 'react'
 import type { WithStyles } from 'react-jss'
 import withStyles from 'react-jss'
+import { Dropdown } from '../../../../components/Dropdown'
 import { Table } from '../../../../components/Table'
 import type { TableRow } from '../../../../components/Table/types'
 import { DefaultTheme, type SaladTheme } from '../../../../SaladTheme'
@@ -108,7 +109,28 @@ const _AllMachines = ({ classes }: Props) => {
   const getTitles = () => {
     return [
       <div className={(classes.tableHeaderCell, classes.tableCellCentered)}>
-        <FontAwesomeIcon icon={faList} />
+        <Dropdown
+          control={<FontAwesomeIcon size="xl" icon={faList} />}
+          options={[
+            {
+              value: 'Select All',
+              label: 'Select All',
+            },
+            {
+              value: 'Select All In Page',
+              label: 'Select All In Page',
+            },
+            {
+              value: 'Deselect All',
+              label: 'Deselect All',
+            },
+            {
+              value: 'Deselect All In Page',
+              label: 'Deselect All In Page',
+            },
+          ]}
+          isSearchable={false}
+        />
       </div>,
       <div className={classes.tableHeaderCell}>
         <Text variant="baseXS">Machine ID</Text>