BaseInput.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = void 0;
  7. var _vue = require("vue");
  8. var _classNames = _interopRequireDefault(require("../_util/classNames"));
  9. var _vnode = require("../_util/vnode");
  10. var _inputProps = require("./inputProps");
  11. var _commonUtils = require("./utils/commonUtils");
  12. var _default = exports.default = (0, _vue.defineComponent)({
  13. name: 'BaseInput',
  14. inheritAttrs: false,
  15. props: (0, _inputProps.baseInputProps)(),
  16. setup(props, _ref) {
  17. let {
  18. slots,
  19. attrs
  20. } = _ref;
  21. const containerRef = (0, _vue.ref)();
  22. const onInputMouseDown = e => {
  23. var _a;
  24. if ((_a = containerRef.value) === null || _a === void 0 ? void 0 : _a.contains(e.target)) {
  25. const {
  26. triggerFocus
  27. } = props;
  28. triggerFocus === null || triggerFocus === void 0 ? void 0 : triggerFocus();
  29. }
  30. };
  31. const getClearIcon = () => {
  32. var _a;
  33. const {
  34. allowClear,
  35. value,
  36. disabled,
  37. readonly,
  38. handleReset,
  39. suffix = slots.suffix,
  40. prefixCls
  41. } = props;
  42. if (!allowClear) {
  43. return null;
  44. }
  45. const needClear = !disabled && !readonly && value;
  46. const className = `${prefixCls}-clear-icon`;
  47. const iconNode = ((_a = slots.clearIcon) === null || _a === void 0 ? void 0 : _a.call(slots)) || '*';
  48. return (0, _vue.createVNode)("span", {
  49. "onClick": handleReset,
  50. "onMousedown": e => e.preventDefault(),
  51. "class": (0, _classNames.default)({
  52. [`${className}-hidden`]: !needClear,
  53. [`${className}-has-suffix`]: !!suffix
  54. }, className),
  55. "role": "button",
  56. "tabindex": -1
  57. }, [iconNode]);
  58. };
  59. return () => {
  60. var _a, _b;
  61. const {
  62. focused,
  63. value,
  64. disabled,
  65. allowClear,
  66. readonly,
  67. hidden,
  68. prefixCls,
  69. prefix = (_a = slots.prefix) === null || _a === void 0 ? void 0 : _a.call(slots),
  70. suffix = (_b = slots.suffix) === null || _b === void 0 ? void 0 : _b.call(slots),
  71. addonAfter = slots.addonAfter,
  72. addonBefore = slots.addonBefore,
  73. inputElement,
  74. affixWrapperClassName,
  75. wrapperClassName,
  76. groupClassName
  77. } = props;
  78. let element = (0, _vnode.cloneElement)(inputElement, {
  79. value,
  80. hidden
  81. });
  82. // ================== Prefix & Suffix ================== //
  83. if ((0, _commonUtils.hasPrefixSuffix)({
  84. prefix,
  85. suffix,
  86. allowClear
  87. })) {
  88. const affixWrapperPrefixCls = `${prefixCls}-affix-wrapper`;
  89. const affixWrapperCls = (0, _classNames.default)(affixWrapperPrefixCls, {
  90. [`${affixWrapperPrefixCls}-disabled`]: disabled,
  91. [`${affixWrapperPrefixCls}-focused`]: focused,
  92. [`${affixWrapperPrefixCls}-readonly`]: readonly,
  93. [`${affixWrapperPrefixCls}-input-with-clear-btn`]: suffix && allowClear && value
  94. }, !(0, _commonUtils.hasAddon)({
  95. addonAfter,
  96. addonBefore
  97. }) && attrs.class, affixWrapperClassName);
  98. const suffixNode = (suffix || allowClear) && (0, _vue.createVNode)("span", {
  99. "class": `${prefixCls}-suffix`
  100. }, [getClearIcon(), suffix]);
  101. element = (0, _vue.createVNode)("span", {
  102. "class": affixWrapperCls,
  103. "style": attrs.style,
  104. "hidden": !(0, _commonUtils.hasAddon)({
  105. addonAfter,
  106. addonBefore
  107. }) && hidden,
  108. "onMousedown": onInputMouseDown,
  109. "ref": containerRef
  110. }, [prefix && (0, _vue.createVNode)("span", {
  111. "class": `${prefixCls}-prefix`
  112. }, [prefix]), (0, _vnode.cloneElement)(inputElement, {
  113. style: null,
  114. value,
  115. hidden: null
  116. }), suffixNode]);
  117. }
  118. // ================== Addon ================== //
  119. if ((0, _commonUtils.hasAddon)({
  120. addonAfter,
  121. addonBefore
  122. })) {
  123. const wrapperCls = `${prefixCls}-group`;
  124. const addonCls = `${wrapperCls}-addon`;
  125. const mergedWrapperClassName = (0, _classNames.default)(`${prefixCls}-wrapper`, wrapperCls, wrapperClassName);
  126. const mergedGroupClassName = (0, _classNames.default)(`${prefixCls}-group-wrapper`, attrs.class, groupClassName);
  127. // Need another wrapper for changing display:table to display:inline-block
  128. // and put style prop in wrapper
  129. return (0, _vue.createVNode)("span", {
  130. "class": mergedGroupClassName,
  131. "style": attrs.style,
  132. "hidden": hidden
  133. }, [(0, _vue.createVNode)("span", {
  134. "class": mergedWrapperClassName
  135. }, [addonBefore && (0, _vue.createVNode)("span", {
  136. "class": addonCls
  137. }, [addonBefore]), (0, _vnode.cloneElement)(element, {
  138. style: null,
  139. hidden: null
  140. }), addonAfter && (0, _vue.createVNode)("span", {
  141. "class": addonCls
  142. }, [addonAfter])])]);
  143. }
  144. return element;
  145. };
  146. }
  147. });