From cb4f0dbaad7adf5057507aff6e4cb7a4bb2b5213 Mon Sep 17 00:00:00 2001
From: Gary Wang <webyom@gmail.com>
Date: Fri, 25 Sep 2020 17:27:18 +0800
Subject: [PATCH] Fix/picker/0925 (#12)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: fix offset

* fix: 修改touchstart绑定方法

Co-authored-by: Dengzygx <714704978@qq.com>
---
 src/password-input/index.tsx | 21 ++++++++++++++++++++-
 src/picker/picker-column.tsx |  5 +++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/password-input/index.tsx b/src/password-input/index.tsx
index 6c9dca9..2126a2c 100644
--- 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
index 361175c..1a5915d 100644
--- 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;