ClearableLabeledInput.js 4.3 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 _CloseCircleFilled = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/CloseCircleFilled"));
  10. var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
  11. var _vnode = require("../_util/vnode");
  12. var _type = require("../_util/type");
  13. var _util = require("./util");
  14. var _FormItemContext = require("../form/FormItemContext");
  15. var _statusUtils = require("../_util/statusUtils");
  16. const ClearableInputType = ['text', 'input'];
  17. var _default = exports.default = (0, _vue.defineComponent)({
  18. compatConfig: {
  19. MODE: 3
  20. },
  21. name: 'ClearableLabeledInput',
  22. inheritAttrs: false,
  23. props: {
  24. prefixCls: String,
  25. inputType: _vueTypes.default.oneOf((0, _type.tuple)('text', 'input')),
  26. value: (0, _type.anyType)(),
  27. defaultValue: (0, _type.anyType)(),
  28. allowClear: {
  29. type: Boolean,
  30. default: undefined
  31. },
  32. element: (0, _type.anyType)(),
  33. handleReset: Function,
  34. disabled: {
  35. type: Boolean,
  36. default: undefined
  37. },
  38. direction: {
  39. type: String
  40. },
  41. size: {
  42. type: String
  43. },
  44. suffix: (0, _type.anyType)(),
  45. prefix: (0, _type.anyType)(),
  46. addonBefore: (0, _type.anyType)(),
  47. addonAfter: (0, _type.anyType)(),
  48. readonly: {
  49. type: Boolean,
  50. default: undefined
  51. },
  52. focused: {
  53. type: Boolean,
  54. default: undefined
  55. },
  56. bordered: {
  57. type: Boolean,
  58. default: true
  59. },
  60. triggerFocus: {
  61. type: Function
  62. },
  63. hidden: Boolean,
  64. status: String,
  65. hashId: String
  66. },
  67. setup(props, _ref) {
  68. let {
  69. slots,
  70. attrs
  71. } = _ref;
  72. const statusContext = _FormItemContext.FormItemInputContext.useInject();
  73. const renderClearIcon = prefixCls => {
  74. const {
  75. value,
  76. disabled,
  77. readonly,
  78. handleReset,
  79. suffix = slots.suffix
  80. } = props;
  81. const needClear = !disabled && !readonly && value;
  82. const className = `${prefixCls}-clear-icon`;
  83. return (0, _vue.createVNode)(_CloseCircleFilled.default, {
  84. "onClick": handleReset,
  85. "onMousedown": e => e.preventDefault(),
  86. "class": (0, _classNames.default)({
  87. [`${className}-hidden`]: !needClear,
  88. [`${className}-has-suffix`]: !!suffix
  89. }, className),
  90. "role": "button"
  91. }, null);
  92. };
  93. const renderTextAreaWithClearIcon = (prefixCls, element) => {
  94. const {
  95. value,
  96. allowClear,
  97. direction,
  98. bordered,
  99. hidden,
  100. status: customStatus,
  101. addonAfter = slots.addonAfter,
  102. addonBefore = slots.addonBefore,
  103. hashId
  104. } = props;
  105. const {
  106. status: contextStatus,
  107. hasFeedback
  108. } = statusContext;
  109. if (!allowClear) {
  110. return (0, _vnode.cloneElement)(element, {
  111. value,
  112. disabled: props.disabled
  113. });
  114. }
  115. const affixWrapperCls = (0, _classNames.default)(`${prefixCls}-affix-wrapper`, `${prefixCls}-affix-wrapper-textarea-with-clear-btn`, (0, _statusUtils.getStatusClassNames)(`${prefixCls}-affix-wrapper`, (0, _statusUtils.getMergedStatus)(contextStatus, customStatus), hasFeedback), {
  116. [`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl',
  117. [`${prefixCls}-affix-wrapper-borderless`]: !bordered,
  118. // className will go to addon wrapper
  119. [`${attrs.class}`]: !(0, _util.hasAddon)({
  120. addonAfter,
  121. addonBefore
  122. }) && attrs.class
  123. }, hashId);
  124. return (0, _vue.createVNode)("span", {
  125. "class": affixWrapperCls,
  126. "style": attrs.style,
  127. "hidden": hidden
  128. }, [(0, _vnode.cloneElement)(element, {
  129. style: null,
  130. value,
  131. disabled: props.disabled
  132. }), renderClearIcon(prefixCls)]);
  133. };
  134. return () => {
  135. var _a;
  136. const {
  137. prefixCls,
  138. inputType,
  139. element = (_a = slots.element) === null || _a === void 0 ? void 0 : _a.call(slots)
  140. } = props;
  141. if (inputType === ClearableInputType[0]) {
  142. return renderTextAreaWithClearIcon(prefixCls, element);
  143. }
  144. return null;
  145. };
  146. }
  147. });