初始化

wwf

3 天以前 a430284aa21e3ae1f0d5654e55b2ad2852519cc2

 app/components/base/drawer/index.tsx

@@ -1,5 +1,5 @@
'use client'
import { Dialog, DialogBackdrop, DialogTitle } from '@headlessui/react'
import { Dialog } from '@headlessui/react'
import { useTranslation } from 'react-i18next'
import { XMarkIcon } from '@heroicons/react/24/outline'
import Button from '../button'
@@ -8,9 +8,7 @@
export type IDrawerProps = {
  title?: string
  description?: string
  dialogClassName?: string
  dialogBackdropClassName?: string
  panelClassName?: string
  panelClassname?: string
  children: React.ReactNode
  footer?: React.ReactNode
  mask?: boolean
@@ -27,9 +25,7 @@
export default function Drawer({
  title = '',
  description = '',
  dialogClassName = '',
  dialogBackdropClassName = '',
  panelClassName = '',
  panelClassname = '',
  children,
  footer,
  mask = true,
@@ -48,30 +44,25 @@
      unmount={unmount}
      open={isOpen}
      onClose={() => !clickOutsideNotOpen && onClose()}
      className={cn('fixed inset-0 z-[30] overflow-y-auto', dialogClassName)}
      className="fixed z-30 inset-0 overflow-y-auto"
    >
      <div className={cn('flex h-screen w-screen justify-end', positionCenter && '!justify-center')}>
      <div className={cn('flex w-screen h-screen justify-end', positionCenter && '!justify-center')}>
        {/* mask */}
        <DialogBackdrop
          className={cn('fixed inset-0 z-[40]', mask && 'bg-black/30', dialogBackdropClassName)}
          onClick={() => {
            !clickOutsideNotOpen && onClose()
          }}
        <Dialog.Overlay
          className={cn('z-40 fixed inset-0', mask && 'bg-black bg-opacity-30')}
        />
        <div className={cn('relative z-[50] flex w-full max-w-sm flex-col justify-between overflow-hidden bg-components-panel-bg p-6 text-left align-middle shadow-xl', panelClassName)}>
        <div className={cn('relative z-50 flex flex-col justify-between bg-background-body w-full max-w-sm p-6 overflow-hidden text-left align-middle shadow-xl', panelClassname)}>
          <>
            <div className='flex justify-between'>
              {title && <DialogTitle
                as="h3"
                className="text-lg font-medium leading-6 text-text-primary"
              >
                {title}
              </DialogTitle>}
              {showClose && <DialogTitle className="mb-4 flex cursor-pointer items-center" as="div">
                <XMarkIcon className='h-4 w-4 text-text-tertiary' onClick={onClose} />
              </DialogTitle>}
            </div>
            {description && <div className='mt-2 text-xs font-normal text-text-tertiary'>{description}</div>}
            {title && <Dialog.Title
              as="h3"
              className="text-lg font-medium leading-6 text-gray-900"
            >
              {title}
            </Dialog.Title>}
            {showClose && <Dialog.Title className="flex items-center mb-4" as="div">
              <XMarkIcon className='w-4 h-4 text-gray-500' onClick={onClose} />
            </Dialog.Title>}
            {description && <Dialog.Description className='text-gray-500 text-xs font-normal mt-2'>{description}</Dialog.Description>}
            {children}
          </>
          {footer || (footer === null