@ucloud-fe/react-components 1.17.1 → 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

@@ -1606,10 +1606,12 @@ var Table = (_dec = (0, _localeConsumerDecorator.default)({
       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;
+          contextMenu = _this2$props5.contextMenu,
+          rowTooltip = _this2$props5.rowTooltip;
       return _objectSpread(_objectSpread({}, onRow(record, index)), {}, {
         record: record,
-        contextMenu: contextMenu
+        contextMenu: contextMenu,
+        rowTooltip: rowTooltip
       });
     }.bind(this);
 
@@ -2233,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.1",
+  "version": "1.18.0",
   "title": "UCloud react components",
   "description": "UCloud react components",
   "keywords": [