@aks-dev/easyui 1.0.10

package/lib/MutiPictureView/MutiPictureView.tsx

@@ -0,0 +1,213 @@
+/*
+ * @Author: OBKoro1
+ * @Date: 2022-04-24 17:38:27
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-05-11 20:01:05
+ * @FilePath: /@aks/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 "@shiguo2022/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  虚线框
+        delIcon,
+        delIconStyle,
+        spacingHorizontal = px2dp(15),
+        spacingInner = px2dp(8),
+        editable = true
+    } = 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[] = 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, {
+                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 &&
+                    <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(args)
+            let _sideLength = (args[2] - spacingHorizontal * 2 - spacingInner * 2) / 3
+            setSideLength(_sideLength)
+        })
+
+    }, [])
+
+    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, {
+                        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>
+
+                )
+            }
+        </View >
+
+    )
+}
+
+
+
+
+
+
+
+
+const styles = StyleSheet.create({
+    container: {
+        flexGrow: 1,
+        minHeight: 1,
+        // backgroundColor: 'red',
+        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)
+    },
+})
+
+
+export default React.memo(MutiPictureView, (prevProps, nextProps) => false);
+
+
+

package/lib/MutiPictureView/index.ts

@@ -0,0 +1,55 @@
+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
+ */
+import { StyleProp, ViewStyle, ImageStyle, ImageSourcePropType } from 'react-native'
+
+type ViewModelProps = {
+    photos?: any[];
+    /**@deprecated  disabled 图片点击状态，已弃用*/
+    disabled?: boolean;
+    imageViewer: {
+        imageUrls: any[],
+        index: number,
+        visible: boolean
+    }
+}
+
+
+type BindProps = {
+    viewModel: ViewModelProps;
+    setViewModel: (intent: Partial<ViewModelProps>) => void
+}
+
+
+
+export declare type MutiPictureViewProps = {
+    /**@deprecated  title 标题 ，已弃用*/
+    title?: string;
+    bind: BindProps;
+    maxCount?: number;
+    type?: 'showImagePicker' | 'openCamera';
+    style?:StyleProp<ViewStyle>;
+    addIcon?: ImageSourcePropType;
+    addIconStyle?: StyleProp<ImageStyle>;
+    addText?:string;
+    addTextStyle?:StyleProp<TextStyle>;
+    addIconContainerStyle?:StyleProp<ViewStyle>;
+    delIcon?: ImageSourcePropType;
+    delIconStyle?: StyleProp<ImageStyle>;
+    /**外边距 */
+    spacingHorizontal?: number;
+    /**内边距 */
+    spacingInner?: number;
+    /**仅仅看看，不增减图片 */
+    editable?:boolean;
+}
+
+
+export declare const MutiPictureView:React.FC<MutiPictureViewProps>;
+
+

package/lib/PictureViewer/PictureViewer.tsx

@@ -0,0 +1,80 @@
+/*
+ * @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

@@ -0,0 +1,26 @@
+/*
+ * @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 }>;

package/lib/RefreshList/RefreshList.tsx

@@ -0,0 +1,222 @@
+import * as React from 'react';
+import { View, Text, Animated, StyleSheet, ActivityIndicator, TouchableOpacity } from 'react-native';
+import { SwipeListView, RowMap } from 'react-native-swipe-list-view'
+
+
+
+import {
+    FlatListRefreshProps,
+    SectionListRefreshProps,
+    SwipeListViewRefreshProps,
+    RefreshListProps,
+    RefreshState,
+    RefreshText
+} from './index'
+
+
+
+
+
+export default React.forwardRef((props: RefreshListProps, ref: React.Ref<any>) => {
+    const {
+        mode = 'FlatList',
+        refreshState,
+        onHeaderRefresh,
+        onFooterRefresh,
+        reload,
+        ...rest
+    } = props
+
+
+    const seed = React.useRef(Math.random()).current
+
+
+    let onRefresh = () => {
+        if (refreshState == RefreshState.HeaderRefreshing) return
+        if (refreshState == RefreshState.FooterRefreshing) return
+        onHeaderRefresh && onHeaderRefresh(RefreshState.HeaderRefreshing)
+    }
+
+    let onEndReached = (info: unknown) => {
+
+        if (mode == 'FlatList') {
+            props = props as FlatListRefreshProps;
+            if (!(props.data instanceof Array)) {
+                throw new Error('[sg:FlatList] data is not Array')
+            }
+            if (props.data.length == 0) return
+        }
+
+        if (mode == 'SectionList') {
+            props = props as SectionListRefreshProps;
+            if (!(props.sections instanceof Array)) {
+                throw new Error('[sg:SectionList] sections is not Array')
+            }
+            if (props.sections.length == 0) return
+        }
+
+        if (refreshState != RefreshState.Idle) return
+        onFooterRefresh && onFooterRefresh(RefreshState.FooterRefreshing)
+    }
+
+
+
+    switch (mode) {
+        case 'FlatList':
+            props = props as FlatListRefreshProps;
+            return (
+                <Animated.FlatList
+                    {...rest as FlatListRefreshProps}
+                    ref={ref}
+                    refreshing={refreshState == RefreshState.HeaderRefreshing}
+                    keyExtractor={(_, index) => { return `sg-index-FlatList-${seed}-${index}` }}
+                    contentContainerStyle={props.data?.length ? {} : { height: "100%" }}
+                    onRefresh={onRefresh}
+                    onEndReachedThreshold={0.1}
+                    onEndReached={onEndReached}
+                    showsVerticalScrollIndicator={false}
+                    ListHeaderComponent={(_) => <ListHeaderComponent {...props} />}
+                    ListFooterComponent={(_) => <ListFooterComponent {...props} />}
+
+                />
+            )
+
+        case 'SectionList':
+            props = props as SectionListRefreshProps;
+            const { ItemSeparatorComponent = (_) => (
+                <View style={{ height: 1 }} />
+            ) } = props
+            return (
+                <Animated.SectionList
+                    {...rest as SectionListRefreshProps}
+                    ref={ref}
+                    refreshing={refreshState == RefreshState.HeaderRefreshing}
+                    onRefresh={onRefresh}
+                    keyExtractor={(_, index) => { return `sg-index-SectionList-${seed}-${index}` }}
+                    contentContainerStyle={props.sections?.length > 0 ? {} : { height: "100%" }}
+                    ItemSeparatorComponent={ItemSeparatorComponent}
+                    onEndReachedThreshold={0.1}
+                    onEndReached={onEndReached}
+                    showsVerticalScrollIndicator={false}
+                    ListHeaderComponent={(_) => <ListHeaderComponent {...props} />}
+                    ListFooterComponent={(_) => <ListFooterComponent {...props} />}
+                    renderSectionHeader={props.renderSectionHeader}
+                />
+            )
+
+        case 'SwipeList':
+            const { renderHiddenItem = (data, rowMap) => (
+                <View style={{ backgroundColor: 'red', height: '100%', alignItems: 'flex-end', justifyContent: "center" }}>
+                    <Text>Right </Text>
+                </View>
+            ) } = props as SwipeListViewRefreshProps
+            return (
+                <SwipeListView
+
+                    {...rest as SwipeListViewRefreshProps}
+                    rightOpenValue={-100}
+                    leftOpenValue={0}
+                    ref={ref}
+                    disableLeftSwipe={false}
+                    disableRightSwipe={true}
+                    onRefresh={onRefresh}
+                    refreshing={refreshState == RefreshState.HeaderRefreshing}
+                    ItemSeparatorComponent={ItemSeparatorComponent}
+                    onEndReachedThreshold={0.1}
+                    onEndReached={onEndReached}
+                    showsVerticalScrollIndicator={false}
+                    ListHeaderComponent={(args) => <ListHeaderComponent {...props} />}
+                    ListFooterComponent={(args) => <ListFooterComponent {...props} />}
+                    renderHiddenItem={renderHiddenItem}
+                />
+
+            )
+    }
+
+})
+
+
+
+
+
+
+
+const ListFooterComponent = React.memo((props: RefreshListProps) => {
+    const {
+        refreshState,
+        reload,
+    } = props
+
+    switch (refreshState) {
+        case RefreshState.Idle:
+        case RefreshState.FooterRefreshing:
+            return (
+                <View style={{ ...styles.container, flexDirection: 'row' }}>
+                    <ActivityIndicator color={'gray'} />
+                    <Text style={{ ...styles.text, marginLeft: 5 }}>{RefreshText.FooterRefreshing}</Text>
+                </View>
+            )
+        case RefreshState.NoMoreData:
+            return (
+                <View style={styles.container}>
+                    <Text style={{ ...styles.text, color: '#999999' }}>{RefreshText.NoMoreData}</Text>
+                </View>
+            )
+        case RefreshState.Failure:
+            return (
+                <View style={styles.container}>
+                    <TouchableOpacity onPress={() => reload && reload()}>
+                        <Text style={styles.text}>{RefreshText.Failure}</Text>
+                    </TouchableOpacity>
+                </View>
+            )
+        case RefreshState.EmptyData:
+            if (props.renderListEmptyComponent) return props.renderListEmptyComponent()
+            return (
+                <View style={{ width: '100%', height: '100%' }}>
+                    <TouchableOpacity onPress={() => {
+                        reload && reload()
+                    }}>
+                        <Text style={styles.text}>{RefreshText.EmptyData}</Text>
+                    </TouchableOpacity>
+                </View>
+            )
+        default:
+            return <View />
+    }
+})
+
+
+const ListHeaderComponent = React.memo((props: RefreshListProps) => {
+    const { refreshState } = props
+    switch (refreshState) {
+        case RefreshState.HeaderRefreshing:
+            return (
+                <View style={{ ...styles.container, }}>
+                    <Text style={{ ...styles.text, }}>{RefreshText.HeaderRefreshing}</Text>
+                </View>
+            )
+        default:
+            return <View />
+    }
+})
+
+
+
+
+const styles = StyleSheet.create({
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: "center",
+        alignItems: 'center',
+        height: 44,
+        // backgroundColor:'cyan'
+    },
+    text: {
+        color: 'gray',
+        lineHeight: 16,
+        fontSize: 13,
+    },
+})
+

package/lib/RefreshList/demo.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { View, TouchableOpacity, Text } from 'react-native'
+
+import { RefreshList, RefreshState } from './index'
+
+
+
+const App = () => {
+
+    const [refreshState, setRefreshState] = React.useState(RefreshState.Idle)
+
+    
+    return (
+        <RefreshList
+                data={['a', 'b']}
+                renderItem={({ item, index }) => {
+
+                    return <View>{item}</View>
+                }}
+
+                refreshState={refreshState}
+                onHeaderRefresh={() => {
+
+                }}
+                onFooterRefresh={() => {
+
+                }}
+            />
+    )
+}

package/lib/RefreshList/demo1.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react'
+import { View, TouchableOpacity, Text } from 'react-native'
+
+import { RefreshList, RefreshState } from './index'
+
+
+
+const App = () => {
+
+    const [refreshState, setRefreshState] = React.useState(RefreshState.Idle)
+
+    const listRef = React.useRef<any>()
+
+    return (
+
+        <RefreshList
+            mode='SectionList'
+            sections={
+                [
+                    {
+                        title: "Main dishes",
+                        data: ["Pizza", "Burger", "Risotto"]
+                    },
+                    {
+                        title: "Sides",
+                        data: ["French Fries", "Onion Rings", "Fried Shrimps"]
+                    },
+                    {
+                        title: "Drinks",
+                        data: ["Water", "Coke", "Beer"]
+                    },
+                    {
+                        title: "Desserts",
+                        data: ["Cheese Cake", "Ice Cream"]
+                    }
+                ]
+            }
+            renderItem={({ item, section }) => {
+
+                return <View>{item}</View>
+            }}
+
+            refreshState={refreshState}
+            onHeaderRefresh={() => {
+
+            }}
+            onFooterRefresh={() => {
+
+            }}
+
+            renderSectionHeader={({ section: { letter } }) => (
+                <View style={{ backgroundColor: 'red' }}>
+
+                </View>
+            )}
+        />
+
+
+    )
+}