first commit

frontend/node_modules/antd/lib/modal/style/confirm.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("react").FunctionComponent<import("@ant-design/cssinjs-utils/lib/util/genStyleUtils").SubStyleComponentProps>;
+export default _default;

frontend/node_modules/antd/lib/modal/style/confirm.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _cssinjs = require("@ant-design/cssinjs");
+var _ = require(".");
+var _style = require("../../style");
+var _internal = require("../../theme/internal");
+// Style as confirm component
+
+// ============================= Confirm ==============================
+const genModalConfirmStyle = token => {
+  const {
+    componentCls,
+    titleFontSize,
+    titleLineHeight,
+    modalConfirmIconSize,
+    fontSize,
+    lineHeight,
+    modalTitleHeight,
+    fontHeight,
+    confirmBodyPadding
+  } = token;
+  const confirmComponentCls = `${componentCls}-confirm`;
+  return {
+    [confirmComponentCls]: {
+      '&-rtl': {
+        direction: 'rtl'
+      },
+      [`${token.antCls}-modal-header`]: {
+        display: 'none'
+      },
+      [`${confirmComponentCls}-body-wrapper`]: Object.assign({}, (0, _style.clearFix)()),
+      [`&${componentCls} ${componentCls}-body`]: {
+        padding: confirmBodyPadding
+      },
+      // ====================== Body ======================
+      [`${confirmComponentCls}-body`]: {
+        display: 'flex',
+        flexWrap: 'nowrap',
+        alignItems: 'start',
+        [`> ${token.iconCls}`]: {
+          flex: 'none',
+          fontSize: modalConfirmIconSize,
+          marginInlineEnd: token.confirmIconMarginInlineEnd,
+          marginTop: token.calc(token.calc(fontHeight).sub(modalConfirmIconSize).equal()).div(2).equal()
+        },
+        [`&-has-title > ${token.iconCls}`]: {
+          marginTop: token.calc(token.calc(modalTitleHeight).sub(modalConfirmIconSize).equal()).div(2).equal()
+        }
+      },
+      [`${confirmComponentCls}-paragraph`]: {
+        display: 'flex',
+        flexDirection: 'column',
+        flex: 'auto',
+        rowGap: token.marginXS,
+        // https://github.com/ant-design/ant-design/issues/51912
+        maxWidth: `calc(100% - ${(0, _cssinjs.unit)(token.marginSM)})`
+      },
+      // https://github.com/ant-design/ant-design/issues/48159
+      [`${token.iconCls} + ${confirmComponentCls}-paragraph`]: {
+        maxWidth: `calc(100% - ${(0, _cssinjs.unit)(token.calc(token.modalConfirmIconSize).add(token.marginSM).equal())})`
+      },
+      [`${confirmComponentCls}-title`]: {
+        color: token.colorTextHeading,
+        fontWeight: token.fontWeightStrong,
+        fontSize: titleFontSize,
+        lineHeight: titleLineHeight
+      },
+      [`${confirmComponentCls}-content`]: {
+        color: token.colorText,
+        fontSize,
+        lineHeight
+      },
+      // ===================== Footer =====================
+      [`${confirmComponentCls}-btns`]: {
+        textAlign: 'end',
+        marginTop: token.confirmBtnsMarginTop,
+        [`${token.antCls}-btn + ${token.antCls}-btn`]: {
+          marginBottom: 0,
+          marginInlineStart: token.marginXS
+        }
+      }
+    },
+    [`${confirmComponentCls}-error ${confirmComponentCls}-body > ${token.iconCls}`]: {
+      color: token.colorError
+    },
+    [`${confirmComponentCls}-warning ${confirmComponentCls}-body > ${token.iconCls},
+        ${confirmComponentCls}-confirm ${confirmComponentCls}-body > ${token.iconCls}`]: {
+      color: token.colorWarning
+    },
+    [`${confirmComponentCls}-info ${confirmComponentCls}-body > ${token.iconCls}`]: {
+      color: token.colorInfo
+    },
+    [`${confirmComponentCls}-success ${confirmComponentCls}-body > ${token.iconCls}`]: {
+      color: token.colorSuccess
+    }
+  };
+};
+// ============================== Export ==============================
+var _default = exports.default = (0, _internal.genSubStyleComponent)(['Modal', 'confirm'], token => {
+  const modalToken = (0, _.prepareToken)(token);
+  return genModalConfirmStyle(modalToken);
+}, _.prepareComponentToken, {
+  // confirm is weak than modal since no conflict here
+  order: -1000
+});

frontend/node_modules/antd/lib/modal/style/index.d.ts

@@ -0,0 +1,110 @@
+import type React from 'react';
+import type { AliasToken, FullToken, GenerateStyle, GenStyleFn, GlobalToken, TokenWithCommonCls } from '../../theme/internal';
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {
+    /**
+     * @desc 顶部背景色
+     * @descEN Background color of header
+     */
+    headerBg: string;
+    /**
+     * @desc 标题行高
+     * @descEN Line height of title
+     */
+    titleLineHeight: number | string;
+    /**
+     * @desc 标题字体大小
+     * @descEN Font size of title
+     */
+    titleFontSize: number;
+    /**
+     * @desc 标题字体颜色
+     * @descEN Font color of title
+     */
+    titleColor: string;
+    /**
+     * @desc 内容区域背景色
+     * @descEN Background color of content
+     */
+    contentBg: string;
+    /**
+     * @desc 底部区域背景色
+     * @descEN Background color of footer
+     */
+    footerBg: string;
+}
+/**
+ * @desc Modal 组件的 Token
+ * @descEN Token for Modal component
+ */
+export interface ModalToken extends FullToken<'Modal'> {
+    /**
+     * @desc 模态框头部高度
+     * @descEN Height of modal header
+     */
+    modalHeaderHeight: number | string;
+    /**
+     * @desc 模态框底部边框颜色
+     * @descEN Border color of modal footer
+     */
+    modalFooterBorderColorSplit: string;
+    /**
+     * @desc 模态框底部边框样式
+     * @descEN Border style of modal footer
+     */
+    modalFooterBorderStyle: string;
+    /**
+     * @desc 模态框底部边框宽度
+     * @descEN Border width of modal footer
+     */
+    modalFooterBorderWidth: number | string;
+    /**
+     * @desc 模态框关闭图标颜色
+     * @descEN Color of modal close icon
+     */
+    modalCloseIconColor: string;
+    /**
+     * @desc 模态框关闭图标悬停颜色
+     * @descEN Hover color of modal close icon
+     */
+    modalCloseIconHoverColor: string;
+    /**
+     * @desc 模态框关闭按钮尺寸
+     * @descEN Size of modal close button
+     */
+    modalCloseBtnSize: number | string;
+    /**
+     * @desc 模态框确认图标尺寸
+     * @descEN Size of modal confirm icon
+     */
+    modalConfirmIconSize: number | string;
+    /**
+     * @desc 模态框标题高度
+     * @descEN Height of modal title
+     */
+    modalTitleHeight: number | string;
+}
+export declare const genModalMaskStyle: GenerateStyle<TokenWithCommonCls<AliasToken>>;
+export declare const prepareToken: (token: Parameters<GenStyleFn<'Modal'>>[0]) => ModalToken;
+export declare const prepareComponentToken: (token: GlobalToken) => {
+    footerBg: string;
+    headerBg: string;
+    titleLineHeight: number;
+    titleFontSize: number;
+    contentBg: string;
+    titleColor: string;
+    contentPadding: string | number;
+    headerPadding: string | number;
+    headerBorderBottom: string;
+    headerMarginBottom: number;
+    bodyPadding: number;
+    footerPadding: string | number;
+    footerBorderTop: string;
+    footerBorderRadius: string | number;
+    footerMarginTop: number;
+    confirmBodyPadding: string | number;
+    confirmIconMarginInlineEnd: number;
+    confirmBtnsMarginTop: number;
+};
+declare const _default: (prefixCls: string, rootCls?: string) => readonly [(node: React.ReactElement) => React.ReactElement, string, string];
+export default _default;

frontend/node_modules/antd/lib/modal/style/index.js

@@ -0,0 +1,316 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.prepareToken = exports.prepareComponentToken = exports.genModalMaskStyle = exports.default = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _cssinjs = require("@ant-design/cssinjs");
+var _style = require("../../grid/style");
+var _style2 = require("../../style");
+var _motion = require("../../style/motion");
+var _internal = require("../../theme/internal");
+function box(position) {
+  return {
+    position,
+    inset: 0
+  };
+}
+const genModalMaskStyle = token => {
+  const {
+    componentCls,
+    antCls
+  } = token;
+  return [{
+    [`${componentCls}-root`]: {
+      [`${componentCls}${antCls}-zoom-enter, ${componentCls}${antCls}-zoom-appear`]: {
+        // reset scale avoid mousePosition bug
+        transform: 'none',
+        opacity: 0,
+        animationDuration: token.motionDurationSlow,
+        // https://github.com/ant-design/ant-design/issues/11777
+        userSelect: 'none'
+      },
+      // https://github.com/ant-design/ant-design/issues/37329
+      // https://github.com/ant-design/ant-design/issues/40272
+      [`${componentCls}${antCls}-zoom-leave ${componentCls}-content`]: {
+        pointerEvents: 'none'
+      },
+      [`${componentCls}-mask`]: Object.assign(Object.assign({}, box('fixed')), {
+        zIndex: token.zIndexPopupBase,
+        height: '100%',
+        backgroundColor: token.colorBgMask,
+        pointerEvents: 'none',
+        [`${componentCls}-hidden`]: {
+          display: 'none'
+        }
+      }),
+      [`${componentCls}-wrap`]: Object.assign(Object.assign({}, box('fixed')), {
+        zIndex: token.zIndexPopupBase,
+        overflow: 'auto',
+        outline: 0,
+        WebkitOverflowScrolling: 'touch'
+      })
+    }
+  }, {
+    [`${componentCls}-root`]: (0, _motion.initFadeMotion)(token)
+  }];
+};
+exports.genModalMaskStyle = genModalMaskStyle;
+const genModalStyle = token => {
+  const {
+    componentCls
+  } = token;
+  return [
+  // ======================== Root =========================
+  {
+    [`${componentCls}-root`]: {
+      [`${componentCls}-wrap-rtl`]: {
+        direction: 'rtl'
+      },
+      [`${componentCls}-centered`]: {
+        textAlign: 'center',
+        '&::before': {
+          display: 'inline-block',
+          width: 0,
+          height: '100%',
+          verticalAlign: 'middle',
+          content: '""'
+        },
+        [componentCls]: {
+          top: 0,
+          display: 'inline-block',
+          paddingBottom: 0,
+          textAlign: 'start',
+          verticalAlign: 'middle'
+        }
+      },
+      [`@media (max-width: ${token.screenSMMax}px)`]: {
+        [componentCls]: {
+          maxWidth: 'calc(100vw - 16px)',
+          margin: `${(0, _cssinjs.unit)(token.marginXS)} auto`
+        },
+        [`${componentCls}-centered`]: {
+          [componentCls]: {
+            flex: 1
+          }
+        }
+      }
+    }
+  },
+  // ======================== Modal ========================
+  {
+    [componentCls]: Object.assign(Object.assign({}, (0, _style2.resetComponent)(token)), {
+      pointerEvents: 'none',
+      position: 'relative',
+      top: 100,
+      width: 'auto',
+      maxWidth: `calc(100vw - ${(0, _cssinjs.unit)(token.calc(token.margin).mul(2).equal())})`,
+      margin: '0 auto',
+      paddingBottom: token.paddingLG,
+      [`${componentCls}-title`]: {
+        margin: 0,
+        color: token.titleColor,
+        fontWeight: token.fontWeightStrong,
+        fontSize: token.titleFontSize,
+        lineHeight: token.titleLineHeight,
+        wordWrap: 'break-word'
+      },
+      [`${componentCls}-content`]: {
+        position: 'relative',
+        backgroundColor: token.contentBg,
+        backgroundClip: 'padding-box',
+        border: 0,
+        borderRadius: token.borderRadiusLG,
+        boxShadow: token.boxShadow,
+        pointerEvents: 'auto',
+        padding: token.contentPadding
+      },
+      [`${componentCls}-close`]: Object.assign({
+        position: 'absolute',
+        top: token.calc(token.modalHeaderHeight).sub(token.modalCloseBtnSize).div(2).equal(),
+        insetInlineEnd: token.calc(token.modalHeaderHeight).sub(token.modalCloseBtnSize).div(2).equal(),
+        zIndex: token.calc(token.zIndexPopupBase).add(10).equal(),
+        padding: 0,
+        color: token.modalCloseIconColor,
+        fontWeight: token.fontWeightStrong,
+        lineHeight: 1,
+        textDecoration: 'none',
+        background: 'transparent',
+        borderRadius: token.borderRadiusSM,
+        width: token.modalCloseBtnSize,
+        height: token.modalCloseBtnSize,
+        border: 0,
+        outline: 0,
+        cursor: 'pointer',
+        transition: `color ${token.motionDurationMid}, background-color ${token.motionDurationMid}`,
+        '&-x': {
+          display: 'flex',
+          fontSize: token.fontSizeLG,
+          fontStyle: 'normal',
+          lineHeight: (0, _cssinjs.unit)(token.modalCloseBtnSize),
+          justifyContent: 'center',
+          textTransform: 'none',
+          textRendering: 'auto'
+        },
+        '&:disabled': {
+          pointerEvents: 'none'
+        },
+        '&:hover': {
+          color: token.modalCloseIconHoverColor,
+          backgroundColor: token.colorBgTextHover,
+          textDecoration: 'none'
+        },
+        '&:active': {
+          backgroundColor: token.colorBgTextActive
+        }
+      }, (0, _style2.genFocusStyle)(token)),
+      [`${componentCls}-header`]: {
+        color: token.colorText,
+        background: token.headerBg,
+        borderRadius: `${(0, _cssinjs.unit)(token.borderRadiusLG)} ${(0, _cssinjs.unit)(token.borderRadiusLG)} 0 0`,
+        marginBottom: token.headerMarginBottom,
+        padding: token.headerPadding,
+        borderBottom: token.headerBorderBottom
+      },
+      [`${componentCls}-body`]: {
+        fontSize: token.fontSize,
+        lineHeight: token.lineHeight,
+        wordWrap: 'break-word',
+        padding: token.bodyPadding,
+        [`${componentCls}-body-skeleton`]: {
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          margin: `${(0, _cssinjs.unit)(token.margin)} auto`
+        }
+      },
+      [`${componentCls}-footer`]: {
+        textAlign: 'end',
+        background: token.footerBg,
+        marginTop: token.footerMarginTop,
+        padding: token.footerPadding,
+        borderTop: token.footerBorderTop,
+        borderRadius: token.footerBorderRadius,
+        [`> ${token.antCls}-btn + ${token.antCls}-btn`]: {
+          marginInlineStart: token.marginXS
+        }
+      },
+      [`${componentCls}-open`]: {
+        overflow: 'hidden'
+      }
+    })
+  },
+  // ======================== Pure =========================
+  {
+    [`${componentCls}-pure-panel`]: {
+      top: 'auto',
+      padding: 0,
+      display: 'flex',
+      flexDirection: 'column',
+      [`${componentCls}-content,
+          ${componentCls}-body,
+          ${componentCls}-confirm-body-wrapper`]: {
+        display: 'flex',
+        flexDirection: 'column',
+        flex: 'auto'
+      },
+      [`${componentCls}-confirm-body`]: {
+        marginBottom: 'auto'
+      }
+    }
+  }];
+};
+const genRTLStyle = token => {
+  const {
+    componentCls
+  } = token;
+  return {
+    [`${componentCls}-root`]: {
+      [`${componentCls}-wrap-rtl`]: {
+        direction: 'rtl',
+        [`${componentCls}-confirm-body`]: {
+          direction: 'rtl'
+        }
+      }
+    }
+  };
+};
+const genResponsiveWidthStyle = token => {
+  const {
+    componentCls
+  } = token;
+  const oriGridMediaSizesMap = (0, _style.getMediaSize)(token);
+  const gridMediaSizesMap = Object.assign({}, oriGridMediaSizesMap);
+  delete gridMediaSizesMap.xs;
+  const cssVarPrefix = `--${componentCls.replace('.', '')}-`;
+  const responsiveStyles = Object.keys(gridMediaSizesMap).map(key => ({
+    [`@media (min-width: ${(0, _cssinjs.unit)(gridMediaSizesMap[key])})`]: {
+      width: `var(${cssVarPrefix}${key}-width)`
+    }
+  }));
+  return {
+    [`${componentCls}-root`]: {
+      [componentCls]: [].concat((0, _toConsumableArray2.default)(Object.keys(oriGridMediaSizesMap).map((currentKey, index) => {
+        const previousKey = Object.keys(oriGridMediaSizesMap)[index - 1];
+        return previousKey ? {
+          [`${cssVarPrefix}${currentKey}-width`]: `var(${cssVarPrefix}${previousKey}-width)`
+        } : null;
+      })), [{
+        width: `var(${cssVarPrefix}xs-width)`
+      }], (0, _toConsumableArray2.default)(responsiveStyles))
+    }
+  };
+};
+// ============================== Export ==============================
+const prepareToken = token => {
+  const headerPaddingVertical = token.padding;
+  const headerFontSize = token.fontSizeHeading5;
+  const headerLineHeight = token.lineHeightHeading5;
+  const modalToken = (0, _internal.mergeToken)(token, {
+    modalHeaderHeight: token.calc(token.calc(headerLineHeight).mul(headerFontSize).equal()).add(token.calc(headerPaddingVertical).mul(2).equal()).equal(),
+    modalFooterBorderColorSplit: token.colorSplit,
+    modalFooterBorderStyle: token.lineType,
+    modalFooterBorderWidth: token.lineWidth,
+    modalCloseIconColor: token.colorIcon,
+    modalCloseIconHoverColor: token.colorIconHover,
+    modalCloseBtnSize: token.controlHeight,
+    modalConfirmIconSize: token.fontHeight,
+    modalTitleHeight: token.calc(token.titleFontSize).mul(token.titleLineHeight).equal()
+  });
+  return modalToken;
+};
+exports.prepareToken = prepareToken;
+const prepareComponentToken = token => ({
+  footerBg: 'transparent',
+  headerBg: token.colorBgElevated,
+  titleLineHeight: token.lineHeightHeading5,
+  titleFontSize: token.fontSizeHeading5,
+  contentBg: token.colorBgElevated,
+  titleColor: token.colorTextHeading,
+  // internal
+  contentPadding: token.wireframe ? 0 : `${(0, _cssinjs.unit)(token.paddingMD)} ${(0, _cssinjs.unit)(token.paddingContentHorizontalLG)}`,
+  headerPadding: token.wireframe ? `${(0, _cssinjs.unit)(token.padding)} ${(0, _cssinjs.unit)(token.paddingLG)}` : 0,
+  headerBorderBottom: token.wireframe ? `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.colorSplit}` : 'none',
+  headerMarginBottom: token.wireframe ? 0 : token.marginXS,
+  bodyPadding: token.wireframe ? token.paddingLG : 0,
+  footerPadding: token.wireframe ? `${(0, _cssinjs.unit)(token.paddingXS)} ${(0, _cssinjs.unit)(token.padding)}` : 0,
+  footerBorderTop: token.wireframe ? `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.colorSplit}` : 'none',
+  footerBorderRadius: token.wireframe ? `0 0 ${(0, _cssinjs.unit)(token.borderRadiusLG)} ${(0, _cssinjs.unit)(token.borderRadiusLG)}` : 0,
+  footerMarginTop: token.wireframe ? 0 : token.marginSM,
+  confirmBodyPadding: token.wireframe ? `${(0, _cssinjs.unit)(token.padding * 2)} ${(0, _cssinjs.unit)(token.padding * 2)} ${(0, _cssinjs.unit)(token.paddingLG)}` : 0,
+  confirmIconMarginInlineEnd: token.wireframe ? token.margin : token.marginSM,
+  confirmBtnsMarginTop: token.wireframe ? token.marginLG : token.marginSM
+});
+exports.prepareComponentToken = prepareComponentToken;
+var _default = exports.default = (0, _internal.genStyleHooks)('Modal', token => {
+  const modalToken = prepareToken(token);
+  return [genModalStyle(modalToken), genRTLStyle(modalToken), genModalMaskStyle(modalToken), (0, _motion.initZoomMotion)(modalToken, 'zoom'), genResponsiveWidthStyle(modalToken)];
+}, prepareComponentToken, {
+  unitless: {
+    titleLineHeight: true
+  }
+});