@fe6/water-pro/lib/typography/Base.js

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.baseProps = void 0;

var _vue = require("vue");

var _tslib = require("tslib");

var _omit = _interopRequireDefault(require("omit.js"));

var _LocaleReceiver = _interopRequireDefault(require("../locale-provider/LocaleReceiver"));

var _warning = _interopRequireDefault(require("../_util/warning"));

var _transButton = _interopRequireDefault(require("../_util/transButton"));

var _raf = _interopRequireDefault(require("../_util/raf"));

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

var _Editable = _interopRequireDefault(require("./Editable"));

var _util = _interopRequireDefault(require("./util"));

var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));

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

var _vcResizeObserver = _interopRequireDefault(require("../vc-resize-observer"));

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

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

var _CheckOutlined = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/CheckOutlined"));

var _CopyOutlined = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/CopyOutlined"));

var _EditOutlined = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/EditOutlined"));

var _useConfigInject2 = _interopRequireDefault(require("../_util/hooks/useConfigInject"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var isLineClampSupport = (0, _styleChecker.default)('webkitLineClamp');
var isTextOverflowSupport = (0, _styleChecker.default)('textOverflow');
var ELLIPSIS_STR = '...';
var Base = (0, _vue.defineComponent)({
  name: 'Base',
  inheritAttrs: false,
  emits: ['update:content'],
  setup: function setup(props, _ref) {
    var slots = _ref.slots,
        attrs = _ref.attrs,
        emit = _ref.emit;

    var _useConfigInject = (0, _useConfigInject2.default)('typography', props),
        prefixCls = _useConfigInject.prefixCls;

    var state = (0, _vue.reactive)({
      edit: false,
      copied: false,
      ellipsisText: '',
      ellipsisContent: null,
      isEllipsis: false,
      expanded: false,
      clientRendered: false,
      // locale
      expandStr: '',
      copyStr: '',
      copiedStr: '',
      editStr: '',
      copyId: undefined,
      rafId: undefined,
      prevProps: undefined,
      originContent: ''
    });
    var contentRef = (0, _vue.ref)();
    var editIcon = (0, _vue.ref)();
    var ellipsis = (0, _vue.computed)(function () {
      var ellipsis = props.ellipsis;

      if (!ellipsis) {
        return {};
      }

      return _extends({
        rows: 1,
        expandable: false
      }, _typeof(ellipsis) === 'object' ? ellipsis : null);
    });
    (0, _vue.onMounted)(function () {
      state.clientRendered = true;
    });
    (0, _vue.onBeforeUnmount)(function () {
      window.clearTimeout(state.copyId);

      _raf.default.cancel(state.rafId);
    });
    (0, _vue.watch)([function () {
      return ellipsis.value.rows;
    }, function () {
      return props.content;
    }], function () {
      (0, _vue.nextTick)(function () {
        resizeOnNextFrame();
      });
    }, {
      flush: 'post',
      deep: true,
      immediate: true
    });
    (0, _vue.watchEffect)(function () {
      if (!('content' in props)) {
        (0, _warning.default)(!props.editable, 'Typography', 'When `editable` is enabled, please use `content` instead of children');
        (0, _warning.default)(!props.ellipsis, 'Typography', 'When `ellipsis` is enabled, please use `content` instead of children');
      }
    });

    function saveTypographyRef(node) {
      contentRef.value = node;
    }

    function saveEditIconRef(node) {
      editIcon.value = node;
    }

    function getChildrenText() {
      var _a, _b;

      return props.ellipsis || props.editable ? props.content : (_b = (_a = contentRef.value) === null || _a === void 0 ? void 0 : _a.$el) === null || _b === void 0 ? void 0 : _b.innerText;
    } // =============== Expand ===============


    function onExpandClick(e) {
      var onExpand = ellipsis.value.onExpand;
      state.expanded = true;
      onExpand === null || onExpand === void 0 ? void 0 : onExpand(e);
    } // ================ Edit ================


    function onEditClick(e) {
      e.preventDefault();
      state.originContent = props.content;
      triggerEdit(true);
    }

    function onEditChange(value) {
      onContentChange(value);
      triggerEdit(false);
    }

    function onContentChange(value) {
      var onChange = editable.value.onChange;

      if (value !== props.content) {
        emit('update:content', value);
        onChange === null || onChange === void 0 ? void 0 : onChange(value);
      }
    }

    function onEditCancel() {
      triggerEdit(false);
    } // ================ Copy ================


    function onCopyClick(e) {
      e.preventDefault();
      var copyable = props.copyable;

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

      if (copyConfig.text === undefined) {
        copyConfig.text = getChildrenText();
      }

      (0, _copyToClipboard.default)(copyConfig.text || '');
      state.copied = true;
      (0, _vue.nextTick)(function () {
        if (copyConfig.onCopy) {
          copyConfig.onCopy();
        }

        state.copyId = window.setTimeout(function () {
          state.copied = false;
        }, 3000);
      });
    }

    var editable = (0, _vue.computed)(function () {
      var editable = props.editable;

      if (!editable) {
        return {
          editing: state.edit
        };
      }

      return _extends({
        editing: state.edit
      }, _typeof(editable) === 'object' ? editable : null);
    });

    function triggerEdit(edit) {
      var onStart = editable.value.onStart;

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

      state.edit = edit;
      (0, _vue.nextTick)(function () {
        var _a;

        if (!edit) {
          (_a = editIcon.value) === null || _a === void 0 ? void 0 : _a.focus();
        }
      });
    } // ============== Ellipsis ==============


    function resizeOnNextFrame() {
      _raf.default.cancel(state.rafId);

      state.rafId = (0, _raf.default)(function () {
        // Do not bind `syncEllipsis`. It need for test usage on prototype
        syncEllipsis();
      });
    }

    var canUseCSSEllipsis = (0, _vue.computed)(function () {
      var _ellipsis$value = ellipsis.value,
          rows = _ellipsis$value.rows,
          expandable = _ellipsis$value.expandable,
          suffix = _ellipsis$value.suffix,
          onEllipsis = _ellipsis$value.onEllipsis,
          tooltip = _ellipsis$value.tooltip;

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


      if (props.editable || props.copyable || expandable || onEllipsis) {
        return false;
      }

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

      return isLineClampSupport;
    });

    var syncEllipsis = function syncEllipsis() {
      var _a, _b;

      var ellipsisText = state.ellipsisText,
          isEllipsis = state.isEllipsis;
      var _ellipsis$value2 = ellipsis.value,
          rows = _ellipsis$value2.rows,
          suffix = _ellipsis$value2.suffix,
          onEllipsis = _ellipsis$value2.onEllipsis;

      if (!rows || rows < 0 || !((_a = contentRef.value) === null || _a === void 0 ? void 0 : _a.$el) || state.expanded || props.content === undefined) {
        return;
      } // Do not measure if css already support ellipsis


      if (canUseCSSEllipsis.value) {
        return;
      }

      var _measure = (0, _util.default)((_b = contentRef.value) === null || _b === void 0 ? void 0 : _b.$el, {
        rows: rows,
        suffix: suffix
      }, props.content, renderOperations(true), ELLIPSIS_STR),
          content = _measure.content,
          text = _measure.text,
          ell = _measure.ellipsis;

      if (ellipsisText !== text || state.isEllipsis !== ell) {
        state.ellipsisText = text;
        state.ellipsisContent = content;
        state.isEllipsis = ell;

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

    function wrapperDecorations(_ref2, content) {
      var mark = _ref2.mark,
          code = _ref2.code,
          underline = _ref2.underline,
          del = _ref2.delete,
          strong = _ref2.strong,
          keyboard = _ref2.keyboard;
      var currentContent = content;

      function wrap(needed, Tag) {
        if (!needed) {
          return;
        }

        var _currentContent = function () {
          return currentContent;
        }();

        currentContent = (0, _vue.createVNode)(Tag, null, {
          default: function _default() {
            return [_currentContent];
          }
        });
      }

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

    function renderExpand(forceRender) {
      var _ellipsis$value3 = ellipsis.value,
          expandable = _ellipsis$value3.expandable,
          symbol = _ellipsis$value3.symbol;

      if (!expandable) {
        return null;
      } // force render expand icon for measure usage or it will cause dead loop


      if (!forceRender && (state.expanded || !state.isEllipsis)) {
        return null;
      }

      var expandContent = (slots.ellipsisSymbol ? slots.ellipsisSymbol() : symbol) || state.expandStr;
      return (0, _vue.createVNode)("a", {
        "key": "expand",
        "class": "".concat(prefixCls.value, "-expand"),
        "onClick": onExpandClick,
        "aria-label": state.expandStr
      }, [expandContent]);
    }

    function renderEdit() {
      if (!props.editable) {
        return;
      }

      var tooltip = props.editable.tooltip;
      var icon = slots.editableIcon ? slots.editableIcon() : (0, _vue.createVNode)(_EditOutlined.default, {
        "role": "button"
      }, null);
      var title = slots.editableTooltip ? slots.editableTooltip() : state.editStr;
      var ariaLabel = typeof title === 'string' ? title : '';
      return (0, _vue.createVNode)(_tooltip.default, {
        "key": "edit",
        "title": tooltip === false ? '' : title
      }, {
        default: function _default() {
          return [(0, _vue.createVNode)(_transButton.default, {
            "ref": saveEditIconRef,
            "class": "".concat(prefixCls.value, "-edit"),
            "onClick": onEditClick,
            "aria-label": ariaLabel
          }, {
            default: function _default() {
              return [icon];
            }
          })];
        }
      });
    }

    function renderCopy() {
      if (!props.copyable) {
        return;
      }

      var tooltip = props.copyable.tooltip;
      var defaultTitle = state.copied ? state.copiedStr : state.copyStr;
      var title = slots.copyableTooltip ? slots.copyableTooltip({
        copied: state.copied
      }) : defaultTitle;
      var ariaLabel = typeof title === 'string' ? title : '';
      var defaultIcon = state.copied ? (0, _vue.createVNode)(_CheckOutlined.default, null, null) : (0, _vue.createVNode)(_CopyOutlined.default, null, null);
      var icon = slots.copyableIcon ? slots.copyableIcon({
        copied: !!state.copied
      }) : defaultIcon;
      return (0, _vue.createVNode)(_tooltip.default, {
        "key": "copy",
        "title": tooltip === false ? '' : title
      }, {
        default: function _default() {
          return [(0, _vue.createVNode)(_transButton.default, {
            "class": ["".concat(prefixCls.value, "-copy"), _defineProperty({}, "".concat(prefixCls.value, "-copy-success"), state.copied)],
            "onClick": onCopyClick,
            "aria-label": ariaLabel
          }, {
            default: function _default() {
              return [icon];
            }
          })];
        }
      });
    }

    function renderEditInput() {
      var className = attrs.class,
          style = attrs.style;
      var _editable$value = editable.value,
          maxlength = _editable$value.maxlength,
          autoSize = _editable$value.autoSize;
      return (0, _vue.createVNode)(_Editable.default, {
        "class": className,
        "style": style,
        "prefixCls": prefixCls.value,
        "value": props.content,
        "originContent": state.originContent,
        "maxlength": maxlength,
        "autoSize": autoSize,
        "onSave": onEditChange,
        "onChange": onContentChange,
        "onCancel": onEditCancel
      }, null);
    }

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

    return function () {
      var _a;

      var editing = editable.value.editing;

      var _children = props.ellipsis || props.editable ? 'content' in props ? props.content : (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots) : slots.default ? slots.default() : props.content;

      if (editing) {
        return renderEditInput();
      }

      return (0, _vue.createVNode)(_LocaleReceiver.default, {
        "componentName": "Text",
        "children": function children(locale) {
          var _a = _extends(_extends({}, props), attrs),
              type = _a.type,
              disabled = _a.disabled,
              content = _a.content,
              className = _a.class,
              style = _a.style,
              restProps = (0, _tslib.__rest)(_a, ["type", "disabled", "content", "class", "style"]);

          var _ellipsis$value4 = ellipsis.value,
              rows = _ellipsis$value4.rows,
              suffix = _ellipsis$value4.suffix,
              tooltip = _ellipsis$value4.tooltip;
          var edit = locale.edit,
              copyStr = locale.copy,
              copied = locale.copied,
              expand = locale.expand;
          state.editStr = edit;
          state.copyStr = copyStr;
          state.copiedStr = copied;
          state.expandStr = expand;
          var textProps = (0, _omit.default)(restProps, ['prefixCls', 'editable', 'copyable', 'ellipsis', 'mark', 'code', 'delete', 'underline', 'strong', 'keyboard']);
          var cssEllipsis = canUseCSSEllipsis.value;
          var cssTextOverflow = rows === 1 && cssEllipsis;
          var cssLineClamp = rows && rows > 1 && cssEllipsis;
          var textNode = _children;
          var ariaLabel; // Only use js ellipsis when css ellipsis not support

          if (rows && state.isEllipsis && !state.expanded && !cssEllipsis) {
            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 === null || restContent === void 0 ? void 0 : restContent.slice(String(state.ellipsisContent || '').length); // We move full content to outer element to avoid repeat read the content by accessibility

            textNode = (0, _vue.createVNode)(_vue.Fragment, null, [(0, _vue.toRaw)(state.ellipsisContent), (0, _vue.createVNode)("span", {
              "title": restContent,
              "aria-hidden": "true"
            }, [ELLIPSIS_STR]), suffix]);
          } else {
            textNode = (0, _vue.createVNode)(_vue.Fragment, null, [_children, suffix]);
          }

          textNode = wrapperDecorations(props, textNode);
          var showTooltip = tooltip && rows && state.isEllipsis && !state.expanded && !cssEllipsis;
          var title = slots.ellipsisTooltip ? slots.ellipsisTooltip() : tooltip;
          return (0, _vue.createVNode)(_vcResizeObserver.default, {
            "onResize": resizeOnNextFrame,
            "disabled": !rows
          }, {
            default: function _default() {
              return [(0, _vue.createVNode)(_Typography.default, _objectSpread({
                "ref": saveTypographyRef,
                "class": [_defineProperty({}, "".concat(prefixCls.value, "-").concat(type), type), _defineProperty({}, "".concat(prefixCls.value, "-disabled"), disabled), _defineProperty({}, "".concat(prefixCls.value, "-ellipsis"), rows), _defineProperty({}, "".concat(prefixCls.value, "-ellipsis-single-line"), cssTextOverflow), _defineProperty({}, "".concat(prefixCls.value, "-ellipsis-multiple-line"), cssLineClamp), className],
                "style": _extends(_extends({}, style), {
                  WebkitLineClamp: cssLineClamp ? rows : undefined
                }),
                "aria-label": ariaLabel
              }, textProps), {
                default: function _default() {
                  return [showTooltip ? (0, _vue.createVNode)(_tooltip.default, {
                    "title": tooltip === true ? _children : title
                  }, {
                    default: function _default() {
                      return [(0, _vue.createVNode)("span", null, [textNode])];
                    }
                  }) : textNode, renderOperations()];
                }
              })];
            }
          });
        }
      }, null);
    };
  }
});

var baseProps = function baseProps() {
  return {
    editable: _vueTypes.default.oneOfType([_vueTypes.default.looseBool, _vueTypes.default.object]),
    copyable: _vueTypes.default.oneOfType([_vueTypes.default.looseBool, _vueTypes.default.object]),
    resetable: _vueTypes.default.looseBool.def(true),
    styleReset: _vueTypes.default.looseBool,
    prefixCls: _vueTypes.default.string,
    component: _vueTypes.default.string,
    type: _vueTypes.default.oneOf(['secondary', 'success', 'danger', 'warning']),
    size: _vueTypes.default.oneOf(['large', 'small', 'default']).def('default'),
    disabled: _vueTypes.default.looseBool,
    ellipsis: _vueTypes.default.oneOfType([_vueTypes.default.looseBool, _vueTypes.default.object]),
    code: _vueTypes.default.looseBool,
    mark: _vueTypes.default.looseBool,
    underline: _vueTypes.default.looseBool,
    delete: _vueTypes.default.looseBool,
    strong: _vueTypes.default.looseBool,
    keyboard: _vueTypes.default.looseBool,
    content: _vueTypes.default.string
  };
};

exports.baseProps = baseProps;
Base.props = baseProps();
var _default2 = Base;
exports.default = _default2;