-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: intial add of QueryItem.ValueSelector.Cascader
- Loading branch information
Showing
17 changed files
with
344 additions
and
129 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
112 changes: 112 additions & 0 deletions
112
src/components/data-entry/QueryItem/Cascader.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| import { Meta, StoryObj } from '@storybook/react' | ||
| import { QueryItem } from 'src/components' | ||
|
|
||
| const meta: Meta<typeof QueryItem.ValueSelector.Cascader> = { | ||
| title: 'Aquarium/Data Entry/QueryItem/ValueSelector/Cascader', | ||
| component: QueryItem.ValueSelector.Cascader, | ||
| parameters: { | ||
| docs: { | ||
| description: { | ||
| component: | ||
| 'This is the "Action" component of the QueryItem component group. This component is currently meant to trigger a single action, but will eventually support a list of actions via a dropdown list interface.', | ||
| }, | ||
| }, | ||
| }, | ||
|
|
||
| args: {}, | ||
| } | ||
| export default meta | ||
|
|
||
| type Story = StoryObj<typeof QueryItem.ValueSelector.Cascader> | ||
|
|
||
| const exampleOptions = [ | ||
| { | ||
| value: "United States1", | ||
| label: "United States", | ||
| children: [ | ||
| { | ||
| value: "Michigan1", | ||
| label: "Michigan", | ||
| children: [ | ||
| { | ||
| value: "Detroit1", | ||
| label: "Detroit", | ||
| }, | ||
| { | ||
| value: "Lansing1", | ||
| label: "Lansing", | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| value: "California1", | ||
| label: "California", | ||
| children: [ | ||
| { | ||
| value: "San Francisco1", | ||
| label: "San Francisco", | ||
| }, | ||
| { | ||
| value: "San Jose1", | ||
| label: "San Jose", | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| value: "Canada1", | ||
| label: "Canada", | ||
| children: [ | ||
| { | ||
| value: "Ontario1", | ||
| label: "Ontario", | ||
| children: [ | ||
| { | ||
| value: "Toronto1", | ||
| label: "Toronto", | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| ]; | ||
|
|
||
| export const Default: Story = { | ||
| args: { | ||
| placeholder: "QueryItem.ValueSelector.Cascader Default", | ||
| options: exampleOptions | ||
| }, | ||
| } | ||
|
|
||
| export const SimpleList: Story = { | ||
| args: { | ||
| placeholder: "QueryItem.ValueSelector.Cascader Simple", | ||
| options: [ | ||
| { | ||
| value: 'United States', | ||
| label: 'United States', | ||
| }, | ||
| { | ||
| value: 'Canada', | ||
| label: 'Canada', | ||
| }, | ||
| ] | ||
| }, | ||
| } | ||
|
|
||
| export const Error: Story = { | ||
| args: { | ||
| placeholder: "QueryItem.ValueSelector.Cascader Error", | ||
| options: exampleOptions, | ||
| errorMessage: 'test error', | ||
| }, | ||
| } | ||
|
|
||
| export const OnSelect: Story = { | ||
| args: { | ||
| placeholder: "QueryItem.ValueSelector.Cascader Error", | ||
| options: exampleOptions, | ||
| onChange: (value) => console.log(value), | ||
| }, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| 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, | ||
| } from 'src/components' | ||
|
|
||
| export interface CascaderOption { | ||
| value: string | ||
| label: ReactNode | ||
| selectedLabel?: string | ||
| children?: CascaderOption[] | ||
| disabled?: boolean | ||
| } | ||
|
|
||
| export type CascaderIcons = "blank" | "attribute" | "user" | "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"/>, | ||
| } | ||
|
|
||
| export interface ICascaderProps { | ||
| options: CascaderOption[] | ||
| icon?: CascaderIcons | ||
| errorMessage?: string | ||
| placeholder?: string | ||
| onChange?: (selectedValue: string[]) => void | ||
| } | ||
|
|
||
| export const Cascader = (props: ICascaderProps) => { | ||
| type DefaultOptionType = GetProp<IBaseCascaderProps, 'options'>[number] | ||
|
|
||
| const options: CascaderOption[] = [] | ||
| const [items] = useState(props.options ?? options) | ||
| const [searchValue, setSearchValue] = useState('') | ||
| const [selectedValue, setSelectedValue] = useState<string[]>() | ||
| const [isOpen, setIsOpen] = useState(false) | ||
|
|
||
| const onSearch = (value: string) => { | ||
| setSearchValue(value) | ||
| } | ||
|
|
||
| const filter = (inputValue: string, path: DefaultOptionType[]) => | ||
| path.some(option => (option.label as string).toLowerCase().indexOf(inputValue.toLowerCase()) > -1) | ||
|
|
||
| const baseProps: IBaseCascaderProps = { | ||
| getPopupContainer: triggerNode => triggerNode.parentElement, | ||
| searchValue: searchValue, | ||
| value: selectedValue, | ||
| onChange: (value: (string | number)[]): void => { | ||
| setSelectedValue(value as string[]) | ||
| if (props.onChange) { | ||
| props.onChange(value as string[]) | ||
| } | ||
| }, | ||
| dropdownRender: menu => ( | ||
| <div className={'query-item__dropdown'}> | ||
| <Input.Search | ||
| allowClear | ||
| className={'query-item__input-search'} | ||
| placeholder="Search" | ||
| onSearch={onSearch} | ||
| /> | ||
| <Flex justify="center">{menu}</Flex> | ||
| </div> | ||
| ), | ||
| showSearch: { filter }, | ||
| options: items, | ||
| onDropdownVisibleChange: value => setIsOpen(value), | ||
| } | ||
|
|
||
| let inputClasses = `query-item` | ||
| if (isOpen) inputClasses += ' query-item--open' | ||
| if (selectedValue) inputClasses += ' query-item--selected' | ||
| if (props.errorMessage) inputClasses += ' query-item--error' | ||
|
|
||
| return ( | ||
| <> | ||
| <BaseCascader {...baseProps}> | ||
| <Input | ||
| readOnly={true} | ||
| placeholder={props.placeholder} | ||
| status={props.errorMessage ? 'error' : undefined} | ||
| className={inputClasses} | ||
| value={selectedValue?.slice(-1)} | ||
| prefix={props.icon ?? <CircleDashedIcon className="query-item__icon" />} | ||
| /> | ||
| </BaseCascader> | ||
| {props.errorMessage && <Typography.Text type={'danger'}>{props.errorMessage}</Typography.Text>} | ||
| </> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.