fix: minor compatibility changes to QueryItem Qualifier and Cascader

mParticle · Apr 20, 2024 · 5065bdd · 5065bdd
1 parent 89fb3b8
commit 5065bdd
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 16 deletions.
diff --git a/src/components/data-entry/QueryItem/Cascader.stories.tsx b/src/components/data-entry/QueryItem/Cascader.stories.tsx
@@ -107,6 +107,15 @@ export const OnSelect: Story = {
   args: {
     placeholder: "QueryItem.ValueSelector.Cascader Error",
     options: exampleOptions,
-    onChange: (value) => console.log(value),
+    onChange: async (value) => console.log(value),
+  },
+}
+
+export const PreSelectedValue: Story = {
+  args: {
+    placeholder: "QueryItem.ValueSelector.Cascader PreSelected",
+    options: exampleOptions,
+    value: ["Canada1", "Ontario1", "Toronto1"],
+    onChange: async (values, _) => {console.log(values)},
   },
 }
diff --git a/src/components/data-entry/QueryItem/Cascader.tsx b/src/components/data-entry/QueryItem/Cascader.tsx
@@ -2,31 +2,31 @@ import './query-item.css'
 import { GetProp } from 'antd'
 import { ReactNode, useState } from 'react'
 import {
-  AddIcon,
   Cascader as BaseCascader,
-  CircleDashedIcon,
   Flex,
   ICascaderProps as IBaseCascaderProps,
   Input,
-  Space,
   Typography,
+  EmptyIcon,
+  EventAttributesIcon,
+  EventsIcon,
+  UserAttributesIcon,
 } from 'src/components'
 
 export interface CascaderOption {
   value: string
-  label: ReactNode
-  selectedLabel?: string
+  label: string
   children?: CascaderOption[]
   disabled?: boolean
 }
 
-export type CascaderIcons = 'blank' | 'attribute' | 'user' | 'event'
+export type CascaderIcons = 'empty' | 'eventAttribute' | 'userAttribute' | 'event'
 
 const CascaderIconList = {
-  blank: <CircleDashedIcon className="query-item__icon" />,
-  attribute: <AddIcon className="query-item__icon" />,
-  user: <AddIcon className="query-item__icon" />,
-  event: <AddIcon className="query-item__icon" />,
+  empty: () => <EmptyIcon className="query-item__icon" />,
+  eventAttribute: () => <EventAttributesIcon className="query-item__icon" />,
+  userAttribute: () => <UserAttributesIcon className="query-item__icon" />,
+  event: () => <EventsIcon className="query-item__icon" />,
 }
 
 export interface ICascaderProps {
@@ -44,7 +44,7 @@ export const Cascader = (props: ICascaderProps) => {
   const options: CascaderOption[] = []
   const [items] = useState(props.options ?? options)
   const [searchValue, setSearchValue] = useState('')
-  const [selectedValue, setSelectedValue] = useState<(number | string)[]>(props.value ?? [""])
+  const [selectedValue, setSelectedValue] = useState<(number | string)[]>(props.value ?? [''])
   const [isOpen, setIsOpen] = useState(false)
 
   const onSearch = (value: string) => {
@@ -89,7 +89,7 @@ export const Cascader = (props: ICascaderProps) => {
           status={props.errorMessage ? 'error' : undefined}
           className={inputClasses}
           value={(selectedValue as string[])?.slice(-1)}
-          prefix={props.icon ?? <CircleDashedIcon className="query-item__icon" />}
+          prefix={props.icon ? CascaderIconList[props.icon]() : <EmptyIcon className="query-item__icon" />}
         />
       </BaseCascader>
       {props.errorMessage && <Typography.Text type={'danger'}>{props.errorMessage}</Typography.Text>}

diff --git a/src/components/data-entry/QueryItem/Qualifier.stories.tsx b/src/components/data-entry/QueryItem/Qualifier.stories.tsx
@@ -42,3 +42,11 @@ export const Disabled: Story = {
     options: defaultOptions,
   },
 }
+
+
+export const PreSelected: Story = {
+  args: {
+    options: defaultOptions,
+    value: { value: '2', label: 'is greater than' },
+  },
+}
diff --git a/src/components/data-entry/QueryItem/Qualifier.tsx b/src/components/data-entry/QueryItem/Qualifier.tsx
@@ -11,8 +11,8 @@ export interface IQueryItemQualifierProps {
   options: IQueryItemQualifierOption[]
   disabled?: boolean
   errorMessage?: string
-  onChange: (value: IQueryItemQualifierOption) => void
-  value: IQueryItemQualifierOption
+  onChange?: (value: IQueryItemQualifierOption) => void
+  value?: IQueryItemQualifierOption
 }
 
 export const Qualifier = (props: IQueryItemQualifierProps) => {
@@ -22,7 +22,7 @@ export const Qualifier = (props: IQueryItemQualifierProps) => {
     menuItemSelectedIcon: node =>
       node.isSelected ? <CheckIcon className="query-item-qualifier__item-selected-icon" /> : null,
     onChange: props.onChange,
-    onDropdownVisibleChange: () => setIsOpen(true),
+    onDropdownVisibleChange: () => setIsOpen(!isOpen),
     placement: 'bottomLeft',
     popupMatchSelectWidth: false,
     status: props.errorMessage ? 'error' : undefined,