ncore-ui-kit 1.0.0-pre-alpha.0

package/lib/src/components/textAreaInput/index.js

@@ -0,0 +1,279 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useImperativeHandle, forwardRef, useEffect, useState, useRef } from "react";
+import { TextInput as NativeTextInput, TouchableOpacity, Keyboard, Platform, View } from "react-native";
+import {} from "./type";
+import stylesheet, { getTextAreaInputType, useStyles } from "./stylesheet";
+import { NCoreUIKitLocalize, NCoreUIKitTheme } from "../../core/hooks";
+import {} from "../../types";
+import { BadgeQuestionMark as BadgeQuestionMarkIcon, BadgeAlert as BadgeAlertIcon, BadgeCheck as BadgeCheckIcon, BadgeInfo as BadgeInfoIcon, CircleX as CircleXIcon, BadgeX as BadgeXIcon } from "lucide-react-native";
+import Text from "../text";
+const TextInputTypeIcon = {
+    "question": BadgeQuestionMarkIcon,
+    "success": BadgeCheckIcon,
+    "warning": BadgeAlertIcon,
+    "info": BadgeInfoIcon,
+    "danger": BadgeXIcon
+};
+const TextAreaInput = ({ isAutoKeyboardDismissOnBlur = true, rightIcon: RightIconComponentProp, hintTextIcon: HintTextIconProp, spreadBehaviour = "baseline", isShowLengthLimiter = true, isShowHintTextIcon = false, isUpdateOnRealtime = false, icon: IconComponentProp, hintTextContainerStyle, isCleanEnabled = false, contentContainerStyle, subTitle = "Optional", onFocus: onFocusProp, isRequired = false, isDisabled = false, onBlur: onBlurProp, type = "default", rightIconOnPress, maxHeight = 350, customLocalize, rightIconStyle, isShowSubTitle, cleanIconStyle, onChangeText, initialValue, customTheme, placeholder, iconOnPress, isOptional, validation, inputStyle, maxLength, iconStyle, hintText, style, title, ...props }, ref) => {
+    const { inlineSpaces, typography, radiuses, borders, spaces, colors } = NCoreUIKitTheme.useContext(customTheme);
+    const { localize } = NCoreUIKitLocalize.useContext(customLocalize);
+    const currentType = getTextAreaInputType({
+        type
+    });
+    const inputRef = useRef(null);
+    const styleType = type === "default" ? "neutral" : type === "question" ? "neutral" : type === "danger" ? "error" : type;
+    const [value, setValue] = useState(initialValue ? initialValue : "");
+    const [isFocused, setIsFocused] = useState(false);
+    const { lengthLimiterContainer: lengthLimiterContainerDynamicStyle, titleContainer: titleContainerDynamicStyle, inputContainer: inputContainerDynamicStyle, hintTextIcon: hintTextIconDynamicStyle, cleanButton: cleanButtonDynamicStyle, rightIcon: rightIconDynamicStyle, container: containerDynamicStyle, hintText: hintTextDynamicStyle, required: requiredDynamicStyle, subTitle: subTitleDynamicStyle, content: contentDynamicStyle, overlay: overlayDynamicStyle, title: titleDynamicStyle, input: inputDynamicStyle, icon: iconDynamicStyle } = useStyles({
+        icon: IconComponentProp ? true : false,
+        spreadBehaviour,
+        inlineSpaces,
+        currentType,
+        isDisabled,
+        typography,
+        isFocused,
+        maxHeight,
+        radiuses,
+        borders,
+        spaces,
+        colors,
+        title,
+        type
+    });
+    useEffect(() => {
+        if (initialValue) {
+            inputRef.current?.setNativeProps({
+                text: initialValue
+            });
+        }
+    }, []);
+    useImperativeHandle(ref, () => ({
+        updateValue,
+        cleanText,
+        focus,
+        blur
+    }), []);
+    const titleProps = {
+        color: currentType.titleColor,
+        variant: "bodyLargeSize"
+    };
+    const iconProps = {
+        size: Number(typography.labelLargeSize.fontSize) + 6,
+        color: currentType.iconColor
+    };
+    if (isDisabled) {
+        iconProps.color = "disabled";
+    }
+    const blur = () => {
+        inputRef.current?.blur();
+    };
+    const focus = () => {
+        inputRef.current?.focus();
+    };
+    const cleanText = () => {
+        setValue("");
+        inputRef.current?.clear();
+        if (onChangeText) {
+            onChangeText("");
+        }
+    };
+    const updateValue = (text) => {
+        setValue(text);
+        inputRef.current?.setNativeProps({
+            text: text
+        });
+    };
+    const onFocus = () => {
+        setIsFocused(true);
+        if (onFocusProp)
+            onFocusProp();
+    };
+    const onBlur = () => {
+        setIsFocused(false);
+        inputRef.current?.blur();
+        if (isAutoKeyboardDismissOnBlur) {
+            Keyboard.dismiss();
+        }
+        if (onBlurProp)
+            onBlurProp();
+    };
+    const renderCleanButton = () => {
+        if (isDisabled) {
+            return null;
+        }
+        if (!isCleanEnabled || !value.length) {
+            return null;
+        }
+        return _jsx(TouchableOpacity, { style: [
+                cleanIconStyle,
+                stylesheet.cleanButton,
+                cleanButtonDynamicStyle
+            ], onPress: () => {
+                if (inputRef.current)
+                    inputRef.current?.clear();
+                if (onChangeText) {
+                    onChangeText("");
+                }
+                setValue("");
+            }, children: _jsx(CircleXIcon, { color: colors.content.icon[currentType.iconColor], size: 20 }) });
+    };
+    const renderIcon = () => {
+        if (!IconComponentProp) {
+            return null;
+        }
+        return _jsx(TouchableOpacity, { onPress: iconOnPress, style: [
+                iconStyle,
+                stylesheet.icon,
+                iconDynamicStyle
+            ], children: _jsx(IconComponentProp, { color: iconProps.color, size: iconProps.size }) });
+    };
+    const renderRightIcon = () => {
+        if (!RightIconComponentProp) {
+            return null;
+        }
+        if (isCleanEnabled && value.length > 0) {
+            return null;
+        }
+        return _jsx(TouchableOpacity, { onPress: rightIconOnPress, style: [
+                rightIconStyle,
+                stylesheet.rightIcon,
+                rightIconDynamicStyle
+            ], children: _jsx(RightIconComponentProp, { color: iconProps.color, size: iconProps.size }) });
+    };
+    const renderHintIcon = () => {
+        if (!isShowHintTextIcon) {
+            return null;
+        }
+        if (HintTextIconProp) {
+            return _jsx(HintTextIconProp, { color: isDisabled ? "disabled" : currentType.hintTextIconColor, size: 20, style: [
+                    stylesheet.hintTextIcon,
+                    hintTextIconDynamicStyle
+                ] });
+        }
+        const CurrentHintIcon = TextInputTypeIcon[type === "default" ? "question" : type];
+        let hintIconColor = colors.content.icon[currentType.hintTextIconColor];
+        if (isDisabled) {
+            hintIconColor = colors.system.state.content.disabled[styleType];
+        }
+        return _jsx(CurrentHintIcon, { color: hintIconColor, size: 20, style: [
+                stylesheet.hintTextIcon,
+                hintTextIconDynamicStyle
+            ] });
+    };
+    const renderHintText = () => {
+        if (!hintText) {
+            return null;
+        }
+        return _jsxs(View, { style: [
+                hintTextContainerStyle,
+                stylesheet.hintText,
+                hintTextDynamicStyle
+            ], children: [renderHintIcon(), _jsx(Text, { customColor: isDisabled ? colors.system.state.content.disabled[styleType] : undefined, color: currentType.hintTextColor, variant: "labelSmallSize", children: hintText })] });
+    };
+    const renderRequired = () => {
+        if (!isRequired) {
+            return null;
+        }
+        return _jsx(Text, { color: "danger", style: [
+                stylesheet.required,
+                requiredDynamicStyle
+            ], children: "*" });
+    };
+    const renderSubtitle = () => {
+        if (!isShowSubTitle && !isOptional) {
+            return null;
+        }
+        return _jsxs(Text, { variant: "labelLargeSize", color: titleProps.color, style: [
+                stylesheet.subTitle,
+                subTitleDynamicStyle
+            ], children: ["( ", isOptional ? localize("is-optional") : subTitle, " )"] });
+    };
+    const renderTitle = () => {
+        if (!title) {
+            return null;
+        }
+        return _jsxs(View, { style: [
+                stylesheet.titleContainer,
+                titleContainerDynamicStyle
+            ], children: [renderRequired(), _jsx(Text, { ...titleProps, variant: titleProps.variant, color: titleProps.color, style: [
+                        stylesheet.title,
+                        titleDynamicStyle
+                    ], children: title }), renderSubtitle()] });
+    };
+    const renderLengthLimiter = () => {
+        if (!isShowLengthLimiter || !maxLength) {
+            return null;
+        }
+        return _jsx(View, { style: [
+                stylesheet.lengthLimiterContainer,
+                lengthLimiterContainerDynamicStyle
+            ], children: _jsxs(Text, { children: [value.length, " / ", maxLength] }) });
+    };
+    const renderInput = () => {
+        return _jsxs(View, { style: [
+                stylesheet.inputContainer,
+                inputContainerDynamicStyle
+            ], children: [_jsx(NativeTextInput, { ...props, placeholderTextColor: colors.content.text[currentType.placeholderColor], underlineColorAndroid: "rgba(255,255,255,0)", placeholder: placeholder, allowFontScaling: false, editable: !isDisabled, maxLength: maxLength, multiline: true, onFocus: onFocus, onBlur: onBlur, ref: inputRef, onEndEditing: (t) => {
+                        const text = t.nativeEvent.text;
+                        if (!isUpdateOnRealtime) {
+                            if (validation) {
+                                if (validation(text)) {
+                                    setValue(text);
+                                    if (onChangeText)
+                                        onChangeText(text);
+                                }
+                            }
+                            else {
+                                setValue(text);
+                                if (onChangeText)
+                                    onChangeText(text);
+                            }
+                        }
+                    }, onChangeText: (text) => {
+                        if (isUpdateOnRealtime) {
+                            if (validation) {
+                                if (validation(text)) {
+                                    setValue(text);
+                                    if (onChangeText)
+                                        onChangeText(text);
+                                }
+                            }
+                            else {
+                                setValue(text);
+                                if (onChangeText)
+                                    onChangeText(text);
+                            }
+                        }
+                    }, style: [
+                        inputStyle,
+                        stylesheet.input,
+                        inputDynamicStyle
+                    ] }), renderLengthLimiter()] });
+    };
+    const renderOverlay = () => {
+        return _jsx(View, { style: [
+                stylesheet.overlay,
+                overlayDynamicStyle
+            ] });
+    };
+    return _jsxs(TouchableOpacity, { disabled: isDisabled, style: [
+            style,
+            stylesheet.container,
+            containerDynamicStyle
+        ], onPress: () => {
+            if (!isDisabled)
+                inputRef.current?.focus();
+        }, ...Platform.select({
+            web: {
+                dataSet: {
+                    disablePressableDownEffect: "true"
+                }
+            },
+            default: {}
+        }), children: [renderTitle(), _jsxs(View, { style: [
+                    contentContainerStyle,
+                    stylesheet.content,
+                    contentDynamicStyle
+                ], children: [renderOverlay(), renderIcon(), renderInput(), renderCleanButton(), renderRightIcon()] }), renderHintText()] });
+};
+export default forwardRef(TextAreaInput);

package/lib/src/components/textAreaInput/stylesheet.js

@@ -0,0 +1,240 @@
+import { StyleSheet } from "react-native";
+import {} from "./type";
+export const TEXT_AREA_INPUT_TYPE_STYLES = {
+    default: {
+        focusBorderColor: "emphasized",
+        borderColor: "emphasized",
+        hintTextIconColor: "mid",
+        placeholderColor: "low",
+        containerColor: "mid",
+        hintTextColor: "mid",
+        titleColor: "high",
+        inputColor: "mid",
+        iconColor: "mid"
+    },
+    danger: {
+        placeholderColor: "dangerLow",
+        hintTextIconColor: "danger",
+        focusBorderColor: "danger",
+        containerColor: "danger",
+        hintTextColor: "danger",
+        borderColor: "danger",
+        titleColor: "danger",
+        inputColor: "danger",
+        iconColor: "danger"
+    },
+    success: {
+        placeholderColor: "successLow",
+        hintTextIconColor: "success",
+        focusBorderColor: "success",
+        containerColor: "success",
+        hintTextColor: "success",
+        borderColor: "success",
+        titleColor: "success",
+        inputColor: "success",
+        iconColor: "success"
+    },
+    warning: {
+        placeholderColor: "warningLow",
+        hintTextIconColor: "warning",
+        focusBorderColor: "warning",
+        containerColor: "warning",
+        hintTextColor: "warning",
+        borderColor: "warning",
+        titleColor: "warning",
+        inputColor: "warning",
+        iconColor: "warning"
+    },
+    info: {
+        placeholderColor: "infoLow",
+        hintTextIconColor: "info",
+        focusBorderColor: "info",
+        containerColor: "info",
+        hintTextColor: "info",
+        borderColor: "info",
+        titleColor: "info",
+        inputColor: "info",
+        iconColor: "info"
+    },
+    question: {
+        focusBorderColor: "emphasized",
+        borderColor: "emphasized",
+        hintTextIconColor: "mid",
+        placeholderColor: "low",
+        containerColor: "mid",
+        hintTextColor: "mid",
+        titleColor: "mid",
+        inputColor: "mid",
+        iconColor: "mid"
+    }
+};
+export const getTextAreaInputType = ({ type }) => {
+    const currentType = TEXT_AREA_INPUT_TYPE_STYLES[type];
+    return currentType;
+};
+const stylesheet = StyleSheet.create({
+    container: {
+        flexDirection: "column",
+        boxSizing: "border-box",
+        display: "flex"
+    },
+    content: {
+        alignItems: "flex-start",
+        boxSizing: "border-box",
+        flexDirection: "row",
+        borderStyle: "solid",
+        position: "relative",
+        display: "flex",
+        minWidth: 250
+    },
+    input: {
+        backgroundColor: "transparent",
+        borderColor: "transparent",
+        textAlignVertical: "top",
+        paddingBottom: 0,
+        paddingRight: 0,
+        paddingLeft: 0,
+        borderWidth: 0,
+        paddingTop: 0,
+        minHeight: 55,
+        zIndex: 99
+    },
+    cleanButton: {
+        justifyContent: "center",
+        alignSelf: "flex-start",
+        alignItems: "center",
+        display: "flex",
+        zIndex: 99
+    },
+    hideTextIconContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        alignSelf: "center",
+        display: "flex",
+        zIndex: 99,
+        height: 18
+    },
+    titleContainer: {
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    title: {},
+    icon: {
+        justifyContent: "center",
+        alignContent: "center",
+        alignItems: "center",
+        display: "flex",
+        zIndex: 99
+    },
+    required: {},
+    hintTextIcon: {},
+    hintText: {
+        flexDirection: "row",
+        alignItems: "center",
+        display: "flex"
+    },
+    subTitle: {},
+    overlay: {
+        position: "absolute",
+        zIndex: 98,
+        bottom: 0,
+        right: 0,
+        left: 0,
+        top: 0
+    },
+    rightIcon: {
+        justifyContent: "center",
+        alignItems: "center",
+        alignSelf: "center",
+        display: "flex",
+        zIndex: 99
+    },
+    lengthLimiterContainer: {
+        justifyContent: "flex-end",
+        flexDirection: "row"
+    },
+    inputContainer: {
+        flexDirection: "column",
+        flex: 1
+    }
+});
+export const useStyles = ({ spreadBehaviour, inlineSpaces, currentType, typography, isDisabled, isFocused, maxHeight, radiuses, borders, colors, spaces, type }) => {
+    const styleType = type === "danger" ? "error" : type === "question" ? "neutral" : type;
+    const styles = {
+        container: {},
+        content: {
+            backgroundColor: colors.content.container[currentType.containerColor],
+            borderColor: colors.content.container[currentType.containerColor],
+            paddingBottom: spaces.spacingMd,
+            paddingRight: spaces.spacingMd,
+            paddingLeft: spaces.spacingMd,
+            paddingTop: spaces.spacingMd,
+            borderRadius: radiuses.form,
+            borderWidth: borders.line
+        },
+        input: {
+            ...typography.labelLargeSize,
+            color: colors.content.text[currentType.inputColor],
+            maxHeight: maxHeight
+        },
+        cleanButton: {
+            marginLeft: spaces.spacingSm
+        },
+        hintTextIconContainer: {
+            marginLeft: spaces.spacingSm
+        },
+        titleContainer: {
+            marginBottom: spaces.spacingSm
+        },
+        title: {},
+        icon: {
+            marginRight: spaces.spacingSm
+        },
+        required: {
+            marginRight: inlineSpaces.required
+        },
+        hintTextIcon: {
+            marginRight: spaces.spacingXs
+        },
+        hintText: {
+            marginTop: spaces.spacingSm
+        },
+        subTitle: {
+            marginLeft: inlineSpaces.subTitle
+        },
+        overlay: {
+            borderRadius: radiuses.form - 1
+        },
+        rightIcon: {
+            marginLeft: spaces.spacingSm
+        },
+        lengthLimiterContainer: {},
+        inputContainer: {}
+    };
+    if (isDisabled) {
+        const disableStyleType = styleType === "default" ? "neutral" : styleType;
+        styles.overlay.backgroundColor = colors.system.state.overlay.disabled[disableStyleType];
+        styles.container.borderColor = colors.system.state.overlay.disabled[disableStyleType];
+        styles.input.color = colors.content.text.disabled;
+    }
+    if (spreadBehaviour === "baseline") {
+        styles.container.alignSelf = spreadBehaviour;
+        styles.container.width = "auto";
+    }
+    if (spreadBehaviour === "stretch") {
+        styles.container.alignSelf = spreadBehaviour;
+        styles.container.justifyContent = "center";
+        styles.container.flexShrink = 1;
+        styles.container.width = "100%";
+    }
+    if (isFocused && !isDisabled) {
+        if (type === "question" || type === "default") {
+            styles.content.borderColor = colors.content.border.emphasized;
+        }
+        else {
+            styles.content.borderColor = colors.content.border[type];
+        }
+    }
+    return styles;
+};
+export default stylesheet;

package/lib/src/components/textAreaInput/type.js

@@ -0,0 +1,3 @@
+import { TextInput } from "react-native";
+import {} from "../../types";
+;