headlessui react select box

canvas · Dec 15, 2023 · 574fb0d · 574fb0d
1 parent faaf940
commit 574fb0d
Show file tree

Hide file tree

Showing 7 changed files with 126 additions and 32 deletions.
diff --git a/example/package-lock.json b/example/package-lock.json
diff --git a/example/package.json b/example/package.json
@@ -39,4 +39,4 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }
-}
+}
diff --git a/react/package-lock.json b/react/package-lock.json
diff --git a/react/package.json b/react/package.json
@@ -64,6 +64,8 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.17",
+    "@heroicons/react": "^2.0.18",
     "antd": "^5.12.2",
     "chroma-js": "^2.4.2",
     "highcharts": "^11.2.0",

diff --git a/react/src/Element.tsx b/react/src/Element.tsx
@@ -20,7 +20,7 @@ export function Element({ title, children, elementId }: ElementProps): React.Rea
                 }}
                 id={elementId}
             >
-                <div className="flex h-12 cursor-grab items-center rounded-lg px-7 hover:bg-highlight/50">
+                <div className="flex h-12 items-center rounded-lg px-7 hover:bg-highlight/50">
                     <div className="flex flex-1 items-center">
                         <div style={styles.title}>{title}</div>
                     </div>

diff --git a/react/src/components/MultiSelectInput.tsx b/react/src/components/MultiSelectInput.tsx
@@ -1,28 +1,89 @@
-import React from 'react';
+import React, { useState, Fragment } from 'react';
+import { Listbox, Transition } from '@headlessui/react';
+import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid';
+
+type Value = string;
+type Label = string;
+export type SelectOption = [Value, Label];
 
 type MultiSelectInputProps = {
-    value: string;
+    value: string; // value === '' when default option is selected
     onChange: (value: string) => void;
-    options: string[][];
+    options: SelectOption[];
+    defaultOption?: string;
+};
+
+function getLabel(item: SelectOption) {
+    if (item[0] === '') return item[1];
+    return `${item[0]}${item[1] ? ` (${item[1]})` : ''}`;
+}
+
+// taken from https://headlessui.com/react/listbox
+const MultiSelectInputDisplay = ({ value, onChange, options }: MultiSelectInputProps) => {
+    return (
+        <div className="w-72 z-30">
+            <Listbox value={value} onChange={(item) => onChange(item[0])}>
+                <div className="relative mt-1">
+                    <Listbox.Button className="relative w-full cursor-pointer rounded-lg bg-white py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
+                        <span className="block truncate">
+                            {getLabel(options.find((item) => item[0] === value) as SelectOption)}
+                        </span>
+                        <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                            <ChevronUpDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                        </span>
+                    </Listbox.Button>
+                    <Transition
+                        as={Fragment}
+                        leave="transition ease-in duration-100"
+                        leaveFrom="opacity-100"
+                        leaveTo="opacity-0"
+                    >
+                        <Listbox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
+                            {options?.map((option, index) => (
+                                <Listbox.Option
+                                    key={index}
+                                    className={({ active }) =>
+                                        `relative cursor-pointer select-none py-2 pl-10 pr-4 ${
+                                            active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
+                                        }`
+                                    }
+                                    value={option}
+                                >
+                                    {({ selected }) => (
+                                        <>
+                                            <span
+                                                className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}
+                                            >
+                                                {getLabel(option)}
+                                            </span>
+                                            {selected ? (
+                                                <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-amber-600">
+                                                    <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                                                </span>
+                                            ) : null}
+                                        </>
+                                    )}
+                                </Listbox.Option>
+                            ))}
+                        </Listbox.Options>
+                    </Transition>
+                </div>
+            </Listbox>
+        </div>
+    );
 };
 
-const MultiSelectInput = ({ value, onChange, options }: MultiSelectInputProps) => {
+// Our wrapper that adds default option
+const MultiSelectInput = ({ value, onChange, options, defaultOption }: MultiSelectInputProps) => {
+    const optionsFinal = defaultOption ? [['', defaultOption] as SelectOption, ...options] : options;
+    const valueFinal = value || '';
     return (
-        <select
-            id="countries"
-            className="cursor-pointer border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-300 focus:border-blue-300 block w-full px-2 py-1 w-32"
-            onChange={(event) => {
-                onChange(event.target.value);
-            }}
-            value={value || ''}
-        >
-            <option selected value="">
-                Select Filter
-            </option>
-            {options.map((option) => (
-                <option value={option[0]}>{`${option[0]} (${option[1]})`}</option>
-            ))}
-        </select>
+        <MultiSelectInputDisplay
+            value={valueFinal}
+            onChange={onChange}
+            options={optionsFinal}
+            defaultOption={defaultOption}
+        />
     );
 };
 

diff --git a/react/src/filter/Filters.tsx b/react/src/filter/Filters.tsx
@@ -1,35 +1,36 @@
 import React from 'react';
+import isEmpty from 'lodash/isEmpty';
 import MultiSelectInput from '../components/MultiSelectInput';
 import useCanvasState from '../state/useCanvasState';
-import isEmpty from 'lodash/isEmpty';
-
 import { GetCanvasEmbedResponse } from '@/src/rust_types/GetCanvasEmbedResponse';
 
 export function Filters({ canvasData }: { canvasData: GetCanvasEmbedResponse }) {
     const filters = canvasData?.filters?.filters;
     const filtersVisible = filters?.filter((filter) => filter?.filterType?.type === 'select');
     const updateFilter = useCanvasState((state) => state.updateFilter);
     const selectedFilters = useCanvasState((state) => state.filters);
-    const valueSelected = !isEmpty(selectedFilters);
+    const valueIsSelected = !isEmpty(selectedFilters);
+
     return (
         <section>
             {filtersVisible?.map((filter) => (
                 <div className="flex gap-3">
                     <MultiSelectInput
                         key={filter.filterId}
                         value={selectedFilters[filter.variable]}
-                        onChange={(value: string) => {
-                            if (value === '') {
+                        onChange={(item: string) => {
+                            if (item === '' || item == null) {
                                 updateFilter({});
                                 return;
                             }
                             const variable = filter.variable;
-                            updateFilter({ [variable]: value });
+                            updateFilter({ [variable]: item });
                         }}
+                        defaultOption="Select Filter"
                         // @ts-ignore
                         options={canvasData.filters.uniqueValues[filter.filterType.storeId]}
                     />
-                    {valueSelected && (
+                    {valueIsSelected && (
                         <button onClick={() => updateFilter({})} className="text-xs text-blue-700">
                             Clear Filter
                         </button>