Skip to content

Commit

Permalink
changed example to clear all for combobox
Browse files Browse the repository at this point in the history
  • Loading branch information
ThusharaJ07 committed Jun 5, 2024
1 parent 0300b2c commit bf29ca8
Show file tree
Hide file tree
Showing 5 changed files with 83 additions and 145 deletions.
76 changes: 22 additions & 54 deletions packages/core/stories/combo-box/combo-box.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Meta, StoryFn } from "@storybook/react";
import {
FormField,
Button,
FormFieldHelperText,
FormFieldLabel,
StackLayout,
Expand All @@ -11,6 +12,7 @@ import {
Text,
Avatar,
} from "@salt-ds/core";
import { CloseIcon } from "@salt-ds/icons";
import {
CountryCode,
countryMetaMap,
Expand Down Expand Up @@ -844,14 +846,11 @@ export const FreeText: StoryFn<ComboBoxProps> = (args) => {
);
};

export const SelectAll: StoryFn<ComboBoxProps> = (args) => {
export const ClearAll: StoryFn<ComboBoxProps> = (args) => {
const [value, setValue] = useState(getTemplateDefaultValue(args));
const [selected, setSelected] = useState<string[]>([]);
const allSelectedOptionValue = "all";
const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
// React 16 backwards compatibility
event.persist();

const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
const value = event.target.value;
setValue(value);
};
Expand All @@ -860,72 +859,41 @@ export const SelectAll: StoryFn<ComboBoxProps> = (args) => {
event: SyntheticEvent,
newSelected: string[]
) => {
let newOptionsSelected = [...newSelected];
const wasAllSelected = selected.includes(allSelectedOptionValue);
const isAllSelected = newOptionsSelected.includes(allSelectedOptionValue);

if (wasAllSelected) {
if (isAllSelected) {
newOptionsSelected = newOptionsSelected.filter(
(el) => el !== allSelectedOptionValue
);
} else {
newOptionsSelected = [];
}
} else if (
isAllSelected ||
(!isAllSelected && newOptionsSelected.length === usStates.length)
) {
newOptionsSelected = [...usStates, allSelectedOptionValue];
}
setSelected(newOptionsSelected);
args.onSelectionChange?.(event, newOptionsSelected);

setSelected(newSelected);
args.onSelectionChange?.(event, newSelected);
setValue("");
};

const filteredOptions = usStates.filter((state) =>
state.toLowerCase().includes(value.trim().toLowerCase())
);

const handleClear = () => {
setValue("");
setSelected([]);
};

return (
<ComboBox
{...args}
multiselect
endAdornment={
(value || selected.length > 0) && (
<Button
onClick={handleClear}
aria-label="Clear value"
variant="secondary"
>
<CloseIcon aria-hidden />
</Button>
)
}
selected={selected}
onChange={handleChange}
onSelectionChange={handleSelectionChange}
value={value}
style={{ width: "266px" }}
>
{filteredOptions.length > 1 && (
<div
style={{
position: "sticky",
top: 0,
zIndex: 9,
background: !selected.includes(allSelectedOptionValue)
? "var(--salt-color-white)"
: "",
}}
>
<Option
style={{
borderBottom: "solid",
borderWidth: "1px",
borderColor:
selected.includes(filteredOptions[0]) ||
selected.includes(allSelectedOptionValue)
? "transparent"
: "var(--salt-separable-tertiary-borderColor)",
}}
value={"all"}
key={"all"}
>
Select All
</Option>
</div>
)}
{filteredOptions.map((state) => (
<Option value={state} key={state} />
))}
Expand Down
6 changes: 3 additions & 3 deletions site/docs/components/combo-box/examples.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -178,11 +178,11 @@ Use the `truncate` prop when you are limited on space and want to prevent the mu

</LivePreview>

<LivePreview componentName="combo-box" exampleName="SelectAll" >
<LivePreview componentName="combo-box" exampleName="ClearAll" >

## Select All
## Clear All

In order to achieve the select all functionality, you can pass the first Option as Select All and pass in the logic to handleSelectionChange prop.
In order to achieve the clear all functionality, you can pass a close icon in endAdornment prop.

</LivePreview>
</LivePreviewControls>
57 changes: 57 additions & 0 deletions site/src/examples/combo-box/ClearAll.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import { ChangeEvent, ReactElement, useState, SyntheticEvent } from "react";
import { ComboBox, Button, Option } from "@salt-ds/core";
import { shortColorData } from "./exampleData";
import { CloseIcon } from "@salt-ds/icons";

export const ClearAll = (): ReactElement => {
const [value, setValue] = useState("");
const [selected, setSelected] = useState<string[]>([]);

const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
const value = event.target.value;
setValue(value);
};

const handleSelectionChange = (
event: SyntheticEvent,
newSelected: string[]
) => {
setSelected(newSelected);
setValue("");
};

const filteredOptions = shortColorData.filter((data) =>
data.toLowerCase().includes(value.trim().toLowerCase())
);

const handleClear = () => {
setValue("");
setSelected([]);
};

return (
<ComboBox
multiselect
selected={selected}
onChange={handleChange}
onSelectionChange={handleSelectionChange}
value={value}
style={{ width: "266px" }}
endAdornment={
(value || selected.length > 0) && (
<Button
onClick={handleClear}
aria-label="Clear value"
variant="secondary"
>
<CloseIcon aria-hidden />
</Button>
)
}
>
{filteredOptions.map((state) => (
<Option value={state} key={state} />
))}
</ComboBox>
);
};
87 changes: 0 additions & 87 deletions site/src/examples/combo-box/SelectAll.tsx

This file was deleted.

2 changes: 1 addition & 1 deletion site/src/examples/combo-box/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,4 @@ export * from "./CustomFiltering";
export * from "./ServerSideData";
export * from "./ObjectValues";
export * from "./Truncation";
export * from "./SelectAll";
export * from "./ClearAll";

0 comments on commit bf29ca8

Please sign in to comment.