@digitalc/dxp-ui 0.0.4 → 0.0.5-alpha-gomo.1

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

@@ -0,0 +1,15 @@
+declare const designTokens: {
+    borderRadiusChip: any;
+    colorChipBackgroundStandard: any;
+    colorChipBorderStandard: any;
+    borderWidthChip: any;
+    spacingChipPaddingHorizontal: any;
+    spacingChipPaddingVertical: any;
+    colorChipBackgroundHover: any;
+    colorChipTextInactive: any;
+    colorChipBackgroundActive: any;
+    colorChipBorderActive: any;
+    colorChipTextActive: any;
+    sizingChipIconClose: any;
+};
+export { designTokens };

package/es/components/Chip/designTokens.js

@@ -0,0 +1,22 @@
+import { getToken } from "../../utils/tokenHelper";
+var designTokens = {
+  borderRadiusChip: getToken('borderRadiusChip'),
+  // 选中的边框颜色
+  colorChipBackgroundStandard: getToken('colorChipBackgroundStandard'),
+  // 选中的label颜色
+  colorChipBorderStandard: getToken('colorChipBorderStandard'),
+  // hover label颜色
+  borderWidthChip: getToken('borderWidthChip'),
+  // active label颜色
+  spacingChipPaddingHorizontal: getToken('spacingChipPaddingHorizontal'),
+  // 默认label颜色
+  spacingChipPaddingVertical: getToken('spacingChipPaddingVertical'),
+  // 未选中的边框
+  colorChipBackgroundHover: getToken('colorChipBackgroundHover'),
+  colorChipTextInactive: getToken('colorChipTextInactive'),
+  colorChipBackgroundActive: getToken('colorChipBackgroundActive'),
+  colorChipBorderActive: getToken('colorChipBorderActive'),
+  colorChipTextActive: getToken('colorChipTextActive'),
+  sizingChipIconClose: getToken('sizingChipIconClose')
+};
+export { designTokens };

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import './style/index.less';
+export interface ChipProps {
+    prefixCls?: string;
+    children?: React.ReactNode;
+    types?: 'textOnly' | 'removable';
+    style?: React.CSSProperties;
+    onClose?: () => void;
+    onChange?: () => void;
+    [key: string]: any;
+}
+declare const Chip: (props: ChipProps) => React.JSX.Element;
+export default Chip;

package/es/components/Chip/index.js

@@ -0,0 +1,98 @@
+import "antd/es/config-provider/style";
+import _ConfigProvider from "antd/es/config-provider";
+import "antd/es/tag/style";
+import _Tag from "antd/es/tag";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["types", "children", "prefixCls", "checked", "onChange", "onClose", "style"];
+import React from 'react';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { theme } from "../../utils/theme";
+import { designTokens } from "./designTokens";
+import { BASE_CLASS_PREFIX } from "../../constants";
+import Text from "../Text";
+import "./style/index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Chip = function Chip(props) {
+  var _props$types = props.types,
+    types = _props$types === void 0 ? 'textOnly' : _props$types,
+    children = props.children,
+    _props$prefixCls = props.prefixCls,
+    prefixCls = _props$prefixCls === void 0 ? 'tag' : _props$prefixCls,
+    checked = props.checked,
+    _props$onChange = props.onChange,
+    onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
+    _props$onClose = props.onClose,
+    _onClose = _props$onClose === void 0 ? function () {} : _props$onClose,
+    style = props.style,
+    attr = _objectWithoutProperties(props, _excluded);
+  var borderRadiusChip = designTokens.borderRadiusChip,
+    colorChipBackgroundStandard = designTokens.colorChipBackgroundStandard,
+    colorChipBorderStandard = designTokens.colorChipBorderStandard,
+    borderWidthChip = designTokens.borderWidthChip,
+    spacingChipPaddingHorizontal = designTokens.spacingChipPaddingHorizontal,
+    spacingChipPaddingVertical = designTokens.spacingChipPaddingVertical,
+    colorChipBackgroundHover = designTokens.colorChipBackgroundHover,
+    colorChipTextInactive = designTokens.colorChipTextInactive,
+    colorChipBackgroundActive = designTokens.colorChipBackgroundActive,
+    colorChipBorderActive = designTokens.colorChipBorderActive,
+    colorChipTextActive = designTokens.colorChipTextActive,
+    sizingChipIconClose = designTokens.sizingChipIconClose;
+  var useCustomButtonStyle = function useCustomButtonStyle() {
+    var hashId = useStyleRegister({
+      theme: theme,
+      token: {
+        baseColor: 'blue'
+      },
+      path: ['tag-textonly']
+    }, function () {
+      return "\n      .tag-textonly {\n        color: ".concat(colorChipTextInactive, ";\n        border-color: ").concat(colorChipBorderStandard, ";\n        border-width: ").concat(borderWidthChip, "px;\n        border-radius: ").concat(borderRadiusChip, "px;\n        background-color: ").concat(colorChipBackgroundStandard, ";\n        padding: ").concat(spacingChipPaddingVertical, "px ").concat(spacingChipPaddingHorizontal, "px;\n      }\n      .tag-textonly:hover {\n        background-color: ").concat(colorChipBackgroundHover, ";\n      }\n      .tag-textonly:active {\n        background-color: ").concat(colorChipBackgroundHover, ";\n      }\n      .tag-active,\n      .tag-active:hover,\n      .tag-active:active {\n        color: ").concat(colorChipTextActive, ";\n        border-color: ").concat(colorChipBorderActive, ";\n        background-color: ").concat(colorChipBackgroundActive, ";\n      }\n    ");
+    });
+    return hashId;
+  };
+  useCustomButtonStyle();
+  return /*#__PURE__*/_jsx(_ConfigProvider, {
+    prefixCls: BASE_CLASS_PREFIX,
+    theme: {
+      components: {
+        Tag: {
+          borderRadiusSM: borderRadiusChip,
+          defaultBg: colorChipBackgroundActive,
+          colorBorder: colorChipBorderActive,
+          lineWidth: borderWidthChip,
+          colorText: colorChipTextActive,
+          marginXS: 16,
+          fontSizeIcon: sizingChipIconClose
+          // spacingChipTextLinkPaddingVertical,
+          // spacingChipTextLinkPaddingHorizontal,
+        }
+      }
+    },
+    children: types === 'textOnly' ? /*#__PURE__*/_jsx("span", {
+      className: "".concat(BASE_CLASS_PREFIX, "-").concat(prefixCls, "-").concat(types, " tag-textonly ").concat(checked ? 'tag-active' : ''),
+      onClick: function onClick() {
+        return onChange();
+      },
+      style: style,
+      children: /*#__PURE__*/_jsx(Text, {
+        size: "ContentC14Regular",
+        children: children
+      })
+    }) : /*#__PURE__*/_jsx(_Tag, _objectSpread(_objectSpread({
+      className: "".concat(BASE_CLASS_PREFIX, "-").concat(prefixCls, "-").concat(types),
+      style: _objectSpread({
+        padding: "".concat(spacingChipPaddingVertical, "px ").concat(spacingChipPaddingHorizontal, "px")
+      }, style),
+      onClose: function onClose(e) {
+        e.preventDefault();
+        _onClose();
+      }
+    }, attr), {}, {
+      children: /*#__PURE__*/_jsx(Text, {
+        size: "ContentC14Regular",
+        children: children
+      })
+    }))
+  });
+};
+export default Chip;

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

@@ -0,0 +1,9 @@
+
+@import './variables.less';
+
+@components: tag;
+.@{prefix}-@{components}-textOnly {
+  border-style: solid;
+  cursor: pointer;
+  white-space: nowrap;
+}

package/es/components/Chip/style/variables.less

@@ -0,0 +1,4 @@
+
+@import '../../../style/variables.less';
+
+@btn-primary-bg-default: var(--base-color-primary);

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

@@ -0,0 +1,16 @@
+import React, { PureComponent } from 'react';
+import './style/index.less';
+export interface DividerProps {
+    type?: 'solid' | 'dashed' | 'eight' | 'whiteBg' | 'grayBg' | 'vertical';
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    [key: string]: any;
+}
+export default class Divider extends PureComponent<DividerProps> {
+    static defaultProps: {
+        type: string;
+        prefixCls: string;
+    };
+    render(): React.JSX.Element;
+}

package/es/components/Divider/index.js

@@ -0,0 +1,55 @@
+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", "prefixCls", "type", "style", "height"];
+import React, { PureComponent } from 'react';
+import { default as classNames } from 'classnames';
+import TokenManager from "../../utils/tokenManager";
+import { cssClasses } from "../../constants";
+import "./style/index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Divider = /*#__PURE__*/function (_PureComponent) {
+  _inherits(Divider, _PureComponent);
+  var _super = _createSuper(Divider);
+  function Divider() {
+    _classCallCheck(this, Divider);
+    return _super.apply(this, arguments);
+  }
+  _createClass(Divider, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        children = _this$props.children,
+        className = _this$props.className,
+        prefixCls = _this$props.prefixCls,
+        type = _this$props.type,
+        style = _this$props.style,
+        height = _this$props.height,
+        attr = _objectWithoutProperties(_this$props, _excluded);
+      var baseProps = {
+        className: classNames(prefixCls, _defineProperty({}, "".concat(prefixCls, "-type-").concat(type), type), className)
+      };
+      return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread(_objectSpread({}, baseProps), attr), {}, {
+        style: _objectSpread(_objectSpread({
+          height: height
+        }, style), {}, {
+          borderColor: TokenManager.tokenKey('colorDivider10Horizontal')
+        }),
+        children: /*#__PURE__*/_jsx("div", {
+          children: children
+        })
+      }));
+    }
+  }]);
+  return Divider;
+}(PureComponent);
+_defineProperty(Divider, "defaultProps", {
+  type: 'solid',
+  prefixCls: cssClasses.PREFIX + '-divider'
+});
+export { Divider as default };
+;

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

@@ -0,0 +1,78 @@
+
+@import './variables.less';
+
+@components: divider;
+.@{prefix}-@{components} {
+  width: 100%;
+}
+
+.@{prefix}-@{components}-type-solid {
+  border-bottom: 1px solid #BFBFC7;
+}
+
+.@{prefix}-@{components}-type-dashed {
+  border-bottom: 1px dashed #E6E6E6;
+}
+
+.@{prefix}-@{components}-type-eight {
+  border-bottom: 8px solid #F5F5F8;
+}
+.@{prefix}-@{components}-type-whiteBg {
+  position: relative;
+  padding-top: 8px;
+  overflow: hidden;
+  &::before,
+  &::after {
+    position: absolute;
+    top: 0;
+    display: block;
+    content: '';
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    border: 1px solid #D5D5D5;
+    background: #fff;
+    box-sizing: border-box;
+  }
+  &::before {
+    left: -8px;
+  }
+  &::after {
+    right: -8px;
+  }
+  > div {
+    margin-bottom: 8px;
+    border-bottom: 2px dashed #EBEBEB;
+  }
+}
+.@{prefix}-@{components}-type-grayBg {
+  position: relative;
+  padding-top: 8px;
+  overflow: hidden;
+  &::before,
+  &::after {
+    position: absolute;
+    top: 0;
+    display: block;
+    content: '';
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #F5F5F5;
+  }
+  &::before {
+    left: -8px;
+  }
+  &::after {
+    right: -8px;
+  }
+  > div {
+    margin-bottom: 8px;
+    border-bottom: 2px dashed #F2F2F2;
+  }
+}
+.@{prefix}-@{components}-type-vertical {
+  width: auto;
+  min-height: 12px;
+  border-left: 1px solid #BFBFC7;
+}

package/es/components/Divider/style/variables.less

@@ -0,0 +1,4 @@
+
+@import '../../../style/variables.less';
+
+@btn-primary-bg-default: var(--base-color-primary);

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

@@ -0,0 +1,16 @@
+declare const designTokens: {
+    colorDrawerBackgroundOverlay: any;
+    colorDrawerBackgroundStandard: any;
+    borderTopLeftRadius: any;
+    borderTopRightRadius: any;
+    spacingDrawerPaddingHorizontal: any;
+    spacingDrawerPaddingBottom: any;
+    spacingDrawerPaddingTop: any;
+    sizingDrawerHandle: any;
+    colorDrawerHandle: any;
+    spacingDrawerHandlePaddingTop: any;
+    spacingDrawerHandlePaddingBottom: any;
+    colorDrawerTextHeader: any;
+    spacingDrawerListOptionHorizontalGap: any;
+};
+export default designTokens;

package/es/components/Drawer/designTokens.js

@@ -0,0 +1,27 @@
+import TokenManager from "../../utils/tokenManager";
+var designTokens = {
+  colorDrawerBackgroundOverlay: TokenManager.tokenKey('colorDrawerBackgroundOverlay') || 'rgba(0, 0, 0, 0.60)',
+  // 遮罩层背景色
+  colorDrawerBackgroundStandard: TokenManager.tokenKey('colorDrawerBackgroundStandard') || '#FFF',
+  // 内容的底色
+  borderTopLeftRadius: TokenManager.tokenKey('borderRadiusDrawerTopLeft'),
+  // 弹出窗上左上圆角
+  borderTopRightRadius: TokenManager.tokenKey('borderRadiusDrawerTopRight'),
+  // 弹出窗上右上圆角
+  spacingDrawerPaddingHorizontal: TokenManager.tokenKey('spacingDrawerPaddingHorizontal'),
+  // 内部横padding
+  spacingDrawerPaddingBottom: TokenManager.tokenKey('spacingDrawerPaddingBottom'),
+  spacingDrawerPaddingTop: TokenManager.tokenKey('spacingDrawerPaddingTop'),
+  sizingDrawerHandle: TokenManager.tokenKey('sizingDrawerHandle'),
+  // 上部 小滑块的宽
+  colorDrawerHandle: TokenManager.tokenKey('colorDrawerHandle'),
+  // 上部 小滑块的背景色
+  spacingDrawerHandlePaddingTop: TokenManager.tokenKey('spacingDrawerHandlePaddingTop'),
+  // 上部 小滑块
+  spacingDrawerHandlePaddingBottom: TokenManager.tokenKey('spacingDrawerHandlePaddingBottom'),
+  // 上部 小滑块
+  colorDrawerTextHeader: TokenManager.tokenKey('colorDrawerTextHeader'),
+  // title的颜色
+  spacingDrawerListOptionHorizontalGap: TokenManager.tokenKey('spacingDrawerListOptionHorizontalGap') // 间距
+};
+export default designTokens;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import './style/index.less';
+export type DrawerType = 'DrawerTypeHandler' | 'DrawerTypeCloseBtn';
+export declare const DrawerTypeEnum: Record<string, DrawerType>;
+export interface BottomDrawerProps {
+    visible: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    height?: number | string;
+    title?: string;
+    drawerType: DrawerType;
+    bottomBtnText?: string;
+    bottomLinkText?: string;
+    showBottomBorder?: boolean;
+    showImage?: boolean;
+    imageSrc?: string;
+    onLinkClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onBottomBtnClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+}
+declare const BottomDrawer: React.FC<BottomDrawerProps>;
+export default BottomDrawer;

package/es/components/Drawer/index.js

@@ -0,0 +1,189 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useEffect, useRef } from 'react';
+import designTokens from "./designTokens";
+import { StickyFooter, Text, Image, Icon } from "../index";
+import { cssClasses } from "../../constants";
+import "./style/index.less";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export var DrawerTypeEnum = {
+  DrawerTypeHandler: 'DrawerTypeHandler',
+  DrawerTypeCloseBtn: 'DrawerTypeCloseBtn'
+};
+var BottomDrawer = function BottomDrawer(_ref) {
+  var visible = _ref.visible,
+    onClose = _ref.onClose,
+    children = _ref.children,
+    height = _ref.height,
+    title = _ref.title,
+    _ref$drawerType = _ref.drawerType,
+    drawerType = _ref$drawerType === void 0 ? DrawerTypeEnum.DrawerTypeHandler : _ref$drawerType,
+    bottomBtnText = _ref.bottomBtnText,
+    bottomLinkText = _ref.bottomLinkText,
+    showBottomBorder = _ref.showBottomBorder,
+    showImage = _ref.showImage,
+    imageSrc = _ref.imageSrc,
+    onLinkClick = _ref.onLinkClick,
+    onBottomBtnClick = _ref.onBottomBtnClick;
+  var originalBodyOverflow = useRef('');
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMounted = _useState2[0],
+    setIsMounted = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    paddingBottom = _useState4[0],
+    setPaddingBottom = _useState4[1];
+  useEffect(function () {
+    if (visible) {
+      // 保存原始滚动状态
+      originalBodyOverflow.current = document.body.style.overflow;
+      // 禁用页面滚动
+      document.body.style.overflow = 'hidden';
+      // 兼容移动端触摸滚动
+      document.body.style.touchAction = 'none';
+      setIsMounted(true);
+    } else {
+      // 恢复原始滚动状态
+      document.body.style.overflow = originalBodyOverflow.current;
+      document.body.style.touchAction = 'auto';
+      var timer = setTimeout(function () {
+        return setIsMounted(false);
+      }, 100);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+  }, [visible]);
+  useEffect(function () {
+    if (!visible) {
+      return;
+    }
+    var timer = setTimeout(function () {
+      var footer = document.querySelector(".".concat(cssClasses.PREFIX, "-stickyFooter"));
+      if (footer) {
+        var observer = new ResizeObserver(function (entries) {
+          var contentHeight = (entries === null || entries === void 0 ? void 0 : entries[0].contentRect.height) + 10;
+          var borderBoxHeight = (entries === null || entries === void 0 ? void 0 : entries[0].target.getBoundingClientRect().height) + 10;
+          setPaddingBottom(borderBoxHeight || contentHeight);
+        });
+        observer.observe(footer, {
+          box: 'border-box'
+        });
+        return function () {
+          return observer.disconnect();
+        };
+      }
+    }, 100);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [visible]);
+  var colorDrawerBackgroundOverlay = designTokens.colorDrawerBackgroundOverlay,
+    colorDrawerBackgroundStandard = designTokens.colorDrawerBackgroundStandard,
+    borderTopLeftRadius = designTokens.borderTopLeftRadius,
+    borderTopRightRadius = designTokens.borderTopRightRadius,
+    spacingDrawerPaddingHorizontal = designTokens.spacingDrawerPaddingHorizontal,
+    sizingDrawerHandle = designTokens.sizingDrawerHandle,
+    colorDrawerHandle = designTokens.colorDrawerHandle,
+    spacingDrawerHandlePaddingTop = designTokens.spacingDrawerHandlePaddingTop,
+    spacingDrawerHandlePaddingBottom = designTokens.spacingDrawerHandlePaddingBottom,
+    colorDrawerTextHeader = designTokens.colorDrawerTextHeader,
+    spacingDrawerListOptionHorizontalGap = designTokens.spacingDrawerListOptionHorizontalGap,
+    spacingDrawerPaddingBottom = designTokens.spacingDrawerPaddingBottom,
+    spacingDrawerPaddingTop = designTokens.spacingDrawerPaddingTop;
+  if (!isMounted) return null;
+  var borderStyle = showBottomBorder ? {} : {
+    border: 'none'
+  };
+  var TitleCom = title ? /*#__PURE__*/_jsx("div", {
+    className: "".concat(cssClasses.PREFIX, "-drawer-header"),
+    children: /*#__PURE__*/_jsx(Text, {
+      size: "TitleT21Bold",
+      style: {
+        color: colorDrawerTextHeader,
+        marginBottom: "".concat(spacingDrawerListOptionHorizontalGap, "px"),
+        display: 'block'
+      },
+      children: title
+    })
+  }) : /*#__PURE__*/_jsx(_Fragment, {});
+  return /*#__PURE__*/_jsx("div", {
+    className: "".concat(cssClasses.PREFIX, "-drawer-mask ").concat(visible ? 'visible' : ''),
+    style: {
+      background: colorDrawerBackgroundOverlay
+    },
+    onClick: onClose,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "".concat(cssClasses.PREFIX, "-drawer-content ").concat(visible ? 'active' : ''),
+      style: {
+        height: height,
+        background: colorDrawerBackgroundStandard,
+        borderTopLeftRadius: "".concat(borderTopLeftRadius, "px"),
+        borderTopRightRadius: "".concat(borderTopRightRadius, "px")
+      },
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      },
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "".concat(cssClasses.PREFIX, "-drawer-inner"),
+        style: {
+          paddingLeft: "".concat(spacingDrawerPaddingHorizontal, "px"),
+          paddingRight: "".concat(spacingDrawerPaddingHorizontal, "px"),
+          paddingBottom: "".concat(paddingBottom, "px")
+        },
+        children: [drawerType === DrawerTypeEnum.DrawerTypeHandler && /*#__PURE__*/_jsx("div", {
+          className: "handle-bar",
+          style: {
+            width: sizingDrawerHandle ? "".concat(sizingDrawerHandle, "px") : 0,
+            background: colorDrawerHandle,
+            marginTop: "".concat(spacingDrawerHandlePaddingTop, "px"),
+            marginBottom: "".concat(spacingDrawerHandlePaddingBottom, "px")
+          }
+        }), drawerType === DrawerTypeEnum.DrawerTypeCloseBtn && /*#__PURE__*/_jsxs("div", {
+          className: "close-warp",
+          style: {
+            paddingTop: "".concat(spacingDrawerPaddingTop, "px")
+            // paddingBottom: `${spacingDrawerListOptionHorizontalGap}px`,
+          },
+          children: [/*#__PURE__*/_jsx("div", {
+            children: TitleCom
+          }), /*#__PURE__*/_jsx(Icon, {
+            name: "icon-Close",
+            onClick: onClose
+          })]
+        }), showImage && /*#__PURE__*/_jsx(Image, {
+          radio: 2
+          // preview={false}
+          ,
+          src: imageSrc,
+          imageSize: "100%",
+          style: {
+            marginBottom: "".concat(spacingDrawerPaddingBottom, "px")
+          }
+        }), drawerType !== DrawerTypeEnum.DrawerTypeCloseBtn && title && TitleCom, children]
+      }), (!!bottomBtnText || !!bottomLinkText) && /*#__PURE__*/_jsx(StickyFooter, {
+        onClick: onBottomBtnClick,
+        buttonText: bottomBtnText,
+        style: _objectSpread({
+          flexDirection: 'column',
+          flexShrink: 0
+        }, borderStyle),
+        children: !!bottomLinkText && /*#__PURE__*/_jsx(Text, {
+          onClick: function onClick(e) {
+            e === null || e === void 0 || e.stopPropagation();
+            if (onLinkClick) {
+              onLinkClick(e);
+            }
+          },
+          size: "ContentC14TextLink",
+          style: {
+            marginTop: "".concat(spacingDrawerListOptionHorizontalGap, "px")
+          },
+          children: bottomLinkText
+        })
+      })]
+    })
+  });
+};
+export default BottomDrawer;

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

@@ -0,0 +1,73 @@
+@import './variables.less';
+
+// 添加iOS惯性滚动限制
+.@{prefix}-drawer-content {
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+}
+
+.@{prefix}-drawer-mask {
+  touch-action: none; // 阻止移动端触摸事件
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transition: opacity @transition-duration @easing-function;
+  z-index: @mask-zindex;
+
+  &.visible {
+    opacity: 1;
+  }
+}
+
+.@{prefix}-drawer-content {
+  .transition-properties();
+  position: fixed;
+  left: 0;
+  width: 100%;
+  bottom: -100%;
+  background: white;
+  border-radius: @border-radius @border-radius 0 0;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  min-height: 20vh;
+  max-height: 80vh;
+
+  &.active {
+    bottom: 0;
+  }
+
+  .handle-bar {
+    height: 4px;
+    margin: 0 auto;
+    border-radius: 4px;
+  }
+
+  .@{prefix}-drawer-inner {
+    overflow: auto;
+    flex: 1;
+    min-height: 0;
+    padding-bottom: 20px;
+    /* 防止底部遮挡 */
+
+  }
+
+  .close-warp {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+}
+
+// 混合 (Mixin)
+.transition-properties() {
+  transition: bottom @transition-duration @easing-function;
+}

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

@@ -0,0 +1,8 @@
+@import '../../../style/variables.less';
+
+
+@mask-zindex: 99999;
+@transition-duration: 0.3s;
+@easing-function: cubic-bezier(0.4, 0, 0.2, 1);
+@border-radius: 16px;
+@handle-color: #ddd;

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

@@ -0,0 +1,9 @@
+import React, { CSSProperties } from 'react';
+import '../../assets/iconFont/iconfont.css';
+interface IProps {
+    type: string;
+    style?: CSSProperties;
+    className?: string;
+}
+declare const MIcon: React.FC<IProps>;
+export default MIcon;