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

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

@@ -1,11 +1,11 @@
-declare const designTokens: {
+declare const useDesignTokens: () => {
     headerBg: string;
     headerPadding: string;
     contentPadding: string;
 };
-declare const designBorderTokens: {
+declare const useDesignBorderTokens: () => {
     headerBg: string;
     headerPadding: string;
     contentPadding: string;
 };
-export { designTokens, designBorderTokens };
+export { useDesignTokens, useDesignBorderTokens };

package/es/components/Accordion/designTokens.js

@@ -1,16 +1,24 @@
-import { getToken } from "../../utils/tokenHelper";
-var designTokens = {
-  headerBg: 'transparent',
-  // header背景色
-  headerPadding: "".concat(getToken('spacingAccordionTitlePaddingVertical'), "px 0"),
-  // header边距
-  contentPadding: "".concat(getToken('spacingAccordionBodyPaddingBottom'), "px 0") // content边距
+import { useDynamicTokens } from "../../utils";
+var useDesignTokens = function useDesignTokens() {
+  var getToken = useDynamicTokens();
+  var designTokens = {
+    headerBg: 'transparent',
+    // header背景色
+    headerPadding: "".concat(getToken('spacingAccordionTitlePaddingVertical'), "px 0"),
+    // header边距
+    contentPadding: "".concat(getToken('spacingAccordionBodyPaddingBottom'), "px 0") // content边距
+  };
+  return designTokens;
 };
-var designBorderTokens = {
-  headerBg: '#F5F5F8',
-  // header背景色
-  headerPadding: "".concat(getToken('spacingAccordionTitlePaddingVertical'), "px 16px"),
-  // header边距
-  contentPadding: "".concat(getToken('spacingAccordionBodyPaddingBottom'), "px 16px") // content边距
+var useDesignBorderTokens = function useDesignBorderTokens() {
+  var getToken = useDynamicTokens();
+  var designBorderTokens = {
+    headerBg: '#F5F5F8',
+    // header背景色
+    headerPadding: "".concat(getToken('spacingAccordionTitlePaddingVertical'), "px 16px"),
+    // header边距
+    contentPadding: "".concat(getToken('spacingAccordionBodyPaddingBottom'), "px 16px") // content边距
+  };
+  return designBorderTokens;
 };
-export { designTokens, designBorderTokens };
+export { useDesignTokens, useDesignBorderTokens };

package/es/components/Accordion/index.js

@@ -4,11 +4,11 @@ import "antd/es/collapse/style";
 import _Collapse from "antd/es/collapse";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["prefixCls", "bordered", "items"];
+var _excluded = ["prefixCls", "bordered", "items", "className"];
 import React from 'react';
 // import { useStyleRegister } from '@ant-design/cssinjs';
 // import { theme } from '../../utils/theme';
-import { designTokens, designBorderTokens } from "./designTokens";
+import { useDesignTokens, useDesignBorderTokens } from "./designTokens";
 import { BASE_CLASS_PREFIX } from "../../constants";
 import Text from "../Text";
 import "./style/index.less";
@@ -20,11 +20,13 @@ var Accordion = function Accordion(props) {
     bordered = _props$bordered === void 0 ? true : _props$bordered,
     _props$items = props.items,
     items = _props$items === void 0 ? [] : _props$items,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
     attr = _objectWithoutProperties(props, _excluded);
   // const useCustomButtonStyle = () => {
   //   const hashId = useStyleRegister({
   //     theme: theme,
-  //     token: { baseColor: 'blue' },
+  //     token: {},
   //     path: [`${prefixCls}`],
   //   }, () => `
   //     .${prefixCls}-header {
@@ -58,6 +60,8 @@ var Accordion = function Accordion(props) {
       })
     };
   });
+  var designTokens = useDesignTokens();
+  var designBorderTokens = useDesignBorderTokens();
   var showBorder = bordered ? designBorderTokens : designTokens;
   return /*#__PURE__*/_jsx(_ConfigProvider, {
     prefixCls: BASE_CLASS_PREFIX,
@@ -68,7 +72,7 @@ var Accordion = function Accordion(props) {
     },
     children: /*#__PURE__*/_jsx(_Collapse, _objectSpread({
       items: newItems,
-      className: "".concat(prefixCls),
+      className: "".concat(prefixCls, " ").concat(className),
       showArrow: false,
       bordered: bordered
     }, attr))

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

@@ -1,6 +1,6 @@
-declare const designTokens: {
+declare const useDesignTokens: () => {
     colorCardTextTitle: any;
     colorCardTextPriceStrikethrough: any;
     colorCardTextPrice: any;
 };
-export { designTokens };
+export { useDesignTokens };

package/es/components/Amount/designTokens.js

@@ -1,9 +1,13 @@
-import { getToken } from "../../utils/tokenHelper";
-var designTokens = {
-  colorCardTextTitle: getToken('colorCardTextTitle'),
-  // title颜色
-  colorCardTextPriceStrikethrough: getToken('colorCardTextPriceStrikethrough'),
-  // 划线价颜色
-  colorCardTextPrice: getToken('colorCardTextPrice') // 金额颜色
+import { useDynamicTokens } from "../../utils";
+var useDesignTokens = function useDesignTokens() {
+  var getToken = useDynamicTokens();
+  var designTokens = {
+    colorCardTextTitle: getToken('colorCardTextTitle'),
+    // title颜色
+    colorCardTextPriceStrikethrough: getToken('colorCardTextPriceStrikethrough'),
+    // 划线价颜色
+    colorCardTextPrice: getToken('colorCardTextPrice') // 金额颜色
+  };
+  return designTokens;
 };
-export { designTokens };
+export { useDesignTokens };

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

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import './style/index.less';
 export type Size = 'XS' | 'S' | 'M' | 'L' | 'LG';
 export type Position = 'up' | 'right' | 'down' | 'left';
@@ -12,12 +12,5 @@ export interface AmountProps {
     onDropDownClick?: React.MouseEventHandler;
     [key: string]: any;
 }
-export default class Amount extends PureComponent<AmountProps> {
-    static defaultProps: {
-        size: string;
-        title: string;
-        position: string;
-        prefixCls: string;
-    };
-    render(): React.JSX.Element;
-}
+declare const Amount: (props: AmountProps) => React.JSX.Element;
+export default Amount;

package/es/components/Amount/index.js

@@ -1,144 +1,130 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["children", "className", "size", "title", "position", "prefixCls", "priceStrikethrough", "style", "priceColor", "textColor", "colorStrikethrough", "onDropDownClick", "showIcon", "iconType"];
-import React, { PureComponent } from 'react';
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "className", "size", "title", "position", "prefixCls", "priceStrikethrough", "style", "priceColor", "textColor", "strikethroughColor", "onDropDownClick", "showIcon", "iconType", "onClick", "onMouseDown"];
+import React from 'react';
 import { default as classNames } from 'classnames';
-import { designTokens } from "./designTokens";
+import { useDesignTokens } from "./designTokens";
 import { cssClasses } from "../../constants";
 import { Text, Icon } from "../index";
 import "./style/index.less";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-var Amount = /*#__PURE__*/function (_PureComponent) {
-  _inherits(Amount, _PureComponent);
-  var _super = _createSuper(Amount);
-  function Amount() {
-    _classCallCheck(this, Amount);
-    return _super.apply(this, arguments);
-  }
-  _createClass(Amount, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        children = _this$props.children,
-        className = _this$props.className,
-        size = _this$props.size,
-        title = _this$props.title,
-        position = _this$props.position,
-        prefixCls = _this$props.prefixCls,
-        priceStrikethrough = _this$props.priceStrikethrough,
-        style = _this$props.style,
-        priceColor = _this$props.priceColor,
-        textColor = _this$props.textColor,
-        colorStrikethrough = _this$props.colorStrikethrough,
-        onDropDownClick = _this$props.onDropDownClick,
-        showIcon = _this$props.showIcon,
-        _this$props$iconType = _this$props.iconType,
-        iconType = _this$props$iconType === void 0 ? 'icon-a-Arrow-Down' : _this$props$iconType,
-        attr = _objectWithoutProperties(_this$props, _excluded);
-      var colorCardTextPrice = designTokens.colorCardTextPrice,
-        colorCardTextPriceStrikethrough = designTokens.colorCardTextPriceStrikethrough,
-        colorCardTextTitle = designTokens.colorCardTextTitle;
-      var baseProps = {
-        className: classNames(prefixCls, _defineProperty(_defineProperty({}, "".concat(prefixCls, "-size-").concat(size), size), "".concat(prefixCls, "-position-").concat(position), position), className),
-        style: style
-      };
-      var getSize = function getSize(fontSize) {
-        switch (fontSize) {
-          case 'S':
-            return 'ContentC14Bold';
-          case 'M':
-            return 'TitleT15Bold';
-          case 'L':
-            return 'TitleT21Bold';
-          case 'LG':
-            return 'TitleT23Bold';
-          default:
-            return 'ContentC12Bold';
-        }
-      };
-      var TitleDom = function TitleDom() {
-        return /*#__PURE__*/_jsx(_Fragment, {
-          children: title === 'discount' ? /*#__PURE__*/_jsx(Text, {
-            size: "ContentC12Bold",
-            style: {
-              color: textColor || '#D01660'
-            },
-            children: "Discount"
-          }) : /*#__PURE__*/_jsxs(Text, {
-            size: "ContentC12Regular",
-            style: {
-              color: textColor || colorCardTextTitle
-            },
-            children: [title, showIcon && /*#__PURE__*/_jsx(Icon, {
-              size: 12,
-              name: iconType,
-              onClick: onDropDownClick
-            })]
-          })
-        });
-      };
-      var PriceDom = function PriceDom() {
-        return /*#__PURE__*/_jsx(Text, {
-          size: getSize(size),
-          style: {
-            color: priceColor || colorCardTextPrice
-          },
-          children: children
-        });
-      };
-      var PriceStrikethroughDom = function PriceStrikethroughDom() {
-        return /*#__PURE__*/_jsx(Text, {
-          size: "ContentC12Strikethrough",
-          style: {
-            color: colorStrikethrough || colorCardTextPriceStrikethrough
-          },
-          children: priceStrikethrough
-        });
-      };
-      var positionLeft = function positionLeft() {
-        return /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(TitleDom, {}), /*#__PURE__*/_jsxs("div", {
-            children: [/*#__PURE__*/_jsx(PriceStrikethroughDom, {}), /*#__PURE__*/_jsx(PriceDom, {})]
-          })]
-        });
-      };
-      var positionRight = function positionRight() {
-        return /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(TitleDom, {}), /*#__PURE__*/_jsxs("div", {
-            children: [/*#__PURE__*/_jsx(PriceDom, {}), /*#__PURE__*/_jsx(PriceStrikethroughDom, {})]
-          })]
-        });
-      };
-      var positionUp = function positionUp() {
-        return /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(TitleDom, {}), /*#__PURE__*/_jsx(PriceStrikethroughDom, {}), /*#__PURE__*/_jsx(PriceDom, {})]
-        });
-      };
-      var positionDown = function positionDown() {
-        return /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(TitleDom, {}), /*#__PURE__*/_jsx(PriceDom, {}), /*#__PURE__*/_jsx(PriceStrikethroughDom, {})]
-        });
-      };
-      return /*#__PURE__*/_jsxs("span", _objectSpread(_objectSpread(_objectSpread({
-        onClick: this.props.onClick
-      }, baseProps), {}, {
-        onMouseDown: this.props.onMouseDown
-      }, attr), {}, {
-        children: [position === 'left' && positionLeft(), position === 'right' && positionRight(), position === 'up' && positionUp(), position === 'down' && positionDown()]
-      }));
+var Amount = function Amount(props) {
+  var children = props.children,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'L' : _props$size,
+    _props$title = props.title,
+    title = _props$title === void 0 ? 'Total' : _props$title,
+    _props$position = props.position,
+    position = _props$position === void 0 ? 'down' : _props$position,
+    _props$prefixCls = props.prefixCls,
+    prefixCls = _props$prefixCls === void 0 ? "".concat(cssClasses.PREFIX, "-amount") : _props$prefixCls,
+    priceStrikethrough = props.priceStrikethrough,
+    style = props.style,
+    priceColor = props.priceColor,
+    textColor = props.textColor,
+    strikethroughColor = props.strikethroughColor,
+    onDropDownClick = props.onDropDownClick,
+    _props$showIcon = props.showIcon,
+    showIcon = _props$showIcon === void 0 ? true : _props$showIcon,
+    _props$iconType = props.iconType,
+    iconType = _props$iconType === void 0 ? 'icon-a-Arrow-Down' : _props$iconType,
+    onClick = props.onClick,
+    onMouseDown = props.onMouseDown,
+    attr = _objectWithoutProperties(props, _excluded);
+  var designTokens = useDesignTokens();
+  var colorCardTextPrice = designTokens.colorCardTextPrice,
+    colorCardTextPriceStrikethrough = designTokens.colorCardTextPriceStrikethrough,
+    colorCardTextTitle = designTokens.colorCardTextTitle;
+  var baseProps = {
+    className: classNames(prefixCls, _defineProperty(_defineProperty({}, "".concat(prefixCls, "-size-").concat(size), size), "".concat(prefixCls, "-position-").concat(position), position), className),
+    style: style
+  };
+  var getSize = function getSize(fontSize) {
+    switch (fontSize) {
+      case 'S':
+        return 'ContentC14Bold';
+      case 'M':
+        return 'ContentC15Bold';
+      case 'L':
+        return 'ContentC21Bold';
+      case 'LG':
+        return 'ContentC23Bold';
+      default:
+        return 'ContentC12Bold';
     }
-  }]);
-  return Amount;
-}(PureComponent);
-_defineProperty(Amount, "defaultProps", {
-  size: 'L',
-  title: 'Total',
-  position: 'down',
-  prefixCls: cssClasses.PREFIX + '-amount'
-});
-export { Amount as default };
+  };
+  var TitleDom = function TitleDom() {
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: title === 'discount' ? /*#__PURE__*/_jsx(Text, {
+        size: "ContentC12Bold",
+        style: {
+          color: textColor || '#D01660'
+        },
+        children: "Discount"
+      }) : /*#__PURE__*/_jsxs(Text, {
+        size: "ContentC12Regular",
+        style: {
+          color: textColor || colorCardTextTitle
+        },
+        children: [title, showIcon && /*#__PURE__*/_jsx(Icon, {
+          size: 12,
+          name: iconType,
+          onClick: onDropDownClick
+        })]
+      })
+    });
+  };
+  var PriceDom = function PriceDom() {
+    return /*#__PURE__*/_jsx(Text, {
+      size: getSize(size),
+      style: {
+        color: priceColor || colorCardTextPrice
+      },
+      children: children
+    });
+  };
+  var PriceStrikethroughDom = function PriceStrikethroughDom() {
+    return /*#__PURE__*/_jsx(Text, {
+      size: "ContentC12Strikethrough",
+      style: {
+        color: strikethroughColor || colorCardTextPriceStrikethrough
+      },
+      children: priceStrikethrough
+    });
+  };
+  var positionLeft = function positionLeft() {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(TitleDom, {}), /*#__PURE__*/_jsxs("div", {
+        children: [/*#__PURE__*/_jsx(PriceStrikethroughDom, {}), /*#__PURE__*/_jsx(PriceDom, {})]
+      })]
+    });
+  };
+  var positionRight = function positionRight() {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(TitleDom, {}), /*#__PURE__*/_jsxs("div", {
+        children: [/*#__PURE__*/_jsx(PriceDom, {}), /*#__PURE__*/_jsx(PriceStrikethroughDom, {})]
+      })]
+    });
+  };
+  var positionUp = function positionUp() {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(TitleDom, {}), /*#__PURE__*/_jsx(PriceStrikethroughDom, {}), /*#__PURE__*/_jsx(PriceDom, {})]
+    });
+  };
+  var positionDown = function positionDown() {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(TitleDom, {}), /*#__PURE__*/_jsx(PriceDom, {}), /*#__PURE__*/_jsx(PriceStrikethroughDom, {})]
+    });
+  };
+  return /*#__PURE__*/_jsxs("span", _objectSpread(_objectSpread(_objectSpread({
+    onClick: onClick
+  }, baseProps), {}, {
+    onMouseDown: onMouseDown
+  }, attr), {}, {
+    children: [position === 'left' && positionLeft(), position === 'right' && positionRight(), position === 'up' && positionUp(), position === 'down' && positionDown()]
+  }));
+};
+export default Amount;

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

@@ -1,4 +1,19 @@
-declare const designTokens: {
+/**
+ * Button组件的设计Token系统
+ *
+ * 这里是dxp的UI token，缓存在本地的内置变量；
+ * 通过antd提供的ConfigProvider注入组件级token变量来实现gomo风格的UI组件。
+ *
+ * 样式定制实现方式（理论上可以通过2种方式来实现）：
+ * 1. 通过ConfigProvider注入组件级别的token变量（当前采用）
+ *    - 优点：不需要编写less文件，只需对齐变量值
+ *    - 缺点：可控细节较少，受限于antd提供的token
+ *
+ * 2. 直接编写less文件覆盖antd样式
+ *    - 优点：可控细节更多（相当于把  dxp 的 UI token 通过 less 的方式覆盖antd的样式）
+ *    - 缺点：需要了解组件DOM结构，维护成本高，优先选择第1种
+ */
+declare const useDesignTokens: () => {
     colorPrimary: any;
     colorPrimaryHover: any;
     colorPrimaryActive: any;
@@ -29,7 +44,7 @@ declare const designTokens: {
     paddingBlockSM: any;
     paddingBlockLG: any;
 };
-declare const inverseDesignTokens: {
+declare const useInverseDesignTokens: () => {
     colorPrimary: any;
     colorPrimaryHover: any;
     colorPrimaryActive: any;
@@ -63,4 +78,4 @@ declare const inverseDesignTokens: {
     paddingBlockSM: any;
     paddingBlockLG: any;
 };
-export { designTokens, inverseDesignTokens };
+export { useDesignTokens, useInverseDesignTokens };