@wq/form-web 3.0.0-alpha.0

package/src/components/Draw.js

@@ -0,0 +1,82 @@
+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/src/components/Fieldset.js

@@ -0,0 +1,24 @@
+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 (
+        <Card sx={{ mb: 2 }}>
+            <CardContent>
+                {label && (
+                    <Typography color="textSecondary">{label}</Typography>
+                )}
+                {children}
+            </CardContent>
+        </Card>
+    );
+}
+
+Fieldset.propTypes = {
+    label: PropTypes.string,
+    children: PropTypes.node,
+};
+
+export default withWQ(Fieldset);

package/src/components/FieldsetArray.js

@@ -0,0 +1,27 @@
+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 (
+        <View>
+            {children}
+            {addRow && (
+                <Button onClick={() => addRow()}>{`Add ${label}`}</Button>
+            )}
+        </View>
+    );
+}
+
+FieldsetArray.propTypes = {
+    label: PropTypes.string,
+    children: PropTypes.node,
+    addRow: PropTypes.func,
+};
+
+export default withWQ(FieldsetArray, { fallback: FieldsetArrayFallback });

package/src/components/File.js

@@ -0,0 +1,73 @@
+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 (
+        <>
+            <InputLabel shrink>{label}</InputLabel>
+            <DropzoneArea
+                initialFiles={initialFiles}
+                acceptedFiles={acceptedFiles}
+                onChange={setFile}
+                filesLimit={1}
+                maxFileSize={100000000}
+            />
+            <HelperText name={name} hint={hint} />
+        </>
+    );
+}
+
+File.propTypes = {
+    name: PropTypes.string,
+    accept: PropTypes.string,
+    label: PropTypes.string,
+    hint: PropTypes.string,
+};
+
+export default withWQ(File);

package/src/components/FileArray.js

@@ -0,0 +1,129 @@
+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 (
+        <Fieldset label={label}>
+            <DropzoneArea
+                initialFiles={initialFiles}
+                acceptedFiles={acceptedFiles}
+                onChange={setFiles}
+                filesLimit={maxRows}
+            />
+            <HelperText name={name} hint={hint} />
+        </Fieldset>
+    );
+}
+
+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/src/components/FlatFieldset.js

@@ -0,0 +1,26 @@
+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 (
+        <>
+            <Typography color="textSecondary">{label}</Typography>
+            {children}
+        </>
+    );
+}
+
+FlatFieldset.propTypes = {
+    label: PropTypes.string,
+    children: PropTypes.node,
+};
+
+export default withWQ(FlatFieldset, { fallback: FlatFieldsetFallback });

package/src/components/FormError.js

@@ -0,0 +1,18 @@
+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 (
+        <FormHelperText error {...props}>
+            {error}
+        </FormHelperText>
+    );
+}
+
+export default withWQ(FormError);

package/src/components/FormRoot.js

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

package/src/components/GeoHelpIcon.js

@@ -0,0 +1,52 @@
+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 (
+        <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/src/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 <FormHelperText error={!!showError}>{hint}</FormHelperText>;
+}
+
+HelperText.propTypes = {
+    name: PropTypes.string,
+    hint: PropTypes.string,
+};
+
+export default withWQ(HelperText);

package/src/components/Hidden.js

@@ -0,0 +1,21 @@
+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 (
+        <>
+            <Field {...props} type="hidden" />
+            <HelperText name={props.name} hint={props.hint} />
+        </>
+    );
+}
+
+Hidden.propTypes = {
+    name: PropTypes.string,
+    hint: PropTypes.string,
+};
+
+export default withWQ(Hidden);

package/src/components/IconSubmitButton.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { useComponents, withWQ, createFallbackComponent } from "@wq/react";
+import { useFormikContext } from "formik";
+
+const IconSubmitButtonFallback = {
+    components: {
+        IconButton: createFallbackComponent("IconButton", "@wq/material"),
+    },
+};
+
+function IconSubmitButton(props) {
+    const { IconButton } = useComponents(),
+        { isSubmitting } = useFormikContext();
+
+    return <IconButton type="submit" disabled={isSubmitting} {...props} />;
+}
+
+export default withWQ(IconSubmitButton, { fallback: IconSubmitButtonFallback });

package/src/components/Image.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import File from "./File.js";
+
+function Image(props) {
+    return <File accept="image/*" {...props} />;
+}
+
+export default withWQ(Image);

package/src/components/Input.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import { Field } from "formik";
+import { TextField } from "formik-mui";
+import { useHtmlInput } from "@wq/form-common";
+import PropTypes from "prop-types";
+
+function Input({ hint, inputProps, ...rest }) {
+    const { name, type, maxLength } = useHtmlInput(rest);
+    return (
+        <Field
+            name={name}
+            fullWidth
+            margin="dense"
+            component={TextField}
+            helperText={hint}
+            inputProps={{ maxLength, ...inputProps }}
+            {...rest}
+            type={type}
+        />
+    );
+}
+
+Input.propTypes = {
+    name: PropTypes.string,
+    hint: PropTypes.string,
+    inputProps: PropTypes.object,
+};
+
+export default withWQ(Input);

package/src/components/Radio.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import { Field } from "formik";
+import { RadioGroup } from "formik-mui";
+import {
+    FormControl,
+    FormLabel,
+    FormControlLabel,
+    Radio as MuiRadio,
+} from "@mui/material";
+import HelperText from "./HelperText.js";
+import PropTypes from "prop-types";
+
+function Radio({ choices, label, ...rest }) {
+    return (
+        <FormControl component="fieldset" fullWidth margin="dense">
+            <FormLabel component="legend">{label}</FormLabel>
+            <Field component={RadioGroup} {...rest}>
+                {choices.map(({ name, label }) => (
+                    <FormControlLabel
+                        key={name}
+                        value={name}
+                        label={label}
+                        control={<MuiRadio />}
+                    />
+                ))}
+            </Field>
+            <HelperText name={rest.name} hint={rest.hint} />
+        </FormControl>
+    );
+}
+
+Radio.propTypes = {
+    choices: PropTypes.arrayOf(PropTypes.object),
+    label: PropTypes.string,
+};
+
+export default withWQ(Radio);