@digitalc/dxp-ui 0.0.5-alpha.15 → 0.0.5-alpha.17

package/es/components/ListItem/index.js

@@ -1,19 +1,25 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["listType", "leftIcon", "leftImageSrc", "title", "subTitle", "onToggleChange", "toggleChecked", "showToggle", "showLink", "LinkName", "onLinkClick", "showStatus", "statusIconName", "statusIconColor", "subTitleUp", "tagName", "showTag", "subIconObj", "leftThumbnail", "showRightBtn", "onRightBtnClick", "rightBtnTxt", "showRightIcon", "rightIconName", "onRightIconClick", "tappableArea", "tappableAreaClick"];
+var _excluded = ["size", "listType", "leftIcon", "leftImageSrc", "title", "subTitle", "onToggleChange", "toggleChecked", "showToggle", "showLink", "LinkName", "onLinkClick", "showStatus", "statusIconName", "statusIconColor", "subTitleUp", "tagName", "showTag", "subIconObj", "leftThumbnail", "showRightBtn", "onRightBtnClick", "rightBtnTxt", "showRightIcon", "rightIconName", "onRightIconClick", "tappableArea", "tappableAreaClick", "children", "className", "showRightText", "rightText", "rightChildren", "leftChildren", "prefix"];
 import React from 'react';
-import designTokens from "./designTokens";
+import { useDesignTokens } from "./designTokens";
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { isEmpty } from 'lodash';
 import { theme } from "../../utils/theme";
-import { Icon, Image, Text, Toggle, TextLink, TextLinkEnum, Tag, BackImageEunm, Button } from "../index";
+import { Icon, Image, Text, Toggle, TextLink, TextLinkEnum, Tag, BackImageEnum, Button } from "../index";
 import { cssClasses } from "../../constants";
 import "./style/index.less";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var ListItemTypes = {
   ListItemIcon: 'ListItemIcon',
+  // 见设计稿 左侧ICON
   ListItemImage: 'ListItemImage',
-  ListItemOther: 'ListItemOther'
+  // 见设计稿 左侧 Image(铺满)
+  ListItemOther: 'ListItemOther',
+  // 见设计稿 左侧thumbImage 
+  ListItemDefault: 'ListItemDefault',
+  // 左右 文字
+  ListItemCustom: 'ListItemCustom' // 只有一个壳子 内容纯自定义
 };
 export var TAPPABLE_AREAS = {
   ALL: 'ALL',
@@ -27,7 +33,10 @@ export var ListItemRightTypes = {
   Default: 'Default'
 };
 var ListItem = function ListItem(_ref) {
-  var listType = _ref.listType,
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? '' : _ref$size,
+    _ref$listType = _ref.listType,
+    listType = _ref$listType === void 0 ? ListItemTypes.ListItemDefault : _ref$listType,
     leftIcon = _ref.leftIcon,
     leftImageSrc = _ref.leftImageSrc,
     title = _ref.title,
@@ -60,7 +69,17 @@ var ListItem = function ListItem(_ref) {
     onRightIconClick = _ref.onRightIconClick,
     tappableArea = _ref.tappableArea,
     tappableAreaClick = _ref.tappableAreaClick,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    showRightText = _ref.showRightText,
+    rightText = _ref.rightText,
+    rightChildren = _ref.rightChildren,
+    leftChildren = _ref.leftChildren,
+    _ref$prefix = _ref.prefix,
+    prefix = _ref$prefix === void 0 ? "".concat(cssClasses.PREFIX, "-list-item") : _ref$prefix,
     restProps = _objectWithoutProperties(_ref, _excluded);
+  var designTokens = useDesignTokens();
   var sizingListItemImageImage = designTokens.sizingListItemImageImage,
     borderRadiusListItem = designTokens.borderRadiusListItem,
     colorListItemBackground = designTokens.colorListItemBackground,
@@ -74,7 +93,9 @@ var ListItem = function ListItem(_ref) {
     spacingListItemImageIconPaddingRight = designTokens.spacingListItemImageIconPaddingRight,
     colorListItemTextPoints = designTokens.colorListItemTextPoints,
     sizingListItemImageThumbnail = designTokens.sizingListItemImageThumbnail,
-    sizingListItemIconLg = designTokens.sizingListItemIconLg;
+    sizingListItemIconLg = designTokens.sizingListItemIconLg,
+    spacingListItemTextVerticalGapMd = designTokens.spacingListItemTextVerticalGapMd,
+    spacingListItemTextVerticalGapSm = designTokens.spacingListItemTextVerticalGapSm;
 
   // console.log('designTokens', designTokens);
 
@@ -82,9 +103,9 @@ var ListItem = function ListItem(_ref) {
     var hashId = useStyleRegister({
       theme: theme,
       token: {},
-      path: ["".concat(cssClasses.PREFIX, "-list-item ")]
+      path: ["".concat(prefix)]
     }, function () {
-      return "\n      .".concat(cssClasses.PREFIX, "-list-item  {\n        box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.12);\n        border-radius: ").concat(borderRadiusListItem || 8, "px;\n        background-color:").concat(colorListItemBackground || '#fff', ";\n        &.noShadow{\n          box-shadow:none !important;\n        }\n        .").concat(cssClasses.PREFIX, "-icon-container {\n          background:").concat(colorListItemIconBackground || '#F5F5F8', ";\n          margin-right:").concat(spacingListItemTextPaddingHorizontal, "px;\n        }\n        .").concat(cssClasses.PREFIX, "-image-container {\n          margin-right:").concat(spacingListItemTextPaddingHorizontal, "px;\n        }\n      }\n      .").concat(cssClasses.PREFIX, "-item-right {\n        padding-right:").concat(spacingListItemTextPaddingHorizontal, "px;\n      }\n      .").concat(cssClasses.PREFIX, "-status-warp {\n        padding-left: ").concat(spacingListItemTextPaddingHorizontal, "px;\n      }\n      .").concat(cssClasses.PREFIX, "-item-title {\n        color:").concat(colorListItemTextTitle, ";\n      }\n      .").concat(cssClasses.PREFIX, "-item-subTitle {\n        color:").concat(colorListItemTextSubtitle, ";\n      }\n     \n      .").concat(cssClasses.PREFIX, "-sub-icon-title {\n        color:").concat(colorListItemTextPoints, ";\n        margin-left:").concat(spacingListItemImageIconPaddingRight, "px;\n      }\n      .").concat(cssClasses.PREFIX, "-right-btn {\n         min-width:60px !important;\n      }\n    ");
+      return "\n      .".concat(prefix, "  {\n        box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.12);\n        border-radius: ").concat(borderRadiusListItem || 8, "px;\n        background-color:").concat(colorListItemBackground || 'transparent', ";\n        &.noShadow{\n          box-shadow:none !important;\n        }\n        &.").concat(prefix, "-M {\n          padding: ").concat(spacingListItemTextVerticalGapMd / 2, "px 0;\n        }\n        &.").concat(prefix, "-S {\n          padding: ").concat(spacingListItemTextVerticalGapSm / 2, "px 0;\n        }\n        .").concat(prefix, "-icon-container {\n          background:").concat(colorListItemIconBackground || '#F5F5F8', ";\n          margin-right:").concat(spacingListItemTextPaddingHorizontal, "px;\n        }\n        .").concat(prefix, "-image-container {\n          margin-right:").concat(spacingListItemTextPaddingHorizontal, "px;\n        }\n      }\n      .").concat(prefix, "-right {\n        padding-right:").concat(spacingListItemTextPaddingHorizontal, "px;\n        &.noPaddingRight{\n          padding-right: 0px;\n        }\n      }\n      .").concat(prefix, "-status-warp {\n        padding-left: ").concat(spacingListItemTextPaddingHorizontal, "px;\n      }\n      .").concat(prefix, "-title {\n        color:").concat(colorListItemTextTitle, ";\n      }\n      .").concat(prefix, "-right-title{\n        color:").concat(colorListItemTextTitle, ";\n      }\n      .").concat(prefix, "-subTitle {\n        color:").concat(colorListItemTextSubtitle, ";\n      }\n     \n      .").concat(prefix, "-sub-icon-title {\n        color:").concat(colorListItemTextPoints, ";\n        margin-left:").concat(spacingListItemImageIconPaddingRight, "px;\n      }\n      .").concat(prefix, "-right-btn {\n         min-width:60px !important;\n      }\n    ");
     });
     return hashId;
   };
@@ -114,21 +135,61 @@ var ListItem = function ListItem(_ref) {
       onToggleChange(checked, event);
     }
   };
+  if (listType === ListItemTypes.ListItemCustom) {
+    return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+      className: "".concat(prefix, " ").concat(className),
+      onClick: tappableAreaClick
+    }, restProps), {}, {
+      children: children
+    }));
+  }
+  ;
+  if (listType === ListItemTypes.ListItemDefault) {
+    return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+      className: "".concat(prefix, " ").concat(prefix, "-").concat(size, " noShadow default ").concat(className || ""),
+      onClick: onAllClick
+    }, restProps), {}, {
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "".concat(prefix, "-default-left"),
+        children: [subTitleUp && subTitle && /*#__PURE__*/_jsx(Text, {
+          size: "ContentC12Regular",
+          className: "".concat(prefix, "-subTitle"),
+          children: subTitle
+        }), title && /*#__PURE__*/_jsx(Text, {
+          size: "ContentC14Regular",
+          className: "".concat(prefix, "-title ").concat(subTitle ? 'line1' : 'line2'),
+          children: title
+        }), !subTitleUp && subTitle && /*#__PURE__*/_jsx(Text, {
+          size: "ContentC12Regular",
+          className: "".concat(prefix, "-subTitle"),
+          children: subTitle
+        }), leftChildren]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "".concat(prefix, "-default-right"),
+        children: [!isEmpty(rightText) && /*#__PURE__*/_jsx(Text, {
+          className: "".concat(prefix, "-right-title"),
+          size: "TitleT14Bold",
+          children: rightText
+        }), rightChildren]
+      })]
+    }));
+  }
+  ;
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
-    className: "\n        ".concat(cssClasses.PREFIX, "-list-item \n        ").concat(listType === ListItemTypes.ListItemOther ? 'noShadow' : "", "\n      ")
+    className: "".concat(prefix, " ").concat(prefix, "-").concat(size, " ").concat(listType === ListItemTypes.ListItemOther ? 'noShadow' : "", " ").concat(className || ""),
+    onClick: onAllClick
   }, restProps), {}, {
-    onClick: onAllClick,
     children: [/*#__PURE__*/_jsxs("div", {
-      className: "\n        ".concat(cssClasses.PREFIX, "-item-left \n      "),
+      className: "".concat(prefix, "-left"),
       children: [listType === ListItemTypes.ListItemIcon && !isEmpty(leftIcon) && /*#__PURE__*/_jsx("div", {
-        className: "".concat(cssClasses.PREFIX, "-icon-container"),
+        className: "".concat(prefix, "-icon-container"),
         children: /*#__PURE__*/_jsx(Icon, {
           name: leftIcon ? leftIcon.iconName : '',
           size: sizingListItemIconIcon,
           style: leftIcon ? leftIcon.iconStyle : {}
         })
       }), listType === ListItemTypes.ListItemImage && leftImageSrc && /*#__PURE__*/_jsxs("div", {
-        className: "".concat(cssClasses.PREFIX, "-image-container"),
+        className: "".concat(prefix, "-image-container"),
         children: [/*#__PURE__*/_jsx(Image, {
           radio: 1,
           src: leftImageSrc,
@@ -146,9 +207,9 @@ var ListItem = function ListItem(_ref) {
           children: tagName
         })]
       }), listType === ListItemTypes.ListItemOther && leftThumbnail && /*#__PURE__*/_jsx("div", {
-        className: "".concat(cssClasses.PREFIX, "-image-container"),
+        className: "".concat(prefix, "-image-container"),
         children: /*#__PURE__*/_jsx(Image, {
-          radio: BackImageEunm.whRadio1,
+          radio: BackImageEnum.whRadio1,
           src: leftThumbnail,
           imageSize: sizingListItemImageThumbnail || 56,
           style: {
@@ -158,42 +219,42 @@ var ListItem = function ListItem(_ref) {
         })
       })]
     }), /*#__PURE__*/_jsxs("div", {
-      className: "\n        ".concat(cssClasses.PREFIX, "-item-right \n      "),
+      className: "".concat(prefix, "-right ").concat(showRightText || rightChildren || listType === ListItemTypes.ListItemOther ? 'noPaddingRight' : ''),
       onClick: onExceptImgClick,
       children: [/*#__PURE__*/_jsxs("div", {
-        className: "".concat(cssClasses.PREFIX, "-title-sub-warp"),
-        children: [subTitleUp && /*#__PURE__*/_jsx(Text, {
+        className: "".concat(prefix, "-title-sub-warp"),
+        children: [subTitleUp && subTitle && /*#__PURE__*/_jsx(Text, {
           size: "ContentC12Regular",
-          className: "".concat(cssClasses.PREFIX, "-item-subTitle"),
+          className: "".concat(prefix, "-subTitle"),
           children: subTitle
-        }), /*#__PURE__*/_jsx(Text, {
+        }), title && /*#__PURE__*/_jsx(Text, {
           size: "ContentC14Bold",
-          className: "".concat(cssClasses.PREFIX, "-item-title     \n               ").concat(subTitle ? 'line1' : 'line2', " \n              }"),
+          className: "".concat(prefix, "-title ").concat(subTitle ? 'line1' : 'line2'),
           children: title
-        }), !subTitleUp && /*#__PURE__*/_jsx(Text, {
+        }), !subTitleUp && subTitle && /*#__PURE__*/_jsx(Text, {
           size: "ContentC12Regular",
-          className: "".concat(cssClasses.PREFIX, "-item-subTitle"),
+          className: "".concat(prefix, "-subTitle"),
           children: subTitle
         }), !isEmpty(subIconObj) && /*#__PURE__*/_jsxs("div", {
-          className: "".concat(cssClasses.PREFIX, "-sub-icon"),
+          className: "".concat(prefix, "-sub-icon"),
           children: [/*#__PURE__*/_jsx(Icon, {
             name: subIconObj.iconName,
             color: colorListItemIconSubtle,
             size: sizingListItemImageIcon || 20
           }), /*#__PURE__*/_jsx(Text, {
             size: "ContentC12Regular",
-            className: "".concat(cssClasses.PREFIX, "-sub-icon-title"),
+            className: "".concat(prefix, "-sub-icon-title"),
             children: subIconObj.value
           })]
-        })]
+        }), leftChildren]
       }), /*#__PURE__*/_jsxs("div", {
-        className: "".concat(cssClasses.PREFIX, "-status-warp"),
+        className: "".concat(prefix, "-status-warp"),
         children: [showToggle && /*#__PURE__*/_jsx(Toggle, {
           size: "small",
           checked: toggleChecked,
           onChange: onSwicthChange
         }), showLink && /*#__PURE__*/_jsx(TextLink, {
-          className: "".concat(cssClasses.PREFIX, "-right-link"),
+          className: "".concat(prefix, "-right-link"),
           type: TextLinkEnum.default,
           text: LinkName,
           onClick: onTextLinkClick
@@ -202,7 +263,7 @@ var ListItem = function ListItem(_ref) {
           size: sizingListItemIconIcon,
           color: statusIconColor
         }), showRightBtn && /*#__PURE__*/_jsx(Button, {
-          className: "".concat(cssClasses.PREFIX, "-right-btn"),
+          className: "".concat(prefix, "-right-btn"),
           onClick: function onClick(e) {
             e.stopPropagation();
             if (onRightBtnClick) {
@@ -219,7 +280,11 @@ var ListItem = function ListItem(_ref) {
               onRightIconClick();
             }
           }
-        })]
+        }), showRightText && /*#__PURE__*/_jsx(Text, {
+          className: "".concat(prefix, "-right-title"),
+          size: "TitleT14Bold",
+          children: rightText
+        }), rightChildren]
       })]
     })]
   }));

package/es/components/ListItem/style/index.less

@@ -1,14 +1,47 @@
 @import './variables.less';
+@component: list-item;
 
-.@{prefix}-list-item {
+.@{prefix}-@{component} {
   display: flex;
   flex-direction: row;
   align-items: center;
   overflow: hidden;
 
-  .@{prefix}-item-left {
+  &.default {
+    justify-content: space-between;
+
+    .@{prefix}-@{component}-title {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-box-orient: vertical;
+
+      &.line1 {
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      &.line2 {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+    }
+
+    .@{prefix}-@{component}-subTitle {
+      display: block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .@{prefix}-@{component}-left {
 
-    .@{prefix}-icon-container {
+    .@{prefix}-@{component}-icon-container {
       width: 80px;
       height: 80px;
       display: flex;
@@ -17,7 +50,7 @@
       flex-shrink: 0;
     }
 
-    .@{prefix}-image-container {
+    .@{prefix}-@{component}-image-container {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -27,7 +60,7 @@
 
   }
 
-  .@{prefix}-item-right {
+  .@{prefix}-@{component}-right {
     display: flex;
     flex: 1;
     min-width: 0;
@@ -35,11 +68,11 @@
     align-items: center;
     justify-content: space-between;
 
-    .@{prefix}-title-sub-warp {
+    .@{prefix}-@{component}-title-sub-warp {
       flex: 1;
       overflow: hidden;
 
-      .@{prefix}-item-title {
+      .@{prefix}-@{component}-title {
         display: block;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -60,7 +93,7 @@
         }
       }
 
-      .@{prefix}-item-subTitle {
+      .@{prefix}-@{component}-subTitle {
         display: block;
         white-space: nowrap;
         overflow: hidden;
@@ -68,7 +101,7 @@
       }
     }
 
-    .@{prefix}-sub-icon {
+    .@{prefix}-@{component}-sub-icon {
       display: flex;
       align-items: center;
     }

package/es/components/Modal/designTokens.d.ts

@@ -1,31 +1,22 @@
-declare const designTokens: {
+declare const useDesignTokens: () => {
     borderRadiusLG: any;
     titleColor: any;
     contentBg: any;
     headerBg: any;
     colorText: any;
     colorBgMask: any;
+    colorIcon: any;
 };
-declare const otherDesignTokens: {
+declare const useOtherDesignTokens: () => {
     width: string;
-    spacingModalCardPaddingTop: any;
-    spacingModalButtonStickyPaddingVertical: any;
-    spacingModalCardVerticalGap: any;
-    spacingModalCardPaddingHorizontal: any;
+    spacingModalCardPaddingTop: number;
+    spacingModalButtonStickyPaddingVertical: number;
+    spacingModalCardVerticalGap: number;
+    spacingModalCardPaddingHorizontal: number;
+    spacingModalButtonStickyPaddingHorizontal: number;
+    spacingModalCardPaddingBottom: number;
 };
-declare const commonToken: {
+declare const useCommonToken: () => {
     [x: string]: string | number;
 };
-declare const styleToken: {
-    [x: string]: string | number;
-};
-declare const stickyFooterStyleToken: {
-    [x: string]: string | number;
-};
-declare const stickyHeaderFooterStyleToken: {
-    [x: string]: string | number;
-};
-declare const stickyHeaderStyleToken: {
-    [x: string]: string | number;
-};
-export { designTokens, otherDesignTokens, styleToken, stickyFooterStyleToken, stickyHeaderStyleToken, stickyHeaderFooterStyleToken, commonToken };
+export { useDesignTokens, useOtherDesignTokens, useCommonToken };

package/es/components/Modal/designTokens.js

@@ -1,35 +1,44 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { getToken } from "../../utils/tokenHelper";
+import { useDynamicTokens } from "../../utils";
+import { wSacle } from "../../utils/scaleTool";
 import { cssClasses } from "../../constants";
 var prefixCls = cssClasses.PREFIX + '-modal';
-var designTokens = {
-  borderRadiusLG: getToken('borderRadiusModal'),
-  // 圆角
-  titleColor: getToken('colorModalTextHeader'),
-  // header文本颜色
-  contentBg: getToken('colorModalBackground'),
-  // 背景
-  headerBg: getToken('colorModalBackground'),
-  // 背景
-  colorText: getToken('colorModalTextBody'),
-  // 内容文本颜色
-  colorBgMask: getToken('colorModalOverlay') // 遮罩颜色
+var useDesignTokens = function useDesignTokens() {
+  var getToken = useDynamicTokens();
+  var designTokens = {
+    borderRadiusLG: getToken('borderRadiusModal'),
+    // 圆角
+    titleColor: getToken('colorModalTextHeader'),
+    // header文本颜色
+    contentBg: getToken('colorModalBackground'),
+    // 背景
+    headerBg: getToken('colorModalBackground'),
+    // 背景
+    colorText: getToken('colorModalTextBody'),
+    // 内容文本颜色
+    colorBgMask: getToken('colorModalOverlay'),
+    // 遮罩颜色
+    colorIcon: getToken('colorModalIcon') // icon颜色
+  };
+  return designTokens;
 };
-var otherDesignTokens = {
-  width: "calc(100vw - ".concat(getToken('spacingModalPaddingHorizontal'), "px - ").concat(getToken('spacingModalPaddingHorizontal'), "px)"),
-  // 宽度
-  spacingModalCardPaddingTop: getToken('spacingModalCardPaddingTop'),
-  spacingModalButtonStickyPaddingVertical: getToken('spacingModalButtonStickyPaddingVertical'),
-  spacingModalCardVerticalGap: getToken('spacingModalCardVerticalGap'),
-  spacingModalCardPaddingHorizontal: getToken('spacingModalCardPaddingHorizontal')
+var useOtherDesignTokens = function useOtherDesignTokens() {
+  var getToken = useDynamicTokens();
+  var otherDesignTokens = {
+    width: "calc(100vw - ".concat(wSacle(getToken('spacingModalPaddingHorizontal')), "px - ").concat(wSacle(getToken('spacingModalPaddingHorizontal')), "px)"),
+    // 宽度
+    spacingModalCardPaddingTop: wSacle(getToken('spacingModalCardPaddingTop')),
+    spacingModalButtonStickyPaddingVertical: wSacle(getToken('spacingModalButtonStickyPaddingVertical')),
+    spacingModalCardVerticalGap: wSacle(getToken('spacingModalCardVerticalGap')),
+    spacingModalCardPaddingHorizontal: wSacle(getToken('spacingModalCardPaddingHorizontal')),
+    spacingModalButtonStickyPaddingHorizontal: wSacle(getToken('spacingModalButtonStickyPaddingHorizontal')),
+    spacingModalCardPaddingBottom: wSacle(getToken('spacingModalCardPaddingBottom'))
+  };
+  return otherDesignTokens;
 };
-var commonToken = _defineProperty(_defineProperty({}, "--".concat(prefixCls, "-footer-margin-top"), 0), "--".concat(prefixCls, "-footer-padding"), "".concat(getToken('spacingModalButtonPaddingTop'), "px 0 0"));
-// header content footer都随滚动条滚
-var styleToken = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "--".concat(prefixCls, "-content-padding"), "".concat(otherDesignTokens.spacingModalCardPaddingTop, "px ").concat(otherDesignTokens.spacingModalCardPaddingHorizontal, "px ").concat(getToken('spacingModalCardPaddingBottom'), "px ").concat(otherDesignTokens.spacingModalCardPaddingHorizontal, "px")), "--".concat(prefixCls, "-footer-border-top"), 'none'), "--".concat(prefixCls, "-footer-padding"), 0), "--".concat(prefixCls, "-body-padding"), "".concat(otherDesignTokens.spacingModalCardVerticalGap, "px 0")), "--".concat(prefixCls, "-header-margin-bottom"), 0);
-// header content都随滚动条滚,  footer不滚
-var stickyFooterStyleToken = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "--".concat(prefixCls, "-content-padding"), "".concat(otherDesignTokens.spacingModalCardPaddingTop, "px ").concat(otherDesignTokens.spacingModalCardPaddingHorizontal, "px ").concat(40 + getToken('spacingModalButtonStickyPaddingVertical') + getToken('spacingModalButtonStickyPaddingHorizontal'), "px ").concat(otherDesignTokens.spacingModalCardPaddingHorizontal, "px")), "--".concat(prefixCls, "-footer-padding"), "".concat(otherDesignTokens.spacingModalButtonStickyPaddingVertical, "px ").concat(getToken('spacingModalButtonStickyPaddingHorizontal'), "px")), "--".concat(prefixCls, "-footer-border-top"), '1px solid #E1E1E1'), "--".concat(prefixCls, "-body-padding"), "".concat(otherDesignTokens.spacingModalCardVerticalGap, "px 0")), "--".concat(prefixCls, "-header-margin-bottom"), 0);
-// content随滚动条滚,  header和footer不滚
-var stickyHeaderFooterStyleToken = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "--".concat(prefixCls, "-content-padding"), "".concat(otherDesignTokens.spacingModalCardPaddingTop, "px ").concat(otherDesignTokens.spacingModalCardPaddingHorizontal, "px ").concat(40 + getToken('spacingModalButtonStickyPaddingVertical') + getToken('spacingModalButtonStickyPaddingHorizontal'), "px ").concat(otherDesignTokens.spacingModalCardPaddingHorizontal, "px")), "--".concat(prefixCls, "-footer-padding"), "".concat(otherDesignTokens.spacingModalButtonStickyPaddingVertical, "px ").concat(getToken('spacingModalButtonStickyPaddingHorizontal'), "px")), "--".concat(prefixCls, "-footer-border-top"), '1px solid #E1E1E1'), "--".concat(prefixCls, "-body-padding"), 0), "--".concat(prefixCls, "-header-margin-bottom"), "".concat(otherDesignTokens.spacingModalCardVerticalGap, "px"));
-// content和footer随滚动条滚,  header不滚
-var stickyHeaderStyleToken = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "--".concat(prefixCls, "-content-padding"), "0 ".concat(otherDesignTokens.spacingModalCardPaddingHorizontal, "px ").concat(getToken('spacingModalCardPaddingBottom'), "px ").concat(otherDesignTokens.spacingModalCardPaddingHorizontal, "px")), "--".concat(prefixCls, "-footer-padding"), "".concat(otherDesignTokens.spacingModalCardVerticalGap, "px 0 0")), "--".concat(prefixCls, "-footer-border-top"), 'none'), "--".concat(prefixCls, "-body-padding"), "".concat(otherDesignTokens.spacingModalCardPaddingTop * 2 + 26, "px 0 0 0")), "--".concat(prefixCls, "-header-margin-bottom"), 0), "--".concat(prefixCls, "-header-padding"), "".concat(otherDesignTokens.spacingModalCardPaddingTop, "px ").concat(otherDesignTokens.spacingModalCardPaddingHorizontal, "px"));
-export { designTokens, otherDesignTokens, styleToken, stickyFooterStyleToken, stickyHeaderStyleToken, stickyHeaderFooterStyleToken, commonToken };
+var useCommonToken = function useCommonToken() {
+  var getToken = useDynamicTokens();
+  var commonToken = _defineProperty(_defineProperty({}, "--".concat(prefixCls, "-footer-margin-top"), 0), "--".concat(prefixCls, "-footer-padding"), "".concat(wSacle(getToken('spacingModalButtonPaddingTop')), "px 0 0"));
+  return commonToken;
+};
+export { useDesignTokens, useOtherDesignTokens, useCommonToken };

package/es/components/Modal/index.js

@@ -3,13 +3,14 @@ import _ConfigProvider from "antd/es/config-provider";
 import "antd/es/modal/style";
 import _Modal from "antd/es/modal";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["title", "style", "children", "type", "breakpoint", "size", "prefix", "footerAlign", "footer"];
+var _excluded = ["title", "style", "children", "type", "breakpoint", "size", "prefix", "footerAlign", "footer", "className"];
 import React from 'react';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { theme } from "../../utils/theme";
 import { cssClasses } from "../../constants";
-import { designTokens, otherDesignTokens, stickyFooterStyleToken, styleToken, stickyHeaderStyleToken, stickyHeaderFooterStyleToken, commonToken } from "./designTokens";
+import { useDesignTokens, useOtherDesignTokens, useCommonToken } from "./designTokens";
 import Text from "../Text";
 import "./style/index.less";
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
@@ -29,18 +30,31 @@ var Modal = function Modal(props) {
     footerAlign = _props$footerAlign === void 0 ? 'right' : _props$footerAlign,
     _props$footer = props.footer,
     footer = _props$footer === void 0 ? null : _props$footer,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
     attr = _objectWithoutProperties(props, _excluded);
+  var designTokens = useDesignTokens();
+  var otherDesignTokens = useOtherDesignTokens();
+  var commonToken = useCommonToken();
   var spacingModalCardPaddingTop = otherDesignTokens.spacingModalCardPaddingTop,
-    spacingModalButtonStickyPaddingVertical = otherDesignTokens.spacingModalButtonStickyPaddingVertical;
+    spacingModalButtonStickyPaddingVertical = otherDesignTokens.spacingModalButtonStickyPaddingVertical,
+    spacingModalCardPaddingHorizontal = otherDesignTokens.spacingModalCardPaddingHorizontal;
+
+  // header content footer都随滚动条滚
+  var styleToken = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "--".concat(prefix, "-content-padding"), "".concat(otherDesignTokens.spacingModalCardPaddingTop, "px ").concat(otherDesignTokens.spacingModalCardPaddingHorizontal, "px ").concat(otherDesignTokens.spacingModalCardPaddingBottom, "px ").concat(otherDesignTokens.spacingModalCardPaddingHorizontal, "px")), "--".concat(prefix, "-footer-border-top"), 'none'), "--".concat(prefix, "-footer-padding"), 0), "--".concat(prefix, "-body-padding"), "".concat(otherDesignTokens.spacingModalCardVerticalGap, "px 0")), "--".concat(prefix, "-header-margin-bottom"), 0);
+  // header content都随滚动条滚,  footer不滚
+  var stickyFooterStyleToken = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "--".concat(prefix, "-content-padding"), "".concat(otherDesignTokens.spacingModalCardPaddingTop, "px ").concat(otherDesignTokens.spacingModalCardPaddingHorizontal, "px ").concat(40 + otherDesignTokens.spacingModalButtonStickyPaddingVertical + otherDesignTokens.spacingModalButtonStickyPaddingHorizontal, "px ").concat(otherDesignTokens.spacingModalCardPaddingHorizontal, "px")), "--".concat(prefix, "-footer-padding"), "".concat(otherDesignTokens.spacingModalButtonStickyPaddingVertical, "px ").concat(otherDesignTokens.spacingModalButtonStickyPaddingHorizontal, "px")), "--".concat(prefix, "-footer-border-top"), '1px solid #E1E1E1'), "--".concat(prefix, "-body-padding"), "".concat(otherDesignTokens.spacingModalCardVerticalGap, "px 0")), "--".concat(prefix, "-header-margin-bottom"), 0);
+  // content随滚动条滚,  header和footer不滚
+  var stickyHeaderFooterStyleToken = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "--".concat(prefix, "-content-padding"), "".concat(otherDesignTokens.spacingModalCardPaddingTop, "px ").concat(otherDesignTokens.spacingModalCardPaddingHorizontal, "px ").concat(40 + otherDesignTokens.spacingModalButtonStickyPaddingVertical + otherDesignTokens.spacingModalButtonStickyPaddingHorizontal, "px ").concat(otherDesignTokens.spacingModalCardPaddingHorizontal, "px")), "--".concat(prefix, "-footer-padding"), "".concat(otherDesignTokens.spacingModalButtonStickyPaddingVertical, "px ").concat(otherDesignTokens.spacingModalButtonStickyPaddingHorizontal, "px")), "--".concat(prefix, "-footer-border-top"), '1px solid #E1E1E1'), "--".concat(prefix, "-body-padding"), 0), "--".concat(prefix, "-header-margin-bottom"), "".concat(otherDesignTokens.spacingModalCardVerticalGap, "px"));
+  // content和footer随滚动条滚,  header不滚
+  var stickyHeaderStyleToken = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "--".concat(prefix, "-content-padding"), "0 ".concat(otherDesignTokens.spacingModalCardPaddingHorizontal, "px ").concat(otherDesignTokens.spacingModalCardPaddingBottom, "px ").concat(otherDesignTokens.spacingModalCardPaddingHorizontal, "px")), "--".concat(prefix, "-footer-padding"), "".concat(otherDesignTokens.spacingModalCardVerticalGap, "px 0 0")), "--".concat(prefix, "-footer-border-top"), 'none'), "--".concat(prefix, "-body-padding"), "".concat(otherDesignTokens.spacingModalCardPaddingTop * 2 + 26, "px 0 0 0")), "--".concat(prefix, "-header-margin-bottom"), 0), "--".concat(prefix, "-header-padding"), "".concat(otherDesignTokens.spacingModalCardPaddingTop, "px ").concat(otherDesignTokens.spacingModalCardPaddingHorizontal, "px"));
   var useCustomButtonStyle = function useCustomButtonStyle() {
     var hashId = useStyleRegister({
       theme: theme,
-      token: {
-        baseColor: 'blue'
-      },
+      token: {},
       path: ["".concat(prefix)]
     }, function () {
-      return "\n      .".concat(prefix, "-sticky-headers .").concat(prefix, "-header {\n      }\n      .").concat(prefix, "-sticky-header.").concat(prefix, "-sticky-footer .").concat(prefix, "-body {\n        overflow-y: auto;\n        -ms-overflow-style: none;\n        scrollbar-width: none;\n        max-height: calc(80vh - ").concat(spacingModalCardPaddingTop * 2, "px - 26px - ").concat(spacingModalButtonStickyPaddingVertical * 2, "px - 40px - 16px);\n      }\n      .").concat(prefix, "-sticky-header.").concat(prefix, "-sticky-footer .").concat(prefix, "-body::-webkit-scrollbar {\n        display: none;\n      }\n      .").concat(prefix, "-left .").concat(prefix, "-footer {\n        text-align: left;\n      }\n      .").concat(prefix, "-right .").concat(prefix, "-footer {\n        text-align: right;\n      }\n      .").concat(prefix, "-center .").concat(prefix, "-footer {\n        text-align: center;\n      }\n    ");
+      return "\n      .".concat(prefix, "-sticky-headers .").concat(prefix, "-header {\n      }\n      .").concat(prefix, "-sticky-header.").concat(prefix, "-sticky-footer .").concat(prefix, "-body {\n        overflow-y: auto;\n        -ms-overflow-style: none;\n        scrollbar-width: none;\n        max-height: calc(80vh - ").concat(spacingModalCardPaddingTop * 2, "px - 26px - ").concat(spacingModalButtonStickyPaddingVertical * 2, "px - 40px - 16px);\n      }\n      .").concat(prefix, "-sticky-header.").concat(prefix, "-sticky-footer .").concat(prefix, "-body::-webkit-scrollbar {\n        display: none;\n      }\n      .").concat(prefix, "-left .").concat(prefix, "-footer {\n        text-align: left;\n      }\n      .").concat(prefix, "-right .").concat(prefix, "-footer {\n        text-align: right;\n      }\n      .").concat(prefix, "-center .").concat(prefix, "-footer {\n        text-align: center;\n      }\n      .").concat(prefix, " .").concat(prefix, "-close {\n        top: ").concat(spacingModalCardPaddingHorizontal - 4, "px\n      }\n      .").concat(prefix, "-mobile .").concat(prefix, "-close-x {\n        font-size: 24px;\n      }\n      .").concat(prefix, "-desktop .").concat(prefix, "-close-x {\n        font-size: 16px;\n      }\n    ");
     });
     return hashId;
   };
@@ -78,18 +92,17 @@ var Modal = function Modal(props) {
         cssVar: true,
         hashed: false
       },
-      children: /*#__PURE__*/_jsx(_Modal, _objectSpread(_objectSpread({
+      children: /*#__PURE__*/_jsx(_Modal, _objectSpread(_objectSpread({}, attr), {}, {
         width: breakpoint === 'desktop' ? size : otherDesignTokens.width,
         title: /*#__PURE__*/_jsx(Text, {
           size: "TitleT21Bold",
           children: title
         }),
+        footer: footer,
+        className: "".concat(stickyFooterClass, " ").concat(prefix, "-").concat(breakpoint, " ").concat(prefix, "-").concat(footerAlign, " ").concat(stickyHeaderClass, " ").concat(stickyHeaderFooterClass, " ").concat(className),
         style: _objectSpread(_objectSpread(_objectSpread({
           top: '10%'
         }, commonStyle), customStyle), style),
-        footer: footer,
-        className: "".concat(stickyFooterClass, " ").concat(prefix, "-").concat(breakpoint, " ").concat(prefix, "-").concat(footerAlign, " ").concat(stickyHeaderClass, " ").concat(stickyHeaderFooterClass)
-      }, attr), {}, {
         children: /*#__PURE__*/_jsx(Text, {
           size: "ContentC14Regular",
           children: children

package/es/components/Navigation/designTokens.d.ts

@@ -1,10 +1,11 @@
-declare const designTokens: {
-    spacingTopNavigationPaddingHorizontal: any;
-    spacingTopNavigationPaddingBottom: any;
-    spacingTopNavigationHorizontalGap: any;
-    spacingTopNavigationIconButtonHorizontalGap: any;
-    spacingTopNavigationTextLinkPaddingRight: any;
-    spacingTopNavigationTitlePaddingVertical: any;
+declare const useDesignTokens: () => {
+    spacingTopNavigationPaddingHorizontal: number;
+    spacingTopNavigationPaddingBottom: number;
+    spacingTopNavigationPaddingTop: number;
+    spacingTopNavigationHorizontalGap: number;
+    spacingTopNavigationIconButtonHorizontalGap: number;
+    spacingTopNavigationTextLinkPaddingRight: number;
+    spacingTopNavigationTitlePaddingVertical: number;
     colorTopNavigationTitleStandard: any;
     colorTopNavigationTitleInverse: any;
     colorTopNavigationGradient: any;
@@ -13,4 +14,4 @@ declare const designTokens: {
     colorTopNavigationBackgroundHaze: any;
     colorTopNavigationBackgroundInverse: any;
 };
-export default designTokens;
+export { useDesignTokens };

package/es/components/Navigation/designTokens.js

@@ -1,19 +1,25 @@
-import TokenManager from "../../utils/tokenManager";
-var designTokens = {
-  spacingTopNavigationPaddingHorizontal: TokenManager.tokenKey('spacingTopNavigationPaddingHorizontal'),
-  // 左右padding
-  spacingTopNavigationPaddingBottom: TokenManager.tokenKey('spacingTopNavigationPaddingBottom'),
-  //底部padding
-  spacingTopNavigationHorizontalGap: TokenManager.tokenKey('spacingTopNavigationHorizontalGap'),
-  spacingTopNavigationIconButtonHorizontalGap: TokenManager.tokenKey('spacingTopNavigationIconButtonHorizontalGap'),
-  spacingTopNavigationTextLinkPaddingRight: TokenManager.tokenKey('spacingTopNavigationTextLinkPaddingRight'),
-  spacingTopNavigationTitlePaddingVertical: TokenManager.tokenKey('spacingTopNavigationTitlePaddingVertical'),
-  colorTopNavigationTitleStandard: TokenManager.tokenKey('colorTopNavigationTitleStandard'),
-  colorTopNavigationTitleInverse: TokenManager.tokenKey('colorTopNavigationTitleInverse'),
-  colorTopNavigationGradient: TokenManager.tokenKey('colorTopNavigationGradient'),
-  colorTopNavigationBackground: TokenManager.tokenKey('colorTopNavigationBackground'),
-  colorTopNavigationBorderBottom: TokenManager.tokenKey('colorTopNavigationBorderBottom'),
-  colorTopNavigationBackgroundHaze: TokenManager.tokenKey('colorTopNavigationBackgroundHaze'),
-  colorTopNavigationBackgroundInverse: TokenManager.tokenKey('colorTopNavigationBackgroundInverse')
+import { wSacle } from "../../utils/scaleTool";
+import { useDynamicTokens } from "../../utils";
+var useDesignTokens = function useDesignTokens() {
+  var getToken = useDynamicTokens();
+  var designTokens = {
+    spacingTopNavigationPaddingHorizontal: wSacle(getToken('spacingTopNavigationPaddingHorizontal')),
+    // 左右padding
+    spacingTopNavigationPaddingBottom: wSacle(getToken('spacingTopNavigationPaddingBottom')),
+    //底部padding
+    spacingTopNavigationPaddingTop: wSacle(getToken('spacingTopNavigationPaddingTop')),
+    spacingTopNavigationHorizontalGap: wSacle(getToken('spacingTopNavigationHorizontalGap')),
+    spacingTopNavigationIconButtonHorizontalGap: wSacle(getToken('spacingTopNavigationIconButtonHorizontalGap')),
+    spacingTopNavigationTextLinkPaddingRight: wSacle(getToken('spacingTopNavigationTextLinkPaddingRight')),
+    spacingTopNavigationTitlePaddingVertical: wSacle(getToken('spacingTopNavigationTitlePaddingVertical')),
+    colorTopNavigationTitleStandard: getToken('colorTopNavigationTitleStandard'),
+    colorTopNavigationTitleInverse: getToken('colorTopNavigationTitleInverse'),
+    colorTopNavigationGradient: getToken('colorTopNavigationGradient'),
+    colorTopNavigationBackground: getToken('colorTopNavigationBackground'),
+    colorTopNavigationBorderBottom: getToken('colorTopNavigationBorderBottom'),
+    colorTopNavigationBackgroundHaze: getToken('colorTopNavigationBackgroundHaze'),
+    colorTopNavigationBackgroundInverse: getToken('colorTopNavigationBackgroundInverse')
+  };
+  return designTokens;
 };
-export default designTokens;
+export { useDesignTokens };

package/es/components/Navigation/index.d.ts

@@ -17,6 +17,7 @@ export interface INavigationProps {
     rightIcons?: RightIcon[];
     leftIconName?: string;
     imgBackground?: boolean;
+    hidegoback?: boolean;
     rightLink?: RightLinkConfig;
     titleIconBadge?: TitleIconBadgeConfig;
     title?: string;