@aks-dev/easyui 1.0.136 → 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/lib/MenuView/MenuView.tsx

@@ -6,13 +6,6 @@ import { deviceHeight, deviceWidth } from '../../screen/px2dp';
 import { hidePopoverView, showPopoverView } from '../Hud/Hud';
 
 type State = {
-    target?: LayoutRectangle;
-    arrow?: Partial<{
-        left: number | string;
-        right: number | string;
-        top: number;
-        bottom: number;
-    }>;
 }
 
 
@@ -31,13 +24,13 @@ export default (props: MenuProps) => {
 
     // const containerRef = React.useRef<{ measureInWindow: (callback: MeasureInWindowOnSuccessCallback) => void }>()
     const containerRef = React.useRef<{ measure: (callback: MeasureOnSuccessCallback) => void }>()
-    const _container = React.useRef<{
-        x: number;
-        y: number;
+    const rootView = React.useRef<{
+        pageX: number;
+        pageY: number;
         height: number;
         width: number;
-    }>({ x: 0, y: 0, width: 0, height: 0 })
-
+    }>({ pageX: 0, pageY: 0, width: 0, height: 0 })
+    const sc = React.useRef<LayoutRectangle>({ x: 0, y: 0, width: 0, height: 0 })
 
     // React.useEffect(() => {
     //     ; (async () => {
@@ -60,15 +53,15 @@ export default (props: MenuProps) => {
     const getRootViewlayoutPromise = () => {
         return new Promise((resovle, reject) => {
             containerRef.current?.measure((...args) => {
-                // console.log('containerRef', args)
                 if (args.length == 6) {
-                    _container.current = {
-                        x: args[4],
-                        y: args[5],
+                    rootView.current = {
                         width: args[2],
                         height: args[3],
+                        pageX: args[4],
+                        pageY: args[5],
                     }
                 }
+                // console.log('RootView', rootView.current)
                 resovle(args)
             })
         })
@@ -88,19 +81,20 @@ export default (props: MenuProps) => {
         = () => {
             let alignVertical: 'bottom' | 'top' = defaultAlignVertical
             let alignHorizontal: 'left' | 'right' = defaultAlignHorizontal
-            let width = _container.current.width
-            let height = _container.current.height
-            let x = _container.current.x
+            let width = rootView.current.width
+            let height = rootView.current.height
+            let x = rootView.current.pageX
             // let y = (StatusBar.currentHeight || 0) + _container.current.y + height
-            let y = _container.current.y + height
+            let y = rootView.current.pageY + height
             if (x > Math.abs(deviceWidth - width - x)) {
                 alignHorizontal = 'right'
             }
             if (y > deviceHeight * .5) {
                 alignVertical = 'top'
             }
-            const target_width = state.target?.width || 0
-            const target_height = state.target?.height || 0
+            /**todo: target_width的获取是延迟的，所以这里又问题 */
+            const target_width = sc.current.width
+            const target_height = CELL_HEIGHT * (Math.min(props.data?.length || 0, 5) || 0)
             return {
                 alignVertical,
                 alignHorizontal,
@@ -131,6 +125,7 @@ export default (props: MenuProps) => {
             target_height,
         } = getLayoutInfos()
 
+        // console.log({ getLayoutInfos: getLayoutInfos() })
         const layout = () => {
             if (alignHorizontal == 'left') {
                 if (target_width + x > deviceWidth) {
@@ -158,16 +153,20 @@ export default (props: MenuProps) => {
             }
         }
         if (alignVertical == 'bottom') {
-            y = y + 10
+            y = y + PADDING
             return layout()
         } else {
-            // y = (StatusBar.currentHeight || 0) + _container.current.y - target_height - 10
-            y = _container.current.y - target_height - 10
+            y = rootView.current.pageY - target_height - PADDING * 2 - ARROW_HEIGHT
             return layout()
         }
     }
 
 
+    const PADDING = 10
+    const ARROW_HEIGHT = 12
+    const CELL_HEIGHT = 36
+
+
     const show = async () => {
         if (props.data == undefined || props.data?.length == 0) return
         /**重新获取rootview的定位 */
@@ -178,23 +177,21 @@ export default (props: MenuProps) => {
                 <TouchableOpacity
                     activeOpacity={1}
                     style={{
+
                         position: 'absolute',
                         minWidth: deviceWidth * 0.36,
                         maxWidth: deviceWidth * 0.8,
-                        minHeight: 36 + 20,
-                        maxHeight: 36 * 5 + 20,
+                        minHeight: CELL_HEIGHT + PADDING * 2,
+                        maxHeight: CELL_HEIGHT * 5 + PADDING * 2,
                         borderRadius: 6, backgroundColor: '#000000ee',
                         // overflow: 'hidden' ,
-                        padding: 10,
+                        padding: PADDING,
                         ...reLayout()
                     }}
-                // onLayout={e=>{
-                //     console.log('onLayout TouchableOpacity', e.nativeEvent.layout)
-                // }}
                 >
 
                     <View style={{
-                        width: 12, height: 12,
+                        width: ARROW_HEIGHT, height: ARROW_HEIGHT,
                         backgroundColor: '#000000ee', position: 'absolute', zIndex: 1,
                         transform: [{ rotateZ: '45deg' }],
                         ...(() => {
@@ -211,11 +208,11 @@ export default (props: MenuProps) => {
                     }} />
 
                     <ScrollView onLayout={e => {
-                        // console.log('onLayout', e.nativeEvent.layout)
-                        let target: LayoutRectangle = e.nativeEvent.layout
-                        dispatch({ target })
+                        // console.log('target onLayout', e.nativeEvent.layout)
+                        let _sc: LayoutRectangle = e.nativeEvent.layout
+                        sc.current = _sc
                     }}
-                        style={{}}
+                    // style={{ backgroundColor: "red" }}
                     >
                         {props.data?.map((i, idx) => {
                             return (
@@ -223,7 +220,7 @@ export default (props: MenuProps) => {
                                     activeOpacity={.7}
                                     key={`sg-memnu-${idx}`}
                                     style={{
-                                        height: 36, display: 'flex', flexDirection: 'row', alignItems: 'center'
+                                        height: CELL_HEIGHT, display: 'flex', flexDirection: 'row', alignItems: 'center'
                                         // ,backgroundColor:utils.randomcolor()
                                     }}
                                     onPress={e => {

package/package.json

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