UNPKG

7.35 kBJavaScriptView Raw
1import { r as registerInstance, c as createEvent, h, g as getElement } from './index-8809c729.js';
2
3const indexCss = "taro-input-core{display:block}input{display:block;overflow:hidden;height:1.4rem;text-overflow:clip;text-align:inherit;white-space:nowrap}";
4
5function getTrueType(type, confirmType, password) {
6 if (confirmType === 'search')
7 type = 'search';
8 if (password)
9 type = 'password';
10 if (typeof type === 'undefined') {
11 return 'text';
12 }
13 if (!type) {
14 throw new Error('unexpected type');
15 }
16 if (type === 'digit')
17 type = 'number';
18 return type;
19}
20function fixControlledValue(value) {
21 return value !== null && value !== void 0 ? value : '';
22}
23let Input = class {
24 constructor(hostRef) {
25 registerInstance(this, hostRef);
26 this.onInput = createEvent(this, "input", 7);
27 this.onPaste = createEvent(this, "paste", 7);
28 this.onFocus = createEvent(this, "focus", 7);
29 this.onBlur = createEvent(this, "blur", 7);
30 this.onConfirm = createEvent(this, "confirm", 7);
31 this.onChange = createEvent(this, "change", 7);
32 this.onKeyDown = createEvent(this, "keydown", 7);
33 this.isOnComposition = false;
34 this.isOnPaste = false;
35 this.onInputExcuted = false;
36 this.password = false;
37 this.disabled = false;
38 this.maxlength = 140;
39 this.autoFocus = false;
40 this.confirmType = 'done';
41 this.nativeProps = {};
42 this.handleInput = (e) => {
43 e.stopPropagation();
44 const { type, maxlength, confirmType, password } = this;
45 if (!this.isOnComposition && !this.onInputExcuted) {
46 let value = e.target.value;
47 const inputType = getTrueType(type, confirmType, password);
48 this.onInputExcuted = true;
49 /* 修复 number 类型 maxlength 无效 */
50 if (inputType === 'number' && value && maxlength > -1 && maxlength <= value.length) {
51 value = value.substring(0, maxlength);
52 e.target.value = value;
53 }
54 // 修复 IOS 光标跳转问题
55 // if (!(['number', 'file'].indexOf(inputType) >= 0)) {
56 // const pos = e.target.selectionEnd
57 // setTimeout(
58 // () => {
59 // e.target.selectionStart = pos
60 // e.target.selectionEnd = pos
61 // }
62 // )
63 // }
64 this.value = value;
65 this.onInput.emit({
66 value,
67 cursor: value.length
68 });
69 this.onInputExcuted = false;
70 }
71 };
72 this.handlePaste = (e) => {
73 this.isOnPaste = true;
74 this.onPaste.emit({
75 value: e.target.value
76 });
77 };
78 this.handleFocus = (e) => {
79 this.onInputExcuted = false;
80 this.onFocus.emit({
81 value: e.target.value
82 });
83 };
84 this.handleBlur = (e) => {
85 this.onBlur.emit({
86 value: e.target.value
87 });
88 };
89 this.handleChange = (e) => {
90 e.stopPropagation();
91 this.onChange.emit({
92 value: e.target.value
93 });
94 if (this.isOnPaste) {
95 this.isOnPaste = false;
96 this.value = e.target.value;
97 this.onInput.emit({
98 value: e.target.value,
99 cursor: e.target.value.length
100 });
101 }
102 };
103 this.handleKeyDown = (e) => {
104 const { value } = e.target;
105 const keyCode = e.keyCode || e.code;
106 this.onInputExcuted = false;
107 e.stopPropagation();
108 this.onKeyDown.emit({
109 value,
110 cursor: value.length,
111 keyCode
112 });
113 keyCode === 13 && this.onConfirm.emit({ value });
114 };
115 this.handleComposition = (e) => {
116 if (!(e.target instanceof HTMLInputElement))
117 return;
118 if (e.type === 'compositionend') {
119 this.isOnComposition = false;
120 this.value = e.target.value;
121 this.onInput.emit({
122 value: e.target.value,
123 cursor: e.target.value.length
124 });
125 }
126 else {
127 this.isOnComposition = true;
128 }
129 };
130 this.handleBeforeinput = (e) => {
131 if (!e.data)
132 return;
133 const isNumber = e.data && /[0-9]/.test(e.data);
134 if (this.type === 'number' && !isNumber) {
135 e.preventDefault();
136 }
137 if (this.type === 'digit' && !isNumber) {
138 if (e.data !== '.' || (e.data === '.' && e.target.value.indexOf('.') > -1)) {
139 e.preventDefault();
140 }
141 }
142 };
143 }
144 watchFocus(newValue, oldValue) {
145 var _a;
146 if (!oldValue && newValue) {
147 (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
148 }
149 }
150 watchValue(newValue) {
151 const value = fixControlledValue(newValue);
152 if (this.inputRef && this.inputRef.value !== value) {
153 this.inputRef.value = value;
154 }
155 }
156 componentDidLoad() {
157 var _a, _b, _c, _d, _e;
158 if (this.type === 'file') {
159 this.fileListener = () => {
160 this.onInput.emit();
161 };
162 (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.addEventListener('change', this.fileListener);
163 }
164 else {
165 (_b = this.inputRef) === null || _b === void 0 ? void 0 : _b.addEventListener('compositionstart', this.handleComposition);
166 (_c = this.inputRef) === null || _c === void 0 ? void 0 : _c.addEventListener('compositionend', this.handleComposition);
167 (_d = this.inputRef) === null || _d === void 0 ? void 0 : _d.addEventListener('beforeinput', this.handleBeforeinput);
168 (_e = this.inputRef) === null || _e === void 0 ? void 0 : _e.addEventListener('textInput', this.handleBeforeinput);
169 }
170 Object.defineProperty(this.el, 'value', {
171 get: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value; },
172 set: value => (this.value = value),
173 configurable: true
174 });
175 }
176 disconnectedCallback() {
177 var _a, _b, _c, _d, _e;
178 if (this.type === 'file') {
179 (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this.fileListener);
180 }
181 else {
182 (_b = this.inputRef) === null || _b === void 0 ? void 0 : _b.removeEventListener('compositionstart', this.handleComposition);
183 (_c = this.inputRef) === null || _c === void 0 ? void 0 : _c.removeEventListener('compositionend', this.handleComposition);
184 (_d = this.inputRef) === null || _d === void 0 ? void 0 : _d.removeEventListener('beforeinput', this.handleBeforeinput);
185 (_e = this.inputRef) === null || _e === void 0 ? void 0 : _e.removeEventListener('textInput', this.handleBeforeinput);
186 }
187 }
188 render() {
189 const { value, type, password, placeholder, autoFocus, disabled, maxlength, confirmType, name, nativeProps } = this;
190 return (h("input", Object.assign({ ref: input => {
191 this.inputRef = input;
192 }, class: 'weui-input', value: fixControlledValue(value), type: getTrueType(type, confirmType, password), placeholder: placeholder, autoFocus: autoFocus, disabled: disabled, maxlength: maxlength, name: name, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: this.handleChange, onKeyDown: this.handleKeyDown, onPaste: this.handlePaste, onCompositionStart: this.handleComposition, onCompositionEnd: this.handleComposition }, nativeProps)));
193 }
194 get el() { return getElement(this); }
195 static get watchers() { return {
196 "autoFocus": ["watchFocus"],
197 "value": ["watchValue"]
198 }; }
199};
200Input.style = indexCss;
201
202export { Input as taro_input_core };