iep-ui/lib/typography/Base.js

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

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.baseProps = exports.BaseType = undefined;

var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props');

var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _typeof2 = require('babel-runtime/helpers/typeof');

var _typeof3 = _interopRequireDefault(_typeof2);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

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

var _styleChecker2 = _interopRequireDefault(_styleChecker);

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

var _vueTypes2 = _interopRequireDefault(_vueTypes);

var _configConsumerProps = require('../config-provider/configConsumerProps');

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

var _LocaleReceiver2 = _interopRequireDefault(_LocaleReceiver);

var _propsUtil = require('../_util/props-util');

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

var _copyToClipboard2 = _interopRequireDefault(_copyToClipboard);

var _transButton = require('../_util/transButton');

var _transButton2 = _interopRequireDefault(_transButton);

var _raf = require('../_util/raf');

var _raf2 = _interopRequireDefault(_raf);

var _util = require('./util');

var _util2 = _interopRequireDefault(_util);

var _tooltip = require('../tooltip');

var _tooltip2 = _interopRequireDefault(_tooltip);

var _omit = require('lodash/omit');

var _omit2 = _interopRequireDefault(_omit);

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

var _vcResizeObserver2 = _interopRequireDefault(_vcResizeObserver);

var _Typography = require('./Typography');

var _Typography2 = _interopRequireDefault(_Typography);

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

var BaseType = exports.BaseType = 'secondary' | 'success' | 'warning' | 'danger';

var isLineClampSupport = (0, _styleChecker2['default'])('webkitLineClamp');
var isTextOverflowSupport = (0, _styleChecker2['default'])('textOverflow');

var ELLIPSIS_STR = '...';
var baseProps = exports.baseProps = {
  editable: _vueTypes2['default'].oneOfType([_vueTypes2['default'].bool, _vueTypes2['default'].object]),
  copyable: _vueTypes2['default'].oneOfType([_vueTypes2['default'].bool, _vueTypes2['default'].object]),
  prefixCls: _vueTypes2['default'].string,
  component: _vueTypes2['default'].string,
  type: _vueTypes2['default'].oneOf(['secondary', 'success', 'danger', 'warning']),
  disabled: _vueTypes2['default'].bool,
  ellipsis: _vueTypes2['default'].oneOfType([_vueTypes2['default'].bool, _vueTypes2['default'].object]),
  code: _vueTypes2['default'].bool,
  mark: _vueTypes2['default'].bool,
  underline: _vueTypes2['default'].bool,
  'delete': _vueTypes2['default'].bool,
  strong: _vueTypes2['default'].bool,
  keyboard: _vueTypes2['default'].bool,
  content: _vueTypes2['default'].string
};

exports['default'] = {
  name: 'Base',
  inheritAttrs: false,
  inject: {
    configProvider: { 'default': function _default() {
        return _configConsumerProps.ConfigConsumerProps;
      } }
  },
  props: baseProps,
  data: function data() {
    return {
      state: {
        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: ''
      },

      editIcon: undefined
    };
  },

  computed: {
    rowsAndContentListen: function rowsAndContentListen() {
      return {
        rows: this.ellipsisFunc.rows,
        content: this.content
      };
    },
    ellipsisFunc: function ellipsisFunc() {
      var _getOptionProps = (0, _propsUtil.getOptionProps)(this),
          ellipsis = _getOptionProps.ellipsis;

      if (!ellipsis) return {};
      return (0, _extends3['default'])({
        rows: 1,
        expandable: false
      }, (typeof ellipsis === 'undefined' ? 'undefined' : (0, _typeof3['default'])(ellipsis)) === 'object' ? ellipsis : null);
    },
    editableFunc: function editableFunc() {
      var _getOptionProps2 = (0, _propsUtil.getOptionProps)(this),
          editable = _getOptionProps2.editable;

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

      return (0, _extends3['default'])({
        editing: this.state.edit
      }, (typeof editable === 'undefined' ? 'undefined' : (0, _typeof3['default'])(editable)) === 'object' ? editable : null);
    },
    canUseCSSEllipsis: function canUseCSSEllipsis() {
      var _ellipsisFunc = this.ellipsisFunc,
          rows = _ellipsisFunc.rows,
          expandable = _ellipsisFunc.expandable,
          suffix = _ellipsisFunc.suffix,
          onEllipsis = _ellipsisFunc.onEllipsis,
          tooltip = _ellipsisFunc.tooltip;

      if (suffix || tooltip) return false;
      if (this.$props.editable || this.$props.copyable || expandable || onEllipsis) {
        return false;
      }
      if (rows === 1) {
        return isTextOverflowSupport;
      }
      return isLineClampSupport;
    }
  },
  mounted: function mounted() {
    var _this = this;

    this.state.clientRendered = true;
    this.$watch('rowsAndContentListen', function () {
      _this.resizeOnNextFrame();
    }, {
      deep: true,
      immediate: true
    });
  },
  beforeDestroy: function beforeDestroy() {
    window.clearTimeout(this.state.copyId);
    _raf2['default'].cancel(this.state.rafId);
  },

  methods: {
    getChildrenText: function getChildrenText() {
      var _getOptionProps3 = (0, _propsUtil.getOptionProps)(this),
          ellipsis = _getOptionProps3.ellipsis,
          editable = _getOptionProps3.editable,
          content = _getOptionProps3.content;

      return ellipsis || editable ? content : this.$refs.contentRef.$el.innerText;
    },

    // =============== Expand ===============
    onExpandClick: function onExpandClick(e) {
      var onExpand = this.ellipsisFunc.onExpand;

      this.state.expanded = true;
      if (onExpand) {
        onExpand(e);
      }
    },

    // ================ Edit ================
    onEditClick: function onEditClick(e) {
      e.preventDefault();

      var _getOptionProps4 = (0, _propsUtil.getOptionProps)(this),
          content = _getOptionProps4.content;

      this.state.originContent = content;
      this.triggerEdit(true);
    },
    onEditChange: function onEditChange(value) {
      this.onContentChange(value);
      this.triggerEdit(false);
    },
    onContentChange: function onContentChange(value) {
      var onChange = this.editableFunc.onChange;

      var _getOptionProps5 = (0, _propsUtil.getOptionProps)(this),
          content = _getOptionProps5.content;

      if (value !== content) {
        this.$emit('update:content', value);
        if (onChange) {
          onChange(value);
        }
      }
    },
    onEditCancel: function onEditCancel() {
      if (this.editableFunc.onCancel) {
        this.editableFunc.onCancel();
      }
      this.triggerEdit(false);
    },

    // ================ Copy ================
    onCopyClick: function onCopyClick(e) {
      var _this2 = this;

      e.preventDefault();
      var copyable = this.$props.copyable;

      var copyConfig = (0, _extends3['default'])({}, (typeof copyable === 'undefined' ? 'undefined' : (0, _typeof3['default'])(copyable)) === 'object' ? copyable : null);

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

      (0, _copyToClipboard2['default'])(copyConfig.text || '');
      this.state.copied = true;
      this.$nextTick(function () {
        if (copyConfig.onCopy) {
          copyConfig.onCopy();
        }
        _this2.state.copyId = window.setTimeout(function () {
          _this2.state.copied = false;
        }, 3000);
      });
    },
    triggerEdit: function triggerEdit(edit) {
      var _this3 = this;

      var onStart = this.editableFunc.onStart;

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

      this.state.edit = edit;
      this.$nextTick(function () {
        if (!edit) {
          _this3.editIcon ? _this3.editIcon.focus() : null;
        }
      });
    },

    // ============== Ellipsis ==============
    resizeOnNextFrame: function resizeOnNextFrame() {
      var _this4 = this;

      _raf2['default'].cancel(this.state.rafId);
      this.state.rafId = (0, _raf2['default'])(function () {
        _this4.syncEllipsis();
      });
    },
    syncEllipsis: function syncEllipsis() {
      var _state = this.state,
          ellipsisText = _state.ellipsisText,
          isEllipsis = _state.isEllipsis;
      var _ellipsisFunc2 = this.ellipsisFunc,
          rows = _ellipsisFunc2.rows,
          suffix = _ellipsisFunc2.suffix,
          onEllipsis = _ellipsisFunc2.onEllipsis;

      if (!rows || rows < 0 || !this.$refs.contentRef.$el || this.state.expanded || this.$props.content === undefined) return;

      // Do not measure if css already support ellipsis
      if (this.canUseCSSEllipsis) return;

      var _measure = (0, _util2['default'])(this.$refs.contentRef.$el, { rows: rows, suffix: suffix }, this.$props.content, this.renderOperations(true), ELLIPSIS_STR),
          content = _measure.content,
          text = _measure.text,
          ell = _measure.ell;

      // console.log('ell:', this.$refs.contentRef.$el);


      if (ellipsisText !== text || this.state.isEllipsis !== ell) {
        this.state.ellipsisText = text;
        this.state.ellipsisContent = content;
        this.state.isEllipsis = ell;
        if (isEllipsis !== ell && onEllipsis) {
          onEllipsis(ell);
        }
      }
    },
    wrapperDecorations: function wrapperDecorations(_ref, content) {
      var mark = _ref.mark,
          code = _ref.code,
          underline = _ref.underline,
          del = _ref.del,
          strong = _ref.strong,
          keyboard = _ref.keyboard;
      var h = this.$createElement;

      var currentContent = content;

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

        currentContent = h(Tag, [currentContent]);
      }

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

      return currentContent;
    },
    renderExpand: function renderExpand(forceRender) {
      var h = this.$createElement;
      var _ellipsisFunc3 = this.ellipsisFunc,
          expandable = _ellipsisFunc3.expandable,
          symbol = _ellipsisFunc3.symbol;

      var _getOptionProps6 = (0, _propsUtil.getOptionProps)(this),
          customizePrefixCls = _getOptionProps6.prefixCls;

      var getPrefixCls = this.configProvider.getPrefixCls;
      var prefixCls = getPrefixCls('typography', customizePrefixCls);
      if (!expandable) return null;

      // force render expand icon for measure usage or it will cause dead loop
      if (!forceRender && (this.state.expanded || !this.state.isEllipsis)) return null;
      var expandContent = (this.$slots.ellipsisSymbol ? this.$slots.ellipsisSymbol() : symbol) || this.state.expandStr;

      return h(
        'a',
        {
          key: 'expand',
          'class': prefixCls + '-expand',
          on: {
            'click': this.onExpandClick
          },
          attrs: {
            'aria-label': this.state.expandStr
          }
        },
        [expandContent]
      );
    },
    renderEdit: function renderEdit() {
      var h = this.$createElement;

      if (!this.$props.editable) return;

      var _getOptionProps7 = (0, _propsUtil.getOptionProps)(this),
          customizePrefixCls = _getOptionProps7.prefixCls;

      var getPrefixCls = this.configProvider.getPrefixCls;
      var prefixCls = getPrefixCls('typography', customizePrefixCls);
      var tooltip = this.$props.editable.tooltip;

      var icon = this.$slots.editableIcon ? this.$slots.editableIcon() : h(EditOutlined, {
        attrs: { role: 'button' }
      });
      var title = this.$slots.editableTooltip ? this.$slots.editableTooltip() : this.$state.editStr;
      var ariaLabel = typeof title === 'string' ? title : '';

      return h(
        _tooltip2['default'],
        { key: 'edit', attrs: { title: tooltip === false ? '' : title }
        },
        [h(
          _transButton2['default'],
          {
            ref: this.editIcon,
            'class': prefixCls + '-edit',
            on: {
              'click': this.onEditClick
            },
            attrs: {
              'aria-label': ariaLabel
            }
          },
          [icon]
        )]
      );
    },
    renderCopy: function renderCopy() {
      var h = this.$createElement;

      if (!this.$props.copyable) return;

      var _getOptionProps8 = (0, _propsUtil.getOptionProps)(this),
          customizePrefixCls = _getOptionProps8.prefixCls;

      var getPrefixCls = this.configProvider.getPrefixCls;
      var prefixCls = getPrefixCls('typography', customizePrefixCls);
      var tooltip = this.$props.copyable.tooltip;

      var defaultTitle = this.state.copied ? this.state.copiedStr : this.state.copyStr;
      var title = this.$slots.copyableTooltip ? this.$slots.copyableTooltip({ copied: this.state.copied }) : defaultTitle;
      var ariaLabel = typeof title === 'string' ? title : '';
      var defaultIcon = this.state.copied ? h(CheckOutlined) : h(CopyOutlined);
      var icon = this.$slots.copyableIcon ? this.$slots.copyableIcon({ copied: !!this.state.copied }) : defaultIcon;

      return h(
        _tooltip2['default'],
        { key: 'copy', attrs: { title: tooltip === false ? '' : title }
        },
        [h(
          _transButton2['default'],
          {
            'class': [prefixCls + '-copy', (0, _defineProperty3['default'])({}, prefixCls + '-copy-success', this.state.copied)],
            on: {
              'click': this.onCopyClick
            },
            attrs: {
              'aria-label': ariaLabel
            }
          },
          [icon]
        )]
      );
    },
    renderEditInput: function renderEditInput() {
      var h = this.$createElement;
      var _$attrs = this.$attrs,
          className = _$attrs['class'],
          style = _$attrs.style;
      var _editableFunc = this.editableFunc,
          maxlength = _editableFunc.maxlength,
          autoSize = _editableFunc.autoSize,
          onEnd = _editableFunc.onEnd;

      var _getOptionProps9 = (0, _propsUtil.getOptionProps)(this),
          customizePrefixCls = _getOptionProps9.prefixCls;

      var getPrefixCls = this.configProvider.getPrefixCls;
      var prefixCls = getPrefixCls('typography', customizePrefixCls);
      return h(Editable, {
        'class': className,
        style: style,
        attrs: { prefixCls: prefixCls.value,
          value: this.$props.content,
          originContent: this.state.originContent,
          maxlength: maxlength,
          autoSize: autoSize
        },
        on: {
          'save': this.onEditChange,
          'change': this.onContentChange,
          'cancel': this.onEditCancel,
          'end': onEnd
        }
      });
    },
    renderOperations: function renderOperations(forceRenderExpanded) {
      return [this.renderExpand(forceRenderExpanded), this.renderEdit(), this.renderCopy()].filter(function (node) {
        return node;
      });
    }
  },
  render: function render() {
    var _this5 = this;

    var h = arguments[0];

    var _getOptionProps10 = (0, _propsUtil.getOptionProps)(this),
        customizePrefixCls = _getOptionProps10.prefixCls;

    var getPrefixCls = this.configProvider.getPrefixCls;
    var prefixCls = getPrefixCls('typography', customizePrefixCls);
    var editing = this.editableFunc.editing;

    var _children = this.$props.ellipsis || this.$props.editable ? this.$props.content !== undefined ? this.$props.content : this.$slots['default'] : this.$slots['default'] ? this.$slots['default'] : this.$props.content;
    if (editing) {
      return this.renderEditInput();
    }

    return h(_LocaleReceiver2['default'], {
      attrs: {
        componentName: 'Text',
        children: function children(locale) {
          var _ref3;

          var _$props$$attrs = (0, _extends3['default'])({}, _this5.$props, _this5.$attrs),
              type = _$props$$attrs.type,
              disabled = _$props$$attrs.disabled,
              content = _$props$$attrs.content,
              className = _$props$$attrs['class'],
              style = _$props$$attrs.style,
              restProps = (0, _objectWithoutProperties3['default'])(_$props$$attrs, ['type', 'disabled', 'content', 'class', 'style']);

          var _ellipsisFunc4 = _this5.ellipsisFunc,
              rows = _ellipsisFunc4.rows,
              suffix = _ellipsisFunc4.suffix,
              tooltip = _ellipsisFunc4.tooltip;
          var edit = locale.edit,
              copyStr = locale.copy,
              copied = locale.copied,
              expand = locale.expand;


          _this5.state.editStr = edit;
          _this5.state.copyStr = copyStr;
          _this5.state.copiedStr = copied;
          _this5.state.expandStr = expand;

          var textProps = (0, _omit2['default'])(restProps, ['prefixCls', 'editable', 'copyable', 'ellipsis', 'mark', 'code', 'delete', 'underline', 'strong', 'keyboard']);

          var cssEllipsis = _this5.canUseCSSEllipsis;
          var cssTextOverflow = rows === 1 && cssEllipsis;
          var cssLineClamp = rows && rows > 1 && cssEllipsis;

          var textNode = _children;
          var ariaLabel = void 0;

          // Only use js ellipsis when css ellipsis not support
          if (rows && _this5.state.isEllipsis && !_this5.state.expanded && !cssEllipsis) {
            var _title = restProps.title;

            var restContent = _title || '';

            if (!_title && (typeof _children === 'string' || typeof _children === 'number')) {
              restContent = _children;
            }

            // show rest content as title on symbol
            restContent = restContent ? restContent.slice((_this5.state.ellipsisContent || '').length) : null;
            // We move full content to outer element to avoid repeat read the content by accessibility
            textNode = [_this5.state.ellipsisContent, h(
              'span',
              {
                attrs: { title: restContent, 'aria-hidden': 'true' }
              },
              [ELLIPSIS_STR]
            ), suffix];
          } else {
            textNode = [_children, suffix];
          }
          textNode = _this5.wrapperDecorations(_this5.$props, textNode);
          var showTooltip = tooltip && rows && _this5.state.isEllipsis && !_this5.state.expanded && !cssEllipsis;
          var title = _this5.$slots.ellipsisTooltip ? _this5.$slots.ellipsisTooltip() : tooltip;

          console.log('showTooltip:', tooltip, rows, _this5.state.isEllipsis, !_this5.state.expanded, !cssEllipsis);

          return h(
            _vcResizeObserver2['default'],
            {
              on: {
                'resize': _this5.resizeOnNextFrame
              },
              attrs: { disabled: !rows }
            },
            [h(
              _Typography2['default'],
              (0, _babelHelperVueJsxMergeProps2['default'])([{
                ref: 'contentRef',
                'class': [(_ref3 = {}, (0, _defineProperty3['default'])(_ref3, prefixCls + '-' + type, type), (0, _defineProperty3['default'])(_ref3, prefixCls + '-disabled', disabled), (0, _defineProperty3['default'])(_ref3, prefixCls + '-ellipsis', rows), (0, _defineProperty3['default'])(_ref3, prefixCls + '-single-line', rows === 1), (0, _defineProperty3['default'])(_ref3, prefixCls + '-ellipsis-single-line', cssTextOverflow), (0, _defineProperty3['default'])(_ref3, prefixCls + '-ellipsis-multiple-line', cssLineClamp), _ref3), className],
                style: (0, _extends3['default'])({}, style, {
                  WebkitLineClamp: cssLineClamp ? rows : undefined
                }),
                attrs: { 'aria-label': ariaLabel
                }
              }, textProps]),
              [showTooltip ? h(
                _tooltip2['default'],
                {
                  attrs: { title: tooltip === true ? _children : title }
                },
                [h('span', [textNode])]
              ) : textNode, _this5.renderOperations()]
            )]
          );
        }
      }
    });
  }
};