linkmore-design 1.0.59 → 1.0.63

package/lib/Tooltip/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
 Object.defineProperty(exports, "__esModule", {
@@ -11,5 +13,249 @@ require("antd/es/tooltip/style");
 
 var _tooltip = _interopRequireDefault(require("antd/es/tooltip"));
 
-var _default = _tooltip.default;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _rcTooltip = _interopRequireDefault(require("rc-tooltip"));
+
+var _useMergedState3 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _configProvider = require("antd/es/config-provider");
+
+var _colors = require("../_util/colors");
+
+var _motion = require("../_util/motion");
+
+var _placements = _interopRequireDefault(require("../_util/placements"));
+
+var _reactNode = require("../_util/reactNode");
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+var splitObject = function splitObject(obj, keys) {
+  var picked = {};
+  var omitted = Object.assign({}, obj);
+  keys.forEach(function (key) {
+    if (obj && key in obj) {
+      picked[key] = obj[key];
+      delete omitted[key];
+    }
+  });
+  return {
+    picked: picked,
+    omitted: omitted
+  };
+};
+
+var PresetColorRegex = new RegExp("^(".concat(_colors.PresetColorTypes.join('|'), ")(-inverse)?$")); // Fix Tooltip won't hide at disabled button
+// mouse events don't trigger at disabled button in Chrome
+// https://github.com/react-component/tooltip/issues/18
+
+function getDisabledCompatibleChildren(element, prefixCls) {
+  var elementType = element.type;
+
+  if ((elementType.__ANT_BUTTON === true || element.type === 'button') && element.props.disabled || elementType.__ANT_SWITCH === true && (element.props.disabled || element.props.loading) || elementType.__ANT_RADIO === true && element.props.disabled) {
+    // Pick some layout related style properties up to span
+    // Prevent layout bugs like https://github.com/ant-design/ant-design/issues/5254
+    var _splitObject = splitObject(element.props.style, ['position', 'left', 'right', 'top', 'bottom', 'float', 'display', 'zIndex']),
+        picked = _splitObject.picked,
+        omitted = _splitObject.omitted;
+
+    var spanStyle = Object.assign(Object.assign({
+      display: 'inline-block'
+    }, picked), {
+      cursor: 'not-allowed',
+      width: element.props.block ? '100%' : null
+    });
+    var buttonStyle = Object.assign(Object.assign({}, omitted), {
+      pointerEvents: 'none'
+    });
+    var child = (0, _reactNode.cloneElement)(element, {
+      style: buttonStyle,
+      className: null
+    });
+    return /*#__PURE__*/React.createElement("span", {
+      style: spanStyle,
+      className: (0, _classnames.default)(element.props.className, "".concat(prefixCls, "-disabled-compatible-wrapper"))
+    }, child);
+  }
+
+  return element;
+}
+
+var Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _classNames2;
+
+  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+      getContextPopupContainer = _React$useContext.getPopupContainer,
+      getPrefixCls = _React$useContext.getPrefixCls,
+      direction = _React$useContext.direction;
+
+  var _useMergedState = (0, _useMergedState3.default)(false, {
+    value: props.visible,
+    defaultValue: props.defaultVisible
+  }),
+      _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
+      visible = _useMergedState2[0],
+      setVisible = _useMergedState2[1];
+
+  var isNoTitle = function isNoTitle() {
+    var title = props.title,
+        overlay = props.overlay;
+    return !title && !overlay && title !== 0; // overlay for old version compatibility
+  };
+
+  var onVisibleChange = function onVisibleChange(vis) {
+    var _a;
+
+    setVisible(isNoTitle() ? false : vis);
+
+    if (!isNoTitle()) {
+      (_a = props.onVisibleChange) === null || _a === void 0 ? void 0 : _a.call(props, vis);
+    }
+  };
+
+  var getTooltipPlacements = function getTooltipPlacements() {
+    var builtinPlacements = props.builtinPlacements,
+        arrowPointAtCenter = props.arrowPointAtCenter,
+        autoAdjustOverflow = props.autoAdjustOverflow;
+    return builtinPlacements || (0, _placements.default)({
+      arrowPointAtCenter: arrowPointAtCenter,
+      autoAdjustOverflow: autoAdjustOverflow
+    });
+  }; // 动态设置动画点
+
+
+  var onPopupAlign = function onPopupAlign(domNode, align) {
+    var placements = getTooltipPlacements(); // 当前返回的位置
+
+    var placement = Object.keys(placements).find(function (key) {
+      return placements[key].points[0] === align.points[0] && placements[key].points[1] === align.points[1];
+    });
+
+    if (!placement) {
+      return;
+    } // 根据当前坐标设置动画点
+
+
+    var rect = domNode.getBoundingClientRect();
+    var transformOrigin = {
+      top: '50%',
+      left: '50%'
+    };
+
+    if (placement.indexOf('top') >= 0 || placement.indexOf('Bottom') >= 0) {
+      transformOrigin.top = "".concat(rect.height - align.offset[1], "px");
+    } else if (placement.indexOf('Top') >= 0 || placement.indexOf('bottom') >= 0) {
+      transformOrigin.top = "".concat(-align.offset[1], "px");
+    }
+
+    if (placement.indexOf('left') >= 0 || placement.indexOf('Right') >= 0) {
+      transformOrigin.left = "".concat(rect.width - align.offset[0], "px");
+    } else if (placement.indexOf('right') >= 0 || placement.indexOf('Left') >= 0) {
+      transformOrigin.left = "".concat(-align.offset[0], "px");
+    }
+
+    domNode.style.transformOrigin = "".concat(transformOrigin.left, " ").concat(transformOrigin.top);
+  };
+
+  var getOverlay = function getOverlay() {
+    var title = props.title,
+        overlay = props.overlay;
+
+    if (title === 0) {
+      return title;
+    }
+
+    return overlay || title || '';
+  };
+
+  var getPopupContainer = props.getPopupContainer,
+      otherProps = __rest(props, ["getPopupContainer"]);
+
+  var customizePrefixCls = props.prefixCls,
+      openClassName = props.openClassName,
+      getTooltipContainer = props.getTooltipContainer,
+      overlayClassName = props.overlayClassName,
+      color = props.color,
+      overlayInnerStyle = props.overlayInnerStyle,
+      children = props.children;
+  var prefixCls = getPrefixCls('tooltip', customizePrefixCls);
+  var rootPrefixCls = getPrefixCls();
+  var tempVisible = visible; // Hide tooltip when there is no title
+
+  if (!('visible' in props) && isNoTitle()) {
+    tempVisible = false;
+  }
+
+  var child = getDisabledCompatibleChildren((0, _reactNode.isValidElement)(children) ? children : /*#__PURE__*/React.createElement("span", null, children), prefixCls);
+  var childProps = child.props;
+  var childCls = (0, _classnames.default)(childProps.className, (0, _defineProperty2.default)({}, openClassName || "".concat(prefixCls, "-open"), true));
+  var customOverlayClassName = (0, _classnames.default)(overlayClassName, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-rtl"), direction === 'rtl'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-").concat(color), color && PresetColorRegex.test(color)), _classNames2));
+  var formattedOverlayInnerStyle = overlayInnerStyle;
+  var arrowContentStyle;
+
+  if (color && !PresetColorRegex.test(color)) {
+    formattedOverlayInnerStyle = Object.assign(Object.assign({}, overlayInnerStyle), {
+      background: color
+    }); // @ts-ignore
+
+    arrowContentStyle = {
+      '--antd-arrow-background-color': color
+    };
+  }
+
+  return /*#__PURE__*/React.createElement(_rcTooltip.default, Object.assign({}, otherProps, {
+    prefixCls: prefixCls,
+    overlayClassName: customOverlayClassName,
+    getTooltipContainer: getPopupContainer || getTooltipContainer || getContextPopupContainer,
+    ref: ref,
+    builtinPlacements: getTooltipPlacements(),
+    overlay: getOverlay(),
+    visible: tempVisible,
+    onVisibleChange: onVisibleChange,
+    onPopupAlign: onPopupAlign,
+    overlayInnerStyle: formattedOverlayInnerStyle,
+    arrowContent: /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-arrow-content"),
+      style: arrowContentStyle
+    }),
+    motion: {
+      motionName: (0, _motion.getTransitionName)(rootPrefixCls, 'zoom-big-fast', props.transitionName),
+      motionDeadline: 1000
+    }
+  }), tempVisible ? (0, _reactNode.cloneElement)(child, {
+    className: childCls
+  }) : child);
+});
+
+if (process.env.NODE_ENV !== 'production') {
+  Tooltip.displayName = 'Tooltip';
+}
+
+Tooltip.defaultProps = {
+  placement: 'top',
+  mouseEnterDelay: 0.1,
+  mouseLeaveDelay: 0.1,
+  arrowPointAtCenter: false,
+  autoAdjustOverflow: true
+};
+Tooltip.AntdTooltip = _tooltip.default;
+var _default = Tooltip;
 exports.default = _default;

package/lib/Typography/Base/Ellipsis.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface EllipsisProps {
+    enabledMeasure?: boolean;
+    text?: React.ReactNode;
+    width: number;
+    rows: number;
+    children: (cutChildren: React.ReactNode[], needEllipsis: boolean) => React.ReactNode;
+    onEllipsis: (isEllipsis: boolean) => void;
+}
+declare const Ellipsis: {
+    ({ enabledMeasure, children, text, width, rows, onEllipsis }: EllipsisProps): JSX.Element;
+    displayName: string;
+};
+export default Ellipsis;

package/lib/Typography/Base/Ellipsis.js

@@ -0,0 +1,212 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _toArray = _interopRequireDefault(require("rc-util/lib/Children/toArray"));
+
+var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
+
+var React = _interopRequireWildcard(require("react"));
+
+function cuttable(node) {
+  var type = (0, _typeof2.default)(node);
+  return type === 'string' || type === 'number';
+}
+
+function getNodesLen(nodeList) {
+  var totalLen = 0;
+  nodeList.forEach(function (node) {
+    if (cuttable(node)) {
+      totalLen += String(node).length;
+    } else {
+      totalLen += 1;
+    }
+  });
+  return totalLen;
+}
+
+function sliceNodes(nodeList, len) {
+  var currLen = 0;
+  var currentNodeList = [];
+
+  for (var i = 0; i < nodeList.length; i += 1) {
+    // Match to return
+    if (currLen === len) {
+      return currentNodeList;
+    }
+
+    var node = nodeList[i];
+    var canCut = cuttable(node);
+    var nodeLen = canCut ? String(node).length : 1;
+    var nextLen = currLen + nodeLen; // Exceed but current not which means we need cut this
+    // This will not happen on validate ReactElement
+
+    if (nextLen > len) {
+      var restLen = len - currLen;
+      currentNodeList.push(String(node).slice(0, restLen));
+      return currentNodeList;
+    }
+
+    currentNodeList.push(node);
+    currLen = nextLen;
+  }
+
+  return nodeList;
+}
+
+var NONE = 0;
+var PREPARE = 1;
+var WALKING = 2;
+var DONE_WITH_ELLIPSIS = 3;
+var DONE_WITHOUT_ELLIPSIS = 4;
+
+var Ellipsis = function Ellipsis(_ref) {
+  var enabledMeasure = _ref.enabledMeasure,
+      children = _ref.children,
+      text = _ref.text,
+      width = _ref.width,
+      rows = _ref.rows,
+      onEllipsis = _ref.onEllipsis;
+
+  var _React$useState = React.useState([0, 0, 0]),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      cutLength = _React$useState2[0],
+      setCutLength = _React$useState2[1];
+
+  var _React$useState3 = React.useState(NONE),
+      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+      walkingState = _React$useState4[0],
+      setWalkingState = _React$useState4[1];
+
+  var _cutLength = (0, _slicedToArray2.default)(cutLength, 3),
+      startLen = _cutLength[0],
+      midLen = _cutLength[1],
+      endLen = _cutLength[2];
+
+  var _React$useState5 = React.useState(0),
+      _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+      singleRowHeight = _React$useState6[0],
+      setSingleRowHeight = _React$useState6[1];
+
+  var singleRowRef = React.useRef(null);
+  var midRowRef = React.useRef(null);
+  var nodeList = React.useMemo(function () {
+    return (0, _toArray.default)(text);
+  }, [text]);
+  var totalLen = React.useMemo(function () {
+    return getNodesLen(nodeList);
+  }, [nodeList]);
+  var mergedChildren = React.useMemo(function () {
+    if (!enabledMeasure || walkingState !== DONE_WITH_ELLIPSIS) {
+      return children(nodeList, false);
+    }
+
+    return children(sliceNodes(nodeList, midLen), midLen < totalLen);
+  }, [enabledMeasure, walkingState, children, nodeList, midLen, totalLen]); // ======================== Walk ========================
+
+  (0, _useLayoutEffect.default)(function () {
+    if (enabledMeasure && width && totalLen) {
+      setWalkingState(PREPARE);
+      setCutLength([0, Math.ceil(totalLen / 2), totalLen]);
+    }
+  }, [enabledMeasure, width, text, totalLen, rows]);
+  (0, _useLayoutEffect.default)(function () {
+    var _a;
+
+    if (walkingState === PREPARE) {
+      setSingleRowHeight(((_a = singleRowRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0);
+    }
+  }, [walkingState]);
+  (0, _useLayoutEffect.default)(function () {
+    var _a, _b;
+
+    if (singleRowHeight) {
+      if (walkingState === PREPARE) {
+        // Ignore if position is enough
+        var midHeight = ((_a = midRowRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
+        var maxHeight = rows * singleRowHeight;
+
+        if (midHeight <= maxHeight) {
+          setWalkingState(DONE_WITHOUT_ELLIPSIS);
+          onEllipsis(false);
+        } else {
+          setWalkingState(WALKING);
+        }
+      } else if (walkingState === WALKING) {
+        if (startLen !== endLen) {
+          var _midHeight = ((_b = midRowRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
+
+          var _maxHeight = rows * singleRowHeight;
+
+          var nextStartLen = startLen;
+          var nextEndLen = endLen; // We reach the last round
+
+          if (startLen === endLen - 1) {
+            nextEndLen = startLen;
+          } else if (_midHeight <= _maxHeight) {
+            nextStartLen = midLen;
+          } else {
+            nextEndLen = midLen;
+          }
+
+          var nextMidLen = Math.ceil((nextStartLen + nextEndLen) / 2);
+          setCutLength([nextStartLen, nextMidLen, nextEndLen]);
+        } else {
+          setWalkingState(DONE_WITH_ELLIPSIS);
+          onEllipsis(true);
+        }
+      }
+    }
+  }, [walkingState, startLen, endLen, rows, singleRowHeight]); // ======================= Render =======================
+
+  var measureStyle = {
+    width: width,
+    whiteSpace: 'normal',
+    margin: 0,
+    padding: 0
+  };
+
+  var renderMeasure = function renderMeasure(content, ref, style) {
+    return /*#__PURE__*/React.createElement("span", {
+      "aria-hidden": true,
+      ref: ref,
+      style: Object.assign({
+        position: 'fixed',
+        display: 'block',
+        left: 0,
+        top: 0,
+        zIndex: -9999,
+        visibility: 'hidden',
+        pointerEvents: 'none'
+      }, style)
+    }, content);
+  };
+
+  var renderMeasureSlice = function renderMeasureSlice(len, ref) {
+    var sliceNodeList = sliceNodes(nodeList, len);
+    return renderMeasure(children(sliceNodeList, true), ref, measureStyle);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, mergedChildren, enabledMeasure && walkingState !== DONE_WITH_ELLIPSIS && walkingState !== DONE_WITHOUT_ELLIPSIS && /*#__PURE__*/React.createElement(React.Fragment, null, renderMeasure('lg', singleRowRef, {
+    wordBreak: 'keep-all',
+    whiteSpace: 'nowrap'
+  }), walkingState === PREPARE ? renderMeasure(children(nodeList, false), midRowRef, measureStyle) : renderMeasureSlice(midLen, midRowRef)));
+};
+
+if (process.env.NODE_ENV !== 'production') {
+  Ellipsis.displayName = 'Ellipsis';
+}
+
+var _default = Ellipsis;
+exports.default = _default;

package/lib/Typography/Base/EllipsisTooltip.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { TooltipProps } from '../../Tooltip';
+export interface EllipsisTooltipProps {
+    tooltipProps?: TooltipProps;
+    enabledEllipsis: boolean;
+    isEllipsis?: boolean;
+    children: React.ReactElement;
+}
+declare const EllipsisTooltip: {
+    ({ enabledEllipsis, isEllipsis, children, tooltipProps, }: EllipsisTooltipProps): JSX.Element;
+    displayName: string;
+};
+export default EllipsisTooltip;

package/lib/Typography/Base/EllipsisTooltip.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _Tooltip = _interopRequireDefault(require("../../Tooltip"));
+
+var EllipsisTooltip = function EllipsisTooltip(_ref) {
+  var enabledEllipsis = _ref.enabledEllipsis,
+      isEllipsis = _ref.isEllipsis,
+      children = _ref.children,
+      tooltipProps = _ref.tooltipProps;
+
+  if (!(tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.title) || !enabledEllipsis) {
+    return children;
+  }
+
+  return /*#__PURE__*/React.createElement(_Tooltip.default, Object.assign({
+    visible: isEllipsis ? undefined : false
+  }, tooltipProps), children);
+};
+
+if (process.env.NODE_ENV !== 'production') {
+  EllipsisTooltip.displayName = 'EllipsisTooltip';
+}
+
+var _default = EllipsisTooltip;
+exports.default = _default;

package/lib/Typography/Base/index.d.ts

@@ -0,0 +1,54 @@
+import type { AutoSizeType } from 'rc-textarea/lib/ResizableTextArea';
+import * as React from 'react';
+import type { TooltipProps } from '../../Tooltip';
+import type { TypographyProps } from '../Typography';
+export declare type BaseType = 'secondary' | 'success' | 'warning' | 'danger';
+interface CopyConfig {
+    text?: string;
+    onCopy?: (event?: React.MouseEvent<HTMLDivElement>) => void;
+    icon?: React.ReactNode;
+    tooltips?: boolean | React.ReactNode;
+    format?: 'text/plain' | 'text/html';
+}
+interface EditConfig {
+    editing?: boolean;
+    icon?: React.ReactNode;
+    tooltip?: boolean | React.ReactNode;
+    onStart?: () => void;
+    onChange?: (value: string) => void;
+    onCancel?: () => void;
+    onEnd?: () => void;
+    maxLength?: number;
+    autoSize?: boolean | AutoSizeType;
+    triggerType?: ('icon' | 'text')[];
+    enterIcon?: React.ReactNode;
+}
+export interface EllipsisConfig {
+    rows?: number;
+    expandable?: boolean;
+    suffix?: string;
+    symbol?: React.ReactNode;
+    onExpand?: React.MouseEventHandler<HTMLElement>;
+    onEllipsis?: (ellipsis: boolean) => void;
+    tooltip?: React.ReactNode | TooltipProps;
+}
+export interface BlockProps extends TypographyProps {
+    title?: string;
+    editable?: boolean | EditConfig;
+    copyable?: boolean | CopyConfig;
+    type?: BaseType;
+    disabled?: boolean;
+    ellipsis?: boolean | EllipsisConfig;
+    code?: boolean;
+    mark?: boolean;
+    underline?: boolean;
+    delete?: boolean;
+    strong?: boolean;
+    keyboard?: boolean;
+    italic?: boolean;
+}
+interface InternalBlockProps extends BlockProps {
+    component: string;
+}
+declare const Base: React.ForwardRefExoticComponent<InternalBlockProps & React.RefAttributes<unknown>>;
+export default Base;