choerodon-ui/pro/lib/typography/Base/index.js

An enterprise-class UI design language and React-based implementation

"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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireWildcard(require("react"));

var _omit = _interopRequireDefault(require("lodash/omit"));

var _classnames = _interopRequireDefault(require("classnames"));

var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));

var _ref2 = require("rc-util/lib/ref");

var _icon = _interopRequireDefault(require("../../../../lib/icon"));

var _resizeObserver = _interopRequireDefault(require("../../../../lib/_util/resizeObserver"));

var _ConfigContext = _interopRequireDefault(require("../../../../lib/config-provider/ConfigContext"));

var _tooltip = _interopRequireDefault(require("../../tooltip"));

var _TransButton = _interopRequireDefault(require("../../_util/TransButton"));

var _EllipsisTooltip = _interopRequireDefault(require("./EllipsisTooltip"));

var _Ellipsis = _interopRequireDefault(require("./Ellipsis"));

var _useMergedConfig5 = _interopRequireDefault(require("../hooks/useMergedConfig"));

var _Typography = _interopRequireDefault(require("../Typography"));

var _localeContext = require("../../locale-context");

var _styleChecker = require("../../_util/styleChecker");

var _excluded = ["prefixCls", "className", "style", "type", "disabled", "children", "ellipsis", "copyable", "component", "title", "suffixCls"];

function wrapperDecorations(_ref, content) {
  var mark = _ref.mark,
      code = _ref.code,
      underline = _ref.underline,
      del = _ref["delete"],
      strong = _ref.strong,
      keyboard = _ref.keyboard,
      italic = _ref.italic;
  var currentContent = content;

  function wrap(needed, tag) {
    if (!needed) return;
    currentContent = /*#__PURE__*/_react["default"].createElement(tag, {}, currentContent);
  }

  wrap(strong, 'strong');
  wrap(underline, 'u');
  wrap(del, 'del');
  wrap(code, 'code');
  wrap(mark, 'mark');
  wrap(keyboard, 'kbd');
  wrap(italic, 'i');
  return currentContent;
}

function getNode(dom, defaultNode, needDom) {
  if (dom === true || dom === undefined) {
    return defaultNode;
  }

  return dom || needDom && defaultNode;
}

function toList(val) {
  return Array.isArray(val) ? val : [val];
}

var ELLIPSIS_STR = '...';
var Base = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
  var _classNames;

  var customizePrefixCls = props.prefixCls,
      className = props.className,
      style = props.style,
      type = props.type,
      disabled = props.disabled,
      children = props.children,
      ellipsis = props.ellipsis,
      copyable = props.copyable,
      component = props.component,
      title = props.title,
      suffixCls = props.suffixCls,
      restProps = (0, _objectWithoutProperties2["default"])(props, _excluded);

  var _useContext = (0, _react.useContext)(_ConfigContext["default"]),
      getProPrefixCls = _useContext.getProPrefixCls;

  var typographyRef = (0, _react.useRef)(null); // ============================ MISC ============================

  var prefixCls = getProPrefixCls('typography', customizePrefixCls);
  var textProps = (0, _omit["default"])(restProps, ['mark', 'code', 'delete', 'underline', 'strong', 'keyboard', 'italic', 'dataSet', 'rowIndex', 'colIndex', 'suffixCls']); // ========================== Copyable ==========================

  var _useMergedConfig = (0, _useMergedConfig5["default"])(copyable),
      _useMergedConfig2 = (0, _slicedToArray2["default"])(_useMergedConfig, 2),
      enableCopy = _useMergedConfig2[0],
      copyConfig = _useMergedConfig2[1];

  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      copied = _useState2[0],
      setCopied = _useState2[1];

  var copyIdRef = (0, _react.useRef)();

  var cleanCopyId = function cleanCopyId() {
    clearTimeout(copyIdRef.current);
  };

  var onCopyClick = function onCopyClick(e) {
    if (e) {
      e.preventDefault();
      e.stopPropagation();
    }

    (0, _copyToClipboard["default"])(copyConfig.text || String(children) || '');
    setCopied(true); // Trigger tips update

    cleanCopyId();
    copyIdRef.current = setTimeout(function () {
      setCopied(false);
    }, 3000);

    if (copyConfig.onCopy) {
      copyConfig.onCopy();
    }
  };

  (0, _react.useEffect)(function () {
    return cleanCopyId;
  }, []); // ========================== Ellipsis ==========================

  var _useState3 = (0, _react.useState)(false),
      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
      isLineClampSupport = _useState4[0],
      setIsLineClampSupport = _useState4[1];

  var _useState5 = (0, _react.useState)(false),
      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
      isTextOverflowSupport = _useState6[0],
      setIsTextOverflowSupport = _useState6[1];

  var _useState7 = (0, _react.useState)(false),
      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
      expanded = _useState8[0],
      setExpanded = _useState8[1];

  var _useState9 = (0, _react.useState)(false),
      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
      isJsEllipsis = _useState10[0],
      setIsJsEllipsis = _useState10[1];

  var _useState11 = (0, _react.useState)(false),
      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
      isNativeEllipsis = _useState12[0],
      setIsNativeEllipsis = _useState12[1];

  var _useMergedConfig3 = (0, _useMergedConfig5["default"])(ellipsis, {
    expandable: false
  }),
      _useMergedConfig4 = (0, _slicedToArray2["default"])(_useMergedConfig3, 2),
      enableEllipsis = _useMergedConfig4[0],
      ellipsisConfig = _useMergedConfig4[1];

  var mergedEnableEllipsis = enableEllipsis && !expanded;
  var _ellipsisConfig$rows = ellipsisConfig.rows,
      rows = _ellipsisConfig$rows === void 0 ? 1 : _ellipsisConfig$rows;
  var needMeasureEllipsis = (0, _react.useMemo)(function () {
    return !mergedEnableEllipsis || ellipsisConfig.suffix !== undefined || ellipsisConfig.onEllipsis || ellipsisConfig.expandable || enableCopy;
  }, [mergedEnableEllipsis, ellipsisConfig, enableCopy]);
  (0, _react.useLayoutEffect)(function () {
    if (enableEllipsis && !needMeasureEllipsis) {
      setIsLineClampSupport((0, _styleChecker.isStyleSupport)('webkitLineClamp'));
      setIsTextOverflowSupport((0, _styleChecker.isStyleSupport)('textOverflow'));
    }
  }, [needMeasureEllipsis, enableEllipsis]);
  var cssEllipsis = (0, _react.useMemo)(function () {
    if (needMeasureEllipsis) {
      return false;
    }

    if (rows === 1) {
      return isTextOverflowSupport;
    }

    return isLineClampSupport;
  }, [needMeasureEllipsis, isTextOverflowSupport, isLineClampSupport]);
  var isMergedEllipsis = mergedEnableEllipsis && (cssEllipsis ? isNativeEllipsis : isJsEllipsis);
  var cssTextOverflow = mergedEnableEllipsis && rows === 1 && cssEllipsis;
  var cssLineClamp = mergedEnableEllipsis && rows > 1 && cssEllipsis; // >>>>> Expand

  var onExpandClick = function onExpandClick(e) {
    setExpanded(true);

    if (ellipsisConfig.onExpand) {
      ellipsisConfig.onExpand(e);
    }
  };

  var _useState13 = (0, _react.useState)(0),
      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
      ellipsisWidth = _useState14[0],
      setEllipsisWidth = _useState14[1];

  var onResize = function onResize(width) {
    setEllipsisWidth(width);
  };

  var onJsEllipsis = function onJsEllipsis(jsEllipsis) {
    setIsJsEllipsis(jsEllipsis);

    if (isJsEllipsis !== jsEllipsis && ellipsisConfig.onEllipsis) {
      ellipsisConfig.onEllipsis(jsEllipsis);
    }
  };

  (0, _react.useEffect)(function () {
    var textEle = typographyRef.current;

    if (enableEllipsis && cssEllipsis && textEle) {
      var currentEllipsis = cssLineClamp ? textEle.offsetHeight < textEle.scrollHeight : textEle.offsetWidth < textEle.scrollWidth;

      if (isNativeEllipsis !== currentEllipsis) {
        setIsNativeEllipsis(currentEllipsis);
      }
    }
  }, [enableEllipsis, cssEllipsis, children, cssLineClamp]); // ========================== Tooltip ===========================

  var tooltipTitle = ellipsisConfig.tooltip === true ? children : ellipsisConfig.tooltip;
  var topAriaLabel = (0, _react.useMemo)(function () {
    var isValid = function isValid(val) {
      return ['string', 'number'].includes((0, _typeof2["default"])(val));
    };

    if (!enableEllipsis || cssEllipsis) {
      return undefined;
    }

    if (isValid(children)) {
      return children;
    }

    if (isValid(title)) {
      return title;
    }

    if (isValid(tooltipTitle)) {
      return tooltipTitle;
    }

    return undefined;
  }, [enableEllipsis, cssEllipsis, title, tooltipTitle, isMergedEllipsis]); // =========================== Render ===========================
  // >>>>>>>>>>> Typography
  // Expand

  var renderExpand = function renderExpand() {
    var expandable = ellipsisConfig.expandable,
        symbol = ellipsisConfig.symbol;
    if (!expandable) return null;
    var expandContent;

    if (symbol) {
      expandContent = symbol;
    } else {
      expandContent = (0, _localeContext.$l)('Typography', 'expand');
    }

    return /*#__PURE__*/_react["default"].createElement("a", {
      key: "expand",
      className: "".concat(prefixCls, "-expand"),
      onClick: onExpandClick,
      "aria-label": (0, _localeContext.$l)('Typography', 'expand')
    }, expandContent);
  }; // Copy


  var renderCopy = function renderCopy() {
    if (!enableCopy) return;
    var tooltips = copyConfig.tooltips,
        icon = copyConfig.icon;
    var tooltipNodes = toList(tooltips);
    var iconNodes = toList(icon);
    var copyTitle = copied ? getNode(tooltipNodes[1], (0, _localeContext.$l)('Typography', 'copied')) : getNode(tooltipNodes[0], (0, _localeContext.$l)('Typography', 'copy'));
    var systemStr = copied ? (0, _localeContext.$l)('Typography', 'copied') : (0, _localeContext.$l)('Typography', 'copy');
    var ariaLabel = typeof copyTitle === 'string' ? copyTitle : systemStr;
    return /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
      key: "copy",
      title: copyTitle
    }, /*#__PURE__*/_react["default"].createElement(_TransButton["default"], {
      className: (0, _classnames["default"])("".concat(prefixCls, "-copy"), copied && "".concat(prefixCls, "-copy-success")),
      onClick: onCopyClick,
      "aria-label": ariaLabel
    }, copied ? getNode(iconNodes[1], /*#__PURE__*/_react["default"].createElement(_icon["default"], {
      type: "check"
    }), true) : getNode(iconNodes[0], /*#__PURE__*/_react["default"].createElement(_icon["default"], {
      type: "content_copy"
    }), true)));
  };

  var renderOperations = function renderOperations(renderExpanded) {
    return [renderExpanded && renderExpand(), renderCopy()];
  };

  var renderEllipsis = function renderEllipsis(needEllipsis) {
    return [needEllipsis && /*#__PURE__*/_react["default"].createElement("span", {
      "aria-hidden": true,
      key: "ellipsis"
    }, ELLIPSIS_STR), ellipsisConfig.suffix, renderOperations(needEllipsis)];
  };

  return /*#__PURE__*/_react["default"].createElement(_resizeObserver["default"], {
    onResize: onResize,
    disabled: !mergedEnableEllipsis || cssEllipsis
  }, /*#__PURE__*/_react["default"].createElement(_EllipsisTooltip["default"], {
    title: tooltipTitle,
    enabledEllipsis: mergedEnableEllipsis,
    isEllipsis: isMergedEllipsis
  }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], (0, _extends2["default"])({
    className: (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-").concat(type), type), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-").concat(suffixCls), suffixCls), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-ellipsis"), enableEllipsis), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-single-line"), mergedEnableEllipsis && rows === 1), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-ellipsis-single-line"), cssTextOverflow), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-ellipsis-multiple-line"), cssLineClamp), _classNames), className),
    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), {}, {
      WebkitLineClamp: cssLineClamp ? rows : undefined
    }),
    component: component,
    ref: (0, _ref2.composeRef)(typographyRef, ref),
    "aria-label": topAriaLabel,
    title: title
  }, textProps), /*#__PURE__*/_react["default"].createElement(_Ellipsis["default"], {
    enabledMeasure: mergedEnableEllipsis && !cssEllipsis,
    text: children,
    rows: rows,
    width: ellipsisWidth,
    onEllipsis: onJsEllipsis
  }, function (node, needEllipsis) {
    var renderNode = node;

    if (node.length && needEllipsis && topAriaLabel) {
      renderNode = /*#__PURE__*/_react["default"].createElement("span", {
        key: "show-content",
        "aria-hidden": true
      }, renderNode);
    }

    var wrappedContext = wrapperDecorations(props, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderNode, renderEllipsis(needEllipsis)));
    return wrappedContext;
  }))));
});
Base.displayName = 'Base';
Base._PRO_TYPOGRAPHY_BASE = true;
Base.defaultProps = {
  component: 'div'
};
var _default = Base;
exports["default"] = _default;
//# sourceMappingURL=index.js.map