ncore-ui-kit/src/components/codeEditor/stylesheet.ts

import {
    type TextStyle,
    type ViewStyle,
    StyleSheet,
    Platform
} from "react-native";
import type {
    ICodeEditorDynamicStyleProps
} from "./type";
import {
    webStyle
} from "../../utils";

const stylesheet = StyleSheet.create({
    editorInput: {
        fontFamily: Platform.OS === "web" ? "Consolas, 'Courier New', monospace" : "monospace",
        backgroundColor: "transparent",
        textAlignVertical: "top",
        position: "absolute",
        color: "transparent",
        fontWeight: "400",
        letterSpacing: 0,
        borderWidth: 0,
        lineHeight: 24,
        fontSize: 14,
        padding: 0,
        margin: 0,
        bottom: 0,
        right: 0,
        left: 0,
        top: 0,
        ...webStyle({
            fontVariantLigatures: "none",
            caretColor: "inherit",
            outline: "none",
            resize: "none"
        })
    },
    content: {
        fontFamily: Platform.OS === "web" ? "Consolas, 'Courier New', monospace" : "monospace",
        fontWeight: "400",
        letterSpacing: 0,
        ...webStyle({
            whiteSpace: Platform.OS === "web" ? "pre" : "pre-wrap",
            fontVariantLigatures: "none"
        })
    },
    codeText: {
        fontFamily: Platform.OS === "web" ? "Consolas, 'Courier New', monospace" : "monospace",
        fontWeight: "400",
        letterSpacing: 0,
        fontSize: 14,
        ...webStyle({
            fontVariantLigatures: "none"
        })
    },
    lineNumber: {
        fontFamily: Platform.OS === "web" ? "monospace" : "System",
        textAlign: "right",
        marginRight: 4,
        lineHeight: 24,
        fontSize: 12,
        ...webStyle({
            userSelect: "none"
        })
    },
    toolbarContainer: {
        justifyContent: "flex-start",
        borderBottomWidth: 0,
        alignItems: "center",
        flexDirection: "row",
        position: "relative",
        paddingVertical: 4,
        flexWrap: "wrap",
        zIndex: 1
    },
    gutter: {
        justifyContent: "flex-end",
        alignItems: "flex-start",
        flexDirection: "row",
        borderRightWidth: 1,
        ...webStyle({
            userSelect: "none"
        })
    },
    lineRow: {
        alignItems: "flex-start",
        flexDirection: "row",
        minHeight: 24
    },
    container: {
        flexDirection: "column",
        position: "relative",
        width: "100%"
    },
    editorContainer: {
        position: "relative",
        zIndex: 0
    },
    scrollContent: {
        minWidth: "100%",
        flexGrow: 1
    },
    text: {
        lineHeight: 24
    },
    scrollView: {
        flex: 1
    }
});

export const useStyles = ({
    isLineNumberVisible = true,
    isToolbarVisible = false,
    hasLanguage = false,
    spreadBehaviour,
    typography,
    radiuses,
    borders,
    colors,
    spaces
}: ICodeEditorDynamicStyleProps) => {
    let gutterPaddingRight = 6;
    let gutterMarginRight = 8;
    let gutterWidth = 32;

    if (!isLineNumberVisible) {
        gutterPaddingRight = 0;
        gutterMarginRight = 0;
        gutterWidth = 0;
    }

    const languageMarginLeft = spaces.spacingSm;
    const lineHeight = (typography.bodyMediumSize?.lineHeight as number) || 24;

    const styles = {
        container: {
            alignSelf: spreadBehaviour === "stretch" ? "stretch" : (spreadBehaviour === "baseline" ? "baseline" : "auto"),
            width: spreadBehaviour === "baseline" ? "auto" : "100%",
            marginVertical: spaces.spacingSm
        } as ViewStyle,
        editorInput: {
            ...typography.bodyMediumSize,
            paddingLeft: (isLineNumberVisible ? (gutterWidth + gutterMarginRight) : spaces.spacingSm),
            fontFamily: Platform.OS === "web" ? "Consolas, 'Courier New', monospace" : "monospace",
            paddingTop: hasLanguage ? (lineHeight + spaces.spacingSm) : 0,
            paddingRight: spaces.spacingMd,
            ...webStyle({
                caretColor: colors.content.text.high
            })
        } as TextStyle,
        text: {
            ...typography.bodyMediumSize,
            fontFamily: Platform.OS === "web" ? "Consolas, 'Courier New', monospace" : "monospace"
        } as TextStyle,
        editorContainer: {
            paddingTop: isToolbarVisible ? spaces.spacingXs : spaces.spacingMd,
            borderTopRightRadius: isToolbarVisible ? 0 : radiuses.form,
            borderTopLeftRadius: isToolbarVisible ? 0 : radiuses.form,
            backgroundColor: colors.content.container.subtle,
            borderColor: colors.content.border.subtle,
            borderBottomRightRadius: radiuses.form,
            borderBottomLeftRadius: radiuses.form,
            paddingHorizontal: spaces.spacingMd,
            paddingBottom: spaces.spacingMd,
            borderWidth: borders.line,
            borderTopWidth: isToolbarVisible ? 0 : borders.line
        } as ViewStyle,
        lineRow: {
            marginLeft: !isLineNumberVisible ? spaces.spacingSm : 0,
            minHeight: lineHeight,
            height: lineHeight
        } as ViewStyle,
        toolbarContainer: {
            backgroundColor: colors.content.container.subtle,
            borderColor: colors.content.border.subtle,
            borderTopRightRadius: radiuses.form,
            paddingHorizontal: spaces.spacingMd,
            borderTopLeftRadius: radiuses.form,
            paddingBottom: spaces.spacingXs,
            borderRightWidth: borders.line,
            borderLeftWidth: borders.line,
            borderTopWidth: borders.line,
            paddingTop: spaces.spacingMd,
            gap: spaces.spacingXs
        } as ViewStyle,
        toolbarActionBtn: {
            paddingHorizontal: spaces.spacingMd,
            paddingVertical: spaces.spacingSm
        } as ViewStyle,
        gutter: {
            paddingRight: gutterPaddingRight,
            marginRight: gutterMarginRight,
            width: gutterWidth
        } as ViewStyle,
        languageText: {
            marginBottom: spaces.spacingSm,
            color: colors.content.text.low,
            marginLeft: languageMarginLeft,
            ...webStyle({
                userSelect: "none"
            })
        } as TextStyle
    };

    return styles;
};
export default stylesheet;