This commit is contained in:
Rizky 2024-07-09 21:29:26 -07:00
parent c11982132f
commit cb3299d1ef
3 changed files with 27 additions and 28 deletions

View File

@ -36,7 +36,8 @@ export const Field: FC<FieldProp> = (arg) => {
delete props.className; delete props.className;
return ( return (
<label <LabelDiv
mode={sub_type === "table-edit" ? "div" : "label"}
className={cx( className={cx(
"field", "field",
"c-flex", "c-flex",
@ -89,6 +90,17 @@ export const Field: FC<FieldProp> = (arg) => {
</div> </div>
)} )}
</div> </div>
</label> </LabelDiv>
); );
}; };
const LabelDiv = (arg: any) => {
const props = { ...arg };
const mode = arg.mode;
delete props.mode;
if (mode === "label") {
return <label {...props} />;
}
return <div {...props} />;
};

View File

@ -59,7 +59,6 @@ export const FieldTypeInput: FC<{
type_field = "text"; type_field = "text";
} }
let display: any = null;
let value: any = fm.data[field.name] || ""; let value: any = fm.data[field.name] || "";
// let value: any = "2024-05-14T05:58:01.376Z" // case untuk date time // let value: any = "2024-05-14T05:58:01.376Z" // case untuk date time
@ -176,7 +175,11 @@ export const FieldTypeInput: FC<{
/> />
); );
case "money": case "money":
return <FieldMoney field={field} fm={fm} prop={prop} arg={arg} />; return (
<>
<FieldMoney field={field} fm={fm} prop={prop} arg={arg} />
</>
);
case "rich-text": case "rich-text":
return <FieldRichText field={field} fm={fm} prop={prop} />; return <FieldRichText field={field} fm={fm} prop={prop} />;
case "date": case "date":
@ -230,7 +233,6 @@ export const FieldTypeInput: FC<{
spellCheck={false} spellCheck={false}
onFocus={(e) => { onFocus={(e) => {
field.focused = true; field.focused = true;
display = "";
field.render(); field.render();
prop.onFocus?.(e); prop.onFocus?.(e);
}} }}

View File

@ -13,39 +13,21 @@ export const FieldMoney: FC<{
let value: any = fm.data[field.name]; let value: any = fm.data[field.name];
const input = useLocal({ const input = useLocal({
value: 0 as any, value: 0 as any,
display: false as any,
ref: null as any, ref: null as any,
}); });
useEffect(() => { useEffect(() => {
input.value = value; input.value = value;
input.render(); input.render();
}, [fm.data[field.name]]); }, [fm.data[field.name]]);
let display: any = null;
const disabled = const disabled =
typeof field.disabled === "function" ? field.disabled() : field.disabled; typeof field.disabled === "function" ? field.disabled() : field.disabled;
const money = formatMoney(Number(value) || 0); const money = formatMoney(Number(value) || 0);
return ( return (
<div className="c-flex-grow c-flex-row c-flex c-w-full c-h-full"> <div className="c-flex-grow c-flex-row c-flex c-w-full c-h-full">
{/* <div
className={cx(
input.display ? "c-hidden" : "",
"c-flex-grow c-px-2 c-flex c-flex-row c-items-center",
isEmptyString(value) ? "c-text-gray-400" : ""
)}
onClick={() => {
if (input.ref) {
input.display = !input.display;
input.ref.focus();
input.render();
}
}}
>
{isEmptyString(value) ? arg.placeholder : money}
</div> */}
<input <input
ref={(el) => (input.ref = el)} ref={(el) => (input.ref = el)}
type={"text"} type={"text"}
onClick={() => {}}
onChange={(ev) => { onChange={(ev) => {
const rawValue = ev.currentTarget.value const rawValue = ev.currentTarget.value
.replace(/[^0-9,-]/g, "") .replace(/[^0-9,-]/g, "")
@ -80,20 +62,23 @@ export const FieldMoney: FC<{
value={formatCurrency(input.value)} value={formatCurrency(input.value)}
disabled={disabled} disabled={disabled}
className={cx( className={cx(
// !input.display ? "c-hidden" : "",
"c-flex-1 c-bg-transparent c-outline-none c-px-2 c-text-sm c-w-full" "c-flex-1 c-bg-transparent c-outline-none c-px-2 c-text-sm c-w-full"
)} )}
spellCheck={false} spellCheck={false}
onFocus={() => { onFocus={(e) => {
field.focused = true; field.focused = true;
field.render(); field.render();
prop.onFocus?.(e);
}}
onClick={(e) => {
e.stopPropagation();
}} }}
placeholder={arg.placeholder || ""} placeholder={arg.placeholder || ""}
onBlur={() => { onBlur={(e) => {
field.focused = false; field.focused = false;
input.display = !input.display;
input.render(); input.render();
field.render(); field.render();
prop.onBlur?.(e);
}} }}
/> />
</div> </div>