refactor(input): split TextInput and ItemInput components

Make it easier to start adding other inputs, like select
2025-08-21 21:15:24 +08:00 · 2016-01-07 12:29:01 -06:00
parent 52204de117
commit 387f883be3
33 changed files with 573 additions and 580 deletions
--- a/ionic/components/item-input/test/text-input.spec.ts
+++ b/ionic/components/item-input/test/text-input.spec.ts
@ -0,0 +1,135 @@
+import {ItemInput} from 'ionic/ionic';
+
+export function run() {
+
+  it('should scroll, top and bottom below safe area, no room to scroll', () => {
+    let inputOffsetTop = 350;
+    let inputOffsetHeight = 35;
+    let scrollViewDimensions = {
+      contentTop: 100,
+      contentHeight: 700,
+      scrollTop: 30,
+      scrollHeight: 700
+    };
+    let keyboardHeight = 400;
+    let platformHeight = 800;
+
+    let scrollData = ItemInput.getScrollData(inputOffsetTop, inputOffsetHeight, scrollViewDimensions, keyboardHeight, platformHeight);
+
+    expect(scrollData.scrollAmount).toBe(-205);
+    expect(scrollData.scrollTo).toBe(235);
+    expect(scrollData.scrollPadding).toBe(550);
+  });
+
+  it('should scroll, top and bottom below safe area, room to scroll', () => {
+    let inputOffsetTop = 350;
+    let inputOffsetHeight = 35;
+    let scrollViewDimensions = {
+      contentTop: 100,
+      contentHeight: 700,
+      scrollTop: 30,
+      scrollHeight: 1000
+    };
+    let keyboardHeight = 400;
+    let platformHeight = 800;
+
+    let scrollData = ItemInput.getScrollData(inputOffsetTop, inputOffsetHeight, scrollViewDimensions, keyboardHeight, platformHeight);
+
+    expect(scrollData.scrollAmount).toBe(-205);
+    expect(scrollData.scrollTo).toBe(235);
+    expect(scrollData.scrollPadding).toBe(0);
+  });
+
+  it('should scroll, top above safe', () => {
+    // Input top within safe area, bottom below safe area, room to scroll
+    let inputOffsetTop = 100;
+    let inputOffsetHeight = 33;
+    let scrollViewDimensions = {
+      contentTop: 100,
+      contentHeight: 700,
+      scrollTop: 250,
+      scrollHeight: 700
+    };
+    let keyboardHeight = 400;
+    let platformHeight = 800;
+
+    let scrollData = ItemInput.getScrollData(inputOffsetTop, inputOffsetHeight, scrollViewDimensions, keyboardHeight, platformHeight);
+
+    expect(scrollData.scrollAmount).toBe(150);
+    expect(scrollData.scrollTo).toBe(100);
+    expect(scrollData.scrollPadding).toBe(0);
+  });
+
+  it('should scroll, top in safe, bottom below safe, below more than top in, not enough padding', () => {
+    // Input top within safe area, bottom below safe area, room to scroll
+    let inputOffsetTop = 100;
+    let inputOffsetHeight = 320;
+    let scrollViewDimensions = {
+      contentTop: 100,
+      contentHeight: 700,
+      scrollTop: 20,
+      scrollHeight: 700
+    };
+    let keyboardHeight = 400;
+    let platformHeight = 800;
+
+    let scrollData = ItemInput.getScrollData(inputOffsetTop, inputOffsetHeight, scrollViewDimensions, keyboardHeight, platformHeight);
+
+    expect(scrollData.scrollAmount).toBe(-80);
+    expect(scrollData.scrollTo).toBe(100);
+    expect(scrollData.scrollPadding).toBe(550);
+  });
+
+  it('should scroll, top in safe, bottom below safe, below more than top in, enough padding', () => {
+    // Input top within safe area, bottom below safe area, room to scroll
+    let inputOffsetTop = 20;
+    let inputOffsetHeight = 330;
+    let scrollViewDimensions = {
+      contentTop: 100,
+      scrollTop: 0,
+    };
+    let keyboardHeight = 400;
+    let platformHeight = 800;
+
+    let scrollData = ItemInput.getScrollData(inputOffsetTop, inputOffsetHeight, scrollViewDimensions, keyboardHeight, platformHeight);
+
+    expect(scrollData.scrollAmount).toBe(-20);
+    expect(scrollData.scrollTo).toBe(20);
+    expect(scrollData.scrollPadding).toBe(0);
+  });
+
+  it('should scroll, top in safe, bottom below safe, below less than top in, enough padding', () => {
+    // Input top within safe area, bottom below safe area, room to scroll
+    let inputOffsetTop = 250;
+    let inputOffsetHeight = 80; // goes 30px below safe area
+    let scrollViewDimensions = {
+      contentTop: 100,
+      scrollTop: 0,
+    };
+    let keyboardHeight = 400;
+    let platformHeight = 800;
+
+    let scrollData = ItemInput.getScrollData(inputOffsetTop, inputOffsetHeight, scrollViewDimensions, keyboardHeight, platformHeight);
+
+    expect(scrollData.scrollAmount).toBe(-180);
+    expect(scrollData.scrollTo).toBe(180);
+    expect(scrollData.scrollPadding).toBe(0);
+  });
+
+  it('should not scroll, top in safe, bottom in safe', () => {
+    // Input top within safe area, bottom within safe area
+    let inputOffsetTop = 100;
+    let inputOffsetHeight = 50;
+    let scrollViewDimensions = {
+      contentTop: 100,
+      scrollTop: 0,
+      keyboardTop: 400
+    };
+    let keyboardHeight = 400;
+    let platformHeight = 800;
+
+    let scrollData = ItemInput.getScrollData(inputOffsetTop, inputOffsetHeight, scrollViewDimensions, keyboardHeight, platformHeight);
+    expect(scrollData.scrollAmount).toBe(0);
+  });
+
+}