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 (