ncore-ui-kit 1.0.0-pre-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/modal/index.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useImperativeHandle, forwardRef, useEffect, useState, useRef } from "react";
+import { TouchableWithoutFeedback, Animated, Platform, Easing, View } from "react-native";
+import {} from "./type";
+import stylesheet from "./stylesheet";
+import { NCoreUIKitTheme } from "../../core/hooks";
+import {} from "../../types";
+import { Portal } from "../../helpers/portalize";
+import { uuid } from "../../utils";
+/**
+ * A generic modal
+ * @param props {@link IModalProps}
+ * @returns Element
+ */
+const Modal = ({ isScaleAnimatedOnlyOpen = true, closeAnimationDelay = 100, isDisabledOverlay = false, openAnimationDelay = 100, isContentRequired = true, isOverlayVisible = true, isScaleAnimated = false, alignContent = "center", isWorkWithPortal = true, isActive: isActiveProp, onContainerLayout, isAnimated = true, onOverlayPress, contentStyle, overlayProps, customTheme, portalName, id: outID, children, onClosed, style }, ref) => {
+    const { colors } = NCoreUIKitTheme.useContext(customTheme);
+    const id = useRef(outID ? outID : uuid());
+    const scaleAnim = useRef(new Animated.Value(isAnimated && isScaleAnimated ? 0 : 1)).current;
+    const opacityAnim = useRef(new Animated.Value(isAnimated ? 0 : 1)).current;
+    const [isActive, setIsActive] = useState(isActiveProp === undefined ? true : isActiveProp);
+    useEffect(() => {
+        if (isAnimated) {
+            if (isScaleAnimated) {
+                Animated.timing(scaleAnim, {
+                    duration: openAnimationDelay,
+                    useNativeDriver: true,
+                    easing: Easing.linear,
+                    toValue: 1
+                }).start();
+            }
+            Animated.timing(opacityAnim, {
+                duration: openAnimationDelay,
+                useNativeDriver: true,
+                easing: Easing.linear,
+                toValue: 1
+            }).start();
+        }
+    }, [isActive]);
+    useEffect(() => {
+        if (isActiveProp !== undefined) {
+            setIsActive(isActiveProp);
+        }
+    }, [isActiveProp]);
+    useImperativeHandle(ref, () => ({
+        closeAnimation,
+        setIsActive
+    }), []);
+    const closeAnimation = (_onClosed) => {
+        if (isAnimated) {
+            if (isScaleAnimated && !isScaleAnimatedOnlyOpen) {
+                Animated.timing(scaleAnim, {
+                    duration: closeAnimationDelay,
+                    useNativeDriver: true,
+                    easing: Easing.linear,
+                    toValue: 0
+                }).start();
+            }
+            Animated.timing(opacityAnim, {
+                duration: closeAnimationDelay,
+                useNativeDriver: true,
+                easing: Easing.linear,
+                toValue: 0
+            }).start(({ finished }) => {
+                if (finished) {
+                    if (_onClosed)
+                        _onClosed({
+                            id: id.current
+                        });
+                    if (onClosed)
+                        onClosed({
+                            id: id.current
+                        });
+                }
+            });
+        }
+    };
+    const renderOverlay = () => {
+        if (!isOverlayVisible) {
+            return null;
+        }
+        return _jsx(TouchableWithoutFeedback, { ...overlayProps, style: [
+                stylesheet.overlay
+            ], onPress: () => {
+                if (isDisabledOverlay) {
+                    return;
+                }
+                if (onOverlayPress)
+                    onOverlayPress({
+                        closeAnimation
+                    });
+            }, children: _jsx(View, { style: [
+                    stylesheet.overlayContent,
+                    {
+                        backgroundColor: colors.system.scrim
+                    }
+                ], ...Platform.select({
+                    web: {
+                        dataSet: {
+                            disablePressableHoverEffect: "true",
+                            disablePressableDownEffect: "true"
+                        }
+                    },
+                    default: {}
+                }) }) });
+    };
+    const renderContainer = () => {
+        return _jsxs(Animated.View, { onLayout: (e) => {
+                if (onContainerLayout)
+                    onContainerLayout(e);
+            }, style: [
+                style,
+                stylesheet.container,
+                {
+                    justifyContent: alignContent === "center" ? "center" : undefined,
+                    alignItems: alignContent === "center" ? "center" : "baseline",
+                    opacity: opacityAnim,
+                    transform: [{
+                            scale: scaleAnim
+                        }]
+                }
+            ], children: [renderOverlay(), isContentRequired ? renderContent() : children] });
+    };
+    const renderContent = () => {
+        if (!children) {
+            return null;
+        }
+        return _jsx(View, { style: [
+                contentStyle,
+                stylesheet.content
+            ], children: children });
+    };
+    const renderWithPortal = () => {
+        return _jsx(Portal, { name: portalName ? portalName : "modal-system", children: renderContainer() });
+    };
+    if (!isActive) {
+        return null;
+    }
+    return isWorkWithPortal ? renderWithPortal() : renderContainer();
+};
+export default forwardRef(Modal);

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

@@ -0,0 +1,33 @@
+import { StyleSheet } from "react-native";
+const stylesheet = StyleSheet.create({
+    container: {
+        position: "absolute",
+        display: "flex",
+        zIndex: 99994,
+        bottom: 0,
+        right: 0,
+        left: 0,
+        top: 0
+    },
+    overlay: {
+        position: "absolute",
+        zIndex: 99995,
+        bottom: 0,
+        right: 0,
+        left: 0,
+        top: 0
+    },
+    overlayContent: {
+        position: "absolute",
+        zIndex: 99996,
+        bottom: 0,
+        right: 0,
+        left: 0,
+        top: 0
+    },
+    content: {
+        display: "contents",
+        zIndex: 99997
+    }
+});
+export default stylesheet;

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

@@ -0,0 +1,3 @@
+import {} from "react";
+import {} from "react-native";
+;