From 7fb20a954a2b4914c34bbe825e0891fd142c3a6c Mon Sep 17 00:00:00 2001
From: Jay Fong <fjc0kb@gmail.com>
Date: Sat, 5 Oct 2019 02:21:51 +0800
Subject: [PATCH] =?UTF-8?q?fix(Picker):=20canClose=20=E5=88=9D=E5=A7=8B?=
 =?UTF-8?q?=E5=80=BC=E5=BA=94=E4=B8=BA=20true?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Picker/index.tsx | 37 +++++++++++++++------------------
 1 file changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/components/Picker/index.tsx b/src/components/Picker/index.tsx
index 8a67369..dc64151 100644
--- a/src/components/Picker/index.tsx
+++ b/src/components/Picker/index.tsx
@@ -1,6 +1,6 @@
 import MPickerHeader from '../PickerHeader'
 import MPickerView from '../PickerView'
-import Taro, {useEffect, useRef, useState} from '@tarojs/taro'
+import Taro, {useCallback, useEffect, useRef, useState} from '@tarojs/taro'
 import XBottomSheet from '../BottomSheet'
 import {functionalComponent} from '../component'
 import {MPickerDefaultProps, MPickerProps} from './props'
@@ -9,48 +9,45 @@ import {View} from '@tarojs/components'
 function MPicker(props: MPickerProps) {
   const [visible, setVisible] = useState<boolean>(false)
   const [selectedIndexes, setSelectedIndexes] = useState<number[]>([])
-  const canClose = useRef<boolean>(false)
+  const canClose = useRef<boolean>(true)
 
-  useEffect(
-    () => {
-      setSelectedIndexes(props.selectedIndexes)
-    },
-    [props.selectedIndexes],
-  )
+  useEffect(() => {
+    setSelectedIndexes(props.selectedIndexes)
+  }, [props.selectedIndexes])
 
-  function handleVisibleChange(visible: boolean) {
+  const handleVisibleChange = useCallback((visible: boolean) => {
     setVisible(visible)
     if (!visible) {
       setSelectedIndexes(props.selectedIndexes)
     }
-  }
+  }, [props.selectedIndexes])
 
-  function handlePickStart() {
+  const handlePickStart = useCallback(() => {
     canClose.current = false
-  }
+  }, [])
 
-  function handlePickEnd() {
+  const handlePickEnd = useCallback(() => {
     canClose.current = true
-  }
+  }, [])
 
-  function handlePickChange(selectedIndexes: number[]) {
+  const handlePickChange = useCallback((selectedIndexes: number[]) => {
     setSelectedIndexes(selectedIndexes)
-  }
+  }, [])
 
-  function handleCancelClick() {
+  const handleCancelClick = useCallback(() => {
     if (canClose.current) {
       setSelectedIndexes(props.selectedIndexes)
       setVisible(false)
       props.onCancel()
     }
-  }
+  }, [props.selectedIndexes, props.onCancel])
 
-  function handleConfirmClick() {
+  const handleConfirmClick = useCallback(() => {
     if (canClose.current) {
       setVisible(false)
       props.onConfirm(selectedIndexes.slice())
     }
-  }
+  }, [props.onConfirm, selectedIndexes])
 
   return props.disabled ? props.children : (
     <XBottomSheet