@aks-dev/easyui 1.0.79 → 1.0.80

package/lib/Hud/AlertBottomView/AlertBottomView.tsx

@@ -0,0 +1,227 @@
+import * as React from 'react'
+import { View, Text, StyleSheet, Platform, StatusBar, TouchableOpacity, } from 'react-native'
+import Modal from 'react-native-modal'
+
+import { px2dp, deviceWidth } from '../../../screen/px2dp'
+import { px2sp } from '../../../screen/px2sp'
+
+import { AlertBottomViewOptions, AlertBottomViewCurrent } from '.'
+
+
+
+type State = {
+    visible: boolean;
+
+} & Omit<AlertBottomViewOptions, 'cancel' | 'confirm'>
+
+
+
+
+
+export default React.forwardRef<AlertBottomViewCurrent, {}>((_, 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, AlertBottomViewCurrent>(ref, () => ({
+        show: async (options: Partial<AlertBottomViewOptions>) => {
+
+            setState(Object.assign({}, defaultState, { visible: true }, options))
+            cancelCallbackRef.current = options.cancel;
+            confirmCallbackRef.current = options.confirm;
+
+        },
+        hide
+    }), [])
+
+
+    const hide = async () => {
+        setState(defaultState)
+    }
+
+
+    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
+            hideModalContentWhileAnimating={true}//通过隐藏模态内容直到动画完成来增强性能
+            useNativeDriver={true}//定义动画是否应使用本机驱动程序
+            animationIn='slideInUp'
+            animationOut='slideOutDown'
+            onBackButtonPress={() => {
+                //按下Android后退按钮时调用
+                hide()
+            }}
+            onBackdropPress={() => {
+                //按下背景时调用
+                hide()
+            }}
+            isVisible={state.visible}
+            style={{ margin: 0 }}
+        >
+            <View style={styles.container}>
+                <View style={[styles.wrapper, state.wrapperStyle]}>
+                    {state.title && <Text style={styles.titleText}>{state.title}</Text>}
+                    <View style={[state.contentContainerStyle]}>
+                        {(() => {
+                            if (typeof state.content == 'string') return <Text style={styles.contentText}>{state.content}</Text>
+                            if (React.isValidElement(state.content)) return state.content;
+                            return <View />
+                        })()}
+                    </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>
+                    }
+
+                </View>
+
+            </View>
+        </Modal>
+    )
+})
+
+
+
+export const alertBottomViewRef = React.createRef<AlertBottomViewCurrent>();
+
+
+
+export const showAlertBottomModal = (props: Partial<AlertBottomViewOptions>) => {
+    alertBottomViewRef.current?.show(props)
+}
+
+
+
+// const sleep = (msec?: number) => {
+//     return new Promise(resolve => {
+//         setTimeout(resolve, msec || 350);
+//     });
+// }
+
+
+
+const styles = StyleSheet.create({
+    container: {
+        display: 'flex',
+        flexGrow: 1,
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+
+    },
+
+    wrapper: {
+        flexGrow: 0,
+        flexShrink: 0,
+        width: '100%',
+        backgroundColor: 'white',
+        overflow: 'hidden',
+        borderTopLeftRadius: px2dp(10),
+        borderTopRightRadius: px2dp(10),
+        display: 'flex',
+        padding: px2dp(15),
+    },
+    titleText: {
+        maxWidth: deviceWidth - px2dp(30),
+        fontSize: px2sp(18),
+        marginBottom: px2dp(20),
+        // backgroundColor: 'red',
+        textAlign: 'center',
+        fontWeight: 'bold',
+        color: '#1A1A1A'
+    },
+    contentText: {
+        maxWidth: deviceWidth - px2dp(30),
+        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/Hud/AlertBottomView/index.ts

@@ -0,0 +1,42 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-04-22 17:30:32
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-07-12 19:39:48
+ * @FilePath: /@aks-dev/easyui/lib/Hud/AlertBottomView/index.ts
+ */
+import * as React from 'react'
+
+
+import { StyleProp, ViewStyle, TextStyle } from 'react-native'
+
+
+export declare type AlertBottomViewOptions = {
+    title: string;
+    wrapperStyle: StyleProp<ViewStyle>;
+    content: string | React.ReactElement;
+    contentContainerStyle: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 showAlertBottomModal: (props: Partial<AlertBottomViewOptions>) => void;
+
+
+
+export declare type AlertBottomViewCurrent = {
+    show: (options: Partial<AlertBottomViewOptions>) => void;
+    hide: () => void;
+}
+
+
+export declare const AlertBottomView: React.ForwardRefExoticComponent<React.PropsWithoutRef<{}> & React.RefAttributes<AlertBottomViewCurrent>>;
+
+export declare const AlertBottomViewRef: React.RefObject<AlertBottomViewCurrent>

package/lib/Hud/AlertView/AlertView.tsx

@@ -5,14 +5,14 @@ import { View, Text, StyleSheet, Platform, Modal, StatusBar, TouchableOpacity, A
 import { px2dp, deviceWidth } from '../../../screen/px2dp'
 import { px2sp } from '../../../screen/px2sp'
 
-import { Options, AlertViewCurrent } from '.'
+import { AlertViewOptions, AlertViewCurrent } from '.'
 
 
 
 type State = {
     visible: boolean;
 
-} & Omit<Options, 'cancel' | 'confirm'>
+} & Omit<AlertViewOptions, 'cancel' | 'confirm'>
 
 
 
@@ -33,7 +33,7 @@ export default React.forwardRef<AlertViewCurrent, {}>((_, ref) => {
 
     
     React.useImperativeHandle<unknown, AlertViewCurrent>(ref, () => ({
-        show: async (options: Partial<Options>) => {
+        show: async (options: Partial<AlertViewOptions>) => {
 
             setState(Object.assign({}, defaultState, { visible: true }, options))
             cancelCallbackRef.current = options.cancel;
@@ -138,7 +138,7 @@ export const alertViewRef = React.createRef<AlertViewCurrent>();
 
 
 
-export const showAlertModal = (props: Partial<Options>) => {
+export const showAlertModal = (props: Partial<AlertViewOptions>) => {
     alertViewRef.current?.show(props)
 }
 

package/lib/Hud/AlertView/index.ts

@@ -2,8 +2,8 @@
  * @Author: shiguo
  * @Date: 2022-04-22 17:30:32
  * @LastEditors: shiguo
- * @LastEditTime: 2022-05-12 11:32:28
- * @FilePath: /@aks/easyui/lib/Easy-Hud/AlertView/index.ts
+ * @LastEditTime: 2022-07-12 19:06:29
+ * @FilePath: /cmwy-device-app/node_modules/@aks-dev/easyui/lib/Hud/AlertView/index.ts
  */
 import * as React from 'react'
 
@@ -11,7 +11,7 @@ import * as React from 'react'
 import { StyleProp, ViewStyle, TextStyle } from 'react-native'
 
 
-export declare type Options = {
+export declare type AlertViewOptions = {
     title: string;
     content: string | React.ReactElement;
     wrapperStyle: StyleProp<ViewStyle>;
@@ -26,12 +26,12 @@ export declare type Options = {
 }
 
 
-export declare const showAlertModal: (props: Partial<Options>) => void;
+export declare const showAlertModal: (props: Partial<AlertViewOptions>) => void;
 
 
 
 export declare type AlertViewCurrent = {
-    show: (options: Partial<Options>) => void;
+    show: (options: Partial<AlertViewOptions>) => void;
     hide: () => void;
 }
 

package/lib/Hud/Hud.tsx

@@ -2,14 +2,19 @@
  * @Author: shiguo
  * @Date: 2022-04-24 14:10:04
  * @LastEditors: shiguo
- * @LastEditTime: 2022-05-16 09:01:26
- * @FilePath: /@aks/easyui/lib/Hud/Hud.tsx
+ * @LastEditTime: 2022-07-12 19:12:37
+ * @FilePath: /cmwy-device-app/node_modules/@aks-dev/easyui/lib/Hud/Hud.tsx
  */
 import * as React from 'react'
 // import { StyleSheet } from 'react-native'
 import {
     alertViewRef, default as AlertView, showAlertModal
 } from './AlertView/AlertView'
+
+import {
+    alertBottomViewRef, default as AlertBottomView, showAlertBottomModal
+} from './AlertBottomView/AlertBottomView'
+
 import {
     hideLoading, Loading, loadingRef, showLoading
 } from './Loading/Loading'
@@ -34,8 +39,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} />
-
+        <AlertView key="hud-2" ref={alertViewRef} />,
+        <AlertBottomView key="hud-3" ref={alertBottomViewRef} />
     ]
 )
 
@@ -44,5 +49,6 @@ export {
     showAlertModal,
     showToast,
     showLoading,
-    hideLoading
+    hideLoading,
+    showAlertBottomModal,
 }

package/lib/Hud/index.ts

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

package/package.json

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

package/src/index.ts

@@ -3,7 +3,7 @@
  * @Author: shiguo
  * @Date: 2022-04-13 12:47:34
  * @LastEditors: shiguo
- * @LastEditTime: 2022-07-12 16:17:58
+ * @LastEditTime: 2022-07-12 19:38:05
  * @FilePath: /@aks-dev/easyui/src/index.ts
  */
 
@@ -13,10 +13,8 @@
 
 
 export * from '../lib/Badge/Badge'
-// export type { BadgeProps } from '../lib/Badge'
 
-
-export { Hud, showLoading, hideLoading, showToast, showAlertModal } from '../lib/Hud/Hud'
+export { Hud, showLoading, hideLoading, showToast, showAlertModal,showAlertBottomModal } from '../lib/Hud/Hud'
 
 export * from '../lib/Modal/Modal'
 
@@ -29,11 +27,9 @@ export { RefreshState } from '../lib/RefreshList'
 
 
 export { default as TableCell } from '../lib/TableCell/TableCell'
-// export type { TableCellProps } from '../lib/TableCell'
 
 
 export { default as TextInputArea } from '../lib/TextInputArea/TextInputArea'
-// export type { TextInputAreaCurrent, TextInputAreaProps } from '../lib/TextInputArea'
 
 
 export { default as WithLoadingContainer } from '../lib/WithLoadingContainer/WithLoadingContainer'