first commit

frontend/node_modules/antd/lib/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/lib/drawer/style/index.js

@@ -0,0 +1,225 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.prepareComponentToken = exports.default = void 0;
+var _cssinjs = require("@ant-design/cssinjs");
+var _style = require("../../style");
+var _internal = require("../../theme/internal");
+var _motion = _interopRequireDefault(require("./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: `${(0, _cssinjs.unit)(padding)} ${(0, _cssinjs.unit)(paddingLG)}`,
+        fontSize: fontSizeLG,
+        lineHeight: lineHeightLG,
+        borderBottom: `${(0, _cssinjs.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
+        }
+      }, (0, _style.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: `${(0, _cssinjs.unit)(footerPaddingBlock)} ${(0, _cssinjs.unit)(footerPaddingInline)}`,
+        borderTop: `${(0, _cssinjs.unit)(lineWidth)} ${lineType} ${colorSplit}`
+      },
+      // ====================== RTL =======================
+      '&-rtl': {
+        direction: 'rtl'
+      }
+    }
+  };
+};
+const prepareComponentToken = token => ({
+  zIndexPopup: token.zIndexPopupBase,
+  footerPaddingBlock: token.paddingXS,
+  footerPaddingInline: token.padding
+});
+// ============================== Export ==============================
+exports.prepareComponentToken = prepareComponentToken;
+var _default = exports.default = (0, _internal.genStyleHooks)('Drawer', token => {
+  const drawerToken = (0, _internal.mergeToken)(token, {});
+  return [genDrawerStyle(drawerToken), (0, _motion.default)(drawerToken)];
+}, prepareComponentToken);

frontend/node_modules/antd/lib/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/lib/drawer/style/motion.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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)
+      }), {})
+    }
+  };
+};
+var _default = exports.default = genMotionStyle;