-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add select changes * Add Select Changes * Remove drag feature * Fix Select changes * Fix tests * Fix sort issue * Fix package install * Remove yarn lock * Fix initial loading of the item * Fix showSearch in storybook * Update storybook orientation * Call onSelect on value change * Add Select Changes * Fix Hidden Select Component * Fix linting issues * Fix show Search in Select * Fix Select Open State issue * Add Select Changes * Add Select changes * Add Select Changes * Fix Multi select sorting * Remove open from story book * Fix initial selection and also props naming * Add styling changes * Change onChange to onSelect in Select and MultiSelect props * Fix Select Test * Add types * Fix incorrect assignment * Fix Select Styling * Add Ellipsis changes
- Loading branch information
1 parent
a13fd34
commit b3fa8d6
Showing
27 changed files
with
2,208 additions
and
1,249 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import { HTMLAttributes, forwardRef } from "react"; | ||
| import { mergeRefs } from "@/utils/mergeRefs"; | ||
| import styled from "styled-components"; | ||
|
|
||
| const EllipsisContainer = styled.div` | ||
| display: inline-block; | ||
| white-space: nowrap; | ||
| text-overflow: ellipsis; | ||
| overflow: hidden; | ||
| justify-content: flex-start; | ||
| width: fill-available; | ||
| flex: 1; | ||
| & > *:not(button) { | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| } | ||
| `; | ||
|
|
||
| export const EllipsisContent = forwardRef<HTMLElement, HTMLAttributes<HTMLSpanElement>>( | ||
| (props, ref) => { | ||
| return ( | ||
| <EllipsisContainer | ||
| ref={mergeRefs([ | ||
| ref, | ||
| node => { | ||
| console.log({ a: node?.scrollWidth, b: node?.clientWidth }); | ||
| if (node && node.scrollWidth > node.clientWidth) { | ||
| node.title = node.innerText; | ||
| } | ||
| }, | ||
| ])} | ||
| {...props} | ||
| /> | ||
| ); | ||
| } | ||
| ); |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import { ReactNode } from "react"; | ||
| import { HorizontalDirection, Icon, IconName } from "@/components"; | ||
| import { IconSize } from "@/components/Icon/types"; | ||
| import styled from "styled-components"; | ||
| import { EllipsisContent } from "../EllipsisContent/EllipsisContent"; | ||
|
|
||
| const LabelContainer = styled.div` | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: flex-start; | ||
| width: 100%; | ||
| width: -webkit-fill-available; | ||
| width: fill-available; | ||
| width: stretch; | ||
| gap: ${({ theme }) => theme.click.sidebar.navigation.item.default.space.gap}; | ||
| `; | ||
|
|
||
| const IconWrapper = ({ | ||
| icon, | ||
| iconDir = "start", | ||
| size = "sm", | ||
| width, | ||
| height, | ||
| children, | ||
| }: { | ||
| icon?: IconName; | ||
| iconDir?: HorizontalDirection; | ||
| children: ReactNode; | ||
| size?: IconSize; | ||
| width?: number | string; | ||
| height?: number | string; | ||
| }) => { | ||
| return ( | ||
| <LabelContainer> | ||
| {icon && iconDir === "start" && ( | ||
| <Icon | ||
| name={icon} | ||
| size={size} | ||
| width={width} | ||
| height={height} | ||
| /> | ||
| )} | ||
| <EllipsisContent>{children}</EllipsisContent> | ||
| {icon && iconDir === "end" && ( | ||
| <Icon | ||
| name={icon} | ||
| size={size} | ||
| width={width} | ||
| height={height} | ||
| /> | ||
| )} | ||
| </LabelContainer> | ||
| ); | ||
| }; | ||
| export default IconWrapper; |
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,142 @@ | ||
| import { MultiSelect, MultiSelectProps } from "./MultiSelect"; | ||
| import { selectOptions } from "./selectOptions"; | ||
| import { useEffect, useState } from "react"; | ||
| interface Props extends Omit<MultiSelectProps, "value"> { | ||
| clickableNoData?: boolean; | ||
| value: string; | ||
| childrenType: "children" | "options"; | ||
| } | ||
| const MultiSelectExample = ({ | ||
| clickableNoData, | ||
| childrenType, | ||
| value, | ||
| ...props | ||
| }: Props) => { | ||
| const [selectedValues, setSelectedValues] = useState( | ||
| value ? value.split(",") : undefined | ||
| ); | ||
| useEffect(() => { | ||
| setSelectedValues(value ? value.split(",") : undefined); | ||
| }, [value]); | ||
|
|
||
| if (childrenType === "options") { | ||
| return ( | ||
| <MultiSelect | ||
| value={selectedValues} | ||
| onCreateOption={ | ||
| clickableNoData ? search => console.log("Clicked ", search) : undefined | ||
| } | ||
| options={selectOptions} | ||
| onSelect={value => setSelectedValues(value)} | ||
| {...props} | ||
| /> | ||
| ); | ||
| } | ||
| return ( | ||
| <MultiSelect | ||
| value={value ? value.split(",") : undefined} | ||
| onCreateOption={ | ||
| clickableNoData ? search => console.log("Clicked ", search) : undefined | ||
| } | ||
| {...props} | ||
| > | ||
| <MultiSelect.Group heading="Group label"> | ||
| <MultiSelect.Item | ||
| value="content0" | ||
| icon="user" | ||
| > | ||
| Content0 | ||
| </MultiSelect.Item> | ||
| </MultiSelect.Group> | ||
| <div> | ||
| <MultiSelect.Item value="content1">Content1 long text content</MultiSelect.Item> | ||
| </div> | ||
| <MultiSelect.Item | ||
| value="content2" | ||
| label="Content2" | ||
| /> | ||
| <MultiSelect.Item value="content3">Content3</MultiSelect.Item> | ||
| </MultiSelect> | ||
| ); | ||
| }; | ||
| export default { | ||
| component: MultiSelectExample, | ||
| title: "Forms/MultiSelect", | ||
| tags: ["form-field", "select", "autodocs"], | ||
| argTypes: { | ||
| label: { control: "text" }, | ||
| disabled: { control: "boolean" }, | ||
| sortable: { control: "boolean" }, | ||
| error: { control: "text" }, | ||
| value: { control: "text" }, | ||
| defaultValue: { control: "text" }, | ||
| name: { control: "text" }, | ||
| required: { control: "boolean" }, | ||
| showSearch: { control: "boolean" }, | ||
| form: { control: "text" }, | ||
| clickableNoData: { control: "boolean" }, | ||
| showCheck: { control: "boolean" }, | ||
| orientation: { control: "inline-radio", options: ["horizontal", "vertical"] }, | ||
| dir: { control: "inline-radio", options: ["start", "end"] }, | ||
| }, | ||
| }; | ||
|
|
||
| export const Playground = { | ||
| args: { | ||
| label: "Label", | ||
| value: "content1", | ||
| showSearch: true, | ||
| childrenType: "children", | ||
| }, | ||
| parameters: { | ||
| docs: { | ||
| source: { | ||
| transform: (_: string, story: { args: Props; [x: string]: unknown }) => { | ||
| const { clickableNoData, childrenType, value, ...props } = story.args; | ||
| return `<MultiSelect\n value={${JSON.stringify((value ?? "").split(","))}}\n${ | ||
| clickableNoData | ||
| ? " onCreateOption={search => console.log('Clicked ', search)}\n" | ||
| : "" | ||
| } | ||
| ${Object.entries(props) | ||
| .flatMap(([key, value]) => | ||
| typeof value === "boolean" | ||
| ? value | ||
| ? ` ${key}` | ||
| : [] | ||
| : ` ${key}=${typeof value == "string" ? `"${value}"` : `{${value}}`}` | ||
| ) | ||
| .join("\n")} | ||
| ${ | ||
| childrenType === "options" | ||
| ? `options={${JSON.stringify(selectOptions, null, 2)}}\n/` | ||
| : "" | ||
| }> | ||
| ${ | ||
| childrenType !== "options" | ||
| ? ` | ||
| <MultiSelect.Group heading="Group label"> | ||
| <MultiSelect.Item value="content0"> | ||
| <Icon name="user" /> | ||
| Content0 | ||
| </MultiSelect.Item> | ||
| </MultiSelect.Group> | ||
| <div> | ||
| <MultiSelect.Item value="content1">Content1 long text content</MultiSelect.Item> | ||
| </div> | ||
| <MultiSelect.Item | ||
| value="content2" | ||
| disabled | ||
| > | ||
| Content2 | ||
| </MultiSelect.Item> | ||
| <MultiSelect.Item value="content3">Content3</MultiSelect.Item> | ||
| </Select> | ||
| ` | ||
| : "" | ||
| }`; | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| }; |
Oops, something went wrong.
b3fa8d6There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
click-ui – ./
click-ui-git-main-clickhouse.vercel.app
click-ui.vercel.app
click-ui-clickhouse.vercel.app