dify
This commit is contained in:
124
dify/web/app/components/base/drawer-plus/index.stories.tsx
Normal file
124
dify/web/app/components/base/drawer-plus/index.stories.tsx
Normal file
@@ -0,0 +1,124 @@
|
||||
import type { Meta, StoryObj } from '@storybook/nextjs'
|
||||
import { fn } from 'storybook/test'
|
||||
import { useState } from 'react'
|
||||
import DrawerPlus from '.'
|
||||
|
||||
const meta = {
|
||||
title: 'Base/Feedback/DrawerPlus',
|
||||
component: DrawerPlus,
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
docs: {
|
||||
description: {
|
||||
component: 'Enhanced drawer built atop the base drawer component. Provides header/foot slots, mask control, and mobile breakpoints.',
|
||||
},
|
||||
},
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
} satisfies Meta<typeof DrawerPlus>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
type DrawerPlusProps = React.ComponentProps<typeof DrawerPlus>
|
||||
|
||||
const storyBodyElement: React.JSX.Element = (
|
||||
<div className="space-y-3 p-6 text-sm text-text-secondary">
|
||||
<p>
|
||||
DrawerPlus allows rich content with sticky header/footer and responsive masking on mobile. Great for editing flows or showing execution logs.
|
||||
</p>
|
||||
<div className="rounded-lg border border-divider-subtle bg-components-panel-bg p-3 text-xs">
|
||||
Body content scrolls if it exceeds the allotted height.
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
const DrawerPlusDemo = (props: Partial<DrawerPlusProps>) => {
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
const {
|
||||
body,
|
||||
title,
|
||||
foot,
|
||||
isShow: _isShow,
|
||||
onHide: _onHide,
|
||||
...rest
|
||||
} = props
|
||||
|
||||
const resolvedBody: React.JSX.Element = body ?? storyBodyElement
|
||||
|
||||
return (
|
||||
<div className="flex h-[400px] items-center justify-center bg-background-default-subtle">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700"
|
||||
onClick={() => setOpen(true)}
|
||||
>
|
||||
Open drawer plus
|
||||
</button>
|
||||
|
||||
<DrawerPlus
|
||||
{...rest as Omit<DrawerPlusProps, 'isShow' | 'onHide' | 'title' | 'body' | 'foot'>}
|
||||
isShow={open}
|
||||
onHide={() => setOpen(false)}
|
||||
title={title ?? 'Workflow execution details'}
|
||||
body={resolvedBody}
|
||||
foot={foot}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const Playground: Story = {
|
||||
render: args => <DrawerPlusDemo {...args} />,
|
||||
args: {
|
||||
isShow: false,
|
||||
onHide: fn(),
|
||||
title: 'Edit configuration',
|
||||
body: storyBodyElement,
|
||||
},
|
||||
}
|
||||
|
||||
export const WithFooter: Story = {
|
||||
render: (args) => {
|
||||
const FooterDemo = () => {
|
||||
const [open, setOpen] = useState(false)
|
||||
return (
|
||||
<div className="flex h-[400px] items-center justify-center bg-background-default-subtle">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700"
|
||||
onClick={() => setOpen(true)}
|
||||
>
|
||||
Open drawer plus
|
||||
</button>
|
||||
|
||||
<DrawerPlus
|
||||
{...args}
|
||||
isShow={open}
|
||||
onHide={() => setOpen(false)}
|
||||
title={args.title ?? 'Workflow execution details'}
|
||||
body={args.body ?? (
|
||||
<div className="space-y-3 p-6 text-sm text-text-secondary">
|
||||
<p>Populate the body with scrollable content. Footer stays pinned.</p>
|
||||
</div>
|
||||
)}
|
||||
foot={
|
||||
<div className="flex justify-end gap-2 border-t border-divider-subtle bg-components-panel-bg p-4">
|
||||
<button className="rounded-md border border-divider-subtle px-3 py-1.5 text-sm text-text-secondary" onClick={() => setOpen(false)}>Cancel</button>
|
||||
<button className="rounded-md bg-primary-600 px-3 py-1.5 text-sm text-white">Save</button>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return <FooterDemo />
|
||||
},
|
||||
args: {
|
||||
isShow: false,
|
||||
onHide: fn(),
|
||||
title: 'Edit configuration!',
|
||||
body: storyBodyElement,
|
||||
},
|
||||
}
|
||||
105
dify/web/app/components/base/drawer-plus/index.tsx
Normal file
105
dify/web/app/components/base/drawer-plus/index.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useRef } from 'react'
|
||||
import { RiCloseLine } from '@remixicon/react'
|
||||
import cn from '@/utils/classnames'
|
||||
import Drawer from '@/app/components/base/drawer'
|
||||
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
|
||||
|
||||
type Props = {
|
||||
isShow: boolean
|
||||
onHide: () => void
|
||||
dialogClassName?: string
|
||||
dialogBackdropClassName?: string
|
||||
panelClassName?: string
|
||||
maxWidthClassName?: string
|
||||
contentClassName?: string
|
||||
headerClassName?: string
|
||||
height?: number | string
|
||||
title: string | React.JSX.Element
|
||||
titleDescription?: string | React.JSX.Element
|
||||
body: React.JSX.Element
|
||||
foot?: React.JSX.Element
|
||||
isShowMask?: boolean
|
||||
clickOutsideNotOpen?: boolean
|
||||
positionCenter?: boolean
|
||||
}
|
||||
|
||||
const DrawerPlus: FC<Props> = ({
|
||||
isShow,
|
||||
onHide,
|
||||
dialogClassName = '',
|
||||
dialogBackdropClassName = '',
|
||||
panelClassName = '',
|
||||
maxWidthClassName = '!max-w-[640px]',
|
||||
height = 'calc(100vh - 72px)',
|
||||
contentClassName,
|
||||
headerClassName,
|
||||
title,
|
||||
titleDescription,
|
||||
body,
|
||||
foot,
|
||||
isShowMask,
|
||||
clickOutsideNotOpen = true,
|
||||
positionCenter,
|
||||
}) => {
|
||||
const ref = useRef(null)
|
||||
const media = useBreakpoints()
|
||||
const isMobile = media === MediaType.mobile
|
||||
|
||||
if (!isShow)
|
||||
return null
|
||||
|
||||
return (
|
||||
// clickOutsideNotOpen to fix confirm modal click cause drawer close
|
||||
<Drawer
|
||||
isOpen={isShow}
|
||||
clickOutsideNotOpen={clickOutsideNotOpen}
|
||||
onClose={onHide}
|
||||
footer={null}
|
||||
mask={isMobile || isShowMask}
|
||||
positionCenter={positionCenter}
|
||||
dialogClassName={dialogClassName}
|
||||
dialogBackdropClassName={dialogBackdropClassName}
|
||||
panelClassName={cn('mx-2 mb-3 mt-16 rounded-xl !p-0 sm:mr-2', panelClassName, maxWidthClassName)}
|
||||
>
|
||||
<div
|
||||
className={cn(contentClassName, 'flex w-full flex-col rounded-xl border-[0.5px] border-divider-subtle bg-components-panel-bg shadow-xl')}
|
||||
style={{
|
||||
height,
|
||||
}}
|
||||
ref={ref}
|
||||
>
|
||||
<div className={cn(headerClassName, 'shrink-0 border-b border-divider-subtle py-4')}>
|
||||
<div className='flex h-6 items-center justify-between pl-6 pr-5'>
|
||||
<div className='system-xl-semibold text-text-primary'>
|
||||
{title}
|
||||
</div>
|
||||
<div className='flex items-center'>
|
||||
<div
|
||||
onClick={onHide}
|
||||
className='flex h-6 w-6 cursor-pointer items-center justify-center'
|
||||
>
|
||||
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{titleDescription && (
|
||||
<div className='system-xs-regular pl-6 pr-10 text-text-tertiary'>
|
||||
{titleDescription}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className='grow overflow-y-auto'>
|
||||
{body}
|
||||
</div>
|
||||
{foot && (
|
||||
<div className='shrink-0'>
|
||||
{foot}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Drawer>
|
||||
)
|
||||
}
|
||||
export default React.memo(DrawerPlus)
|
||||
Reference in New Issue
Block a user