Input.js 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props');
  6. var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);
  7. var _extends2 = require('babel-runtime/helpers/extends');
  8. var _extends3 = _interopRequireDefault(_extends2);
  9. var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
  10. var _defineProperty3 = _interopRequireDefault(_defineProperty2);
  11. exports.fixControlledValue = fixControlledValue;
  12. exports.resolveOnChange = resolveOnChange;
  13. exports.getInputClassName = getInputClassName;
  14. var _classnames = require('classnames');
  15. var _classnames2 = _interopRequireDefault(_classnames);
  16. var _TextArea = require('./TextArea');
  17. var _TextArea2 = _interopRequireDefault(_TextArea);
  18. var _omit = require('omit.js');
  19. var _omit2 = _interopRequireDefault(_omit);
  20. var _inputProps = require('./inputProps');
  21. var _inputProps2 = _interopRequireDefault(_inputProps);
  22. var _propsUtil = require('../_util/props-util');
  23. var _configConsumerProps = require('../config-provider/configConsumerProps');
  24. var _ClearableLabeledInput = require('./ClearableLabeledInput');
  25. var _ClearableLabeledInput2 = _interopRequireDefault(_ClearableLabeledInput);
  26. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  27. function noop() {}
  28. function fixControlledValue(value) {
  29. if (typeof value === 'undefined' || value === null) {
  30. return '';
  31. }
  32. return value;
  33. }
  34. function resolveOnChange(target, e, onChange) {
  35. if (onChange) {
  36. var event = e;
  37. if (e.type === 'click') {
  38. // click clear icon
  39. //event = Object.create(e);
  40. Object.defineProperty(event, 'target', {
  41. writable: true
  42. });
  43. Object.defineProperty(event, 'currentTarget', {
  44. writable: true
  45. });
  46. event.target = target;
  47. event.currentTarget = target;
  48. var originalInputValue = target.value;
  49. // change target ref value cause e.target.value should be '' when clear input
  50. target.value = '';
  51. onChange(event);
  52. // reset target ref value
  53. target.value = originalInputValue;
  54. return;
  55. }
  56. onChange(event);
  57. }
  58. }
  59. function getInputClassName(prefixCls, size, disabled) {
  60. var _classNames;
  61. return (0, _classnames2['default'])(prefixCls, (_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls + '-sm', size === 'small'), (0, _defineProperty3['default'])(_classNames, prefixCls + '-lg', size === 'large'), (0, _defineProperty3['default'])(_classNames, prefixCls + '-disabled', disabled), _classNames));
  62. }
  63. exports['default'] = {
  64. name: 'AInput',
  65. inheritAttrs: false,
  66. model: {
  67. prop: 'value',
  68. event: 'change.value'
  69. },
  70. props: (0, _extends3['default'])({}, _inputProps2['default']),
  71. inject: {
  72. configProvider: { 'default': function _default() {
  73. return _configConsumerProps.ConfigConsumerProps;
  74. } }
  75. },
  76. data: function data() {
  77. var props = this.$props;
  78. var value = typeof props.value === 'undefined' ? props.defaultValue : props.value;
  79. return {
  80. stateValue: typeof value === 'undefined' ? '' : value
  81. };
  82. },
  83. watch: {
  84. value: function value(val) {
  85. this.stateValue = val;
  86. }
  87. },
  88. mounted: function mounted() {
  89. var _this = this;
  90. this.$nextTick(function () {
  91. if (_this.autoFocus) {
  92. _this.focus();
  93. }
  94. _this.clearPasswordValueAttribute();
  95. });
  96. },
  97. beforeDestroy: function beforeDestroy() {
  98. if (this.removePasswordTimeout) {
  99. clearTimeout(this.removePasswordTimeout);
  100. }
  101. },
  102. methods: {
  103. onBlur: function onBlur(e) {
  104. // fix this isssue: https://github.com/vueComponent/ant-design-vue/issues/3816
  105. // reference: https://github.com/vuejs/vue/issues/5847 and https://github.com/vuejs/vue/issues/8431
  106. this.$forceUpdate();
  107. var _getListeners = (0, _propsUtil.getListeners)(this),
  108. blur = _getListeners.blur;
  109. blur && blur(e);
  110. },
  111. focus: function focus() {
  112. this.$refs.input.focus();
  113. },
  114. blur: function blur() {
  115. this.$refs.input.blur();
  116. },
  117. select: function select() {
  118. this.$refs.input.select();
  119. },
  120. setValue: function setValue(value, callback) {
  121. if (this.stateValue === value) {
  122. return;
  123. }
  124. if (!(0, _propsUtil.hasProp)(this, 'value')) {
  125. this.stateValue = value;
  126. this.$nextTick(function () {
  127. callback && callback();
  128. });
  129. } else {
  130. // 不在严格受控
  131. // https://github.com/vueComponent/ant-design-vue/issues/2207,modal 是 新 new 实例,更新队列和当前不在同一个更新队列中
  132. // this.$forceUpdate();
  133. }
  134. },
  135. onChange: function onChange(e) {
  136. this.$emit('change.value', e.target.value);
  137. this.$emit('change', e);
  138. this.$emit('input', e);
  139. },
  140. handleReset: function handleReset(e) {
  141. var _this2 = this;
  142. this.setValue('', function () {
  143. _this2.focus();
  144. });
  145. resolveOnChange(this.$refs.input, e, this.onChange);
  146. },
  147. renderInput: function renderInput(prefixCls) {
  148. var h = this.$createElement;
  149. var otherProps = (0, _omit2['default'])(this.$props, ['prefixCls', 'addonBefore', 'addonAfter', 'prefix', 'suffix', 'allowClear', 'value', 'defaultValue', 'lazy', 'size', 'inputType', 'className']);
  150. var stateValue = this.stateValue,
  151. handleKeyDown = this.handleKeyDown,
  152. handleChange = this.handleChange,
  153. size = this.size,
  154. disabled = this.disabled;
  155. var inputProps = {
  156. directives: [{ name: 'ant-input' }],
  157. domProps: {
  158. value: fixControlledValue(stateValue)
  159. },
  160. attrs: (0, _extends3['default'])({}, otherProps, this.$attrs),
  161. on: (0, _extends3['default'])({}, (0, _propsUtil.getListeners)(this), {
  162. keydown: handleKeyDown,
  163. input: handleChange,
  164. change: noop,
  165. blur: this.onBlur
  166. }),
  167. 'class': getInputClassName(prefixCls, size, disabled),
  168. ref: 'input',
  169. key: 'ant-input'
  170. };
  171. return h('input', inputProps);
  172. },
  173. clearPasswordValueAttribute: function clearPasswordValueAttribute() {
  174. var _this3 = this;
  175. // https://github.com/ant-design/ant-design/issues/20541
  176. this.removePasswordTimeout = setTimeout(function () {
  177. if (_this3.$refs.input && _this3.$refs.input.getAttribute && _this3.$refs.input.getAttribute('type') === 'password' && _this3.$refs.input.hasAttribute('value')) {
  178. _this3.$refs.input.removeAttribute('value');
  179. }
  180. });
  181. },
  182. handleChange: function handleChange(e) {
  183. var _e$target = e.target,
  184. value = _e$target.value,
  185. composing = _e$target.composing;
  186. // https://github.com/vueComponent/ant-design-vue/issues/2203
  187. if ((e.isComposing || composing) && this.lazy || this.stateValue === value) return;
  188. this.setValue(value, this.clearPasswordValueAttribute);
  189. resolveOnChange(this.$refs.input, e, this.onChange);
  190. },
  191. handleKeyDown: function handleKeyDown(e) {
  192. if (e.keyCode === 13) {
  193. this.$emit('pressEnter', e);
  194. }
  195. this.$emit('keydown', e);
  196. }
  197. },
  198. render: function render() {
  199. var h = arguments[0];
  200. if (this.$props.type === 'textarea') {
  201. var textareaProps = {
  202. props: this.$props,
  203. attrs: this.$attrs,
  204. on: (0, _extends3['default'])({}, (0, _propsUtil.getListeners)(this), {
  205. input: this.handleChange,
  206. keydown: this.handleKeyDown,
  207. change: noop,
  208. blur: this.onBlur
  209. })
  210. };
  211. return h(_TextArea2['default'], (0, _babelHelperVueJsxMergeProps2['default'])([textareaProps, { ref: 'input' }]));
  212. }
  213. var customizePrefixCls = this.$props.prefixCls;
  214. var stateValue = this.$data.stateValue;
  215. var getPrefixCls = this.configProvider.getPrefixCls;
  216. var prefixCls = getPrefixCls('input', customizePrefixCls);
  217. var addonAfter = (0, _propsUtil.getComponentFromProp)(this, 'addonAfter');
  218. var addonBefore = (0, _propsUtil.getComponentFromProp)(this, 'addonBefore');
  219. var suffix = (0, _propsUtil.getComponentFromProp)(this, 'suffix');
  220. var prefix = (0, _propsUtil.getComponentFromProp)(this, 'prefix');
  221. var props = {
  222. props: (0, _extends3['default'])({}, (0, _propsUtil.getOptionProps)(this), {
  223. prefixCls: prefixCls,
  224. inputType: 'input',
  225. value: fixControlledValue(stateValue),
  226. element: this.renderInput(prefixCls),
  227. handleReset: this.handleReset,
  228. addonAfter: addonAfter,
  229. addonBefore: addonBefore,
  230. suffix: suffix,
  231. prefix: prefix
  232. }),
  233. on: (0, _propsUtil.getListeners)(this)
  234. };
  235. return h(_ClearableLabeledInput2['default'], props);
  236. }
  237. };