@wq/form-native 3.0.0-alpha.0

package/README.md

@@ -0,0 +1,12 @@
+[![@wq/form][logo]][docs]
+
+**@wq/form-native** provides [React Native] and [Expo] bindings for [@wq/form], via the [React Native Paper] library.
+
+### [Documentation][docs]
+
+[logo]: https://wq.io/images/@wq/form.svg
+[docs]: https://form.wq.io/@wq/form-native
+[@wq/form]: https://form.wq.io/
+[React Native]: https://reactnative.dev/
+[Expo]: https://expo.dev/
+[React Native Paper]: https://callstack.github.io/react-native-paper/

package/babel.config.cjs

@@ -0,0 +1,10 @@
+module.exports = {
+    env: {
+        test: {
+            plugins: [
+                ["@babel/plugin-transform-private-methods", { loose: true }],
+            ],
+            presets: ["module:metro-react-native-babel-preset"],
+        },
+    },
+};

package/jest.config.js

@@ -0,0 +1,5 @@
+export default {
+    preset: "jest-expo",
+    testMatch: ["**/__tests__/**/*.js?(x)"],
+    transformIgnorePatterns: [],
+};

package/package.json

@@ -0,0 +1,51 @@
+{
+    "name": "@wq/form-native",
+    "version": "3.0.0-alpha.0",
+    "description": "React Native and Expo bindings for @wq/material",
+    "type": "module",
+    "main": "src/index.js",
+    "scripts": {
+        "test": "cd ../../ && npm run jest packages/form-native -- --config packages/form-native/jest.config.js --moduleDirectories node_modules/ packages/form-native/node_modules/",
+        "build": "npm run prettier",
+        "prettier": "cd ../../ && npm run prettier -- --write packages/form-native/",
+        "lint": "cd ../../ && npm run eslint packages/form-native/{,src/,src/*/,src/*/*/}*.js"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/wq/form.git",
+        "directory": "packages/form-native"
+    },
+    "keywords": [
+        "wq",
+        "react",
+        "material",
+        "material-ui"
+    ],
+    "author": "S. Andrew Sheppard",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/wq/form/issues"
+    },
+    "homepage": "https://form.wq.io/@wq/form-native",
+    "dependencies": {
+        "@wq/form-common": "^3.0.0-alpha.0",
+        "@wq/react": "^3.0.0-alpha.0"
+    },
+    "peerDependencies": {
+        "expo-application": "*",
+        "expo-document-picker": "*",
+        "expo-image-picker": "*",
+        "react-native-modal-datetime-picker": "*",
+        "react-native-paper": "*",
+        "react-native-picker-select": "*"
+    },
+    "devDependencies": {
+        "expo-application": "^7.0.8",
+        "expo-document-picker": "^14.0.8",
+        "expo-image-picker": "^17.0.10",
+        "jest-expo": "^52.0.6",
+        "react-native-modal-datetime-picker": "^18.0.0",
+        "react-native-paper": "^5.14.5",
+        "react-native-picker-select": "^9.3.1"
+    }
+}

package/src/AutoForm.js

@@ -0,0 +1,17 @@
+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 <AutoFormBase {...props} />;
+}
+
+export default withWQ(AutoForm, { defaults: AutoFormDefaults });

package/src/components/Checkbox.js

@@ -0,0 +1,50 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import { useField } from "formik";
+import { Checkbox as PaperCheckbox, useTheme } from "react-native-paper";
+import { Text, View } from "react-native";
+import HelperText from "./HelperText.js";
+import PropTypes from "prop-types";
+
+function Checkbox({ name, label, hint }) {
+    const theme = useTheme(),
+        [, meta, helpers] = useField(name),
+        { value } = meta,
+        { setValue } = helpers;
+
+    function toggleChecked() {
+        setValue(!value);
+    }
+
+    return (
+        <View>
+            <View
+                style={{
+                    flexDirection: "row",
+                    alignItems: "center",
+                    padding: 8,
+                }}
+            >
+                <PaperCheckbox.Android
+                    status={value ? "checked" : "unchecked"}
+                    onPress={toggleChecked}
+                />
+                <Text
+                    style={{ color: theme.colors.text, fontSize: 16, flex: 1 }}
+                    onPress={toggleChecked}
+                >
+                    {label}
+                </Text>
+            </View>
+            <HelperText name={name} hint={hint} />
+        </View>
+    );
+}
+
+Checkbox.propTypes = {
+    name: PropTypes.string,
+    label: PropTypes.string,
+    hint: PropTypes.string,
+};
+
+export default withWQ(Checkbox);

package/src/components/DateTime.js

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import { withWQ } from "@wq/react";
+import DateTimePickerModal from "react-native-modal-datetime-picker";
+import { Text, View } from "react-native";
+import { TouchableRipple, TextInput } from "react-native-paper";
+import { useField } from "formik";
+import { format, parse } from "@wq/form-common";
+import HelperText from "./HelperText.js";
+import PropTypes from "prop-types";
+
+const displayFormat = {
+    date: (value) => parse.date(value).toLocaleDateString(),
+    time: (value) => parse.time(value).toLocaleTimeString(),
+    datetime: (value) => parse.datetime(value).toLocaleString(),
+};
+
+function DateTime({ name, type, label, hint }) {
+    type = type.toLowerCase();
+
+    const [, meta, helpers] = useField(name),
+        { value } = meta,
+        { setValue } = helpers;
+
+    const [show, setShow] = useState(false);
+
+    function showPicker() {
+        setShow(true);
+    }
+    function hidePicker() {
+        setShow(false);
+    }
+    function onConfirm(val) {
+        hidePicker();
+        setValue(format[type](val));
+    }
+
+    return (
+        <View>
+            <TextInput
+                label={label}
+                value={value ? displayFormat[type](value) : ""}
+                render={({ style, value }) => (
+                    <TouchableRipple onPress={showPicker}>
+                        <Text style={style}>{value}</Text>
+                    </TouchableRipple>
+                )}
+            />
+            <HelperText name={name} hint={hint} />
+            <DateTimePickerModal
+                isVisible={show}
+                mode={type}
+                date={parse[type](value) || new Date()}
+                onConfirm={onConfirm}
+                onCancel={hidePicker}
+            />
+        </View>
+    );
+}
+
+DateTime.propTypes = {
+    name: PropTypes.string,
+    type: PropTypes.string,
+    label: PropTypes.string,
+    hint: PropTypes.string,
+};
+
+export default withWQ(DateTime);

package/src/components/DeleteForm.js

@@ -0,0 +1,85 @@
+import React from "react";
+import {
+    useComponents,
+    useMessage,
+    withWQ,
+    createFallbackComponents,
+} from "@wq/react";
+import { Form } from "@wq/form-common";
+import SubmitButton from "./SubmitButton.js";
+import Alert from "react-native";
+import PropTypes from "prop-types";
+
+const DeleteFormFallback = {
+    messages: {
+        CONFIRM_DELETE: "Are you sure you want to delete this record?",
+        CONFIRM_DELETE_TITLE: "Confirm Deletion",
+        CONFIRM_DELETE_OK: "Yes, Delete",
+        CONFIRM_DELETE_CANCEL: "Cancel",
+    },
+    components: {
+        Form,
+        SubmitButton,
+        ...createFallbackComponents(["View", "HorizontalView"], "@wq/material"),
+    },
+};
+
+function DeleteForm({ action }) {
+    const { Form, SubmitButton, View, HorizontalView } = useComponents(),
+        confirmDelete = useMessage("CONFIRM_DELETE"),
+        confirmDeleteTitle = useMessage("CONFIRM_DELETE_TITLE"),
+        confirmDeleteOk = useMessage("CONFIRM_DELETE_OK"),
+        confirmDeleteCancel = useMessage("CONFIRM_DELETE_CANCEL");
+
+    async function confirmSubmit() {
+        return new Promise((resolve) => {
+            Alert.alert(
+                confirmDeleteTitle,
+                confirmDelete,
+                [
+                    {
+                        text: confirmDeleteCancel,
+                        onPress() {
+                            resolve(false);
+                        },
+                        style: "cancel",
+                    },
+                    {
+                        text: confirmDeleteOk,
+                        onPress() {
+                            resolve(true);
+                        },
+                        style: "destructive",
+                    },
+                ],
+                {
+                    onDismiss() {
+                        resolve(false);
+                    },
+                },
+            );
+        });
+    }
+
+    return (
+        <Form
+            action={action}
+            method="DELETE"
+            backgroundSync={false}
+            onSubmit={confirmSubmit}
+        >
+            <HorizontalView>
+                <View />
+                <SubmitButton icon="delete" variant="text" color="secondary">
+                    Delete
+                </SubmitButton>
+            </HorizontalView>
+        </Form>
+    );
+}
+
+DeleteForm.propTypes = {
+    action: PropTypes.string,
+};
+
+export default withWQ(DeleteForm, { fallback: DeleteFormFallback });

package/src/components/Draw.js

@@ -0,0 +1,43 @@
+import React, { useEffect } from "react";
+import { createFallbackComponent, useComponents, withWQ } from "@wq/react";
+import PropTypes from "prop-types";
+
+const DrawFallback = {
+    components: {
+        Geojson: createFallbackComponent("Geojson", "@wq/form", "AutoForm"),
+        useMapInstance: createFallbackComponent(
+            "useMapInstance",
+            "@wq/form",
+            "AutoForm",
+        ),
+    },
+};
+
+function Draw({ name, data, setData }) {
+    const { Geojson, useMapInstance } = useComponents(),
+        map = useMapInstance(name);
+
+    useEffect(() => {
+        if (!map) {
+            return;
+        }
+        map.on("click", onClick);
+        function onClick(evt) {
+            setData(evt.geometry);
+        }
+        return () => map.off("click", onClick);
+    }, [map]);
+
+    if (!data) {
+        return null;
+    }
+    return <Geojson active data={data} />;
+}
+
+Draw.propTypes = {
+    name: PropTypes.string,
+    data: PropTypes.object,
+    setData: PropTypes.func,
+};
+
+export default withWQ(Draw, { fallback: DrawFallback });

package/src/components/Fieldset.js

@@ -0,0 +1,4 @@
+import { Fragment } from "react";
+import { withWQ } from "@wq/react";
+
+export default withWQ(Fragment, "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,182 @@
+import React, { useState } from "react";
+import { useField } from "formik";
+import { withWQ, useComponents, createFallbackComponents } from "@wq/react";
+import { View, Text } from "react-native";
+import { Button, List, Menu } from "react-native-paper";
+import * as Application from "expo-application";
+import * as DocumentPicker from "expo-document-picker";
+import * as ImagePicker from "expo-image-picker";
+import { format } from "@wq/form-common";
+import HelperText from "./HelperText.js";
+import PropTypes from "prop-types";
+
+const FileFallback = {
+    components: createFallbackComponents(["Img", "Popup"], "@wq/material"),
+};
+
+function File({ name, accept, capture, required, label, hint }) {
+    const [, { value }, { setValue }] = useField(name),
+        [imageOpen, setImageOpen] = useState(false),
+        [menuOpen, setMenuOpen] = useState(false),
+        { Img, Popup } = useComponents(),
+        acceptImage = accept && accept.startsWith("image/"),
+        showImage = () => setImageOpen(true),
+        hideImage = () => setImageOpen(false),
+        showMenu = () => setMenuOpen(true),
+        hideMenu = () => setMenuOpen(false);
+
+    async function handleFile(mode) {
+        const value = await mode(accept, capture);
+        if (value || mode === clear) {
+            setValue(value);
+        }
+        hideMenu();
+    }
+
+    const modes = capture
+        ? [takePhoto]
+        : acceptImage
+          ? [takePhoto, pickFile]
+          : [pickFile];
+
+    if (value && !required) {
+        modes.push(clear);
+    }
+
+    return (
+        <View>
+            {label && <List.Subheader>{label}</List.Subheader>}
+            <View
+                style={{
+                    flexDirection: "row",
+                    alignItems: "center",
+                    padding: 8,
+                }}
+            >
+                {isImage(value) && (
+                    <Img
+                        onPress={showImage}
+                        style={{ width: 64, height: 64 }}
+                        src={typeof value === "string" ? value : value.uri}
+                    />
+                )}
+                {value && !isImage(value) && <List.Icon icon="attachment" />}
+                <Text style={{ flex: 1, padding: 8 }}>
+                    {value ? value.name : "No file selected"}
+                </Text>
+                <Menu
+                    visible={menuOpen}
+                    onDismiss={hideMenu}
+                    anchor={
+                        <Button
+                            onPress={
+                                modes.length > 1
+                                    ? showMenu
+                                    : () => handleFile(modes[0])
+                            }
+                            icon={value ? "pencil" : "plus"}
+                            mode="contained-tonal"
+                        >
+                            {value
+                                ? "Change"
+                                : capture
+                                  ? "Add Photo"
+                                  : acceptImage
+                                    ? "Add Image"
+                                    : "Add File"}
+                        </Button>
+                    }
+                >
+                    {modes.map((mode) => (
+                        <Menu.Item
+                            key={mode.icon}
+                            onPress={() => handleFile(mode)}
+                            leadingIcon={mode.icon}
+                            title={mode.label}
+                        />
+                    ))}
+                </Menu>
+            </View>
+            <HelperText name={name} hint={hint} />
+            <Popup open={value && imageOpen} onClose={hideImage}>
+                <Img
+                    onPress={hideImage}
+                    resizeMode="contain"
+                    style={{
+                        width: "90%",
+                        height: "90%",
+                        margin: "5%",
+                    }}
+                    src={typeof value === "string" ? value : value && value.uri}
+                />
+            </Popup>
+        </View>
+    );
+}
+File.propTypes = {
+    name: PropTypes.string,
+    accept: PropTypes.string,
+    capture: PropTypes.string,
+    required: PropTypes.bool,
+    label: PropTypes.string,
+    hint: PropTypes.string,
+};
+
+export default withWQ(File, { fallback: FileFallback });
+
+function isImage(value) {
+    if (typeof value === "string") {
+        return IMAGE_EXTENSIONS.some((ext) =>
+            value.toLowerCase().endsWith(ext),
+        );
+    } else {
+        return (
+            value && value.type && value.type.startsWith("image/") && value.uri
+        );
+    }
+}
+
+function generateName() {
+    const appName = Application.applicationName.replace(/ /, ""),
+        timestamp = new Date(),
+        date = format.date(timestamp).replace(/-/g, ""),
+        time = format.time(timestamp).replace(/:/g, "");
+    return `${appName}_${date}_${time}.jpg`;
+}
+
+async function pickFile(accept) {
+    const result = await DocumentPicker.getDocumentAsync({ type: accept });
+    if (result.assets && result.assets.length > 0) {
+        const { name, mimeType: type, uri } = result.assets[0];
+        return { name, type, uri };
+    }
+}
+pickFile.icon = "folder";
+pickFile.label = "Pick File";
+
+async function takePhoto(accept, capture) {
+    const options = {};
+    if (capture) {
+        options.cameraType =
+            capture === "user"
+                ? ImagePicker.CameraType.front
+                : ImagePicker.CameraType.back;
+    }
+    const result = await ImagePicker.launchCameraAsync(options);
+    if (result.assets && result.assets.length > 0) {
+        const name = generateName(),
+            type = "image/jpeg",
+            { uri } = result.assets[0];
+        return { name, type, uri };
+    }
+}
+takePhoto.icon = "camera";
+takePhoto.label = "Take Photo";
+
+function clear() {
+    return null;
+}
+clear.icon = "delete";
+clear.label = "Remove";
+
+const IMAGE_EXTENSIONS = ["jpg", "jpeg", "png", "gif"];

package/src/components/FileArray.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import { List } from "react-native-paper";
+import FieldsetArray from "./FieldsetArray.js";
+
+function FileArray(props) {
+    return (
+        <>
+            {props.label && <List.Subheader>{props.label}</List.Subheader>}
+            <FieldsetArray {...props} />
+        </>
+    );
+}
+
+export default withWQ(FileArray);

package/src/components/FlatFieldset.js

@@ -0,0 +1,4 @@
+import { Fragment } from "react";
+import { withWQ } from "@wq/react";
+
+export default withWQ(Fragment, "FlatFieldset");

package/src/components/FormError.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import { useField } from "formik";
+import { HelperText } from "react-native-paper";
+
+function FormError(props) {
+    const [, { error }] = useField("__other__");
+    if (!error) {
+        return null;
+    }
+    return (
+        <HelperText type="error" {...props}>
+            {error}
+        </HelperText>
+    );
+}
+
+export default withWQ(FormError);

package/src/components/FormRoot.js

@@ -0,0 +1,4 @@
+import { Fragment } from "react";
+import { withWQ } from "@wq/react";
+
+export default withWQ(Fragment, "FormRoot");

package/src/components/GeoHelpIcon.js

@@ -0,0 +1,48 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import PropTypes from "prop-types";
+import Icon from "react-native-paper/src/components/Icon";
+
+function GeoHelpIcon({ name, type }) {
+    const iconClass = getIconClass(name, type);
+    if (!iconClass) {
+        return `{${name}}`;
+    }
+
+    return <Icon source={iconClass} />;
+}
+
+GeoHelpIcon.propTypes = {
+    name: PropTypes.string,
+    type: PropTypes.string,
+};
+
+const SHAPES = ["point", "line", "polygon"],
+    NAMES = SHAPES.map((shape) => `${shape.toUpperCase()}_ICON`),
+    ICONS = {
+        point: "map-marker",
+        line: "vector-polyline",
+        polygon: "vector-polygon",
+    };
+
+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 (NAMES.includes(iconName)) {
+        shape = SHAPES[NAMES.indexOf(iconName)];
+    }
+
+    if (shape) {
+        return ICONS[shape];
+    } else {
+        return null;
+    }
+}
+
+export default withWQ(GeoHelpIcon);

package/src/components/HelperText.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import { useFormikContext, getIn } from "formik";
+import { HelperText as FormHelperText } from "react-native-paper";
+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 type={showError ? "error" : "info"}>
+            {hint}
+        </FormHelperText>
+    );
+}
+
+HelperText.propTypes = {
+    name: PropTypes.string,
+    hint: PropTypes.string,
+};
+
+export default withWQ(HelperText);

package/src/components/Hidden.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import { Field } from "formik";
+import HelperText from "./HelperText.js";
+import PropTypes from "prop-types";
+
+function Empty() {
+    return null;
+}
+
+function Hidden(props) {
+    const { name, hint } = props;
+    return (
+        <>
+            <Field {...props} component={Empty} />
+            <HelperText name={name} hint={hint} />
+        </>
+    );
+}
+
+Hidden.propTypes = {
+    name: PropTypes.string,
+    hint: PropTypes.string,
+};
+
+export default withWQ(Hidden);

package/src/components/IconSubmitButton.js

@@ -0,0 +1,20 @@
+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, submitForm } = useFormikContext();
+
+    return (
+        <IconButton disabled={isSubmitting} onPress={submitForm} {...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,93 @@
+import React, { useState } from "react";
+import { withWQ } from "@wq/react";
+import { View } from "react-native";
+import { TextInput } from "react-native-paper";
+import { useField } from "formik";
+import { useHtmlInput } from "@wq/form-common";
+import HelperText from "./HelperText.js";
+import PropTypes from "prop-types";
+
+const keyboards = {
+    int: "number-pad",
+    decimal: "decimal-pad",
+    tel: "phone-pad",
+    email: "email-address",
+};
+
+function Input(props) {
+    const { name, type, label, hint, style, min, max, step } = props,
+        { maxLength } = useHtmlInput(props),
+        [, meta, helpers] = useField(name),
+        { value } = meta,
+        [formatValue, setFormatValue] = useState(
+            type === "int" || type === "decimal"
+                ? typeof value === "number"
+                    ? "" + value
+                    : ""
+                : value,
+        ),
+        { setValue, setTouched } = helpers;
+
+    function handleChange(nextValue) {
+        let value = nextValue;
+        if (type === "int" || type === "decimal") {
+            if (type === "int") {
+                value = parseInt(value);
+            } else {
+                value = +value;
+            }
+            if (Number.isNaN(value)) {
+                setValue(null);
+                setFormatValue("");
+            } else {
+                if (typeof min === "number" && value < min) {
+                    value = min;
+                }
+                if (typeof max === "number" && value > max) {
+                    value = max;
+                }
+                if (step) {
+                    value = +(Math.round(value / step) * step).toFixed(
+                        step < 1 ? step.toString().split(".")[1].length : 0,
+                    );
+                }
+                setValue(value);
+                setFormatValue(
+                    +nextValue === value ? nextValue : value.toString(),
+                );
+            }
+        } else {
+            setValue(value);
+            setFormatValue(value);
+        }
+    }
+
+    return (
+        <View style={{ flex: (style || {}).flex }}>
+            <TextInput
+                label={label}
+                multiline={type === "text"}
+                keyboardType={keyboards[type] || "default"}
+                maxLength={maxLength}
+                onChangeText={handleChange}
+                onBlur={() => setTouched(true)}
+                value={formatValue}
+                style={style}
+            />
+            <HelperText name={name} hint={hint} />
+        </View>
+    );
+}
+
+Input.propTypes = {
+    name: PropTypes.string,
+    type: PropTypes.string,
+    label: PropTypes.string,
+    hint: PropTypes.string,
+    style: PropTypes.object,
+    min: PropTypes.number,
+    max: PropTypes.number,
+    step: PropTypes.number,
+};
+
+export default withWQ(Input);

package/src/components/Radio.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import { View } from "react-native";
+import { RadioButton, List } from "react-native-paper";
+import HelperText from "./HelperText.js";
+import { useField } from "formik";
+import PropTypes from "prop-types";
+
+function Radio({ name, choices, label, hint }) {
+    const [, { value }, { setValue }] = useField(name);
+    return (
+        <View>
+            <List.Subheader>{label}</List.Subheader>
+            <RadioButton.Group onValueChange={setValue} value={value}>
+                {choices.map((choice) => (
+                    <RadioButton.Item
+                        key={choice.name}
+                        value={choice.name}
+                        label={choice.label}
+                    />
+                ))}
+            </RadioButton.Group>
+            <HelperText name={name} hint={hint} />
+        </View>
+    );
+}
+
+Radio.propTypes = {
+    name: PropTypes.string,
+    label: PropTypes.string,
+    hint: PropTypes.string,
+    choices: PropTypes.arrayOf(PropTypes.object),
+};
+
+export default withWQ(Radio);

package/src/components/Select.js

@@ -0,0 +1,61 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import RNPickerSelect from "react-native-picker-select";
+import { View } from "react-native";
+import { TextInput, useTheme } from "react-native-paper";
+import { useField } from "formik";
+import HelperText from "./HelperText.js";
+import PropTypes from "prop-types";
+
+function Select({ name, choices, label, hint }) {
+    const theme = useTheme(),
+        [, meta, helpers] = useField(name),
+        { value } = meta,
+        { setValue } = helpers;
+
+    const styles = {
+        inputIOS: {
+            color: theme.colors.text,
+            marginLeft: 12,
+            paddingTop: 32,
+            fontSize: 16,
+        },
+        inputAndroid: {
+            color: theme.colors.text,
+            marginLeft: 4,
+            paddingTop: 40,
+            paddingBottom: 40,
+            marginBottom: -40,
+        },
+    };
+
+    return (
+        <View>
+            <TextInput
+                label={label}
+                value={"-"}
+                render={() => (
+                    <RNPickerSelect
+                        value={value}
+                        onValueChange={setValue}
+                        items={choices.map(({ name, label }) => ({
+                            value: name,
+                            label,
+                        }))}
+                        style={styles}
+                    />
+                )}
+            />
+            <HelperText name={name} hint={hint} />
+        </View>
+    );
+}
+
+Select.propTypes = {
+    name: PropTypes.string,
+    label: PropTypes.string,
+    hint: PropTypes.string,
+    choices: PropTypes.arrayOf(PropTypes.object),
+};
+
+export default withWQ(Select);

package/src/components/SubmitButton.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { withWQ, useComponents, createFallbackComponent } from "@wq/react";
+import { useFormikContext } from "formik";
+
+const SubmitButtonFallback = {
+    components: {
+        Button: createFallbackComponent("Button", "@wq/material"),
+    },
+};
+
+function SubmitButton(props) {
+    const { Button } = useComponents(),
+        { isSubmitting, submitForm } = useFormikContext();
+
+    return (
+        <Button
+            mode="contained"
+            disabled={isSubmitting}
+            onPress={submitForm}
+            {...props}
+        />
+    );
+}
+
+export default withWQ(SubmitButton, { fallback: SubmitButtonFallback });

package/src/components/Toggle.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { withWQ } from "@wq/react";
+import { View, Text } from "react-native";
+import { ToggleButton, List } from "react-native-paper";
+import HelperText from "./HelperText.js";
+import { useField } from "formik";
+import PropTypes from "prop-types";
+
+function Toggle({ name, choices, label, hint, style }) {
+    const [, { value }, { setValue }] = useField(name);
+    return (
+        <View>
+            <List.Subheader>{label}</List.Subheader>
+            <ToggleButton.Row
+                onValueChange={setValue}
+                value={value}
+                style={{ paddingLeft: 16, paddingBottom: 8, ...style }}
+            >
+                {choices.map((choice) => (
+                    <ToggleButton
+                        key={choice.name}
+                        value={choice.name}
+                        icon={() => <Text>{choice.label}</Text>}
+                        style={{ width: undefined, padding: 8 }}
+                    />
+                ))}
+            </ToggleButton.Row>
+            <HelperText name={name} hint={hint} />
+        </View>
+    );
+}
+
+Toggle.propTypes = {
+    name: PropTypes.string,
+    label: PropTypes.string,
+    hint: PropTypes.string,
+    choices: PropTypes.arrayOf(PropTypes.object),
+    style: PropTypes.object,
+};
+
+export default withWQ(Toggle);

package/src/components/index.js

@@ -0,0 +1,52 @@
+import FormRoot from "./FormRoot.js";
+import FormError from "./FormError.js";
+import Input from "./Input.js";
+import Checkbox from "./Checkbox.js";
+import DateTime from "./DateTime.js";
+import File from "./File.js";
+import Image from "./Image.js";
+import Select from "./Select.js";
+import Radio from "./Radio.js";
+import Toggle from "./Toggle.js";
+import Hidden from "./Hidden.js";
+import HelperText from "./HelperText.js";
+import Fieldset from "./Fieldset.js";
+import FlatFieldset from "./FlatFieldset.js";
+import FieldsetArray from "./FieldsetArray.js";
+import FileArray from "./FileArray.js";
+import SubmitButton from "./SubmitButton.js";
+import IconSubmitButton from "./IconSubmitButton.js";
+import DeleteForm from "./DeleteForm.js";
+import Draw from "./Draw.js";
+import GeoHelpIcon from "./GeoHelpIcon.js";
+
+const Date = DateTime;
+const Time = DateTime;
+const dateTime = DateTime;
+
+export {
+    FormRoot,
+    FormError,
+    Input,
+    Checkbox,
+    DateTime,
+    Date,
+    Time,
+    dateTime,
+    File,
+    Image,
+    Select,
+    Radio,
+    Toggle,
+    Hidden,
+    HelperText,
+    Fieldset,
+    FlatFieldset,
+    FieldsetArray,
+    FileArray,
+    SubmitButton,
+    IconSubmitButton,
+    DeleteForm,
+    Draw,
+    GeoHelpIcon,
+};

package/src/index.js

@@ -0,0 +1,3 @@
+import AutoForm from "./AutoForm.js";
+export { AutoForm };
+export * from "./components/index.js";