@aks-dev/easyui 1.0.137 → 1.0.138

package/lib/AnimationModal/AnimationModal.tsx

@@ -2,7 +2,7 @@
  * @Author: shiguo
  * @Date: 2022-05-17 15:22:06
  * @LastEditors: shiguo
- * @LastEditTime: 2022-12-22 11:57:30
+ * @LastEditTime: 2022-12-26 17:26:14
  * @FilePath: /@aks-dev/easyui/lib/AnimationModal/AnimationModal.tsx
  */
 
@@ -10,10 +10,11 @@ import * as React from "react";
 import { View, Animated, Easing, LayoutRectangle, PanResponder, StyleSheet, useWindowDimensions, BackHandler } from 'react-native';
 import type { AnimationModalProps } from '.';
 import * as utils from '../../utils/lazy';
-type State = {
-    display: 'flex' | 'none';
-}
-type StateReducerProps = (state: State, action: Partial<State>) => State
+// type State = {
+//     display: 'flex' | 'none';
+// }
+// type StateReducerProps = (state: State, action: Partial<State>) => State
+
 
 
 export const AnimationModal: React.ForwardRefExoticComponent<
@@ -28,11 +29,13 @@ export const AnimationModal: React.ForwardRefExoticComponent<
 
         const { height } = useWindowDimensions()
 
-        const [state, dispatch] = React.useReducer<StateReducerProps>(
-            (state, action) => ({ ...state, ...action }),
-            {
-                display: 'none'
-            })
+        // const [state, dispatch] = React.useReducer<StateReducerProps>(
+        //     (state, action) => ({ ...state, ...action }),
+        //     {
+        //         display: 'none'
+        //     })
+
+        const [display, setDisplay] = useCallbackState<'flex' | 'none'>('none')
 
         const animatedValue = React.useRef(new Animated.Value(0)).current;
         const timing = (value: number) => {
@@ -60,31 +63,36 @@ export const AnimationModal: React.ForwardRefExoticComponent<
         }), [])
         const targetRef = React.useRef<any>()
 
+
         const show = async () => {
-            dispatch({ display: 'flex' })
-            await utils.sleep(50)
-            timing(-layoutRef.current?.h1)
+            setDisplay('flex', async () => {
+                await utils.sleep(50)
+                timing(-layoutRef.current?.h1)
+            })
         }
         const hide = async () => {
             timing(0)
             await utils.sleep(300)
-            dispatch({ display: 'none' })
+            setDisplay('none')
         }
 
 
         React.useEffect(() => {
-            let addEventListener = BackHandler.addEventListener("hardwareBackPress", ()=>{
-                return state.display == 'flex'
+            let addEventListener = BackHandler.addEventListener("hardwareBackPress", () => {
+                return display == 'flex'
             })
             return () => {
                 addEventListener.remove()
             }
-        }, [state.display])
+        }, [display])
+
 
 
         return (
             <View
-                style={Object.assign({ display: state.display }, styles.container, props.style)}
+                style={Object.assign({
+                    display: display
+                }, styles.container, props.style)}
                 {...PanResponder.create({
                     onStartShouldSetPanResponder: (e, gestureState) => {
                         let pageY = e.nativeEvent.pageY
@@ -146,3 +154,22 @@ const styles = StyleSheet.create({
         //  backgroundColor: 'cyan'
     }
 })
+
+
+
+
+const useCallbackState = <T,>(od: T): [T, (d: T, callback?: Function) => void] => {
+    const cbRef = React.useRef<Function>()
+    const [data, setData] = React.useState<T>(od)
+    React.useEffect(() => {
+        cbRef.current && cbRef.current(data)
+    }, [data])
+
+    return [
+        data,
+        (d: T, callback?: Function) => {
+            cbRef.current = callback;
+            setData(d)
+        }
+    ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aks-dev/easyui",
-  "version": "1.0.137",
+  "version": "1.0.138",
   "description": "工具箱",
   "main": "./src/index.ts",
   "typings": "./src/index.d.ts",