fix
This commit is contained in:
rizrmd
parent
8e37da6c64
commit
76c0c8c14d
|
|
@ -4,6 +4,7 @@ import { FieldLoading } from "../../ui/field-loading";
|
|||
import { MultiOption } from "./type/TypeMultiOption";
|
||||
import { SingleOption } from "./type/TypeSingleOption";
|
||||
import { FieldTypeText, PropTypeText } from "./type/TypeText";
|
||||
import { isValid } from "date-fns";
|
||||
|
||||
const modify = {
|
||||
timeout: null as any,
|
||||
|
|
@ -18,11 +19,34 @@ export const FieldInput: FC<{
|
|||
arg: FieldProp;
|
||||
}> = ({ field, fm, arg }) => {
|
||||
// return <></>
|
||||
const prefix = typeof field.prefix === "function" ? field.prefix() : typeof field.prefix === "string" ? field.prefix : null;
|
||||
const suffix = typeof field.suffix === "function" ? field.suffix() : typeof field.suffix === "string" ? field.prefix : null;
|
||||
const prefix =
|
||||
typeof field.prefix === "function"
|
||||
? field.prefix()
|
||||
: typeof field.prefix === "string"
|
||||
? field.prefix
|
||||
: null;
|
||||
const suffix =
|
||||
typeof field.suffix === "function"
|
||||
? field.suffix()
|
||||
: typeof field.suffix === "string"
|
||||
? field.prefix
|
||||
: null;
|
||||
const name = field.name;
|
||||
const errors = fm.error.get(name);
|
||||
let type_field = typeof arg.type === 'function' ? arg.type() : arg.type; // tipe field
|
||||
let type_field: any = typeof arg.type === "function" ? arg.type() : arg.type; // tipe field
|
||||
|
||||
let custom = <></>;
|
||||
if (field.type === "custom") {
|
||||
let res = arg.custom?.() || <></>;
|
||||
if (isValidElement(res)) custom = res;
|
||||
else {
|
||||
let f = res as any;
|
||||
if (typeof f.type === "string") {
|
||||
type_field = f.type as any;
|
||||
arg.sub_type = f.sub_type as any;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
|
|
@ -40,7 +64,8 @@ export const FieldInput: FC<{
|
|||
? field.focused
|
||||
? "c-border-red-600 c-bg-red-50 c-outline c-outline-red-700"
|
||||
: "c-border-red-600 c-bg-red-50"
|
||||
: field.focused && "c-border-blue-700 c-outline c-outline-blue-700",
|
||||
: field.focused &&
|
||||
"c-border-blue-700 c-outline c-outline-blue-700",
|
||||
css`
|
||||
& > .field-inner {
|
||||
min-height: 35px;
|
||||
|
|
@ -64,25 +89,35 @@ export const FieldInput: FC<{
|
|||
<div
|
||||
className={cx(
|
||||
"field-inner c-flex-1 c-flex c-items-center",
|
||||
field.disabled && "c-pointer-events-none",
|
||||
field.disabled && "c-pointer-events-none"
|
||||
)}
|
||||
>
|
||||
{[
|
||||
"date",
|
||||
"input"
|
||||
].includes(type_field) ? (
|
||||
<FieldTypeText
|
||||
field={field}
|
||||
fm={fm}
|
||||
arg={arg}
|
||||
prop={{ type: type_field as any, sub_type: arg.sub_type, prefix, suffix } as PropTypeText}
|
||||
/>
|
||||
) : ["single-option"].includes(type_field) ? (
|
||||
<SingleOption arg={arg} field={field} fm={fm} />
|
||||
) : ["multi-option"].includes(type_field) ? (
|
||||
<MultiOption arg={arg} field={field} fm={fm} />
|
||||
{type_field === "custom" && arg.custom ? (
|
||||
<>{custom}</>
|
||||
) : (
|
||||
<>{isValidElement(type_field) && type_field}</>
|
||||
<>
|
||||
{["date", "input"].includes(type_field) ? (
|
||||
<FieldTypeText
|
||||
field={field}
|
||||
fm={fm}
|
||||
arg={arg}
|
||||
prop={
|
||||
{
|
||||
type: type_field as any,
|
||||
sub_type: arg.sub_type,
|
||||
prefix,
|
||||
suffix,
|
||||
} as PropTypeText
|
||||
}
|
||||
/>
|
||||
) : ["single-option"].includes(type_field) ? (
|
||||
<SingleOption arg={arg} field={field} fm={fm} />
|
||||
) : ["multi-option"].includes(type_field) ? (
|
||||
<MultiOption arg={arg} field={field} fm={fm} />
|
||||
) : (
|
||||
<>{isValidElement(type_field) && type_field}</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { FMLocal, FieldLocal, FieldProp } from "../../typings";
|
|||
import { FieldMoney } from "./TypeMoney";
|
||||
import { FieldRichText } from "./TypeRichText";
|
||||
import { FieldUpload } from "./TypeUpload";
|
||||
import { EyeIcon, EyeOff } from "lucide-react";
|
||||
|
||||
export type PropTypeText = {
|
||||
type: "text" | "date";
|
||||
|
|
@ -36,6 +37,9 @@ export const FieldTypeText: FC<{
|
|||
prop: PropTypeText;
|
||||
arg: FieldProp;
|
||||
}> = ({ field, fm, prop, arg }) => {
|
||||
const input = useLocal({
|
||||
showHidePassword: false,
|
||||
});
|
||||
let type_field = prop.sub_type;
|
||||
switch (type_field) {
|
||||
case "datetime":
|
||||
|
|
@ -44,7 +48,10 @@ export const FieldTypeText: FC<{
|
|||
default:
|
||||
}
|
||||
|
||||
const input = useLocal({});
|
||||
if (input.showHidePassword) {
|
||||
type_field = "text";
|
||||
}
|
||||
|
||||
let display: any = null;
|
||||
let value: any = fm.data[field.name];
|
||||
|
||||
|
|
@ -151,35 +158,55 @@ export const FieldTypeText: FC<{
|
|||
<FieldRichText field={field} fm={fm} prop={prop} />
|
||||
</>
|
||||
) : (
|
||||
<input
|
||||
type={type_field}
|
||||
onChange={(ev) => {
|
||||
if (["date", "datetime", "datetime-local"].includes(type_field)) {
|
||||
let result = null;
|
||||
try {
|
||||
result = new Date(ev.currentTarget.value);
|
||||
} catch (ex) {}
|
||||
fm.data[field.name] = result;
|
||||
} else {
|
||||
fm.data[field.name] = ev.currentTarget.value;
|
||||
}
|
||||
fm.render();
|
||||
}}
|
||||
placeholder={arg.placeholder || ""}
|
||||
value={value}
|
||||
disabled={field.disabled}
|
||||
className="c-flex-1 c-bg-transparent c-outline-none c-px-2 c-text-sm c-w-full"
|
||||
spellCheck={false}
|
||||
onFocus={() => {
|
||||
field.focused = true;
|
||||
display = "halo dek";
|
||||
field.render();
|
||||
}}
|
||||
onBlur={() => {
|
||||
field.focused = false;
|
||||
field.render();
|
||||
}}
|
||||
/>
|
||||
<>
|
||||
<input
|
||||
type={type_field}
|
||||
onChange={(ev) => {
|
||||
if (["date", "datetime", "datetime-local"].includes(type_field)) {
|
||||
let result = null;
|
||||
try {
|
||||
result = new Date(ev.currentTarget.value);
|
||||
} catch (ex) {}
|
||||
fm.data[field.name] = result;
|
||||
} else {
|
||||
fm.data[field.name] = ev.currentTarget.value;
|
||||
}
|
||||
fm.render();
|
||||
}}
|
||||
placeholder={arg.placeholder || ""}
|
||||
value={value}
|
||||
disabled={field.disabled}
|
||||
className="c-flex-1 c-bg-transparent c-outline-none c-px-2 c-text-sm c-w-full"
|
||||
spellCheck={false}
|
||||
onFocus={() => {
|
||||
field.focused = true;
|
||||
display = "";
|
||||
field.render();
|
||||
}}
|
||||
onBlur={() => {
|
||||
field.focused = false;
|
||||
field.render();
|
||||
}}
|
||||
/>
|
||||
|
||||
{arg.sub_type === "password" && (
|
||||
<div
|
||||
className="c-absolute c-right-0 c-h-full c-flex c-items-center c-cursor-pointer"
|
||||
onClick={() => {
|
||||
input.showHidePassword = !input.showHidePassword;
|
||||
input.render();
|
||||
}}
|
||||
>
|
||||
<div className="">
|
||||
{input.showHidePassword ? (
|
||||
<EyeIcon className="c-h-4" />
|
||||
) : (
|
||||
<EyeOff className="c-h-4" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue