ripal-ui 1.1.395 → 2.0.2

package/components/Checkbox.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { StyleSheet, TouchableOpacity } from "react-native";
+import COLORS from "./COLORS";
+import MaterialIcons from "@react-native-vector-icons/material-icons";
+
+const Checkbox = ({size = 20, active, color = COLORS.primary, setActive, icon = null, iconSize = 14}) => {
+    return (
+        <TouchableOpacity style={[
+            styles.box,
+            { 
+                height: size,
+                borderColor: active ? color : COLORS.slate[300],
+                backgroundColor: active ? color : '#ffffff00'
+            }
+        ]} onPress={() => {
+            setActive(!active);
+        }}>
+            {
+                active &&
+                <>
+                { icon !== null ? icon :
+                <MaterialIcons name="check" size={iconSize} color={'#fff'} />}
+                </>
+            }
+        </TouchableOpacity>
+    )
+}
+
+const styles = StyleSheet.create({
+    box: {
+        borderWidth: 1,
+        borderRadius: 6,
+        aspectRatio: 1,
+        alignItems: 'center',
+        justifyContent: 'center'
+    }
+})
+
+export default Checkbox;

package/components/Dialog.jsx

@@ -0,0 +1,188 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+import { Keyboard, KeyboardAvoidingView, Modal, Platform, Pressable, StyleSheet, TouchableWithoutFeedback, View } from "react-native";
+import Text from "./Text";
+import Inline from "./Inline";
+import COLORS from "./COLORS";
+import Button from "./Button";
+import MaterialIcons from "@react-native-vector-icons/material-icons";
+
+const DialogContext = createContext(null);
+
+const useDialog = () => {
+    const ctx = useContext(DialogContext);
+    if (!ctx) throw new Error("Dialog subcomponents must be used inside Dialog");
+    return ctx;
+};
+
+const Dialog = ({
+    children,
+    visible = false,
+    onClose,
+    setVisible = null,
+    keyboardOffset = 0
+}) => {
+
+    const [isVisible, setIsVisible] = useState(visible);
+
+    useEffect(() => {
+        setIsVisible(visible);
+    }, [visible]);
+
+    const closeHandler = () => {
+        const next = false;
+
+        if (onClose) onClose();
+        if (setVisible) setVisible(next);
+
+        setIsVisible(next);
+    };
+
+    return (
+        <DialogContext.Provider
+            value={{
+                visible: isVisible,
+                close: closeHandler,
+                setVisible
+            }}
+        >
+            <Modal
+                transparent
+                visible={isVisible}
+                onRequestClose={closeHandler}
+                statusBarTranslucent
+                animationType="fade"
+            >
+                <KeyboardAvoidingView
+                    style={styles.wrapper}
+                    behavior={Platform.OS === "ios" ? "padding" : "height"}
+                    keyboardVerticalOffset={keyboardOffset}
+                >
+
+                    {/* tap outside dialog */}
+                    <Pressable
+                        style={StyleSheet.absoluteFill}
+                        onPress={closeHandler}
+                    />
+
+                    {/* dismiss keyboard when tap inside empty area */}
+                    <TouchableWithoutFeedback onPress={() => {
+                        Keyboard.dismiss();
+                        closeHandler();
+                    }}>
+                        <View style={styles.center}>
+                            <Pressable
+                                style={styles.container}
+                                onPress={(e) => e.stopPropagation()}
+                            >
+                                {children}
+                            </Pressable>
+                        </View>
+                    </TouchableWithoutFeedback>
+
+                </KeyboardAvoidingView>
+            </Modal>
+        </DialogContext.Provider>
+    );
+};
+
+Dialog.Body = ({ children, gap = 20 }) => {
+    const { close } = useDialog();
+
+    return (
+        <View style={{padding: 20, gap: gap }}>
+            {children}
+        </View>
+    )
+}
+
+Dialog.Title = ({ children, withClose = true }) => {
+    const { close } = useDialog();
+
+    return (
+        <Inline style={{padding: 20}}>
+            {
+                typeof children === "string"
+                    ? (
+                        <Text
+                            size={20}
+                            color={COLORS.slate[800]}
+                            style={styles.title_text}
+                        >
+                            {children}
+                        </Text>
+                    )
+                    : (
+                        <View style={{ gap: 5, flexGrow: 1 }}>
+                            {children}
+                        </View>
+                    )
+            }
+
+            {withClose && (
+                <Button
+                    circle
+                    color={`${COLORS.slate[200]}aa`}
+                    onPress={close}
+                >
+                    <MaterialIcons name="close" />
+                </Button>
+            )}
+        </Inline>
+    );
+};
+
+Dialog.Actions = ({ children, gap = 10 }) => {
+    return (
+        <Inline style={[styles.action_area]} gap={gap}>
+            {children}
+        </Inline>
+    );
+};
+
+const styles = StyleSheet.create({
+    wrapperss: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexGrow: 1,
+        position: 'absolute',
+        top: 0,left: 0,right: 0,bottom: 0,
+        backgroundColor: '#00000080',
+        padding: 20,
+    },
+    wrapper: {
+        flex: 1,
+        backgroundColor: '#00000080',
+    },
+    center: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        padding: 20,
+    },
+    container: {
+        backgroundColor: "#fff",
+        borderRadius: 14,
+        width: "100%",
+        maxWidth: 500,
+    },
+    containerss: {
+        backgroundColor: '#fff',
+        padding: 0,
+        flexGrow: 1,
+        borderRadius: 14,
+    },
+    title_text: {
+        fontWeight: '700',
+        flexGrow: 1,
+    },
+    action_area: {
+        padding: 20,
+        justifyContent: 'flex-end',
+        backgroundColor: COLORS.slate[100],
+        borderBottomLeftRadius: 14,
+        borderBottomRightRadius: 14,
+        marginTop: 20,
+    }
+})
+
+export default Dialog;

package/components/Divider.jsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { StyleSheet, TouchableOpacity, View } from "react-native";
+import Text from "./Text";
+import Inline from "./Inline";
+import COLORS from "./COLORS";
+
+const Divider = ({label = null, labelBackgroundColor = '#fff', labelStyle, labelPosition = "center", labelColor = COLORS.slate[500], height = 0.5, color = COLORS.slate[300]}) => {
+    const positionToFlex = {
+        left: "flex-start",
+        center: "center",
+        right: "flex-end"
+    };
+
+    return (
+        <Inline style={styles.container}>
+            <View style={[
+                styles.line,
+                {
+                    backgroundColor: color,
+                    height,
+                }
+            ]} />
+            {
+                label !== null &&
+                <Inline style={styles.label_container} justifyContent={positionToFlex[labelPosition.toLowerCase()]}>
+                    <Inline style={[
+                        styles.label_area,
+                        {
+                            backgroundColor: labelBackgroundColor,
+                        },
+                        labelStyle
+                    ]}>
+                        { typeof label === "string" ?
+                            <Text color={labelColor} size={12}>{label}</Text>
+                        :
+                            label
+                        }
+                    </Inline>
+                </Inline>
+            }
+        </Inline>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        position: 'relative'
+    },
+    line: {
+        flexGrow: 1,
+    },
+    label_area: {
+        padding: 5,
+        paddingHorizontal: 15,
+    },
+    label_container: {
+        position: 'absolute',
+        left: 0,right: 0,
+    }
+});
+
+export default Divider;

package/components/Dropdown.jsx

@@ -0,0 +1,229 @@
+import React, { useRef, useState } from "react";
+import {
+    View,
+    Pressable,
+    ScrollView,
+    StyleSheet,
+    TouchableOpacity,
+    Modal,
+    Dimensions
+} from "react-native";
+import { MaterialIcons } from "@react-native-vector-icons/material-icons";
+import Inline from "./Inline";
+import Text from "./Text";
+import COLORS from "./COLORS";
+
+const Dropdown = ({
+    label = "Pick one",
+    options = [],
+    objectKey = null,
+    keyExtractor = null,
+    value = null,
+    onChange = () => {},
+    labelStyle,
+    style,
+    inputStyle,
+}) => {
+
+    const triggerRef = useRef(null);
+    const [visible, setVisible] = useState(false);
+    const [layout, setLayout] = useState(null);
+
+    const screenHeight = Dimensions.get("window").height;
+
+    const getLabel = (item) => {
+        if (item === null || item === undefined) return "";
+        if (typeof item === "string") return item;
+        if (typeof item === "object") {
+            if (objectKey && item[objectKey] !== undefined) {
+                return item[objectKey];
+            }
+            return JSON.stringify(item);
+        }
+        return String(item);
+    };
+
+    const getKey = (item, index) => {
+        if (keyExtractor) return keyExtractor(item, index);
+        if (typeof item === "object" && item?.id !== undefined) {
+            return item.id.toString();
+        }
+        return index.toString();
+    };
+
+    const isSelected = (item) => {
+        if (!value) return false;
+
+        if (typeof item === "string") {
+            return value === item;
+        }
+
+        if (typeof item === "object") {
+            if (objectKey) {
+                return value?.[objectKey] === item?.[objectKey];
+            }
+            return value === item;
+        }
+
+        return false;
+    };
+
+    const openDropdown = () => {
+        if (!triggerRef.current) return;
+
+        triggerRef.current.measure((fx, fy, width, height, px, py) => {
+            setLayout({
+                x: px,
+                y: py,
+                width,
+                height
+            });
+            setVisible(true);
+        });
+    };
+
+    const closeDropdown = () => {
+        setVisible(false);
+    };
+
+    const handleSelect = (item) => {
+        onChange(item);
+        closeDropdown();
+    };
+
+    const dropdownPosition = () => {
+        if (!layout) return {};
+
+        const spaceBelow = screenHeight - (layout.y + layout.height);
+        const dropdownHeight = Math.min(options.length * 44, 250);
+
+        // If not enough space below, open upward
+        if (spaceBelow < dropdownHeight) {
+            return {
+                top: layout.y - dropdownHeight,
+                left: layout.x,
+                width: layout.width,
+                maxHeight: 250
+            };
+        }
+
+        // Default open downward
+        return {
+            top: layout.y + layout.height,
+            left: layout.x,
+            width: layout.width,
+            maxHeight: 250
+        };
+    };
+
+    return (
+        <View style={styles.wrapper}>
+            <Text
+                color={COLORS.slate[800]}
+                style={[{ fontWeight: "600" }, labelStyle]}
+            >
+                {label}
+            </Text>
+
+            <Pressable
+                ref={triggerRef}
+                style={[styles.box, style]}
+                onPress={openDropdown}
+            >
+                <Inline gap={10} alignItems="center">
+                    <View
+                        style={[
+                            {
+                                minHeight: 28,
+                                flex: 1,
+                                justifyContent: "center"
+                            },
+                            inputStyle
+                        ]}
+                    >
+                        <Text>
+                            {value ? getLabel(value) : "Select..."}
+                        </Text>
+                    </View>
+
+                    <MaterialIcons
+                        name={visible ? "expand-less" : "expand-more"}
+                        size={20}
+                    />
+                </Inline>
+            </Pressable>
+
+            <Modal
+                transparent
+                visible={visible}
+                animationType="fade"
+                onRequestClose={closeDropdown}
+            >
+                <Pressable
+                    style={styles.overlay}
+                    onPress={closeDropdown}
+                >
+                    {layout && (
+                        <View
+                            style={[
+                                styles.optionArea,
+                                dropdownPosition()
+                            ]}
+                        >
+                            <ScrollView>
+                                {options.map((item, index) => (
+                                    <TouchableOpacity
+                                        key={index}
+                                        style={[
+                                            styles.optionItem,
+                                            isSelected(item) && styles.selectedItem
+                                        ]}
+                                        onPress={() => handleSelect(item)}
+                                    >
+                                        <Text color={isSelected(item) ? COLORS.primary : null} style={{fontWeight: isSelected(item) ? '700' : '400'}}>
+                                            {getLabel(item)}
+                                        </Text>
+                                    </TouchableOpacity>
+                                ))}
+                            </ScrollView>
+                        </View>
+                    )}
+                </Pressable>
+            </Modal>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    wrapper: {
+        gap: 8,
+    },
+    box: {
+        borderWidth: 0.5,
+        borderRadius: 12,
+        borderColor: COLORS.slate[300],
+        padding: 10
+    },
+    overlay: {
+        flex: 1
+    },
+    optionArea: {
+        position: "absolute",
+        backgroundColor: "#fff",
+        borderRadius: 12,
+        borderWidth: 1,
+        borderColor: COLORS.slate[300],
+        elevation: 10,
+        padding: 10,
+        marginTop: 10
+    },
+    optionItem: {
+        padding: 15,
+        borderRadius: 8,
+    },
+    selectedItem: {
+        backgroundColor: `${COLORS.primary}15`
+    }
+});
+
+export default Dropdown;

package/components/Grid.jsx

@@ -0,0 +1,26 @@
+import React, { useEffect, useState, memo } from "react";
+import { StyleSheet, View } from "react-native";
+
+const Grid = ({ children, col = 2, gap = 20, style }) => {
+    const [containerWidth, setContainerWidth] = useState(0);
+    const [itemWidth, setItemWidth] = useState(0);
+    const handleLayout = (event) => {
+        const newWidth = event.nativeEvent.layout.width;
+        setContainerWidth(prev => (prev !== newWidth ? newWidth : prev));
+    };
+    useEffect(() => {
+        if (containerWidth > 0 && col > 0) {
+            const totalGap = gap * (col - 1);
+            const calculatedWidth = (containerWidth - totalGap) / col;
+            setItemWidth(prev => prev !== calculatedWidth ? calculatedWidth : prev);
+        }
+    }, [containerWidth, col, gap]);
+    return (React.createElement(View, { style: [styles.container, { gap }, style], onLayout: handleLayout }, React.Children.map(children, (child, index) => (React.createElement(View, { key: index, style: { width: itemWidth } }, child)))));
+};
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        flexWrap: "wrap"
+    }
+});
+export default memo(Grid);

package/components/Inline.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { StyleSheet, TouchableOpacity, View } from "react-native";
+
+const Inline = ({children, gap = 20, alignItems = 'center', justifyContent, onPress = null, onLongPress = null, style}) => {
+    let computedStyles = [
+        styles.container,
+        {
+            gap,
+            alignItems,
+            justifyContent
+        },
+        style
+    ];
+
+    if (onPress === null && onLongPress === null) {
+        return (
+            <View style={computedStyles}>
+                {children}
+            </View>
+        )
+    } else {
+        return (
+            <TouchableOpacity onPress={onPress} onLongPress={onLongPress} style={computedStyles}>
+                {children}
+            </TouchableOpacity>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        // flexWrap: 'wrap'
+    }
+})
+
+export default Inline;

package/components/Input.jsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useRef, useState } from "react";
+import Inline from "./Inline";
+import { Pressable, StyleSheet, TextInput, View } from "react-native";
+import Text from "./Text";
+import COLORS from "./COLORS";
+
+const Input = ({label = 'Nama', labelStyle, style, inputStyle, value, onChangeText, onChange, keyboardType = "default", onFocus, onBlur, left = null, right = null, ...props}) => {
+    const [isFocused, setFocused] = useState(false);
+    const inputRef = useRef(null);
+
+    return (
+        <Pressable style={[
+            styles.container
+        ]}>
+            <Text color={COLORS.slate[800]} style={[
+                {
+                    fontWeight: '600',
+                },
+                labelStyle
+            ]}>{label}</Text>
+            <Inline style={[
+                styles.box,
+                isFocused ? {borderColor: '#ffffff00'} : null,
+                style,
+            ]} gap={10}>
+                {
+                    isFocused &&
+                    <Pressable style={styles.input_active} />
+                }
+                {left}
+                <TextInput 
+                    ref={inputRef} 
+                    style={[
+                        {
+                            height: props?.multiline ? 'auto' : 28,
+                            minHeight: 28,
+                            flexGrow: 1,
+                            flexShrink: 1,
+                        }, 
+                        inputStyle
+                    ]} 
+                    onFocus={() => {
+                        setFocused(true);
+                        if (onFocus) {
+                            onFocus();
+                        }
+                    }} 
+                    onBlur={() => {
+                        setFocused(false);
+                        if (onBlur) {
+                            onBlur();
+                        }
+                    }}
+                    value={value} 
+                    onChangeText={e => {
+                        onChangeText(e);
+                    }} 
+                    onChange={onChange}
+                    keyboardType={keyboardType}
+                    {...props}
+                />
+                {right}
+            </Inline>
+        </Pressable>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        position: 'relative',
+        gap: 8,
+        flexGrow: 1,
+    },
+    box: {
+        borderWidth: 0.5,
+        borderRadius: 12,
+        borderColor: COLORS.slate[300],
+        padding: 10,
+    },
+    input_active: {
+        borderWidth: 4,
+        borderColor: `${COLORS.primary}40`,
+        position: 'absolute',
+        top: -3,left: -3,right: -3,bottom: -3,
+        borderRadius: 12,
+    }
+})
+
+export default Input;