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

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

import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
import _typeof from "@babel/runtime/helpers/typeof";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["prefixCls", "className", "style", "type", "disabled", "children", "ellipsis", "copyable", "component", "title", "suffixCls"];
import React, { forwardRef, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
import omit from 'lodash/omit';
import classNames from 'classnames';
import copy from 'copy-to-clipboard';
import { composeRef } from "rc-util/es/ref";
import Icon from '../../../../es/icon';
import ReactResizeObserver from '../../../../es/_util/resizeObserver';
import ConfigContext from '../../../../es/config-provider/ConfigContext';
import Tooltip from '../../tooltip';
import TransButton from '../../_util/TransButton';
import EllipsisTooltip from './EllipsisTooltip';
import Ellipsis from './Ellipsis';
import useMergedConfig from '../hooks/useMergedConfig';
import Typography from '../Typography';
import { $l } from '../../locale-context';
import { isStyleSupport } from '../../_util/styleChecker';

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.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__*/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 = _objectWithoutProperties(props, _excluded);

  var _useContext = useContext(ConfigContext),
      getProPrefixCls = _useContext.getProPrefixCls;

  var typographyRef = useRef(null); // ============================ MISC ============================

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

  var _useMergedConfig = useMergedConfig(copyable),
      _useMergedConfig2 = _slicedToArray(_useMergedConfig, 2),
      enableCopy = _useMergedConfig2[0],
      copyConfig = _useMergedConfig2[1];

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      copied = _useState2[0],
      setCopied = _useState2[1];

  var copyIdRef = useRef();

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

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

    copy(copyConfig.text || String(children) || '');
    setCopied(true); // Trigger tips update

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

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

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

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      isLineClampSupport = _useState4[0],
      setIsLineClampSupport = _useState4[1];

  var _useState5 = useState(false),
      _useState6 = _slicedToArray(_useState5, 2),
      isTextOverflowSupport = _useState6[0],
      setIsTextOverflowSupport = _useState6[1];

  var _useState7 = useState(false),
      _useState8 = _slicedToArray(_useState7, 2),
      expanded = _useState8[0],
      setExpanded = _useState8[1];

  var _useState9 = useState(false),
      _useState10 = _slicedToArray(_useState9, 2),
      isJsEllipsis = _useState10[0],
      setIsJsEllipsis = _useState10[1];

  var _useState11 = useState(false),
      _useState12 = _slicedToArray(_useState11, 2),
      isNativeEllipsis = _useState12[0],
      setIsNativeEllipsis = _useState12[1];

  var _useMergedConfig3 = useMergedConfig(ellipsis, {
    expandable: false
  }),
      _useMergedConfig4 = _slicedToArray(_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 = useMemo(function () {
    return !mergedEnableEllipsis || ellipsisConfig.suffix !== undefined || ellipsisConfig.onEllipsis || ellipsisConfig.expandable || enableCopy;
  }, [mergedEnableEllipsis, ellipsisConfig, enableCopy]);
  useLayoutEffect(function () {
    if (enableEllipsis && !needMeasureEllipsis) {
      setIsLineClampSupport(isStyleSupport('webkitLineClamp'));
      setIsTextOverflowSupport(isStyleSupport('textOverflow'));
    }
  }, [needMeasureEllipsis, enableEllipsis]);
  var cssEllipsis = 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 = useState(0),
      _useState14 = _slicedToArray(_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);
    }
  };

  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 = useMemo(function () {
    var isValid = function isValid(val) {
      return ['string', 'number'].includes(_typeof(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 = $l('Typography', 'expand');
    }

    return /*#__PURE__*/React.createElement("a", {
      key: "expand",
      className: "".concat(prefixCls, "-expand"),
      onClick: onExpandClick,
      "aria-label": $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], $l('Typography', 'copied')) : getNode(tooltipNodes[0], $l('Typography', 'copy'));
    var systemStr = copied ? $l('Typography', 'copied') : $l('Typography', 'copy');
    var ariaLabel = typeof copyTitle === 'string' ? copyTitle : systemStr;
    return /*#__PURE__*/React.createElement(Tooltip, {
      key: "copy",
      title: copyTitle
    }, /*#__PURE__*/React.createElement(TransButton, {
      className: classNames("".concat(prefixCls, "-copy"), copied && "".concat(prefixCls, "-copy-success")),
      onClick: onCopyClick,
      "aria-label": ariaLabel
    }, copied ? getNode(iconNodes[1], /*#__PURE__*/React.createElement(Icon, {
      type: "check"
    }), true) : getNode(iconNodes[0], /*#__PURE__*/React.createElement(Icon, {
      type: "content_copy"
    }), true)));
  };

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

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

  return /*#__PURE__*/React.createElement(ReactResizeObserver, {
    onResize: onResize,
    disabled: !mergedEnableEllipsis || cssEllipsis
  }, /*#__PURE__*/React.createElement(EllipsisTooltip, {
    title: tooltipTitle,
    enabledEllipsis: mergedEnableEllipsis,
    isEllipsis: isMergedEllipsis
  }, /*#__PURE__*/React.createElement(Typography, _extends({
    className: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-").concat(type), type), _defineProperty(_classNames, "".concat(prefixCls, "-").concat(suffixCls), suffixCls), _defineProperty(_classNames, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames, "".concat(prefixCls, "-ellipsis"), enableEllipsis), _defineProperty(_classNames, "".concat(prefixCls, "-single-line"), mergedEnableEllipsis && rows === 1), _defineProperty(_classNames, "".concat(prefixCls, "-ellipsis-single-line"), cssTextOverflow), _defineProperty(_classNames, "".concat(prefixCls, "-ellipsis-multiple-line"), cssLineClamp), _classNames), className),
    style: _objectSpread(_objectSpread({}, style), {}, {
      WebkitLineClamp: cssLineClamp ? rows : undefined
    }),
    component: component,
    ref: composeRef(typographyRef, ref),
    "aria-label": topAriaLabel,
    title: title
  }, textProps), /*#__PURE__*/React.createElement(Ellipsis, {
    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.createElement("span", {
        key: "show-content",
        "aria-hidden": true
      }, renderNode);
    }

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