From 3f56904fd735a53628687aba66139b1c1173c7ec Mon Sep 17 00:00:00 2001 From: rizrmd Date: Tue, 11 Jun 2024 01:23:29 -0700 Subject: [PATCH] fix --- .../Datepicker/components/Datepicker.tsx | 104 ++-- comps/custom/Datepicker/components/Input.tsx | 2 +- comps/custom/Datepicker/helpers/index.ts | 34 +- comps/filter/gen/gen-filter.ts | 5 + comps/form/base/BaseForm.tsx | 25 +- comps/form/field/Field.tsx | 53 +- comps/form/field/FieldInput.tsx | 50 +- comps/form/field/table-edit/TableEdit.tsx | 111 +++- comps/form/field/type/TypeDropdown.tsx | 64 ++- comps/form/field/type/TypeInput.tsx | 2 +- comps/form/field/type/TypeMoney.tsx | 12 +- comps/form/gen/fields.ts | 89 ++- comps/form/gen/gen-form.ts | 191 ++++++- comps/form/gen/gen-rel-form.ts | 13 + comps/form/gen/gen-rel-many.ts | 236 ++++---- comps/form/gen/gen-rel.ts | 42 +- comps/form/gen/gen-table-edit.ts | 506 ++++++++++++++++++ comps/form/typings.ts | 2 + comps/list/TableList.css | 494 +++++++++++++++++ comps/list/TableList.tsx | 122 +++-- comps/md/gen/gen-table-list.ts | 18 +- comps/md/gen/md-form.ts | 9 + comps/md/gen/md-list.ts | 8 + comps/md/parts/MDDetail.tsx | 8 +- comps/md/parts/MDMaster.tsx | 4 +- comps/ui/typeahead.tsx | 18 +- exports.ts => exports.tsx | 24 +- gen/gen_form/new_field.ts | 1 + gen/utils.ts | 2 +- preset/login/Login.tsx | 14 +- preset/menu/Layout.tsx | 6 +- utils/lazify.tsx | 35 +- 32 files changed, 1920 insertions(+), 384 deletions(-) create mode 100755 comps/filter/gen/gen-filter.ts create mode 100755 comps/form/gen/gen-rel-form.ts create mode 100755 comps/form/gen/gen-table-edit.ts create mode 100755 comps/list/TableList.css rename exports.ts => exports.tsx (83%) diff --git a/comps/custom/Datepicker/components/Datepicker.tsx b/comps/custom/Datepicker/components/Datepicker.tsx index fa90320..15f2513 100755 --- a/comps/custom/Datepicker/components/Datepicker.tsx +++ b/comps/custom/Datepicker/components/Datepicker.tsx @@ -18,6 +18,7 @@ import useOnClickOutside from "../hooks"; import { Period, DatepickerType, ColorKeys } from "../types"; import { Arrow, VerticalDash } from "./utils"; +import { createPortal } from "react-dom"; const Datepicker: React.FC = ({ primaryColor = "blue", @@ -70,8 +71,8 @@ const Datepicker: React.FC = ({ const [inputRef, setInputRef] = useState(React.createRef()); // Custom Hooks use - useOnClickOutside(containerRef, () => { - const container = containerRef.current; + useOnClickOutside(calendarContainerRef, () => { + const container = calendarContainerRef.current; if (container) { hideDatepicker(); } @@ -341,59 +342,76 @@ const Datepicker: React.FC = ({ : defaultContainerClassName; }, [containerClassName]); + const toaster = document.querySelector(".prasi-toaster"); + const rect = inputRef.current?.getBoundingClientRect(); return (
-
- + {toaster && + createPortal( +
+ -
-
- {showShortcuts && } - -
- - - {useRange && ( - <> -
- -
+
+
+ {showShortcuts && } +
- - )} -
-
- {showFooter &&
} -
-
+ {useRange && ( + <> +
+ +
+ + + + )} +
+
+ + {showFooter &&
} +
+
, + toaster + )}
); diff --git a/comps/custom/Datepicker/components/Input.tsx b/comps/custom/Datepicker/components/Input.tsx index c4494c9..b8df914 100755 --- a/comps/custom/Datepicker/components/Input.tsx +++ b/comps/custom/Datepicker/components/Input.tsx @@ -62,7 +62,7 @@ const Input: React.FC = (e: Props) => { primaryColor as keyof (typeof RING_COLOR)["second-focus"] ]; - const defaultInputClassName = `c-relative c-transition-all c-duration-300 c-pl-2 c-pr-14 c-w-full c-border-gray-300 dark:c-bg-slate-800 dark:c-text-white/80 dark:c-border-slate-600 c-rounded-lg c-tracking-wide c-font-light c-text-sm c-placeholder-gray-400 c-bg-white c-outline-none focus:c-ring-0 disabled:c-opacity-40 disabled:c-cursor-not-allowed ${border} ${ring}`; + const defaultInputClassName = `c-relative c-transition-all c-duration-300 c-pl-2 c-pr-14 c-w-full c-border-gray-300 dark:c-bg-slate-800 dark:c-text-white/80 dark:c-border-slate-600 c-rounded-lg c-tracking-wide c-font-light c-text-sm c-placeholder-gray-400 c-bg-transparent c-outline-none focus:c-ring-0 disabled:c-opacity-40 disabled:c-cursor-not-allowed ${border} ${ring}`; return typeof inputClassName === "function" ? inputClassName(defaultInputClassName) diff --git a/comps/custom/Datepicker/helpers/index.ts b/comps/custom/Datepicker/helpers/index.ts index 6da10b2..7f9014a 100755 --- a/comps/custom/Datepicker/helpers/index.ts +++ b/comps/custom/Datepicker/helpers/index.ts @@ -14,39 +14,39 @@ export function classNames(...classes: (false | null | undefined | string)[]) { export function getTextColorByPrimaryColor(color: string) { switch (color) { case "blue": - return "text-blue-500"; + return "c-text-blue-500"; case "orange": - return "text-orange-500"; + return "c-text-orange-500"; case "yellow": - return "text-yellow-500"; + return "c-text-yellow-500"; case "red": - return "text-red-500"; + return "c-text-red-500"; case "purple": - return "text-purple-500"; + return "c-text-purple-500"; case "amber": - return "text-amber-500"; + return "c-text-amber-500"; case "lime": - return "text-lime-500"; + return "c-text-lime-500"; case "green": - return "text-green-500"; + return "c-text-green-500"; case "emerald": - return "text-emerald-500"; + return "c-text-emerald-500"; case "teal": - return "text-teal-500"; + return "c-text-teal-500"; case "cyan": - return "text-cyan-500"; + return "c-text-cyan-500"; case "sky": - return "text-sky-500"; + return "c-text-sky-500"; case "indigo": - return "text-indigo-500"; + return "c-text-indigo-500"; case "violet": - return "text-violet-500"; + return "c-text-violet-500"; case "fuchsia": - return "text-fuchsia-500"; + return "c-text-fuchsia-500"; case "pink": - return "text-pink-500"; + return "c-text-pink-500"; case "rose": - return "text-rose-500"; + return "c-text-rose-500"; default: return ""; } diff --git a/comps/filter/gen/gen-filter.ts b/comps/filter/gen/gen-filter.ts new file mode 100755 index 0000000..0064ef3 --- /dev/null +++ b/comps/filter/gen/gen-filter.ts @@ -0,0 +1,5 @@ +export const generateFilter = ( + data: any, + item: PrasiItem, + commit: boolean +) => {}; diff --git a/comps/form/base/BaseForm.tsx b/comps/form/base/BaseForm.tsx index 4f8067c..02c1c62 100755 --- a/comps/form/base/BaseForm.tsx +++ b/comps/form/base/BaseForm.tsx @@ -9,6 +9,7 @@ export type BaseFormProps = { on_submit?: (form: BaseFormLocal) => Promise | any; children: ReactNode | ((form: BaseFormLocal) => ReactNode); render?: () => void; + is_form?: boolean; }; export const BaseForm = >( props: BaseFormProps @@ -101,7 +102,29 @@ export const BaseForm = >( if (form.status === "init") { form.status = "ready"; } - + if (typeof props.is_form === "boolean") { + if (!props.is_form) { + return ( +
+
+ {typeof children === "function" ? children(form) : children} +
+
+ ); + } + } return (
{ diff --git a/comps/form/field/Field.tsx b/comps/form/field/Field.tsx index 6af5921..32b42f4 100755 --- a/comps/form/field/Field.tsx +++ b/comps/form/field/Field.tsx @@ -1,13 +1,17 @@ +import { useLocal } from "@/utils/use-local"; import { FC, useEffect } from "react"; import { FieldProp } from "../typings"; import { useField } from "../utils/use-field"; import { validate } from "../utils/validate"; import { FieldInput } from "./FieldInput"; import { Label } from "./Label"; -import { useLocal } from "@/utils/use-local"; export const Field: FC = (arg) => { const showlabel = arg.show_label || "y"; + + let type: any = typeof arg.type === "function" ? arg.type() : arg.type; // tipe field + let sub_type: any = arg.sub_type; // tipe field + const { fm } = arg; const field = useField(arg); const name = field.name; @@ -27,6 +31,46 @@ export const Field: FC = (arg) => { const errors = fm.error.get(name); const props = { ...arg.props }; delete props.className; + if (type === "-" || !type || sub_type === "-" || !sub_type) { + return ( + <> +
+ ⚠️ Field {arg.label} is not ready +
+
+ {arg.msg_error} +
+
+ + ); + } + if ( + (type === "multi-option" && sub_type === "-") || + (type === "multi-option" && sub_type === "table-edit" && (!arg.gen_table || arg.gen_table === "")) + ) { + return ( + <> +
+ ⚠️ Table Edit {arg.label} is not ready +
+
+ {arg.msg_error} +
+
+ + ); + } + return (