button.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
  2. import _extends from 'babel-runtime/helpers/extends';
  3. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  4. import Wave from '../_util/wave';
  5. import Icon from '../icon';
  6. import buttonTypes from './buttonTypes';
  7. import { filterEmpty, getListeners, getComponentFromProp } from '../_util/props-util';
  8. import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
  9. var rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
  10. var isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
  11. var props = buttonTypes();
  12. export default {
  13. name: 'AButton',
  14. inheritAttrs: false,
  15. __ANT_BUTTON: true,
  16. props: props,
  17. inject: {
  18. configProvider: { 'default': function _default() {
  19. return ConfigConsumerProps;
  20. } }
  21. },
  22. data: function data() {
  23. return {
  24. sizeMap: {
  25. large: 'lg',
  26. small: 'sm'
  27. },
  28. sLoading: !!this.loading,
  29. hasTwoCNChar: false
  30. };
  31. },
  32. computed: {
  33. classes: function classes() {
  34. var _ref;
  35. var customizePrefixCls = this.prefixCls,
  36. type = this.type,
  37. shape = this.shape,
  38. size = this.size,
  39. hasTwoCNChar = this.hasTwoCNChar,
  40. sLoading = this.sLoading,
  41. ghost = this.ghost,
  42. block = this.block,
  43. icon = this.icon,
  44. $slots = this.$slots;
  45. var getPrefixCls = this.configProvider.getPrefixCls;
  46. var prefixCls = getPrefixCls('btn', customizePrefixCls);
  47. var autoInsertSpace = this.configProvider.autoInsertSpaceInButton !== false;
  48. // large => lg
  49. // small => sm
  50. var sizeCls = '';
  51. switch (size) {
  52. case 'large':
  53. sizeCls = 'lg';
  54. break;
  55. case 'small':
  56. sizeCls = 'sm';
  57. break;
  58. default:
  59. break;
  60. }
  61. var iconType = sLoading ? 'loading' : icon;
  62. var children = filterEmpty($slots['default']);
  63. return _ref = {}, _defineProperty(_ref, '' + prefixCls, true), _defineProperty(_ref, prefixCls + '-' + type, type), _defineProperty(_ref, prefixCls + '-' + shape, shape), _defineProperty(_ref, prefixCls + '-' + sizeCls, sizeCls), _defineProperty(_ref, prefixCls + '-icon-only', children.length === 0 && iconType), _defineProperty(_ref, prefixCls + '-loading', sLoading), _defineProperty(_ref, prefixCls + '-background-ghost', ghost || type === 'ghost'), _defineProperty(_ref, prefixCls + '-two-chinese-chars', hasTwoCNChar && autoInsertSpace), _defineProperty(_ref, prefixCls + '-block', block), _ref;
  64. }
  65. },
  66. watch: {
  67. loading: function loading(val, preVal) {
  68. var _this = this;
  69. if (preVal && typeof preVal !== 'boolean') {
  70. clearTimeout(this.delayTimeout);
  71. }
  72. if (val && typeof val !== 'boolean' && val.delay) {
  73. this.delayTimeout = setTimeout(function () {
  74. _this.sLoading = !!val;
  75. }, val.delay);
  76. } else {
  77. this.sLoading = !!val;
  78. }
  79. }
  80. },
  81. mounted: function mounted() {
  82. this.fixTwoCNChar();
  83. },
  84. updated: function updated() {
  85. this.fixTwoCNChar();
  86. },
  87. beforeDestroy: function beforeDestroy() {
  88. // if (this.timeout) {
  89. // clearTimeout(this.timeout)
  90. // }
  91. if (this.delayTimeout) {
  92. clearTimeout(this.delayTimeout);
  93. }
  94. },
  95. methods: {
  96. fixTwoCNChar: function fixTwoCNChar() {
  97. // Fix for HOC usage like <FormatMessage />
  98. var node = this.$refs.buttonNode;
  99. if (!node) {
  100. return;
  101. }
  102. var buttonText = node.textContent;
  103. if (this.isNeedInserted() && isTwoCNChar(buttonText)) {
  104. if (!this.hasTwoCNChar) {
  105. this.hasTwoCNChar = true;
  106. }
  107. } else if (this.hasTwoCNChar) {
  108. this.hasTwoCNChar = false;
  109. }
  110. },
  111. handleClick: function handleClick(event) {
  112. var sLoading = this.$data.sLoading;
  113. if (sLoading) {
  114. return;
  115. }
  116. this.$emit('click', event);
  117. },
  118. insertSpace: function insertSpace(child, needInserted) {
  119. var h = this.$createElement;
  120. var SPACE = needInserted ? ' ' : '';
  121. if (typeof child.text === 'string') {
  122. var text = child.text.trim();
  123. if (isTwoCNChar(text)) {
  124. text = text.split('').join(SPACE);
  125. }
  126. return h('span', [text]);
  127. }
  128. return child;
  129. },
  130. isNeedInserted: function isNeedInserted() {
  131. var $slots = this.$slots,
  132. type = this.type;
  133. var icon = getComponentFromProp(this, 'icon');
  134. return $slots['default'] && $slots['default'].length === 1 && !icon && type !== 'link';
  135. }
  136. },
  137. render: function render() {
  138. var _this2 = this;
  139. var h = arguments[0];
  140. var type = this.type,
  141. htmlType = this.htmlType,
  142. classes = this.classes,
  143. disabled = this.disabled,
  144. handleClick = this.handleClick,
  145. sLoading = this.sLoading,
  146. $slots = this.$slots,
  147. $attrs = this.$attrs;
  148. var icon = getComponentFromProp(this, 'icon');
  149. var buttonProps = {
  150. attrs: _extends({}, $attrs, {
  151. disabled: disabled
  152. }),
  153. 'class': classes,
  154. on: _extends({}, getListeners(this), {
  155. click: handleClick
  156. })
  157. };
  158. var iconType = sLoading ? 'loading' : icon;
  159. var iconNode = iconType ? h(Icon, {
  160. attrs: { type: iconType }
  161. }) : null;
  162. var children = filterEmpty($slots['default']);
  163. var autoInsertSpace = this.configProvider.autoInsertSpaceInButton !== false;
  164. var kids = children.map(function (child) {
  165. return _this2.insertSpace(child, _this2.isNeedInserted() && autoInsertSpace);
  166. });
  167. if ($attrs.href !== undefined) {
  168. return h(
  169. 'a',
  170. _mergeJSXProps([buttonProps, { ref: 'buttonNode' }]),
  171. [iconNode, kids]
  172. );
  173. }
  174. var buttonNode = h(
  175. 'button',
  176. _mergeJSXProps([buttonProps, { ref: 'buttonNode', attrs: { type: htmlType || 'button' }
  177. }]),
  178. [iconNode, kids]
  179. );
  180. if (type === 'link') {
  181. return buttonNode;
  182. }
  183. return h(Wave, [buttonNode]);
  184. }
  185. };