@noraent/nora-datagrid 0.0.1

package/lib/cjs/common/styled/index.d.ts

@@ -0,0 +1,44 @@
+import { foundation } from "../foundation";
+/**
+ * 💡 알림
+ * 본 섹션은 가이드의 가독성을 높이기 위해 추가되었습니다.
+ * 기능 개발에만 집중할 수 있도록 작성된 문서이며, UI 관련 가이드는 따로 제공되지 않습니다.
+ * 가이드가 아니므로 참고용으로만 활용해 주세요.
+ * 디자인 시스템을 개발할경우 색상이나 사이즈 처리 등 가이드로 사용하기에는 다소 부족한 부분이 있을 수 있습니다. 부득이하게 개발이 필요한 경우 해당부분을 고려하여 개발 해주세요.
+ */
+export declare const StyledButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const StyledSubTitle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare const StyledNoneContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Typography: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & TypographyProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+interface TypographyProps {
+    variant?: variantType;
+    color?: colorType;
+}
+type colorType = keyof typeof foundation.$scale.color;
+/**
+ * 정리 필요
+ */
+type variantType = keyof typeof variantMapping;
+declare const variantMapping: {
+    KR_TITLE_H1: {
+        fontSize: string;
+        fontWeight: string;
+    };
+    KR_TITLE_H2: {
+        fontSize: string;
+        fontWeight: number;
+    };
+};
+export {};

package/lib/cjs/common/styled/index.js

@@ -0,0 +1,57 @@
+import styled from "@emotion/styled";
+import { foundation } from "../foundation";
+import { initialWindowHeight } from "../../components/TwoDimensionalVirtualizedList";
+/**
+ * 💡 알림
+ * 본 섹션은 가이드의 가독성을 높이기 위해 추가되었습니다.
+ * 기능 개발에만 집중할 수 있도록 작성된 문서이며, UI 관련 가이드는 따로 제공되지 않습니다.
+ * 가이드가 아니므로 참고용으로만 활용해 주세요.
+ * 디자인 시스템을 개발할경우 색상이나 사이즈 처리 등 가이드로 사용하기에는 다소 부족한 부분이 있을 수 있습니다. 부득이하게 개발이 필요한 경우 해당부분을 고려하여 개발 해주세요.
+ */
+export const StyledButton = styled("button")(() => ({
+    minWidth: "190px",
+    display: "flex",
+    padding: "14px 24px 14px 18px",
+    fontSize: "16px",
+    fontWeight: "600",
+    background: "#fff",
+    borderRadius: "4px",
+    border: "1px solid #e3e3e3",
+    cursor: "pointer",
+    boxShadow: `0px 0px 4px 0px #00000012`,
+    ":hover": {
+        backgroundColor: "#fcfcfc",
+    },
+    ":active": {
+        backgroundColor: "#fbfbfb",
+        boxShadow: `0px 0px 4px 0px #0000000a`,
+    },
+}));
+export const StyledSubTitle = styled("h3")(() => ({
+    fontSize: "15px",
+    color: "#818181",
+}));
+export const StyledNoneContent = styled("div")(() => ({
+    width: "100%",
+    height: initialWindowHeight,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: "4px",
+    flexDirection: "column",
+    opacity: 0.2,
+}));
+export const Typography = styled("p")((props) => {
+    var _a;
+    return (Object.assign(Object.assign({}, (props.variant && variantMapping[props.variant])), { color: foundation.$scale.color[(_a = props === null || props === void 0 ? void 0 : props.color) !== null && _a !== void 0 ? _a : "black"] }));
+});
+const variantMapping = {
+    KR_TITLE_H1: {
+        fontSize: "12px",
+        fontWeight: "bold",
+    },
+    KR_TITLE_H2: {
+        fontSize: "12px",
+        fontWeight: 400,
+    },
+};

package/lib/cjs/components/GridBasicRows.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+declare function GridBasicRows(props: GridMainProps): import("react/jsx-runtime").JSX.Element;
+export default GridBasicRows;
+interface GridMainProps {
+    children?: ReactNode;
+}

package/lib/cjs/components/GridBasicRows.js

@@ -0,0 +1,88 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+const containerHeight = 250;
+const overscanCount = 3;
+const scrollThreshold = 40; // 스크롤 이벤트를 처리할 임계값 (여기서는 200px)
+function GridBasicRows(props) {
+    const { children } = props;
+    const parentRef = React.useRef(null);
+    const ticking = React.useRef(false);
+    const prevScrollTop = React.useRef(0); // 이전 스크롤 위치를 저장하는 Ref
+    const [visibleRange, setVisibleRange] = React.useState({ start: 0, end: 0 });
+    const [itemsData, setItemsData] = React.useState([]);
+    const visibleItems = React.useMemo(() => itemsData.slice(visibleRange.start, visibleRange.end + 1), [itemsData, visibleRange]);
+    const totalHeight = React.useMemo(() => itemsData.reduce((sum, item) => sum + item.height, 0), [itemsData]);
+    const getCumulativeHeight = React.useCallback((index) => {
+        return itemsData.slice(0, index).reduce((sum, item) => sum + item.height, 0);
+    }, [itemsData]);
+    const findItemIndexByScrollTop = React.useCallback((scrollTop) => {
+        let low = 0;
+        let high = itemsData.length - 1;
+        while (low <= high) {
+            const mid = Math.floor((low + high) / 2);
+            const midHeight = getCumulativeHeight(mid);
+            if (midHeight <= scrollTop && scrollTop < midHeight + itemsData[mid].height) {
+                return mid;
+            }
+            else if (midHeight > scrollTop) {
+                high = mid - 1;
+            }
+            else {
+                low = mid + 1;
+            }
+        }
+        return low;
+    }, [itemsData, getCumulativeHeight]);
+    const calculateVisibleRange = React.useCallback(() => {
+        if (!parentRef.current)
+            return;
+        const scrollTop = parentRef.current.scrollTop;
+        const start = findItemIndexByScrollTop(scrollTop);
+        let end = start;
+        let heightSum = getCumulativeHeight(end + 1) - scrollTop;
+        while (end < itemsData.length - 1 && heightSum < containerHeight) {
+            end++;
+            heightSum += itemsData[end].height;
+        }
+        setVisibleRange({
+            start: Math.max(0, start - overscanCount),
+            end: Math.min(itemsData.length - 1, end + overscanCount),
+        });
+        ticking.current = false;
+    }, [itemsData, containerHeight, findItemIndexByScrollTop, getCumulativeHeight, overscanCount]);
+    const handleScroll = React.useCallback(() => {
+        if (!parentRef.current)
+            return;
+        const scrollTop = parentRef.current.scrollTop;
+        if (!ticking.current) {
+            requestAnimationFrame(() => {
+                if (Math.abs(scrollTop - prevScrollTop.current) >= scrollThreshold) {
+                    calculateVisibleRange();
+                    prevScrollTop.current = scrollTop;
+                }
+                ticking.current = false;
+            });
+            ticking.current = true;
+        }
+    }, [calculateVisibleRange, scrollThreshold]);
+    React.useEffect(() => {
+        calculateVisibleRange();
+    }, [calculateVisibleRange]);
+    return (_jsx("div", { ref: parentRef, style: {
+            height: `${containerHeight}px`,
+            overflowY: "auto",
+        }, onScroll: handleScroll, children: _jsx("div", { style: {
+                height: `${totalHeight}px`,
+                position: "relative",
+            }, children: visibleItems.map((item, _i) => {
+                return (_jsxs("div", { style: {
+                        position: "absolute",
+                        transform: `translate3d(0px, ${getCumulativeHeight(item.id - 1)}px, 0px)`,
+                        left: 0,
+                        right: 0,
+                        height: `${item.height}px`,
+                        borderBottom: "1px solid #ddd",
+                    }, children: [children, " \uC624\uC789?"] }, item.id));
+            }) }) }));
+}
+export default GridBasicRows;

package/lib/cjs/components/NoraDataGrid.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from "react";
+export declare const NoraDataGrid: React.ForwardRefExoticComponent<NoraDataGridMainProps & React.RefAttributes<HTMLDivElement>> & {
+    Title: typeof NoraDataGridTitle;
+    Body: React.ForwardRefExoticComponent<NoraDataGridMainProps & React.RefAttributes<HTMLDivElement>>;
+    Footer: typeof NoraDataGridFooter;
+};
+declare function NoraDataGridTitle(props: NoraDataGridMainProps): import("react/jsx-runtime").JSX.Element;
+declare function NoraDataGridFooter(props: NoraDataGridMainProps): import("react/jsx-runtime").JSX.Element;
+interface NoraDataGridMainProps {
+    children?: ReactNode;
+}
+export {};

package/lib/cjs/components/NoraDataGrid.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { classes } from "../types/classes";
+import { cx } from "@emotion/css";
+import useGridApiContext from "../hooks/useGridApiContext";
+import { useStore } from "../provider/GridStoreContent";
+const NoraDataGridMain = React.forwardRef((props, ref) => {
+    const { children } = props;
+    return (_jsx("div", { className: cx(classes.TableClasses.container.root, classes.TableClasses.container.classes), ref: ref, children: children }));
+});
+const NoraDataGridBody = React.forwardRef((props, ref) => {
+    const { children } = props;
+    const gridRef = useGridApiContext();
+    const store = useStore();
+    const bodyRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => bodyRef.current);
+    React.useEffect(() => {
+        function handleClickOutside(event) {
+            if (bodyRef.current && bodyRef.current.contains(event.target)) {
+                console.log("Provider 안쪽", event.target);
+            }
+            else {
+                // body 바깥 클릭 감지
+                if (gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) {
+                    gridRef.current.setCellFocus(undefined, undefined).then((res) => {
+                        store.setState(["state", "cellFocus"], res);
+                    });
+                }
+            }
+        }
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, []);
+    return (_jsx("div", { ref: bodyRef, className: cx(classes.TableClasses.body.root, classes.TableClasses.body.classes), children: children }));
+});
+export const NoraDataGrid = Object.assign(NoraDataGridMain, {
+    Title: NoraDataGridTitle,
+    Body: NoraDataGridBody,
+    Footer: NoraDataGridFooter,
+});
+function NoraDataGridTitle(props) {
+    const { children } = props;
+    return _jsx("div", { className: cx(classes.TableClasses.title.root, classes.TableClasses.title.classes), children: children });
+}
+function NoraDataGridFooter(props) {
+    const { children } = props;
+    return _jsx("div", { className: classes.TableClasses.footer, children: children });
+}

package/lib/cjs/components/TwoDimensionalVirtualizedList.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare const initialWindowHeight = 500;
+export declare const TwoDimensionalVirtualizedList: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+declare const _default: React.MemoExoticComponent<React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>>;
+export default _default;