@aks-dev/easyui 1.0.81 → 1.0.82

package/lib/Echarts/EchartsView.tsx

@@ -2,8 +2,8 @@
  * @Author: shiguo
  * @Date: 2022-05-05 14:52:53
  * @LastEditors: shiguo
- * @LastEditTime: 2022-05-10 18:10:15
- * @FilePath: /@aks/easyui/lib/Echarts/EchartsView.tsx
+ * @LastEditTime: 2022-07-14 18:24:09
+ * @FilePath: /@aks-dev/easyui/lib/Echarts/EchartsView.tsx
  */
 import * as React from 'react'
 import { MeasureOnSuccessCallback, StyleSheet, View, ViewStyle } from 'react-native'
@@ -35,10 +35,14 @@ const EchartsView: React.FC<EchartsViewProps> = (props) => {
 
     React.useEffect(() => {
         containerRef.current?.measure((...args) => {
-            dispatch({
-                width: args[2],
-                height: args[3]
-            })
+            if (args.length > 3) {
+                dispatch({
+                    width: args[2],
+                    height: args[3]
+                })
+            } else {
+                console.warn('[sg] EchartsView measure error')
+            }
         })
 
     }, [props.style])

package/lib/Hud/Hud.tsx

@@ -2,7 +2,7 @@
  * @Author: shiguo
  * @Date: 2022-04-24 14:10:04
  * @LastEditors: shiguo
- * @LastEditTime: 2022-07-12 19:12:37
+ * @LastEditTime: 2022-07-15 09:58:50
  * @FilePath: /cmwy-device-app/node_modules/@aks-dev/easyui/lib/Hud/Hud.tsx
  */
 import * as React from 'react'
@@ -18,12 +18,14 @@ import {
 import {
     hideLoading, Loading, loadingRef, showLoading
 } from './Loading/Loading'
+
+
 import {
     showToast, Toast, toastRef
 } from './Toast/Toast'
 
 
-
+import {showPopoverView,hidePopoverView,popoverViewRef,PopoverView} from './PopoverView/PopoverView'
 
 
 
@@ -40,7 +42,8 @@ export const Hud: React.FC<{}> = () => React.cloneElement(
         <Loading key="hud-0" ref={loadingRef} />,
         <Toast key="hud-1" ref={toastRef} />,
         <AlertView key="hud-2" ref={alertViewRef} />,
-        <AlertBottomView key="hud-3" ref={alertBottomViewRef} />
+        <AlertBottomView key="hud-3" ref={alertBottomViewRef} />,
+        <PopoverView key="hud-4" ref={popoverViewRef}/>,
     ]
 )
 
@@ -51,4 +54,6 @@ export {
     showLoading,
     hideLoading,
     showAlertBottomModal,
+    showPopoverView,
+    hidePopoverView
 }

package/lib/Hud/PopoverView/PopoverView.tsx

@@ -0,0 +1,60 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-04-24 14:27:02
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-07-15 10:08:14
+ * @FilePath: /cmwy-device-app/node_modules/@aks-dev/easyui/lib/Hud/PopoverView/PopoverView.tsx
+ */
+import React, { useImperativeHandle, useState } from 'react';
+import { Dimensions, StyleSheet, TouchableOpacity } from 'react-native';
+import type { PopoverViewCurrent, PopoverViewOptions } from '.';
+
+
+
+
+
+
+export const PopoverView = React.forwardRef<PopoverViewCurrent, {}>((_, ref) => {
+    const [visible, setVisible] = useState<boolean>(false);
+    const [options, setOptions] = useState<Partial<PopoverViewOptions> | undefined>()
+
+
+    useImperativeHandle<unknown, PopoverViewCurrent>(ref, () => ({
+        showPopoverView: (options: Partial<PopoverViewOptions>) => {
+            setVisible(true);
+            setOptions(options)
+
+        },
+        hidePopoverView: () => {
+            setVisible(false);
+            setOptions(undefined)
+        }
+    }), [visible])
+
+    if (!visible)
+        return null;
+
+    return (
+        <TouchableOpacity activeOpacity={1}  style={[styles.container,options.style]} onPress={e=>{
+            setVisible(false);
+            setOptions(undefined)
+            // e.stopPropagation()
+        }}>
+            {React.isValidElement(options.content) && options.content}
+        </TouchableOpacity>
+    )
+})
+
+export const popoverViewRef = React.createRef<PopoverViewCurrent>();
+export const showPopoverView = (options: Partial<PopoverViewOptions>) => popoverViewRef.current?.showPopoverView(options)
+export const hidePopoverView = () => popoverViewRef.current?.hidePopoverView()
+
+
+const styles = StyleSheet.create({
+    container: {
+        ...StyleSheet.absoluteFillObject,
+        display: 'flex',
+
+        // backgroundColor:'red'
+    },
+})

package/lib/Hud/PopoverView/index.ts

@@ -0,0 +1,38 @@
+
+/*
+ * @Author: shiguo
+ * @Date: 2022-04-24 14:27:02
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-07-15 10:07:56
+ * @FilePath: /cmwy-device-app/node_modules/@aks-dev/easyui/lib/Hud/PopoverView/index.ts
+ */
+import * as React from 'react'
+
+import {StyleProp,ViewStyle} from 'react-native'
+
+
+export type PopoverViewOptions = {
+    content: React.ReactNode;
+    style: StyleProp<ViewStyle>;
+}
+
+
+
+export declare type PopoverViewCurrent = {
+    showPopoverView: (options:Partial<PopoverViewOptions>) => void;
+    hidePopoverView: () => void;
+}
+
+
+
+
+export declare const showPopoverView: (options:Partial<PopoverViewOptions>) => void;
+
+
+export declare const hidePopoverView: () => void;
+
+
+export declare const popoverViewRef: React.RefObject<PopoverViewCurrent>;
+
+export declare const PopoverView: React.ForwardRefExoticComponent<React.PropsWithoutRef<PopoverViewOptions> & React.RefAttributes<PopoverViewCurrent>>
+

package/lib/Hud/index.ts

@@ -2,8 +2,8 @@
  * @Author: shiguo
  * @Date: 2022-04-24 14:14:42
  * @LastEditors: shiguo
- * @LastEditTime: 2022-07-12 19:14:17
- * @FilePath: /cmwy-device-app/node_modules/@aks-dev/easyui/lib/Hud/index.ts
+ * @LastEditTime: 2022-07-15 12:40:12
+ * @FilePath: /@aks-dev/easyui/lib/Hud/index.ts
  */
 
 
@@ -14,5 +14,6 @@ export * from './AlertView'
 export * from './Loading'
 export * from './Toast'
 export * from './AlertBottomView'
+export * from './PopoverView'
 
 export declare const Hud: React.FC<{}>

package/lib/MenuView/MenuView.tsx

@@ -0,0 +1,221 @@
+import React from "react";
+import { Image, LayoutRectangle, MeasureInWindowOnSuccessCallback, ScrollView, StatusBar, Text, TouchableOpacity, View } from 'react-native';
+import type { MenuProps } from '.';
+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;
+    }>;
+}
+
+
+type Reducer = (prevState: State, action: Partial<State>) => State
+
+
+
+export default (props: MenuProps) => {
+
+    const [state, dispatch] = React.useReducer<Reducer>((prevState, action) => Object.assign({}, prevState, action), {})
+
+    const containerRef = React.useRef<{ measureInWindow: (callback: MeasureInWindowOnSuccessCallback) => void }>()
+    const _container = React.useRef<{
+        x: number;
+        y: number;
+        height: number;
+        width: number;
+    }>({ x: 0, y: 0, width: 0, height: 0 })
+
+
+    React.useEffect(() => {
+        containerRef.current?.measureInWindow((...args) => {
+            // console.log('containerRef', args)
+            if (args.length == 4) {
+                _container.current = {
+                    x: args[0],
+                    y: args[1],
+                    width: args[2],
+                    height: args[3],
+                }
+            }
+        })
+
+    })
+
+
+    const getLayoutInfos: () => {
+        alignVertical: 'bottom' | 'top';
+        alignHorizontal: 'left' | 'right';
+        width: number;
+        height: number;
+        x: number;
+        y: number;
+        target_width: number;
+        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 y = (StatusBar.currentHeight || 0) + _container.current.y + 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
+            return {
+                alignVertical,
+                alignHorizontal,
+                width,
+                height,
+                x,
+                y,
+                target_width,
+                target_height,
+            }
+        }
+
+
+    const reLayout = (): Partial<{
+        left: number;
+        right: number;
+        top: number;
+        botttom: number;
+    }> => {
+        let {
+            alignVertical,
+            alignHorizontal,
+            width,
+            height,
+            x,
+            y,
+            target_width,
+            target_height,
+        } = getLayoutInfos()
+
+        const toAlignHorizontal = () => {
+            if (alignHorizontal == 'left') {
+                if (target_width + x > deviceWidth) {
+                    return {
+                        left: Math.abs(deviceWidth - target_width) * .7,
+                        top: y,
+                    }
+                }
+                return {
+                    left: Math.max(x, 15),
+                    top: y,
+                }
+            } else {
+                let _x = deviceWidth - x - width
+                if (target_width + _x > deviceWidth) {
+                    return {
+                        right: Math.abs(deviceWidth - target_width) * .7,
+                        top: y
+                    }
+                }
+                return {
+                    right: Math.max(_x, 15),
+                    top: y
+                }
+            }
+        }
+        if (alignVertical == 'bottom') {
+            y = y + 10
+            return toAlignHorizontal()
+        } else {
+            y = (StatusBar.currentHeight || 0) + _container.current.y - target_height - 10
+            return toAlignHorizontal()
+        }
+    }
+
+
+    const show = () => {
+        // console.log('_container', _container.current, StatusBar.currentHeight)
+        showPopoverView({
+            content: (
+                <TouchableOpacity
+                    activeOpacity={1}
+                    style={{
+                        position: 'absolute',
+                        minWidth: deviceWidth * 0.36,
+                        maxWidth: deviceWidth * 0.8,
+                        minHeight: 36 + 20,
+                        maxHeight: 36 * 5 + 20,
+                        borderRadius: 6, backgroundColor: '#000000ee',
+                        // overflow: 'hidden' ,
+                        padding: 10,
+                        ...reLayout()
+                    }}
+                // onLayout={e=>{
+                //     console.log('onLayout TouchableOpacity', e.nativeEvent.layout)
+                // }}
+                >
+
+                    <View style={{
+                        width: 12, height: 12,
+                        backgroundColor: '#000000ee', position: 'absolute', zIndex: 1,
+                        transform: [{ rotateZ: '45deg' }],
+                        ...(() => {
+                            const {
+                                alignVertical,
+                                alignHorizontal,
+                            } = getLayoutInfos()
+                            if (alignVertical == 'bottom' && alignHorizontal == 'left') return { left: '20%', top: -5 }
+                            if (alignVertical == 'bottom' && alignHorizontal == 'right') return { right: '20%', top: -5 }
+                            if (alignVertical == 'top' && alignHorizontal == 'left') return { left: '20%', bottom: -5 }
+                            if (alignVertical == 'top' && alignHorizontal == 'right') return { right: '20%', bottom: -5 }
+                            return {}
+                        })()
+                    }} />
+
+                    <ScrollView onLayout={e => {
+                        // console.log('onLayout', e.nativeEvent.layout)
+                        let target: LayoutRectangle = e.nativeEvent.layout
+                        dispatch({ target })
+                    }}
+                        style={{}}
+                    >
+                        {props.data?.map((i, idx) => {
+                            return (
+                                <TouchableOpacity
+                                    activeOpacity={.7}
+                                    key={`sg-memnu-${idx}`}
+                                    style={{
+                                        height: 36, display: 'flex', flexDirection: 'row', alignItems: 'center'
+                                        // ,backgroundColor:utils.randomcolor()
+                                    }}
+                                    onPress={e => {
+                                        props.onItemClick && props.onItemClick(idx, i.extra)
+                                        hidePopoverView()
+                                    }}
+                                >
+                                    {i.icon &&
+                                        <Image style={{ width: 18, height: 18, marginRight: 4 }} source={i.icon} />
+                                    }
+                                    <Text style={{ flexShrink: 1, fontSize: 14, color: 'white' }}>{i.text}</Text>
+                                </TouchableOpacity>
+                            )
+                        })}
+                    </ScrollView>
+                </TouchableOpacity>
+            )
+        })
+    }
+
+    return (
+        <TouchableOpacity ref={containerRef as any} onPress={e => show()} >
+            {props.children}
+        </TouchableOpacity>
+    )
+}

package/lib/MenuView/index.ts

@@ -0,0 +1,26 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-07-14 18:09:02
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-07-15 12:39:20
+ * @FilePath: /@aks-dev/easyui/lib/MenuView/index.ts
+ */
+
+import React from "react";
+import { ImageSourcePropType } from 'react-native';
+
+
+
+export type MenuItem = {
+    text: string;
+    icon?: ImageSourcePropType;
+    extra?:any
+}
+
+export type MenuProps = {
+    data?: MenuItem[];
+    onItemClick?: (index: number,extra?:any) => void;
+} & Readonly<{ children?: React.ReactNode | undefined }>
+
+
+export declare const MenuView: React.FC<MenuProps>;

package/lib/MutiPictureView/index.ts

@@ -3,8 +3,8 @@ import { TextStyle } from 'react-native';
  * @Author: shiguo
  * @Date: 2022-04-24 17:38:32
  * @LastEditors: shiguo
- * @LastEditTime: 2022-05-09 19:34:22
- * @FilePath: /@aks/easyui/lib/MutiPictureView/index.ts
+ * @LastEditTime: 2022-07-14 15:14:53
+ * @FilePath: /@aks-dev/easyui/lib/MutiPictureView/index.ts
  */
 import { StyleProp, ViewStyle, ImageStyle, ImageSourcePropType } from 'react-native'
 
@@ -31,7 +31,9 @@ export declare type MutiPictureViewProps = {
     /**@deprecated  title 标题 ，已弃用*/
     title?: string;
     bind: BindProps;
+    /**default maxCount is  6 */
     maxCount?: number;
+    /**default type is showImagePicker */
     type?: 'showImagePicker' | 'openCamera';
     style?:StyleProp<ViewStyle>;
     addIcon?: ImageSourcePropType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aks-dev/easyui",
-  "version": "1.0.81",
+  "version": "1.0.82",
   "description": "移动端App开发工具包",
   "main": "./src/index.ts",
   "typings": "./src/index.d.ts",

package/screen/px2dp.ts

@@ -2,7 +2,7 @@
  * @Author: shiguo
  * @Date: 2022-04-18 14:32:25
  * @LastEditors: shiguo
- * @LastEditTime: 2022-06-02 11:04:21
+ * @LastEditTime: 2022-07-14 20:19:39
  * @FilePath: /@aks-dev/easyui/screen/px2dp.ts
  */
 import { Dimensions, Platform, StatusBar } from 'react-native';

package/src/index.d.ts

@@ -2,7 +2,7 @@
  * @Author: shiguo
  * @Date: 2022-04-26 11:44:22
  * @LastEditors: shiguo
- * @LastEditTime: 2022-07-12 15:33:26
+ * @LastEditTime: 2022-07-15 12:36:37
  * @FilePath: /@aks-dev/easyui/src/index.d.ts
  */
 
@@ -42,6 +42,8 @@ export * from '../lib/RichText'
 
 export * from '../lib/DottedLine'
 
+export * from '../lib/MenuView'
+
 /// 工具
 import * as utils from '../utils'
 export {

package/src/index.ts

@@ -3,7 +3,7 @@
  * @Author: shiguo
  * @Date: 2022-04-13 12:47:34
  * @LastEditors: shiguo
- * @LastEditTime: 2022-07-12 19:38:05
+ * @LastEditTime: 2022-07-15 12:40:31
  * @FilePath: /@aks-dev/easyui/src/index.ts
  */
 
@@ -14,7 +14,7 @@
 
 export * from '../lib/Badge/Badge'
 
-export { Hud, showLoading, hideLoading, showToast, showAlertModal,showAlertBottomModal } from '../lib/Hud/Hud'
+export { Hud, showLoading, hideLoading, showToast, showAlertModal, showAlertBottomModal, showPopoverView, hidePopoverView } from '../lib/Hud/Hud'
 
 export * from '../lib/Modal/Modal'
 
@@ -44,6 +44,8 @@ export { echarts } from '../lib/Echarts'
 export { default as RichText } from '../lib/RichText/RichText'
 export { default as DottedLine } from '../lib/DottedLine/DottedLine'
 
+export { default as MenuView } from '../lib/MenuView/MenuView'
+
 /// 全局适配
 export * from '../screen/px2dp'
 export * from '../screen/px2sp'