@aks-dev/easyui 1.0.140 → 1.0.143

package/lib/AnimationModal/AnimationModal.tsx

@@ -2,12 +2,12 @@
  * @Author: shiguo
  * @Date: 2022-05-17 15:22:06
  * @LastEditors: shiguo
- * @LastEditTime: 2022-12-26 17:26:14
+ * @LastEditTime: 2022-12-27 09:12:36
  * @FilePath: /@aks-dev/easyui/lib/AnimationModal/AnimationModal.tsx
  */
 
 import * as React from "react";
-import { View, Animated, Easing, LayoutRectangle, PanResponder, StyleSheet, useWindowDimensions, BackHandler } from 'react-native';
+import { View, Animated, Easing, LayoutRectangle, PanResponder, StyleSheet, useWindowDimensions, BackHandler, MeasureOnSuccessCallback } from 'react-native';
 import type { AnimationModalProps } from '.';
 import * as utils from '../../utils/lazy';
 // type State = {
@@ -17,6 +17,7 @@ import * as utils from '../../utils/lazy';
 
 
 
+
 export const AnimationModal: React.ForwardRefExoticComponent<
     React.PropsWithoutRef<AnimationModalProps>
     & React.RefAttributes<AnimationModalProps.RefAttributes>
@@ -49,24 +50,40 @@ export const AnimationModal: React.ForwardRefExoticComponent<
             });
         };
 
+
+        const viewRef = React.useRef<{ measure: (callback: MeasureOnSuccessCallback) => void }>() as any
         const layoutRef = React.useRef<{
             /**：父容器的高度 */
             h0: number;
             /**：子容器的高度 */
             h1: number;
         }>({ h0: 0, h1: 0 })
+        const getLayoutPromise = () => {
+            return new Promise((resovle, reject) => {
+                viewRef.current?.measure((...args: any[]) => {
+                    if (args.length == 6) {
+                        layoutRef.current.h1 = args[3]
+                    }
+                    resovle(args)
+                })
+            })
+        }
 
         React.useImperativeHandle<unknown, AnimationModalProps.RefAttributes>(ref, () => ({
             show,
             hide,
             target: targetRef.current
         }), [])
+
         const targetRef = React.useRef<any>()
 
 
+
+
         const show = async () => {
             setDisplay('flex', async () => {
                 await utils.sleep(50)
+                await getLayoutPromise()
                 timing(-layoutRef.current?.h1)
             })
         }
@@ -115,10 +132,12 @@ export const AnimationModal: React.ForwardRefExoticComponent<
             >
                 <Animated.View
                     style={Object.assign({}, styles.wrapper, { transform: [{ translateY: animatedValue }] })}
-                    onLayout={e => {
-                        let target: LayoutRectangle = e.nativeEvent.layout
-                        layoutRef.current.h1 = target.height
-                    }}
+                    // onLayout={e => {
+                    //     let target: LayoutRectangle = e.nativeEvent.layout
+                    //     layoutRef.current.h1 = target.height
+                    // }}
+
+                    ref={viewRef}
                 >
                     {props.children}
                 </Animated.View>
@@ -172,4 +191,4 @@ const useCallbackState = <T,>(od: T): [T, (d: T, callback?: Function) => void] =
             setData(d)
         }
     ]
-}
+}

package/lib/RefreshList/RefreshList.tsx

@@ -62,29 +62,34 @@ export default React.forwardRef((props: RefreshListProps, ref: React.Ref<any>) =
 
     switch (mode) {
         case 'FlatList':
-            props = props as FlatListRefreshProps;
+            let flatListProps: FlatListRefreshProps = 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%" }}
+                    contentContainerStyle={flatListProps.data?.length ? {} : { height: "100%" }}
                     onRefresh={onRefresh}
                     onEndReachedThreshold={0.1}
                     onEndReached={onEndReached}
                     showsVerticalScrollIndicator={false}
-                    ListHeaderComponent={(_) => <ListHeaderComponent {...props} />}
-                    ListFooterComponent={(_) => <ListFooterComponent {...props} />}
+                    ListHeaderComponent={(_) => (
+                        <View style={{ display: 'flex', flexDirection: 'column' }}>
+                            <ListHeaderComponent {...flatListProps} />
+                            {flatListProps.ListHeaderComponent}
+                        </View>
+                    )}
+                    ListFooterComponent={(_) => <ListFooterComponent {...flatListProps} />}
 
                 />
             )
 
         case 'SectionList':
-            props = props as SectionListRefreshProps;
+           let sectionListProps:SectionListRefreshProps = props as SectionListRefreshProps;
             const { ItemSeparatorComponent = (_) => (
                 <View style={{ height: 1 }} />
-            ) } = props
+            ) } = sectionListProps
             return (
                 <Animated.SectionList
                     {...rest as SectionListRefreshProps}
@@ -92,26 +97,32 @@ export default React.forwardRef((props: RefreshListProps, ref: React.Ref<any>) =
                     refreshing={refreshState == RefreshState.HeaderRefreshing}
                     onRefresh={onRefresh}
                     keyExtractor={(_, index) => { return `sg-index-SectionList-${seed}-${index}` }}
-                    contentContainerStyle={props.sections?.length > 0 ? {} : { height: "100%" }}
+                    contentContainerStyle={sectionListProps.sections?.length > 0 ? {} : { height: "100%" }}
                     ItemSeparatorComponent={ItemSeparatorComponent}
                     onEndReachedThreshold={0.1}
                     onEndReached={onEndReached}
                     showsVerticalScrollIndicator={false}
-                    ListHeaderComponent={(_) => <ListHeaderComponent {...props} />}
-                    ListFooterComponent={(_) => <ListFooterComponent {...props} />}
-                    renderSectionHeader={props.renderSectionHeader}
+                    // ListHeaderComponent={(_) => <ListHeaderComponent {...sectionListProps} />}
+                    ListHeaderComponent={(_) => (
+                        <View style={{ display: 'flex', flexDirection: 'column' }}>
+                            <ListHeaderComponent {...flatListProps} />
+                            {sectionListProps.ListHeaderComponent}
+                        </View>
+                    )}
+                    ListFooterComponent={(_) => <ListFooterComponent {...sectionListProps} />}
+                    renderSectionHeader={sectionListProps.renderSectionHeader}
                 />
             )
 
         case 'SwipeList':
+            let swipeListProps:SwipeListViewRefreshProps = props as SwipeListViewRefreshProps
             const { renderHiddenItem = (data, rowMap) => (
                 <View style={{ backgroundColor: 'red', height: '100%', alignItems: 'flex-end', justifyContent: "center" }}>
                     <Text>Right </Text>
                 </View>
-            ) } = props as SwipeListViewRefreshProps
+            ) } = swipeListProps 
             return (
                 <SwipeListView
-
                     {...rest as SwipeListViewRefreshProps}
                     rightOpenValue={-100}
                     leftOpenValue={0}
@@ -124,8 +135,13 @@ export default React.forwardRef((props: RefreshListProps, ref: React.Ref<any>) =
                     onEndReachedThreshold={0.1}
                     onEndReached={onEndReached}
                     showsVerticalScrollIndicator={false}
-                    ListHeaderComponent={(args) => <ListHeaderComponent {...props} />}
-                    ListFooterComponent={(args) => <ListFooterComponent {...props} />}
+                    ListHeaderComponent={(_) => (
+                        <View style={{ display: 'flex', flexDirection: 'column' }}>
+                            <ListHeaderComponent {...flatListProps} />
+                            {swipeListProps.ListHeaderComponent}
+                        </View>
+                    )}
+                    ListFooterComponent={(args) => <ListFooterComponent {...swipeListProps} />}
                     renderHiddenItem={renderHiddenItem}
                 />
 
@@ -170,7 +186,7 @@ const ListFooterComponent = React.memo((props: RefreshListProps) => {
                 </View>
             )
         case RefreshState.EmptyData:
-            if (props.ListEmptyComponent) return props.ListEmptyComponent()
+            if (props.renderListEmptyComponent) return props.renderListEmptyComponent()
             return (
                 <View style={{
                     width: '100%', height: '100%',

package/lib/RefreshList/index.ts

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2022-04-20 14:56:05
- * @LastEditTime: 2022-11-03 10:34:30
+ * @LastEditTime: 2022-12-29 10:46:57
  * @LastEditors: shiguo
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /@aks-dev/easyui/lib/RefreshList/index.ts
@@ -29,7 +29,7 @@ type CommonProps = {
     onFooterRefresh: (info: any) => void;
     reload: () => void;
     refreshState: RefreshState;
-    ListEmptyComponent: () => React.ReactElement;
+    renderListEmptyComponent: () => React.ReactElement;
 }
 
 
@@ -52,7 +52,7 @@ export type SectionListRefreshProps = {
 export type SwipeListViewRefreshProps = {
     mode: 'SwipeList';
     data: ItemT[];
-} & IPropsSwipeListView<ItemT> & Partial<CommonProps>;
+} & IPropsSwipeListView<ItemT> & Partial<CommonProps> &  FlatListProps<ItemT> ;
 
 export type RefreshListProps = FlatListRefreshProps | SwipeListViewRefreshProps | SectionListRefreshProps
 

package/package.json

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