@chaoswise/ui 3.0.6 → 3.0.8

package/lib/Drawer/index.js

@@ -0,0 +1,107 @@
+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 = ["size", "children", "bodyStyle", "title", "extraLeft", "extraRight", "open", "visible", "closable", "styles", "rootClassName"];
+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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+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, { forwardRef, useMemo } from "react";
+import { Drawer } from "../Antd5";
+import PropTypes from "prop-types";
+import classnames from "classnames";
+import { merge } from "lodash-es";
+import useConfigContext from "../useConfigContext";
+import useStyle from "./index.style";
+
+/**
+ * 基于antd Drawer封装，在原有api基础上增加以下api
+ */
+var CWDrawer = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "small" : _ref$size,
+    children = _ref.children,
+    bodyStyle = _ref.bodyStyle,
+    title = _ref.title,
+    extraLeft = _ref.extraLeft,
+    extraRight = _ref.extraRight,
+    open = _ref.open,
+    visible = _ref.visible,
+    _ref$closable = _ref.closable,
+    closable = _ref$closable === void 0 ? true : _ref$closable,
+    _ref$styles = _ref.styles,
+    styles = _ref$styles === void 0 ? {} : _ref$styles,
+    rootClassName = _ref.rootClassName,
+    resP = _objectWithoutProperties(_ref, _excluded);
+  var _useConfigContext = useConfigContext(),
+    getPrefixCls = _useConfigContext.getPrefixCls;
+  var prefixCls = getPrefixCls("drawer");
+  var _useStyle = useStyle(prefixCls),
+    _useStyle2 = _slicedToArray(_useStyle, 3),
+    wrapCSSVar = _useStyle2[0],
+    hashId = _useStyle2[1],
+    cssVarCls = _useStyle2[2];
+  var SIZE_MAP = {
+    small: 480,
+    middle: 660,
+    large: 920
+  };
+  var headerHeight = useMemo(function () {
+    return title ? 52 : 0;
+  }, [title]);
+  var _bodyStyle = {
+    height: "calc(100% - ".concat(headerHeight, "px)"),
+    overflow: "auto"
+  };
+  var cwExtra = useMemo(function () {
+    if (title) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: classnames("".concat(prefixCls, "-extra-custom"), _defineProperty({}, "".concat(prefixCls, "-extra-custom-un-closable"), !closable))
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-extra-custom-left")
+      }, extraLeft), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-extra-custom-right")
+      }, extraRight));
+    }
+    return null;
+  }, [title, extraLeft, extraRight, closable]);
+  return wrapCSSVar( /*#__PURE__*/React.createElement(Drawer, _extends({
+    ref: ref,
+    rootClassName: classnames("".concat(prefixCls, "-wrapper"), rootClassName),
+    open: open !== null && open !== void 0 ? open : visible,
+    width: SIZE_MAP[size],
+    closable: closable,
+    styles: merge({
+      body: _objectSpread(_objectSpread({}, _bodyStyle), bodyStyle)
+    }, styles),
+    title: title,
+    extra: cwExtra
+  }, resP), children));
+});
+CWDrawer.propTypes = {
+  /**
+   * 弹窗尺寸
+   */
+  size: PropTypes.oneOf(["small", "middle", "large"]),
+  /**
+   * 抽屉左上角的操作区域(标题之后)
+   */
+  extraLeft: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * 抽屉右上角的操作区域
+   */
+  extraRight: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * 底部页脚
+   */
+  footer: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+};
+export default CWDrawer;

package/lib/Drawer/index.style.js

@@ -0,0 +1,93 @@
+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); }
+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); }
+import { genStyleHooks } from "../Antd5/theme/internal";
+import { unit } from '@ant-design/cssinjs';
+var genCustomCWDrawerStyle = function genCustomCWDrawerStyle(token) {
+  var prefixCls = token.antCls;
+  var drawerPrefix = "".concat(prefixCls, "-drawer");
+  var drawerExtraPrefix = "".concat(prefixCls, "-drawer-extra-custom");
+  return _defineProperty({}, "".concat(drawerPrefix).concat(drawerPrefix, "-wrapper"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(drawerPrefix, "-content-wrapper"), {
+    overflow: "visible" // UI规范内容区滚动
+  }), "".concat(drawerPrefix, "-title"), {
+    fontWeight: "500",
+    fontSize: "16px" // UI规范
+  }), "".concat(drawerPrefix, "-content"), {
+    overflow: "visible" // UI规范 内容区域滚动
+  }), "".concat(drawerPrefix, "-close"), {
+    position: "absolute",
+    top: "0",
+    right: "24px",
+    // UI规范
+    zIndex: "10",
+    width: "16px",
+    // UI规范
+    height: "51px",
+    // UI规范
+    padding: "0",
+    color: token.colorText,
+    fontSize: "16px",
+    // UI规范
+    lineHeight: "51px",
+    // UI规范
+    cursor: "pointer",
+    "&:focus, &:hover": {
+      color: "".concat(token.colorPrimaryHover, " !important")
+    }
+  }), "".concat(drawerPrefix, "-header-no-title"), {
+    color: token.colorText,
+    background: token.colorBgContainer
+  }), "".concat(drawerPrefix, "-body"), {
+    padding: "24px !important",
+    fontSize: token.fontSize,
+    lineHeight: token.lineHeight,
+    wordWrap: "break-word"
+  }), "".concat(drawerPrefix, "-footer"), {
+    width: "100%",
+    borderTop: "".concat(unit(token.lineWidth), " ").concat(token.lineType, " ").concat(token.colorBorderSecondary, " !important"),
+    // 符合UI规范
+    padding: "12px 24px !important",
+    background: token.colorBgContainer,
+    display: "flex",
+    alignItems: "center",
+    zIndex: "10"
+  }), "".concat(drawerPrefix, "-wrapper-body"), {
+    overflow: "visible" // UI规范内容区滚动
+  }), "".concat(drawerPrefix, "-header"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    position: "relative",
+    height: "51px",
+    lineHeight: "51px !important",
+    flex: "none !important",
+    padding: "0 24px !important",
+    borderBottom: "".concat(unit(token.lineWidth), " ").concat(token.lineType).concat(token.colorBorderSecondary)
+  }, "".concat(drawerPrefix, "-close"), {
+    marginRight: "0"
+  }), "&-title", _defineProperty({
+    flex: "none !important"
+  }, "".concat(drawerPrefix, "-title"), {
+    flex: "none",
+    marginRight: "16px"
+  })), "".concat(drawerPrefix, "-extra"), _defineProperty({
+    flex: "1"
+  }, drawerExtraPrefix, _defineProperty(_defineProperty({
+    display: "flex",
+    flex: "1",
+    marginRight: "32px"
+  }, "".concat(drawerExtraPrefix, "-left"), {
+    display: "flex",
+    flex: "1",
+    alignItems: "center"
+  }), "".concat(drawerExtraPrefix, "-right"), {
+    display: "flex",
+    alignItems: "center"
+  }))), "".concat(drawerExtraPrefix, "-un-closable"), {
+    marginRight: "0 !important"
+  })));
+};
+// ============================== Export ==============================
+export default genStyleHooks("CWDrawer", function (token) {
+  return [
+  //
+  genCustomCWDrawerStyle(token)];
+});

package/lib/Dropdown/DropdownButton.js

@@ -0,0 +1,20 @@
+var _excluded = ["visible", "open", "onVisibleChange"];
+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 _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, { forwardRef } from "react";
+import AntdDropdown from "../Antd5/dropdown";
+var AntdDropdownButton = AntdDropdown.Button;
+var DropdownButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  var visible = props.visible,
+    open = props.open,
+    onVisibleChange = props.onVisibleChange,
+    rest = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement(AntdDropdownButton, _extends({
+    open: open !== null && open !== void 0 ? open : visible,
+    onOpenChange: onVisibleChange
+  }, rest, {
+    ref: ref
+  }));
+});
+export default DropdownButton;

package/lib/Dropdown/index.js

@@ -0,0 +1,39 @@
+var _excluded = ["visible", "open", "onVisibleChange"];
+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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+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, { forwardRef } from "react";
+import AntdDropdown from "../Antd5/dropdown";
+import DropdownButton from "./DropdownButton";
+import { cloneComProps } from "../utils";
+import useConfigContext from "../useConfigContext";
+import useStyle from "./index.style";
+var Dropdown = /*#__PURE__*/forwardRef(function (props, ref) {
+  var visible = props.visible,
+    open = props.open,
+    onVisibleChange = props.onVisibleChange,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _useConfigContext = useConfigContext(),
+    getPrefixCls = _useConfigContext.getPrefixCls;
+  var prefixCls = getPrefixCls("dropdown");
+  var _useStyle = useStyle(prefixCls),
+    _useStyle2 = _slicedToArray(_useStyle, 3),
+    wrapCSSVar = _useStyle2[0],
+    hashId = _useStyle2[1],
+    cssVarCls = _useStyle2[2];
+  return wrapCSSVar( /*#__PURE__*/React.createElement(AntdDropdown, _extends({
+    open: open !== null && open !== void 0 ? open : visible,
+    onOpenChange: onVisibleChange
+  }, rest, {
+    ref: ref
+  })));
+});
+cloneComProps(AntdDropdown, Dropdown);
+Dropdown.Button = DropdownButton;
+export default Dropdown;

package/lib/Dropdown/index.style.js

@@ -0,0 +1,22 @@
+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); }
+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); }
+import { genStyleHooks } from "../Antd5/theme/internal";
+var genCustomCWDropdownStyle = function genCustomCWDropdownStyle(token) {
+  var prefixCls = token.antCls;
+  var dropdownPrefix = "".concat(prefixCls, "-dropdown");
+  return _defineProperty({}, "".concat(dropdownPrefix, "-menu"), _defineProperty({
+    maxWidth: "160px"
+  }, "".concat(dropdownPrefix, "-menu-item"), {
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis"
+  }));
+};
+// ============================== Export ==============================
+export default genStyleHooks("CWDropdown", function (token) {
+  return [
+  //
+  genCustomCWDropdownStyle(token)];
+});

package/lib/EchartsArea/index.js

@@ -0,0 +1,113 @@
+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); }
+import _EchartsLine from "@chaoswise/ui/lib/EchartsLine";
+var _excluded = ["option", "data", "isMergeOption"];
+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, { forw, forwardRef } from "react";
+import PropTypes from "prop-types";
+var _ = require("lodash-es");
+import CWTheme from "../../config/theme/CWTheme";
+
+/**
+ *
+ * 面积图组件，设置了默认option，可直接传入data，也支持设置自己的option配置，配置具体设置参考Echarts文档。更多API参考echarts-for-react
+ */
+var EchartsArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var option = _ref.option,
+    data = _ref.data,
+    _ref$isMergeOption = _ref.isMergeOption,
+    isMergeOption = _ref$isMergeOption === void 0 ? true : _ref$isMergeOption,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var mergeOption = function mergeOption(option) {
+    var color = CWTheme.color;
+    var lineOption = {
+      series: []
+    };
+    if (data) {
+      var newSeriesData = data.seriesData && data.seriesData.map(function (item, index) {
+        return _objectSpread({
+          type: "line",
+          smooth: true,
+          areaStyle: {},
+          symbol: "none",
+          hoverAnimation: false
+        }, item);
+      });
+      lineOption.series = newSeriesData;
+    }
+    if (option) {
+      _.merge(lineOption, option);
+    }
+    return lineOption;
+  };
+  return /*#__PURE__*/React.createElement(_EchartsLine, _extends({
+    option: isMergeOption ? mergeOption(option) : option,
+    data: data,
+    ref: ref
+  }, rest));
+});
+EchartsArea.propTypes = {
+  /**
+   * 图表配置数据
+   */
+  option: PropTypes.object,
+  /**
+   * 图表数据源{
+   * categoryData:[类目数据]
+   * seriesData:[{name:string,data:[参数值]},...]
+   * }
+   * 目前默认仅支持单轴，若要设置多轴需自行设置option
+   */
+  data: PropTypes.object,
+  /**
+   * setOption时，不合并数据，默认值为false。
+   */
+  notMerge: PropTypes.bool,
+  /**
+   * setOption时，懒加载数据，默认值为false。
+   */
+  lazyUpdate: PropTypes.bool,
+  /**
+   * 应用的主题。可以是一个主题的配置对象，也可以是使用已经通过 echarts.registerTheme 注册的主题名称。
+   */
+  theme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  /**
+   * echats div的样式。
+   */
+  style: PropTypes.object,
+  /**
+   * echats div的class。
+   */
+  className: PropTypes.string,
+  /**
+   * 当图表加载完毕时返回一个回调函数，这个函数的参数为echarts对象。
+   */
+  onChartReady: PropTypes.func,
+  /**
+   * echarts加载选项配置。
+   */
+  loadingOption: PropTypes.object,
+  /**
+   * 是否在图表加载时显示加载蒙版，默认值为false。
+   */
+  showLoading: PropTypes.bool,
+  /**
+   * echarts对象中的opts，设置初始化时的附加参数。
+   */
+  opts: PropTypes.object,
+  /**
+   * 绑定echarts事件，将使用echarts event object和the echart object作为参数进行回调。例如：
+   * onEvents = {
+   *  'click': this.onChartClick,
+   *  'legendselectchanged': this.onChartLegendselectchanged
+   * }
+   */
+  onEvents: PropTypes.object
+};
+export default EchartsArea;

package/lib/EchartsBar/index.js

@@ -0,0 +1,212 @@
+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); }
+import _EchartsBase from "@chaoswise/ui/lib/EchartsBase";
+var _excluded = ["categoryAxis", "option", "data", "isMergeOption"];
+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, { forwardRef } from "react";
+import PropTypes from "prop-types";
+var _ = require("lodash-es");
+
+/**
+ *
+ * 二次封装的柱状图组件，设置了柱状图的默认option，可直接传入data，可设置图表的类目轴，也支持设置自己的option配置，配置具体设置参考Echarts文档。更多API参考echarts-for-react
+ */
+
+var EchartsBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var categoryAxis = _ref.categoryAxis,
+    option = _ref.option,
+    data = _ref.data,
+    _ref$isMergeOption = _ref.isMergeOption,
+    isMergeOption = _ref$isMergeOption === void 0 ? true : _ref$isMergeOption,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var mergeOption = function mergeOption(option) {
+    var barOption = {
+      tooltip: {
+        confine: true,
+        enterable: true,
+        extraCssText: "max-height:80%;overflow:auto;box-shadow: 0 3px 6px -4px rgba(0,0,0,0.12), 0 6px 16px 0 rgba(0,0,0,0.08), 0 9px 28px 8px rgba(0,0,0,0.05);border-radius: 2px",
+        position: function position(point, params, dom, rect, size) {
+          dom.addEventListener("mouseleave", function (e) {
+            e.currentTarget.style.display = "none";
+          });
+          var x = point[0] + 4;
+          var y = point[1] + 5;
+          if (point[1] + 5 + size.contentSize[1] > size.viewSize[1]) {
+            y = point[1] - 5 - size.contentSize[1];
+            if (y < 16) {
+              y = 16;
+            }
+          }
+          if (point[0] + 4 + size.contentSize[0] > size.viewSize[0]) {
+            x = point[0] - 8 - size.contentSize[0];
+          }
+          return [x, y];
+        }
+      },
+      legend: {
+        icon: "circle",
+        bottom: 10,
+        left: "center",
+        data: []
+      },
+      grid: {
+        top: "10%",
+        left: "5%",
+        right: "5%",
+        bottom: "10%",
+        containLabel: true
+      },
+      xAxis: {},
+      yAxis: {},
+      series: []
+    };
+    var category = categoryAxis || "xAxis";
+    if (category === "xAxis") {
+      barOption.xAxis = {
+        type: "category",
+        data: [],
+        boundaryGap: true,
+        axisTick: {
+          alignWithLabel: true
+        },
+        axisLine: {
+          lineStyle: {
+            // color: 'rgba(128, 128, 128, 0.5)'
+          }
+        }
+      };
+      barOption.yAxis = {
+        type: "value",
+        show: true,
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        }
+      };
+      data && data.categoryData && data.categoryData.map(function (item) {
+        barOption.xAxis.data.push(item);
+      });
+    } else if (category === "yAxis") {
+      barOption.yAxis = {
+        type: "category",
+        data: [],
+        boundaryGap: true,
+        axisTick: {
+          alignWithLabel: true
+        },
+        axisLine: {
+          lineStyle: {
+            // color: 'rgba(128, 128, 128, 0.5)'
+          }
+        }
+      };
+      barOption.xAxis = {
+        type: "value",
+        show: true,
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        }
+      };
+      data && data.categoryData && data.categoryData.map(function (item) {
+        barOption.yAxis.data.push(item);
+      });
+    } else {
+      console.log("categoryAxis\u53C2\u6570\u9519\u8BEF\uFF0C\u53EF\u9009\u503C\u4E3A'xAxis'\u548C'yAxis'");
+    }
+    if (data) {
+      var newSeriesData = data.seriesData && data.seriesData.map(function (item) {
+        return _objectSpread({
+          type: "bar",
+          barGap: "0%",
+          barCategoryGap: "50%"
+        }, item);
+      });
+      barOption.legend.data = data.seriesData && data.seriesData.map(function (item) {
+        return item.name;
+      });
+      barOption.series = newSeriesData;
+    }
+    if (option) {
+      _.merge(barOption, option);
+    }
+    return barOption;
+  };
+  return /*#__PURE__*/React.createElement(_EchartsBase, _extends({
+    option: isMergeOption ? mergeOption(option) : option,
+    ref: ref
+  }, rest));
+});
+EchartsBar.propTypes = {
+  /**
+   * 类目轴,可选值为'xAxis'和'yAxis',默认为x轴'xAxis'
+   */
+  categoryAxis: PropTypes.string,
+  /**
+   * 图表配置数据
+   */
+  option: PropTypes.object,
+  /**
+   * 图表数据源{
+   * categoryData:[类目数据]
+   * seriesData:[{name:string,data:[参数值]},...]
+   * }
+   * 目前默认仅支持单轴，若要设置多轴需自行设置option
+   */
+  data: PropTypes.object,
+  /**
+   * setOption时，不合并数据，默认值为false。
+   */
+  notMerge: PropTypes.bool,
+  /**
+   * setOption时，懒加载数据，默认值为false。
+   */
+  lazyUpdate: PropTypes.bool,
+  /**
+   * 应用的主题。可以是一个主题的配置对象，也可以是使用已经通过 echarts.registerTheme 注册的主题名称。
+   */
+  theme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  /**
+   * echats div的样式。
+   */
+  style: PropTypes.object,
+  /**
+   * echats div的class。
+   */
+  className: PropTypes.string,
+  /**
+   * 当图表加载完毕时返回一个回调函数，这个函数的参数为echarts对象。
+   */
+  onChartReady: PropTypes.func,
+  /**
+   * echarts加载选项配置。
+   */
+  loadingOption: PropTypes.object,
+  /**
+   * 是否在图表加载时显示加载蒙版，默认值为false。
+   */
+  showLoading: PropTypes.bool,
+  /**
+   * echarts对象中的opts，设置初始化时的附加参数。
+   */
+  opts: PropTypes.object,
+  /**
+   * 绑定echarts事件，将使用echarts event object和the echart object作为参数进行回调。例如：
+   * onEvents = {
+   *  'click': this.onChartClick,
+   *  'legendselectchanged': this.onChartLegendselectchanged
+   * }
+   */
+  onEvents: PropTypes.object
+};
+export default EchartsBar;