@aks-dev/easyui 1.0.10

package/lib/RefreshList/demo2.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react'
+import { View, TouchableOpacity, Text } from 'react-native'
+
+import { RefreshList, RefreshState } from './index'
+
+
+
+const App = () => {
+
+    const [refreshState, setRefreshState] = React.useState(RefreshState.Idle)
+
+    const listRef = React.useRef<any>()
+    const dataList = Array(20)
+        .fill("")
+        .map((_, i) => ({ key: `${i}`, text: `item #${i}` }))
+    // return (
+
+
+
+        // <RefreshList
+        //     mode='SwipeList'
+        //     ref={listRef}
+        //     data={dataList}
+        //     renderItem={(data, rowMap) => (
+        //         <View >
+        //             <Text>I am {data.item.text} in a SwipeListView</Text>
+        //         </View>
+        //     )}
+        //     refreshState={refreshState}
+        //     onHeaderRefresh={() => {
+
+        //     }}
+        //     onFooterRefresh={() => {
+
+        //     }}
+        //     renderHiddenItem={(data, rowMap) => (
+        //         <TouchableOpacity onPress={() => {
+        //             listRef.current?.safeCloseOpenRow()
+        //         }}>
+
+        //         </TouchableOpacity>
+        //     )}
+        // />
+
+    // )
+}

package/lib/RefreshList/index.ts

@@ -0,0 +1,84 @@
+/*
+ * @Author: your name
+ * @Date: 2022-04-20 14:56:05
+ * @LastEditTime: 2022-04-27 14:22:01
+ * @LastEditors: shiguo
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /@aks/easyui/lib/RefreshList/index.ts
+ */
+
+import * as React from 'react'
+
+import { FlatListProps, SectionListProps } from 'react-native'
+import { IPropsSwipeListView } from 'react-native-swipe-list-view/types'
+
+
+// declare namespace easyui {
+//     type Mode = {
+//         FlatList
+//         SectionList
+//         SwipeList
+//     }
+// }
+
+
+
+type CommonProps = {
+    // mode: keyof easyui.Mode;
+    onHeaderRefresh: Function;
+    onFooterRefresh: (info: any) => void;
+    reload: Function;
+    refreshState: RefreshState;
+    renderListEmptyComponent: () => React.ReactElement;
+}
+
+
+type SectionT = {
+    [key: string]: any;
+};
+type ItemT = any;
+
+
+export type FlatListRefreshProps = {
+    mode?: 'FlatList';
+} & FlatListProps<ItemT> & Partial<CommonProps>;
+
+
+export type SectionListRefreshProps = {
+    mode: 'SectionList';
+
+} & SectionListProps<ItemT, SectionT> & Partial<CommonProps>;
+
+export type SwipeListViewRefreshProps = {
+    mode: 'SwipeList';
+    data: ItemT[];
+} & IPropsSwipeListView<ItemT> & Partial<CommonProps>;
+
+export type RefreshListProps = FlatListRefreshProps | SwipeListViewRefreshProps | SectionListRefreshProps
+
+
+export enum RefreshState {
+    Idle = 'Idle',
+    HeaderRefreshing = 'HeaderRefreshing',
+    FooterRefreshing = 'FooterRefreshing',
+    NoMoreData = 'NoMoreData',
+    Failure = 'Failure',
+    EmptyData = 'EmptyData',
+    None = 'None',
+}
+
+
+export const RefreshText = {
+    HeaderRefreshing: '上拉可以刷新',
+    FooterRefreshing: '下拉可以加载更多',
+    Failure: '服务器正在出小差，点击重新加载',
+    NoMoreData: '已经全部加载完毕',
+    EmptyData: '加载数据为空',
+    Idle: '正在加载更多的数据..',
+}
+
+
+
+
+export declare const RefreshList: React.FC<RefreshListProps>;
+

package/lib/StickHeaderView/StickHeaderView.tsx

@@ -0,0 +1,65 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-04-29 10:22:16
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-04-29 10:27:44
+ * @FilePath: /@aks/easyui/lib/StickHeaderView/StickHeaderView.tsx
+ */
+import * as React from 'react';
+import { StyleSheet, Animated, LayoutChangeEvent } from "react-native";
+
+import { StickHeaderViewProps } from '.'
+
+
+
+const App: React.FC<StickHeaderViewProps> = (props) => {
+
+    const {
+        style,
+        children,
+        stickyHeaderY = -1,
+        stickyScrollY = new Animated.Value(0)
+    } = props
+
+
+    const [stickyLayoutY, setStickyLayoutY] = React.useState(0)
+
+    // 兼容代码，防止没有传头部高度
+    const _onLayout = (event: LayoutChangeEvent) => {
+        setStickyLayoutY(event.nativeEvent.layout.y)
+    };
+
+    const translateY = () => {
+        let y = stickyHeaderY !== -1 ? stickyHeaderY : stickyLayoutY;
+        return stickyScrollY.interpolate({
+            inputRange: [-1, 0, y, y + 1],
+            outputRange: [0, 0, 0, 1],
+        })
+    };
+
+
+    return (
+        <Animated.View
+            onLayout={_onLayout}
+            style={
+                [
+                    style,
+                    styles.container,
+                    { transform: [{ translateY: translateY() }] }
+                ]}
+        >
+
+            {children}
+
+        </Animated.View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        zIndex: 100
+    },
+});
+
+
+export default React.memo(App)

package/lib/StickHeaderView/demo.tsx

@@ -0,0 +1,104 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-04-29 17:48:20
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-04-29 17:57:17
+ * @FilePath: /@aks/easyui/lib/StickHeaderView/demo.tsx
+ */
+import React from 'react'
+import { View, StyleSheet, TouchableOpacity, Text, Animated } from 'react-native'
+import { px2dp } from '../../screen/px2dp'
+import { px2sp } from '../../screen/px2sp'
+
+import StickHeaderView from './StickHeaderView'
+import WithLoadingContainer from '../WithLoadingContainer/WithLoadingContainer'
+import { Status } from '../WithLoadingContainer'
+export default ({ }) => {
+
+
+    const scrollY = React.useRef(new Animated.Value(0)).current;
+    const headHeight = React.useRef(-1);
+
+
+
+
+    return (
+        <View style={styles.container}>
+            <Animated.ScrollView
+                style={{ flex: 1 }}
+                onScroll={
+                    Animated.event(
+                        [{
+                            nativeEvent: { contentOffset: { y: scrollY } } // 记录滑动距离
+                        }],
+                        // {
+                        //     useNativeDriver: true,
+                        //     listener: (event) => {
+                        //         let ey = (event.nativeEvent as any)?.contentOffset?.y as number;
+
+                        //     }
+                        // }
+                    ) // 使用原生动画驱动
+                }
+                scrollEventThrottle={1}
+            >
+
+
+
+
+                <View onLayout={(e) => {
+                    let { height } = e.nativeEvent.layout;
+                    // setViewModel({ headHeight: height }); // 给头部高度赋值
+                    headHeight.current = height
+                }}>
+                    {/* <Calendar/> */}
+
+                </View>
+
+                <StickHeaderView
+                    // stickyHeaderY={viewModel.headHeight} // 把头部高度传入
+                    // stickyScrollY={viewModel.scrollY}  // 把滑动距离传入
+                    stickyHeaderY={headHeight.current} // 把头部高度传入
+                    stickyScrollY={scrollY}  //
+                >
+                    <View >
+
+                        <Text style={{ fontSize: px2sp(16), color: '#333', marginLeft: px2dp(30) }}>当日计划</Text>
+
+                    </View>
+
+                </StickHeaderView>
+
+
+                <WithLoadingContainer
+                    status={Status.SUCCESS}
+                    emptyText={'今日无需巡检'}
+                >
+
+                    {Array(30).fill('')?.map((i, index) => <Item key={`sg-item-${index}`} item={i} index={index} />)}
+                </WithLoadingContainer>
+            </Animated.ScrollView>
+        </View>
+    )
+}
+
+
+
+const Item = (props: { item: any, index: number }) => {
+    return (
+        <TouchableOpacity >
+
+
+
+        </TouchableOpacity>
+    )
+}
+
+
+const styles = StyleSheet.create({
+    container: {
+
+
+    },
+
+})

package/lib/StickHeaderView/index.ts

@@ -0,0 +1,26 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-04-29 10:22:02
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-04-29 10:30:47
+ * @FilePath: /@aks/easyui/lib/StickHeaderView/index.ts
+ */
+import * as React from 'react';
+import { Animated, ViewProps } from "react-native";
+
+
+export type StickHeaderViewProps = {
+    /**
+     * 头部高度
+     */
+    stickyHeaderY: number;
+
+    /**
+     * 滑动距离
+     */
+    stickyScrollY: Animated.Value;
+
+} & ViewProps
+
+
+export declare const StickHeaderView: React.FC<StickHeaderViewProps>;

package/lib/TableCell/TableCell.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react'
+import {
+    View, Text, StyleSheet, TouchableOpacity, Image,
+} from 'react-native'
+import { px2dp } from '../../screen/px2dp'
+import { px2sp } from '../../screen/px2sp'
+
+import { TableCellProps } from './index'
+
+
+
+
+export default (props: Partial<TableCellProps>) => {
+    const { showNav = false, activeOpacity = .8 } = props
+    return (
+        <TouchableOpacity activeOpacity={activeOpacity}
+            style={[styles.container, props.style]}
+            disabled={props.onPress == undefined}
+            onPress={() => props.onPress && props.onPress()}
+        >
+            <View style={[styles.warpper, props.showUnderline ? {
+                borderBottomColor: '#f2f2f2',
+                // borderBottomWidth: StyleSheet.hairlineWidth,
+                borderBottomWidth: px2dp(1),
+                ...props.underlineStyle
+            } : {}]}>
+                {props.icon && <Image
+                    style={[{ width: px2dp(20), height: px2dp(20), marginRight: px2dp(8) }, props.iconStyle]}
+                    resizeMode='contain'
+                    source={props.icon}
+                />}
+                <View style={[styles.middle, props.middleContaierStyle]}>
+                    {/* 标题 */}
+                    {(() => {
+                        if (typeof props.title === 'string' || typeof props.title === 'number') {
+                            return (
+                                <Text
+                                    numberOfLines={1}
+                                    {...props.titleOptions}
+                                    style={[styles.title, props.titleOptions?.style]}
+                                >{props.title}</Text>
+                            )
+                        }
+                        if (React.isValidElement(props.title)) return props.title
+                        return <View style={styles.title} />
+                    })()}
+
+
+                    {(() => {
+                        if (typeof props.content === 'string' || typeof props.content === 'number') {
+                            return (
+                                <Text
+                                    numberOfLines={1}
+                                    {...props.contentOptions}
+                                    style={[styles.content, props.contentOptions?.style]}
+                                >{props.content}</Text>
+                            )
+                        }
+                        if (React.isValidElement(props.content)) return props.content
+
+                        return undefined
+                    })()}
+                </View>
+                {showNav && <Image
+                    style={{ width: px2dp(9), height: px2dp(16), marginLeft: px2dp(8) }}
+                    source={require('./back.png')}
+                />}
+            </View>
+
+        </TouchableOpacity>
+
+    )
+}
+
+
+
+const styles = StyleSheet.create({
+    container: {
+        display: 'flex',
+        minHeight: px2dp(44),
+        paddingLeft: px2dp(15),
+        paddingRight: px2dp(10),
+        backgroundColor: 'white',
+
+    },
+    warpper: {
+        flexGrow: 1,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        position: 'relative',
+    },
+    middle: {
+        flexGrow: 1,
+        flexShrink: 1,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        // backgroundColor: 'cyan'
+    },
+    title: {
+        // backgroundColor: 'red',
+        flexGrow: 0,
+        flexShrink: 0,
+        fontSize: px2sp(14),
+        color: '#333333'
+    },
+    content: {
+        // backgroundColor: 'yellow',
+        flexGrow: 1,
+        flexShrink: 1,
+        fontSize: px2sp(14),
+        color: '#666666',
+        textAlign: 'right'
+    },
+})

package/lib/TableCell/index.ts

@@ -0,0 +1,45 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-04-21 15:30:07
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-05-07 17:11:32
+ * @FilePath: /@aks/easyui/lib/TableCell/index.ts
+ */
+
+import * as React from 'react'
+
+import {
+    StyleProp, ViewStyle,
+    ImageSourcePropType, ImageStyle, TextProps, ColorValue
+} from 'react-native'
+
+
+
+
+export type TableCellProps = {
+    icon: ImageSourcePropType;
+    iconStyle: StyleProp<ImageStyle>;
+
+    title: string | number | React.ReactElement | undefined;
+    titleOptions: TextProps;
+
+
+    style: StyleProp<ViewStyle> | undefined;
+    activeOpacity: number;
+    middleContaierStyle: StyleProp<ViewStyle> | undefined;
+
+
+    content: string | number | React.ReactElement | undefined;
+    contentOptions: TextProps;
+
+    onPress: () => void;
+    showUnderline: boolean;
+    underlineStyle?: {
+        borderBottomColor?: ColorValue | undefined;
+        borderBottomWidth?: number | undefined;
+    }
+    showNav: boolean;
+}
+
+
+export declare const TableCell: React.FC<Partial<TableCellProps>>;

package/lib/TextInputArea/TextInputArea.tsx

@@ -0,0 +1,88 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-04-24 13:56:47
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-05-09 16:00:27
+ * @FilePath: /@aks/easyui/lib/TextInputArea/TextInputArea.tsx
+ */
+import React from 'react'
+import { View, Text, TextInput, StyleSheet } from 'react-native'
+import {px2dp} from '../../screen/px2dp'
+import {px2sp} from '../../screen/px2sp'
+
+
+import type { TextInputAreaProps, TextInputAreaCurrent } from '.'
+
+export default React.forwardRef<TextInputAreaCurrent, Partial<TextInputAreaProps>>((props, ref) => {
+    const { defaultValue, placeholder, maxLength = 200, on, ...rest } = props
+
+    const [value, setValue] = React.useState<string | undefined>(defaultValue)
+
+    React.useLayoutEffect(() => {
+        setValue(defaultValue)
+    }, [defaultValue])
+
+
+    React.useImperativeHandle<unknown,TextInputAreaCurrent>(ref, () => ({
+        value: value,
+    }), [value])
+
+    return (
+        <View style={[styles.container, rest.style]}>
+
+
+            <TextInput
+                {...rest}
+                style={styles.textInput}
+                value={value}
+                onChangeText={txt => {
+                    setValue(txt);
+                    on && on(txt);
+                }}
+                multiline={true}
+                textAlignVertical={'top'}
+                maxLength={maxLength}
+                placeholder={placeholder}
+
+            />
+
+            <View style={styles.corner}>
+                <Text style={styles.limit}>
+                    <Text style={{ ...styles.limit, color: value && value?.length > (maxLength - 5) ? 'red' : '#AFAFAF' }}>{value?.length || 0}</Text>
+                    /
+                    {maxLength}
+                </Text>
+            </View>
+        </View>
+    )
+})
+
+
+
+const styles = StyleSheet.create({
+    container: {
+        // backgroundColor: '#F5F5F5',
+        minHeight: px2dp(200),
+        // borderRadius: px2dp(10),
+        backgroundColor:'white'
+    },
+    textInput: {
+        flex: 1,
+        margin: px2dp(15),
+        marginBottom: px2dp(8),
+        // backgroundColor: 'red'
+    },
+    corner: {
+        // position: 'absolute',
+        // backgroundColor:'cyan',
+        marginHorizontal: px2dp(15),
+        marginBottom: px2dp(8)
+    },
+    limit: {
+        textAlign: 'right',
+        fontSize: px2sp(10),
+        color: '#AFAFAF'
+    },
+
+
+})

package/lib/TextInputArea/index.ts

@@ -0,0 +1,32 @@
+/*
+ * @Author: shiguo
+ * @Date: 2022-04-24 13:59:32
+ * @LastEditors: shiguo
+ * @LastEditTime: 2022-04-26 12:31:51
+ * @FilePath: /@aks/easy/lib/TextInputArea/index.ts
+ */
+import * as  React from 'react'
+import { ViewStyle, StyleProp, TextInputProps } from 'react-native'
+
+
+export type TextInputAreaProps = {
+    placeholder: string,
+    maxLength: number,
+    style: StyleProp<ViewStyle>,
+    /**设置默认值 */
+    defaultValue: string,
+    /*监听content的变化*/
+    on: (content: string) => void
+} & TextInputProps
+
+
+
+
+export type TextInputAreaCurrent = {
+    value: string | undefined;
+}
+
+
+export declare const TextInputArea: React.ForwardRefExoticComponent<React.PropsWithoutRef<Partial<TextInputAreaProps>> & React.RefAttributes<TextInputAreaCurrent>>;
+
+