Skip to content

Commit 0c2a73d

Browse files
yoshi6jpyoshi6jp
authored
feat(Drawer): support daisyUI 3. (#371)
1 parent b102f07 commit 0c2a73d

2 files changed

Lines changed: 111 additions & 48 deletions

File tree

‎src/Drawer/Drawer.stories.tsx‎

Lines changed: 111 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,114 @@
1-
import React, { useState } from 'react'
1+
import React, { useState, useCallback } from 'react'
22
import { StoryFn as Story, Meta } from '@storybook/react'
33

44
import Drawer, { DrawerProps } from '.'
55
import Button from '../Button'
66
import Navbar from '../Navbar'
77
import Menu from '../Menu'
88

9-
const side = (
10-
<ul className="menu p-4 overflow-y-auto w-80 bg-base-100 text-base-content">
11-
<li>
12-
<a>Sidebar Item 1</a>
13-
</li>
14-
<li>
15-
<a>Sidebar Item 2</a>
16-
</li>
17-
</ul>
18-
)
19-
209
export default {
2110
title: 'Layout/Drawer',
2211
component: Drawer,
23-
args: {
24-
side,
12+
argTypes: {
13+
side: {
14+
control: false,
15+
},
2516
},
2617
} as Meta
2718

2819
export const Default: Story<DrawerProps> = (args) => {
2920
const [visible, setVisible] = useState(false)
3021

31-
const toggleVisible = () => {
32-
setVisible(!visible)
33-
}
22+
const toggleVisible = useCallback(() => {
23+
setVisible((visible) => !visible)
24+
}, [])
3425
return (
35-
<Drawer {...args} open={visible} onClickOverlay={toggleVisible}>
36-
<div className="flex h-56 items-center justify-center">
37-
<Button color="primary" onClick={toggleVisible}>
38-
Open drawer
39-
</Button>
40-
</div>
26+
<Drawer
27+
{...args}
28+
open={visible}
29+
onClickOverlay={toggleVisible}
30+
side={
31+
<Menu className="p-4 w-80 h-full bg-base-200 text-base-content">
32+
<Menu.Item>
33+
<a>Sidebar Item 1</a>
34+
</Menu.Item>
35+
<Menu.Item>
36+
<a>Sidebar Item 2</a>
37+
</Menu.Item>
38+
</Menu>
39+
}
40+
>
41+
<Button color="primary" onClick={toggleVisible}>
42+
Open drawer
43+
</Button>
4144
</Drawer>
4245
)
4346
}
47+
Default.args = {
48+
sideClassName: 'h-full absolute',
49+
contentClassName: 'flex h-56 items-center justify-center',
50+
}
4451

45-
export const ForMobileFixedSidebarForDesktop: Story<DrawerProps> = (args) => {
52+
export const Responsive: Story<DrawerProps> = (args) => {
4653
const [visible, setVisible] = useState(false)
4754

48-
const toggleVisible = () => {
49-
setVisible(!visible)
50-
}
51-
55+
const toggleVisible = useCallback(() => {
56+
setVisible((visible) => !visible)
57+
}, [])
5258
return (
53-
<Drawer {...args} open={visible} onClickOverlay={toggleVisible}>
54-
<div className="flex h-56 items-center justify-center">
55-
<Button color="primary" className="lg:hidden" onClick={toggleVisible}>
56-
Open drawer
57-
</Button>
58-
</div>
59+
<Drawer
60+
{...args}
61+
open={visible}
62+
onClickOverlay={toggleVisible}
63+
side={
64+
<Menu className="p-4 w-80 h-full bg-base-200 text-base-content">
65+
<Menu.Item>
66+
<a>Sidebar Item 1</a>
67+
</Menu.Item>
68+
<Menu.Item>
69+
<a>Sidebar Item 2</a>
70+
</Menu.Item>
71+
</Menu>
72+
}
73+
>
74+
<Button color="primary" onClick={toggleVisible} className="lg:hidden">
75+
Open drawer
76+
</Button>
5977
</Drawer>
6078
)
6179
}
62-
63-
ForMobileFixedSidebarForDesktop.args = {
64-
mobile: true,
80+
Responsive.args = {
81+
className: 'lg:drawer-open',
82+
sideClassName: 'h-full absolute',
83+
contentClassName: 'flex h-56 items-center justify-center',
6584
}
6685

6786
export const NavbarMenuForDesktopSidebarDrawerForMobile: Story<DrawerProps> = (
6887
args
6988
) => {
7089
const [visible, setVisible] = useState(false)
7190

72-
const toggleVisible = () => {
73-
setVisible(!visible)
74-
}
91+
const toggleVisible = useCallback(() => {
92+
setVisible((visible) => !visible)
93+
}, [])
7594

7695
return (
7796
<Drawer
7897
{...args}
7998
open={visible}
8099
onClickOverlay={toggleVisible}
81-
className="font-sans"
100+
side={
101+
<Menu className="p-4 w-60 md:w-80 h-full bg-base-200">
102+
<Menu.Item>
103+
<a>Sidebar Item 1</a>
104+
</Menu.Item>
105+
<Menu.Item>
106+
<a>Sidebar Item 2</a>
107+
</Menu.Item>
108+
</Menu>
109+
}
82110
>
83-
<Navbar>
111+
<Navbar className="w-full bg-base-300">
84112
<div className="flex-none lg:hidden">
85113
<Button shape="square" color="ghost" onClick={toggleVisible}>
86114
<svg
@@ -92,9 +120,9 @@ export const NavbarMenuForDesktopSidebarDrawerForMobile: Story<DrawerProps> = (
92120
<path
93121
strokeLinecap="round"
94122
strokeLinejoin="round"
95-
strokeWidth={2}
123+
strokeWidth="2"
96124
d="M4 6h16M4 12h16M4 18h16"
97-
/>
125+
></path>
98126
</svg>
99127
</Button>
100128
</div>
@@ -110,7 +138,45 @@ export const NavbarMenuForDesktopSidebarDrawerForMobile: Story<DrawerProps> = (
110138
</Menu>
111139
</div>
112140
</Navbar>
113-
<div className="flex h-36 items-center justify-center">Content</div>
141+
<div className="flex flex-grow items-center justify-center">Content</div>
114142
</Drawer>
115143
)
116144
}
145+
NavbarMenuForDesktopSidebarDrawerForMobile.args = {
146+
className: 'h-56 rounded overflow-hidden',
147+
contentClassName: 'flex flex-col',
148+
}
149+
150+
export const RightSideOfPage: Story<DrawerProps> = (args) => {
151+
const [visible, setVisible] = useState(false)
152+
153+
const toggleVisible = useCallback(() => {
154+
setVisible((visible) => !visible)
155+
}, [])
156+
return (
157+
<Drawer
158+
{...args}
159+
open={visible}
160+
onClickOverlay={toggleVisible}
161+
side={
162+
<Menu className="p-4 w-80 h-full bg-base-200 text-base-content">
163+
<Menu.Item>
164+
<a>Sidebar Item 1</a>
165+
</Menu.Item>
166+
<Menu.Item>
167+
<a>Sidebar Item 2</a>
168+
</Menu.Item>
169+
</Menu>
170+
}
171+
>
172+
<Button color="primary" onClick={toggleVisible}>
173+
Open drawer
174+
</Button>
175+
</Drawer>
176+
)
177+
}
178+
RightSideOfPage.args = {
179+
sideClassName: 'h-full absolute',
180+
contentClassName: 'flex h-56 items-center justify-center',
181+
end: true,
182+
}

‎src/Drawer/Drawer.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ export type DrawerProps = React.HTMLAttributes<HTMLDivElement> &
88
IComponentBaseProps & {
99
side: ReactNode
1010
open?: boolean
11-
mobile?: boolean
1211
end?: boolean
1312
toggleClassName?: string
1413
contentClassName?: string
@@ -21,7 +20,6 @@ const Drawer = ({
2120
children,
2221
side,
2322
open,
24-
mobile,
2523
end,
2624
dataTheme,
2725
className,
@@ -36,7 +34,6 @@ const Drawer = ({
3634
'drawer',
3735
className,
3836
clsx({
39-
'drawer-mobile': mobile,
4037
'drawer-end': end,
4138
})
4239
)

0 commit comments

Comments
 (0)