react-native-boxes 1.0.0

package/src/Input.tsx

@@ -0,0 +1,244 @@
+import { ReactNode, useContext, useEffect, useState } from "react";
+import { GestureResponderEvent, TextInput, TextInputProps, TouchableOpacity } from "react-native";
+import { ThemeContext } from "./ThemeContext";
+import { assignFields, isWeb } from "./utils";
+import { HBox, VBox } from "./Box";
+import { TextView } from "./Text";
+import { Icon } from "./Image";
+
+
+/**
+ * 
+ * @param initialText if you use initialText then you dont need to maintain the 2 way binding between value and setValue, just enjoy props.onChangeText events
+ * @returns 
+ */
+export function TextInputView(props: TextInputProps & {
+    initialText?: string,
+    pattern?: string,
+}) {
+    const theme = useContext(ThemeContext)
+    const [text, setText] = useState(props.initialText)
+    const [focused, setFocused] = useState(false)
+    function onTextChange(newText: string) {
+        setText(newText)
+        props.onChangeText && props.onChangeText(newText)
+    }
+
+    return (
+        <TextInput
+            {...props}
+            onFocus={(e) => {
+                setFocused(true)
+                props.onFocus && props.onFocus(e)
+            }}
+            onBlur={(e) => {
+                setFocused(false)
+                props.onBlur && props.onBlur(e)
+            }}
+            value={props.value || text}
+            onChangeText={(newText) => {
+                if (props.pattern) {
+                    const re = new RegExp(props.pattern);
+                    if (newText === "" || re.test(newText)) {
+                        onTextChange(newText)
+                    }
+                } else {
+                    onTextChange(newText)
+                }
+            }}
+            style={[{
+                color: theme.colors.text,
+                textAlignVertical: "top",
+                width: 'auto',
+                fontSize: theme.dimens.font.md,
+                fontFamily: theme.fonts.Regular,
+                padding: theme.dimens.space.md,
+                paddingStart: theme.dimens.space.md,
+                paddingBottom: isWeb() ? theme.dimens.space.md : theme.dimens.space.sm / 2,
+                margin: theme.dimens.space.sm,
+                borderWidth: focused ? 1.5 : 1.5,
+                borderRadius: theme.dimens.space.sm,
+                borderColor: !focused ? theme.colors.caption : theme.colors.accent
+            }, isWeb() ? {
+                //@ts-ignore
+                outline: 'none',
+            } : {},
+            props.style]}
+        />
+    )
+}
+
+
+/**
+ * Note: if input is inside a ScrollView in heirarchy anywhere then add keyboardShouldPersistTaps={'handled'}
+ * to the scrollview else the icon click wont work
+ * In case, you textinput is getting hidden due to keyboard see https://stackoverflow.com/a/77563800/6865753
+
+ * @param props 
+ * @returns 
+ */
+export function CompositeTextInputView(props: TextInputProps & {
+    hint?: string,
+    alertText?: string,
+    alertTextColor?: string,
+    pattern?: string,
+    initialText?: string,
+    icon?: 'close' | 'eye' | string | React.Component,
+    onIconPress?: ((event: GestureResponderEvent) => void) | undefined
+}) {
+    const theme = useContext(ThemeContext)
+    const [text, setText] = useState(props.initialText)
+    const [alerttext, setAlertText] = useState(props.alertText)
+    const [focused, setFocused] = useState(false)
+    function onTextChange(newText: string) {
+        setText(newText)
+        props.onChangeText && props.onChangeText(newText)
+    }
+    const fontStyles: any = assignFields({}, props.style,
+        [
+            "returnKeyType",
+            "keyboardType",
+            "textContentType",
+            "multiline",
+            "fontFamily",
+            "fontSize",
+            "fontWeight",
+            "fontVariant",
+            "color",
+            "inputMode"
+        ])
+    var hintVisible = false
+    if (props.placeholder && props.placeholder.length > 0 && focused) {
+        hintVisible = true
+    }
+    if (!focused && text && text.length > 0) {
+        hintVisible = true
+    }
+    if (!props.placeholder) {
+        hintVisible = false
+    }
+    // (focused || ((text ||
+    //     props.value == undefined ? props.placeholder : props.value || ''
+    // )?.length || 0) > 0)
+    // if (!hintVisible && props.placeholder != undefined && props.placeholder?.length > 0 && text != undefined && text?.length > 0) {
+    //     hintVisible = false
+    // }
+    const alertVisible = alerttext && alerttext.length
+    useEffect(() => {
+        setText(props.value)
+    }, [props.value])
+    useEffect(() => {
+        setAlertText(props.alertText)
+    }, [props.alertText])
+
+    //@ts-ignore
+    const IconComponent: ReactNode = typeof props.icon == 'string' ? (
+        <Icon
+            color={!focused ? theme.colors.caption : theme.colors.accent}
+            style={{
+                minWidth: isWeb() ? theme.dimens.icon.lg : theme.dimens.icon.sm,
+                padding: theme.dimens.space.sm / 2,
+            }} name={props.icon} />
+    ) : props.icon
+
+    return (
+        <HBox style={[{
+            paddingEnd: theme.dimens.space.md,
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            padding: 0,
+            paddingStart: theme.dimens.space.sm * 1.5,
+            margin: theme.dimens.space.sm,
+            borderWidth: 1.5,
+            borderRadius: theme.dimens.space.sm,
+            borderColor: !focused ? theme.colors.caption : theme.colors.accent,
+        }, (!hintVisible && !alertVisible) ? {
+            paddingTop: theme.dimens.space.sm,
+            paddingBottom: theme.dimens.space.sm
+        } : {
+
+        }, props.style]}>
+
+
+            <VBox style={[{
+                flex: 1,
+                paddingBottom: alertVisible ? 0 : theme.dimens.space.sm
+            }, hintVisible ? {
+            } : {
+                paddingTop: theme.dimens.space.sm
+            }]}>
+                {hintVisible && <TextView
+                    style={{
+                        padding: 0,
+                        margin: 0,
+                        fontSize: theme.dimens.font.sm,
+                        color: !focused ? theme.colors.caption : theme.colors.accent,
+
+                    }}
+                >{props.placeholder}</TextView>}
+                <TextInput
+                    selectionColor={props.selectionColor || theme.colors.accent}
+                    secureTextEntry={props.secureTextEntry}
+                    placeholderTextColor={theme.colors.caption}
+                    placeholder={hintVisible ? '' : props.placeholder}
+                    keyboardType={props.keyboardType}
+                    returnKeyType={props.returnKeyType || 'default'}
+                    onFocus={(e) => {
+                        setFocused(true)
+                        props.onFocus && props.onFocus(e)
+                    }}
+                    onBlur={(e) => {
+                        setFocused(false)
+                        props.onBlur && props.onBlur(e)
+                    }}
+                    value={props.value || text}
+                    onChangeText={(newText) => {
+                        if (props.pattern) {
+                            const re = new RegExp(props.pattern);
+                            if (newText === "" || re.test(newText)) {
+                                onTextChange(newText)
+                            }
+                        } else {
+                            onTextChange(newText)
+                        }
+                    }}
+                    style={[{
+                        color: theme.colors.text,
+                        fontSize: theme.dimens.font.md,
+                        fontFamily: theme.fonts.Regular,
+                    }, isWeb() ? {
+                        //@ts-ignore
+                        outline: 'none',
+                    } : {
+
+                    }, fontStyles]}
+                />
+                {
+                    alertVisible && <TextView
+                        style={{
+                            color: props.alertTextColor || theme.colors.critical,
+                            padding: 0,
+                            margin: 0,
+                            paddingBottom: theme.dimens.space.sm,
+                            fontSize: theme.dimens.font.sm,
+                        }}
+                    >{alerttext}</TextView>
+                }
+            </VBox>
+            {
+                props.icon != undefined &&
+                <TouchableOpacity onPress={(e) => {
+                    if (!props.onIconPress && props.icon == 'close') {
+                        onTextChange('')
+                    }
+                    props.onIconPress && props.onIconPress(e)
+                }}>
+                    {
+                        (IconComponent)
+                    }
+                </TouchableOpacity>
+            }
+
+        </HBox >
+    )
+}

package/src/Message.tsx

@@ -0,0 +1,90 @@
+import { HBox } from "./Box";
+import * as React from "react";
+import { useContext } from 'react'
+import { ThemeContext } from "./ThemeContext";
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+import { Platform, Pressable, Text, ViewProps } from "react-native";
+import { TextView } from "./Text";
+
+
+
+export function AlertMessage(props:
+    ViewProps & {
+        text: string,
+        type?: 'info' | 'success' | 'warning' | 'critical',
+        onDismiss?: Function
+
+    }) {
+    const theme = useContext(ThemeContext)
+    const type = props.type || 'info'
+    //@ts-ignore
+    let icon: 'info-circle' | 'warning' = {
+        'info': 'info-circle',
+        'success': 'check-circle',
+        'warning': 'info-circle',
+        'critical': 'warning'
+    }[type]
+
+    let color = {
+        'info': '#2196F3',
+        'success': '#4CAF50',
+        'warning': '#FFC107',
+        'critical': '#F44336'
+    }[type];
+
+    if (!props.text || props.text.length < 1) {
+        return undefined
+    }
+
+    return (
+        <HBox style={[{
+            flex: 1,
+            margin: theme.dimens.space.sm,
+            backgroundColor: theme.colors[type] || color,
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            flexDirection: 'row',
+            paddingStart: theme.dimens.space.md,
+            paddingEnd: theme.dimens.space.md,
+            paddingBottom: props.text.length > 40 && Platform.OS == 'web' ?
+                theme.dimens.space.lg : theme.dimens.space.md,
+            paddingTop: props.text.length > 40 && Platform.OS == 'web' ?
+                theme.dimens.space.lg : theme.dimens.space.md,
+            borderRadius: theme.dimens.space.sm,
+        }, props.style]}>
+
+            <HBox style={{
+                flex: 0.93,
+                alignItems: 'center',
+            }}>
+                <FontAwesome
+                    style={{
+                        marginRight: theme.dimens.space.md
+                    }}
+                    name={icon}
+                    size={theme.dimens.icon.md}
+                    color={theme.colors.invert.text} />
+                <TextView style={{
+                    flexShrink: 1,
+                    padding: 0,
+                    color: theme.colors.invert.text,
+                }}>{props.text}
+                </TextView>
+            </HBox>
+            {
+                props.onDismiss && <Pressable
+                    style={{
+                        flexDirection: 'row-reverse',
+                        flex: 0.06,
+                    }}
+                    onPress={() => {
+                        props.onDismiss && props.onDismiss()
+                    }}>
+                    <FontAwesome name={'close'}
+                        size={theme.dimens.icon.md}
+                        color={theme.colors.invert.text} />
+                </Pressable>
+            }
+        </HBox>
+    )
+}

package/src/Modal.tsx

@@ -0,0 +1,306 @@
+import * as React from 'react';
+import { useContext, useEffect, useRef, useState } from 'react';
+import { Animated, Easing, LayoutChangeEvent, Modal, Platform, Pressable, ScrollView, StyleProp, StyleSheet, TextStyle, TouchableHighlight, TouchableOpacity, View, ViewProps } from 'react-native';
+import { Icon, IconProps } from './Image';
+import { isDesktop } from './utils';
+import { ThemeContext } from './ThemeContext';
+import { Center, HBox, VBox } from './Box';
+import { Subtitle, Title } from './Text';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+export type BottomSheetProps = {
+    visible: boolean,
+    title?: string | React.Component,
+    cancellable?: boolean
+    children: any
+    onDismiss?: Function
+}
+export const BottomSheet = (props: BottomSheetProps) => {
+    const [modalVisible, setModalVisible] = useState(false);
+    const theme = useContext(ThemeContext)
+    let cancellable = props.cancellable != undefined ?
+        props.cancellable : true
+
+    useEffect(() => {
+        setModalVisible(props.visible)
+    }, [props.visible])
+
+    function cancel() {
+        setModalVisible(false)
+        if (props.onDismiss) {
+            props.onDismiss()
+        }
+    }
+
+    return (
+        <View style={styles.container}>
+            <Modal
+                onDismiss={() => {
+
+                }}
+                animationType="fade"
+                transparent={true}
+                visible={modalVisible}
+                onRequestClose={() => {
+                    cancel()
+                }}
+            >
+                <TouchableHighlight
+                    onPress={() => {
+                        cancel()
+                    }}
+                    style={{
+                        flex: 1,
+                        backgroundColor: 'rgba(0, 0, 0, 0.5)'
+                    }}>
+                    <View />
+                </TouchableHighlight>
+
+            </Modal>
+
+            <Modal
+                onDismiss={() => {
+                    cancel()
+                }}
+                style={{
+                    flex: 1
+                }}
+                animationType="slide"
+                transparent={true}
+                visible={modalVisible}
+                onRequestClose={() => cancel()}
+            >
+                <View style={[styles.modalContainer, {
+                    backgroundColor: theme.colors.forground
+                }]}>
+                    <View style={[{
+                        paddingTop: theme.dimens.space.md,
+                        paddingStart: theme.dimens.space.lg,
+                        paddingEnd: theme.dimens.space.lg,
+                    }]}>
+                        <HBox style={{
+                            justifyContent: 'space-between',
+                            width: '100%'
+                        }}>
+                            <View style={{ width: theme.dimens.icon.md }} />
+                            {
+                                typeof props.title == 'string' ? (
+                                    <Subtitle style={{
+                                        fontFamily: theme.fonts.Bold
+                                    }}>{props.title.toString()}</Subtitle>
+                                ) : <>{props.title}</>
+                            }
+                            {
+                                cancellable ? (<TouchableOpacity
+                                    style={{
+                                        padding: theme.dimens.space.sm
+                                    }}
+                                    onPress={() => {
+                                        cancel()
+                                    }}>
+                                    <Icon
+                                        color={theme.colors.caption} name="close" />
+                                </TouchableOpacity>) : (
+                                    <View style={{ width: theme.dimens.icon.md }} />
+                                )
+                            }
+                        </HBox>
+                        <VBox style={{
+                            width: '100%'
+                        }}>
+                            <ScrollView
+                                nestedScrollEnabled={true}
+                                showsVerticalScrollIndicator={false}
+                                style={{
+                                    flex: 1,
+                                    maxHeight: 500,
+                                }}>
+                                {props.children}
+                            </ScrollView>
+                        </VBox>
+                    </View>
+                </View>
+            </Modal>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    modalContainer: isDesktop() ? {
+        marginLeft: '20%',
+        marginRight: '20%',
+        marginBottom: '1%',
+        width: '60%',
+        overflow: 'hidden',
+        borderBottomRightRadius: 20,
+        borderBottomLeftRadius: 20,
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 0,
+    } : {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+    }
+});
+
+
+
+
+export function Expand(props: ViewProps & {
+    title?: string,
+    iconName?: string,
+    iconPosition?: 'left' | 'right',
+    titleStyle?: StyleProp<TextStyle>,
+    titleBackgroundColor?: string,
+    iconStyle?: IconProps,
+    initialExpand?: boolean,
+    duration?: number,
+    onChange?: (isExpanded: boolean) => void
+}) {
+    const theme = useContext(ThemeContext);
+    const [expanded, setExpanded] = useState(props.initialExpand != undefined ? props.initialExpand : false);
+    const [contentHeight, setContentHeight] = useState<number | null>(null);
+    const spinValue = useRef(new Animated.Value(expanded ? 1 : 0)).current;
+    const [initDone, setInitDone] = useState(false)
+
+    const [fadeAnim] = useState(new Animated.Value(0));
+
+    useEffect(() => {
+        Animated.timing(spinValue, {
+            toValue: expanded ? 1 : 0,
+            duration: props.duration || 200,
+            easing: Easing.ease,
+            useNativeDriver: false
+        }).start();
+
+        Animated.timing(
+            fadeAnim,
+            {
+                toValue: expanded ? 0 : -20,
+                duration: props.duration || 200, // Animation duration in milliseconds
+                useNativeDriver: true // Add this line for better performance
+            }
+        ).start();
+    }, [expanded]);
+
+    useEffect(() => {
+        setInitDone(true)
+    }, [])
+
+    const toggleExpand = () => {
+        if (props.onChange) {
+            props.onChange(!expanded);
+        }
+        setExpanded(!expanded);
+    };
+    var onLayoutContent = (event: LayoutChangeEvent) => {
+        if (!contentHeight) {
+            setContentHeight(event.nativeEvent.layout.height);
+        }
+    };
+
+    if (Platform.OS == "web") {
+        const [initalLayoutWait, setinitalLayoutWait] = useState(false)
+        useEffect(() => {
+            setTimeout(() => {
+                setinitalLayoutWait(true)
+            }, 2000)
+        }, [])
+        onLayoutContent = (event: LayoutChangeEvent) => {
+            if (!contentHeight && initalLayoutWait) {
+                setContentHeight(event.nativeEvent.layout.height);
+            }
+        };
+    }
+
+    const spinInterpolated = spinValue.interpolate({
+        easing: Easing.ease,
+        inputRange: [0, 1],
+        outputRange: ['0deg', '90deg']
+    });
+
+    const ExpandIcon = () => {
+        const insets = useSafeAreaInsets()
+        return (
+            <Pressable
+                style={[{
+                    borderRadius: theme.dimens.space.md,
+                    padding: theme.dimens.space.md,
+                }, {
+                    backgroundColor: props.titleBackgroundColor
+                }]}
+                onPress={toggleExpand}>
+                <Center style={props.iconPosition == 'right' ? {
+                    paddingLeft: theme.dimens.space.sm,
+                    justifyContent: 'space-between',
+                    flexDirection: 'row-reverse',
+                } : {
+                    justifyContent: 'flex-start',
+                    flexDirection: 'row',
+                }}>
+                    <Animated.View
+                        style={{
+                            transform: [{ rotate: spinInterpolated }],
+                        }}>
+                        <Icon
+                            color={theme.colors.text}
+                            {...props.iconStyle}
+                            name={props.iconName || 'chevron-right'}
+                        />
+                    </Animated.View>
+                    <HBox style={{
+                        width: theme.dimens.space.sm
+                    }} />
+                    <Title style={[{
+                        padding: 0,
+                        paddingLeft: props.iconPosition == 'right' ? 0 :
+                            theme.dimens.space.sm,
+                        margin: 0,
+                        fontSize: theme.dimens.font.md
+                    }, props.titleStyle]}>{props.title}</Title>
+                </Center>
+            </Pressable >
+        )
+    }
+
+    return (
+        <VBox
+            style={[{
+                padding: 0,
+                borderRadius: theme.dimens.space.md,
+                margin: theme.dimens.space.sm
+            }, {
+                justifyContent: (props.iconPosition) == 'right' ? 'space-between' : 'flex-start'
+            }, props.style]}>
+            <ExpandIcon />
+            <Animated.View
+                style={{
+                    zIndex: -1,
+                    transform: [{ translateY: fadeAnim }],
+                    height: expanded ? 'auto' : 0,
+                    overflow: 'hidden'
+                }}
+                onLayout={onLayoutContent}>
+                {
+                    (expanded || initDone) && (
+                        <VBox onLayout={onLayoutContent} >
+                            {props.children}
+                        </VBox>
+                    )
+                }
+            </Animated.View>
+        </VBox>
+    );
+}