button.js 6.8 KB

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