shishantbiswas/bknd
1
0
Fork 0
mirror of https://github.com/shishantbiswas/bknd.git synced 2026-03-17 04:46:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

form rerenders optimized

Browse Source
This commit is contained in:
dswbx
2025-02-07 16:11:21 +01:00
parent 02e7e1ca95
commit 324d641410
15 changed files with 546 additions and 339 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/src/ui/routes/media/media.settings.tsx
View File

@@ -48,14 +48,20 @@ function MediaSettingsInternal() {
return (
<>
<Form schema={schema} initialValues={config as any} onSubmit={onSubmit} {...formConfig}>
<Subscribe>
<Subscribe
selector={(state) => ({
dirty: state.dirty,
errors: state.errors.length > 0,
submitting: state.submitting
})}
>
{({ dirty, errors, submitting }) => (
<AppShell.SectionHeader
right={
<Button
variant="primary"
type="submit"
disabled={!dirty || errors.length > 0 || submitting}
disabled={!dirty || errors || submitting}
>
Update
</Button>
@@ -132,7 +138,7 @@ function Adapters() {
<Formy.Label as="legend" className="font-mono px-2">
{autoFormatString(ctx.selectedSchema!.title!)}
</Formy.Label>
<FormContextOverride schema={ctx.selectedSchema} path={ctx.path} overrideData>
<FormContextOverride schema={ctx.selectedSchema} prefix={ctx.path}>
<Field name="type" hidden />
<ObjectField path="config" wrapperProps={{ label: false, wrapper: "group" }} />
</FormContextOverride>
@@ -143,9 +149,9 @@ function Adapters() {
}
const Overlay = () => (
<Subscribe>
{({ data }) =>
!data.enabled && (
<Subscribe selector={(state) => ({ enabled: state.data.enabled })}>
{({ enabled }) =>
!enabled && (
<div className="absolute w-full h-full z-50 bg-background opacity-70 pointer-events-none" />
)
}

2
app/src/ui/routes/test/index.tsx
View File

@@ -88,7 +88,7 @@ function TestRoot({ children }) {
</div>
</AppShell.Scrollable>
</AppShell.Sidebar>
<main className="flex flex-col flex-grow">{children}</main>
<AppShell.Main>{children}</AppShell.Main>
</>
);
}

124
app/src/ui/routes/test/tests/json-schema-form3.tsx
View File

@@ -2,11 +2,11 @@ import { useBknd } from "ui/client/bknd";
import { Button } from "ui/components/buttons/Button";
import {
AnyOf,
AnyOfField,
Field,
Form,
FormContextOverride,
FormDebug,
FormDebug2,
ObjectField
} from "ui/components/form/json-schema-form";
import { Scrollable } from "ui/layouts/AppShell/AppShell";
@@ -33,16 +33,108 @@ const schema2 = {
export default function JsonSchemaForm3() {
const { schema, config } = useBknd();
config.media.storage.body_max_size = 1;
schema.media.properties.storage.properties.body_max_size.minimum = 0;
return (
<Scrollable>
<div className="flex flex-col p-3">
<Form schema={schema2} className="flex flex-col gap-3">
{/*<Form
schema={{
type: "object",
properties: {
name: { type: "string", default: "Peter", maxLength: 3 },
age: { type: "number" },
deep: {
type: "object",
properties: {
nested: { type: "string" }
}
}
},
required: ["age"]
}}
initialValues={{ name: "Peter", age: 20, deep: { nested: "hello" } }}
className="flex flex-col gap-3"
validateOn="change"
/>*/}
{/*<Form
schema={{
type: "object",
properties: {
name: { type: "string", default: "Peter", minLength: 3 },
age: { type: "number" },
deep: {
anyOf: [
{
type: "object",
properties: {
nested: { type: "string" }
}
},
{
type: "object",
properties: {
nested2: { type: "string" }
}
}
]
}
},
required: ["age"]
}}
className="flex flex-col gap-3"
validateOn="change"
>
<Field name="" />
<Subscribe2>
{(state) => (
<pre className="text-wrap whitespace-break-spaces break-all">
{JSON.stringify(state, null, 2)}
</pre>
)}
</Subscribe2>
</Form>*/}
{/*<Form
schema={{
type: "object",
properties: {
name: { type: "string", default: "Peter", maxLength: 3 },
age: { type: "number" },
gender: {
type: "string",
enum: ["male", "female", "uni"]
},
deep: {
type: "object",
properties: {
nested: { type: "string" }
}
}
},
required: ["age"]
}}
className="flex flex-col gap-3"
validateOn="change"
>
<div>random thing</div>
<Field name="name" />
<Field name="age" />
<FormDebug />
<FormDebug2 name="name" />
</Form>
<hr />
<Subscribe2
selector={(state) => ({ dirty: state.dirty, submitting: state.submitting })}
>
{(state) => (
<pre className="text-wrap whitespace-break-spaces break-all">
{JSON.stringify(state)}
</pre>
)}
</Subscribe2>
</Form>*/}
{/*<Form
schema={{
@@ -114,7 +206,7 @@ export default function JsonSchemaForm3() {
}
}
}}
initialValues={{ tags: [0, 1] }}
initialValues={{ tags: [0, 1], method: ["GET"] }}
options={{ debug: true }}
>
<Field name="" />
@@ -140,10 +232,15 @@ export default function JsonSchemaForm3() {
}
}}
initialValues={{ tags: [0, 1] }}
/>*/}
>
<Field name="" />
<FormDebug force />
</Form>*/}
{/*<CustomMediaForm />*/}
{/*<Form schema={schema.media} initialValues={config.media} />*/}
<CustomMediaForm />
{/*<Form schema={schema.media} initialValues={config.media} validateOn="change">
<Field name="" />
</Form>*/}
{/*<Form
schema={removeKeyRecursively(schema.media, "pattern") as any}
@@ -166,8 +263,16 @@ export default function JsonSchemaForm3() {
function CustomMediaForm() {
const { schema, config } = useBknd();
config.media.storage.body_max_size = 1;
schema.media.properties.storage.properties.body_max_size.minimum = 0;
return (
<Form schema={schema.media} initialValues={config.media} className="flex flex-col gap-3">
<Form
schema={schema.media}
initialValues={config.media}
className="flex flex-col gap-3"
validateOn="change"
>
<Field name="enabled" />
<Field name="basepath" />
<Field name="entity_name" />
@@ -175,6 +280,7 @@ function CustomMediaForm() {
<AnyOf.Root path="adapter">
<CustomMediaFormAdapter />
</AnyOf.Root>
<FormDebug force />
</Form>
);
}
@@ -197,7 +303,7 @@ function CustomMediaFormAdapter() {
</div>
{ctx.selected !== null && (
<FormContextOverride schema={ctx.selectedSchema} path={ctx.path} overrideData>
<FormContextOverride schema={ctx.selectedSchema} prefix={ctx.path}>
<Field name="type" hidden />
<ObjectField path="config" wrapperProps={{ label: false, wrapper: "group" }} />
</FormContextOverride>