dn-react-router-toolkit 0.5.3 → 0.5.5

package/dist/crud/index.js

@@ -69,58 +69,56 @@ function CrudFormProvider({
         "Content-Type": "application/json"
       },
       body: JSON.stringify(
-        Object.entries(store.state).reduce(
-          function reducer(acc, [key, value]) {
-            const converter = (value2) => {
-              if (value2 === void 0) {
-                return void 0;
-              }
-              if (value2 === null) {
-                return {
-                  type: "null",
-                  value: null
-                };
-              }
-              if (typeof value2 === "string") {
-                return {
-                  type: "string",
-                  value: value2
-                };
-              }
-              if (typeof value2 === "number") {
-                return {
-                  type: "number",
-                  value: value2
-                };
-              }
-              if (typeof value2 === "boolean") {
-                return {
-                  type: "boolean",
-                  value: value2
-                };
-              }
-              if (value2 instanceof Date) {
-                return {
-                  type: "date",
-                  value: value2.toISOString()
-                };
-              }
-              if (Array.isArray(value2)) {
-                return value2.map((v) => converter(v));
-              }
-              if (typeof value2 === "object") {
-                return Object.entries(
-                  value2
-                ).reduce(reducer, {});
-              }
-            };
-            return {
-              ...acc,
-              [key]: converter(value)
-            };
-          },
-          {}
-        )
+        Object.entries(store.state).reduce(function reducer(acc, [key, value]) {
+          const converter = (value2) => {
+            if (value2 === void 0) {
+              return void 0;
+            }
+            if (value2 === null) {
+              return {
+                type: "null",
+                value: null
+              };
+            }
+            if (typeof value2 === "string") {
+              return {
+                type: "string",
+                value: value2
+              };
+            }
+            if (typeof value2 === "number") {
+              return {
+                type: "number",
+                value: value2
+              };
+            }
+            if (typeof value2 === "boolean") {
+              return {
+                type: "boolean",
+                value: value2
+              };
+            }
+            if (value2 instanceof Date) {
+              return {
+                type: "date",
+                value: value2.toISOString()
+              };
+            }
+            if (Array.isArray(value2)) {
+              return value2.map((v) => converter(v));
+            }
+            if (typeof value2 === "object") {
+              return Object.entries(value2).reduce(
+                reducer,
+                {}
+              );
+            }
+          };
+          return {
+            ...acc,
+            [key]: converter(value)
+          };
+        }, {})
       )
     });
     if (!res.ok) {
@@ -163,33 +161,77 @@ function CrudFormProvider({
 // src/crud/crud_form.tsx
 var import_store2 = require("dn-react-toolkit/store");
 var import_react3 = __toESM(require("react"));
+var import_utils = require("dn-react-toolkit/utils");
+var import_text_editor = require("dn-react-toolkit/text_editor");
+var textarea = (0, import_text_editor.createTextEditor)();
 function CrudForm({ AdminLayout }) {
   const form = useFormContext();
   return /* @__PURE__ */ import_react3.default.createElement(
     AdminLayout,
     {
       title: `${form.name} ${form.item ? "\uC218\uC815" : "\uCD94\uAC00"}`,
-      actions: /* @__PURE__ */ import_react3.default.createElement(
-        "button",
-        {
-          type: "button",
-          className: "button-primary",
-          onClick: form.submit
-        },
-        "\uC800\uC7A5\uD558\uAE30"
-      ),
+      actions: /* @__PURE__ */ import_react3.default.createElement("button", { type: "button", className: "button-primary", onClick: form.submit }, "\uC800\uC7A5\uD558\uAE30"),
       className: "max-w-3xl mx-auto"
     },
-    Object.keys(form.columns).length > 0 && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, Object.entries(form.columns).map(
-      ([key, value]) => /* @__PURE__ */ import_react3.default.createElement("label", { key }, value.label, value.component ? /* @__PURE__ */ import_react3.default.createElement(value.component, null) : /* @__PURE__ */ import_react3.default.createElement(
-        import_store2.SyncInput,
-        {
-          store: form.store,
-          property: key,
-          className: "input-form"
+    Object.keys(form.columns).length > 0 && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, Object.entries(
+      form.columns
+    ).map(([key, value]) => {
+      const createComponent = () => {
+        if (value.component) {
+          return /* @__PURE__ */ import_react3.default.createElement(value.component, { store: form.store, property: key });
+        }
+        if (value.type === "checkbox") {
+          return /* @__PURE__ */ import_react3.default.createElement(import_store2.SyncSwitch, { store: form.store, property: key });
+        }
+        if (value.type === "datetime") {
+          return /* @__PURE__ */ import_react3.default.createElement(
+            import_store2.SyncInput,
+            {
+              store: form.store,
+              property: key,
+              className: "input-form",
+              type: "datetime-local",
+              serializer: (value2) => {
+                if (value2 instanceof Date) {
+                  return (0, import_utils.moment)(value2).toISOString(true).slice(0, 16);
+                }
+                return String(value2);
+              },
+              deserializer: (value2) => {
+                if (!value2) {
+                  return void 0;
+                }
+                return (0, import_utils.moment)(value2).toDate();
+              }
+            }
+          );
+        }
+        if (value.type === "textarea") {
+          const Editor = (0, import_store2.useSyncTextEditor)(textarea);
+          return /* @__PURE__ */ import_react3.default.createElement(
+            Editor.SyncTextEditor,
+            {
+              store: form.store,
+              property: key
+            }
+          );
         }
-      ))
-    )),
+        if (value.options) {
+          const Component = value.options;
+          return /* @__PURE__ */ import_react3.default.createElement(import_store2.SyncSelect, { store: form.store, property: key }, /* @__PURE__ */ import_react3.default.createElement(Component, null));
+        }
+        return /* @__PURE__ */ import_react3.default.createElement(
+          import_store2.SyncInput,
+          {
+            store: form.store,
+            property: key,
+            type: value.type,
+            className: "input-form"
+          }
+        );
+      };
+      return /* @__PURE__ */ import_react3.default.createElement("label", { key }, value.label, createComponent());
+    })),
     form.item && /* @__PURE__ */ import_react3.default.createElement(
       "button",
       {
@@ -632,7 +674,7 @@ function GoSearch(props) {
 }
 
 // src/table/buttons.tsx
-var import_utils = require("dn-react-toolkit/utils");
+var import_utils2 = require("dn-react-toolkit/utils");
 var import_react_router4 = require("react-router");
 var import_react6 = __toESM(require("react"));
 function TablePageButtons({
@@ -677,7 +719,7 @@ function TablePageButtons({
           );
           return `${pathname}?${searchParams.toString()}`;
         })(),
-        className: (0, import_utils.cn)(
+        className: (0, import_utils2.cn)(
           "w-6 block text-center transition-colors",
           currentPage === startButton + index2 + 1 ? "font-bold text-primary" : "hover:text-primary"
         )
@@ -701,7 +743,7 @@ function TablePageButtons({
 }
 
 // src/table/table.tsx
-var import_utils2 = require("dn-react-toolkit/utils");
+var import_utils3 = require("dn-react-toolkit/utils");
 var import_react_router5 = require("react-router");
 var import_react7 = __toESM(require("react"));
 function Table({
@@ -721,7 +763,7 @@ function Table({
   return /* @__PURE__ */ import_react7.default.createElement(
     "table",
     {
-      className: (0, import_utils2.cn)(
+      className: (0, import_utils3.cn)(
         className,
         "text-[15px] border-separate border-spacing-0"
       )
@@ -740,7 +782,7 @@ function Table({
           return /* @__PURE__ */ import_react7.default.createElement(
             "button",
             {
-              className: (0, import_utils2.cn)(
+              className: (0, import_utils3.cn)(
                 orderBy === key ? "text-neutral-900 font-medium" : "text-neutral-500",
                 "px-4 h-14 flex items-center w-full"
               ),
@@ -765,7 +807,7 @@ function Table({
         "th",
         {
           key,
-          className: (0, import_utils2.cn)("border-y font-normal")
+          className: (0, import_utils3.cn)("border-y font-normal")
         },
         /* @__PURE__ */ import_react7.default.createElement(Head, null)
       );

package/dist/crud/index.mjs

@@ -27,58 +27,56 @@ function CrudFormProvider({
         "Content-Type": "application/json"
       },
       body: JSON.stringify(
-        Object.entries(store.state).reduce(
-          function reducer(acc, [key, value]) {
-            const converter = (value2) => {
-              if (value2 === void 0) {
-                return void 0;
-              }
-              if (value2 === null) {
-                return {
-                  type: "null",
-                  value: null
-                };
-              }
-              if (typeof value2 === "string") {
-                return {
-                  type: "string",
-                  value: value2
-                };
-              }
-              if (typeof value2 === "number") {
-                return {
-                  type: "number",
-                  value: value2
-                };
-              }
-              if (typeof value2 === "boolean") {
-                return {
-                  type: "boolean",
-                  value: value2
-                };
-              }
-              if (value2 instanceof Date) {
-                return {
-                  type: "date",
-                  value: value2.toISOString()
-                };
-              }
-              if (Array.isArray(value2)) {
-                return value2.map((v) => converter(v));
-              }
-              if (typeof value2 === "object") {
-                return Object.entries(
-                  value2
-                ).reduce(reducer, {});
-              }
-            };
-            return {
-              ...acc,
-              [key]: converter(value)
-            };
-          },
-          {}
-        )
+        Object.entries(store.state).reduce(function reducer(acc, [key, value]) {
+          const converter = (value2) => {
+            if (value2 === void 0) {
+              return void 0;
+            }
+            if (value2 === null) {
+              return {
+                type: "null",
+                value: null
+              };
+            }
+            if (typeof value2 === "string") {
+              return {
+                type: "string",
+                value: value2
+              };
+            }
+            if (typeof value2 === "number") {
+              return {
+                type: "number",
+                value: value2
+              };
+            }
+            if (typeof value2 === "boolean") {
+              return {
+                type: "boolean",
+                value: value2
+              };
+            }
+            if (value2 instanceof Date) {
+              return {
+                type: "date",
+                value: value2.toISOString()
+              };
+            }
+            if (Array.isArray(value2)) {
+              return value2.map((v) => converter(v));
+            }
+            if (typeof value2 === "object") {
+              return Object.entries(value2).reduce(
+                reducer,
+                {}
+              );
+            }
+          };
+          return {
+            ...acc,
+            [key]: converter(value)
+          };
+        }, {})
       )
     });
     if (!res.ok) {
@@ -119,35 +117,84 @@ function CrudFormProvider({
 }
 
 // src/crud/crud_form.tsx
-import { SyncInput } from "dn-react-toolkit/store";
+import {
+  SyncInput,
+  SyncSelect,
+  SyncSwitch,
+  useSyncTextEditor
+} from "dn-react-toolkit/store";
 import React2 from "react";
+import { moment } from "dn-react-toolkit/utils";
+import { createTextEditor } from "dn-react-toolkit/text_editor";
+var textarea = createTextEditor();
 function CrudForm({ AdminLayout }) {
   const form = useFormContext();
   return /* @__PURE__ */ React2.createElement(
     AdminLayout,
     {
       title: `${form.name} ${form.item ? "\uC218\uC815" : "\uCD94\uAC00"}`,
-      actions: /* @__PURE__ */ React2.createElement(
-        "button",
-        {
-          type: "button",
-          className: "button-primary",
-          onClick: form.submit
-        },
-        "\uC800\uC7A5\uD558\uAE30"
-      ),
+      actions: /* @__PURE__ */ React2.createElement("button", { type: "button", className: "button-primary", onClick: form.submit }, "\uC800\uC7A5\uD558\uAE30"),
       className: "max-w-3xl mx-auto"
     },
-    Object.keys(form.columns).length > 0 && /* @__PURE__ */ React2.createElement(React2.Fragment, null, Object.entries(form.columns).map(
-      ([key, value]) => /* @__PURE__ */ React2.createElement("label", { key }, value.label, value.component ? /* @__PURE__ */ React2.createElement(value.component, null) : /* @__PURE__ */ React2.createElement(
-        SyncInput,
-        {
-          store: form.store,
-          property: key,
-          className: "input-form"
+    Object.keys(form.columns).length > 0 && /* @__PURE__ */ React2.createElement(React2.Fragment, null, Object.entries(
+      form.columns
+    ).map(([key, value]) => {
+      const createComponent = () => {
+        if (value.component) {
+          return /* @__PURE__ */ React2.createElement(value.component, { store: form.store, property: key });
+        }
+        if (value.type === "checkbox") {
+          return /* @__PURE__ */ React2.createElement(SyncSwitch, { store: form.store, property: key });
+        }
+        if (value.type === "datetime") {
+          return /* @__PURE__ */ React2.createElement(
+            SyncInput,
+            {
+              store: form.store,
+              property: key,
+              className: "input-form",
+              type: "datetime-local",
+              serializer: (value2) => {
+                if (value2 instanceof Date) {
+                  return moment(value2).toISOString(true).slice(0, 16);
+                }
+                return String(value2);
+              },
+              deserializer: (value2) => {
+                if (!value2) {
+                  return void 0;
+                }
+                return moment(value2).toDate();
+              }
+            }
+          );
         }
-      ))
-    )),
+        if (value.type === "textarea") {
+          const Editor = useSyncTextEditor(textarea);
+          return /* @__PURE__ */ React2.createElement(
+            Editor.SyncTextEditor,
+            {
+              store: form.store,
+              property: key
+            }
+          );
+        }
+        if (value.options) {
+          const Component = value.options;
+          return /* @__PURE__ */ React2.createElement(SyncSelect, { store: form.store, property: key }, /* @__PURE__ */ React2.createElement(Component, null));
+        }
+        return /* @__PURE__ */ React2.createElement(
+          SyncInput,
+          {
+            store: form.store,
+            property: key,
+            type: value.type,
+            className: "input-form"
+          }
+        );
+      };
+      return /* @__PURE__ */ React2.createElement("label", { key }, value.label, createComponent());
+    })),
     form.item && /* @__PURE__ */ React2.createElement(
       "button",
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dn-react-router-toolkit",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.mjs",
   "module": "./dist/index.js",