midsuit
/
prasi-lib
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix base-form

This commit is contained in:
rizrmd 2024-06-07 02:57:23 -07:00
parent 2d860d5866
commit 0e2f620ee0
3 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
comps/form/base/BaseForm.tsx
View File

@ -40,7 +40,7 @@ export const BaseForm = <T extends Record<string, any>>(
const prop: FieldProp = { const prop: FieldProp = {
name: arg.name, name: arg.name,
on_load: arg.onLoad, on_load: arg.onLoad,
sub_type: arg.subType sub_type: arg.subType,
} as any; } as any;
if (arg.onChange) prop.on_change = arg.onChange; if (arg.onChange) prop.on_change = arg.onChange;
return prop; return prop;
@ -58,6 +58,11 @@ export const BaseForm = <T extends Record<string, any>>(
}; };
form.createFm = () => { form.createFm = () => {
let size = "full";
if (form.internal.width > 650) {
size = "half";
}
return { return {
data: form.data, data: form.data,
props: { label_mode: "vertical" }, props: { label_mode: "vertical" },
@ -66,7 +71,7 @@ export const BaseForm = <T extends Record<string, any>>(
return []; return [];
}, },
}, },
size: { field: "full" }, size: { field: size },
render: form.render, render: form.render,
} as any; } as any;
}; };
@ -96,19 +101,26 @@ export const BaseForm = <T extends Record<string, any>>(
form.submit(); form.submit();
}} }}
className={cx( className={cx(
"form c-flex-1 c-flex-col c-w-full c-h-full c-relative c-overflow-auto c-contents", "form c-flex-1 c-flex c-flex-col c-w-full c-h-full c-relative c-overflow-auto c-contents",
className className
)} )}
> >
<div <div
className={cx( className={cx(
"form-inner c-flex-1 c-flex-wrap c-items-start c-content-start c-absolute c-inset-0 c-contents", "form-inner c-flex-1 c-flex c-flex-row c-flex-wrap c-items-start c-content-start c-absolute c-inset-0 c-contents",
css` css`
padding-right: 10px; padding-right: 10px;
` `
)} )}
ref={(el) => {
if (el?.offsetWidth) {
form.internal.width = el?.offsetWidth;
}
}}
> >
{typeof children === "function" ? children(form) : children} {form.internal.width && (
<>{typeof children === "function" ? children(form) : children}</>
)}
</div> </div>
</form> </form>
); );

5
comps/form/base/types.ts
View File

@ -4,6 +4,9 @@ import { FMLocal, FieldLocal, FieldProp } from "../typings";
export const default_base_form_local = { export const default_base_form_local = {
status: "init" as "init" | "submitting" | "ready", status: "init" as "init" | "submitting" | "ready",
data: {} as any, data: {} as any,
internal: {
width: 0,
},
}; };
type CreateFieldArg = { type CreateFieldArg = {
@ -13,7 +16,7 @@ type CreateFieldArg = {
onChange?: (value: any) => void; onChange?: (value: any) => void;
render?: () => void; render?: () => void;
onLoad?: () => { value: string; label: string }[]; onLoad?: () => { value: string; label: string }[];
subType?: string subType?: string;
}; };
export type BaseFormLocal<T> = Omit<typeof default_base_form_local, "data"> & { export type BaseFormLocal<T> = Omit<typeof default_base_form_local, "data"> & {

5
comps/form/field/FieldInput.tsx
View File

@ -1,10 +1,9 @@
import { FC, isValidElement } from "react"; import { FC, isValidElement } from "react";
import { FMLocal, FieldLocal, FieldProp } from "../typings";
import { FieldLoading } from "../../ui/field-loading"; import { FieldLoading } from "../../ui/field-loading";
import { FMLocal, FieldLocal, FieldProp } from "../typings";
import { FieldTypeInput, PropTypeInput } from "./type/TypeInput";
import { MultiOption } from "./type/TypeMultiOption"; import { MultiOption } from "./type/TypeMultiOption";
import { SingleOption } from "./type/TypeSingleOption"; import { SingleOption } from "./type/TypeSingleOption";
import { FieldTypeInput, PropTypeInput } from "./type/TypeInput";
import { isValid } from "date-fns";
const modify = { const modify = {
timeout: null as any, timeout: null as any,