@aks-dev/easyui 1.0.126 → 1.0.127

package/lib/AnimationModal/AnimationModal.tsx

@@ -0,0 +1,132 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-05-17 15:22:06
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-12-21 18:13:33
+ * @FilePath: /aks-fire-app/node_modules/@aks-dev/easyui/lib/AnimationModal/AnimationModal.tsx
+ */
+
+import * as React from "react";
+import { Animated, Easing, LayoutRectangle, PanResponder, StyleSheet, useWindowDimensions } from 'react-native';
+import type { AnimationModalProps } from '.';
+import * as utils from '../../utils/lazy';
+type State = {
+    display: 'flex' | 'none';
+}
+type StateReducerProps = (state: State, action: Partial<State>) => State
+
+
+export const AnimationModal: React.ForwardRefExoticComponent<
+    React.PropsWithoutRef<AnimationModalProps>
+    & React.RefAttributes<AnimationModalProps.RefAttributes>
+>
+    = React.forwardRef((props, ref) => {
+        const {
+            animationType = 'from-bottom',
+            mask = false
+        } = props || {}
+
+        const {height} = useWindowDimensions()
+
+        const [state, dispatch] = React.useReducer<StateReducerProps>(
+            (state, action) => ({ ...state, ...action }),
+            {
+                display: 'none'
+            })
+
+        const animatedValue = React.useRef(new Animated.Value(0)).current;
+        const timing = (value) => {
+            Animated.timing(animatedValue, {
+                toValue: value,
+                duration: 350,
+                useNativeDriver: true,
+                easing: Easing.linear,
+            }).start(({ finished }) => {
+                /* 动画完成的回调函数 */
+                console.log({ finished })
+            });
+        };
+
+        /**
+         * h0: 父容器的高度
+         * h1: 子容器的高度
+         * @description: 
+         * @return {*}
+         */
+        const layoutRef = React.useRef<{ h0: number; h1: number; }>({ h0: 0, h1: 0 })
+
+        React.useImperativeHandle<unknown, AnimationModalProps.RefAttributes>(ref, () => ({
+            show,
+            hide,
+            target: targetRef.current
+        }), [])
+        const targetRef = React.useRef<any>()
+
+        const show = async () => {
+            dispatch({ display: 'flex' })
+            await utils.sleep(50)
+            timing(-layoutRef.current?.h1)
+        }
+        const hide = async () => {
+            timing(0)
+            await utils.sleep(50)
+            dispatch({ display: 'none' })
+        }
+
+        return (
+            <Animated.View
+                style={Object.assign({ display: state.display }, styles.container, props.style)}
+                {...PanResponder.create({
+                    onStartShouldSetPanResponder: () => true,
+                    onPanResponderGrant: (e, gestureState) => {
+                        // console.log({e})
+                        let pageY = e.nativeEvent.pageY
+                        let topY = height - layoutRef.current.h1
+                        if (pageY <= topY && !mask) {
+                            e.stopPropagation()
+                            hide()
+                        }
+                    }
+                }).panHandlers}
+            >
+                <Animated.View
+                    style={Object.assign({}, styles.wrapper, { transform: [{ translateY: animatedValue }] })}
+                    onLayout={e => {
+                        let target: LayoutRectangle = e.nativeEvent.layout
+                        layoutRef.current.h1 = target.height
+                    }}
+                >
+                    {props.children}
+                </Animated.View>
+            </Animated.View>
+        )
+    })
+
+
+
+const styles = StyleSheet.create({
+    container: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        zIndex: 999,
+        // display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: '#00000055',
+        overflow: 'hidden',
+    },
+    wrapper: {
+        position: 'absolute',
+        display: 'flex',
+        flexDirection: 'column',
+        // backgroundColor: 'pink',
+        width: '100%',
+        top: '100%'
+    },
+    empty: {
+        flex: 1, position: 'relative',
+        //  backgroundColor: 'cyan'
+    }
+})

package/lib/AnimationModal/index.d.ts

@@ -0,0 +1,39 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-05-18 17:26:41
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-12-21 18:13:47
+ * @FilePath: /aks-fire-app/node_modules/@aks-dev/easyui/lib/AnimationModal/index.d.ts
+ */
+import { StyleProp, ViewStyle } from 'react-native';
+
+
+export type AnimationModalProps = {
+    children: React.ReactNode;
+    /**
+     * 动画方向，默认 'from-bottom'
+     * center-in 动画暂未实现
+     */
+    animationType?: 'from-bottom' | 'center-in';
+    /**
+     * 是否有遮罩，默认没有
+     */
+    mask?: boolean;
+    style?:Pick<StyleProp<ViewStyle>,'backgroundColor'>;
+}
+
+
+declare namespace AnimationModalProps {
+    type RefAttributes = {
+        show: (target?:any) => void;
+        hide: () => void;
+        target:any
+    }
+}
+
+
+
+export declare const AnimationModal: React.ForwardRefExoticComponent<
+    React.PropsWithoutRef<AnimationModalProps>
+    & React.RefAttributes<AnimationModalProps.RefAttributes>
+>;

package/lib/Hud/PopoverView/PopoverView.tsx

@@ -2,7 +2,7 @@
  * @Author: shiguo
  * @Date: 2022-04-24 14:27:02
  * @LastEditors: shiguo
- * @LastEditTime: 2022-10-28 12:10:20
+ * @LastEditTime: 2022-12-21 15:36:06
  * @FilePath: /@aks-dev/easyui/lib/Hud/PopoverView/PopoverView.tsx
  */
 import React, { useImperativeHandle, useState } from 'react';
@@ -60,7 +60,7 @@ const styles = StyleSheet.create({
     container: {
         ...StyleSheet.absoluteFillObject,
         display: 'flex',
-
+        
         // backgroundColor:'red'
     },
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aks-dev/easyui",
-  "version": "1.0.126",
+  "version": "1.0.127",
   "description": "工具箱",
   "main": "./src/index.ts",
   "typings": "./src/index.d.ts",

package/src/index.d.ts

@@ -2,7 +2,7 @@
  * @Author: shiguo
  * @Date: 2022-04-26 11:44:22
  * @LastEditors: shiguo
- * @LastEditTime: 2022-07-15 12:36:37
+ * @LastEditTime: 2022-12-21 18:15:26
  * @FilePath: /@aks-dev/easyui/src/index.d.ts
  */
 
@@ -43,6 +43,8 @@ export * from '../lib/RichText'
 export * from '../lib/DottedLine'
 
 export * from '../lib/MenuView'
+export * from '../lib/AnimationModal'
+
 
 /// 工具
 import * as utils from '../utils'

package/src/index.ts

@@ -3,7 +3,7 @@
  * @Author: shiguo
  * @Date: 2022-04-13 12:47:34
  * @LastEditors: shiguo
- * @LastEditTime: 2022-11-18 19:10:43
+ * @LastEditTime: 2022-12-21 18:15:37
  * @FilePath: /@aks-dev/easyui/src/index.ts
  */
 
@@ -54,6 +54,10 @@ export { default as DottedLine } from '../lib/DottedLine/DottedLine'
 
 export { default as MenuView } from '../lib/MenuView/MenuView'
 
+
+export { AnimationModal } from '../lib/AnimationModal/AnimationModal'
+
+
 /// 全局适配
 export * from '../screen/px2dp'
 export * from '../screen/px2sp'