@teamix/typography/es/Base.js

文本的基本格式

import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
var _excluded = ["component", "children", "className", "type", "disabled", "style"];
import * as React from 'react';
import classNames from 'classnames';
import toArray from 'rc-util/lib/Children/toArray';
import copy from 'copy-to-clipboard';
import omit from 'rc-util/lib/omit';
import ResizeObserver from 'rc-resize-observer';
import { ConfigProvider, Icon } from '@alicloudfe/components';
import devWarning from './_util/devWarning';
import TransButton from './_util/transButton';
import raf from './_util/raf';
import { isStyleSupport } from './_util/styleChecker';
import Typography from './Typography';
import Editable from './Editable';
import Tooltip from './Tooltip';
import measure from './util';
var isLineClampSupport = isStyleSupport('webkitLineClamp');
var isTextOverflowSupport = isStyleSupport('textOverflow');

function wrapperDecorations(_ref, content) {
  var mark = _ref.mark,
      code = _ref.code,
      underline = _ref.underline,
      del = _ref["delete"],
      strong = _ref.strong,
      keyboard = _ref.keyboard;
  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');
  return currentContent;
}

var ELLIPSIS_STR = '...';

var Base = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(Base, _React$Component);

  function Base() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.contentRef = /*#__PURE__*/React.createRef();
    _this.state = {
      edit: false,
      copied: false,
      ellipsisText: '',
      ellipsisContent: null,
      isEllipsis: false,
      expanded: false,
      clientRendered: false
    };

    _this.getPrefixCls = function () {
      return 'teamix-typography';
    };

    _this.getDirection = function () {
      // @ts-ignore getContext warning
      var _ConfigProvider$getCo = ConfigProvider.getContext(),
          rtl = _ConfigProvider$getCo.rtl;

      return rtl ? 'rtl' : 'ltr';
    };

    _this.onExpandClick = function (e) {
      var _this$getEllipsis = _this.getEllipsis(),
          onExpand = _this$getEllipsis.onExpand;

      _this.setState({
        expanded: true
      });

      onExpand === null || onExpand === void 0 ? void 0 : onExpand(e);
    };

    _this.onEditClick = function () {
      _this.triggerEdit(true);
    };

    _this.onEditChange = function (value) {
      var _this$getEditable = _this.getEditable(),
          onChange = _this$getEditable.onChange;

      onChange === null || onChange === void 0 ? void 0 : onChange(value);

      _this.triggerEdit(false);
    };

    _this.onEditCancel = function () {
      var _this$getEditable$onC, _this$getEditable2;

      (_this$getEditable$onC = (_this$getEditable2 = _this.getEditable()).onCancel) === null || _this$getEditable$onC === void 0 ? void 0 : _this$getEditable$onC.call(_this$getEditable2);

      _this.triggerEdit(false);
    };

    _this.onCopyClick = function (e) {
      e.preventDefault();
      var _this$props = _this.props,
          children = _this$props.children,
          copyable = _this$props.copyable;

      var copyConfig = _extends({}, typeof copyable === 'object' ? copyable : null);

      if (copyConfig.text === undefined) {
        copyConfig.text = String(children);
      }

      copy(copyConfig.text || '');

      _this.setState({
        copied: true
      }, function () {
        if (copyConfig.onCopy) {
          copyConfig.onCopy();
        }

        _this.copyId = window.setTimeout(function () {
          _this.setState({
            copied: false
          });
        }, 3000);
      });
    };

    _this.setEditRef = function (node) {
      _this.editIcon = node;
    };

    _this.triggerEdit = function (edit) {
      var _this$getEditable3 = _this.getEditable(),
          onStart = _this$getEditable3.onStart;

      if (edit && onStart) {
        onStart();
      }

      _this.setState({
        edit: edit
      }, function () {
        if (!edit && _this.editIcon) {
          _this.editIcon.focus();
        }
      });
    };

    _this.resizeOnNextFrame = function () {
      raf.cancel(_this.rafId);
      _this.rafId = raf(function () {
        // Do not bind `syncEllipsis`. It need for test usage on prototype
        _this.syncEllipsis();
      });
    };

    return _this;
  }

  Base.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps) {
    var children = nextProps.children,
        editable = nextProps.editable;
    devWarning(!editable || typeof children === 'string', 'Typography', 'When `editable` is enabled, the `children` should use string.');
    return {};
  };

  var _proto = Base.prototype;

  _proto.componentDidMount = function componentDidMount() {
    this.setState({
      clientRendered: true
    });
    this.resizeOnNextFrame();
  };

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    var children = this.props.children;
    var ellipsis = this.getEllipsis();
    var prevEllipsis = this.getEllipsis(prevProps);

    if (children !== prevProps.children || ellipsis.rows !== prevEllipsis.rows) {
      this.resizeOnNextFrame();
    }
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    window.clearTimeout(this.copyId);
    raf.cancel(this.rafId);
  };

  _proto.getEditable = function getEditable(props) {
    var edit = this.state.edit;

    var _ref2 = props || this.props,
        editable = _ref2.editable;

    if (!editable) return {
      editing: edit
    };
    return _extends({
      editing: edit
    }, typeof editable === 'object' ? editable : null);
  };

  _proto.getEllipsis = function getEllipsis(props) {
    var _ref3 = props || this.props,
        ellipsis = _ref3.ellipsis;

    if (!ellipsis) return {};
    return _extends({
      rows: 1,
      expandable: false
    }, typeof ellipsis === 'object' ? ellipsis : null);
  };

  _proto.canUseCSSEllipsis = function canUseCSSEllipsis() {
    var clientRendered = this.state.clientRendered;
    var _this$props2 = this.props,
        editable = _this$props2.editable,
        copyable = _this$props2.copyable;

    var _this$getEllipsis2 = this.getEllipsis(),
        rows = _this$getEllipsis2.rows,
        expandable = _this$getEllipsis2.expandable,
        suffix = _this$getEllipsis2.suffix,
        onEllipsis = _this$getEllipsis2.onEllipsis,
        tooltip = _this$getEllipsis2.tooltip;

    if (suffix || tooltip) return false; // Can't use css ellipsis since we need to provide the place for button

    if (editable || copyable || expandable || !clientRendered || onEllipsis) {
      return false;
    }

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

    return isLineClampSupport;
  };

  _proto.syncEllipsis = function syncEllipsis() {
    var _this$state = this.state,
        ellipsisText = _this$state.ellipsisText,
        isEllipsis = _this$state.isEllipsis,
        expanded = _this$state.expanded;

    var _this$getEllipsis3 = this.getEllipsis(),
        rows = _this$getEllipsis3.rows,
        suffix = _this$getEllipsis3.suffix,
        onEllipsis = _this$getEllipsis3.onEllipsis;

    var children = this.props.children;
    if (!rows || rows < 0 || !this.contentRef.current || expanded) return; // Do not measure if css already support ellipsis

    if (this.canUseCSSEllipsis()) return;
    devWarning(toArray(children).every(function (child) {
      return typeof child === 'string';
    }), 'Typography', '`ellipsis` should use string as children only.');

    var _measure = measure(this.contentRef.current, {
      rows: rows,
      suffix: suffix
    }, children, this.renderOperations(true), ELLIPSIS_STR),
        content = _measure.content,
        text = _measure.text,
        ellipsis = _measure.ellipsis;

    if (ellipsisText !== text || isEllipsis !== ellipsis) {
      this.setState({
        ellipsisText: text,
        ellipsisContent: content,
        isEllipsis: ellipsis
      });

      if (isEllipsis !== ellipsis && onEllipsis) {
        onEllipsis(ellipsis);
      }
    }
  };

  _proto.renderExpand = function renderExpand(forceRender) {
    var _this$getEllipsis4 = this.getEllipsis(),
        expandable = _this$getEllipsis4.expandable,
        symbol = _this$getEllipsis4.symbol;

    var _this$state2 = this.state,
        expanded = _this$state2.expanded,
        isEllipsis = _this$state2.isEllipsis;
    if (!expandable) return null; // force render expand icon for measure usage or it will cause dead loop

    if (!forceRender && (expanded || !isEllipsis)) return null;
    var expandContent;

    if (symbol) {
      expandContent = symbol;
    } else {
      expandContent = this.expandStr;
    }

    return /*#__PURE__*/React.createElement("a", {
      key: "expand",
      className: this.getPrefixCls() + "-expand",
      onClick: this.onExpandClick,
      "aria-label": this.expandStr
    }, expandContent);
  };

  _proto.renderEdit = function renderEdit() {
    var editable = this.props.editable;
    if (!editable) return null;
    var _ref4 = editable,
        icon = _ref4.icon,
        tooltip = _ref4.tooltip,
        tooltipProps = _ref4.tooltipProps;
    var title = toArray(tooltip)[0] || this.editStr;
    var ariaLabel = typeof title === 'string' ? title : '';
    return /*#__PURE__*/React.createElement(Tooltip, _extends({}, tooltipProps, {
      key: "edit",
      title: tooltip === false ? '' : title
    }), /*#__PURE__*/React.createElement(TransButton, {
      ref: this.setEditRef,
      className: this.getPrefixCls() + "-edit",
      onClick: this.onEditClick,
      "aria-label": ariaLabel
    }, icon || /*#__PURE__*/React.createElement(Icon, {
      size: "small",
      type: "edit"
    })));
  };

  _proto.renderCopy = function renderCopy() {
    var copied = this.state.copied;
    var copyable = this.props.copyable;
    if (!copyable) return null;
    var prefixCls = this.getPrefixCls();
    var _ref5 = copyable,
        tooltips = _ref5.tooltips,
        tooltipProps = _ref5.tooltipProps;
    var tooltipNodes = toArray(tooltips);

    if (tooltipNodes.length === 0) {
      tooltipNodes = [this.copyStr, this.copiedStr];
    }

    var title = copied ? tooltipNodes[1] : tooltipNodes[0];
    var ariaLabel = typeof title === 'string' ? title : '';
    var icons = toArray(copyable.icon);
    return /*#__PURE__*/React.createElement(Tooltip, _extends({}, tooltipProps, {
      key: "copy",
      title: tooltips === false ? '' : title
    }), /*#__PURE__*/React.createElement(TransButton, {
      className: classNames(prefixCls + "-copy", copied && prefixCls + "-copy-success"),
      onClick: this.onCopyClick,
      "aria-label": ariaLabel
    }, copied ? icons[1] || /*#__PURE__*/React.createElement(Icon, {
      size: "small",
      type: "tick"
    }) : icons[0] || /*#__PURE__*/React.createElement(Icon, {
      size: "small",
      type: "copy"
    })));
  };

  _proto.renderEditInput = function renderEditInput() {
    var _this$props3 = this.props,
        children = _this$props3.children,
        className = _this$props3.className,
        style = _this$props3.style;

    var _this$getEditable4 = this.getEditable(),
        maxLength = _this$getEditable4.maxLength,
        autoHeight = _this$getEditable4.autoHeight,
        onEnd = _this$getEditable4.onEnd;

    return /*#__PURE__*/React.createElement(Editable, {
      value: typeof children === 'string' ? children : '',
      onSave: this.onEditChange,
      onCancel: this.onEditCancel,
      onEnd: onEnd,
      prefixCls: this.getPrefixCls(),
      className: className,
      style: style,
      direction: this.getDirection(),
      maxLength: maxLength,
      autoHeight: autoHeight
    });
  };

  _proto.renderOperations = function renderOperations(forceRenderExpanded) {
    return [this.renderExpand(forceRenderExpanded), this.renderEdit(), this.renderCopy()].filter(function (node) {
      return node;
    });
  };

  _proto.renderContent = function renderContent() {
    var _classNames;

    var _this$state3 = this.state,
        ellipsisContent = _this$state3.ellipsisContent,
        isEllipsis = _this$state3.isEllipsis,
        expanded = _this$state3.expanded;

    var _this$props4 = this.props,
        component = _this$props4.component,
        children = _this$props4.children,
        className = _this$props4.className,
        type = _this$props4.type,
        disabled = _this$props4.disabled,
        style = _this$props4.style,
        restProps = _objectWithoutPropertiesLoose(_this$props4, _excluded);

    var _this$getEllipsis5 = this.getEllipsis(),
        rows = _this$getEllipsis5.rows,
        suffix = _this$getEllipsis5.suffix,
        tooltip = _this$getEllipsis5.tooltip,
        tooltipProps = _this$getEllipsis5.tooltipProps;

    var prefixCls = this.getPrefixCls();
    var textProps = omit(restProps, ['prefixCls', 'editable', 'copyable', 'ellipsis', 'mark', 'code', 'delete', 'underline', 'strong', 'keyboard']);
    var cssEllipsis = this.canUseCSSEllipsis();
    var cssTextOverflow = rows === 1 && cssEllipsis;
    var cssLineClamp = rows && rows > 1 && cssEllipsis;
    var textNode = children; // Only use js ellipsis when css ellipsis not support

    if (rows && isEllipsis && !expanded && !cssEllipsis) {
      var _restContent;

      var title = restProps.title;
      var restContent = title || '';

      if (!title && (typeof children === 'string' || typeof children === 'number')) {
        restContent = String(children);
      } // show rest content as title on symbol


      restContent = (_restContent = restContent) === null || _restContent === void 0 ? void 0 : _restContent.slice(String(ellipsisContent || '').length); // We move full content to outer element to avoid repeat read the content by accessibility

      textNode = /*#__PURE__*/React.createElement(React.Fragment, null, ellipsisContent, /*#__PURE__*/React.createElement("span", {
        title: restContent,
        "aria-hidden": "true"
      }, ELLIPSIS_STR), suffix); // If provided tooltip, we need wrap with span to let Tooltip inject events

      if (tooltip) {
        textNode = /*#__PURE__*/React.createElement(Tooltip, _extends({}, tooltipProps, {
          title: tooltip === true ? children : tooltip
        }), /*#__PURE__*/React.createElement("span", null, textNode));
      }
    } else {
      textNode = /*#__PURE__*/React.createElement(React.Fragment, null, children, suffix);
    }

    textNode = wrapperDecorations(this.props, textNode);
    this.editStr = '编辑';
    this.copyStr = '复制';
    this.copiedStr = '复制成功';
    this.expandStr = '展开';
    return /*#__PURE__*/React.createElement(ResizeObserver, {
      onResize: this.resizeOnNextFrame,
      disabled: !rows
    }, /*#__PURE__*/React.createElement(Typography, _extends({
      className: classNames((_classNames = {}, _classNames[prefixCls + "-" + type] = type, _classNames[prefixCls + "-disabled"] = disabled, _classNames[prefixCls + "-ellipsis"] = rows, _classNames[prefixCls + "-ellipsis-single-line"] = cssTextOverflow, _classNames[prefixCls + "-ellipsis-multiple-line"] = cssLineClamp, _classNames), className),
      style: _extends({}, style, {
        WebkitLineClamp: cssLineClamp ? rows : undefined
      }),
      component: component,
      ref: this.contentRef,
      direction: this.getDirection()
    }, textProps), textNode, this.renderOperations()));
  };

  _proto.render = function render() {
    var _this$getEditable5 = this.getEditable(),
        editing = _this$getEditable5.editing;

    if (editing) {
      return this.renderEditInput();
    }

    return this.renderContent();
  };

  return Base;
}(React.Component);

Base.defaultProps = {
  children: ''
};
export default Base;