button.js 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  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. expose = _ref.expose;
  35. var _useConfigInject = useConfigInject('btn', props),
  36. prefixCls = _useConfigInject.prefixCls,
  37. autoInsertSpaceInButton = _useConfigInject.autoInsertSpaceInButton,
  38. direction = _useConfigInject.direction,
  39. size = _useConfigInject.size;
  40. var buttonNodeRef = ref(null);
  41. var delayTimeoutRef = ref(undefined);
  42. var isNeedInserted = false;
  43. var innerLoading = ref(false);
  44. var hasTwoCNChar = ref(false);
  45. var autoInsertSpace = computed(function () {
  46. return autoInsertSpaceInButton.value !== false;
  47. });
  48. // =============== Update Loading ===============
  49. var loadingOrDelay = computed(function () {
  50. return _typeof(props.loading) === 'object' && props.loading.delay ? props.loading.delay || true : !!props.loading;
  51. });
  52. watch(loadingOrDelay, function (val) {
  53. clearTimeout(delayTimeoutRef.value);
  54. if (typeof loadingOrDelay.value === 'number') {
  55. delayTimeoutRef.value = setTimeout(function () {
  56. innerLoading.value = val;
  57. }, loadingOrDelay.value);
  58. } else {
  59. innerLoading.value = val;
  60. }
  61. }, {
  62. immediate: true
  63. });
  64. var classes = computed(function () {
  65. var _ref2;
  66. var type = props.type,
  67. _props$shape = props.shape,
  68. shape = _props$shape === void 0 ? 'default' : _props$shape,
  69. ghost = props.ghost,
  70. block = props.block,
  71. danger = props.danger;
  72. var pre = prefixCls.value;
  73. var sizeClassNameMap = {
  74. large: 'lg',
  75. small: 'sm',
  76. middle: undefined
  77. };
  78. var sizeFullname = size.value;
  79. var sizeCls = sizeFullname ? sizeClassNameMap[sizeFullname] || '' : '';
  80. 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;
  81. });
  82. var fixTwoCNChar = function fixTwoCNChar() {
  83. // Fix for HOC usage like <FormatMessage />
  84. var node = buttonNodeRef.value;
  85. if (!node || autoInsertSpaceInButton.value === false) {
  86. return;
  87. }
  88. var buttonText = node.textContent;
  89. if (isNeedInserted && isTwoCNChar(buttonText)) {
  90. if (!hasTwoCNChar.value) {
  91. hasTwoCNChar.value = true;
  92. }
  93. } else if (hasTwoCNChar.value) {
  94. hasTwoCNChar.value = false;
  95. }
  96. };
  97. var handleClick = function handleClick(event) {
  98. // https://github.com/ant-design/ant-design/issues/30207
  99. if (innerLoading.value || props.disabled) {
  100. event.preventDefault();
  101. return;
  102. }
  103. emit('click', event);
  104. };
  105. var insertSpace = function insertSpace(child, needInserted) {
  106. var SPACE = needInserted ? ' ' : '';
  107. if (child.type === Text) {
  108. var text = child.children.trim();
  109. if (isTwoCNChar(text)) {
  110. text = text.split('').join(SPACE);
  111. }
  112. return _createVNode("span", null, [text]);
  113. }
  114. return child;
  115. };
  116. watchEffect(function () {
  117. devWarning(!(props.ghost && isUnborderedButtonType(props.type)), 'Button', "`link` or `text` button can't be a `ghost` button.");
  118. });
  119. onMounted(fixTwoCNChar);
  120. onUpdated(fixTwoCNChar);
  121. onBeforeUnmount(function () {
  122. delayTimeoutRef.value && clearTimeout(delayTimeoutRef.value);
  123. });
  124. var focus = function focus() {
  125. var _buttonNodeRef$value;
  126. (_buttonNodeRef$value = buttonNodeRef.value) === null || _buttonNodeRef$value === void 0 ? void 0 : _buttonNodeRef$value.focus();
  127. };
  128. var blur = function blur() {
  129. var _buttonNodeRef$value2;
  130. (_buttonNodeRef$value2 = buttonNodeRef.value) === null || _buttonNodeRef$value2 === void 0 ? void 0 : _buttonNodeRef$value2.blur();
  131. };
  132. expose({
  133. focus: focus,
  134. blur: blur
  135. });
  136. return function () {
  137. var _slots$icon, _slots$default;
  138. var _props$icon = props.icon,
  139. icon = _props$icon === void 0 ? (_slots$icon = slots.icon) === null || _slots$icon === void 0 ? void 0 : _slots$icon.call(slots) : _props$icon;
  140. var children = flattenChildren((_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots));
  141. isNeedInserted = children.length === 1 && !icon && !isUnborderedButtonType(props.type);
  142. var type = props.type,
  143. htmlType = props.htmlType,
  144. disabled = props.disabled,
  145. href = props.href,
  146. title = props.title,
  147. target = props.target,
  148. onMousedown = props.onMousedown;
  149. var iconType = innerLoading.value ? 'loading' : icon;
  150. var buttonProps = _objectSpread(_objectSpread({}, attrs), {}, {
  151. title: title,
  152. disabled: disabled,
  153. class: [classes.value, attrs.class, _defineProperty({}, "".concat(prefixCls.value, "-icon-only"), children.length === 0 && !!iconType)],
  154. onClick: handleClick,
  155. onMousedown: onMousedown
  156. });
  157. // https://github.com/vueComponent/ant-design-vue/issues/4930
  158. if (!disabled) {
  159. delete buttonProps.disabled;
  160. }
  161. var iconNode = icon && !innerLoading.value ? icon : _createVNode(LoadingIcon, {
  162. "existIcon": !!icon,
  163. "prefixCls": prefixCls.value,
  164. "loading": !!innerLoading.value
  165. }, null);
  166. var kids = children.map(function (child) {
  167. return insertSpace(child, isNeedInserted && autoInsertSpace.value);
  168. });
  169. if (href !== undefined) {
  170. return _createVNode("a", _objectSpread(_objectSpread({}, buttonProps), {}, {
  171. "href": href,
  172. "target": target,
  173. "ref": buttonNodeRef
  174. }), [iconNode, kids]);
  175. }
  176. var buttonNode = _createVNode("button", _objectSpread(_objectSpread({}, buttonProps), {}, {
  177. "ref": buttonNodeRef,
  178. "type": htmlType
  179. }), [iconNode, kids]);
  180. if (isUnborderedButtonType(type)) {
  181. return buttonNode;
  182. }
  183. return _createVNode(Wave, {
  184. "ref": "wave",
  185. "disabled": !!innerLoading.value
  186. }, {
  187. default: function _default() {
  188. return [buttonNode];
  189. }
  190. });
  191. };
  192. }
  193. });