dn-react-router-toolkit 0.7.15 → 0.8.1

package/dist/table/table_form.mjs

@@ -0,0 +1,320 @@
+// src/table/table_form.tsx
+import { useLocation as useLocation2, useNavigate, useSearchParams as useSearchParams3 } from "react-router";
+import { GoSearch } from "react-icons/go";
+
+// src/table/table.tsx
+import { cn } from "dn-react-toolkit/utils";
+import { GoArrowDown, GoArrowUp } from "react-icons/go";
+import { Link, useSearchParams } from "react-router";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function Table({
+  className = "min-w-full whitespace-nowrap",
+  data,
+  columns,
+  mapper: Mapper,
+  getLink,
+  limit,
+  offset,
+  orderBy,
+  direction,
+  filters
+}) {
+  const keys = Object.entries(columns).filter((entry) => entry[1]).map(([key]) => key);
+  const sortedArray = [...data];
+  const [_, setSearchParams] = useSearchParams();
+  return /* @__PURE__ */ jsxs(
+    "table",
+    {
+      className: cn(
+        className,
+        "text-[15px] border-separate border-spacing-0"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: keys.map((key) => {
+          const value = columns[key];
+          function getReactNode() {
+            if (value && typeof value === "object" && "label" in value) {
+              return value.label;
+            }
+            return value;
+          }
+          function Head() {
+            const reactNode = getReactNode();
+            if (typeof reactNode === "string") {
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: cn(
+                    orderBy === key ? "text-gray-900 font-medium" : "text-gray-500 font-medium",
+                    "px-4 flex items-center w-full"
+                  ),
+                  onClick: () => {
+                    let newDirection = "asc";
+                    if (orderBy === key) {
+                      newDirection = direction === "asc" ? "desc" : "asc";
+                    }
+                    setSearchParams({
+                      orderBy: key,
+                      direction: newDirection
+                    });
+                  },
+                  children: [
+                    reactNode,
+                    orderBy === key && /* @__PURE__ */ jsx("div", { className: "ml-0.5", children: direction === "asc" ? /* @__PURE__ */ jsx(GoArrowUp, {}) : /* @__PURE__ */ jsx(GoArrowDown, {}) })
+                  ]
+                }
+              );
+            }
+            return /* @__PURE__ */ jsx(Fragment, { children: reactNode });
+          }
+          const filter = filters[key];
+          return /* @__PURE__ */ jsxs(
+            "th",
+            {
+              className: cn(
+                "py-4 border-y font-normal align-top"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(Head, {}),
+                filter && /* @__PURE__ */ jsx("div", { className: "px-3 mt-4", children: /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    className: "w-full h-10 px-1.5 border rounded-full outline-none",
+                    onChange: (e) => {
+                      const value2 = e.target.value;
+                      setSearchParams((prev) => {
+                        if (value2) {
+                          prev.set(
+                            key,
+                            encodeURIComponent(
+                              value2
+                            )
+                          );
+                        } else {
+                          prev.delete(key);
+                        }
+                        return prev;
+                      });
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "", children: "\uC804\uCCB4" }),
+                      filter.map((option) => /* @__PURE__ */ jsx(
+                        "option",
+                        {
+                          value: option,
+                          children: option
+                        },
+                        option
+                      ))
+                    ]
+                  }
+                ) })
+              ]
+            },
+            key
+          );
+        }) }) }),
+        /* @__PURE__ */ jsxs("tbody", { children: [
+          sortedArray.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+            "td",
+            {
+              colSpan: keys.length,
+              className: "px-4 h-20 text-gray-400 text-center",
+              children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
+            }
+          ) }),
+          sortedArray.map((item, i) => /* @__PURE__ */ jsx("tr", { className: "hover:bg-gray-50 transition-colors", children: keys.map((key, i2) => {
+            const value = item[key];
+            function Content() {
+              if (key in columns) {
+                const column = columns[key];
+                if (column && typeof column === "object" && "mapper" in column) {
+                  const mapper = column.mapper;
+                  if (mapper) {
+                    return /* @__PURE__ */ jsx(Fragment, { children: mapper(item) });
+                  }
+                }
+              }
+              return /* @__PURE__ */ jsx(Fragment, { children: String(value) });
+            }
+            const linkedContent = getLink ? /* @__PURE__ */ jsx(
+              Link,
+              {
+                to: getLink(item),
+                className: "block content-center px-4 w-full h-full",
+                children: /* @__PURE__ */ jsx(Content, {})
+              }
+            ) : /* @__PURE__ */ jsx(Content, {});
+            const cell = Mapper ? /* @__PURE__ */ jsx(Mapper, { item, index: i2, children: linkedContent }) : linkedContent;
+            return /* @__PURE__ */ jsx("td", { className: "px-0 h-14 border-b", children: cell }, key);
+          }) }, i))
+        ] })
+      ]
+    }
+  );
+}
+
+// src/table/use_table.tsx
+import { useLoaderData } from "react-router";
+function useTable() {
+  const { table } = useLoaderData();
+  return table;
+}
+
+// src/table/buttons.tsx
+import { cn as cn2 } from "dn-react-toolkit/utils";
+import { Link as Link2, useLocation, useSearchParams as useSearchParams2 } from "react-router";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function TablePageButtons({
+  MAX_PAGES_TO_SHOW,
+  total,
+  limit,
+  offset
+}) {
+  const pages = Math.ceil(total / limit);
+  const { pathname } = useLocation();
+  const [searchParams] = useSearchParams2();
+  const currentPage = Math.floor(offset / limit) + 1;
+  const startButton = (Math.ceil(currentPage / MAX_PAGES_TO_SHOW) - 1) * MAX_PAGES_TO_SHOW;
+  const endButton = Math.min(startButton + MAX_PAGES_TO_SHOW - 1, pages);
+  return /* @__PURE__ */ jsx2(Fragment2, { children: pages > 1 && /* @__PURE__ */ jsxs2("div", { className: "flex justify-center items-center my-8 gap-4 text-neutral-400", children: [
+    startButton > 1 && /* @__PURE__ */ jsx2(
+      Link2,
+      {
+        to: (() => {
+          searchParams.set(
+            "offset",
+            String((startButton - 1) * limit)
+          );
+          return `${pathname}?${searchParams.toString()}`;
+        })(),
+        className: "w-10 block text-center transition-colors hover:text-primary",
+        children: "\uC774\uC804"
+      }
+    ),
+    Array.from({
+      length: Math.min(
+        MAX_PAGES_TO_SHOW,
+        pages - startButton
+      )
+    }).map((_, index) => {
+      return /* @__PURE__ */ jsx2(
+        Link2,
+        {
+          to: (() => {
+            searchParams.set(
+              "offset",
+              String((startButton + index) * limit)
+            );
+            return `${pathname}?${searchParams.toString()}`;
+          })(),
+          className: cn2(
+            "w-6 block text-center transition-colors",
+            currentPage === startButton + index + 1 ? "font-bold text-primary" : "hover:text-primary"
+          ),
+          children: startButton + index + 1
+        },
+        index
+      );
+    }),
+    endButton < pages && /* @__PURE__ */ jsx2(
+      Link2,
+      {
+        to: (() => {
+          searchParams.set(
+            "offset",
+            String((endButton + 1) * limit)
+          );
+          return `${pathname}?${searchParams.toString()}`;
+        })(),
+        className: "w-10 block text-center transition-colors hover:text-primary",
+        children: "\uB2E4\uC74C"
+      }
+    )
+  ] }) });
+}
+
+// src/table/table_form.tsx
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function TableForm({
+  columns,
+  primaryKey = "id"
+}) {
+  const { pathname } = useLocation2();
+  const {
+    items,
+    total,
+    limit,
+    offset,
+    orderBy,
+    direction,
+    searchKey,
+    filters
+  } = useTable();
+  const navigate = useNavigate();
+  const search = (query) => {
+    const searchParams2 = new URLSearchParams(window.location.search);
+    searchParams2.set("query", query);
+    searchParams2.set("offset", "0");
+    navigate(`${pathname}?${searchParams2.toString()}`);
+  };
+  const [searchParams] = useSearchParams3();
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    searchKey && /* @__PURE__ */ jsxs3(
+      "form",
+      {
+        className: "h-20 px-4 flex items-center border-t",
+        onSubmit: (e) => {
+          e.preventDefault();
+          const formData = new FormData(e.currentTarget);
+          const query = formData.get("query");
+          search(query);
+        },
+        children: [
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "submit",
+              className: "w-10 h-10 flex justify-center items-center",
+              children: /* @__PURE__ */ jsx3(GoSearch, { className: "text-xl mr-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              className: "outline-none h-full flex-1",
+              placeholder: "\uC5EC\uAE30\uC5D0 \uAC80\uC0C9\uD558\uC138\uC694...",
+              name: "query",
+              defaultValue: searchParams.get("query") ?? ""
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      Table,
+      {
+        data: items,
+        columns,
+        getLink: primaryKey ? (item) => `${pathname}/${item[primaryKey]}` : void 0,
+        limit,
+        offset,
+        orderBy,
+        direction,
+        filters
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      TablePageButtons,
+      {
+        total,
+        limit,
+        offset,
+        MAX_PAGES_TO_SHOW: 10
+      }
+    )
+  ] });
+}
+export {
+  TableForm
+};

package/dist/table/use_table.d.mts

@@ -0,0 +1,4 @@
+type TableLoaderData<T extends (...args: any) => any> = Awaited<ReturnType<T>>["table"];
+declare function useTable<T extends (...args: any) => any>(): TableLoaderData<T>;
+
+export { type TableLoaderData, useTable };

package/dist/table/use_table.d.ts

@@ -0,0 +1,4 @@
+type TableLoaderData<T extends (...args: any) => any> = Awaited<ReturnType<T>>["table"];
+declare function useTable<T extends (...args: any) => any>(): TableLoaderData<T>;
+
+export { type TableLoaderData, useTable };

package/dist/table/use_table.js

@@ -0,0 +1,34 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/table/use_table.tsx
+var use_table_exports = {};
+__export(use_table_exports, {
+  useTable: () => useTable
+});
+module.exports = __toCommonJS(use_table_exports);
+var import_react_router = require("react-router");
+function useTable() {
+  const { table } = (0, import_react_router.useLoaderData)();
+  return table;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useTable
+});

package/dist/table/use_table.mjs

@@ -0,0 +1,9 @@
+// src/table/use_table.tsx
+import { useLoaderData } from "react-router";
+function useTable() {
+  const { table } = useLoaderData();
+  return table;
+}
+export {
+  useTable
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dn-react-router-toolkit",
-  "version": "0.7.15",
+  "version": "0.8.1",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.mjs",
   "module": "./dist/index.js",
@@ -100,4 +100,4 @@
     "react-dom": "^19",
     "react-router": "^7.13.1"
   }
-}
+}