@aks-dev/easyui 1.0.163 → 1.1.2

package/lib/MenuView/MenuView.tsx

@@ -1,252 +0,0 @@
-import React from "react";
-import { Image, LayoutRectangle, MeasureOnSuccessCallback, ScrollView, StatusBar, Text, TouchableOpacity, View } from 'react-native';
-import type { MenuProps } from '.';
-import { deviceHeight, deviceWidth } from '../../screen/px2dp';
-// import * as utils from '../../utils/lazy';
-import { hidePopoverView, showPopoverView } from '../Hud/Hud';
-
-type State = {
-}
-
-
-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 rootView = React.useRef<{
-        pageX: number;
-        pageY: number;
-        height: number;
-        width: number;
-    }>({ pageX: 0, pageY: 0, width: 0, height: 0 })
-    const sc = React.useRef<LayoutRectangle>({ x: 0, y: 0, width: 0, height: 0 })
-
-    // React.useEffect(() => {
-    //     ; (async () => {
-    //         await utils.sleep()
-    //         containerRef.current?.measure((...args) => {
-    //             console.log('containerRef', args)
-    //             if (args.length == 6) {
-    //                 _container.current = {
-    //                     x: args[4],
-    //                     y: args[5],
-    //                     width: args[2],
-    //                     height: args[3],
-    //                 }
-    //             }
-    //         })
-    //     })()
-    // })
-
-
-    const getRootViewlayoutPromise = () => {
-        return new Promise((resovle, reject) => {
-            containerRef.current?.measure((...args) => {
-                if (args.length == 6) {
-                    rootView.current = {
-                        width: args[2],
-                        height: args[3],
-                        pageX: args[4],
-                        pageY: args[5],
-                    }
-                }
-                // console.log('RootView', rootView.current)
-                resovle(args)
-            })
-        })
-    }
-
-
-    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' = 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 = rootView.current.pageY + height
-            if (x > Math.abs(deviceWidth - width - x)) {
-                alignHorizontal = 'right'
-            }
-            if (y > deviceHeight * .5) {
-                alignVertical = 'top'
-            }
-            /**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,
-                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()
-
-        // console.log({ getLayoutInfos: getLayoutInfos() })
-        const layout = () => {
-            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 + PADDING
-            return layout()
-        } else {
-            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 () => {
-        props.onContainerClick && props.onContainerClick()
-        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: CELL_HEIGHT + PADDING * 2,
-                        maxHeight: CELL_HEIGHT * 5 + PADDING * 2,
-                        borderRadius: 6, backgroundColor: '#000000ee',
-                        // overflow: 'hidden' ,
-                        padding: PADDING,
-                        ...reLayout()
-                    }}
-                >
-
-                    <View style={{
-                        width: ARROW_HEIGHT, height: ARROW_HEIGHT,
-                        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('target onLayout', e.nativeEvent.layout)
-                        let _sc: LayoutRectangle = e.nativeEvent.layout
-                        sc.current = _sc
-                    }}
-                    // style={{ backgroundColor: "red" }}
-                    >
-                        {props.data?.map((i, idx) => {
-                            return (
-                                <TouchableOpacity
-                                    activeOpacity={.7}
-                                    key={`sg-memnu-${idx}`}
-                                    style={{
-                                        height: CELL_HEIGHT, 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}
-        />
-    )
-}

package/lib/MenuView/index.ts

@@ -1,31 +0,0 @@
-/*
- * @Author: shiguo
- * @Date: 2022-07-14 18:09:02
- * @LastEditors: shiguo
- * @LastEditTime: 2023-01-03 17:30:04
- * @FilePath: /@aks-dev/easyui/lib/MenuView/index.ts
- */
-
-import React from "react";
-import { ImageSourcePropType, StyleProp, ViewStyle, TouchableOpacityProps } from 'react-native';
-
-
-
-export type MenuItem = {
-    text: string;
-    icon?: ImageSourcePropType;
-    extra?: any
-}
-
-export type MenuProps = {
-    defaultAlignVertical?: 'bottom' | 'top';
-    defaultAlignHorizontal?: 'left' | 'right';
-    style?: StyleProp<ViewStyle> | undefined;
-    data?: MenuItem[];
-    onItemClick?: (index: number, extra?: any) => void;
-    onContainerClick?:Function;
-    activeOpacity?:number;
-} & Readonly<{ children?: React.ReactNode | undefined }> & TouchableOpacityProps
-
-
-export declare const MenuView: React.FC<MenuProps>;

package/lib/Modal/index.ts

@@ -1,10 +0,0 @@
-/*
-* @Author: shiguo
-* @Date: 2022-04-22 14:29:32
- * @LastEditors: shiguo
- * @LastEditTime: 2022-04-26 14:34:45
- * @FilePath: /@aks/easy/lib/Modal/index.ts
-*/
-
-
-export { default as Modal, ModalProps } from 'react-native-modal'

package/lib/MutiPictureView/MutiPictureView.tsx

@@ -1,259 +0,0 @@
-/*
- * @Author: OBKoro1
- * @Date: 2022-04-24 17:38:27
- * @LastEditors: shiguo
- * @LastEditTime: 2022-11-14 11:33:33
- * @FilePath: /@aks-dev/easyui/lib/MutiPictureView/MutiPictureView.tsx
- */
-
-import * as React from 'react'
-import { Image, View, StyleSheet, Keyboard, ImageSourcePropType, TouchableOpacity, MeasureOnSuccessCallback, Text } from 'react-native'
-import { px2dp } from '../../screen/px2dp'
-import { px2sp } from '../../screen/px2sp'
-
-import SYImagePicker from "@aks-dev/react-native-syan-image-picker";
-
-
-import type { MutiPictureViewProps } from '.'
-
-let icon_add_image = require('./icon_add_image.png')
-let icon_del_image = require('./icon_del_image.png')
-
-const MutiPictureView: React.FC<MutiPictureViewProps> = (props) => {
-    const {
-        bind,
-        maxCount = 6,
-        type = 'showImagePicker',
-        addIcon,
-        addIconStyle,
-        addIconContainerStyle,//borderWidth: 1, borderStyle: 'dashed', borderColor: assets.color_A3A9CC  虚线框
-        itemContainerStyle,
-        emptyPlaceHolderStyle,
-        delIcon,
-        delIconStyle,
-        spacingHorizontal = px2dp(15),
-        spacingInner = px2dp(8),
-        editable = true,
-        showEmptyPlaceHolder = false
-    } = props
-    const { viewModel, setViewModel } = bind
-    React.useEffect(() => {
-
-
-    }, [])
-
-    const [sideLength, setSideLength] = React.useState<number>(0)
-
-
-
-    const addPhoto = () => {
-        let images: any[] = viewModel.photos || []
-        if (!images) {
-            throw new Error("viewModel没有定义photos字段")
-        }
-
-        if (type == 'showImagePicker') {
-            SYImagePicker.showImagePicker({ imageCount: maxCount - (viewModel.photos?.length || 0), isCrop: false, isRecordSelected: false, quality: 20 }, (err, photos) => {
-                if (!err) {
-                    let imgs = photos.map((it) => { return { uri: it.uri } })
-                    images = images.concat(imgs)
-                    setViewModel({ photos: images })
-                }
-            })
-        }
-
-        if (type == 'openCamera') {
-            SYImagePicker.openCamera({ imageCount: maxCount - (viewModel.photos?.length || 0), isCrop: false, isRecordSelected: false, quality: 20 }, (err, photos) => {
-                if (!err) {
-                    let imgs = photos.map((it) => { return { uri: it.uri } })
-                    images = images.concat(imgs)
-                    setViewModel({ photos: images })
-                } else {
-                    console.log('打开相机失败')
-                }
-            })
-        }
-
-
-
-    }
-
-    const deletePhoto = (index: number) => {
-        Keyboard.dismiss()
-        let photos = [...viewModel.photos || []]
-        photos.splice(index, 1)
-        setViewModel({ photos: photos })
-    }
-
-    const showPhoto = (index: number) => {
-        Keyboard.dismiss()
-        let imgs: any[] = (props.value || viewModel.photos)?.filter((it) => { return (typeof it === 'string' && it.indexOf('http') >= 0) || typeof it == 'object' }) || []
-        let images: any[] = []
-        // console.log('viewModel', viewModel, imgs)
-        imgs.forEach(it => {
-            if (typeof it === 'string') {
-                images.push({ uri: it })
-            } else {
-                images.push(it)
-            }
-        })
-        setViewModel({
-            imageViewer: {
-                imageUrls: images.map((it) => {
-                    return it.uri
-                }),
-                index: index,
-                visible: true,
-            }
-        })
-    }
-
-
-
-
-
-
-    const ItemView: React.FC<{ source: ImageSourcePropType, index: number }> = ({ source, index }) => {
-
-        return (
-            <TouchableOpacity style={[styles.item_container, itemContainerStyle, {
-                marginTop: index < 3 ? 0 : spacingInner,
-                marginLeft: index % 3 == 0 ? spacingHorizontal : spacingInner,
-                width: sideLength,
-                height: sideLength,
-            }]} activeOpacity={0.8} onPress={() => showPhoto(index)}>
-                <Image source={source} style={{ width: '100%', height: '100%' }} resizeMode='cover' />
-                {
-                    editable && !props.value &&
-                    <TouchableOpacity onPress={() => deletePhoto(index)} style={[styles.del_img_container, delIconStyle]}>
-                        <Image source={delIcon ? delIcon : icon_del_image} resizeMode='contain' style={{ width: '100%', height: '100%' }} />
-                    </TouchableOpacity>
-                }
-            </TouchableOpacity>
-        )
-
-
-    }
-
-
-
-    const containerRef = React.useRef<{ measure: (callback: MeasureOnSuccessCallback) => void }>()
-
-    React.useEffect(() => {
-        containerRef.current?.measure((...args) => {
-            // console.log('measure', args[2])
-            if (args.length > 3) {
-                let _sideLength = +((args[2] - spacingHorizontal * 2 - spacingInner * 2) / 3).toFixed(1);
-                setSideLength(_sideLength - 0.1)
-            }
-
-        })
-    })
-
-
-
-    if (props.value && props.value?.length > 0) {
-        return (
-            <View style={[styles.container, props.style]} ref={containerRef as any}>
-                {props.value instanceof Array && props.value?.map((item, index) => {
-                    return <ItemView key={index} source={typeof item === 'string' ? { uri: item } : item} index={index} />
-                })}
-
-                {
-                    showEmptyPlaceHolder && maxCount - (props.value?.length || 0) - 1 > 0 &&
-                    Array.from({ length: maxCount - (props.value?.length || 0) - (editable ? 1 : 0) }, (_, k) =>
-                        <View key={`sg-showEmptyPlaceHolder-${k}`} style={[styles.empty_place_container, emptyPlaceHolderStyle, itemContainerStyle, {
-                            marginTop: k + (editable ? 1 : 0) + (props.value?.length || 0) > 2 ? spacingInner : 0,
-                            marginLeft: (k + (editable ? 1 : 0) + (props.value?.length || 0)) % 3 == 0 ? spacingHorizontal : spacingInner,
-                            width: sideLength,
-                            height: sideLength,
-                        }]} />
-                    )
-                }
-            </View >
-        )
-    }
-
-    return (
-        <View style={[styles.container, props.style]} ref={containerRef as any}>
-            {viewModel?.photos instanceof Array && viewModel.photos.map((item, index) => {
-                return <ItemView key={index} source={typeof item === 'string' ? { uri: item } : item} index={index} />
-            })}
-
-            {
-                !(viewModel?.photos?.length == maxCount) && editable && (
-                    <TouchableOpacity style={[styles.item_container, itemContainerStyle, {
-                        marginTop: (viewModel?.photos?.length || 0) >= 3 ? spacingInner : 0,
-                        marginLeft: (viewModel?.photos?.length || 0) % 3 == 0 ? spacingHorizontal : spacingInner,
-                        width: sideLength,
-                        height: sideLength,
-                    }, addIconContainerStyle]} activeOpacity={0.8} onPress={() => addPhoto()}>
-                        <Image source={addIcon ? addIcon : icon_add_image} style={[{ width: '25%', height: '25%' }, addIconStyle]} resizeMode='contain' />
-                        {props.addText && <Text style={[{ fontSize: px2sp(12), color: 'lightgrey', marginTop: px2dp(2) }, props.addTextStyle]}>{props.addText}</Text>}
-                    </TouchableOpacity>
-
-                )
-            }
-            {
-                showEmptyPlaceHolder && maxCount - (viewModel.photos?.length || 0) - 1 > 0 &&
-                Array.from({ length: maxCount - (viewModel.photos?.length || 0) - (editable ? 1 : 0) }, (_, k) =>
-                    <View key={`sg-showEmptyPlaceHolder-${k}`} style={[styles.empty_place_container, emptyPlaceHolderStyle, itemContainerStyle, {
-                        marginTop: k + (editable ? 1 : 0) + (viewModel.photos?.length || 0) > 2 ? spacingInner : 0,
-                        marginLeft: (k + (editable ? 1 : 0) + (viewModel.photos?.length || 0)) % 3 == 0 ? spacingHorizontal : spacingInner,
-                        width: sideLength,
-                        height: sideLength,
-                    }]} />
-                )
-            }
-        </View >
-
-    )
-}
-
-
-
-
-
-
-
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        minHeight: 1,
-        backgroundColor: 'transparent',
-        display: 'flex',
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        // borderRadius: px2dp(10),
-    },
-    item_container: {
-        overflow: 'hidden',
-        borderRadius: px2dp(10),
-        display: 'flex',
-        position: 'relative',
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: '#ededed',
-    },
-
-    del_img_container: {
-        position: 'absolute',
-        right: 2,
-        top: 2,
-        width: px2dp(24),
-        height: px2dp(24)
-    },
-    empty_place_container: {
-        borderRadius: px2dp(10),
-        backgroundColor: '#ededed',
-        borderColor: '#cccccc',
-        borderWidth: .75,
-    }
-})
-
-
-export default React.memo(MutiPictureView, (prevProps, nextProps) => false);
-
-
-

package/lib/PictureViewer/PictureViewer.tsx

@@ -1,80 +0,0 @@
-/*
- * @Author: shiguo
- * @Date: 2022-04-24 15:58:39
- * @LastEditors: shiguo
- * @LastEditTime: 2022-04-26 12:38:13
- * @FilePath: /@aks/easy/lib/PictureViewer/PictureViewer.tsx
- */
-
-import * as React from 'react'
-import { Modal, StatusBar, Platform } from 'react-native'
-import ImageViewer from "react-native-image-zoom-viewer";
-
-import type { BindProps } from './index'
-
-export const PictureViewer: React.FC<{ bind: BindProps }> = ({ bind }) => {
-
-    const { viewModel, setViewModel } = bind
-    const visible = viewModel.imageViewer.visible
-    const imgs = viewModel.imageViewer.imageUrls?.map(item => ({ url: item }))
-    const index = viewModel.imageViewer.index
-
-    React.useEffect(() => {
-        if (Platform.OS == 'android') {
-            if (visible) {
-                StatusBar.setBackgroundColor('black')
-                StatusBar.setBarStyle('light-content')
-            } else {
-                StatusBar.setBackgroundColor('transparent')
-                StatusBar.setBarStyle('dark-content')
-            }
-        }
-    }, [visible])
-
-
-
-    return (
-        <Modal
-            presentationStyle='overFullScreen'
-            visible={visible}
-            transparent={false}
-            onRequestClose={() => {
-                /**
-                 * 【官方文档】
-                 * onRequestClose回调会在用户按下 Android 设备上的后退按键或是 Apple TV 上的菜单键时触发。
-                 * 请务必注意本属性在 Android 平台上为必填，且会在 modal 处于开启状态时阻止BackHandler事件。
-                 */
-                setViewModel({
-                    imageViewer: {
-                        ...viewModel.imageViewer,
-                        visible: false
-                    }
-                })
-            }}
-            style={{ margin: 0, backgroundColor: 'red' }}
-        >
-            <ImageViewer
-                imageUrls={imgs}
-                index={index}
-                onSwipeDown={() => {
-                    // console.log('onSwipeDown');
-                }}
-                saveToLocalByLongPress={false}
-                // onMove={data => console.log(data)}
-                useNativeDriver={true}
-                enableSwipeDown={true}
-                onClick={() => {
-                    setViewModel({
-                        imageViewer: {
-                            ...viewModel.imageViewer,
-                            visible: false
-                        }
-                    })
-                }}
-            />
-        </Modal>
-    )
-}
-
-
-

package/lib/PictureViewer/index.ts

@@ -1,26 +0,0 @@
-/*
- * @Author: shiguo
- * @Date: 2022-04-24 17:10:21
- * @LastEditors: shiguo
- * @LastEditTime: 2022-04-26 11:35:20
- * @FilePath: /@aks/easy/lib/PictureViewer/index.ts
- */
-
-
-type ViewModelProps = {
-    imageViewer: {
-        imageUrls: any[],
-        index: number,
-        visible: boolean
-    }
-}
-
-
-export type BindProps = {
-    viewModel: ViewModelProps,
-    setViewModel: (intent: Partial<ViewModelProps>) => void
-}
-
-
-
-export declare const PictureViewer: React.FC<{ bind: BindProps }>;