ant-design-vue/es/button/button.js

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

import _defineProperty from 'babel-runtime/helpers/defineProperty';
import _extends from 'babel-runtime/helpers/extends';
import Wave from '../_util/wave';
import Icon from '../icon';
var rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
var isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
import buttonTypes from './buttonTypes';
var props = buttonTypes();
export default {
  name: 'AButton',
  __ANT_BUTTON: true,
  props: _extends({}, props),
  data: function data() {
    return {
      sizeMap: {
        large: 'lg',
        small: 'sm'
      },
      // clicked: false,
      sLoading: !!this.loading,
      hasTwoCNChar: false
    };
  },
  mounted: function mounted() {
    this.fixTwoCNChar();
  },
  updated: function updated() {
    this.fixTwoCNChar();
  },
  beforeDestroy: function beforeDestroy() {
    // if (this.timeout) {
    //   clearTimeout(this.timeout)
    // }
    if (this.delayTimeout) {
      clearTimeout(this.delayTimeout);
    }
  },

  watch: {
    loading: function loading(val) {
      var _this = this;

      clearTimeout(this.delayTimeout);
      if (typeof val !== 'boolean' && val && val.delay) {
        this.delayTimeout = setTimeout(function () {
          _this.sLoading = !!val;
        }, val.delay);
      } else {
        this.sLoading = !!val;
      }
    }
  },
  computed: {
    classes: function classes() {
      var _ref;

      var prefixCls = this.prefixCls,
          type = this.type,
          shape = this.shape,
          size = this.size,
          hasTwoCNChar = this.hasTwoCNChar,
          sLoading = this.sLoading,
          ghost = this.ghost,
          block = this.block,
          sizeMap = this.sizeMap;

      var sizeCls = sizeMap[size] || '';
      return _ref = {}, _defineProperty(_ref, '' + prefixCls, true), _defineProperty(_ref, prefixCls + '-' + type, type), _defineProperty(_ref, prefixCls + '-' + shape, shape), _defineProperty(_ref, prefixCls + '-' + sizeCls, sizeCls), _defineProperty(_ref, prefixCls + '-loading', sLoading), _defineProperty(_ref, prefixCls + '-background-ghost', ghost || type === 'ghost'), _defineProperty(_ref, prefixCls + '-two-chinese-chars', hasTwoCNChar), _defineProperty(_ref, prefixCls + '-block', block), _ref;
    }
  },
  methods: {
    fixTwoCNChar: function fixTwoCNChar() {
      // Fix for HOC usage like <FormatMessage />
      var node = this.$el;
      var buttonText = node.textContent || node.innerText;
      if (this.isNeedInserted() && isTwoCNChar(buttonText)) {
        if (!this.hasTwoCNChar) {
          this.hasTwoCNChar = true;
        }
      } else if (this.hasTwoCNChar) {
        this.hasTwoCNChar = false;
      }
    },
    handleClick: function handleClick(event) {
      // this.clicked = true
      // clearTimeout(this.timeout)
      // this.timeout = setTimeout(() => (this.clicked = false), 500)
      this.$emit('click', event);
    },
    insertSpace: function insertSpace(child, needInserted) {
      var h = this.$createElement;

      var SPACE = needInserted ? ' ' : '';
      if (typeof child.text === 'string') {
        var text = child.text.trim();
        if (isTwoCNChar(text)) {
          text = text.split('').join(SPACE);
        }
        return h('span', [text]);
      }
      return child;
    },
    isNeedInserted: function isNeedInserted() {
      var icon = this.icon,
          $slots = this.$slots;

      return $slots['default'] && $slots['default'].length === 1 && !icon;
    }
  },
  render: function render() {
    var h = arguments[0];
    var htmlType = this.htmlType,
        classes = this.classes,
        icon = this.icon,
        disabled = this.disabled,
        handleClick = this.handleClick,
        sLoading = this.sLoading,
        $slots = this.$slots,
        $attrs = this.$attrs,
        $listeners = this.$listeners;

    var buttonProps = {
      props: {},
      attrs: _extends({}, $attrs, {
        type: htmlType,
        disabled: disabled
      }),
      'class': classes,
      on: _extends({}, $listeners, {
        click: handleClick
      })
    };
    var iconType = sLoading ? 'loading' : icon;
    var iconNode = iconType ? h(Icon, {
      attrs: { type: iconType }
    }) : null;
    var kids = $slots['default'] && $slots['default'].length === 1 ? this.insertSpace($slots['default'][0], this.isNeedInserted()) : $slots['default'];
    if ('href' in $attrs) {
      return h(
        'a',
        buttonProps,
        [iconNode, kids]
      );
    } else {
      return h(Wave, [h(
        'button',
        buttonProps,
        [iconNode, kids]
      )]);
    }
  }
};