@chaoswise/ui 3.0.6 → 3.0.8

package/lib/ConfigProvider/customTheme.js

@@ -0,0 +1,271 @@
+// *** 若项目重新定制化主题，删除此文件，组件库书写样式代码components中的变量会读取不到
+// **** 单独组件有想要定制的主题变来功能放入到customToken文件夹中
+export default {
+  token: {
+    white: "#fff",
+    colorPrimary: "#1890ff",
+    colorLink: "#1890ff",
+    colorInfo: "#1890ff",
+    colorError: "#f5222d",
+    borderRadius: 2,
+    fontSize: 12,
+    colorText: "#000000d9",
+    // rgba(0, 0, 0, 0.85)
+    colorBorder: "#00000026",
+    // rgba(0, 0, 0, 0.15)
+    colorBorderSecondary: "#0000000f",
+    // rgba(0, 0, 0, 0.06)  一般用于边框分割线颜色
+    controlHeight: 28,
+    controlHeightLG: 40,
+    // Math.floor(controlHeight * 1.43)
+    controlHeightSM: 24,
+    // Math.floor(controlHeight * 0.86)
+    controlHeightXS: 16,
+    // Math.floor(controlHeight * 0.57)
+    wireframe: true // 用于将组件的视觉效果变为线框化，初始恢复到antd3/antd4的视觉效果
+  },
+  components: {
+    Layout: {
+      bodyBg: "#F4F5FA",
+      headerBg: "#1E324E",
+      headerColor: "white",
+      headerHeight: 48,
+      headerPadding: 0
+    },
+    Button: {
+      primaryShadow: "none",
+      dangerShadow: "none",
+      defaultShadow: "none",
+      contentFontSizeLG: 14,
+      contentFontSizeSM: 12,
+      contentFontSize: 12,
+      onlyIconSizeLG: 16,
+      onlyIconSizeSM: 12,
+      onlyIconSize: 14,
+      paddingInline: 11
+    },
+    Radio: {
+      radioSize: 16,
+      dotSize: 8
+    },
+    Checkbox: {
+      controlInteractiveSize: 16
+    },
+    Breadcrumb: {
+      linkHoverColor: "rgb(64, 169, 255)",
+      // token变量,悬停色40a9ff color[5]
+      colorBgTextHover: "rgb(255, 255, 255)" // token变量 fff
+    },
+    Tooltip: {
+      colorBgSpotlight: "rgb(255, 255, 255)",
+      // token变量 fff
+      colorTextLightSolid: "rgba(0, 0, 0, 0.85)",
+      // token变量 colorText
+      paddingSM: 8
+    },
+    Dropdown: {
+      // 组件内部需要调整符合UI规范的样式
+      // 1.Dropdown的overlay内容中组菜单样式调整(字体大小、文字颜色、间距)
+      controlItemBgHover: "rgb(230, 247, 255)",
+      // token变量,悬停色e6f7ff
+      controlHeight: 30,
+      controlPaddingHorizontal: 6,
+      paddingXXS: "4px 0"
+    },
+    Pagination: {
+      // 组件内部需要调整符合UI规范的样式
+      // 1.分页组件页数过多跳转ellipsis样式调整(需要加边框)
+      controlItemBgActiveDisabled: "rgba(0, 0, 0, 0.04)" // token变量colorFillTertiary
+    },
+    // Form: {
+    //   // 组件内部需要调整符合UI规范的样式
+    //   // 1.布局模式下为horizontal样式调整(label定宽等相关问题、必填项样式调整)
+    // },
+    Steps: {
+      // 组件内部需要调整符合UI规范的样式
+      // 1.步骤条连接线定宽100px、颜色始终为初始色值
+      // 2.点状步骤条样式调整(点状球位置)
+      controlHeight: 24,
+      padding: 8,
+      iconSize: 24,
+      dotCurrentSize: 8,
+      dotSize: 8
+    },
+    DatePicker: {
+      // 组件内部需要调整符合UI规范的样式
+      // 日期组件悬停样式有问题需要升级antd5
+      // 1.日期组件单元格样式调整(字体大小、间距)
+      controlItemBgHover: "rgb(230, 247, 255)",
+      // token变量,悬停色e6f7ff
+      paddingInline: 9
+    },
+    Input: {
+      // 组件内部需要调整符合UI规范的样式
+      // 1.输入框清除按钮、关闭按钮等位置调整
+      // 2.showCount数目展示后样式位置调整
+      // 3.支持label前缀
+      paddingInline: 9
+    },
+    InputNumber: {
+      // 组件内部需要调整符合UI规范的样式
+      // 1.支持label前缀
+      paddingInline: 9
+    },
+    // TimePicker: {
+    //   // 暂无相关 Token支持配置
+    // },
+    Slider: {
+      // 组件内部需要调整符合UI规范的样式
+      // 1.图标需要替换，自定义样式多
+      railSize: 6,
+      trackBg: "rgb(24, 144, 255)",
+      // token变量 colorPrimary
+      trackHoverBg: "rgb(24, 144, 255)",
+      // token变量 colorPrimary
+      // railBg: "rgba(24, 144, 255, 0.15)", // token变量 colorPrimary + 透明度15%
+      // railHoverBg: "rgba(24, 144, 255, 0.15)", // token变量 colorPrimary + 透明度15%
+      borderRadiusXS: 3,
+      trackBgDisabled: "rgb(217, 217, 217)",
+      // token变量 colorBorder
+      handleSize: 18,
+      dotSize: 6
+    },
+    Badge: {
+      dotSize: 4,
+      statusSize: 8,
+      colorError: "rgb(255, 77, 79)" // #ff4f4f
+    },
+    Collapse: {
+      // 组件内部需要调整符合UI规范的样式
+      // 1.自定义样式调整(头部、内容区域自定义样式多)
+      headerPadding: "7px 16px"
+    },
+    Switch: {
+      opacityLoading: 0.35
+    },
+    Select: {
+      // 组件内部需要调整符合UI规范的样式
+      // 1.组件内间距清除按钮等位置调整
+      optionPadding: "5px 10px",
+      // optionSelectedColor: "rgb(24, 144, 255)", // token变量 colorPrimary
+      // optionActiveBg: "rgb(230, 247, 255)", // token变量,悬停色e6f7ff
+      algorithm: true,
+      colorText: "rgba(0, 0, 0, 0.85)" // token变量 colorText
+    },
+    Alert: {
+      // 组件内部需要调整符合UI规范的样式
+      // 1.自定义样式调整
+      defaultPadding: "4px 12px",
+      lineHeight: 1.5714285,
+      fontSize: 14
+    },
+    Notification: {
+      zIndexPopup: 950
+    },
+    // Empty: {
+    //   // 组件内部需要调整符合UI规范的样式
+    //   // 1.空状态默认图标替换
+    // },
+    // Message: {
+    //   // 组件内部需要调整符合UI规范的样式
+    //   // 1.新增关闭按钮功能
+    //   // 2.默认状态图标样式调整
+    //   // 3.布局位置间距调整
+    // },
+    Spin: {
+      dotSize: 20,
+      dotSizeLG: 32,
+      dotSizeSM: 14
+    },
+    Modal: {
+      // 组件内部需要调整符合UI规范的样式
+      // 1.弹窗样式调整:Modal头部底部、确认框默认图标替换，样式调整
+      padding: 14
+    },
+    Drawer: {
+      // 组件内部需要调整符合UI规范的样式
+      // 1.抽屉头部、底部样式调整
+      padding: 14
+    },
+    Tag: {
+      // 组件内部需要调整符合UI规范的样式
+      // 1.标签选择样式调整(背景、颜色、悬停色、禁用色)
+      // 2.新增状态标签、定制化标签
+      marginXS: 6,
+      colorBorder: "rgba(0,0,0,0.09)"
+    },
+    Table: {
+      // 1.表格样式调整基本结束、组件重构
+      headerColor: "rgba(0, 0, 0, 0.65)",
+      // token变量 colorTextSecondary
+      fontWeightStrong: 400,
+      rowHoverBg: "rgba(0, 0, 0, 0.02)",
+      // token变量 colorFillQuaternary
+      rowSelectedBg: "rgba(0, 0, 0, 0.02)",
+      // token变量 colorFillQuaternary
+      rowSelectedHoverBg: "rgba(0, 0, 0, 0.02)",
+      // token变量 colorFillQuaternary
+      cellPaddingBlock: 12,
+      cellPaddingInline: 12,
+      cellPaddingBlockMD: 8,
+      cellPaddingInlineMD: 12
+    },
+    Tree: {
+      // 组件内部需要调整符合UI规范的样式
+      // 1.组件折叠图标替换、位置调整
+      // 2.组件内部间距调整
+      nodeHoverBg: "#e6f7ff",
+      // token变量,悬停色e6f7ff
+      nodeSelectedBg: "#e6f7ff",
+      // token变量,悬停色e6f7ff
+      controlHeightSM: 28,
+      marginXXS: 6,
+      colorBgContainer: "transparent",
+      directoryNodeSelectedBg: "#E6F7FF",
+      directoryNodeSelectedColor: "rgba(0,0,0,0.85)",
+      controlItemBgHover: "#E6F7FF",
+      colorBgTextHover: "transparent"
+    },
+    // Popconfirm: {
+    //   // 组件内部需要调整符合UI规范的样式
+    //   // 1.组件容器内间距调整、标题与确认取消按钮间距
+    //   // 2.限制容器最小宽度、ui规范定宽限制最大宽度
+    // },
+    // Progress: {
+    //   // 组件内部需要调整符合UI规范的样式
+    //   // 1.不同尺寸进度条、进度圈调整
+    //   // 2.新增无限循环进度条
+    // },
+    Tabs: {
+      // 组件内部需要调整符合UI规范的样式
+      // 头部字重、禁用背景色调整
+      horizontalItemPaddingLG: "15px 0",
+      horizontalItemPadding: "10px 0",
+      horizontalItemPaddingSM: "5px 0",
+      lineHeight: 1.5714285,
+      padding: 15,
+      titleFontSize: 14,
+      titleFontSizeLG: 14,
+      titleFontSizeSM: 14,
+      cardPaddingLG: "15px 23px",
+      cardPadding: "8px 15px",
+      cardPaddingSM: "5px 7px"
+    },
+    // Upload: {
+    //   // 组件内部需要调整符合UI规范的样式（高度自定义改造）
+    // },
+    Menu: {
+      // 组件内部需要调整符合UI规范的样式（高度自定义改造）
+      // 1.暗黑模式主题样式调整
+      itemHoverBg: '#F6F7F8',
+      itemActiveBg: '#F6F7F8',
+      itemSelectedBg: '#F6F7F8',
+      subMenuItemBg: 'transparent',
+      itemBorderRadius: 4,
+      itemMarginInline: 8,
+      fontSize: 14,
+      collapsedWidth: 40,
+      itemBg: '#fff'
+    }
+  }
+};

package/lib/ConfigProvider/customTheme.json

@@ -0,0 +1,163 @@
+{
+  "token": {
+    "colorPrimary": "#1890ff",
+    "colorInfo": "#1890ff",
+    "colorError": "#f5222d",
+    "borderRadius": 2,
+    "fontSize": 12,
+    "colorText": "#000000d9",
+    "colorBorder": "#00000026",
+    "colorBorderSecondary": "#0000000f",
+    "controlHeight": 28,
+    "controlHeightLG": 40,
+    "controlHeightSM": 24,
+    "controlHeightXS": 16,
+    "wireframe": true
+  },
+  "components": {
+    "Layout": {
+      "bodyBg": "#F4F5FA",
+      "headerBg": "#1E324E",
+      "headerColor": "white",
+      "headerHeight": 48,
+      "headerPadding": 0
+    },
+    "Button": {
+      "primaryShadow": "none",
+      "dangerShadow": "none",
+      "defaultShadow": "none",
+      "contentFontSizeLG": 14,
+      "contentFontSizeSM": 12,
+      "contentFontSize": 12,
+      "onlyIconSizeLG": 16,
+      "onlyIconSizeSM": 12,
+      "onlyIconSize": 14,
+      "paddingInline": 11
+    },
+    "Radio": {
+      "radioSize": 16,
+      "dotSize": 8
+    },
+    "Checkbox": {
+      "controlInteractiveSize": 16
+    },
+    "Breadcrumb": {
+      "linkHoverColor": "rgb(64, 169, 255)",
+      "colorBgTextHover": "rgb(255, 255, 255)"
+    },
+    "Tooltip": {
+      "colorBgSpotlight": "rgb(255, 255, 255)",
+      "colorTextLightSolid": "rgba(0, 0, 0, 0.85)",
+      "paddingSM": 8
+    },
+    "Dropdown": {
+      "controlItemBgHover": "rgb(230, 247, 255)",
+      "controlHeight": 30,
+      "controlPaddingHorizontal": 6,
+      "paddingXXS": "4px 0"
+    },
+    "Pagination": {
+      "controlItemBgActiveDisabled": "rgba(0, 0, 0, 0.04)"
+    },
+    "Steps": {
+      "controlHeight": 24,
+      "padding": 8,
+      "iconSize": 24,
+      "dotCurrentSize": 8,
+      "dotSize": 8
+    },
+    "DatePicker": {
+      "controlItemBgHover": "rgb(230, 247, 255)",
+      "paddingInline": 9
+    },
+    "Input": {
+      "paddingInline": 9
+    },
+    "InputNumber": {
+      "paddingInline": 9
+    },
+    "Slider": {
+      "railSize": 6,
+      "trackBg": "rgb(24, 144, 255)",
+      "trackHoverBg": "rgb(24, 144, 255)",
+      "borderRadiusXS": 3,
+      "trackBgDisabled": "rgb(217, 217, 217)",
+      "handleSize": 18,
+      "dotSize": 6
+    },
+    "Badge": {
+      "dotSize": 4,
+      "statusSize": 8,
+      "colorError": "rgb(255, 77, 79)"
+    },
+    "Collapse": {
+      "headerPadding": "7px 16px"
+    },
+    "Switch": {
+      "opacityLoading": 0.35
+    },
+    "Select": {
+      "optionPadding": "5px 10px",
+      "optionSelectedColor": "rgb(24, 144, 255)",
+      "optionActiveBg": "rgb(230, 247, 255)",
+      "paddingXXS": 0,
+      "algorithm": true,
+      "colorText": "rgba(0, 0, 0, 0.85)"
+    },
+    "Alert": {
+      "defaultPadding": "4px 12px",
+      "lineHeight": 1.5714285,
+      "fontSize": 14
+    },
+    "Spin": {
+      "dotSize": 20,
+      "dotSizeLG": 32,
+      "dotSizeSM": 14
+    },
+    "Modal": {
+      "padding": 14
+    },
+    "Drawer": {
+      "padding": 14
+    },
+    "Tag": {
+      "marginXS": 6,
+      "colorBorder": "rgba(0,0,0,0.09)"
+    },
+    "Table": {
+      "headerColor": "rgba(0, 0, 0, 0.65)",
+      "fontWeightStrong": 400,
+      "rowHoverBg": "rgba(0, 0, 0, 0.02)",
+      "rowSelectedBg": "rgba(0, 0, 0, 0.02)",
+      "rowSelectedHoverBg": "rgba(0, 0, 0, 0.02)",
+      "cellPaddingBlock": 12,
+      "cellPaddingInline": 12,
+      "cellPaddingBlockMD": 8,
+      "cellPaddingInlineMD": 12
+    },
+    "Tree": {
+      "nodeHoverBg": "#e6f7ff",
+      "nodeSelectedBg": "#e6f7ff",
+      "controlHeightSM": 28,
+      "marginXXS": 6,
+      "colorBgContainer": "transparent",
+      "directoryNodeSelectedBg": "#E6F7FF",
+      "directoryNodeSelectedColor": "rgba(0,0,0,0.85)",
+      "controlItemBgHover": "#E6F7FF",
+      "colorBgTextHover": "transparent"
+    },
+    "Tabs": {
+      "horizontalItemPaddingLG": "15px 0",
+      "horizontalItemPadding": "10px 0",
+      "horizontalItemPaddingSM": "5px 0",
+      "lineHeight": 1.5714285,
+      "padding": 15,
+      "titleFontSize": 14,
+      "titleFontSizeLG": 14,
+      "titleFontSizeSM": 14,
+      "cardPaddingLG": "15px 23px",
+      "cardPadding": "8px 15px",
+      "cardPaddingSM": "5px 7px"
+    }
+  }
+}

package/lib/ConfigProvider/customToken.js

@@ -0,0 +1,44 @@
+// customToken 组件库内部可以使用这些token(各自组件)
+export default {
+  Layout: {
+    bodyBg: "#F4F5FA",
+    headerBg: "#1E324E",
+    headerColor: "white",
+    headerHeight: 48,
+    headerPadding: 0,
+    divisionBg: "rgba(255, 255, 255, 0.3)",
+    // 自定义分割线颜色
+    topNavMenuBg: "#FAFBFE" // 自定义头部下拉导航背景色
+  },
+  Notification: {
+    zIndexPopup: 950 // 不要删除
+  },
+  Button: {
+    btnMainPadding: "0 23px" // 主操作按钮padding
+  },
+  AbreastLayout: {
+    abreastLayoutContentPadding: "0 20px 0 16px",
+    // 左右布局内容区域padding
+    siderCollapseBtnBg: "#0000000f" // 左右布局收起按钮背景色
+  },
+  Tabs: {
+    tabsBorderColor: "rgba(0,0,0,0.09)"
+  },
+  BasicLayout: {
+    collapsedBtnBg: "#F6F7F8",
+    siderBtnColor: "rgba(0, 0, 0, 0.45)",
+    versionColor: "rgba(0, 0, 0, 0.65)",
+    siderBtnHoverColor: "rgb(64, 169, 255)",
+    siderBorderColor: "rgba(0, 0, 0, 0.09)"
+  },
+  Tag: {
+    checkableTagBg: "rgba(0, 0, 0, 0.06)",
+    checkableTagHoverBg: "rgba(0, 0, 0, 0.09)"
+  },
+  SearchBar: {
+    searchBarExpandIconBg: "#F2F3F5"
+  },
+  QuickTransfer: {
+    quickTransferDivisionBg: "#f5f5f5"
+  }
+};

package/lib/ConfigProvider/index.js

@@ -0,0 +1,6 @@
+import ConfigProvider from "./ConfigProvider";
+import SwitchLocale from "./Switch";
+import useLocale from "./useLocale";
+ConfigProvider.Switcher = SwitchLocale;
+ConfigProvider.useLocale = useLocale;
+export default ConfigProvider;

package/lib/ConfigProvider/intlContext.js

@@ -0,0 +1,8 @@
+import React from "react";
+var intlContext = /*#__PURE__*/React.createContext({
+  localeContext: {
+    locale: "",
+    updateLocale: function updateLocale() {}
+  }
+});
+export default intlContext;

package/lib/ConfigProvider/useLocale.js

@@ -0,0 +1,15 @@
+import { useContext } from "react";
+import intlContext from "./intlContext";
+var useLocale = function useLocale() {
+  var _useContext = useContext(intlContext),
+    _useContext$locale = _useContext.locale,
+    locale = _useContext$locale === void 0 ? "zh_CN" : _useContext$locale,
+    setLocale = _useContext.setLocale,
+    locales = _useContext.locales;
+  return {
+    locale: locale,
+    setLocale: setLocale,
+    locales: locales
+  };
+};
+export default useLocale;

package/lib/CustomScrollBar/index.js

@@ -0,0 +1,150 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["children", "style", "onScroll", "showX", "showY", "xDistance", "yDistance"],
+  _excluded2 = ["style"],
+  _excluded3 = ["style"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React, { useRef } from 'react';
+import { Scrollbars } from 'react-custom-scrollbars';
+import PropTypes from 'prop-types';
+var defaultStyle = {
+  height: '100%',
+  width: '100%',
+  overflowX: 'hidden',
+  overflowY: 'hidden'
+};
+var CustomScrollBar = function CustomScrollBar(_ref) {
+  var children = _ref.children,
+    style = _ref.style,
+    onScroll = _ref.onScroll,
+    showX = _ref.showX,
+    showY = _ref.showY,
+    _ref$xDistance = _ref.xDistance,
+    xDistance = _ref$xDistance === void 0 ? 4 : _ref$xDistance,
+    _ref$yDistance = _ref.yDistance,
+    yDistance = _ref$yDistance === void 0 ? 4 : _ref$yDistance,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var scrollRef = useRef(null);
+  var newStyle = Object.assign({}, defaultStyle, style);
+  var onScrollStop = function onScrollStop() {
+    onScroll && onScroll(scrollRef.current.getScrollTop(), scrollRef.current.getClientHeight());
+  };
+  return /*#__PURE__*/React.createElement(Scrollbars, _extends({
+    autoHide: true,
+    autoHideTimeout: 1000,
+    autoHideDuration: 200,
+    style: newStyle,
+    thumbMinSize: 0,
+    ref: scrollRef,
+    onScrollStop: onScrollStop,
+    renderTrackHorizontal: function renderTrackHorizontal(_ref2) {
+      var style = _ref2.style,
+        props = _objectWithoutProperties(_ref2, _excluded2);
+      var finalStyle = _objectSpread(_objectSpread({}, style), {}, {
+        right: 2,
+        bottom: xDistance,
+        left: 2,
+        height: 5,
+        borderRadius: 3,
+        backgroundColor: 'rgba(0, 0, 0, 0.06)'
+      });
+      if (showX) {
+        return /*#__PURE__*/React.createElement("div", _extends({
+          style: finalStyle
+        }, props));
+      }
+      return /*#__PURE__*/React.createElement("div", null);
+    },
+    renderThumbHorizontal: function renderThumbHorizontal(_ref3) {
+      var style = _ref3.style;
+      var finalStyle = _objectSpread(_objectSpread({}, style), {}, {
+        position: 'relative',
+        display: 'block',
+        height: '100%',
+        cursor: 'pointer',
+        borderRadius: 'inherit',
+        backgroundColor: 'rgba(0, 0, 0, 0.45)'
+      });
+      if (showX) {
+        return /*#__PURE__*/React.createElement("div", {
+          style: finalStyle
+        });
+      }
+      return /*#__PURE__*/React.createElement("div", null);
+    },
+    renderThumbVertical: function renderThumbVertical(_ref4) {
+      var style = _ref4.style;
+      return /*#__PURE__*/React.createElement("div", {
+        style: _objectSpread(_objectSpread({}, style), {}, {
+          position: 'relative',
+          display: 'block',
+          width: '100%',
+          cursor: 'pointer',
+          borderRadius: 'inherit',
+          backgroundColor: 'rgba(0, 0, 0, 0.45)'
+        })
+      });
+    },
+    renderTrackVertical: function renderTrackVertical(_ref5) {
+      var style = _ref5.style,
+        props = _objectWithoutProperties(_ref5, _excluded3);
+      if (showY) {
+        return /*#__PURE__*/React.createElement("div", _extends({
+          style: _objectSpread(_objectSpread({}, style), {}, {
+            position: 'absolute',
+            width: 5,
+            right: yDistance,
+            bottom: 2,
+            top: 2,
+            borderRadius: 3,
+            backgroundColor: 'rgba(0, 0, 0, 0.06)'
+          })
+        }, props));
+      }
+      return /*#__PURE__*/React.createElement("div", null);
+    }
+  }, rest), children);
+};
+CustomScrollBar.defaultProps = {
+  style: {
+    height: '100%',
+    width: '100%',
+    overflowX: 'hidden',
+    overflowY: 'hidden'
+  },
+  showX: false,
+  showY: true
+};
+CustomScrollBar.propTypes = {
+  /**
+   * 外层样式
+   */
+  style: PropTypes.object,
+  /**
+   * 滚动回调事件
+   */
+  onScroll: PropTypes.func,
+  /**
+   * 是否显示x轴滚动条
+   */
+  showX: PropTypes.bool,
+  /**
+   * 是否显示y轴滚动条
+   */
+  showY: PropTypes.bool,
+  /**
+   * x轴滚动条距离窗体的距离
+   */
+  xDistance: PropTypes.number,
+  /**
+   * y轴滚动条距离窗体的距离
+   */
+  yDistance: PropTypes.number
+};
+export default CustomScrollBar;