159 lines
4.6 KiB
TypeScript
159 lines
4.6 KiB
TypeScript
import type { Schema } from "@cfworker/json-schema";
|
|
import { useState } from "react";
|
|
import { JsonSchemaForm } from "ui/components/form/json-schema";
|
|
import { Scrollable } from "ui/layouts/AppShell/AppShell";
|
|
|
|
const schema: Schema = {
|
|
definitions: {
|
|
primitive: {
|
|
anyOf: [
|
|
{
|
|
title: "String",
|
|
type: "string"
|
|
},
|
|
{
|
|
title: "Number",
|
|
type: "number"
|
|
},
|
|
{
|
|
title: "Boolean",
|
|
type: "boolean"
|
|
}
|
|
]
|
|
},
|
|
numeric: {
|
|
anyOf: [
|
|
{
|
|
title: "Number",
|
|
type: "number"
|
|
},
|
|
{
|
|
title: "Datetime",
|
|
type: "string",
|
|
format: "date-time"
|
|
},
|
|
{
|
|
title: "Date",
|
|
type: "string",
|
|
format: "date"
|
|
},
|
|
{
|
|
title: "Time",
|
|
type: "string",
|
|
format: "time"
|
|
}
|
|
]
|
|
},
|
|
boolean: {
|
|
title: "Boolean",
|
|
type: "boolean"
|
|
}
|
|
},
|
|
type: "object",
|
|
properties: {
|
|
operand: {
|
|
enum: ["$and", "$or"],
|
|
default: "$and",
|
|
type: "string"
|
|
},
|
|
conditions: {
|
|
type: "array",
|
|
items: {
|
|
type: "object",
|
|
properties: {
|
|
operand: {
|
|
enum: ["$and", "$or"],
|
|
default: "$and",
|
|
type: "string"
|
|
},
|
|
key: {
|
|
type: "string"
|
|
},
|
|
operator: {
|
|
type: "array",
|
|
items: {
|
|
anyOf: [
|
|
{
|
|
title: "Equals",
|
|
type: "object",
|
|
properties: {
|
|
$eq: {
|
|
$ref: "#/definitions/primitive"
|
|
}
|
|
},
|
|
required: ["$eq"]
|
|
},
|
|
{
|
|
title: "Lower than",
|
|
type: "object",
|
|
properties: {
|
|
$lt: {
|
|
$ref: "#/definitions/numeric"
|
|
}
|
|
},
|
|
required: ["$lt"]
|
|
},
|
|
{
|
|
title: "Greather than",
|
|
type: "object",
|
|
properties: {
|
|
$gt: {
|
|
$ref: "#/definitions/numeric"
|
|
}
|
|
},
|
|
required: ["$gt"]
|
|
},
|
|
{
|
|
title: "Between",
|
|
type: "object",
|
|
properties: {
|
|
$between: {
|
|
type: "array",
|
|
items: {
|
|
$ref: "#/definitions/numeric"
|
|
},
|
|
minItems: 2,
|
|
maxItems: 2
|
|
}
|
|
},
|
|
required: ["$between"]
|
|
},
|
|
{
|
|
title: "In",
|
|
type: "object",
|
|
properties: {
|
|
$in: {
|
|
type: "array",
|
|
items: {
|
|
$ref: "#/definitions/primitive"
|
|
},
|
|
minItems: 1
|
|
}
|
|
}
|
|
}
|
|
]
|
|
},
|
|
minItems: 1
|
|
}
|
|
},
|
|
required: ["key", "operator"]
|
|
},
|
|
minItems: 1
|
|
}
|
|
},
|
|
required: ["operand", "conditions"]
|
|
};
|
|
|
|
export default function QueryJsonFormTest() {
|
|
const [data, setData] = useState(null);
|
|
|
|
return (
|
|
<Scrollable>
|
|
<div className="flex flex-col gap-3 p-3">
|
|
<JsonSchemaForm schema={schema} onChange={setData as any} />
|
|
<pre>{JSON.stringify(data, null, 2)}</pre>
|
|
</div>
|
|
</Scrollable>
|
|
);
|
|
}
|