button.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  3. import _typeof from "@babel/runtime/helpers/esm/typeof";
  4. import { createVNode as _createVNode } from "vue";
  5. import { computed, defineComponent, onBeforeUnmount, onMounted, onUpdated, ref, Text, watch, watchEffect } from 'vue';
  6. import Wave from '../_util/wave';
  7. import buttonProps from './buttonTypes';
  8. import { flattenChildren, initDefaultProps } from '../_util/props-util';
  9. import useConfigInject from '../_util/hooks/useConfigInject';
  10. import devWarning from '../vc-util/devWarning';
  11. import LoadingIcon from './LoadingIcon';
  12. var rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
  13. var isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
  14. function isUnborderedButtonType(type) {
  15. return type === 'text' || type === 'link';
  16. }
  17. export { buttonProps };
  18. export default defineComponent({
  19. compatConfig: {
  20. MODE: 3
  21. },
  22. name: 'AButton',
  23. inheritAttrs: false,
  24. __ANT_BUTTON: true,
  25. props: initDefaultProps(buttonProps(), {
  26. type: 'default'
  27. }),
  28. slots: ['icon'],
  29. // emits: ['click', 'mousedown'],
  30. setup: function setup(props, _ref) {
  31. var slots = _ref.slots,
  32. attrs = _ref.attrs,
  33. emit = _ref.emit;
  34. var _useConfigInject = useConfigInject('btn', props),
  35. prefixCls = _useConfigInject.prefixCls,
  36. autoInsertSpaceInButton = _useConfigInject.autoInsertSpaceInButton,
  37. direction = _useConfigInject.direction,
  38. size = _useConfigInject.size;
  39. var buttonNodeRef = ref(null);
  40. var delayTimeoutRef = ref(undefined);
  41. var isNeedInserted = false;
  42. var innerLoading = ref(false);
  43. var hasTwoCNChar = ref(false);
  44. var autoInsertSpace = computed(function () {
  45. return autoInsertSpaceInButton.value !== false;
  46. });
  47. // =============== Update Loading ===============
  48. var loadingOrDelay = computed(function () {
  49. return _typeof(props.loading) === 'object' && props.loading.delay ? props.loading.delay || true : !!props.loading;
  50. });
  51. watch(loadingOrDelay, function (val) {
  52. clearTimeout(delayTimeoutRef.value);
  53. if (typeof loadingOrDelay.value === 'number') {
  54. delayTimeoutRef.value = setTimeout(function () {
  55. innerLoading.value = val;
  56. }, loadingOrDelay.value);
  57. } else {
  58. innerLoading.value = val;
  59. }
  60. }, {
  61. immediate: true
  62. });
  63. var classes = computed(function () {
  64. var _ref2;
  65. var type = props.type,
  66. _props$shape = props.shape,
  67. shape = _props$shape === void 0 ? 'default' : _props$shape,
  68. ghost = props.ghost,
  69. block = props.block,
  70. danger = props.danger;
  71. var pre = prefixCls.value;
  72. var sizeClassNameMap = {
  73. large: 'lg',
  74. small: 'sm',
  75. middle: undefined
  76. };
  77. var sizeFullname = size.value;
  78. var sizeCls = sizeFullname ? sizeClassNameMap[sizeFullname] || '' : '';
  79. return _ref2 = {}, _defineProperty(_ref2, "".concat(pre), true), _defineProperty(_ref2, "".concat(pre, "-").concat(type), type), _defineProperty(_ref2, "".concat(pre, "-").concat(shape), shape !== 'default' && shape), _defineProperty(_ref2, "".concat(pre, "-").concat(sizeCls), sizeCls), _defineProperty(_ref2, "".concat(pre, "-loading"), innerLoading.value), _defineProperty(_ref2, "".concat(pre, "-background-ghost"), ghost && !isUnborderedButtonType(type)), _defineProperty(_ref2, "".concat(pre, "-two-chinese-chars"), hasTwoCNChar.value && autoInsertSpace.value), _defineProperty(_ref2, "".concat(pre, "-block"), block), _defineProperty(_ref2, "".concat(pre, "-dangerous"), !!danger), _defineProperty(_ref2, "".concat(pre, "-rtl"), direction.value === 'rtl'), _ref2;
  80. });
  81. var fixTwoCNChar = function fixTwoCNChar() {
  82. // Fix for HOC usage like <FormatMessage />
  83. var node = buttonNodeRef.value;
  84. if (!node || autoInsertSpaceInButton.value === false) {
  85. return;
  86. }
  87. var buttonText = node.textContent;
  88. if (isNeedInserted && isTwoCNChar(buttonText)) {
  89. if (!hasTwoCNChar.value) {
  90. hasTwoCNChar.value = true;
  91. }
  92. } else if (hasTwoCNChar.value) {
  93. hasTwoCNChar.value = false;
  94. }
  95. };
  96. var handleClick = function handleClick(event) {
  97. // https://github.com/ant-design/ant-design/issues/30207
  98. if (innerLoading.value || props.disabled) {
  99. event.preventDefault();
  100. return;
  101. }
  102. emit('click', event);
  103. };
  104. var insertSpace = function insertSpace(child, needInserted) {
  105. var SPACE = needInserted ? ' ' : '';
  106. if (child.type === Text) {
  107. var text = child.children.trim();
  108. if (isTwoCNChar(text)) {
  109. text = text.split('').join(SPACE);
  110. }
  111. return _createVNode("span", null, [text]);
  112. }
  113. return child;
  114. };
  115. watchEffect(function () {
  116. devWarning(!(props.ghost && isUnborderedButtonType(props.type)), 'Button', "`link` or `text` button can't be a `ghost` button.");
  117. });
  118. onMounted(fixTwoCNChar);
  119. onUpdated(fixTwoCNChar);
  120. onBeforeUnmount(function () {
  121. delayTimeoutRef.value && clearTimeout(delayTimeoutRef.value);
  122. });
  123. return function () {
  124. var _slots$icon, _slots$default;
  125. var _props$icon = props.icon,
  126. icon = _props$icon === void 0 ? (_slots$icon = slots.icon) === null || _slots$icon === void 0 ? void 0 : _slots$icon.call(slots) : _props$icon;
  127. var children = flattenChildren((_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots));
  128. isNeedInserted = children.length === 1 && !icon && !isUnborderedButtonType(props.type);
  129. var type = props.type,
  130. htmlType = props.htmlType,
  131. disabled = props.disabled,
  132. href = props.href,
  133. title = props.title,
  134. target = props.target,
  135. onMousedown = props.onMousedown;
  136. var iconType = innerLoading.value ? 'loading' : icon;
  137. var buttonProps = _objectSpread(_objectSpread({}, attrs), {}, {
  138. title: title,
  139. disabled: disabled,
  140. class: [classes.value, attrs.class, _defineProperty({}, "".concat(prefixCls.value, "-icon-only"), children.length === 0 && !!iconType)],
  141. onClick: handleClick,
  142. onMousedown: onMousedown
  143. });
  144. // https://github.com/vueComponent/ant-design-vue/issues/4930
  145. if (!disabled) {
  146. delete buttonProps.disabled;
  147. }
  148. var iconNode = icon && !innerLoading.value ? icon : _createVNode(LoadingIcon, {
  149. "existIcon": !!icon,
  150. "prefixCls": prefixCls.value,
  151. "loading": !!innerLoading.value
  152. }, null);
  153. var kids = children.map(function (child) {
  154. return insertSpace(child, isNeedInserted && autoInsertSpace.value);
  155. });
  156. if (href !== undefined) {
  157. return _createVNode("a", _objectSpread(_objectSpread({}, buttonProps), {}, {
  158. "href": href,
  159. "target": target,
  160. "ref": buttonNodeRef
  161. }), [iconNode, kids]);
  162. }
  163. var buttonNode = _createVNode("button", _objectSpread(_objectSpread({}, buttonProps), {}, {
  164. "ref": buttonNodeRef,
  165. "type": htmlType
  166. }), [iconNode, kids]);
  167. if (isUnborderedButtonType(type)) {
  168. return buttonNode;
  169. }
  170. return _createVNode(Wave, {
  171. "ref": "wave",
  172. "disabled": !!innerLoading.value
  173. }, {
  174. default: function _default() {
  175. return [buttonNode];
  176. }
  177. });
  178. };
  179. }
  180. });