Input.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310
  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. exports.fixControlledValue = fixControlledValue;
  8. exports.resolveOnChange = resolveOnChange;
  9. exports.triggerFocus = triggerFocus;
  10. var _vue = require("vue");
  11. var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
  12. var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
  13. var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
  14. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  15. var _antInputDirective = _interopRequireDefault(require("../_util/antInputDirective"));
  16. var _classNames3 = _interopRequireDefault(require("../_util/classNames"));
  17. var _inputProps = _interopRequireDefault(require("./inputProps"));
  18. var _util = require("./util");
  19. var _ClearableLabeledInput = _interopRequireDefault(require("./ClearableLabeledInput"));
  20. var _FormItemContext = require("../form/FormItemContext");
  21. var _omit = _interopRequireDefault(require("../_util/omit"));
  22. var _useConfigInject2 = _interopRequireDefault(require("../_util/hooks/useConfigInject"));
  23. function fixControlledValue(value) {
  24. if (typeof value === 'undefined' || value === null) {
  25. return '';
  26. }
  27. return String(value);
  28. }
  29. function resolveOnChange(target, e, onChange, targetValue) {
  30. if (!onChange) {
  31. return;
  32. }
  33. var event = e;
  34. if (e.type === 'click') {
  35. Object.defineProperty(event, 'target', {
  36. writable: true
  37. });
  38. Object.defineProperty(event, 'currentTarget', {
  39. writable: true
  40. });
  41. // click clear icon
  42. //event = Object.create(e);
  43. var currentTarget = target.cloneNode(true);
  44. event.target = currentTarget;
  45. event.currentTarget = currentTarget;
  46. // change target ref value cause e.target.value should be '' when clear input
  47. currentTarget.value = '';
  48. onChange(event);
  49. return;
  50. }
  51. // Trigger by composition event, this means we need force change the input value
  52. if (targetValue !== undefined) {
  53. Object.defineProperty(event, 'target', {
  54. writable: true
  55. });
  56. Object.defineProperty(event, 'currentTarget', {
  57. writable: true
  58. });
  59. event.target = target;
  60. event.currentTarget = target;
  61. target.value = targetValue;
  62. onChange(event);
  63. return;
  64. }
  65. onChange(event);
  66. }
  67. function triggerFocus(element, option) {
  68. if (!element) return;
  69. element.focus(option);
  70. // Selection content
  71. var _ref = option || {},
  72. cursor = _ref.cursor;
  73. if (cursor) {
  74. var len = element.value.length;
  75. switch (cursor) {
  76. case 'start':
  77. element.setSelectionRange(0, 0);
  78. break;
  79. case 'end':
  80. element.setSelectionRange(len, len);
  81. break;
  82. default:
  83. element.setSelectionRange(0, len);
  84. }
  85. }
  86. }
  87. var _default = (0, _vue.defineComponent)({
  88. compatConfig: {
  89. MODE: 3
  90. },
  91. name: 'AInput',
  92. inheritAttrs: false,
  93. props: (0, _inputProps.default)(),
  94. setup: function setup(props, _ref2) {
  95. var slots = _ref2.slots,
  96. attrs = _ref2.attrs,
  97. expose = _ref2.expose,
  98. emit = _ref2.emit;
  99. var inputRef = (0, _vue.ref)();
  100. var clearableInputRef = (0, _vue.ref)();
  101. var removePasswordTimeout;
  102. var formItemContext = (0, _FormItemContext.useInjectFormItemContext)();
  103. var _useConfigInject = (0, _useConfigInject2.default)('input', props),
  104. direction = _useConfigInject.direction,
  105. prefixCls = _useConfigInject.prefixCls,
  106. size = _useConfigInject.size,
  107. autocomplete = _useConfigInject.autocomplete;
  108. var stateValue = (0, _vue.ref)(props.value === undefined ? props.defaultValue : props.value);
  109. var focused = (0, _vue.ref)(false);
  110. (0, _vue.watch)(function () {
  111. return props.value;
  112. }, function () {
  113. stateValue.value = props.value;
  114. });
  115. (0, _vue.watch)(function () {
  116. return props.disabled;
  117. }, function () {
  118. if (props.value !== undefined) {
  119. stateValue.value = props.value;
  120. }
  121. if (props.disabled) {
  122. focused.value = false;
  123. }
  124. });
  125. var clearPasswordValueAttribute = function clearPasswordValueAttribute() {
  126. // https://github.com/ant-design/ant-design/issues/20541
  127. removePasswordTimeout = setTimeout(function () {
  128. var _inputRef$value;
  129. if (((_inputRef$value = inputRef.value) === null || _inputRef$value === void 0 ? void 0 : _inputRef$value.getAttribute('type')) === 'password' && inputRef.value.hasAttribute('value')) {
  130. inputRef.value.removeAttribute('value');
  131. }
  132. });
  133. };
  134. var focus = function focus(option) {
  135. triggerFocus(inputRef.value, option);
  136. };
  137. var blur = function blur() {
  138. var _inputRef$value2;
  139. (_inputRef$value2 = inputRef.value) === null || _inputRef$value2 === void 0 ? void 0 : _inputRef$value2.blur();
  140. };
  141. var setSelectionRange = function setSelectionRange(start, end, direction) {
  142. var _inputRef$value3;
  143. (_inputRef$value3 = inputRef.value) === null || _inputRef$value3 === void 0 ? void 0 : _inputRef$value3.setSelectionRange(start, end, direction);
  144. };
  145. var select = function select() {
  146. var _inputRef$value4;
  147. (_inputRef$value4 = inputRef.value) === null || _inputRef$value4 === void 0 ? void 0 : _inputRef$value4.select();
  148. };
  149. expose({
  150. focus: focus,
  151. blur: blur,
  152. input: inputRef,
  153. stateValue: stateValue,
  154. setSelectionRange: setSelectionRange,
  155. select: select
  156. });
  157. var onFocus = function onFocus(e) {
  158. var onFocus = props.onFocus;
  159. focused.value = true;
  160. onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
  161. (0, _vue.nextTick)(function () {
  162. clearPasswordValueAttribute();
  163. });
  164. };
  165. var onBlur = function onBlur(e) {
  166. var onBlur = props.onBlur;
  167. focused.value = false;
  168. onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
  169. formItemContext.onFieldBlur();
  170. (0, _vue.nextTick)(function () {
  171. clearPasswordValueAttribute();
  172. });
  173. };
  174. var triggerChange = function triggerChange(e) {
  175. emit('update:value', e.target.value);
  176. emit('change', e);
  177. emit('input', e);
  178. formItemContext.onFieldChange();
  179. };
  180. var instance = (0, _vue.getCurrentInstance)();
  181. var setValue = function setValue(value, callback) {
  182. if (stateValue.value === value) {
  183. return;
  184. }
  185. if (props.value === undefined) {
  186. stateValue.value = value;
  187. } else {
  188. (0, _vue.nextTick)(function () {
  189. if (inputRef.value.value !== stateValue.value) {
  190. instance.update();
  191. }
  192. });
  193. }
  194. (0, _vue.nextTick)(function () {
  195. callback && callback();
  196. });
  197. };
  198. var handleReset = function handleReset(e) {
  199. resolveOnChange(inputRef.value, e, triggerChange);
  200. setValue('', function () {
  201. focus();
  202. });
  203. };
  204. var handleChange = function handleChange(e) {
  205. var _e$target = e.target,
  206. value = _e$target.value,
  207. composing = _e$target.composing;
  208. // https://github.com/vueComponent/ant-design-vue/issues/2203
  209. if ((e.isComposing || composing) && props.lazy || stateValue.value === value) return;
  210. var newVal = e.target.value;
  211. resolveOnChange(inputRef.value, e, triggerChange);
  212. setValue(newVal, function () {
  213. clearPasswordValueAttribute();
  214. });
  215. };
  216. var handleKeyDown = function handleKeyDown(e) {
  217. if (e.keyCode === 13) {
  218. emit('pressEnter', e);
  219. }
  220. emit('keydown', e);
  221. };
  222. (0, _vue.onMounted)(function () {
  223. clearPasswordValueAttribute();
  224. });
  225. (0, _vue.onBeforeUnmount)(function () {
  226. clearTimeout(removePasswordTimeout);
  227. });
  228. var renderInput = function renderInput() {
  229. var _otherProps$id;
  230. var _props$addonBefore = props.addonBefore,
  231. addonBefore = _props$addonBefore === void 0 ? slots.addonBefore : _props$addonBefore,
  232. _props$addonAfter = props.addonAfter,
  233. addonAfter = _props$addonAfter === void 0 ? slots.addonAfter : _props$addonAfter,
  234. disabled = props.disabled,
  235. _props$bordered = props.bordered,
  236. bordered = _props$bordered === void 0 ? true : _props$bordered,
  237. _props$valueModifiers = props.valueModifiers,
  238. valueModifiers = _props$valueModifiers === void 0 ? {} : _props$valueModifiers,
  239. htmlSize = props.htmlSize;
  240. var otherProps = (0, _omit.default)(props, ['prefixCls', 'onPressEnter', 'addonBefore', 'addonAfter', 'prefix', 'suffix', 'allowClear',
  241. // Input elements must be either controlled or uncontrolled,
  242. // specify either the value prop, or the defaultValue prop, but not both.
  243. 'defaultValue', 'size', 'bordered', 'htmlSize', 'lazy', 'showCount', 'valueModifiers']);
  244. var inputProps = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, otherProps), attrs), {}, {
  245. autocomplete: autocomplete.value,
  246. onChange: handleChange,
  247. onInput: handleChange,
  248. onFocus: onFocus,
  249. onBlur: onBlur,
  250. onKeydown: handleKeyDown,
  251. class: (0, _classNames3.default)((0, _util.getInputClassName)(prefixCls.value, bordered, size.value, disabled, direction.value), (0, _defineProperty2.default)({}, attrs.class, attrs.class && !addonBefore && !addonAfter)),
  252. ref: inputRef,
  253. key: 'ant-input',
  254. size: htmlSize,
  255. id: (_otherProps$id = otherProps.id) !== null && _otherProps$id !== void 0 ? _otherProps$id : formItemContext.id.value
  256. });
  257. if (valueModifiers.lazy) {
  258. delete inputProps.onInput;
  259. }
  260. if (!inputProps.autofocus) {
  261. delete inputProps.autofocus;
  262. }
  263. var inputNode = (0, _vue.createVNode)("input", (0, _omit.default)(inputProps, ['size']), null);
  264. return (0, _vue.withDirectives)(inputNode, [[_antInputDirective.default]]);
  265. };
  266. var renderShowCountSuffix = function renderShowCountSuffix() {
  267. var _slots$suffix;
  268. var value = stateValue.value;
  269. var maxlength = props.maxlength,
  270. _props$suffix = props.suffix,
  271. suffix = _props$suffix === void 0 ? (_slots$suffix = slots.suffix) === null || _slots$suffix === void 0 ? void 0 : _slots$suffix.call(slots) : _props$suffix,
  272. showCount = props.showCount;
  273. // Max length value
  274. var hasMaxLength = Number(maxlength) > 0;
  275. if (suffix || showCount) {
  276. var valueLength = (0, _toConsumableArray2.default)(fixControlledValue(value)).length;
  277. var dataCount = null;
  278. if ((0, _typeof2.default)(showCount) === 'object') {
  279. dataCount = showCount.formatter({
  280. count: valueLength,
  281. maxlength: maxlength
  282. });
  283. } else {
  284. dataCount = "".concat(valueLength).concat(hasMaxLength ? " / ".concat(maxlength) : '');
  285. }
  286. return (0, _vue.createVNode)(_vue.Fragment, null, [!!showCount && (0, _vue.createVNode)("span", {
  287. "class": (0, _classNames3.default)("".concat(prefixCls.value, "-show-count-suffix"), (0, _defineProperty2.default)({}, "".concat(prefixCls.value, "-show-count-has-suffix"), !!suffix))
  288. }, [dataCount]), suffix]);
  289. }
  290. return null;
  291. };
  292. return function () {
  293. var inputProps = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, attrs), props), {}, {
  294. prefixCls: prefixCls.value,
  295. inputType: 'input',
  296. value: fixControlledValue(stateValue.value),
  297. handleReset: handleReset,
  298. focused: focused.value && !props.disabled
  299. });
  300. return (0, _vue.createVNode)(_ClearableLabeledInput.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _omit.default)(inputProps, ['element', 'valueModifiers', 'suffix', 'showCount'])), {}, {
  301. "ref": clearableInputRef
  302. }), (0, _objectSpread2.default)((0, _objectSpread2.default)({}, slots), {}, {
  303. element: renderInput,
  304. suffix: renderShowCountSuffix
  305. }));
  306. };
  307. }
  308. });
  309. exports.default = _default;