Fix(InputItem): Adjust the caret position of the formatted value

components/input-item/__tests__/index.test.js

@@ -1,10 +1,37 @@
-// import React from 'react';
-// import InputItem from '../index';
+import React from 'react';
+import { mount } from 'enzyme';
+import InputItem from '../index';
 
 describe('InputItem', () => {
   // No need to render Snapshot again, because of `./demo.test.js`
-  it('trigger event correctly', () => {
-    // todos: write test!
-    expect(true).toBe(true);
+
+  it('format bankCard correctly', () => {
+    const bankCard = mount((
+      <InputItem
+        type="bankCard"
+      >银行卡</InputItem>
+    ));
+    bankCard.find('input').simulate('change', { target: { value: '1a23 4-5.6  7w890' } });
+    expect(bankCard.state('value')).toBe('1234 5678 90');
+  });
+
+  it('format phone correctly', () => {
+    const phone = mount((
+      <InputItem
+        type="phone"
+      >手机号码</InputItem>
+    ));
+    phone.find('input').simulate('change', { target: { value: '1a23 4-5.6  7w890a123123' } });
+    expect(phone.state('value')).toBe('123 4567 8901');
+  });
+
+  it('format number correctly', () => {
+    const number = mount((
+      <InputItem
+        type="number"
+      >数字</InputItem>
+    ));
+    number.find('input').simulate('change', { target: { value: '1a23 4-5.6  7w890' } });
+    expect(number.state('value')).toBe('1234567890');
   });
 });

components/input-item/index.tsx

@@ -119,6 +119,7 @@ class InputItem extends React.Component<InputItemProps, any> {
         break;
     }
     this.handleOnChange(newValue, newValue !== value);
+    this.adjustCaretPosition(e.target, value, newValue, [' '], /\D/g)
   }
 
   handleOnChange = (value: string, isMutated: boolean = false) => {
@@ -134,6 +135,45 @@ class InputItem extends React.Component<InputItemProps, any> {
     }
   }
 
+  adjustCaretPosition = (el: HTMLInputElement, rawVal: string, ctrlVal: string, placeholderChars: Array<string>, maskReg: RegExp) => {
+    const { type } = this.props;
+
+    const calcPos = () => {
+      // calculate the position of the caret
+      const preVal = this.state.value || '';
+      const editLength = rawVal.length - preVal.length;
+      const isAddition = editLength > 0;
+      let pos = el.selectionEnd || 0;
+      if (isAddition) {
+        const additionStr = rawVal.substr(pos - editLength, editLength);
+        let ctrlCharCount = additionStr.replace(maskReg, '').length;
+        pos -= (editLength - ctrlCharCount);
+        let placeholderCharCount = 0;
+        while (ctrlCharCount > 0) {
+          if (placeholderChars.indexOf(ctrlVal.charAt(pos - ctrlCharCount + placeholderCharCount)) === -1) {
+            ctrlCharCount--;
+          } else {
+            placeholderCharCount++;
+          }
+        }
+        pos += placeholderCharCount;
+      }
+      setTimeout(() => el.selectionStart = el.selectionEnd = pos);
+    }
+
+    switch (type) {
+      case 'bankCard':
+      case 'phone':
+      case 'number':
+        calcPos();
+        break;
+      case 'text':
+      case 'password':
+      default:
+        break;
+    }
+  }
+
   onInputFocus = (value: string) => {
     if (this.debounceTimeout) {
       clearTimeout(this.debounceTimeout);