@ucloud-fe/react-components 1.17.0 → 1.18.0

package/index.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, ReactNode, Component, PureComponent, HTMLAttributes, TextareaHTMLAttributes } from 'react';
+import type { Component, CSSProperties, HTMLAttributes, PureComponent, ReactNode, TextareaHTMLAttributes } from 'react';
 
 // 忽略 T 对象中 键在 K 中的所有的属性
 type Override<T1, T2> = Omit<T1, keyof T2> & T2;
@@ -446,44 +446,8 @@ export declare class Tag extends PureComponent<TagProps> {
 }
 
 // Popover
-interface PopupAlign {
-    points?: string[];
-    offset?: number[];
-}
-export type PopoverPlacement =
-    | 'topLeft'
-    | 'top'
-    | 'topRight'
-    | 'bottomLeft'
-    | 'bottom'
-    | 'bottomRight'
-    | 'leftTop'
-    | 'left'
-    | 'leftBottom'
-    | 'rightTop'
-    | 'right'
-    | 'rightBottom';
-export interface GetPopupContainer {
-    (): HTMLElement;
-}
-export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
-    visible?: boolean;
-    defaultVisible?: boolean;
-    onVisibleChange?: (visible: boolean) => void;
-    trigger?: 'hover' | 'focus' | 'click' | 'contextMenu';
-    alignPoint?: boolean;
-    placement?: PopoverPlacement;
-    align?: PopupAlign;
-    stretch?: 'with' | 'minWidth' | 'height' | 'minHeight';
-    popup?: ReactNode;
-    popupClassName?: string;
-    popupStyle?: CSSProperties;
-    zIndex?: number;
-    getPopupContainer?: GetPopupContainer;
-    forwardPopupContainer?: boolean | GetPopupContainer;
-    prefixCls?: string;
-    animation?: 'fade' | 'zoom' | 'bounce' | 'slide-up';
-}
+import { GetPopupContainer, PopoverPlacement, PopoverProps, PopupAlign } from './lib/components/Popover';
+export type { GetPopupContainer, PopoverPlacement, PopoverProps, PopupAlign };
 export declare class Popover extends Component<PopoverProps> {}
 
 // Modal

package/lib/components/Popover/index.d.ts

@@ -1,3 +1,36 @@
-import React from 'react';
+import React, { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+import { Animation, Placement, Trigger } from './Popover';
 declare const FinalPopover: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
+export interface GetPopupContainer {
+    (): HTMLElement;
+}
+export interface PopupAlign {
+    points?: string[];
+    offset?: number[];
+    targetOffset?: number[];
+    overflow?: {
+        adjustX?: number;
+        adjustY?: number;
+    };
+}
+export declare type PopoverPlacement = 'topLeft' | 'top' | 'topRight' | 'bottomLeft' | 'bottom' | 'bottomRight' | 'leftTop' | 'left' | 'leftBottom' | 'rightTop' | 'right' | 'rightBottom';
+export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
+    visible?: boolean;
+    defaultVisible?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
+    trigger?: 'hover' | 'focus' | 'click' | 'contextMenu';
+    alignPoint?: boolean;
+    placement?: PopoverPlacement;
+    align?: PopupAlign;
+    stretch?: 'with' | 'minWidth' | 'height' | 'minHeight';
+    popup?: ReactNode;
+    popupClassName?: string;
+    popupStyle?: CSSProperties;
+    zIndex?: number;
+    getPopupContainer?: GetPopupContainer;
+    forwardPopupContainer?: boolean | GetPopupContainer;
+    prefixCls?: string;
+    animation?: 'fade' | 'zoom' | 'bounce' | 'slide-up';
+}
+export { Animation, Placement, Trigger };
 export default FinalPopover;

package/lib/components/Popover/index.js

@@ -7,6 +7,24 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "Animation", {
+  enumerable: true,
+  get: function get() {
+    return _Popover.Animation;
+  }
+});
+Object.defineProperty(exports, "Placement", {
+  enumerable: true,
+  get: function get() {
+    return _Popover.Placement;
+  }
+});
+Object.defineProperty(exports, "Trigger", {
+  enumerable: true,
+  get: function get() {
+    return _Popover.Trigger;
+  }
+});
 exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

package/lib/components/Table/Table.js

@@ -416,18 +416,34 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
       var _this14 = this;
 
       (0, _newArrowCheck2.default)(this, _this3);
-      var rowSelection = _this2.props.rowSelection;
+      var _this2$props = _this2.props,
+          rowSelection = _this2$props.rowSelection,
+          dataSource = _this2$props.dataSource;
       var parentSelectedRowKeys = _this2.state.parentSelectedRowKeys;
       if (!rowSelection) return;
       var selectedRowKeys = [];
       (0, _each2.default)(selectedRowKeyMap, function (selected, key) {
         (0, _newArrowCheck2.default)(this, _this14);
         selected && selectedRowKeys.push(key);
+      }.bind(this)); // 计算所有选中的行数据，包括折叠的子项
+
+      var flatDataSource = _this2.flatDataSource(dataSource);
+
+      flatDataSource.forEach(function (item) {
+        (0, _newArrowCheck2.default)(this, _this14);
+
+        if (selectedRowKeyMap[item.key]) {
+          _this2._selectedRowsMap[item.key] = item.record;
+        }
       }.bind(this));
 
       if ((0, _isObject2.default)(rowSelection)) {
         if (rowSelection.onChange) {
-          rowSelection.onChange(selectedRowKeys);
+          var selectedRows = selectedRowKeys.map(function (key) {
+            (0, _newArrowCheck2.default)(this, _this14);
+            return _this2._selectedRowsMap[key];
+          }.bind(this));
+          rowSelection.onChange(selectedRowKeys, selectedRows);
         }
 
         if (!('selectedRowKeys' in rowSelection)) {
@@ -692,10 +708,10 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
       var _this20 = this;
 
       (0, _newArrowCheck2.default)(this, _this3);
-      var _this2$props = _this2.props,
-          dataSource = _this2$props.dataSource,
-          handleSearch = _this2$props.handleSearch,
-          doNotHandleCondition = _this2$props.doNotHandleCondition;
+      var _this2$props2 = _this2.props,
+          dataSource = _this2$props2.dataSource,
+          handleSearch = _this2$props2.handleSearch,
+          doNotHandleCondition = _this2$props2.doNotHandleCondition;
       var _this2$state2 = _this2.state,
           order = _this2$state2.order,
           searchValue = _this2$state2.searchValue;
@@ -1011,10 +1027,10 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
       var _this31 = this;
 
       (0, _newArrowCheck2.default)(this, _this3);
-      var _this2$props2 = _this2.props,
-          dragSorting = _this2$props2.dragSorting,
-          expandedRowRender = _this2$props2.expandedRowRender,
-          columns = _this2$props2.columns;
+      var _this2$props3 = _this2.props,
+          dragSorting = _this2$props3.dragSorting,
+          expandedRowRender = _this2$props3.expandedRowRender,
+          columns = _this2$props3.columns;
       if (!dragSorting) return false; // 排序暂不支持有展开行配置的table
 
       if (expandedRowRender || columns && columns.findIndex(function (column) {
@@ -1032,13 +1048,13 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
       var _this32 = this;
 
       (0, _newArrowCheck2.default)(this, _this3);
-      var _this2$props3 = _this2.props,
-          columns = _this2$props3.columns,
-          rowSelection = _this2$props3.rowSelection,
-          columnPlaceholder = _this2$props3.columnPlaceholder,
-          locale = _this2$props3.locale,
-          dataSource = _this2$props3.dataSource,
-          columnResizable = _this2$props3.columnResizable;
+      var _this2$props4 = _this2.props,
+          columns = _this2$props4.columns,
+          rowSelection = _this2$props4.rowSelection,
+          columnPlaceholder = _this2$props4.columnPlaceholder,
+          locale = _this2$props4.locale,
+          dataSource = _this2$props4.dataSource,
+          columnResizable = _this2$props4.columnResizable;
       var _this2$state3 = _this2.state,
           _this2$state3$order = _this2$state3.order,
           currentOrder = _this2$state3$order === void 0 ? {} : _this2$state3$order,
@@ -1587,13 +1603,15 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
 
     _this2.onRow = function (record, index) {
       (0, _newArrowCheck2.default)(this, _this3);
-      var _this2$props4 = _this2.props,
-          _this2$props4$onRow = _this2$props4.onRow,
-          onRow = _this2$props4$onRow === void 0 ? noop : _this2$props4$onRow,
-          contextMenu = _this2$props4.contextMenu;
+      var _this2$props5 = _this2.props,
+          _this2$props5$onRow = _this2$props5.onRow,
+          onRow = _this2$props5$onRow === void 0 ? noop : _this2$props5$onRow,
+          contextMenu = _this2$props5.contextMenu,
+          rowTooltip = _this2$props5.rowTooltip;
       return _objectSpread(_objectSpread({}, onRow(record, index)), {}, {
         record: record,
-        contextMenu: contextMenu
+        contextMenu: contextMenu,
+        rowTooltip: rowTooltip
       });
     }.bind(this);
 
@@ -1618,7 +1636,8 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
       columnConfig: _props.defaultColumnConfig,
       searchValue: ''
     };
-    _this2.tableId = "uc_table_uid_".concat(uid++); // init pagination
+    _this2.tableId = "uc_table_uid_".concat(uid++);
+    _this2._selectedRowsMap = {}; // init pagination
 
     var _pagination = _props.pagination;
 
@@ -2216,6 +2235,13 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
    */
   contextMenu: _propTypes.default.func,
 
+  /**
+   * 行提示
+   * @param record - 该行的记录值
+   * @return TooltipProps
+   */
+  rowTooltip: _propTypes.default.func,
+
   /** @ignore */
   className: _propTypes.default.string,
 

package/lib/components/Table/TableRow.d.ts

@@ -1,9 +1,11 @@
 import React, { ReactNode } from 'react';
+import type { TooltipProps } from '../../components/Tooltip';
 interface TableRowProps {
     record: any;
     contextMenu?: (record: any, hideContextMenu: () => void) => ReactNode;
     draggable?: boolean;
     'data-row-key'?: string | number;
+    rowTooltip?: (record: any) => TooltipProps;
 }
 declare const _default: React.MemoExoticComponent<({ ...restProps }: TableRowProps) => JSX.Element>;
 export default _default;

package/lib/components/Table/TableRow.js

@@ -11,10 +11,10 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -23,30 +23,51 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _Popover = _interopRequireDefault(require("../../components/Popover"));
 
+var _Tooltip = _interopRequireDefault(require("../../components/Tooltip"));
+
 var _DragWrap = require("./DragWrap");
 
-var _this2 = void 0;
+var _this3 = void 0;
 
-var _excluded = ["record", "contextMenu"];
+var _excluded = ["record", "rowTooltip"],
+    _excluded2 = ["record", "contextMenu", "rowTooltip"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var TableRowWithContextMenu = /*#__PURE__*/_react.default.memo(function TableRowWithContextMenu(_ref) {
+var TableRowWithTooltip = /*#__PURE__*/_react.default.memo(function TableRowWithTooltip(_ref) {
   var _this = this;
 
   var record = _ref.record,
-      contextMenu = _ref.contextMenu,
+      rowTooltip = _ref.rowTooltip,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
+  var tooltipProps = _react.default.useMemo(function () {
+    (0, _newArrowCheck2.default)(this, _this);
+    return rowTooltip === null || rowTooltip === void 0 ? void 0 : rowTooltip(record);
+  }.bind(this), [record, rowTooltip]);
+
+  if (!rowTooltip) return /*#__PURE__*/_react.default.createElement("tr", rest);
+  if (!tooltipProps) return /*#__PURE__*/_react.default.createElement("tr", rest);
+  return /*#__PURE__*/_react.default.createElement(_Tooltip.default, tooltipProps, /*#__PURE__*/_react.default.createElement("tr", rest));
+});
+
+var TableRowWithContextMenu = /*#__PURE__*/_react.default.memo(function TableRowWithContextMenu(_ref2) {
+  var _this2 = this;
+
+  var record = _ref2.record,
+      contextMenu = _ref2.contextMenu,
+      rowTooltip = _ref2.rowTooltip,
+      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       contextMenuVisible = _useState2[0],
       setContextMenuVisible = _useState2[1];
 
   var hideContextMenu = (0, _react.useCallback)(function () {
-    (0, _newArrowCheck2.default)(this, _this);
+    (0, _newArrowCheck2.default)(this, _this2);
     setContextMenuVisible(false);
   }.bind(this), []);
 
@@ -59,10 +80,16 @@ var TableRowWithContextMenu = /*#__PURE__*/_react.default.memo(function TableRow
       onVisibleChange: setContextMenuVisible,
       animation: null,
       alignPoint: true
-    }, /*#__PURE__*/_react.default.createElement("tr", rest));
+    }, /*#__PURE__*/_react.default.createElement(TableRowWithTooltip, (0, _extends2.default)({
+      record: record,
+      rowTooltip: rowTooltip
+    }, rest)));
   }
 
-  return /*#__PURE__*/_react.default.createElement("tr", rest);
+  return /*#__PURE__*/_react.default.createElement(TableRowWithTooltip, (0, _extends2.default)({
+    record: record,
+    rowTooltip: rowTooltip
+  }, rest));
 });
 
 var TableRowWithDrag = /*#__PURE__*/_react.default.memo(function TableRowWithDrag(props) {
@@ -75,9 +102,9 @@ var TableRowWithDrag = /*#__PURE__*/_react.default.memo(function TableRowWithDra
   }));
 });
 
-var TableRow = function TableRow(_ref2) {
-  (0, _newArrowCheck2.default)(this, _this2);
-  var restProps = (0, _extends2.default)({}, _ref2);
+var TableRow = function TableRow(_ref3) {
+  (0, _newArrowCheck2.default)(this, _this3);
+  var restProps = (0, _extends2.default)({}, _ref3);
 
   var _useContext2 = (0, _react.useContext)(_DragWrap.DragContext),
       draggable = _useContext2.draggable;
@@ -90,7 +117,8 @@ TableRow.propTypes = {
   record: _propTypes.default.any.isRequired,
   contextMenu: _propTypes.default.func,
   draggable: _propTypes.default.bool,
-  'data-row-key': _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+  'data-row-key': _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  rowTooltip: _propTypes.default.func
 };
 
 var _default = /*#__PURE__*/_react.default.memo(TableRow);

package/lib/components/Tooltip/Tooltip.d.ts

@@ -1,4 +1,6 @@
-interface TooltipProps {
+import { ReactNode } from 'react';
+import { PopoverProps } from '../../components/Popover';
+export interface TooltipProps extends PopoverProps {
     /** 是否显示箭头 */
     arrow?: boolean;
     /** 主题风格 */
@@ -8,6 +10,8 @@ interface TooltipProps {
         /** 弹出层外层 padding */
         popupWrapperPadding?: string;
     };
+    /** 弹出层内容 */
+    popup?: ReactNode;
 }
 declare const Tooltip: ({ popup: _popup, theme, popupClassName, arrow, placement, customStyle, ...rest }: TooltipProps & any) => JSX.Element;
 export default Tooltip;

package/lib/components/Tooltip/Tooltip.js

@@ -21,7 +21,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Popover = _interopRequireDefault(require("../../components/Popover"));
+var _Popover = _interopRequireWildcard(require("../../components/Popover"));
 
 var _placements = require("../../components/Popover/placements");
 
@@ -37,29 +37,25 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var _ref = _Popover.default,
-    Animation = _ref.Animation,
-    Trigger = _ref.Trigger,
-    Placement = _ref.Placement;
 var arrowPlacements = (0, _placements.getPlacements)(10);
 var placements = (0, _placements.getPlacements)();
 var Theme = ['light', 'dark'];
 
-var Tooltip = function Tooltip(_ref2) {
+var Tooltip = function Tooltip(_ref) {
   var _this2 = this;
 
   (0, _newArrowCheck2.default)(this, _this);
-  var _popup = _ref2.popup,
-      _ref2$theme = _ref2.theme,
-      theme = _ref2$theme === void 0 ? 'light' : _ref2$theme,
-      popupClassName = _ref2.popupClassName,
-      _ref2$arrow = _ref2.arrow,
-      arrow = _ref2$arrow === void 0 ? true : _ref2$arrow,
-      _ref2$placement = _ref2.placement,
-      placement = _ref2$placement === void 0 ? 'topLeft' : _ref2$placement,
-      _ref2$customStyle = _ref2.customStyle,
-      customStyle = _ref2$customStyle === void 0 ? {} : _ref2$customStyle,
-      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  var _popup = _ref.popup,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'light' : _ref$theme,
+      popupClassName = _ref.popupClassName,
+      _ref$arrow = _ref.arrow,
+      arrow = _ref$arrow === void 0 ? true : _ref$arrow,
+      _ref$placement = _ref.placement,
+      placement = _ref$placement === void 0 ? 'topLeft' : _ref$placement,
+      _ref$customStyle = _ref.customStyle,
+      customStyle = _ref$customStyle === void 0 ? {} : _ref$customStyle,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var popup = (0, _react.useMemo)(function () {
     (0, _newArrowCheck2.default)(this, _this2);
     return _popup == null ? _popup : /*#__PURE__*/_react.default.createElement(_style.TooltipWrap, {
@@ -83,12 +79,13 @@ Tooltip.propTypes = {
   theme: _propTypes.default.oneOf(['light', 'dark']),
   customStyle: _propTypes.default.shape({
     popupWrapperPadding: _propTypes.default.string
-  })
+  }),
+  popup: _propTypes.default.node
 };
 Object.assign(Tooltip, {
-  Animation: Animation,
-  Trigger: Trigger,
-  Placement: Placement,
+  Animation: _Popover.Animation,
+  Trigger: _Popover.Trigger,
+  Placement: _Popover.Placement,
   Theme: Theme,
   defaultProps: {}
 });

package/lib/components/Tooltip/index.d.ts

@@ -1,2 +1,4 @@
+import type { TooltipProps } from './Tooltip';
 import Tooltip from './Tooltip';
 export default Tooltip;
+export type { TooltipProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucloud-fe/react-components",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "title": "UCloud react components",
   "description": "UCloud react components",
   "keywords": [