Skip to content

Commit 752a6b9

Browse files
jer3m01jer3m01
authored
refactor(dropdown): rename to DropdownMenu (#71)
1 parent 64c52a1 commit 752a6b9

File tree

19 files changed

+254
-239
lines changed

19 files changed

+254
-239
lines changed

‎.storybook/preview.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const parameters = {
2525

2626
// UI
2727
appBg: "#0d0e0f",
28-
appContentBg: "#0a0b0b",
28+
appContentBg: "black",
2929
appBorderColor: "#262626",
3030
appBorderRadius: "1rem",
3131

‎README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,8 @@ Currently implemented & planned components:
7575
- [ ] DatePicker
7676
- [x] Divider
7777
- [x] Drawer
78-
- [x] Dropdown
78+
- [ ] Dropdown
79+
- [x] DropdownMenu
7980
- [ ] Editor
8081
- [ ] Form
8182
- [ ] Grid
@@ -95,6 +96,7 @@ Currently implemented & planned components:
9596
- [ ] Pagination
9697
- [x] Popconfirm
9798
- [x] Progress
99+
- [ ] QRCode
98100
- [x] Radio
99101
- [x] Select
100102
- [ ] Skeleton

‎src/components/dropdown-menu/checkbox.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Menu } from "../menu";
2+
import { MenuCheckboxProps } from "../menu/checkbox";
3+
4+
export type DropdownMenuCheckboxProps = Omit<MenuCheckboxProps, "type">;
5+
6+
export function DropdownMenuCheckbox(props: DropdownMenuCheckboxProps) {
7+
return <Menu.Checkbox type="dropdown" {...props} />;
8+
}

src/components/dropdown/group.tsx renamed to src/components/dropdown-menu/group.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Menu } from "../menu";
22
import { MenuGroupProps } from "../menu/group";
33

4-
export type DropdownGroupProps = Omit<MenuGroupProps, "type">;
4+
export type DropdownMenuGroupProps = Omit<MenuGroupProps, "type">;
55

6-
export function DropdownGroup(props: DropdownGroupProps) {
6+
export function DropdownMenuGroup(props: DropdownMenuGroupProps) {
77
return <Menu.Group type="dropdown" {...props} />;
88
}

src/components/dropdown/index.scss renamed to src/components/dropdown-menu/index.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.jdd.dropdown-trigger {
1+
.jdd.dropdown-menu-trigger {
22
&:is(div) {
33
height: max-content;
44
width: max-content;
@@ -8,7 +8,7 @@
88
gap: .5rem;
99
}
1010

11-
.dropdown-trigger-icon {
11+
.dropdown-menu-trigger-icon {
1212
transition: transform var(--jdd-transition-duration) var(--jdd-transition-function);
1313
display: flex;
1414
align-items: center;

‎src/components/dropdown-menu/index.tsx‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import "./index.scss";
2+
import { processProps } from "../utilities";
3+
import { DropdownMenu as KobalteDropdownMenu, As } from "@kobalte/core";
4+
import { Button, Icon } from "..";
5+
import { DropdownMenuItem } from "./item";
6+
import { DropdownMenuGroup } from "./group";
7+
import { DropdownMenuCheckbox } from "./checkbox";
8+
import { DropdownMenuRadio } from "./radio";
9+
import { DropdownMenuRadioGroup } from "./radio-group";
10+
import { DropdownMenuSubmenu } from "./submenu";
11+
import { JSXElement, Show } from "solid-js";
12+
import { Menu, MenuProps } from "../menu";
13+
14+
export type DropdownMenuProps = {
15+
label?: string;
16+
customTrigger?: JSXElement;
17+
type?: "primary" | "default";
18+
size?: "small" | "default" | "large";
19+
disabled?: boolean;
20+
danger?: boolean;
21+
} & Omit<MenuProps, "type" | "trigger">;
22+
23+
function DropdownMenu(props: DropdownMenuProps) {
24+
const [local, others] = processProps({
25+
props,
26+
keys: ["label", "customTrigger", "type", "size", "disabled", "danger"],
27+
});
28+
29+
return (
30+
<Menu
31+
type="dropdown"
32+
trigger={
33+
<Show
34+
when={local.customTrigger}
35+
keyed
36+
fallback={
37+
<KobalteDropdownMenu.Trigger asChild isDisabled={local.disabled}>
38+
<As
39+
component={Button}
40+
class="dropdown-menu-trigger"
41+
type={local.type}
42+
size={local.size}
43+
disabled={local.disabled}
44+
danger={local.danger}
45+
>
46+
{local.label}
47+
<Icon
48+
icon="arrow-down-s"
49+
line
50+
class="dropdown-menu-trigger-icon"
51+
/>
52+
</As>
53+
</KobalteDropdownMenu.Trigger>
54+
}
55+
>
56+
{(customTrigger) => (
57+
<KobalteDropdownMenu.Trigger asChild isDisabled={local.disabled}>
58+
<As component="div" class="jdd dropdown-menu-trigger">
59+
{customTrigger}
60+
</As>
61+
</KobalteDropdownMenu.Trigger>
62+
)}
63+
</Show>
64+
}
65+
{...others}
66+
/>
67+
);
68+
}
69+
70+
const CompoundedDropdownMenu = DropdownMenu as typeof DropdownMenu & {
71+
Checkbox: typeof DropdownMenuCheckbox;
72+
Group: typeof DropdownMenuGroup;
73+
Item: typeof DropdownMenuItem;
74+
Radio: typeof DropdownMenuRadio;
75+
RadioGroup: typeof DropdownMenuRadioGroup;
76+
Submenu: typeof DropdownMenuSubmenu;
77+
};
78+
CompoundedDropdownMenu.Checkbox = DropdownMenuCheckbox;
79+
CompoundedDropdownMenu.Group = DropdownMenuGroup;
80+
CompoundedDropdownMenu.Item = DropdownMenuItem;
81+
CompoundedDropdownMenu.Radio = DropdownMenuRadio;
82+
CompoundedDropdownMenu.RadioGroup = DropdownMenuRadioGroup;
83+
CompoundedDropdownMenu.Submenu = DropdownMenuSubmenu;
84+
export { CompoundedDropdownMenu as DropdownMenu };

src/components/dropdown/item.tsx renamed to src/components/dropdown-menu/item.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { MenuItemProps } from "../menu/item";
22
import { Menu } from "../menu";
33

4-
export type DropdownItemProps = Omit<MenuItemProps, "type">;
4+
export type DropdownMenuItemProps = Omit<MenuItemProps, "type">;
55

6-
export function DropdownItem(props: DropdownItemProps) {
6+
export function DropdownMenuItem(props: DropdownMenuItemProps) {
77
return <Menu.Item type="dropdown" {...props} />;
88
}

‎src/components/dropdown-menu/radio-group.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { MenuRadioGroupProps } from "../menu/radio-group";
2+
import { Menu } from "../menu";
3+
4+
export type DropdownMenuRadioGroupProps = Omit<MenuRadioGroupProps, "type">;
5+
6+
export function DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps) {
7+
return <Menu.RadioGroup type="dropdown" {...props} />;
8+
}

src/components/dropdown/radio.tsx renamed to src/components/dropdown-menu/radio.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Menu } from "../menu";
22
import { MenuRadioProps } from "../menu/radio";
33

4-
export type DropdownRadioProps = Omit<MenuRadioProps, "type">;
4+
export type DropdownMenuRadioProps = Omit<MenuRadioProps, "type">;
55

6-
export function DropdownRadio(props: DropdownRadioProps) {
6+
export function DropdownMenuRadio(props: DropdownMenuRadioProps) {
77
return <Menu.Radio type="dropdown" {...props} />;
88
}

‎src/components/dropdown-menu/submenu.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Menu } from "../menu";
2+
import { MenuSubmenuProps } from "../menu/submenu";
3+
4+
export type DropdownMenuSubmenuProps = Omit<MenuSubmenuProps, "type">;
5+
6+
export function DropdownMenuSubmenu(props: DropdownMenuSubmenuProps) {
7+
return <Menu.Submenu type="dropdown" {...props} />;
8+
}

0 commit comments

Comments
 (0)