first commit

frontend/node_modules/antd/es/drawer/DrawerPanel.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import type { DrawerProps as RCDrawerProps } from 'rc-drawer';
+import type { ClosableType } from '../_util/hooks';
+export interface DrawerClassNames extends NonNullable<RCDrawerProps['classNames']> {
+    header?: string;
+    body?: string;
+    footer?: string;
+}
+export interface DrawerStyles extends NonNullable<RCDrawerProps['styles']> {
+    header?: React.CSSProperties;
+    body?: React.CSSProperties;
+    footer?: React.CSSProperties;
+}
+export interface DrawerPanelProps {
+    prefixCls: string;
+    ariaId?: string;
+    title?: React.ReactNode;
+    footer?: React.ReactNode;
+    extra?: React.ReactNode;
+    /**
+     * Recommend to use closeIcon instead
+     *
+     * e.g.
+     *
+     * `<Drawer closeIcon={false} />`
+     */
+    closable?: boolean | (Extract<ClosableType, object> & {
+        placement?: 'start' | 'end';
+    });
+    closeIcon?: React.ReactNode;
+    onClose?: RCDrawerProps['onClose'];
+    children?: React.ReactNode;
+    classNames?: DrawerClassNames;
+    styles?: DrawerStyles;
+    loading?: boolean;
+    /** @deprecated Please use `styles.header` instead */
+    headerStyle?: React.CSSProperties;
+    /** @deprecated Please use `styles.body` instead */
+    bodyStyle?: React.CSSProperties;
+    /** @deprecated Please use `styles.footer` instead */
+    footerStyle?: React.CSSProperties;
+    /** @deprecated Please use `styles.wrapper` instead */
+    contentWrapperStyle?: React.CSSProperties;
+    /** @deprecated Please use `styles.mask` instead */
+    maskStyle?: React.CSSProperties;
+    /** @deprecated Please use `styles.content` instead */
+    drawerStyle?: React.CSSProperties;
+}
+declare const DrawerPanel: React.FC<DrawerPanelProps>;
+export default DrawerPanel;

frontend/node_modules/antd/es/drawer/DrawerPanel.js

@@ -0,0 +1,88 @@
+"use client";
+
+import * as React from 'react';
+import classNames from 'classnames';
+import { pickClosable, useClosable } from '../_util/hooks';
+import { useComponentConfig } from '../config-provider/context';
+import Skeleton from '../skeleton';
+const DrawerPanel = props => {
+  var _a, _b;
+  const {
+    prefixCls,
+    ariaId,
+    title,
+    footer,
+    extra,
+    closable,
+    loading,
+    onClose,
+    headerStyle,
+    bodyStyle,
+    footerStyle,
+    children,
+    classNames: drawerClassNames,
+    styles: drawerStyles
+  } = props;
+  const drawerContext = useComponentConfig('drawer');
+  let closablePlacement;
+  if (closable === false) {
+    closablePlacement = undefined;
+  } else if (closable === undefined || closable === true) {
+    closablePlacement = 'start';
+  } else {
+    closablePlacement = (closable === null || closable === void 0 ? void 0 : closable.placement) === 'end' ? 'end' : 'start';
+  }
+  const customCloseIconRender = React.useCallback(icon => (/*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: onClose,
+    className: classNames(`${prefixCls}-close`, {
+      [`${prefixCls}-close-${closablePlacement}`]: closablePlacement === 'end'
+    })
+  }, icon)), [onClose, prefixCls, closablePlacement]);
+  const [mergedClosable, mergedCloseIcon] = useClosable(pickClosable(props), pickClosable(drawerContext), {
+    closable: true,
+    closeIconRender: customCloseIconRender
+  });
+  const renderHeader = () => {
+    var _a, _b;
+    if (!title && !mergedClosable) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      style: Object.assign(Object.assign(Object.assign({}, (_a = drawerContext.styles) === null || _a === void 0 ? void 0 : _a.header), headerStyle), drawerStyles === null || drawerStyles === void 0 ? void 0 : drawerStyles.header),
+      className: classNames(`${prefixCls}-header`, {
+        [`${prefixCls}-header-close-only`]: mergedClosable && !title && !extra
+      }, (_b = drawerContext.classNames) === null || _b === void 0 ? void 0 : _b.header, drawerClassNames === null || drawerClassNames === void 0 ? void 0 : drawerClassNames.header)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `${prefixCls}-header-title`
+    }, closablePlacement === 'start' && mergedCloseIcon, title && (/*#__PURE__*/React.createElement("div", {
+      className: `${prefixCls}-title`,
+      id: ariaId
+    }, title))), extra && /*#__PURE__*/React.createElement("div", {
+      className: `${prefixCls}-extra`
+    }, extra), closablePlacement === 'end' && mergedCloseIcon);
+  };
+  const renderFooter = () => {
+    var _a, _b;
+    if (!footer) {
+      return null;
+    }
+    const footerClassName = `${prefixCls}-footer`;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames(footerClassName, (_a = drawerContext.classNames) === null || _a === void 0 ? void 0 : _a.footer, drawerClassNames === null || drawerClassNames === void 0 ? void 0 : drawerClassNames.footer),
+      style: Object.assign(Object.assign(Object.assign({}, (_b = drawerContext.styles) === null || _b === void 0 ? void 0 : _b.footer), footerStyle), drawerStyles === null || drawerStyles === void 0 ? void 0 : drawerStyles.footer)
+    }, footer);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, renderHeader(), /*#__PURE__*/React.createElement("div", {
+    className: classNames(`${prefixCls}-body`, drawerClassNames === null || drawerClassNames === void 0 ? void 0 : drawerClassNames.body, (_a = drawerContext.classNames) === null || _a === void 0 ? void 0 : _a.body),
+    style: Object.assign(Object.assign(Object.assign({}, (_b = drawerContext.styles) === null || _b === void 0 ? void 0 : _b.body), bodyStyle), drawerStyles === null || drawerStyles === void 0 ? void 0 : drawerStyles.body)
+  }, loading ? (/*#__PURE__*/React.createElement(Skeleton, {
+    active: true,
+    title: false,
+    paragraph: {
+      rows: 5
+    },
+    className: `${prefixCls}-body-skeleton`
+  })) : children), renderFooter());
+};
+export default DrawerPanel;

frontend/node_modules/antd/es/drawer/index.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import type { DrawerProps as RcDrawerProps } from 'rc-drawer';
+import type { Placement } from 'rc-drawer/lib/Drawer';
+import type { DrawerClassNames, DrawerPanelProps, DrawerStyles } from './DrawerPanel';
+declare const _SizeTypes: readonly ["default", "large"];
+type sizeType = (typeof _SizeTypes)[number];
+export interface PushState {
+    distance: string | number;
+}
+export interface DrawerProps extends Omit<RcDrawerProps, 'maskStyle' | 'destroyOnClose'>, Omit<DrawerPanelProps, 'prefixCls' | 'ariaId'> {
+    size?: sizeType;
+    open?: boolean;
+    afterOpenChange?: (open: boolean) => void;
+    /** @deprecated Please use `open` instead */
+    visible?: boolean;
+    /** @deprecated Please use `afterOpenChange` instead */
+    afterVisibleChange?: (open: boolean) => void;
+    classNames?: DrawerClassNames;
+    styles?: DrawerStyles;
+    /** @deprecated Please use `destroyOnHidden` instead */
+    destroyOnClose?: boolean;
+    /**
+     * @since 5.25.0
+     */
+    destroyOnHidden?: boolean;
+}
+declare const Drawer: React.FC<DrawerProps> & {
+    _InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
+};
+interface PurePanelInterface {
+    prefixCls?: string;
+    style?: React.CSSProperties;
+    className?: string;
+    placement?: Placement;
+}
+/** @private Internal Component. Do not use in your production. */
+declare const PurePanel: React.FC<Omit<DrawerPanelProps, 'prefixCls'> & PurePanelInterface>;
+export default Drawer;

frontend/node_modules/antd/es/drawer/index.js

@@ -0,0 +1,186 @@
+"use client";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import * as React from 'react';
+import classNames from 'classnames';
+import RcDrawer from 'rc-drawer';
+import useId from "rc-util/es/hooks/useId";
+import { composeRef } from "rc-util/es/ref";
+import ContextIsolator from '../_util/ContextIsolator';
+import { useZIndex } from '../_util/hooks';
+import { getTransitionName } from '../_util/motion';
+import { devUseWarning } from '../_util/warning';
+import zIndexContext from '../_util/zindexContext';
+import { ConfigContext } from '../config-provider';
+import { useComponentConfig } from '../config-provider/context';
+import { usePanelRef } from '../watermark/context';
+import DrawerPanel from './DrawerPanel';
+import useStyle from './style';
+const _SizeTypes = ['default', 'large'];
+const defaultPushState = {
+  distance: 180
+};
+const Drawer = props => {
+  var _a;
+  const {
+      rootClassName,
+      width,
+      height,
+      size = 'default',
+      mask = true,
+      push = defaultPushState,
+      open,
+      afterOpenChange,
+      onClose,
+      prefixCls: customizePrefixCls,
+      getContainer: customizeGetContainer,
+      panelRef = null,
+      style,
+      className,
+      'aria-labelledby': ariaLabelledby,
+      // Deprecated
+      visible,
+      afterVisibleChange,
+      maskStyle,
+      drawerStyle,
+      contentWrapperStyle,
+      destroyOnClose,
+      destroyOnHidden
+    } = props,
+    rest = __rest(props, ["rootClassName", "width", "height", "size", "mask", "push", "open", "afterOpenChange", "onClose", "prefixCls", "getContainer", "panelRef", "style", "className", 'aria-labelledby', "visible", "afterVisibleChange", "maskStyle", "drawerStyle", "contentWrapperStyle", "destroyOnClose", "destroyOnHidden"]);
+  const id = useId();
+  const ariaId = rest.title ? id : undefined;
+  const {
+    getPopupContainer,
+    getPrefixCls,
+    direction,
+    className: contextClassName,
+    style: contextStyle,
+    classNames: contextClassNames,
+    styles: contextStyles
+  } = useComponentConfig('drawer');
+  const prefixCls = getPrefixCls('drawer', customizePrefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
+  const getContainer =
+  // 有可能为 false，所以不能直接判断
+  customizeGetContainer === undefined && getPopupContainer ? () => getPopupContainer(document.body) : customizeGetContainer;
+  const drawerClassName = classNames({
+    'no-mask': !mask,
+    [`${prefixCls}-rtl`]: direction === 'rtl'
+  }, rootClassName, hashId, cssVarCls);
+  // ========================== Warning ===========================
+  if (process.env.NODE_ENV !== 'production') {
+    const warning = devUseWarning('Drawer');
+    [['visible', 'open'], ['afterVisibleChange', 'afterOpenChange'], ['headerStyle', 'styles.header'], ['bodyStyle', 'styles.body'], ['footerStyle', 'styles.footer'], ['contentWrapperStyle', 'styles.wrapper'], ['maskStyle', 'styles.mask'], ['drawerStyle', 'styles.content'], ['destroyInactivePanel', 'destroyOnHidden']].forEach(([deprecatedName, newName]) => {
+      warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
+    });
+    if (getContainer !== undefined && ((_a = props.style) === null || _a === void 0 ? void 0 : _a.position) === 'absolute') {
+      process.env.NODE_ENV !== "production" ? warning(false, 'breaking', '`style` is replaced by `rootStyle` in v5. Please check that `position: absolute` is necessary.') : void 0;
+    }
+  }
+  // ============================ Size ============================
+  const mergedWidth = React.useMemo(() => width !== null && width !== void 0 ? width : size === 'large' ? 736 : 378, [width, size]);
+  const mergedHeight = React.useMemo(() => height !== null && height !== void 0 ? height : size === 'large' ? 736 : 378, [height, size]);
+  // =========================== Motion ===========================
+  const maskMotion = {
+    motionName: getTransitionName(prefixCls, 'mask-motion'),
+    motionAppear: true,
+    motionEnter: true,
+    motionLeave: true,
+    motionDeadline: 500
+  };
+  const panelMotion = motionPlacement => ({
+    motionName: getTransitionName(prefixCls, `panel-motion-${motionPlacement}`),
+    motionAppear: true,
+    motionEnter: true,
+    motionLeave: true,
+    motionDeadline: 500
+  });
+  // ============================ Refs ============================
+  // Select `ant-drawer-content` by `panelRef`
+  const innerPanelRef = usePanelRef();
+  const mergedPanelRef = composeRef(panelRef, innerPanelRef);
+  // ============================ zIndex ============================
+  const [zIndex, contextZIndex] = useZIndex('Drawer', rest.zIndex);
+  // =========================== Render ===========================
+  const {
+    classNames: propClassNames = {},
+    styles: propStyles = {}
+  } = rest;
+  return wrapCSSVar(/*#__PURE__*/React.createElement(ContextIsolator, {
+    form: true,
+    space: true
+  }, /*#__PURE__*/React.createElement(zIndexContext.Provider, {
+    value: contextZIndex
+  }, /*#__PURE__*/React.createElement(RcDrawer, Object.assign({
+    prefixCls: prefixCls,
+    onClose: onClose,
+    maskMotion: maskMotion,
+    motion: panelMotion
+  }, rest, {
+    classNames: {
+      mask: classNames(propClassNames.mask, contextClassNames.mask),
+      content: classNames(propClassNames.content, contextClassNames.content),
+      wrapper: classNames(propClassNames.wrapper, contextClassNames.wrapper)
+    },
+    styles: {
+      mask: Object.assign(Object.assign(Object.assign({}, propStyles.mask), maskStyle), contextStyles.mask),
+      content: Object.assign(Object.assign(Object.assign({}, propStyles.content), drawerStyle), contextStyles.content),
+      wrapper: Object.assign(Object.assign(Object.assign({}, propStyles.wrapper), contentWrapperStyle), contextStyles.wrapper)
+    },
+    open: open !== null && open !== void 0 ? open : visible,
+    mask: mask,
+    push: push,
+    width: mergedWidth,
+    height: mergedHeight,
+    style: Object.assign(Object.assign({}, contextStyle), style),
+    className: classNames(contextClassName, className),
+    rootClassName: drawerClassName,
+    getContainer: getContainer,
+    afterOpenChange: afterOpenChange !== null && afterOpenChange !== void 0 ? afterOpenChange : afterVisibleChange,
+    panelRef: mergedPanelRef,
+    zIndex: zIndex,
+    "aria-labelledby": ariaLabelledby !== null && ariaLabelledby !== void 0 ? ariaLabelledby : ariaId,
+    // TODO: In the future, destroyOnClose in rc-drawer needs to be upgrade to destroyOnHidden
+    destroyOnClose: destroyOnHidden !== null && destroyOnHidden !== void 0 ? destroyOnHidden : destroyOnClose
+  }), /*#__PURE__*/React.createElement(DrawerPanel, Object.assign({
+    prefixCls: prefixCls
+  }, rest, {
+    ariaId: ariaId,
+    onClose: onClose
+  }))))));
+};
+/** @private Internal Component. Do not use in your production. */
+const PurePanel = props => {
+  const {
+      prefixCls: customizePrefixCls,
+      style,
+      className,
+      placement = 'right'
+    } = props,
+    restProps = __rest(props, ["prefixCls", "style", "className", "placement"]);
+  const {
+    getPrefixCls
+  } = React.useContext(ConfigContext);
+  const prefixCls = getPrefixCls('drawer', customizePrefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
+  const cls = classNames(prefixCls, `${prefixCls}-pure`, `${prefixCls}-${placement}`, hashId, cssVarCls, className);
+  return wrapCSSVar(/*#__PURE__*/React.createElement("div", {
+    className: cls,
+    style: style
+  }, /*#__PURE__*/React.createElement(DrawerPanel, Object.assign({
+    prefixCls: prefixCls
+  }, restProps))));
+};
+Drawer._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
+if (process.env.NODE_ENV !== 'production') {
+  Drawer.displayName = 'Drawer';
+}
+export default Drawer;

frontend/node_modules/antd/es/drawer/style/index.d.ts

@@ -0,0 +1,23 @@
+import type { FullToken, GetDefaultToken } from '../../theme/internal';
+export interface ComponentToken {
+    /**
+     * @desc 弹窗 z-index
+     * @descEN z-index of drawer
+     */
+    zIndexPopup: number;
+    /**
+     * @desc 底部区域纵向内间距
+     * @descEN Vertical padding of footer
+     */
+    footerPaddingBlock: number;
+    /**
+     * @desc 底部区域横向内间距
+     * @descEN Horizontal padding of footer
+     */
+    footerPaddingInline: number;
+}
+export interface DrawerToken extends FullToken<'Drawer'> {
+}
+export declare const prepareComponentToken: GetDefaultToken<'Drawer'>;
+declare const _default: (prefixCls: string, rootCls?: string) => readonly [(node: React.ReactElement) => React.ReactElement, string, string];
+export default _default;

frontend/node_modules/antd/es/drawer/style/index.js

@@ -0,0 +1,217 @@
+import { unit } from '@ant-design/cssinjs';
+import { genFocusStyle } from '../../style';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
+import genMotionStyle from './motion';
+// =============================== Base ===============================
+const genDrawerStyle = token => {
+  const {
+    borderRadiusSM,
+    componentCls,
+    zIndexPopup,
+    colorBgMask,
+    colorBgElevated,
+    motionDurationSlow,
+    motionDurationMid,
+    paddingXS,
+    padding,
+    paddingLG,
+    fontSizeLG,
+    lineHeightLG,
+    lineWidth,
+    lineType,
+    colorSplit,
+    marginXS,
+    colorIcon,
+    colorIconHover,
+    colorBgTextHover,
+    colorBgTextActive,
+    colorText,
+    fontWeightStrong,
+    footerPaddingBlock,
+    footerPaddingInline,
+    calc
+  } = token;
+  const wrapperCls = `${componentCls}-content-wrapper`;
+  return {
+    [componentCls]: {
+      position: 'fixed',
+      inset: 0,
+      zIndex: zIndexPopup,
+      pointerEvents: 'none',
+      color: colorText,
+      '&-pure': {
+        position: 'relative',
+        background: colorBgElevated,
+        display: 'flex',
+        flexDirection: 'column',
+        [`&${componentCls}-left`]: {
+          boxShadow: token.boxShadowDrawerLeft
+        },
+        [`&${componentCls}-right`]: {
+          boxShadow: token.boxShadowDrawerRight
+        },
+        [`&${componentCls}-top`]: {
+          boxShadow: token.boxShadowDrawerUp
+        },
+        [`&${componentCls}-bottom`]: {
+          boxShadow: token.boxShadowDrawerDown
+        }
+      },
+      '&-inline': {
+        position: 'absolute'
+      },
+      // ====================== Mask ======================
+      [`${componentCls}-mask`]: {
+        position: 'absolute',
+        inset: 0,
+        zIndex: zIndexPopup,
+        background: colorBgMask,
+        pointerEvents: 'auto'
+      },
+      // ==================== Content =====================
+      [wrapperCls]: {
+        position: 'absolute',
+        zIndex: zIndexPopup,
+        maxWidth: '100vw',
+        transition: `all ${motionDurationSlow}`,
+        '&-hidden': {
+          display: 'none'
+        }
+      },
+      // Placement
+      [`&-left > ${wrapperCls}`]: {
+        top: 0,
+        bottom: 0,
+        left: {
+          _skip_check_: true,
+          value: 0
+        },
+        boxShadow: token.boxShadowDrawerLeft
+      },
+      [`&-right > ${wrapperCls}`]: {
+        top: 0,
+        right: {
+          _skip_check_: true,
+          value: 0
+        },
+        bottom: 0,
+        boxShadow: token.boxShadowDrawerRight
+      },
+      [`&-top > ${wrapperCls}`]: {
+        top: 0,
+        insetInline: 0,
+        boxShadow: token.boxShadowDrawerUp
+      },
+      [`&-bottom > ${wrapperCls}`]: {
+        bottom: 0,
+        insetInline: 0,
+        boxShadow: token.boxShadowDrawerDown
+      },
+      [`${componentCls}-content`]: {
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+        height: '100%',
+        overflow: 'auto',
+        background: colorBgElevated,
+        pointerEvents: 'auto'
+      },
+      // Header
+      [`${componentCls}-header`]: {
+        display: 'flex',
+        flex: 0,
+        alignItems: 'center',
+        padding: `${unit(padding)} ${unit(paddingLG)}`,
+        fontSize: fontSizeLG,
+        lineHeight: lineHeightLG,
+        borderBottom: `${unit(lineWidth)} ${lineType} ${colorSplit}`,
+        '&-title': {
+          display: 'flex',
+          flex: 1,
+          alignItems: 'center',
+          minWidth: 0,
+          minHeight: 0
+        }
+      },
+      [`${componentCls}-extra`]: {
+        flex: 'none'
+      },
+      [`${componentCls}-close`]: Object.assign({
+        display: 'inline-flex',
+        width: calc(fontSizeLG).add(paddingXS).equal(),
+        height: calc(fontSizeLG).add(paddingXS).equal(),
+        borderRadius: borderRadiusSM,
+        justifyContent: 'center',
+        alignItems: 'center',
+        color: colorIcon,
+        fontWeight: fontWeightStrong,
+        fontSize: fontSizeLG,
+        fontStyle: 'normal',
+        lineHeight: 1,
+        textAlign: 'center',
+        textTransform: 'none',
+        textDecoration: 'none',
+        background: 'transparent',
+        border: 0,
+        cursor: 'pointer',
+        transition: `all ${motionDurationMid}`,
+        textRendering: 'auto',
+        [`&${componentCls}-close-end`]: {
+          marginInlineStart: marginXS
+        },
+        [`&:not(${componentCls}-close-end)`]: {
+          marginInlineEnd: marginXS
+        },
+        '&:hover': {
+          color: colorIconHover,
+          backgroundColor: colorBgTextHover,
+          textDecoration: 'none'
+        },
+        '&:active': {
+          backgroundColor: colorBgTextActive
+        }
+      }, genFocusStyle(token)),
+      [`${componentCls}-title`]: {
+        flex: 1,
+        margin: 0,
+        fontWeight: token.fontWeightStrong,
+        fontSize: fontSizeLG,
+        lineHeight: lineHeightLG
+      },
+      // Body
+      [`${componentCls}-body`]: {
+        flex: 1,
+        minWidth: 0,
+        minHeight: 0,
+        padding: paddingLG,
+        overflow: 'auto',
+        [`${componentCls}-body-skeleton`]: {
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          justifyContent: 'center'
+        }
+      },
+      // Footer
+      [`${componentCls}-footer`]: {
+        flexShrink: 0,
+        padding: `${unit(footerPaddingBlock)} ${unit(footerPaddingInline)}`,
+        borderTop: `${unit(lineWidth)} ${lineType} ${colorSplit}`
+      },
+      // ====================== RTL =======================
+      '&-rtl': {
+        direction: 'rtl'
+      }
+    }
+  };
+};
+export const prepareComponentToken = token => ({
+  zIndexPopup: token.zIndexPopupBase,
+  footerPaddingBlock: token.paddingXS,
+  footerPaddingInline: token.padding
+});
+// ============================== Export ==============================
+export default genStyleHooks('Drawer', token => {
+  const drawerToken = mergeToken(token, {});
+  return [genDrawerStyle(drawerToken), genMotionStyle(drawerToken)];
+}, prepareComponentToken);

frontend/node_modules/antd/es/drawer/style/motion.d.ts

@@ -0,0 +1,4 @@
+import type { DrawerToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+declare const genMotionStyle: GenerateStyle<DrawerToken>;
+export default genMotionStyle;

frontend/node_modules/antd/es/drawer/style/motion.js

@@ -0,0 +1,53 @@
+const getMoveTranslate = direction => {
+  const value = '100%';
+  return {
+    left: `translateX(-${value})`,
+    right: `translateX(${value})`,
+    top: `translateY(-${value})`,
+    bottom: `translateY(${value})`
+  }[direction];
+};
+const getEnterLeaveStyle = (startStyle, endStyle) => ({
+  '&-enter, &-appear': Object.assign(Object.assign({}, startStyle), {
+    '&-active': endStyle
+  }),
+  '&-leave': Object.assign(Object.assign({}, endStyle), {
+    '&-active': startStyle
+  })
+});
+const getFadeStyle = (from, duration) => Object.assign({
+  '&-enter, &-appear, &-leave': {
+    '&-start': {
+      transition: 'none'
+    },
+    '&-active': {
+      transition: `all ${duration}`
+    }
+  }
+}, getEnterLeaveStyle({
+  opacity: from
+}, {
+  opacity: 1
+}));
+const getPanelMotionStyles = (direction, duration) => [getFadeStyle(0.7, duration), getEnterLeaveStyle({
+  transform: getMoveTranslate(direction)
+}, {
+  transform: 'none'
+})];
+const genMotionStyle = token => {
+  const {
+    componentCls,
+    motionDurationSlow
+  } = token;
+  return {
+    [componentCls]: {
+      // ======================== Mask ========================
+      [`${componentCls}-mask-motion`]: getFadeStyle(0, motionDurationSlow),
+      // ======================= Panel ========================
+      [`${componentCls}-panel-motion`]: ['left', 'right', 'top', 'bottom'].reduce((obj, direction) => Object.assign(Object.assign({}, obj), {
+        [`&-${direction}`]: getPanelMotionStyles(direction, motionDurationSlow)
+      }), {})
+    }
+  };
+};
+export default genMotionStyle;