ncore-ui-kit 1.0.0-alpha.0

package/src/components/markdownViewer/util.ts

@@ -0,0 +1,453 @@
+import type {
+    MarkdownObject
+} from "./type";
+import {
+    DEFAULT_VARIANTS
+} from "./constant";
+
+export const imageMarkdown = ({
+    index,
+    line
+}: {
+    index: number;
+    line: string;
+}): MarkdownObject => {
+    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] as "cover" | "contain" | "center" | "none" | "repeat" | "stretch" : undefined;
+
+    return {
+        resizeMode: resizeMode,
+        content: imageContent,
+        nativeType: "image",
+        size: imageSize,
+        type: "image",
+        url: imageURL,
+        key: index
+    };
+};
+
+export const textMarkdown = ({
+    index,
+    type,
+    line
+}: {
+    type: "# " | "## " | "### " | "#### " | "##### " | "###### " | "<p>";
+    index: number;
+    line: string;
+}): MarkdownObject => {
+    return {
+        content: line.replace(type, ""),
+        variant: DEFAULT_VARIANTS[type],
+        nativeType: type,
+        type: "text",
+        key: index
+    };
+};
+
+export const enterMarkdown = ({
+    index,
+    line
+}: {
+    index: number;
+    line: string;
+}): MarkdownObject => {
+    const _line = line.replace("<br/>", "");
+
+    return {
+        variant: DEFAULT_VARIANTS["<br/>"],
+        nativeType: "<br/>",
+        content: _line,
+        type: "space",
+        key: index
+    };
+};
+
+export const codeMarkdown = ({
+    skippedIndices,
+    index,
+    lines
+}: {
+    skippedIndices: number[];
+    lines: string[];
+    index: number;
+}): MarkdownObject | void => {
+    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
+}: {
+    skippedIndices: number[];
+    lines: string[];
+    index: number;
+}): MarkdownObject | void => {
+    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
+}: {
+    skippedIndices: number[];
+    lines: string[];
+    index: number;
+}): MarkdownObject | void => {
+    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
+}: {
+    skippedIndices: number[];
+    lines: string[];
+    index: number;
+}): MarkdownObject | void => {
+    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
+}: {
+    skippedIndices: number[];
+    linkStartRegex: RegExp;
+    lines: string[];
+    index: number;
+    line: string;
+}): MarkdownObject | void => {
+    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
+}: {
+    skippedIndices: number[];
+    lines: string[];
+    index: number;
+}): MarkdownObject | void => {
+    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
+}: {
+    isStarList: boolean;
+    index: number;
+    line: string;
+}): MarkdownObject => {
+    return {
+        variant: DEFAULT_VARIANTS[isStarList ? "* " : "- "],
+        nativeType: isStarList ? "* " : "- ",
+        content: line.substring(2),
+        type: "list",
+        key: index
+    };
+};
+
+export const parseMarkdown = (rawText: string): Array<MarkdownObject> => {
+    const lines = rawText.split("\n");
+    const skippedIndices: number[] = [];
+
+    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/src/components/menu/components/menuButton/index.tsx

@@ -0,0 +1,261 @@
+import {
+    useLayoutEffect,
+    useEffect,
+    useState,
+    type FC,
+    useRef
+} from "react";
+import {
+    Platform,
+    Animated,
+    Easing,
+    View
+} from "react-native";
+import type {
+    MenuButton as MenuButtonType
+} from "./type";
+import type IMenuButton from "./type";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme
+} from "../../../../core/hooks";
+import {
+    ChevronRightIcon,
+    ChevronDownIcon,
+    ChevronLeftIcon
+} from "lucide-react-native";
+import RowCard from "../../../rowCard";
+
+const getDeepActiveRouteName = (state: NCoreUIKit.NavigationState): string | undefined => {
+    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: MenuButtonType,
+    navigation: NCoreUIKit.Navigation
+): boolean => {
+    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: FC<IMenuButton> = ({
+    updateMenuButtonCollabs,
+    closeAction,
+    buttonIndex,
+    buttonItem,
+    navigation,
+    depthMap,
+    id
+}) => {
+    const {
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const [
+        measure,
+        setMeasure
+    ] = useState<null | number>(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 <View
+        key={`menu-button-${id}-${buttonIndex}-${navStateTracker.toString()}`}
+    >
+        <RowCard
+            {...buttonItem.props}
+            title={buttonItem.isUseLocalize ? localize(buttonItem.title as keyof NCoreUIKit.Translation) : buttonItem.title}
+            rightIcon={
+                buttonItem.isCollapsible || buttonItem.isShowRedirectIcon ?
+                    () => {
+                        if(buttonItem.isCollapsible) {
+                            if(buttonItem.isCollapse) {
+                                return <ChevronDownIcon
+                                    color={isPActive ? colors.content.icon.onPrimary : colors.content.icon.low}
+                                    size={18}
+                                />;
+                            } else {
+                                return <ChevronLeftIcon
+                                    color={isPActive ? colors.content.icon.onPrimary : colors.content.icon.low}
+                                    size={18}
+                                />;
+                            }
+                        } else {
+                            return <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 ?
+                <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"
+                        }
+                    ]}
+                >
+                    {buttonItem.subButtons.map((subButtonItem, subButtonIndex) => {
+                        return <MenuButton
+                            updateMenuButtonCollabs={updateMenuButtonCollabs}
+                            key={`menu-sub-button-${id}-${subButtonIndex}`}
+                            buttonIndex={subButtonIndex}
+                            buttonItem={subButtonItem}
+                            closeAction={closeAction}
+                            navigation={navigation}
+                            depthMap={[
+                                ...depthMap,
+                                subButtonIndex
+                            ]}
+                            id={id}
+                        />;
+                    })}
+                </Animated.View>
+                :
+                null
+        }
+    </View>;
+};
+export default MenuButton;