ncore-ui-kit 1.0.0-alpha.0

package/lib/src/components/markdownViewer/util.js

@@ -0,0 +1,316 @@
+import { DEFAULT_VARIANTS } from "./constant";
+export const imageMarkdown = ({ index, line }) => {
+    const contentMatch = line.match(/\[(.*?)\]/);
+    const imageContent = (contentMatch && contentMatch[1]) ? contentMatch[1] : "";
+    const tmpLine = line.replace(/\[.*?\]/g, "");
+    const urlMatch = tmpLine.match(/\((.*?)\)/);
+    const imageURL = (urlMatch && urlMatch[1]) ? urlMatch[1] : "";
+    const tmpLine2 = tmpLine.replace(/\((.*?)\)/, "");
+    const imageSizeMatch = tmpLine2.match(/<(.*?)>/);
+    const imageSize = (imageSizeMatch && imageSizeMatch[1]) ? imageSizeMatch[1].split("x").map(e => {
+        return e.indexOf("%") !== -1 || e.indexOf("auto") !== -1 ? e : Number(e);
+    }) : undefined;
+    const tmpLine3 = tmpLine2.replace(/<(.*?)>/, "");
+    const resizeModeMatch = tmpLine3.match(/--(.*?)--/);
+    const resizeMode = (resizeModeMatch && resizeModeMatch[1]) ? resizeModeMatch[1] : undefined;
+    return {
+        resizeMode: resizeMode,
+        content: imageContent,
+        nativeType: "image",
+        size: imageSize,
+        type: "image",
+        url: imageURL,
+        key: index
+    };
+};
+export const textMarkdown = ({ index, type, line }) => {
+    return {
+        content: line.replace(type, ""),
+        variant: DEFAULT_VARIANTS[type],
+        nativeType: type,
+        type: "text",
+        key: index
+    };
+};
+export const enterMarkdown = ({ index, line }) => {
+    const _line = line.replace("<br/>", "");
+    return {
+        variant: DEFAULT_VARIANTS["<br/>"],
+        nativeType: "<br/>",
+        content: _line,
+        type: "space",
+        key: index
+    };
+};
+export const codeMarkdown = ({ skippedIndices, index, lines }) => {
+    let endIndex = -1;
+    for (let j = index + 1; j < lines.length; j++) {
+        if (lines[j]?.startsWith("```")) {
+            endIndex = j;
+            break;
+        }
+    }
+    if (endIndex !== -1) {
+        for (let k = index + 1; k <= endIndex; k++) {
+            skippedIndices.push(k);
+        }
+        const codeContent = lines.slice(index + 1, endIndex).join("\n");
+        return {
+            variant: DEFAULT_VARIANTS["```"],
+            content: codeContent,
+            nativeType: "```",
+            type: "code",
+            key: index
+        };
+    }
+};
+export const centerMarkdown = ({ skippedIndices, index, lines }) => {
+    let endIndex = -1;
+    for (let j = index + 1; j < lines.length; j++) {
+        if (lines[j]?.startsWith("</center>")) {
+            endIndex = j;
+            break;
+        }
+    }
+    if (endIndex !== -1) {
+        for (let k = index + 1; k <= endIndex; k++) {
+            skippedIndices.push(k);
+        }
+        const centerContent = lines.slice(index + 1, endIndex).join("\n");
+        return {
+            content: centerContent,
+            nativeType: "center",
+            type: "center",
+            key: index
+        };
+    }
+};
+export const leftMarkdown = ({ skippedIndices, index, lines }) => {
+    let endIndex = -1;
+    for (let j = index + 1; j < lines.length; j++) {
+        if (lines[j]?.startsWith("</left>")) {
+            endIndex = j;
+            break;
+        }
+    }
+    if (endIndex !== -1) {
+        for (let k = index + 1; k <= endIndex; k++) {
+            skippedIndices.push(k);
+        }
+        const leftContent = lines.slice(index + 1, endIndex).join("\n");
+        return {
+            content: leftContent,
+            nativeType: "left",
+            type: "left",
+            key: index
+        };
+    }
+};
+export const rightMarkdown = ({ skippedIndices, index, lines }) => {
+    let endIndex = -1;
+    for (let j = index + 1; j < lines.length; j++) {
+        if (lines[j]?.startsWith("</right>")) {
+            endIndex = j;
+            break;
+        }
+    }
+    if (endIndex !== -1) {
+        for (let k = index + 1; k <= endIndex; k++) {
+            skippedIndices.push(k);
+        }
+        const rightContent = lines.slice(index + 1, endIndex).join("\n");
+        return {
+            content: rightContent,
+            nativeType: "right",
+            type: "right",
+            key: index
+        };
+    }
+};
+export const linkMarkdown = ({ skippedIndices, linkStartRegex, index, lines, line }) => {
+    let endIndex = -1;
+    for (let j = index + 1; j < lines.length; j++) {
+        if (lines[j]?.startsWith("</link>")) {
+            endIndex = j;
+            break;
+        }
+    }
+    if (endIndex !== -1) {
+        const match = line.match(linkStartRegex);
+        const href = match ? match[1] : "";
+        for (let k = index + 1; k <= endIndex; k++) {
+            skippedIndices.push(k);
+        }
+        const linkContent = lines.slice(index + 1, endIndex).join("\n");
+        return {
+            content: linkContent,
+            nativeType: "link",
+            type: "link",
+            key: index,
+            url: href
+        };
+    }
+};
+export const blockquoteMarkdown = ({ skippedIndices, index, lines }) => {
+    let endIndex = -1;
+    for (let j = index + 1; j < lines.length; j++) {
+        if (lines[j]?.startsWith(">>")) {
+            endIndex = j;
+            break;
+        }
+    }
+    if (endIndex !== -1) {
+        for (let k = index + 1; k <= endIndex; k++) {
+            skippedIndices.push(k);
+        }
+        const quoteContent = lines.slice(index + 1, endIndex).join("\n");
+        return {
+            variant: DEFAULT_VARIANTS["<<"],
+            content: quoteContent,
+            type: "blockquote",
+            nativeType: "<<",
+            key: index
+        };
+    }
+};
+export const listMarkdown = ({ isStarList, index, line }) => {
+    return {
+        variant: DEFAULT_VARIANTS[isStarList ? "* " : "- "],
+        nativeType: isStarList ? "* " : "- ",
+        content: line.substring(2),
+        type: "list",
+        key: index
+    };
+};
+export const parseMarkdown = (rawText) => {
+    const lines = rawText.split("\n");
+    const skippedIndices = [];
+    return lines.map((line, index) => {
+        if (skippedIndices.includes(index)) {
+            return {
+                type: undefined,
+                nativeType: "",
+                content: "",
+                key: index
+            };
+        }
+        if (line.startsWith("# "))
+            return textMarkdown({
+                type: "# ",
+                index,
+                line
+            });
+        if (line.startsWith("## "))
+            return textMarkdown({
+                type: "## ",
+                index,
+                line
+            });
+        if (line.startsWith("### "))
+            return textMarkdown({
+                type: "### ",
+                index,
+                line
+            });
+        if (line.startsWith("#### "))
+            return textMarkdown({
+                type: "#### ",
+                index,
+                line
+            });
+        if (line.startsWith("##### "))
+            return textMarkdown({
+                type: "##### ",
+                index,
+                line
+            });
+        if (line.startsWith("###### "))
+            return textMarkdown({
+                type: "###### ",
+                index,
+                line
+            });
+        if (line.startsWith("<br/>") || line === "")
+            return enterMarkdown({
+                index,
+                line
+            });
+        if (line.startsWith("```")) {
+            const returnedData = codeMarkdown({
+                skippedIndices,
+                index,
+                lines
+            });
+            if (returnedData)
+                return returnedData;
+        }
+        if (line.startsWith("<center>")) {
+            const returnedData = centerMarkdown({
+                skippedIndices,
+                index,
+                lines
+            });
+            if (returnedData)
+                return returnedData;
+        }
+        if (line.startsWith("<right>")) {
+            const returnedData = rightMarkdown({
+                skippedIndices,
+                index,
+                lines
+            });
+            if (returnedData)
+                return returnedData;
+        }
+        if (line.startsWith("<left>")) {
+            const returnedData = leftMarkdown({
+                skippedIndices,
+                index,
+                lines
+            });
+            if (returnedData)
+                return returnedData;
+        }
+        const linkStartRegex = /^<link\s+href=["'](.*?)["']>/;
+        if (linkStartRegex.test(line)) {
+            const returnedData = linkMarkdown({
+                skippedIndices,
+                linkStartRegex,
+                index,
+                lines,
+                line
+            });
+            if (returnedData)
+                return returnedData;
+        }
+        if (line.startsWith("<<")) {
+            const returnedData = blockquoteMarkdown({
+                skippedIndices,
+                index,
+                lines
+            });
+            if (returnedData)
+                return returnedData;
+        }
+        const isStartWithImage = line.startsWith("[");
+        if (isStartWithImage || line.startsWith("["))
+            return imageMarkdown({
+                index,
+                line
+            });
+        const isStarList = line.startsWith("* ");
+        if (isStarList || line.startsWith("- "))
+            return listMarkdown({
+                isStarList,
+                index,
+                line
+            });
+        return {
+            variant: DEFAULT_VARIANTS["<p>"],
+            nativeType: "<p>",
+            content: line,
+            type: "text",
+            key: index
+        };
+    });
+};

package/lib/src/components/menu/components/menuButton/index.js

@@ -0,0 +1,161 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useEffect, useState, useRef } from "react";
+import { Platform, Animated, Easing, View } from "react-native";
+import { NCoreUIKitLocalize, NCoreUIKitTheme } from "../../../../core/hooks";
+import { ChevronRightIcon, ChevronDownIcon, ChevronLeftIcon } from "lucide-react-native";
+import RowCard from "../../../rowCard";
+const getDeepActiveRouteName = (state) => {
+    if (!state?.routes?.length)
+        return undefined;
+    const activeIndex = state.index ?? 0;
+    const activeRoute = state.routes[activeIndex];
+    if (!activeRoute)
+        return undefined;
+    if (activeRoute.state) {
+        return getDeepActiveRouteName(activeRoute.state);
+    }
+    return activeRoute.name;
+};
+const isPageActive = (buttonItem, navigation) => {
+    if (!navigation)
+        return false;
+    const state = typeof navigation.getRootState === "function"
+        ? navigation.getRootState()
+        : typeof navigation.getState === "function"
+            ? navigation.getState()
+            : null;
+    if (!state?.routes)
+        return false;
+    const activeRouteName = getDeepActiveRouteName(state);
+    const targetName = buttonItem.redirectSub ?? buttonItem.redirectMain;
+    if (targetName && activeRouteName === targetName)
+        return true;
+    if (buttonItem.subButtons?.length) {
+        return buttonItem.subButtons.some(sub => isPageActive(sub, navigation));
+    }
+    return false;
+};
+const MenuButton = ({ updateMenuButtonCollabs, closeAction, buttonIndex, buttonItem, navigation, depthMap, id }) => {
+    const { colors } = NCoreUIKitTheme.useContext();
+    const { localize } = NCoreUIKitLocalize.useContext();
+    const [measure, setMeasure] = useState(null);
+    const [navStateTracker, setNavStateTracker] = useState(Date.now());
+    const [isShowSubs, setIsShowSubs] = useState(buttonItem.isCollapse);
+    const animatedCollabs = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        if (!navigation || typeof navigation.addListener !== "function")
+            return;
+        const unsubscribeState = navigation.addListener("state", () => {
+            setNavStateTracker(Date.now());
+        });
+        const unsubscribeFocus = navigation.addListener("focus", () => {
+            setNavStateTracker(Date.now());
+        });
+        return () => {
+            if (unsubscribeState)
+                unsubscribeState();
+            if (unsubscribeFocus)
+                unsubscribeFocus();
+        };
+    }, [navigation]);
+    useLayoutEffect(() => {
+        if (isShowSubs) {
+            Animated.timing(animatedCollabs, {
+                toValue: Platform.OS === "web" ? Number(measure) : 1,
+                useNativeDriver: Platform.OS !== "web",
+                easing: Easing.linear,
+                duration: 150
+            }).start();
+        }
+    }, [isShowSubs]);
+    useLayoutEffect(() => {
+        if (!buttonItem.isCollapsible)
+            return;
+        if (Platform.OS === "web" && measure === null)
+            return;
+        if (buttonItem.isCollapse) {
+            setIsShowSubs(true);
+        }
+        else {
+            Animated.timing(animatedCollabs, {
+                useNativeDriver: Platform.OS !== "web",
+                easing: Easing.linear,
+                duration: 150,
+                toValue: 0
+            }).start(({ finished }) => {
+                if (finished) {
+                    setIsShowSubs(false);
+                }
+            });
+        }
+    }, [
+        buttonItem.isCollapse,
+        measure
+    ]);
+    const isPActive = isPageActive(buttonItem, navigation);
+    return _jsxs(View, { children: [_jsx(RowCard, { ...buttonItem.props, title: buttonItem.isUseLocalize ? localize(buttonItem.title) : buttonItem.title, rightIcon: buttonItem.isCollapsible || buttonItem.isShowRedirectIcon ?
+                    () => {
+                        if (buttonItem.isCollapsible) {
+                            if (buttonItem.isCollapse) {
+                                return _jsx(ChevronDownIcon, { color: isPActive ? colors.content.icon.onPrimary : colors.content.icon.low, size: 18 });
+                            }
+                            else {
+                                return _jsx(ChevronLeftIcon, { color: isPActive ? colors.content.icon.onPrimary : colors.content.icon.low, size: 18 });
+                            }
+                        }
+                        else {
+                            return _jsx(ChevronRightIcon, { color: isPActive ? colors.content.icon.onPrimary : colors.content.icon.low, size: 18 });
+                        }
+                    }
+                    :
+                        undefined, backgroundColor: isPActive ? "primary" : undefined, titleColor: isPActive ? "onPrimary" : undefined, iconColor: isPActive ? "onPrimary" : undefined, icon: buttonItem.icon, onPress: () => {
+                    if (buttonItem.isCollapsible) {
+                        updateMenuButtonCollabs({
+                            status: !buttonItem.isCollapse,
+                            buttonItem,
+                            depthMap
+                        });
+                    }
+                    else {
+                        if (buttonItem.redirectMain || buttonItem.redirectSub) {
+                            if (buttonItem.redirectMain && buttonItem.redirectSub) {
+                                navigation.navigate(buttonItem.redirectMain, {
+                                    screen: buttonItem.redirectSub
+                                });
+                            }
+                            else if (buttonItem.redirectMain) {
+                                navigation.navigate(buttonItem.redirectMain);
+                            }
+                        }
+                        if (buttonItem.props?.onPress)
+                            buttonItem.props.onPress();
+                    }
+                    if (closeAction && !buttonItem.isCollapsible)
+                        closeAction();
+                } }), buttonItem.subButtons && buttonItem.subButtons.length ?
+                _jsx(Animated.View, { onLayout: buttonItem.isCollapsible ? (event) => {
+                        const height = event.nativeEvent.layout.height;
+                        if (height !== 0 && measure === null)
+                            setMeasure(height);
+                    } : undefined, style: [
+                        Platform.OS === "web" ? {
+                            height: measure === null ? "auto" : animatedCollabs,
+                            overflow: "hidden"
+                        } : {
+                            display: isShowSubs ? "flex" : "none",
+                            transform: [{
+                                    scaleY: animatedCollabs
+                                }],
+                            transformOrigin: "top",
+                            overflow: "hidden"
+                        }
+                    ], children: buttonItem.subButtons.map((subButtonItem, subButtonIndex) => {
+                        return _jsx(MenuButton, { updateMenuButtonCollabs: updateMenuButtonCollabs, buttonIndex: subButtonIndex, buttonItem: subButtonItem, closeAction: closeAction, navigation: navigation, depthMap: [
+                                ...depthMap,
+                                subButtonIndex
+                            ], id: id }, `menu-sub-button-${id}-${subButtonIndex}`);
+                    }) })
+                :
+                    null] }, `menu-button-${id}-${buttonIndex}-${navStateTracker.toString()}`);
+};
+export default MenuButton;

package/lib/src/components/menu/components/menuButton/type.js

@@ -0,0 +1,2 @@
+;
+export {};