Fix/picker/0925 (#12)

* fix: fix offset * fix: 修改touchstart绑定方法 Co-authored-by: Dengzygx <[email protected]>
webyom · Sep 25, 2020 · cb4f0db · cb4f0db
1 parent a9d5445
commit cb4f0db
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/src/password-input/index.tsx b/src/password-input/index.tsx
@@ -2,6 +2,7 @@ import * as preact from 'preact';
 import clsx from 'clsx';
 import { addUnit } from '../utils';
 import { createBEM } from '../utils/bem';
+import { TouchHandler } from '../utils/touch-handler';
 import { BORDER_SURROUND, BORDER_LEFT } from '../utils/constant';
 import './index.scss';
 
@@ -56,6 +57,8 @@ const getPoints = (
 };
 
 export class PasswordInput extends preact.Component<PasswordInputProps, PasswordInputState> {
+  private listEle: HTMLUListElement;
+  private touchHandler: TouchHandler;
   constructor(props: PasswordInputProps) {
     super(props);
     this.state = {
@@ -66,6 +69,17 @@ export class PasswordInput extends preact.Component<PasswordInputProps, Password
     this.onTouchStart = this.onTouchStart.bind(this);
   }
 
+  componentDidMount(): void {
+    this.touchHandler = new TouchHandler(this.listEle, {
+      onTouchStart: this.onTouchStart.bind(this),
+    });
+  }
+
+  componentWillUnmount(): void {
+    this.touchHandler.destroy();
+    this.touchHandler = null;
+  }
+
   static getDerivedStateFromProps(nextProps: PasswordInputProps, state: PasswordInputState): PasswordInputState {
     const { value, length, gutter, focused, mask, pointClassName } = nextProps;
     const { prevValue, prevFocused } = state;
@@ -90,7 +104,12 @@ export class PasswordInput extends preact.Component<PasswordInputProps, Password
     const { gutter } = this.props;
     return (
       <div className={bem()}>
-        <ul onTouchStart={this.onTouchStart} className={clsx(bem('security'), { [BORDER_SURROUND]: !gutter })}>
+        <ul
+          ref={(el): void => {
+            this.listEle = el;
+          }}
+          className={clsx(bem('security'), { [BORDER_SURROUND]: !gutter })}
+        >
           {this.state.points}
         </ul>
       </div>

diff --git a/src/picker/picker-column.tsx b/src/picker/picker-column.tsx
@@ -129,11 +129,12 @@ export class PickerColumn extends preact.Component<PickerProps, PickerState> {
 
   // 点击后修改offset，调整列表位置
   setIndex(index: number): void {
+    const props = this.props;
     // 普通点击时，touchEnd触发在click事件之前，那时index并未改变，无需进行下面逻辑
-    if (index === this.state.currentIndex) {
+    if (index === this.state.currentIndex && this.state.offset === -index * props.itemHeight) {
       return;
     }
-    const props = this.props;
+
     index = this.adjustIndex(index);
     if (index === undefined) {
       return;