@aks-dev/easyui 1.0.98 → 1.0.101

package/lib/Hud/AlertBottomView/AlertBottomView.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { View, Text, StyleSheet, Platform, StatusBar, TouchableOpacity, } from 'react-native'
+import { View, Text, StyleSheet, Platform, StatusBar, TouchableOpacity,Dimensions } from 'react-native'
 import Modal from 'react-native-modal'
 
 import { px2dp, deviceWidth } from '../../../screen/px2dp'
@@ -77,6 +77,7 @@ export default React.forwardRef<AlertBottomViewCurrent, {}>((_, ref) => {
             }}
             isVisible={state.visible}
             style={{ margin: 0 }}
+            deviceHeight={Dimensions.get('screen').height}
         >
             <View style={styles.container}>
                 <View style={[styles.wrapper, state.wrapperStyle]}>

package/lib/Hud/AlertSheetView/AlertSheetView.tsx

@@ -0,0 +1,176 @@
+import * as React from 'react'
+import { Dimensions, Platform, StatusBar, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import Modal from 'react-native-modal'
+import { AlertSheetViewOptions, AlertSheetViewRefAttributes } from '.'
+import { px2dp } from '../../../screen/px2dp'
+import { px2sp } from '../../../screen/px2sp'
+
+
+
+
+
+type State = {
+    visible: boolean;
+} & AlertSheetViewOptions
+
+
+
+
+
+export default React.forwardRef<AlertSheetViewRefAttributes, {}>((_, ref) => {
+
+
+    const defaultState: Partial<State> = {
+        visible: false,
+        actions: []
+    }
+    const [state, setState] = React.useState<Partial<State>>(defaultState)
+
+    React.useImperativeHandle<unknown, AlertSheetViewRefAttributes>(ref, () => ({
+        show: async (options: Partial<AlertSheetViewOptions>) => {
+            setState(Object.assign({}, defaultState, { visible: true }, options))
+        },
+        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}
+            deviceHeight={Dimensions.get('screen').height}
+            style={{ margin: 0}}
+        >
+            <View style={styles.container}>
+                <View style={[styles.wrapper]}>
+                    <View style={styles.itemContainer}>
+                        {state.actions?.map((i, idx) =>
+                            <TouchableOpacity
+                                
+                                key={`sg-action-${idx}`}
+                                style={[styles.item]}
+                                activeOpacity={1}
+                                onPress={() => i.onClick && i.onClick()}>
+                                <Text style={[styles.itemText,{color:i.color}]} numberOfLines={2}>{i.text}</Text>
+                            </TouchableOpacity>
+                        )}
+                    </View>
+
+
+
+                    <TouchableOpacity
+                        style={[styles.cancel]}
+                        activeOpacity={1}
+                        onPress={() => {
+                            hide()
+                        }}>
+                        <Text style={[styles.cancelText]}>取消</Text>
+                    </TouchableOpacity>
+                </View>
+
+            </View>
+        </Modal>
+    )
+})
+
+
+
+export const alertSheetViewRef = React.createRef<AlertSheetViewRefAttributes>();
+
+
+
+export const showAlertSheetModal = (props: Partial<AlertSheetViewOptions>) => {
+    alertSheetViewRef.current?.show(props)
+}
+
+
+
+
+
+
+const styles = StyleSheet.create({
+    container: {
+        display: 'flex',
+        flexGrow: 1,
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+
+    },
+
+    wrapper: {
+        flexGrow: 0,
+        flexShrink: 0,
+        width: '100%',
+        // backgroundColor: 'pink',
+        overflow: 'hidden',
+        borderTopLeftRadius: px2dp(10),
+        borderTopRightRadius: px2dp(10),
+        display: 'flex',
+        padding: px2dp(15),
+    },
+
+    cancel: {
+        height: px2dp(50),
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: px2dp(10),
+        backgroundColor: 'white',
+        marginTop: px2dp(15),
+    },
+    cancelText: {
+        fontSize: px2sp(15),
+        color: '#2763FF',
+
+    },
+
+    itemContainer: {
+        display: 'flex',
+        borderRadius: px2dp(10),
+        overflow: 'hidden',
+        backgroundColor:'#f1f1f1'
+    },
+    item: {
+        height: px2dp(50),
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+
+        backgroundColor: 'white',
+        marginTop: px2dp(0.5)
+    },
+    itemText: {
+        fontSize: px2sp(12),
+        color: '#666666',
+
+    },
+
+})

package/lib/Hud/AlertSheetView/index.ts

@@ -0,0 +1,35 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-04-22 17:30:32
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-09-09 10:11:11
+ * @FilePath: /cmwy-device-app/node_modules/@aks-dev/easyui/lib/Hud/AlertSheetView/index.ts
+ */
+import * as React from 'react';
+import { ColorValue } from 'react-native';
+
+
+
+type ActionSheet = {
+    text: string;
+    color?: ColorValue | undefined;
+    onClick?: () => void;
+}
+export declare type AlertSheetViewOptions = {
+    actions:ActionSheet[];
+}
+
+
+export declare const showAlertSheetModal: (props: Partial<AlertSheetViewOptions>) => void;
+
+
+
+export declare type AlertSheetViewRefAttributes = {
+    show: (options: Partial<AlertSheetViewOptions>) => void;
+    hide: () => void;
+}
+
+
+export declare const AlertSheetView: React.ForwardRefExoticComponent<React.PropsWithoutRef<{}> & React.RefAttributes<AlertSheetViewRefAttributes>>;
+
+export declare const AlertSheetViewRef: React.RefObject<AlertSheetViewRefAttributes>

package/lib/Hud/Hud.tsx

@@ -2,7 +2,7 @@
  * @Author: shiguo
  * @Date: 2022-04-24 14:10:04
  * @LastEditors: shiguo
- * @LastEditTime: 2022-07-15 09:58:50
+ * @LastEditTime: 2022-09-09 09:55:01
  * @FilePath: /cmwy-device-app/node_modules/@aks-dev/easyui/lib/Hud/Hud.tsx
  */
 import * as React from 'react'
@@ -14,6 +14,9 @@ import {
 import {
     alertBottomViewRef, default as AlertBottomView, showAlertBottomModal
 } from './AlertBottomView/AlertBottomView'
+import {
+    alertSheetViewRef, default as AlertSheetView, showAlertSheetModal
+} from './AlertSheetView/AlertSheetView'
 
 import {
     hideLoading, Loading, loadingRef, showLoading
@@ -25,7 +28,7 @@ import {
 } from './Toast/Toast'
 
 
-import {showPopoverView,hidePopoverView,popoverViewRef,PopoverView} from './PopoverView/PopoverView'
+import { showPopoverView, hidePopoverView, popoverViewRef, PopoverView } from './PopoverView/PopoverView'
 
 
 
@@ -42,8 +45,9 @@ 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} />,
-        <PopoverView key="hud-4" ref={popoverViewRef}/>,
+        <AlertBottomView key="hud-3-0" ref={alertBottomViewRef} />,
+        <AlertSheetView key="hud-3-1" ref={alertSheetViewRef} />,
+        <PopoverView key="hud-4" ref={popoverViewRef} />,
     ]
 )
 
@@ -51,9 +55,9 @@ export const Hud: React.FC<{}> = () => React.cloneElement(
 export {
     showAlertModal,
     showToast,
-    showLoading,
-    hideLoading,
+    showLoading, hideLoading,
     showAlertBottomModal,
-    showPopoverView,
-    hidePopoverView
+    showAlertSheetModal,
+    showPopoverView, hidePopoverView
+
 }

package/lib/Hud/Toast/Toast.tsx

@@ -2,8 +2,8 @@
  * @Author: shiguo
  * @Date: 2021-04-27 10:38:04
  * @LastEditors: shiguo
- * @LastEditTime: 2022-08-04 10:43:06
- * @FilePath: /@aks-dev/easyui/lib/Hud/Toast/Toast.tsx
+ * @LastEditTime: 2022-05-12 11:33:40
+ * @FilePath: /@aks/easyui/lib/Easy-Hud/Toast/Toast.tsx
  */
 import React, { useImperativeHandle, useState, useRef } from 'react';
 import { View, StyleSheet, Text, Dimensions, Animated, Easing } from 'react-native';
@@ -16,7 +16,6 @@ const errorMsg = '(^_^)∠※ 送你一束小花'
 export const Toast = React.forwardRef<ToastCurrent, {}>((_, ref) => {
     const [tipText, setTipText] = useState(errorMsg);
     const fade = useRef(new Animated.Value(0)).current;
-    const [tipTheme, setTipTheme] = useState<'black' | 'white'>('black')
 
     const fadeAnimation = Animated.sequence([
         Animated.timing(fade, {
@@ -35,9 +34,8 @@ export const Toast = React.forwardRef<ToastCurrent, {}>((_, ref) => {
     ])
 
     useImperativeHandle<unknown, ToastCurrent>(ref, () => ({
-        showToast: (content: string, theme?: 'black' | 'white') => {
+        showToast: (content: string) => {
             setTipText(content || errorMsg)
-            setTipTheme(theme ? theme : 'black')
             fadeAnimation.reset()
             fadeAnimation.start()
         },
@@ -45,8 +43,8 @@ export const Toast = React.forwardRef<ToastCurrent, {}>((_, ref) => {
 
     return (
         <Animated.View style={{ ...styles.toastContainer, opacity: fade }}>
-            <View style={[styles.toastTipsContainer, { backgroundColor: tipTheme == 'black' ? '#00000088' : '#ffffff88' }]}>
-                <Text numberOfLines={5} style={[styles.toastTitle, { color: tipTheme ? 'white' : 'black'}]}>{tipText} </Text>
+            <View style={styles.toastTipsContainer}>
+                <Text numberOfLines={5} style={{ ...styles.toastTitle, }}>{tipText} </Text>
             </View>
         </Animated.View>
 
@@ -55,7 +53,7 @@ export const Toast = React.forwardRef<ToastCurrent, {}>((_, ref) => {
 
 export const toastRef = React.createRef<ToastCurrent>();
 
-export const showToast = (content: string, theme?: 'black' | 'white') => toastRef.current?.showToast(content, theme)
+export const showToast = (content: string) => toastRef.current?.showToast(content)
 
 
 

package/lib/Hud/Toast/index.ts

@@ -2,8 +2,8 @@
  * @Author: shiguo
  * @Date: 2022-04-18 19:18:03
  * @LastEditors: shiguo
- * @LastEditTime: 2022-08-04 09:51:29
- * @FilePath: /@aks-dev/easyui/lib/Hud/Toast/index.ts
+ * @LastEditTime: 2022-05-12 11:33:32
+ * @FilePath: /@aks/easyui/lib/Easy-Hud/Toast/index.ts
  */
 import * as React from 'react'
 
@@ -11,10 +11,10 @@ import * as React from 'react'
 
 
 export declare type ToastCurrent = {
-    showToast: (content: string, theme?: 'black' | 'white') => void;
+    showToast: (content: string) => void;
 }
 
-export declare const showToast: (content: string, theme?: 'black' | 'white') => void;
+export declare const showToast: (content: string) => void;
 
 
 export declare const toastRef: React.RefObject<ToastCurrent>;

package/lib/Hud/index.ts

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

package/lib/TextInputArea/TextInputArea.tsx

@@ -2,7 +2,7 @@
  * @Author: shiguo
  * @Date: 2022-04-24 13:56:47
  * @LastEditors: shiguo
- * @LastEditTime: 2022-07-14 11:56:11
+ * @LastEditTime: 2022-09-07 18:37:00
  * @FilePath: /@aks-dev/easyui/lib/TextInputArea/TextInputArea.tsx
  */
 import React from 'react'
@@ -11,9 +11,9 @@ import {px2dp} from '../../screen/px2dp'
 import {px2sp} from '../../screen/px2sp'
 
 
-import type { TextInputAreaProps, TextInputAreaCurrent } from '.'
+import type { TextInputAreaProps ,TextInputAreaRefAttributes} from '.'
 
-export default React.forwardRef<TextInputAreaCurrent, Partial<TextInputAreaProps>>((props, ref) => {
+export default React.forwardRef<TextInputAreaRefAttributes, Partial<TextInputAreaProps>>((props, ref) => {
     const { defaultValue, placeholder, maxLength = 200, on, ...rest } = props
 
     const [value, setValue] = React.useState<string | undefined>(defaultValue)
@@ -23,7 +23,7 @@ export default React.forwardRef<TextInputAreaCurrent, Partial<TextInputAreaProps
     }, [defaultValue])
 
 
-    React.useImperativeHandle<unknown,TextInputAreaCurrent>(ref, () => ({
+    React.useImperativeHandle<unknown,TextInputAreaRefAttributes>(ref, () => ({
         value: value,
     }), [value])
 

package/lib/TextInputArea/index.ts

@@ -2,7 +2,7 @@
  * @Author: shiguo
  * @Date: 2022-04-24 13:59:32
  * @LastEditors: shiguo
- * @LastEditTime: 2022-07-14 11:56:00
+ * @LastEditTime: 2022-09-07 18:38:10
  * @FilePath: /@aks-dev/easyui/lib/TextInputArea/index.ts
  */
 import * as  React from 'react'
@@ -21,13 +21,11 @@ export type TextInputAreaProps = {
 } & TextInputProps
 
 
-
-
-export type TextInputAreaCurrent = {
+export type TextInputAreaRefAttributes = {
     value: string | undefined;
 }
 
 
-export declare const TextInputArea: React.ForwardRefExoticComponent<React.PropsWithoutRef<Partial<TextInputAreaProps>> & React.RefAttributes<TextInputAreaCurrent>>;
+export declare const TextInputArea: React.ForwardRefExoticComponent<React.PropsWithoutRef<Partial<TextInputAreaProps>> & React.RefAttributes<TextInputAreaRefAttributes>>;
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aks-dev/easyui",
-  "version": "1.0.98",
+  "version": "1.0.101",
   "description": "移动端App开发工具包",
   "main": "./src/index.ts",
   "typings": "./src/index.d.ts",
@@ -10,8 +10,7 @@
   "keywords": [
     "react",
     "react-native",
-    "easyui",
-    "爱科森开发"
+    "easyui"
   ],
   "files": [
     "/android",

package/screen/px2dp.ts

@@ -2,15 +2,15 @@
  * @Author: shiguo
  * @Date: 2022-04-18 14:32:25
  * @LastEditors: shiguo
- * @LastEditTime: 2022-07-14 20:19:39
+ * @LastEditTime: 2022-09-09 10:35:02
  * @FilePath: /@aks-dev/easyui/screen/px2dp.ts
  */
 import { Dimensions, Platform, StatusBar } from 'react-native';
 
 
 // 设备宽度，单位 dp
-export const deviceWidth = Dimensions.get('window').width;      //设备的宽度
-export const deviceHeight = Dimensions.get('window').height;    //设备的高度
+export const deviceWidth = Dimensions.get('screen').width;      //设备的宽度
+export const deviceHeight = Dimensions.get('screen').height;    //设备的高度
 export const isAndroid = Platform.OS === "android"
 export const isIos = Platform.OS === 'ios'
 export const isiPhoneX = isIos && (deviceHeight > 736)
@@ -43,7 +43,7 @@ export const statusBarHeight = (() => {
 
 
 
-export const navigationBarHeight = (() => {
+export const navigationBarHeight = ( () => {
     if (isAndroid) return 56
     return 44
 })()

package/src/index.ts

@@ -3,7 +3,7 @@
  * @Author: shiguo
  * @Date: 2022-04-13 12:47:34
  * @LastEditors: shiguo
- * @LastEditTime: 2022-07-15 12:40:31
+ * @LastEditTime: 2022-09-09 10:37:09
  * @FilePath: /@aks-dev/easyui/src/index.ts
  */
 
@@ -14,7 +14,15 @@
 
 export * from '../lib/Badge/Badge'
 
-export { Hud, showLoading, hideLoading, showToast, showAlertModal, showAlertBottomModal, showPopoverView, hidePopoverView } from '../lib/Hud/Hud'
+export {
+    Hud,
+    showLoading, hideLoading,
+    showToast,
+    showAlertModal,
+    showAlertBottomModal,
+    showAlertSheetModal,
+    showPopoverView, hidePopoverView
+} from '../lib/Hud/Hud'
 
 export * from '../lib/Modal/Modal'
 

package/utils/lazy.ts

@@ -2,7 +2,7 @@
  * @Author: shiguo
  * @Date: 2022-04-27 18:17:54
  * @LastEditors: shiguo
- * @LastEditTime: 2022-07-11 15:59:49
+ * @LastEditTime: 2022-08-25 17:02:22
  * @FilePath: /@aks-dev/easyui/utils/lazy.ts
  */
 import type { SyncLoopCallBack } from '.'
@@ -17,7 +17,7 @@ export const sleep = (msec?: number) => {
 
 
 export const randomcolor = () => {
-    return `rgba(${Math.round(Math.random() * 255)},${Math.round(Math.random() * 255)},${Math.round(Math.random() * 255)},${Math.random()})`
+    return `rgba(${Math.round(Math.random() * 255)},${Math.round(Math.random() * 255)},${Math.round(Math.random() * 255)},${1})`
 }