@aks-dev/easyui 1.0.135 → 1.0.137

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;
-    }>;
 }
 
 
@@ -22,17 +15,22 @@ type Reducer = (prevState: State, action: Partial<State>) => State
 
 export default (props: MenuProps) => {
 
+    const {
+        defaultAlignHorizontal = 'left',
+        defaultAlignVertical = 'bottom'
+    } = props
+
     const [state, dispatch] = React.useReducer<Reducer>((prevState, action) => Object.assign({}, prevState, action), {})
 
     // 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 () => {
@@ -55,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)
             })
         })
@@ -81,21 +79,22 @@ export default (props: MenuProps) => {
         target_height: number;
     }
         = () => {
-            let alignVertical: 'bottom' | 'top' = 'bottom'
-            let alignHorizontal: 'left' | 'right' = 'left'
-            let width = _container.current.width
-            let height = _container.current.height
-            let x = _container.current.x
+            let alignVertical: 'bottom' | 'top' = defaultAlignVertical
+            let alignHorizontal: 'left' | 'right' = defaultAlignHorizontal
+            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,
@@ -126,6 +125,7 @@ export default (props: MenuProps) => {
             target_height,
         } = getLayoutInfos()
 
+        // console.log({ getLayoutInfos: getLayoutInfos() })
         const layout = () => {
             if (alignHorizontal == 'left') {
                 if (target_width + x > deviceWidth) {
@@ -153,41 +153,45 @@ 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 = 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的定位 */
         await getRootViewlayoutPromise()
+        /**重新获取rootview的定位 */
         showPopoverView({
             content: (
                 <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' }],
                         ...(() => {
@@ -204,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 (
@@ -216,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/lib/MenuView/index.ts

@@ -2,12 +2,12 @@
  * @Author: shiguo
  * @Date: 2022-07-14 18:09:02
  * @LastEditors: shiguo
- * @LastEditTime: 2022-12-22 22:38:52
+ * @LastEditTime: 2022-12-23 12:24:54
  * @FilePath: /@aks-dev/easyui/lib/MenuView/index.ts
  */
 
 import React from "react";
-import { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
+import { ImageSourcePropType, StyleProp, ViewStyle, TouchableOpacityProps } from 'react-native';
 
 
 
@@ -18,11 +18,12 @@ export type MenuItem = {
 }
 
 export type MenuProps = {
-    activeOpacity?: number | undefined;
+    defaultAlignVertical?: 'bottom' | 'top';
+    defaultAlignHorizontal?: 'left' | 'right';
     style?: StyleProp<ViewStyle> | undefined;
     data?: MenuItem[];
     onItemClick?: (index: number, extra?: any) => void;
-} & Readonly<{ children?: React.ReactNode | undefined }>
+} & Readonly<{ children?: React.ReactNode | undefined }> & TouchableOpacityProps
 
 
 export declare const MenuView: React.FC<MenuProps>;

package/package.json

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