@wq/form-web 3.0.0-alpha.0

package/AutoForm.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import { AutoFormBase, AutoInput, Form, CancelButton } from "@wq/form-common";
+import * as components from "./components/index.js";
+const AutoFormDefaults = {
+    components: {
+        ...components,
+        AutoForm,
+        AutoInput,
+        Form,
+        CancelButton,
+    },
+};
+function AutoForm(props) {
+    if (!props.action && !props.onSubmit && !props.form) {
+        return props.children || null;
+    }
+    return /*#__PURE__*/ React.createElement(AutoFormBase, {
+        ...props,
+    });
+}
+export default withWQ(AutoForm, {
+    defaults: AutoFormDefaults,
+});

package/README.md

@@ -0,0 +1,10 @@
+[![@wq/form][logo]][docs]
+
+**@wq/form-web** provides web bindings for [@wq/form], via the [Material UI] library.
+
+### [Documentation][docs]
+
+[logo]: https://wq.io/images/@wq/form.svg
+[docs]: https://form.wq.io/@wq/form-common
+[@wq/form]: https://form.wq.io/
+[Material UI]: https://mui.com/material-ui/

package/components/Checkbox.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import { Field } from "formik";
+import { CheckboxWithLabel } from "formik-mui";
+import HelperText from "./HelperText.js";
+import PropTypes from "prop-types";
+function Checkbox({ label, ...props }) {
+    return /*#__PURE__*/ React.createElement(
+        React.Fragment,
+        null,
+        /*#__PURE__*/ React.createElement(Field, {
+            component: CheckboxWithLabel,
+            Label: {
+                label,
+            },
+            ...props,
+            type: "checkbox",
+        }),
+        /*#__PURE__*/ React.createElement(HelperText, {
+            name: props.name,
+            hint: props.hint,
+        }),
+    );
+}
+Checkbox.propTypes = {
+    name: PropTypes.string,
+    label: PropTypes.string,
+    hint: PropTypes.string,
+};
+export default withWQ(Checkbox);

package/components/DateTime.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import Input from "./Input.js";
+function DateTime({ InputLabelProps: overrides, ...rest }) {
+    const InputLabelProps = {
+        shrink: true,
+        ...overrides,
+    };
+    return /*#__PURE__*/ React.createElement(Input, {
+        InputLabelProps: InputLabelProps,
+        ...rest,
+    });
+}
+export default withWQ(DateTime);

package/components/DeleteForm.js

@@ -0,0 +1,56 @@
+import React from "react";
+import {
+    useComponents,
+    useMessage,
+    withWQ,
+    createFallbackComponents,
+} from "@wq/react";
+import { Form } from "@wq/form-common";
+import SubmitButton from "./SubmitButton.js";
+import PropTypes from "prop-types";
+const DeleteFormFallback = {
+    messages: {
+        CONFIRM_DELETE: "Are you sure you want to delete this record?",
+    },
+    components: {
+        Form,
+        SubmitButton,
+        ...createFallbackComponents(["View", "HorizontalView"], "@wq/material"),
+    },
+};
+function DeleteForm({ action }) {
+    const { Form, SubmitButton, View, HorizontalView } = useComponents(),
+        message = useMessage("CONFIRM_DELETE");
+    function confirmSubmit() {
+        return window.confirm(message);
+    }
+    return /*#__PURE__*/ React.createElement(
+        Form,
+        {
+            action: action,
+            method: "DELETE",
+            backgroundSync: false,
+            onSubmit: confirmSubmit,
+        },
+        /*#__PURE__*/ React.createElement(
+            HorizontalView,
+            null,
+            /*#__PURE__*/ React.createElement(View, null),
+            /*#__PURE__*/ React.createElement(
+                SubmitButton,
+                {
+                    icon: "delete",
+                    variant: "text",
+                    color: "secondary",
+                },
+                "Delete",
+            ),
+        ),
+    );
+}
+DeleteForm.propTypes = {
+    action: PropTypes.string,
+};
+export default withWQ(DeleteForm, {
+    fallback: DeleteFormFallback,
+});

package/components/Draw.js

@@ -0,0 +1,78 @@
+import { useRef, useEffect } from "react";
+import { useComponents, withWQ, createFallbackComponent } from "@wq/react";
+import MapboxDraw from "@mapbox/mapbox-gl-draw";
+import PropTypes from "prop-types";
+const DrawFallback = {
+    components: {
+        useControl: createFallbackComponent(
+            "useControl",
+            "@wq/map-gl",
+            "MapProvider",
+        ),
+    },
+};
+function Draw({ type, required, data, setData }) {
+    const types = type === "all" ? ["point", "line_string", "polygon"] : [type],
+        controls = {},
+        ref = useRef();
+    types.forEach((type) => (controls[type] = true));
+    if (!required) {
+        controls.trash = true;
+    }
+    const { useControl } = useComponents();
+    const draw = useControl(
+        () => {
+            const { classes } = MapboxDraw.constants;
+            for (const [key, value] of Object.entries(classes)) {
+                if (value.startsWith("mapboxgl-")) {
+                    classes[key] = value.replace("mapboxgl-", "maplibregl-");
+                }
+            }
+            return new MapboxDraw({
+                displayControlsDefault: false,
+                controls,
+            });
+        },
+        ({ map }) => {
+            map.on("draw.create", handleChange);
+            map.on("draw.delete", handleChange);
+            map.on("draw.update", handleChange);
+            map.on("draw.combine", handleChange);
+            map.on("draw.uncombine", handleChange);
+        },
+        ({ map }) => {
+            map.off("draw.create", handleChange);
+            map.off("draw.delete", handleChange);
+            map.off("draw.update", handleChange);
+            map.off("draw.combine", handleChange);
+            map.off("draw.uncombine", handleChange);
+        },
+        {
+            position: "top-right",
+        },
+    );
+    useEffect(() => {
+        ref.current = {
+            draw,
+        };
+    }, [draw]);
+    useEffect(() => {
+        if (draw && data) {
+            draw.set(data);
+        }
+    }, [draw, data]);
+    function handleChange() {
+        const { draw } = ref.current;
+        setData(draw.getAll());
+    }
+    return null;
+}
+Draw.propTypes = {
+    type: PropTypes.string,
+    required: PropTypes.boolean,
+    data: PropTypes.object,
+    setData: PropTypes.func,
+};
+export default withWQ(Draw, {
+    fallback: DrawFallback,
+});

package/components/Fieldset.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { Card, Typography, CardContent } from "@mui/material";
+import { withWQ } from "@wq/react";
+import PropTypes from "prop-types";
+function Fieldset({ label, children }) {
+    return /*#__PURE__*/ React.createElement(
+        Card,
+        {
+            sx: {
+                mb: 2,
+            },
+        },
+        /*#__PURE__*/ React.createElement(
+            CardContent,
+            null,
+            label &&
+                /*#__PURE__*/ React.createElement(
+                    Typography,
+                    {
+                        color: "textSecondary",
+                    },
+                    label,
+                ),
+            children,
+        ),
+    );
+}
+Fieldset.propTypes = {
+    label: PropTypes.string,
+    children: PropTypes.node,
+};
+export default withWQ(Fieldset);

package/components/FieldsetArray.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { useComponents, withWQ, createFallbackComponents } from "@wq/react";
+import PropTypes from "prop-types";
+const FieldsetArrayFallback = {
+    components: createFallbackComponents(["View", "Button"], "@wq/material"),
+};
+function FieldsetArray({ label, children, addRow }) {
+    const { View, Button } = useComponents();
+    return /*#__PURE__*/ React.createElement(
+        View,
+        null,
+        children,
+        addRow &&
+            /*#__PURE__*/ React.createElement(
+                Button,
+                {
+                    onClick: () => addRow(),
+                },
+                `Add ${label}`,
+            ),
+    );
+}
+FieldsetArray.propTypes = {
+    label: PropTypes.string,
+    children: PropTypes.node,
+    addRow: PropTypes.func,
+};
+export default withWQ(FieldsetArray, {
+    fallback: FieldsetArrayFallback,
+});

package/components/File.js

@@ -0,0 +1,77 @@
+import React, { useMemo, useCallback, useRef } from "react";
+import { withWQ } from "@wq/react";
+import { useField } from "formik";
+import { DropzoneArea } from "mui2-file-dropzone";
+import { InputLabel } from "@mui/material";
+import HelperText from "./HelperText.js";
+import PropTypes from "prop-types";
+function File({ name, accept, hint, label }) {
+    const [, { initialValue }, { setValue }] = useField(name),
+        loadedRef = useRef(null);
+    const initialFiles = useMemo(() => {
+            if (!initialValue || initialValue === "__clear__") {
+                return [];
+            } else if (initialValue.type && initialValue.body) {
+                return [initialValue.body];
+            } else if (typeof initialValue === "string") {
+                return [initialValue];
+            }
+        }, [initialValue]),
+        acceptedFiles = useMemo(
+            () => (accept ? accept.split(",") : null),
+            [accept],
+        ),
+        setFile = useCallback(
+            (files) => {
+                if (!loadedRef.current) {
+                    // initialFiles loaded
+                    loadedRef.current = files && files.length ? files[0] : true;
+                    return;
+                }
+                if (files && files.length) {
+                    if (files[0] !== loadedRef.current) {
+                        const { name, type } = files[0];
+                        setValue({
+                            name,
+                            type,
+                            body: files[0],
+                        });
+                    }
+                } else if (initialValue) {
+                    setValue("__clear__");
+                } else {
+                    setValue(null);
+                }
+            },
+            [initialValue],
+        );
+    return /*#__PURE__*/ React.createElement(
+        React.Fragment,
+        null,
+        /*#__PURE__*/ React.createElement(
+            InputLabel,
+            {
+                shrink: true,
+            },
+            label,
+        ),
+        /*#__PURE__*/ React.createElement(DropzoneArea, {
+            initialFiles: initialFiles,
+            acceptedFiles: acceptedFiles,
+            onChange: setFile,
+            filesLimit: 1,
+            maxFileSize: 100000000,
+        }),
+        /*#__PURE__*/ React.createElement(HelperText, {
+            name: name,
+            hint: hint,
+        }),
+    );
+}
+File.propTypes = {
+    name: PropTypes.string,
+    accept: PropTypes.string,
+    label: PropTypes.string,
+    hint: PropTypes.string,
+};
+export default withWQ(File);

package/components/FileArray.js

@@ -0,0 +1,132 @@
+import React, { useMemo, useCallback, useRef } from "react";
+import { useComponents, withWQ } from "@wq/react";
+import { useField } from "formik";
+import { DropzoneArea } from "mui2-file-dropzone";
+import Fieldset from "./Fieldset.js";
+import HelperText from "./HelperText.js";
+import PropTypes from "prop-types";
+const FileArrayFallback = {
+    components: {
+        Fieldset,
+    },
+};
+function FileArray({ name, label, subform, hint, maxRows }) {
+    const [, { initialValue = [] }, { setValue }] = useField(name),
+        fileField = subform.find(
+            (field) => field.type === "file" || field.type === "image",
+        ) || {
+            name: "file",
+            type: "file",
+        },
+        accept = fileField.type === "image" ? "image/*" : null,
+        loadedRef = useRef(null),
+        { Fieldset } = useComponents();
+    const initialFiles = useMemo(() => {
+            if (!initialValue || initialValue.length === 0) {
+                return [];
+            }
+            return initialValue
+                .filter((row) => {
+                    if (
+                        !row[fileField.name] ||
+                        row[fileField.name] === "__clear__"
+                    ) {
+                        return false;
+                    }
+                    return true;
+                })
+                .map((row) => {
+                    const value = row[fileField.name];
+                    if (value.type && value.body) {
+                        return value.body;
+                    } else if (typeof value === "string") {
+                        return value;
+                    }
+                });
+        }, [initialValue]),
+        acceptedFiles = useMemo(
+            () => (accept ? accept.split(",") : null),
+            [accept],
+        ),
+        setFiles = useCallback(
+            (files) => {
+                if (!loadedRef.current) {
+                    // initialFiles loaded
+                    let fileIndex = 0;
+                    loadedRef.current = initialValue.map((row) => {
+                        let file;
+                        if (
+                            row[fileField.name] &&
+                            row[fileField.name] !== "__clear__"
+                        ) {
+                            file = files[fileIndex];
+                            fileIndex++;
+                        }
+                        return {
+                            row,
+                            file,
+                        };
+                    });
+                    return;
+                }
+                const nextValue = files.map((file, i) => {
+                    const { row, file: initialFile } = loadedRef.current[i] || {
+                        row: {},
+                        file: null,
+                    };
+                    if (initialFile === file) {
+                        return row;
+                    } else {
+                        return {
+                            ...row,
+                            [fileField.name]: {
+                                name: file.name,
+                                type: file.type,
+                                body: file,
+                            },
+                        };
+                    }
+                });
+                if (initialValue && nextValue.length < initialValue.length) {
+                    initialValue.slice(nextValue.length).forEach((row) => {
+                        nextValue.push({
+                            ...row,
+                            [fileField.name]: "__clear__",
+                        });
+                    });
+                }
+                setValue(nextValue);
+            },
+            [initialValue],
+        );
+    return /*#__PURE__*/ React.createElement(
+        Fieldset,
+        {
+            label: label,
+        },
+        /*#__PURE__*/ React.createElement(DropzoneArea, {
+            initialFiles: initialFiles,
+            acceptedFiles: acceptedFiles,
+            onChange: setFiles,
+            filesLimit: maxRows,
+        }),
+        /*#__PURE__*/ React.createElement(HelperText, {
+            name: name,
+            hint: hint,
+        }),
+    );
+}
+FileArray.Fieldset = function EmptyFieldset() {
+    return null;
+};
+FileArray.propTypes = {
+    name: PropTypes.string,
+    accept: PropTypes.string,
+    label: PropTypes.string,
+    subform: PropTypes.arrayOf(PropTypes.object),
+    hint: PropTypes.string,
+    maxRows: PropTypes.number,
+};
+export default withWQ(FileArray, {
+    fallback: FileArrayFallback,
+});

package/components/FlatFieldset.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { useComponents, withWQ, createFallbackComponent } from "@wq/react";
+import PropTypes from "prop-types";
+const FlatFieldsetFallback = {
+    components: {
+        Typography: createFallbackComponent("Typography", "@wq/material"),
+    },
+};
+function FlatFieldset({ label, children }) {
+    const { Typography } = useComponents();
+    return /*#__PURE__*/ React.createElement(
+        React.Fragment,
+        null,
+        /*#__PURE__*/ React.createElement(
+            Typography,
+            {
+                color: "textSecondary",
+            },
+            label,
+        ),
+        children,
+    );
+}
+FlatFieldset.propTypes = {
+    label: PropTypes.string,
+    children: PropTypes.node,
+};
+export default withWQ(FlatFieldset, {
+    fallback: FlatFieldsetFallback,
+});

package/components/FormError.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import { useField } from "formik";
+import { FormHelperText } from "@mui/material";
+function FormError(props) {
+    const [, { error }] = useField("__other__");
+    if (!error) {
+        return null;
+    }
+    return /*#__PURE__*/ React.createElement(
+        FormHelperText,
+        {
+            error: true,
+            ...props,
+        },
+        error,
+    );
+}
+export default withWQ(FormError);

package/components/FormRoot.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import { Form } from "formik";
+import PropTypes from "prop-types";
+function FormRoot({ children }) {
+    return /*#__PURE__*/ React.createElement(
+        "div",
+        {
+            style: {
+                flex: 1,
+                display: "flex",
+                justifyContent: "center",
+            },
+        },
+        /*#__PURE__*/ React.createElement(
+            Form,
+            {
+                style: {
+                    width: "100%",
+                    maxWidth: "70em",
+                    padding: "1em",
+                    boxSizing: "border-box",
+                },
+            },
+            children,
+        ),
+    );
+}
+FormRoot.propTypes = {
+    children: PropTypes.node,
+};
+export default withWQ(FormRoot);

package/components/GeoHelpIcon.js

@@ -0,0 +1,42 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import PropTypes from "prop-types";
+function GeoHelpIcon({ name, type }) {
+    const iconClass = getIconClass(name, type);
+    if (!iconClass) {
+        return `{${name}}`;
+    }
+    return /*#__PURE__*/ React.createElement("span", {
+        className: iconClass,
+        style: {
+            display: "inline-block",
+            width: 18,
+            height: 18,
+            verticalAlign: "middle",
+        },
+    });
+}
+GeoHelpIcon.propTypes = {
+    name: PropTypes.string,
+    type: PropTypes.string,
+};
+export default withWQ(GeoHelpIcon);
+const SHAPES = ["point", "line", "polygon"],
+    ICONS = SHAPES.map((shape) => `${shape.toUpperCase()}_ICON`);
+function getIconClass(iconName, drawType) {
+    let shape = null;
+    if (iconName === "TOOL_ICON") {
+        if (drawType === "line_string") {
+            shape = "line";
+        } else if (SHAPES.includes(drawType)) {
+            shape = drawType;
+        }
+    } else if (ICONS.includes(iconName)) {
+        shape = SHAPES[ICONS.indexOf(iconName)];
+    }
+    if (shape) {
+        return `mapbox-gl-draw_${shape}`;
+    } else {
+        return null;
+    }
+}

package/components/HelperText.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import { useFormikContext, getIn } from "formik";
+import { FormHelperText } from "@mui/material";
+import PropTypes from "prop-types";
+function HelperText({ name, hint }) {
+    const { errors, touched } = useFormikContext(),
+        error = getIn(errors, name),
+        showError = !!error && !!getIn(touched, name);
+    if (showError) {
+        hint = error;
+    }
+    if (!hint) {
+        return null;
+    }
+    return /*#__PURE__*/ React.createElement(
+        FormHelperText,
+        {
+            error: !!showError,
+        },
+        hint,
+    );
+}
+HelperText.propTypes = {
+    name: PropTypes.string,
+    hint: PropTypes.string,
+};
+export default withWQ(HelperText);

package/components/Hidden.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import { Field } from "formik";
+import HelperText from "./HelperText.js";
+import PropTypes from "prop-types";
+function Hidden(props) {
+    return /*#__PURE__*/ React.createElement(
+        React.Fragment,
+        null,
+        /*#__PURE__*/ React.createElement(Field, {
+            ...props,
+            type: "hidden",
+        }),
+        /*#__PURE__*/ React.createElement(HelperText, {
+            name: props.name,
+            hint: props.hint,
+        }),
+    );
+}
+Hidden.propTypes = {
+    name: PropTypes.string,
+    hint: PropTypes.string,
+};
+export default withWQ(Hidden);