hc-busin-components 1.0.2 → 1.0.4

package/dist/CascaderCluster/index.js

@@ -15,7 +15,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 { SearchOutlined } from '@ant-design/icons';
 import { ConfigProvider, Divider, Dropdown, Input, Popover } from 'antd';
-import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import ComponentUninstalled from "../ComponentUninstalled";
 import Icon from "../Icon";
 import TextEllipsis from "../TextEllipsis";
@@ -91,6 +91,10 @@ var CascaderCluster = function CascaderCluster(props) {
     _useState12 = _slicedToArray(_useState11, 2),
     currentCluster = _useState12[0],
     setCurrentCluster = _useState12[1];
+  var onClusterChangeRef = useRef(onClusterChange);
+  useEffect(function () {
+    onClusterChangeRef.current = onClusterChange;
+  }, [onClusterChange]);
   var resolvedDataInterface = useMemo(function () {
     if (dataInterfaceProp) return dataInterfaceProp;
     if (services) return buildCascaderClusterDataInterface(space, isBackend, storage, services);
@@ -103,6 +107,9 @@ var CascaderCluster = function CascaderCluster(props) {
     writeFilterCache(storage, isBackend, pathname, params);
     onFilterCacheChange === null || onFilterCacheChange === void 0 || onFilterCacheChange(params);
   }, [storage, isBackend, pathname, onFilterCacheChange]);
+  var emitClusterChange = useCallback(function (clusterName) {
+    onClusterChangeRef.current(clusterName);
+  }, []);
   var getInitCluster = useCallback(function (list, dcData) {
     var cachedClusterName = getCache().clusterName;
     var all = list || [];
@@ -120,43 +127,45 @@ var CascaderCluster = function CascaderCluster(props) {
     var clusterName = cluster.clusterName || '';
     setCurrentCluster(clusterName);
     if (clusterName) {
-      onClusterChange(clusterName);
+      emitClusterChange(clusterName);
     }
     saveCache(_objectSpread(_objectSpread({}, dcData), {}, {
       clusterName: clusterName
     }));
-  }, [getCache, onClusterChange, saveCache]);
-  var fetchClusterList = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-    var _resolvedDataInterfac;
-    var params,
-      list,
-      _args = arguments;
-    return _regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          params = _args.length > 0 && _args[0] !== undefined ? _args[0] : currentDatacenter;
-          if (resolvedDataInterface !== null && resolvedDataInterface !== void 0 && (_resolvedDataInterfac = resolvedDataInterface.resource) !== null && _resolvedDataInterfac !== void 0 && _resolvedDataInterfac.service) {
-            _context.next = 3;
-            break;
-          }
-          return _context.abrupt("return");
-        case 3:
-          _context.next = 5;
-          return resolvedDataInterface.resource.service(_objectSpread(_objectSpread({}, resolvedDataInterface.resource.params || {}), {}, {
-            dataCenterId: params === null || params === void 0 ? void 0 : params.dataCenterId,
-            logicalUnitId: params === null || params === void 0 ? void 0 : params.logicalUnitId
-          }));
-        case 5:
-          list = _context.sent;
-          setAllClusters(list);
-          setClusterList(list);
-          getInitCluster(list, params);
-        case 9:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  })), [resolvedDataInterface, currentDatacenter, getInitCluster]);
+  }, [emitClusterChange, getCache, saveCache]);
+  var fetchClusterList = useCallback( /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(params) {
+      var _resolvedDataInterfac;
+      var list;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (resolvedDataInterface !== null && resolvedDataInterface !== void 0 && (_resolvedDataInterfac = resolvedDataInterface.resource) !== null && _resolvedDataInterfac !== void 0 && _resolvedDataInterfac.service) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            _context.next = 4;
+            return resolvedDataInterface.resource.service(_objectSpread(_objectSpread({}, resolvedDataInterface.resource.params || {}), {}, {
+              dataCenterId: params === null || params === void 0 ? void 0 : params.dataCenterId,
+              logicalUnitId: params === null || params === void 0 ? void 0 : params.logicalUnitId
+            }));
+          case 4:
+            list = _context.sent;
+            setAllClusters(list);
+            setClusterList(list);
+            getInitCluster(list, params);
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(), [resolvedDataInterface, getInitCluster]);
   var getLdcWriteBack = useCallback(function (list) {
     var cache = getCache();
     if (cache.id === '-1') {
@@ -257,7 +266,7 @@ var CascaderCluster = function CascaderCluster(props) {
     if (space === 'cluster') {
       var cluster = String(storage.getSession('clusterName') || '');
       setCurrentCluster(cluster);
-      onClusterChange(cluster);
+      emitClusterChange(cluster);
       setDatacenterList([]);
       setClusterList([]);
       setAllClusters([]);
@@ -269,7 +278,7 @@ var CascaderCluster = function CascaderCluster(props) {
       return;
     }
     fetchDatacenterList();
-  }, [space, datacenters, clusters, compoKey, fetchDatacenterList, getInitDatacenter, onClusterChange, storage]);
+  }, [space, datacenters, clusters, compoKey, fetchDatacenterList, getInitDatacenter, emitClusterChange, storage]);
   useEffect(function () {
     if (!pathname.includes('resourceQuotaCenter')) return;
     var timer = setTimeout(function () {
@@ -331,7 +340,7 @@ var CascaderCluster = function CascaderCluster(props) {
   };
   var handleChangeCluster = function handleChangeCluster(cluster) {
     setCurrentCluster(cluster.clusterName);
-    onClusterChange(cluster.clusterName);
+    emitClusterChange(cluster.clusterName);
     saveCache(_objectSpread(_objectSpread({}, currentDatacenter), {}, {
       clusterName: cluster.clusterName
     }));

package/dist/CombinTable/index.js

@@ -1,5 +1,6 @@
 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 = ["columns", "search", "fieldNames", "placeholder", "border", "prefixIcon", "addonBefore", "addonAfter", "request", "values", "setValues", "setting", "refresh", "topNode", "defaultAfterChange", "defaultSelectKey"];
+var _excluded = ["columns", "search", "fieldNames", "placeholder", "border", "prefixIcon", "addonBefore", "addonAfter", "request", "values", "setValues", "setting", "refresh", "topNode", "defaultAfterChange", "defaultSelectKey", "pagination"],
+  _excluded2 = ["onChange", "className", "plain"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, 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; }
@@ -19,6 +20,13 @@ import React, { useEffect, useMemo, useState } from 'react';
 import CombineSearch from "../CombineSearch";
 import Icon from "../Icon";
 import RenderContent from "./components/RenderContent";
+import { useCombinTableStyles } from "./styles";
+var DEFAULT_PAGINATION = {
+  hideOnSinglePage: false,
+  showSizeChanger: true,
+  showQuickJumper: true,
+  pageSize: 10
+};
 var CombinTable = function CombinTable(props) {
   var columns = props.columns,
     _props$search = props.search,
@@ -43,7 +51,11 @@ var CombinTable = function CombinTable(props) {
     topNode = props.topNode,
     defaultAfterChange = props.defaultAfterChange,
     defaultSelectKey = props.defaultSelectKey,
+    paginationProp = props.pagination,
     tableProps = _objectWithoutProperties(props, _excluded);
+  var _useCombinTableStyles = useCombinTableStyles(),
+    styles = _useCombinTableStyles.styles,
+    cx = _useCombinTableStyles.cx;
   var SearchProps = {
     fieldNames: fieldNames,
     placeholder: placeholder,
@@ -171,6 +183,22 @@ var CombinTable = function CombinTable(props) {
     }
     return doms;
   }, [setting, refresh, values, search, request]);
+  var paginationConfig = useMemo(function () {
+    if (paginationProp === false) {
+      return false;
+    }
+    var userPagination = paginationProp === undefined ? DEFAULT_PAGINATION : paginationProp;
+    var userOnChange = userPagination.onChange,
+      className = userPagination.className,
+      plain = userPagination.plain,
+      restPagination = _objectWithoutProperties(userPagination, _excluded2);
+    return _objectSpread(_objectSpread({}, restPagination), {}, {
+      className: cx(!plain && styles.paginationHighlight, className),
+      onChange: function onChange(page, size) {
+        userOnChange === null || userOnChange === void 0 || userOnChange(page, size, values);
+      }
+    });
+  }, [paginationProp, values, styles.paginationHighlight, cx]);
 
   // 获取表头筛选项
   useEffect(function () {
@@ -201,13 +229,7 @@ var CombinTable = function CombinTable(props) {
   }, topNode) : null, /*#__PURE__*/React.createElement(Table, _extends({
     columns: resetColumns
   }, tableProps, {
-    pagination: _objectSpread(_objectSpread({}, tableProps.pagination), {}, {
-      onChange: function onChange(page, size) {
-        if (tableProps !== null && tableProps !== void 0 && tableProps.pagination && tableProps !== null && tableProps !== void 0 && tableProps.pagination.onChange) {
-          tableProps === null || tableProps === void 0 || tableProps.pagination.onChange(page, size, values);
-        }
-      }
-    })
+    pagination: paginationConfig
   })), /*#__PURE__*/React.createElement(Modal, {
     title: localStorage.getItem('i18nextLng') === 'en-US' || localStorage.getItem('language') === 'en-US' ? 'Table Header Setting' : '表头设置',
     destroyOnClose: true,

package/dist/CombinTable/styles/index.d.ts

@@ -1,3 +1,9 @@
+export declare const useCombinTableStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    container: import("antd-style").SerializedStyles;
+    paginationHighlight: import("antd-style").SerializedStyles;
+}>;
+/** @deprecated 使用 useCombinTableStyles */
 export declare const useFilterStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
     container: import("antd-style").SerializedStyles;
+    paginationHighlight: import("antd-style").SerializedStyles;
 }>;

package/dist/CombinTable/styles/index.js

@@ -1,11 +1,15 @@
-var _templateObject;
+var _templateObject, _templateObject2;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { createStyles } from "antd-style";
-export var useFilterStyles = createStyles(function (_ref) {
+import { createStyles } from 'antd-style';
+export var useCombinTableStyles = createStyles(function (_ref) {
   var prefixCls = _ref.prefixCls,
     token = _ref.token,
     css = _ref.css;
   return {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    /* transform: translateY(); */\n  "])))
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    /* transform: translateY(); */\n  "]))),
+    paginationHighlight: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    .", "-pagination-item:not(.", "-pagination-item-active):hover {\n      border-color: ", ";\n      background: ", ";\n\n      a {\n        color: ", ";\n      }\n    }\n\n    .", "-pagination-item-active {\n      border-color: ", ";\n      background: ", ";\n\n      a {\n        color: #fff;\n      }\n\n      &:hover {\n        border-color: ", ";\n        background: ", ";\n\n        a {\n          color: #fff;\n        }\n      }\n    }\n\n    .", "-pagination-prev:hover .", "-pagination-item-link,\n    .", "-pagination-next:hover .", "-pagination-item-link,\n    .", "-pagination-jump-prev:hover .", "-pagination-item-link,\n    .", "-pagination-jump-next:hover .", "-pagination-item-link {\n      border-color: ", ";\n      color: ", ";\n    }\n  "])), prefixCls, prefixCls, token.colorPrimary, token.colorPrimaryBg, token.colorPrimary, prefixCls, token.colorPrimary, token.colorPrimary, token.colorPrimaryHover, token.colorPrimaryHover, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, token.colorPrimary, token.colorPrimary)
   };
-});
+});
+
+/** @deprecated 使用 useCombinTableStyles */
+export var useFilterStyles = useCombinTableStyles;

package/dist/CombinTable/types/index.d.ts

@@ -3,13 +3,16 @@ import { GetProp, GetProps, Table, TablePaginationConfig } from 'antd';
 import ComBineSearchProps, { CombineOptionsType } from "../../CombineSearch/types";
 type TableProps = GetProps<typeof Table>;
 type column = GetProp<typeof Table, 'columns'>[number];
-type pagination = false | Omit<TablePaginationConfig, 'onChange'>;
+export type CombinTablePaginationConfig = Omit<TablePaginationConfig, 'onChange'> & {
+    /** 朴素分页风格；`true` 为 antd 默认样式，不传或为 `false` 时高亮当前页 */
+    plain?: boolean;
+    onChange?: (page: number, size: number, values: Record<string, any>) => void;
+};
+type pagination = false | CombinTablePaginationConfig;
 export type ColumnProps = column & CombineOptionsType;
 interface AntTableProps extends Omit<TableProps, 'columns' | 'pagination'> {
     columns?: ColumnProps[];
-    pagination?: pagination & {
-        onChange?: (page: number, size: number, values: Record<string, any>) => void;
-    };
+    pagination?: pagination;
     setting?: boolean;
     refresh?: boolean;
     topNode?: React.ReactNode;

package/dist/CombineSearch/components/Tags.js

@@ -5,7 +5,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(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); }
 /* eslint-disable no-case-declarations */
-import { CloseCircleOutlined } from '@ant-design/icons';
+
 import { Divider, Space, Tag } from 'antd';
 import React, { useCallback, useMemo } from 'react';
 import Icon from "../../Icon";
@@ -64,7 +64,11 @@ var CombineTags = function CombineTags(_ref) {
           },
           className: styles.currentTag,
           key: key,
-          closeIcon: /*#__PURE__*/React.createElement(CloseCircleOutlined, null),
+          closeIcon: /*#__PURE__*/React.createElement("span", {
+            className: styles.closeIcon
+          }, /*#__PURE__*/React.createElement(Icon, {
+            name: "v35_Failure_Filled"
+          })),
           onClose: function onClose() {
             setCombineValues(function (values) {
               return JSON.parse(JSON.stringify(_objectSpread(_objectSpread({}, values), {}, _defineProperty({}, key, undefined))));
@@ -97,7 +101,11 @@ var CombineTags = function CombineTags(_ref) {
     style: {
       display: 'flex',
       alignItems: 'center',
-      width: '50px'
+      width: '60px'
+    },
+    onClick: function onClick() {
+      setCombineValues({});
+      setCurrent('');
     }
   }, /*#__PURE__*/React.createElement(Divider, {
     type: "vertical"
@@ -105,11 +113,13 @@ var CombineTags = function CombineTags(_ref) {
     name: "v35_TrashCan",
     style: {
       cursor: 'pointer'
-    },
-    onClick: function onClick() {
-      setCombineValues({});
-      setCurrent('');
     }
-  })) : null);
+  }), /*#__PURE__*/React.createElement("p", {
+    style: {
+      fontSize: '12px',
+      marginLeft: '4px',
+      cursor: 'pointer'
+    }
+  }, "\u6E05\u7A7A")) : null);
 };
 export default CombineTags;

package/dist/CombineSearch/style/index.d.ts

@@ -11,4 +11,5 @@ export declare const useTagsStyles: (props?: unknown) => import("antd-style").Re
     label: import("antd-style").SerializedStyles;
     value: import("antd-style").SerializedStyles;
     currentTag: import("antd-style").SerializedStyles;
+    closeIcon: import("antd-style").SerializedStyles;
 }>;

package/dist/CombineSearch/style/index.js

@@ -1,4 +1,4 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { createStyles } from "antd-style";
 import edit from "./edit.svg";
@@ -8,7 +8,7 @@ export var useCombineBoxStyles = createStyles(function (_ref, props) {
     token = _ref.token,
     stylish = _ref.stylish;
   return {
-    card: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border-radius: ", "px;\n    min-width: 300px;\n    background-color: #f7f7f7;\n    border: ", ";\n    .icon-span {\n      width: 28px;\n      min-width: 28px;\n      display: flex;\n      justify-content: end;\n      align-items: center;\n      transform: translateX(5px)\n    }\n    .select-no-padding {\n      .", "-select-selector {\n        padding: 0 0 0 12px !important\n      }\n    }\n  "])), token.borderRadius, props.focus ? "1px solid ".concat(token.colorPrimary) : "1px solid ".concat(props.border ? token.colorBorder : 'transparent'), prefixCls),
+    card: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border-radius: ", "px;\n    min-width: 300px;\n    background-color: #f7f7f7;\n    border: ", ";\n    .icon-span {\n      width: 28px;\n      min-width: 28px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      .hc-icon {\n        transform: translateX(2px)\n      }\n    }\n    .select-no-padding {\n      .", "-select-selector {\n        padding: 0px !important\n      }\n    }\n  "])), token.borderRadius, props.focus ? "1px solid ".concat(token.colorPrimary) : "1px solid ".concat(props.border ? token.colorBorder : 'transparent'), prefixCls),
     box: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: 100%;\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    justify-content: space-between;\n  "]))),
     left: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 100%;\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-wrap: wrap;\n  "]))),
     right: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: flex;\n    gap: 2px;\n    align-items: center;\n  "])))
@@ -21,6 +21,7 @@ export var useTagsStyles = createStyles(function (_ref2) {
   return {
     label: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    color: rgba(0, 0, 0, 0.3);\n    cursor: url(", "), pointer;\n  "])), edit),
     value: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    color: rgba(89, 89, 89, 1);\n    padding-right: 12px;\n    overflow: hidden;\n    cursor: url(", "), pointer;\n  "])), edit),
-    currentTag: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    max-width: 350px;\n    overflow: hidden;\n  "])))
+    currentTag: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    max-width: 350px;\n    background-color: #f4f4f4;\n    border-color: #E0E0E0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  "]))),
+    closeIcon: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 0;\n    font-size: 12px;\n\n    /* Icon \u4E3A 1em\uFF0C\u9700\u76F4\u63A5\u6539 svg \u5C3A\u5BF8 */\n    .hc-icon {\n      width: 12px;\n      height: 12px;\n      font-size: 12px;\n      vertical-align: middle;\n    }\n  "])))
   };
 });

package/dist/DateRangePicker/index.d.ts

@@ -13,6 +13,16 @@ export interface TimeRangeInfo {
     timeUnitId?: number;
     id?: number;
 }
+export interface DateRangePickerValue {
+    from: string;
+    to: string;
+    inputValue?: string;
+    diff?: number;
+    sliderValue?: number | null;
+    interval?: number;
+    timeUnitId?: number;
+    id?: number;
+}
 export interface QuickTimeOption {
     id: number;
     value: number;
@@ -21,9 +31,14 @@ export interface QuickTimeOption {
     interval?: number;
     timeUnitId?: number;
 }
+export interface DateRangePickerLocale {
+    recent: React.ReactNode;
+    custom: React.ReactNode;
+    confirm: React.ReactNode;
+}
 export interface DateRangePickerProps {
     onChange?: (timeInfo: TimeRangeInfo) => void;
-    value?: TimeRangeInfo;
+    value?: DateRangePickerValue;
     format?: string;
     placement?: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
     quickTimeOptions?: QuickTimeOption[];
@@ -33,6 +48,7 @@ export interface DateRangePickerProps {
     width?: number | string;
     disabled?: boolean;
     flat?: boolean;
+    locale?: Partial<DateRangePickerLocale>;
 }
 declare const DateRangePicker: React.FC<DateRangePickerProps>;
 export default DateRangePicker;