@aks-dev/easyui 1.0.10

package/lib/Badge/Badge.tsx

@@ -0,0 +1,39 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-04-21 14:40:29
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-04-26 14:05:59
+ * @FilePath: /@aks/easy/lib/Badge/Badge.tsx
+ */
+import React from 'react'
+import { View, Text, } from 'react-native'
+import {px2dp} from '../../screen/px2dp'
+import {px2sp} from '../../screen/px2sp'
+
+
+import type { BadgeProps } from '.'
+
+
+
+export const Badge: React.FC<BadgeProps> = (props) => {
+    return (
+
+        <View style={
+            [
+                {
+                    flexGrow: 0, flexShrink: 1, zIndex: 1,
+                    paddingHorizontal: px2dp(4),
+                    height: px2dp(16), minWidth: px2dp(16), borderRadius: px2dp(8),
+                    justifyContent: 'center', alignItems: 'center', backgroundColor: 'red'
+                },
+                props.style
+            ]
+        } >
+
+
+            <Text style={{ fontSize: px2sp(12), color: 'white', lineHeight: px2dp(16), textAlign: 'center' }}> {props.count > 99 ? '+99' : props.count} </Text>
+
+        </View>
+    )
+}
+

package/lib/Badge/index.ts

@@ -0,0 +1,21 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-04-21 14:43:14
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-04-26 10:49:39
+ * @FilePath: /@aks/easy/lib/Badge/index.ts
+ */
+import *  as React from 'react'
+import { StyleProp, ViewStyle } from 'react-native'
+
+
+
+
+
+export declare type BadgeProps = {
+    count: number;
+    style?: StyleProp<ViewStyle>
+}
+
+export declare const Badge : React.FC<BadgeProps>
+

package/lib/Easy-Hud/AlertView/AlertView.tsx

@@ -0,0 +1,233 @@
+import * as React from 'react'
+import { View, Text, StyleSheet, Platform, Modal, StatusBar, TouchableOpacity, Animated, Easing } from 'react-native'
+
+
+import { px2dp, deviceWidth } from '../../../screen/px2dp'
+import { px2sp } from '../../../screen/px2sp'
+
+import { Options, AlertViewCurrent } from '.'
+
+
+
+type State = {
+    visible: boolean;
+
+} & Omit<Options, 'cancel' | 'confirm'>
+
+
+
+
+
+export default React.forwardRef<AlertViewCurrent, {}>((_, ref) => {
+
+
+    const defaultState: Partial<State> = {
+        visible: false,
+        cancelText: '取消',
+        confirmText: '确定',
+    }
+    const [state, setState] = React.useState<Partial<State>>(defaultState)
+    const cancelCallbackRef = React.useRef<Function>();
+    const confirmCallbackRef = React.useRef<Function>();
+
+
+    
+    React.useImperativeHandle<unknown, AlertViewCurrent>(ref, () => ({
+        show: async (options: Partial<Options>) => {
+
+            setState(Object.assign({}, defaultState, { visible: true }, options))
+            cancelCallbackRef.current = options.cancel;
+            confirmCallbackRef.current = options.confirm;
+            // await sleep(50)
+            startAnimate(1)
+        },
+        hide
+    }), [])
+
+
+    const hide = async () => {
+        startAnimate(0.3)
+        // await sleep(50)
+        setState(defaultState)
+
+    }
+
+    let scale_anim = React.useRef(new Animated.Value(0.3)).current
+    const startAnimate = (x: number) => {
+        Animated.timing(scale_anim, {
+            toValue: x,
+            useNativeDriver: true,
+            duration: 150,
+            easing: Easing.ease
+        }).start()
+    }
+    React.useEffect(() => {
+        if (Platform.OS == 'android') {
+            if (state.visible) {
+                StatusBar.setBackgroundColor('black')
+                StatusBar.setBarStyle('light-content')
+            } else {
+                StatusBar.setBackgroundColor('transparent')
+                StatusBar.setBarStyle('dark-content')
+            }
+        }
+
+    }, [state.visible])
+    return (
+        <Modal
+            visible={state.visible}
+            transparent animationType="fade"
+            onRequestClose={() => {
+                // hide()
+            }}
+        // style={{
+        //     margin: 0,
+        // }}
+        >
+            <View style={styles.container}>
+                <Animated.View style={[styles.wrapper, state.wrapperStyle, { transform: [{ scale: scale_anim }] }]}>
+                    {state.title && <Text style={styles.titleText}>{state.title}</Text>}
+                    {(() => {
+                        if (typeof state.content == 'string') return <Text style={styles.contentText}>{state.content}</Text>
+                        if (React.isValidElement(state.content)) return state.content;
+                        return <View />
+                    })()}
+
+                    {
+                        (state.cancelText || state.confirmText) &&
+                        <View style={styles.action}>
+                            {state.cancelText &&
+                                <TouchableOpacity
+                                    style={[styles.cancel, { marginRight: state.confirmText ? px2dp(15) : 0 }, state.cancelContainerStyle]}
+                                    activeOpacity={0.8}
+                                    onPress={() => {
+                                        hide()
+                                        cancelCallbackRef.current && cancelCallbackRef.current()
+                                        cancelCallbackRef.current = undefined;
+
+                                    }}>
+                                    <Text style={[styles.cancelText, state.cancelTextStyle]}>{state.cancelText}</Text>
+                                </TouchableOpacity>
+                            }
+
+                            {state.confirmText &&
+                                <TouchableOpacity
+                                    style={[styles.confirm, { marginLeft: state.cancelText ? px2dp(15) : 0 }, state.confirmContainerStyle]}
+                                    activeOpacity={0.8}
+                                    onPress={() => {
+                                        hide()
+                                        confirmCallbackRef.current && confirmCallbackRef.current()
+                                        confirmCallbackRef.current = undefined;
+                                    }}>
+                                    <Text style={[styles.confirmText, state.confirmTextStyle]}>{state.confirmText}</Text>
+                                </TouchableOpacity>
+                            }
+                        </View>
+                    }
+
+                </Animated.View>
+
+            </View>
+        </Modal>
+    )
+})
+
+
+
+export const alertViewRef = React.createRef<AlertViewCurrent>();
+
+
+
+export const ShowAlertModal = (props: Partial<Options>) => {
+    alertViewRef.current?.show(props)
+}
+
+
+
+// const sleep = (msec?: number) => {
+//     return new Promise(resolve => {
+//         setTimeout(resolve, msec || 350);
+//     });
+// }
+
+
+
+const styles = StyleSheet.create({
+    container: {
+        display: 'flex',
+        flexGrow: 1,
+        backgroundColor: '#00000088',
+        justifyContent: 'center',
+        alignItems: 'center',
+
+    },
+
+    wrapper: {
+        flexGrow: 0,
+        flexShrink: 0,
+        // minWidth: '70%',
+        minWidth: deviceWidth - px2dp(60),
+        backgroundColor: 'white',
+        overflow: 'hidden',
+        borderRadius: px2dp(10),
+        display: 'flex',
+        padding: px2dp(15),
+    },
+    titleText: {
+        maxWidth: deviceWidth - px2dp(90),
+        fontSize: px2sp(18),
+        marginBottom: px2dp(20),
+        // backgroundColor: 'red',
+        textAlign: 'center',
+        fontWeight: 'bold',
+        color: '#1A1A1A'
+    },
+    contentText: {
+        maxWidth: deviceWidth - px2dp(90),
+        marginBottom: px2dp(20),
+        minHeight: px2dp(40),
+        flexGrow: 0,
+        flexShrink: 1,
+        width: undefined,
+        fontSize: px2sp(15),
+        // backgroundColor: 'red',
+        color: '#1A1A1A',
+        textAlign: 'center'
+    },
+    action: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        // backgroundColor:"red"
+    },
+    cancel: {
+        width: '40%',
+        height: px2dp(44),
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: px2dp(10),
+        borderWidth: px2dp(1),
+        borderColor: '#A3A9CC'
+    },
+
+    confirm: {
+        width: '40%',
+        height: px2dp(44),
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#2763FF',
+        borderRadius: px2dp(10)
+    },
+    cancelText: {
+        fontSize: px2sp(15),
+        color: '#A3A9CC',
+
+    },
+    confirmText: {
+        fontSize: px2sp(15),
+        color: 'white'
+    },
+})

package/lib/Easy-Hud/AlertView/index.ts

@@ -0,0 +1,41 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-04-22 17:30:32
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-04-26 14:11:39
+ * @FilePath: /@aks/easy/lib/Easy-Hud/AlertView/index.ts
+ */
+import * as React from 'react'
+
+
+import { StyleProp, ViewStyle, TextStyle } from 'react-native'
+
+
+export declare type Options = {
+    title: string;
+    content: string | React.ReactElement;
+    wrapperStyle: StyleProp<ViewStyle>;
+    cancelText: string;
+    cancelContainerStyle: StyleProp<ViewStyle>;
+    cancelTextStyle: StyleProp<TextStyle>;
+    cancel: () => void;
+    confirmText: string;
+    confirmContainerStyle: StyleProp<ViewStyle>;
+    confirmTextStyle: StyleProp<TextStyle>;
+    confirm: () => void;
+}
+
+
+export declare const ShowAlertModal: (props: Partial<Options>) => void;
+
+
+
+export declare type AlertViewCurrent = {
+    show: (options: Partial<Options>) => void;
+    hide: () => void;
+}
+
+
+export declare const AlertView: React.ForwardRefExoticComponent<React.PropsWithoutRef<{}> & React.RefAttributes<AlertViewCurrent>>;
+
+export declare const alertViewRef: React.RefObject<AlertViewCurrent>

package/lib/Easy-Hud/EasyHud.tsx

@@ -0,0 +1,48 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-04-24 14:10:04
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-05-10 09:15:52
+ * @FilePath: /@aks/easyui/lib/Easy-Hud/EasyHud.tsx
+ */
+import * as React from 'react'
+// import { StyleSheet } from 'react-native'
+import {
+    alertViewRef, default as AlertView, ShowAlertModal
+} from './AlertView/AlertView'
+import {
+    HideLoading, Loading, loadingRef, ShowLoading
+} from './Loading/Loading'
+import {
+    ShowToast, Toast, toastRef
+} from './Toast/Toast'
+
+
+
+
+
+
+
+
+
+export const EasyHud: React.FC<{}> = () => React.cloneElement(
+    <></>,
+    {
+        // ...StyleSheet.absoluteFillObject,
+        // display: 'flex',
+    },
+    [
+        <Loading key="hud-0" ref={loadingRef} />,
+        <Toast key="hud-1" ref={toastRef} />,
+        <AlertView key="hud-2" ref={alertViewRef} />
+
+    ]
+)
+
+
+export {
+    ShowAlertModal,
+    ShowToast,
+    ShowLoading,
+    HideLoading
+}

package/lib/Easy-Hud/Loading/Loading.tsx

@@ -0,0 +1,80 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-04-24 14:27:02
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-05-07 17:30:04
+ * @FilePath: /@aks/easyui/lib/Easy-Hud/Loading/Loading.tsx
+ */
+import React, { useImperativeHandle, useState } from 'react';
+import { View, ActivityIndicator, StyleSheet, Text, Dimensions,TouchableOpacity } from 'react-native';
+
+import type { LoadingCurrent } from '.'
+
+
+
+
+
+export const Loading = React.forwardRef<LoadingCurrent, {}>((_, ref) => {
+    const [show, setShow] = useState(false);
+    const [tipText, setTipText] = useState('加载中');
+
+
+    useImperativeHandle<unknown, LoadingCurrent>(ref, () => ({
+        ShowLoading: (content?: string) => {
+            setShow(true);
+            setTipText(content || '加载中')
+        },
+        HideLoading: () => {
+            setShow(false);
+        }
+    }), [show])
+
+    if (!show)
+        return null;
+
+    return (
+        <TouchableOpacity disabled style={styles.container}>
+            <View style={styles.warpper}>
+                <ActivityIndicator color="white" size='large' />
+                <Text numberOfLines={5} style={styles.title}>{tipText}
+                </Text>
+            </View>
+        </TouchableOpacity>
+    )
+})
+
+export const loadingRef = React.createRef<LoadingCurrent>();
+export const ShowLoading = (content?: string) => loadingRef.current?.ShowLoading(content)
+export const HideLoading = () => loadingRef.current?.HideLoading()
+
+
+
+const SCREEN_WIDTH = Dimensions.get('window').width;
+const styles = StyleSheet.create({
+    container: {
+        ...StyleSheet.absoluteFillObject,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        // backgroundColor:'red'
+    },
+
+    warpper: {
+        backgroundColor: '#00000088',
+        padding: 40,
+        paddingVertical: 20,
+        borderRadius: 10,
+        justifyContent: 'center',
+        alignItems: 'center',
+        minWidth: 90
+    },
+    title: {
+        marginTop: 5,
+        fontSize: 13,
+        lineHeight: 16,
+        color: 'white',
+        maxWidth: SCREEN_WIDTH * 0.5,
+
+    }
+
+})

package/lib/Easy-Hud/Loading/index.ts

@@ -0,0 +1,35 @@
+
+/*
+ * @Author: shiguo
+ * @Date: 2022-04-24 14:27:02
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-05-07 16:04:06
+ * @FilePath: /@aks/easyui/lib/Easy-Hud/Loading/index.ts
+ */
+import * as React from 'react'
+
+
+
+
+
+
+
+
+export declare type LoadingCurrent = {
+    ShowLoading: (content?: string) => void;
+    HideLoading: () => void;
+}
+
+
+
+
+export declare const ShowLoading: (content?: string) => void;
+
+
+export declare const HideLoading: () => void;
+
+
+export declare const loadingRef: React.RefObject<LoadingCurrent>;
+
+export declare const Loading: React.ForwardRefExoticComponent<React.PropsWithoutRef<{}> & React.RefAttributes<LoadingCurrent>>
+

package/lib/Easy-Hud/Toast/Toast.tsx

@@ -0,0 +1,86 @@
+/*
+ * @Author: shiguo
+ * @Date: 2021-04-27 10:38:04
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-04-26 14:11:13
+ * @FilePath: /@aks/easy/lib/Easy-Hud/Toast/Toast.tsx
+ */
+import React, { useImperativeHandle, useState, useRef } from 'react';
+import { View, StyleSheet, Text, Dimensions, Animated, Easing } from 'react-native';
+
+
+import type { ToastCurrent } from '.'
+
+const errorMsg = '(^_^)∠※ 送你一束小花'
+
+export const Toast = React.forwardRef<ToastCurrent, {}>((_, ref) => {
+    const [tipText, setTipText] = useState(errorMsg);
+    const fade = useRef(new Animated.Value(0)).current;
+
+    const fadeAnimation = Animated.sequence([
+        Animated.timing(fade, {
+            toValue: 1,
+            duration: 750,
+            useNativeDriver: true,
+            easing: Easing.linear,
+        }),
+        Animated.delay(3000),
+        Animated.timing(fade, {
+            toValue: 0,
+            duration: 750,
+            useNativeDriver: true,
+            easing: Easing.linear,
+        })
+    ])
+
+    useImperativeHandle<unknown, ToastCurrent>(ref, () => ({
+        ShowToast: (content: string) => {
+            setTipText(content || errorMsg)
+            fadeAnimation.reset()
+            fadeAnimation.start()
+        },
+    }))
+
+    return (
+        <Animated.View style={{ ...styles.toastContainer, opacity: fade }}>
+            <View style={styles.toastTipsContainer}>
+                <Text numberOfLines={5} style={{ ...styles.toastTitle, }}>{tipText} </Text>
+            </View>
+        </Animated.View>
+
+    )
+})
+
+export const toastRef = React.createRef<ToastCurrent>();
+
+export const ShowToast = (content: string) => toastRef.current?.ShowToast(content)
+
+
+
+const SCREEN_WIDTH = Dimensions.get('window').width;
+const styles = StyleSheet.create({
+    toastContainer: {
+        position: 'absolute',
+        bottom: 100,
+        width: '100%',
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+
+    toastTipsContainer: {
+        position: 'absolute',
+        backgroundColor: '#00000088',
+        padding: 10,
+        // paddingVertical: 4,
+        borderRadius: 2,
+        justifyContent: 'center',
+        alignItems: 'center',
+        minWidth: 120
+    },
+    toastTitle: {
+        fontSize: 13,
+        lineHeight: 20,
+        color: 'white',
+        maxWidth: SCREEN_WIDTH * 0.8
+    }
+})

package/lib/Easy-Hud/Toast/index.ts

@@ -0,0 +1,22 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-04-18 19:18:03
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-04-26 14:11:06
+ * @FilePath: /@aks/easy/lib/Easy-Hud/Toast/index.ts
+ */
+import * as React from 'react'
+
+
+
+
+export declare type ToastCurrent = {
+    ShowToast: (content: string) => void;
+}
+
+export declare const ShowToast: (content: string) => void;
+
+
+export declare const toastRef: React.RefObject<ToastCurrent>;
+
+export declare const Toast: React.ForwardRefExoticComponent<React.PropsWithoutRef<{}> & React.RefAttributes<ToastCurrent>>;

package/lib/Easy-Hud/index.ts

@@ -0,0 +1,18 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-04-24 14:14:42
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-04-26 14:14:40
+ * @FilePath: /@aks/easy/lib/Easy-Hud/index.ts
+ */
+
+
+import * as React from 'react'
+
+
+export * from './AlertView'
+export * from './Loading'
+export * from './Toast'
+
+
+export declare const EasyHud: React.FC<{}>