From a721b6284f974f0e83a832dff2f64c69f7c5081f Mon Sep 17 00:00:00 2001 From: rizrmd Date: Thu, 7 Mar 2024 21:34:40 -0700 Subject: [PATCH] fix --- comps/custom/Table.tsx | 76 ------------------------ comps/custom/TableList.tsx | 99 +++++++++++++++++++++++++++++++ comps/form/Field.tsx | 36 +++++++++--- comps/icon.tsx | 6 ++ comps/ui/table.tsx | 117 +++++++++++++++++++++++++++++++++++++ exports.tsx | 2 +- 6 files changed, 252 insertions(+), 84 deletions(-) delete mode 100755 comps/custom/Table.tsx create mode 100755 comps/custom/TableList.tsx create mode 100755 comps/ui/table.tsx diff --git a/comps/custom/Table.tsx b/comps/custom/Table.tsx deleted file mode 100755 index 3cf7e2c..0000000 --- a/comps/custom/Table.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { useLocal } from "@/utils/use-local"; -import { FC, useEffect } from "react"; -import { icon } from "../icon"; - -type TableProps = { - map_val: Array<{ name: string }>; -}; - -export const Table: FC = (_args) => { - const { map_val } = _args; - - const local = useLocal({ - list: [ - { - name: "test1", - }, - { - name: "test2", - }, - ] as { name: string }[], - status: "init" as "init" | "loading" | "ready", - }); - - // useEffect(() => { - // (async () => { - // if (local.status === "init") { - // local.status = "loading"; - // local.render(); - - // local.list = await map_val; - // local.render(); - - // local.status = "ready"; - // local.render(); - // } - // })(); - // }, [map_val]); - - console.log(local.list, "tes"); - - return ( -
- - - - - - - - - - {!!local.list && - local.list.map((item, index) => ( - - - - - - ))} - -
NomorHeader 1Action
- {index + 1} - {item.name} - - -
-
- ); -}; diff --git a/comps/custom/TableList.tsx b/comps/custom/TableList.tsx new file mode 100755 index 0000000..b584a58 --- /dev/null +++ b/comps/custom/TableList.tsx @@ -0,0 +1,99 @@ +import { useLocal } from "@/utils/use-local"; +import { FC, ReactNode, useEffect } from "react"; +import { icon } from "../icon"; +import { Skeleton } from "../ui/skeleton"; +import { + Table, + TableBody, + TableCaption, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/comps/ui/table"; + +type TableListProps = { + mapping: () => Promise; + on_load: () => Promise; +}; + +type Column = { + name: string; + title?: string; + jsx?: ReactNode; + type?: "number" | "default"; +}; + +export const TableList: FC = (_args) => { + const { mapping, on_load } = _args; + + const local = useLocal({ + columns: [] as Column[], + list: [] as Record[], + status: "init" as "init" | "loading" | "ready", + }); + + useEffect(() => { + (async () => { + if (local.status === "init") { + local.status = "loading"; + local.render(); + + local.columns = await mapping(); + local.list = await on_load(); + local.render(); + + local.status = "ready"; + local.render(); + } + })(); + }, [mapping]); + + console.log(local.columns, local.list, "s"); + + return ( +
+ {local.status !== "ready" ? ( + + ) : ( + <> + + {/* /** ini header */} + {!!local.columns && ( + + + {local.columns.map((item: Column, index: number) => { + return ( + + {item.name} + + ); + })} + + + )} + + {!!local.list && + local.list.map((item, idx) => ( + + {local.columns.map((col, col_idx) => ( + + {!!col.title + ? col.title + : !!col.jsx + ? col.jsx + : item[col.name]} + + ))} + + ))} + +
+ + )} +
+ ); +}; diff --git a/comps/form/Field.tsx b/comps/form/Field.tsx index 8ed48e1..5dae4f1 100755 --- a/comps/form/Field.tsx +++ b/comps/form/Field.tsx @@ -35,11 +35,22 @@ export const Field: FC<{ | "datetime" | "money" | "slider" - | "master-linkF"; + | "master-link"; required: "y" | "n"; options: () => Promise<{ value: string; label: string }[]>; - slider_options: () => Promise; -}> = ({ name, form, desc, label, type, required, options, slider_options }) => { + slider: () => Promise; + on_change: (arg: { value: any }) => void | Promise; +}> = ({ + name, + form, + desc, + label, + type, + required, + options, + slider, + on_change, +}) => { const value = form?.hook.getValues()[name]; const local = useLocal({ dropdown: { @@ -71,12 +82,12 @@ export const Field: FC<{ useEffect(() => { if (type === "slider") { local.slider.value = parseSliderValue(value, local.slider.opt); - if (typeof slider_options === "function") { + if (typeof slider === "function") { if (local.slider.status === "init") { local.slider.status = "ready"; local.render(); (async () => { - const res = await slider_options(); + const res = await slider(); local.slider.opt = res; local.render(); @@ -105,7 +116,7 @@ export const Field: FC<{ /> )} ( @@ -152,7 +163,18 @@ export const Field: FC<{ )} {["text", "password"].includes(type) && ( - + { + console.log(e.currentTarget.value); + on_change({ value: e.currentTarget.value }); + } + : undefined + } + /> )} {type === "textarea" && ( diff --git a/comps/icon.tsx b/comps/icon.tsx index a443a9d..dcd8643 100755 --- a/comps/icon.tsx +++ b/comps/icon.tsx @@ -42,10 +42,16 @@ import { Plus, Delete, Edit, + BetweenHorizontalEnd, + BetweenHorizontalStart, + Outdent, + Indent, } from "lucide-react"; export const icon = { home: , + in: , + out: , dashboard: , dashboardSmall: , dashboardSmallTransparent: , diff --git a/comps/ui/table.tsx b/comps/ui/table.tsx new file mode 100755 index 0000000..f0442a3 --- /dev/null +++ b/comps/ui/table.tsx @@ -0,0 +1,117 @@ +import * as React from "react" + +import { cn } from "@/utils" + +const Table = React.forwardRef< + HTMLTableElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+ + +)) +Table.displayName = "Table" + +const TableHeader = React.forwardRef< + HTMLTableSectionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +TableHeader.displayName = "TableHeader" + +const TableBody = React.forwardRef< + HTMLTableSectionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +TableBody.displayName = "TableBody" + +const TableFooter = React.forwardRef< + HTMLTableSectionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + tr]:last:c-border-b-0", + className + )} + {...props} + /> +)) +TableFooter.displayName = "TableFooter" + +const TableRow = React.forwardRef< + HTMLTableRowElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +TableRow.displayName = "TableRow" + +const TableHead = React.forwardRef< + HTMLTableCellElement, + React.ThHTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +TableHead.displayName = "TableHead" + +const TableCell = React.forwardRef< + HTMLTableCellElement, + React.TdHTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +TableCell.displayName = "TableCell" + +const TableCaption = React.forwardRef< + HTMLTableCaptionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +TableCaption.displayName = "TableCaption" + +export { + Table, + TableHeader, + TableBody, + TableFooter, + TableHead, + TableRow, + TableCell, + TableCaption, +} diff --git a/exports.tsx b/exports.tsx index fa8b323..29ebc06 100755 --- a/exports.tsx +++ b/exports.tsx @@ -12,4 +12,4 @@ export { Button, FloatButton } from "@/comps/ui/button"; export { getPathname } from "@/utils/pathname"; export { Breadcrumb } from "./comps/custom/Breadcrumb"; export { Header } from "./comps/custom/Header"; -export { Table } from "./comps/custom/Table"; \ No newline at end of file +export { TableList } from "./comps/custom/TableList"; \ No newline at end of file