archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

feat(docs): add TS examples for single & multiple selection (#3682)

Browse Source
This commit is contained in:
աӄա 2024-08-24 03:30:18 +08:00 committed by GitHub
parent bff6b367b6
commit 5809af2ae2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 81 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
apps/docs/content/components/dropdown/multiple-selection.ts
View File

@ -37,8 +37,49 @@ export default function App() {
);
}`;
const AppTs = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
import type { Selection } from "@nextui-org/react";
export default function App() {
const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set(["text"]));
const selectedValue = React.useMemo(
() => Array.from(selectedKeys).join(", ").replaceAll("_", " "),
[selectedKeys]
);
return (
<Dropdown>
<DropdownTrigger>
<Button
variant="bordered"
className="capitalize"
>
{selectedValue}
</Button>
</DropdownTrigger>
<DropdownMenu
aria-label="Multiple selection example"
variant="flat"
closeOnSelect={false}
disallowEmptySelection
selectionMode="multiple"
selectedKeys={selectedKeys}
onSelectionChange={setSelectedKeys}
>
<DropdownItem key="text">Text</DropdownItem>
<DropdownItem key="number">Number</DropdownItem>
<DropdownItem key="date">Date</DropdownItem>
<DropdownItem key="single_date">Single Date</DropdownItem>
<DropdownItem key="iteration">Iteration</DropdownItem>
</DropdownMenu>
</Dropdown>
);
}`;
const react = {
"/App.jsx": App,
"/App.tsx": AppTs,
};
export default {

40
apps/docs/content/components/dropdown/single-selection.ts
View File

@ -36,8 +36,48 @@ export default function App() {
);
}`;
const AppTs = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
import type { Selection } from "@nextui-org/react";
export default function App() {
const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set(["text"]));
const selectedValue = React.useMemo(
() => Array.from(selectedKeys).join(", ").replaceAll("_", " "),
[selectedKeys]
);
return (
<Dropdown>
<DropdownTrigger>
<Button
variant="bordered"
className="capitalize"
>
{selectedValue}
</Button>
</DropdownTrigger>
<DropdownMenu
aria-label="Single selection example"
variant="flat"
disallowEmptySelection
selectionMode="single"
selectedKeys={selectedKeys}
onSelectionChange={setSelectedKeys}
>
<DropdownItem key="text">Text</DropdownItem>
<DropdownItem key="number">Number</DropdownItem>
<DropdownItem key="date">Date</DropdownItem>
<DropdownItem key="single_date">Single Date</DropdownItem>
<DropdownItem key="iteration">Iteration</DropdownItem>
</DropdownMenu>
</Dropdown>
);
}`;
const react = {
"/App.jsx": App,
"/App.tsx": AppTs,
};
export default {

2
apps/docs/content/docs/components/dropdown.mdx
View File

@ -97,7 +97,6 @@ You can set the `selectionMode` property as `single` to allow the user to select
<CodeDemo
title="Single Selection"
highlightedLines="26-28"
files={dropdownContent.singleSelection}
/>
@ -107,7 +106,6 @@ You can set the `selectionMode` property as `multiple` to allow the user to sele
<CodeDemo
title="Multiple Selection"
highlightedLines="26-28"
files={dropdownContent.multipleSelection}
/>