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

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

@@ -1,12 +1,13 @@
 @import './variables.less';
+@component: drawer;
 
 // 添加iOS惯性滚动限制
-.@{prefix}-drawer-content {
+.@{prefix}-@{component}-content {
   -webkit-overflow-scrolling: touch;
   overscroll-behavior: contain;
 }
 
-.@{prefix}-drawer-mask {
+.@{prefix}-@{component}-mask {
   touch-action: none; // 阻止移动端触摸事件
   position: fixed;
   top: 0;
@@ -23,7 +24,7 @@
   }
 }
 
-.@{prefix}-drawer-content {
+.@{prefix}-@{component}-content {
   .transition-properties();
   position: fixed;
   left: 0;
@@ -44,27 +45,32 @@
     bottom: 0;
   }
 
-  .handle-bar {
+  .@{prefix}-@{component}-handle-bar {
     height: 4px;
     margin: 0 auto;
     border-radius: 4px;
   }
 
-  .@{prefix}-drawer-inner {
+  .@{prefix}-@{component}-inner {
     overflow: auto;
     flex: 1;
     min-height: 0;
     padding-bottom: 20px;
     /* 防止底部遮挡 */
-
   }
 
-  .close-warp {
+  .@{prefix}-@{component}-close-warp {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
   }
 
+  .drawer-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
 }
 
 // 混合 (Mixin)

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

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+interface GlobalTokenProviderProps {
+    children: ReactNode;
+    getToken?: (tokenName: string) => string | number | boolean | undefined;
+}
+/**
+ * 全局TokenProvider组件
+ * 用于在应用顶层提供TokenContext，避免在每个组件中重复创建TokenProvider
+ */
+declare const GlobalTokenProvider: React.FC<GlobalTokenProviderProps>;
+export default GlobalTokenProvider;

package/es/components/GlobalTokenProvider/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { TokenProvider } from "../../utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 全局TokenProvider组件
+ * 用于在应用顶层提供TokenContext，避免在每个组件中重复创建TokenProvider
+ */
+var GlobalTokenProvider = function GlobalTokenProvider(_ref) {
+  var children = _ref.children,
+    getToken = _ref.getToken;
+  return /*#__PURE__*/_jsx(TokenProvider, {
+    getToken: getToken,
+    children: children
+  });
+};
+export default GlobalTokenProvider;

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

@@ -1,6 +1,6 @@
-declare const designTokens: {
+declare const useDesignTokens: () => {
     colorIconButtonNeutral: any;
     colorIconButtonInverse: any;
-    sizingButtonIcon: any;
+    sizingButtonIcon: number;
 };
-export default designTokens;
+export { useDesignTokens };

package/es/components/Icon/designTokens.js

@@ -1,7 +1,12 @@
-import TokenManager from "../../utils/tokenManager";
-var designTokens = {
-  colorIconButtonNeutral: TokenManager.tokenKey('colorIconButtonNeutral'),
-  colorIconButtonInverse: TokenManager.tokenKey('colorIconButtonInverse'),
-  sizingButtonIcon: TokenManager.tokenKey('sizingButtonIcon')
+import { useDynamicTokens } from "../../utils";
+import { wSacle } from "../../utils/scaleTool";
+var useDesignTokens = function useDesignTokens() {
+  var getToken = useDynamicTokens();
+  var designTokens = {
+    colorIconButtonNeutral: getToken('colorIconButtonNeutral'),
+    colorIconButtonInverse: getToken('colorIconButtonInverse'),
+    sizingButtonIcon: wSacle(getToken('sizingButtonIcon'))
+  };
+  return designTokens;
 };
-export default designTokens;
+export { useDesignTokens };

package/es/components/Icon/index.js

@@ -1,11 +1,12 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["name", "color", "size", "inverse", "style"];
+var _excluded = ["name", "color", "size", "inverse", "style", "className"];
 import React from 'react';
 import MIcon from "./Icon";
-import designTokens from "./designTokens";
+import { useDesignTokens } from "./designTokens";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Icon = function Icon(props) {
+  var designTokens = useDesignTokens();
   var colorIconButtonInverse = designTokens.colorIconButtonInverse,
     colorIconButtonNeutral = designTokens.colorIconButtonNeutral,
     sizingButtonIcon = designTokens.sizingButtonIcon;
@@ -16,12 +17,15 @@ var Icon = function Icon(props) {
     _props$inverse = props.inverse,
     inverse = _props$inverse === void 0 ? false : _props$inverse,
     style = props.style,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
     rest = _objectWithoutProperties(props, _excluded);
   var mergeStyle = _objectSpread({
     color: color || (inverse ? colorIconButtonInverse : colorIconButtonNeutral),
     fontSize: size ? "".concat(size, "px") : ''
   }, style);
   return /*#__PURE__*/_jsx(MIcon, _objectSpread({
+    className: className,
     type: name,
     style: mergeStyle
   }, rest));

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

@@ -1,4 +1,4 @@
-declare const designTokens: {
+declare const useDesignTokens: () => {
     colorIconButtonNeutral: any;
     colorIconButtonInverse: any;
     sizingIconButtonMedium: any;
@@ -14,8 +14,7 @@ declare const designTokens: {
     colorIconButtonActive: any;
     transitionIconButton: string;
 };
-declare const otherDesignTokens: {
+declare const useOtherDesignTokens: () => {
     [x: string]: string;
 };
-export { designTokens, otherDesignTokens, };
-export default designTokens;
+export { useDesignTokens, useOtherDesignTokens, };

package/es/components/IconButton/designTokens.js

@@ -1,39 +1,45 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { getToken } from "../../utils/tokenHelper";
+import { useDynamicTokens } from "../../utils";
 import { cssClasses } from "../../constants";
 var prefixCls = cssClasses.PREFIX + '-icon-button';
+var transitionIconButton = '0.3s';
+var useDesignTokens = function useDesignTokens() {
+  var getToken = useDynamicTokens();
+  // 设计令牌定义
+  var designTokens = {
+    // 图标按钮颜色
+    colorIconButtonNeutral: getToken('colorIconButtonNeutral'),
+    colorIconButtonInverse: getToken('colorIconButtonInverse'),
+    // 反色
 
-// 设计令牌定义
-var designTokens = {
-  // 图标按钮颜色
-  colorIconButtonNeutral: getToken('colorIconButtonNeutral'),
-  colorIconButtonInverse: getToken('colorIconButtonInverse'),
-  // 反色
+    // 图标按钮尺寸
+    sizingIconButtonMedium: getToken('sizingIconButtonIconMedium'),
+    // Medium Icon: 24px x 24px
+    sizingIconButtonSmall: getToken('sizingIconButtonIconSmall'),
+    // Small Icon: 16px x 16px
 
-  // 图标按钮尺寸
-  sizingIconButtonMedium: getToken('sizingIconButtonIconMedium'),
-  // Medium Icon: 24px x 24px
-  sizingIconButtonSmall: getToken('sizingIconButtonIconSmall'),
-  // Small Icon: 16px x 16px
+    //  padding
+    spacingIconButtonPaddingVertical: getToken('spacingIconButtonPaddingVertical'),
+    // Medium
+    spacingIconButtonPaddingVerticalSm: getToken('spacingIconButtonPaddingVerticalSm'),
+    // Small
 
-  //  padding
-  spacingIconButtonPaddingVertical: getToken('spacingIconButtonPaddingVertical'),
-  // Medium
-  spacingIconButtonPaddingVerticalSm: getToken('spacingIconButtonPaddingVerticalSm'),
-  // Small
-
-  spacingIconButtonPaddingHorizontal: getToken('spacingIconButtonPaddingHorizontal'),
-  spacingIconButtonPaddingHorizontalSm: getToken('spacingIconButtonPaddingHorizontalSm'),
-  spacingIconButtonHorizontalGap: getToken('spacingIconButtonHorizontalGap'),
-  spacingIconButtonHorizontalGapSm: getToken('spacingIconButtonHorizontalGapSm'),
-  colorIconButtonDisabled: getToken('colorIconButtonDisabled'),
-  colorIconButtonHover: getToken('colorIconButtonHover'),
-  colorIconButtonActive: getToken('colorIconButtonActive'),
-  // 过渡动画
-  transitionIconButton: '0.3s'
+    spacingIconButtonPaddingHorizontal: getToken('spacingIconButtonPaddingHorizontal'),
+    spacingIconButtonPaddingHorizontalSm: getToken('spacingIconButtonPaddingHorizontalSm'),
+    spacingIconButtonHorizontalGap: getToken('spacingIconButtonHorizontalGap'),
+    spacingIconButtonHorizontalGapSm: getToken('spacingIconButtonHorizontalGapSm'),
+    colorIconButtonDisabled: getToken('colorIconButtonDisabled'),
+    colorIconButtonHover: getToken('colorIconButtonHover'),
+    colorIconButtonActive: getToken('colorIconButtonActive'),
+    // 过渡动画
+    transitionIconButton: transitionIconButton
+  };
+  return designTokens;
 };
-
-// 其他样式属性
-var otherDesignTokens = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "--".concat(prefixCls, "-color"), "".concat(getToken('colorIconButtonNeutral'))), "--".concat(prefixCls, "-color-inverse"), "".concat(getToken('colorIconButtonInverse'))), "--".concat(prefixCls, "-color-disabled"), "".concat(getToken('colorIconButtonDisabled'))), "--".concat(prefixCls, "-transition"), "all ".concat(designTokens.transitionIconButton));
-export { designTokens, otherDesignTokens };
-export default designTokens;
+var useOtherDesignTokens = function useOtherDesignTokens() {
+  var getToken = useDynamicTokens();
+  // 其他样式属性
+  var otherDesignTokens = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "--".concat(prefixCls, "-color"), "".concat(getToken('colorIconButtonNeutral'))), "--".concat(prefixCls, "-color-inverse"), "".concat(getToken('colorIconButtonInverse'))), "--".concat(prefixCls, "-color-disabled"), "".concat(getToken('colorIconButtonDisabled'))), "--".concat(prefixCls, "-transition"), "all ".concat(transitionIconButton));
+  return otherDesignTokens;
+};
+export { useDesignTokens, useOtherDesignTokens };

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

@@ -2,11 +2,11 @@ import React from 'react';
 import './style/index.less';
 export type Size = 'medium' | 'small';
 export interface IconButtonProps {
-    customeIconSize?: string | number;
     prefixCls?: string;
     name: string;
     color?: string;
     size?: Size | string | number;
+    customIconSize?: string | number;
     style?: React.CSSProperties;
     className?: string;
     inverse?: boolean;

package/es/components/IconButton/index.js

@@ -1,15 +1,13 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["prefixCls", "size", "customeIconSize", "disabled", "loading", "style", "className", "onMouseDown", "onClick", "onMouseEnter", "onMouseLeave"];
+var _excluded = ["prefixCls", "size", "customIconSize", "disabled", "loading", "style", "className", "onMouseDown", "onClick", "onMouseEnter", "onMouseLeave"];
 import React from 'react';
 import classNames from 'classnames';
 import { Theme, useStyleRegister } from '@ant-design/cssinjs';
 import Icon from "../Icon";
 import { cssClasses } from "../../constants";
-import { noop } from "../../utils/noop";
-import { designTokens, otherDesignTokens } from "./designTokens";
-
-// 这种是另一方 定制 antd 的 style 的方式； 现在使用了上面的 designTokens.ts 的方式。
+import { noop } from "../../utils";
+import { useDesignTokens, useOtherDesignTokens } from "./designTokens";
 import "./style/index.less";
 
 // 定义设计令牌类型
@@ -31,7 +29,7 @@ var IconButton = function IconButton(props) {
     prefixCls = _props$prefixCls === void 0 ? cssClasses.PREFIX + '-icon-button' : _props$prefixCls,
     _props$size = props.size,
     size = _props$size === void 0 ? 'medium' : _props$size,
-    customeIconSize = props.customeIconSize,
+    customIconSize = props.customIconSize,
     _props$disabled = props.disabled,
     disabled = _props$disabled === void 0 ? false : _props$disabled,
     _props$loading = props.loading,
@@ -47,6 +45,8 @@ var IconButton = function IconButton(props) {
     _props$onMouseLeave = props.onMouseLeave,
     onMouseLeave = _props$onMouseLeave === void 0 ? noop : _props$onMouseLeave,
     restProps = _objectWithoutProperties(props, _excluded);
+  var designTokens = useDesignTokens();
+  var otherDesignTokens = useOtherDesignTokens();
 
   // 获取图标尺寸
   var getIconSize = function getIconSize() {
@@ -89,7 +89,7 @@ var IconButton = function IconButton(props) {
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     children: /*#__PURE__*/_jsx(Icon, _objectSpread(_objectSpread({}, restProps), {}, {
-      size: customeIconSize || iconSize,
+      size: customIconSize || iconSize,
       style: _objectSpread({}, otherDesignTokens)
     }))
   });

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

@@ -1,6 +1,6 @@
 import React from 'react';
 export type backImageRadio = 1 | 2 | 0.68;
-export declare const BackImageEunm: Record<string, backImageRadio>;
+export declare const BackImageEnum: Record<string, backImageRadio>;
 export interface IImageProps {
     src?: string;
     radio?: backImageRadio;

package/es/components/Image/index.js

@@ -5,7 +5,7 @@ import React from 'react';
 import { default as classNames } from 'classnames';
 import { cssClasses } from "../../constants";
 import { jsx as _jsx } from "react/jsx-runtime";
-export var BackImageEunm = {
+export var BackImageEnum = {
   whRadio1: 1,
   whRadio2: 2,
   whRadio3: 0.68
@@ -15,8 +15,9 @@ var Image = function Image(props) {
     style = props.style,
     imageSize = props.imageSize,
     _props$radio = props.radio,
-    radio = _props$radio === void 0 ? BackImageEunm.whRadio2 : _props$radio,
-    className = props.className,
+    radio = _props$radio === void 0 ? BackImageEnum.whRadio2 : _props$radio,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
     otherProps = _objectWithoutProperties(props, _excluded);
   var mergedStyle = imageSize ? _objectSpread({
     width: imageSize,

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

@@ -1,4 +1,4 @@
-declare const designTokens: {
+declare const useDesignTokens: () => {
     sizingListItemIconImage: any;
     sizingListItemIconIcon: any;
     sizingListItemIconIconStatus: any;
@@ -26,5 +26,7 @@ declare const designTokens: {
     colorListItemTextTitle: any;
     colorListItemTextSubtitle: any;
     colorListItemTextPoints: any;
+    spacingListItemTextVerticalGapMd: any;
+    spacingListItemTextVerticalGapSm: any;
 };
-export default designTokens;
+export { useDesignTokens };

package/es/components/ListItem/designTokens.js

@@ -1,31 +1,37 @@
-import TokenManager from "../../utils/tokenManager";
-var designTokens = {
-  sizingListItemIconImage: TokenManager.tokenKey('sizingListItemIconImage'),
-  sizingListItemIconIcon: TokenManager.tokenKey('sizingListItemIconIcon'),
-  sizingListItemIconIconStatus: TokenManager.tokenKey('sizingListItemIconIconStatus'),
-  sizingListItemImageImage: TokenManager.tokenKey('sizingListItemImageImage'),
-  sizingListItemImageIcon: TokenManager.tokenKey('sizingListItemImageIcon'),
-  sizingListItemImageIconLg: TokenManager.tokenKey('sizingListItemImageIconLg'),
-  sizingListItemImageThumbnail: TokenManager.tokenKey('sizingListItemImageThumbnail'),
-  sizingListItemIcon: TokenManager.tokenKey('sizingListItemIcon'),
-  sizingListItemIconLg: TokenManager.tokenKey('sizingListItemIconLg'),
-  spacingListItemIconStatusPaddingRight: TokenManager.tokenKey('spacingListItemIconStatusPaddingRight'),
-  spacingListItemIconPaddingLeft: TokenManager.tokenKey('spacingListItemIconPaddingLeft'),
-  spacingListItemImagePaddingRight: TokenManager.tokenKey('spacingListItemImagePaddingRight'),
-  spacingListItemIconImagePaddingVertical: TokenManager.tokenKey('spacingListItemIconImagePaddingVertical'),
-  spacingListItemIconImagePaddingHorizontal: TokenManager.tokenKey('spacingListItemIconImagePaddingHorizontal'),
-  spacingListItemIconIconPaddingVertical: TokenManager.tokenKey('spacingListItemIconIconPaddingVertical'),
-  spacingListItemIconIconPaddingHorizontal: TokenManager.tokenKey('spacingListItemIconIconPaddingHorizontal'),
-  spacingListItemImageIconPaddingRight: TokenManager.tokenKey('spacingListItemImageIconPaddingRight'),
-  spacingListItemImagePointsPaddingTop: TokenManager.tokenKey('spacingListItemImagePointsPaddingTop'),
-  colorListItemIconBackground: TokenManager.tokenKey('colorListItemIconBackground'),
-  colorListItemIconSubtle: TokenManager.tokenKey('colorListItemIconSubtle'),
-  colorListItemIcon: TokenManager.tokenKey('colorListItemIcon'),
-  borderRadiusListItem: TokenManager.tokenKey('borderRadiusListItem'),
-  colorListItemBackground: TokenManager.tokenKey('colorListItemBackground'),
-  spacingListItemTextPaddingHorizontal: TokenManager.tokenKey('spacingListItemTextPaddingHorizontal'),
-  colorListItemTextTitle: TokenManager.tokenKey('colorListItemTextTitle'),
-  colorListItemTextSubtitle: TokenManager.tokenKey('colorListItemTextSubtitle'),
-  colorListItemTextPoints: TokenManager.tokenKey('colorListItemTextPoints')
+import { useDynamicTokens } from "../../utils";
+var useDesignTokens = function useDesignTokens() {
+  var getToken = useDynamicTokens();
+  var designTokens = {
+    sizingListItemIconImage: getToken('sizingListItemIconImage'),
+    sizingListItemIconIcon: getToken('sizingListItemIconIcon'),
+    sizingListItemIconIconStatus: getToken('sizingListItemIconIconStatus'),
+    sizingListItemImageImage: getToken('sizingListItemImageImage'),
+    sizingListItemImageIcon: getToken('sizingListItemImageIcon'),
+    sizingListItemImageIconLg: getToken('sizingListItemImageIconLg'),
+    sizingListItemImageThumbnail: getToken('sizingListItemImageThumbnail'),
+    sizingListItemIcon: getToken('sizingListItemIcon'),
+    sizingListItemIconLg: getToken('sizingListItemIconLg'),
+    spacingListItemIconStatusPaddingRight: getToken('spacingListItemIconStatusPaddingRight'),
+    spacingListItemIconPaddingLeft: getToken('spacingListItemIconPaddingLeft'),
+    spacingListItemImagePaddingRight: getToken('spacingListItemImagePaddingRight'),
+    spacingListItemIconImagePaddingVertical: getToken('spacingListItemIconImagePaddingVertical'),
+    spacingListItemIconImagePaddingHorizontal: getToken('spacingListItemIconImagePaddingHorizontal'),
+    spacingListItemIconIconPaddingVertical: getToken('spacingListItemIconIconPaddingVertical'),
+    spacingListItemIconIconPaddingHorizontal: getToken('spacingListItemIconIconPaddingHorizontal'),
+    spacingListItemImageIconPaddingRight: getToken('spacingListItemImageIconPaddingRight'),
+    spacingListItemImagePointsPaddingTop: getToken('spacingListItemImagePointsPaddingTop'),
+    colorListItemIconBackground: getToken('colorListItemIconBackground'),
+    colorListItemIconSubtle: getToken('colorListItemIconSubtle'),
+    colorListItemIcon: getToken('colorListItemIcon'),
+    borderRadiusListItem: getToken('borderRadiusListItem'),
+    colorListItemBackground: getToken('colorListItemBackground'),
+    spacingListItemTextPaddingHorizontal: getToken('spacingListItemTextPaddingHorizontal'),
+    colorListItemTextTitle: getToken('colorListItemTextTitle'),
+    colorListItemTextSubtitle: getToken('colorListItemTextSubtitle'),
+    colorListItemTextPoints: getToken('colorListItemTextPoints'),
+    spacingListItemTextVerticalGapMd: getToken('spacingListItemTextVerticalGapMd'),
+    spacingListItemTextVerticalGapSm: getToken('spacingListItemTextVerticalGapSm')
+  };
+  return designTokens;
 };
-export default designTokens;
+export { useDesignTokens };

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

@@ -4,6 +4,8 @@ export declare const ListItemTypes: {
     readonly ListItemIcon: "ListItemIcon";
     readonly ListItemImage: "ListItemImage";
     readonly ListItemOther: "ListItemOther";
+    readonly ListItemDefault: "ListItemDefault";
+    readonly ListItemCustom: "ListItemCustom";
 };
 export declare const TAPPABLE_AREAS: {
     readonly ALL: "ALL";
@@ -27,10 +29,11 @@ export interface ISubIconValueConfig {
     iconName: string;
 }
 export interface IListItemProps {
-    listType: ListItemType;
+    size?: 'M' | 'S';
+    listType?: ListItemType;
     leftIcon?: IIconConfig;
     leftImageSrc?: string;
-    title: string;
+    title?: string;
     subTitle?: string;
     listItemRightType?: ListItemRightType;
     showToggle?: boolean;
@@ -55,6 +58,13 @@ export interface IListItemProps {
     onRightIconClick?: () => void;
     tappableArea?: TappableAreaType;
     tappableAreaClick?: () => void;
+    children?: React.ReactNode;
+    className?: string;
+    showRightText?: boolean;
+    rightText?: string;
+    rightChildren?: React.ReactNode;
+    leftChildren?: React.ReactNode;
+    prefix?: string;
 }
 declare const ListItem: React.FC<IListItemProps>;
 export default ListItem;