swoop-common 1.0.7 → 1.0.9

package/dist/components/Address.d.ts

@@ -1,10 +1 @@
-import React from 'react';
-import { Address } from '../types/address';
-import { CustomType } from '../router/router';
-interface Props {
-    address: Address;
-    submit?: (address: Address) => void;
-}
-export declare const FormAddress: React.FC<Props>;
-export declare const TypeAddress: CustomType;
 export {};

package/dist/components/Address.js

@@ -1,31 +1,47 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { getXType } from '../util/type';
-import { Box, Button, TextField } from '@mui/material';
+import { Box, debounce, MenuItem, Paper, TextField, Typography } from '@mui/material';
+import { registerComponent, registerExport } from '../router/router';
+import { FormMode } from '../router/types';
+import { useLocalErrors } from '../hooks/errors';
 const tester = (uischema, schema, ctx) => {
-    const type = getXType(schema);
-    if (!type)
-        return -1;
-    else
+    if (getXType(schema) === "address")
         return 10;
+    return -1;
 };
-export const FormAddress = ({ address, submit }) => {
+const FormAddress = ({ address, submit, getError }) => {
+    var _a, _b, _c, _d, _e;
+    if (!getError)
+        getError = () => undefined;
     const [val, setVal] = useState(address);
-    // Typescript is great
+    // Errors, stored to reduce num of calls for performance
+    const line1Error = (_a = getError("line1")) === null || _a === void 0 ? void 0 : _a.message;
+    const line2Error = (_b = getError("line2")) === null || _b === void 0 ? void 0 : _b.message;
+    const cityError = (_c = getError("city")) === null || _c === void 0 ? void 0 : _c.message;
+    const postcodeError = (_d = getError("postcode")) === null || _d === void 0 ? void 0 : _d.message;
+    const numberError = (_e = getError("number")) === null || _e === void 0 ? void 0 : _e.message;
+    const submitDebounced = useMemo(() => debounce(submit, 300), [submit]);
     const update = (field, value) => {
-        setVal(prev => (Object.assign(Object.assign({}, prev), { [field]: value })));
+        const newVal = Object.assign(Object.assign({}, val), { [field]: value });
+        setVal(newVal);
+        submitDebounced(newVal);
     };
-    return (React.createElement(Box, { component: "form", onSubmit: () => submit === null || submit === void 0 ? void 0 : submit(val), sx: { display: 'flex', flexDirection: 'column', gap: 2, width: 400 }, noValidate: true, autoComplete: "off" },
-        React.createElement(TextField, { label: "Line 1", value: address.line1, onChange: (e) => update('line1', e.target.value), required: true }),
-        React.createElement(TextField, { label: "Line 2", value: address.line2, onChange: (e) => update('line2', e.target.value) }),
-        React.createElement(TextField, { label: "City", value: address.city, onChange: (e) => update('city', e.target.value), required: true }),
-        React.createElement(TextField, { label: "Postcode", value: address.postcode, onChange: (e) => update('postcode', e.target.value), required: true }),
-        React.createElement(TextField, { label: "Number", value: address.postcode, onChange: (e) => update('number', +e.target.value), required: true }),
-        React.createElement(Button, { type: "submit", variant: "contained", color: "primary" }, "Submit")));
+    return (React.createElement(Paper, { component: "form", sx: { display: 'flex', flexDirection: 'column', gap: 1, p: 2 }, noValidate: true, autoComplete: "off" },
+        React.createElement(Typography, { variant: 'h5' }, "Custom Address"),
+        React.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 } },
+            React.createElement(TextField, { label: "Line 1", value: val.line1, onChange: (e) => update('line1', e.target.value), required: true, error: !!line1Error, helperText: line1Error }),
+            React.createElement(TextField, { label: "Line 2", value: val.line2, onChange: (e) => update('line2', e.target.value), error: !!line2Error, helperText: line2Error })),
+        React.createElement(TextField, { select: true, label: "City", value: val.city, onChange: (e) => update('city', e.target.value), required: true, fullWidth: true, error: !!cityError, helperText: cityError },
+            React.createElement(MenuItem, { value: "London" }, "London"),
+            React.createElement(MenuItem, { value: "Newcastle" }, "Newcastle"),
+            React.createElement(MenuItem, { value: "Bristol" }, "Bristol")),
+        React.createElement(Box, { sx: { display: 'flex', gap: 2 } },
+            React.createElement(TextField, { label: "Postcode", value: val.postcode, onChange: (e) => update('postcode', e.target.value), required: true, error: !!postcodeError, helperText: postcodeError, fullWidth: true }),
+            React.createElement(TextField, { label: "Number", type: "number", value: val.number, onChange: (e) => update('number', +e.target.value), required: true, error: !!numberError, helperText: numberError, fullWidth: true }))));
 };
 const FormRendererAddress = ({ data, handleChange, path }) => {
-    return React.createElement(FormAddress, { address: data, submit: (addr) => handleChange(path, addr) });
-};
-export const TypeAddress = {
-    renderer: FormRendererAddress,
-    tester
+    const getError = useLocalErrors(path);
+    return React.createElement(FormAddress, { address: data, submit: (addr) => handleChange(path, addr), getError: getError });
 };
+registerExport(FormAddress);
+registerComponent(tester, FormRendererAddress, [FormMode.FORM]);

package/dist/hooks/errors.d.ts

@@ -0,0 +1 @@
+export declare const useLocalErrors: (path: string) => (field: string) => import("ajv").ErrorObject<string, Record<string, any>, unknown> | undefined;

package/dist/hooks/errors.js

@@ -0,0 +1,11 @@
+import { useJsonForms } from "@jsonforms/react";
+import React from "react";
+export const useLocalErrors = (path) => {
+    const { core } = useJsonForms();
+    // Filters out errors for the current scope
+    const local = React.useMemo(() => {
+        var _a;
+        return ((_a = core === null || core === void 0 ? void 0 : core.errors) === null || _a === void 0 ? void 0 : _a.filter(e => e.instancePath.startsWith("/" + path.replace(/\./g, "/") + "/"))) || [];
+    }, [core === null || core === void 0 ? void 0 : core.errors, path]);
+    return React.useCallback((field) => local.find(e => e.instancePath.endsWith("/" + field)), [local]);
+};

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./test";
 export * from "./render/StyledFormView";
+export * from "./router/types";

package/dist/index.js

@@ -1,2 +1,3 @@
 export * from "./test";
 export * from "./render/StyledFormView";
+export * from "./router/types";

package/dist/render/StyledFormView.d.ts

@@ -1,9 +1,25 @@
 import { JsonSchema, UISchemaElement } from '@jsonforms/core';
 import React from 'react';
+import { FormMode } from '../router/types';
+import "../components/Address";
 interface Props {
-    data: any;
+    /**
+     * This should only be used for the initial values, as this is not truly a controlled component.
+     * Frequent updates of this can cause significant perfomance dips.
+     */
+    initialData: any;
     schema: JsonSchema;
     uischema: UISchemaElement;
+    /**
+     * This should not be fed back into the form.
+     * Instead store it as a ref.
+     */
+    onChange?: (value: any) => void;
+    /**
+     * Dictates which mode the form will display in.
+     * Each mode has a different pool of renderers.
+     */
+    mode: FormMode;
 }
-declare const StyledFormView: React.FC<Props>;
-export default StyledFormView;
+export declare const StyledFormView: React.FC<Props>;
+export {};

package/dist/render/StyledFormView.js

@@ -1,7 +1,8 @@
 import { JsonForms } from '@jsonforms/react';
 import React from 'react';
-import { FormTypes } from '../router/router';
-const StyledFormView = ({ data, schema, uischema }) => {
-    return (React.createElement(JsonForms, { data: data, schema: schema, uischema: uischema, renderers: FormTypes }));
+import { materialRenderers } from '@jsonforms/material-renderers';
+import { getComponents } from '../router/router';
+import "../components/Address";
+export const StyledFormView = ({ initialData, schema, uischema, onChange, mode }) => {
+    return (React.createElement(JsonForms, { onChange: onChange, data: initialData, schema: schema, uischema: uischema, renderers: [...materialRenderers, ...getComponents(mode)] }));
 };
-export default StyledFormView;

package/dist/router/router.d.ts

@@ -1,6 +1,10 @@
-import { ControlProps, RankedTester } from "@jsonforms/core";
+import { ControlProps, OwnPropsOfControl, RankedTester } from "@jsonforms/core";
+import { ComponentType } from "react";
+import { FormMode } from "./types";
 export interface CustomType {
     tester: RankedTester;
-    renderer: React.FC<ControlProps>;
+    renderer: ComponentType<OwnPropsOfControl>;
 }
-export declare const FormTypes: Array<CustomType>;
+export declare const registerComponent: (tester: RankedTester, renderer: ComponentType<ControlProps>, modes: Array<FormMode>) => void;
+export declare const getComponents: (mode: FormMode) => Readonly<Array<CustomType>>;
+export declare const registerExport: (component: React.FC<any>) => void;

package/dist/router/router.js

@@ -1,4 +1,17 @@
-import { TypeAddress } from "../components/Address";
-export const FormTypes = [
-    TypeAddress
-];
+import { withJsonFormsControlProps } from "@jsonforms/react";
+import { FormMode } from "./types";
+// Stored seperately to avoid lookups
+const customComponents = {
+    [FormMode.FORM]: [],
+    [FormMode.PRESENTATION]: [],
+    [FormMode.READONLY]: [],
+};
+export const registerComponent = (tester, renderer, modes) => {
+    modes.forEach((mode) => customComponents[mode].push({ tester, renderer: withJsonFormsControlProps(renderer) }));
+};
+export const getComponents = (mode) => {
+    return customComponents[mode];
+};
+export const registerExport = (component) => {
+    component;
+};

package/dist/router/types.d.ts

@@ -0,0 +1,5 @@
+export declare enum FormMode {
+    PRESENTATION = 0,
+    READONLY = 1,
+    FORM = 2
+}

package/dist/router/types.js

@@ -0,0 +1,6 @@
+export var FormMode;
+(function (FormMode) {
+    FormMode[FormMode["PRESENTATION"] = 0] = "PRESENTATION";
+    FormMode[FormMode["READONLY"] = 1] = "READONLY";
+    FormMode[FormMode["FORM"] = 2] = "FORM";
+})(FormMode || (FormMode = {}));

package/dist/types/util.d.ts

@@ -0,0 +1 @@
+export type Updator<T extends object> = <Field extends keyof T>(field: Field, value: T[Field]) => void;

package/dist/types/util.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "swoop-common",
-    "version": "1.0.7",
+    "version": "1.0.9",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "files": [