fix: Fix tag multi select (#585)

pluralsh · Apr 22, 2024 · 79238a8 · 79238a8
1 parent 0443b7a
commit 79238a8
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 11 deletions.
diff --git a/src/components/TagMultiSelect.tsx b/src/components/TagMultiSelect.tsx
@@ -21,25 +21,33 @@ export type MultiSelectTag = {
 const matchOptions = [
   { label: 'All', value: 'AND' },
   { label: 'Any', value: 'OR' },
-]
+] as const
 
-export function TagMultiSelect({
-  options,
-  loading,
-  onSelectedTagsChange,
-  onFilterChange,
-}: {
+type TagMultiSelectProps = {
   options: string[]
   loading: boolean
+  selectedMatchType?: 'AND' | 'OR'
   onSelectedTagsChange?: (keys: Set<Key>) => void
   onFilterChange?: (value: string) => void
-}) {
+  onChangeMatchType?: (value: 'AND' | 'OR') => void
+}
+
+function TagMultiSelect({
+  options,
+  loading,
+  selectedMatchType,
+  onSelectedTagsChange,
+  onFilterChange,
+  onChangeMatchType,
+}: TagMultiSelectProps) {
   const theme = useTheme()
   const [selectedTagKeys, setSelectedTagKeys] = useState(new Set<Key>())
   const selectedTagArr = useMemo(() => [...selectedTagKeys], [selectedTagKeys])
   const [inputValue, setInputValue] = useState('')
   const [isOpen, setIsOpen] = useState(false)
-  const [searchLogic, setSearchLogic] = useState<string>(matchOptions[0].value)
+  const [searchLogic, setSearchLogic] = useState<string>(
+    selectedMatchType || matchOptions[0].value
+  )
 
   const onSelectionChange: ComponentProps<
     typeof ComboBox
@@ -72,8 +80,9 @@ export function TagMultiSelect({
       <Select
         label="Pick search logic"
         selectedKey={searchLogic}
-        onSelectionChange={(key: string) => {
-          setSearchLogic(key)
+        onSelectionChange={(value: 'AND' | 'OR') => {
+          setSearchLogic(value)
+          onChangeMatchType?.(value)
         }}
         defaultOpen={false}
         triggerButton={
@@ -128,6 +137,7 @@ export function TagMultiSelect({
         allowsEmptyCollection
         loading={loading}
         containerProps={{ style: { flexGrow: 1 } }}
+        showArrow={false}
       >
         {options
           .map((tagStr) => {
@@ -156,3 +166,6 @@ export function TagMultiSelect({
     </Flex>
   )
 }
+
+export type { TagMultiSelectProps }
+export { TagMultiSelect }
diff --git a/src/index.ts b/src/index.ts
@@ -103,6 +103,7 @@ export type {
 export { default as LoadingSpinner } from './components/LoadingSpinner'
 export { default as LoopingLogo } from './components/LoopingLogo'
 export { ComboBox } from './components/ComboBox'
+export type { TagMultiSelectProps } from './components/TagMultiSelect'
 export { TagMultiSelect } from './components/TagMultiSelect'
 export { Toast, GraphQLToast } from './components/Toast'
 export { default as WrapWithIf } from './components/WrapWithIf'

diff --git a/src/stories/ComboBox.stories.tsx b/src/stories/ComboBox.stories.tsx
@@ -519,4 +519,7 @@ TagMultiSelect.args = {
   onFilterChange: (filter: string) => {
     console.log('Filter:', filter)
   },
+  onChangeMatchType: (matchType: 'AND' | 'OR') => {
+    console.log('Match type: ', matchType)
+  },
 }
diff --git a/src/stories/TagMultiselectTemplate.tsx b/src/stories/TagMultiselectTemplate.tsx
@@ -8,12 +8,14 @@ export default function TagMultiSelectTemplate({
   width,
   onSelectedTagsChange,
   onFilterChange,
+  onChangeMatchType,
 }: {
   loading: boolean
   options: string[]
   width: number
   onSelectedTagsChange?: (keys: Set<Key>) => void
   onFilterChange?: (value: string) => void
+  onChangeMatchType?: (value: 'AND' | 'OR') => void
 }) {
   return (
     <div style={{ width: `${width}%` }}>
@@ -22,6 +24,7 @@ export default function TagMultiSelectTemplate({
         options={options}
         onSelectedTagsChange={onSelectedTagsChange}
         onFilterChange={onFilterChange}
+        onChangeMatchType={onChangeMatchType}
       />
     </div>
   )