@wq/material-native 2.0.0-alpha.0 → 2.0.0-alpha.2

package/babel.config.cjs

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

package/jest.config.js

@@ -1,9 +1,5 @@
 export default {
-    preset: "react-native",
-    setupFiles: [
-        "./node_modules/react-native-gesture-handler/jestSetup.js",
-        "./setup-jest.js",
-    ],
+    preset: "jest-expo",
     testMatch: ["**/__tests__/**/*.js?(x)"],
     transformIgnorePatterns: [],
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wq/material-native",
-    "version": "2.0.0-alpha.0",
+    "version": "2.0.0-alpha.2",
     "description": "React Native and Expo bindings for @wq/material",
     "type": "module",
     "main": "src/index.js",
@@ -28,31 +28,30 @@
     },
     "homepage": "https://wq.io/@wq/material",
     "dependencies": {
-        "@wq/react": "^2.0.0-alpha.0",
-        "date-fns": "^2.29.3"
+        "@wq/react": "^2.0.0-alpha.2",
+        "date-fns": "^2.30.0"
     },
     "peerDependencies": {
         "@react-native-async-storage/async-storage": "*",
-        "@react-native-community/datetimepicker": "*",
-        "@react-native-community/masked-view": "*",
         "@react-native-community/netinfo": "*",
-        "@react-navigation/native": "*",
         "@react-navigation/stack": "*",
+        "expo-application": "*",
+        "expo-document-picker": "*",
+        "expo-image-picker": "*",
         "react-native-modal-datetime-picker": "*",
         "react-native-paper": "*",
         "react-native-picker-select": "*"
     },
     "devDependencies": {
-        "@react-native-async-storage/async-storage": "^1.17.11",
-        "@react-native-community/datetimepicker": "^6.7.1",
-        "@react-native-community/masked-view": "^0.1.11",
-        "@react-native-community/netinfo": "^9.3.7",
-        "@react-navigation/native": "^6.1.2",
-        "@react-navigation/stack": "^6.3.11",
-        "@wq/model": "^2.0.0-alpha.0",
-        "@wq/store": "^2.0.0-alpha.0",
-        "react-native-modal-datetime-picker": "^14.0.1",
-        "react-native-paper": "^5.1.3",
-        "react-native-picker-select": "^8.0.4"
+        "@react-native-async-storage/async-storage": "^1.19.1",
+        "@react-native-community/netinfo": "^9.4.1",
+        "@react-navigation/stack": "^6.3.17",
+        "expo-application": "^5.3.0",
+        "expo-document-picker": "^11.5.4",
+        "expo-image-picker": "^14.3.2",
+        "jest-expo": "^49.0.0",
+        "react-native-modal-datetime-picker": "^17.0.0",
+        "react-native-paper": "^5.10.1",
+        "react-native-picker-select": "github:Expensify/react-native-picker-select#eae0585"
     }
 }

package/src/components/{ExpansionPanel.js → Accordion.js}

@@ -2,7 +2,7 @@ import React from "react";
 import { List } from "react-native-paper";
 import PropTypes from "prop-types";
 
-export default function ExpansionPanel({ summary, children, open, onToggle }) {
+export default function Accordion({ summary, children, open, onToggle }) {
     let handleToggle;
     if (onToggle) {
         handleToggle = () => onToggle(!open);
@@ -14,7 +14,7 @@ export default function ExpansionPanel({ summary, children, open, onToggle }) {
     );
 }
 
-ExpansionPanel.propTypes = {
+Accordion.propTypes = {
     summary: PropTypes.node,
     children: PropTypes.node,
     open: PropTypes.bool,

package/src/components/BottomNavigation.js

@@ -0,0 +1,3 @@
+export default function BottomNavigation() {
+    return null; //FIXME
+}

package/src/components/BottomNavigationAction.js

@@ -0,0 +1,3 @@
+export default function BottomNavigationAction() {
+    return null; //FIXME
+}

package/src/components/CheckboxButton.js

@@ -1,3 +1,26 @@
-export default function NotImplemented() {
-    return null; // FIXME
+import React from "react";
+import { Checkbox as PaperCheckbox, useTheme } from "react-native-paper";
+import PropTypes from "prop-types";
+
+const STATUSES = {
+    true: "checked",
+    false: "unchecked",
+    undefined: "indeterminate",
+    null: "indeterminate",
+};
+
+export default function Checkbox({ checked, color, ...props }) {
+    const status = STATUSES[checked],
+        theme = useTheme();
+    if (color === "primary") {
+        color = theme.colors.primary;
+    } else if (color === "secondary") {
+        color = theme.colors.accent;
+    }
+    return <PaperCheckbox status={status} {...props} />;
 }
+
+Checkbox.propTypes = {
+    checked: PropTypes.bool,
+    color: PropTypes.string,
+};

package/src/components/Fab.js

@@ -11,7 +11,6 @@ export default function Fab({ icon, to, ...rest }) {
         <FAB
             onPress={onPress}
             icon={Icon}
-            color="white"
             style={{
                 position: "absolute",
                 margin: 16,

package/src/components/FileArray.js

@@ -1,3 +1,12 @@
-export default function NotImplemented() {
-    return null; // FIXME
+import React from "react";
+import { List } from "react-native-paper";
+import FieldsetArray from "./FieldsetArray.js";
+
+export default function FileArray(props) {
+    return (
+        <>
+            {props.label && <List.Subheader>{props.label}</List.Subheader>}
+            <FieldsetArray {...props} />
+        </>
+    );
 }

package/src/components/Img.js

@@ -0,0 +1,102 @@
+import React, { useState, useEffect } from "react";
+import { Image, TouchableOpacity, Dimensions } from "react-native";
+import PropTypes from "prop-types";
+
+export default function Img({ src, onPress, onClick, style, ...props }) {
+    const [source, setSource] = useState(src ? { uri: src } : null);
+    useEffect(() => {
+        if (!src) {
+            return;
+        }
+        if (typeof src !== "string") {
+            setSource(src);
+            return;
+        }
+        Image.getSize(src, (width, height) => {
+            setSource({ uri: src, width, height });
+        });
+    }, [src]);
+
+    let resizeMode;
+    if (
+        style &&
+        typeof style.maxHeight === "number" &&
+        typeof style.maxWidth === "string" &&
+        style.maxWidth.endsWith("vw")
+    ) {
+        resizeMode = "contain";
+        const ratio =
+                source && source.width && source.height
+                    ? source.width / source.height
+                    : 1,
+            maxWidth =
+                (+style.maxWidth.replace(/vw/g, "") / 100) *
+                Dimensions.get("window").width;
+        style = {
+            ...style,
+            maxHeight: undefined,
+            maxWidth: undefined,
+            height: style.maxHeight,
+            width: Math.min(ratio * style.maxHeight, maxWidth),
+        };
+    } else if (
+        style &&
+        typeof style.maxHeight === "string" &&
+        typeof style.maxWidth === "string"
+    ) {
+        resizeMode = "contain";
+        style = {
+            ...style,
+            maxHeight: undefined,
+            maxWidth: undefined,
+            height: style.maxHeight.replace("vh", "%"),
+            width: style.maxWidth.replace("vw", "%"),
+        };
+    }
+
+    const hasSize =
+        (source && (source === src || (source.width && source.height))) ||
+        props.width ||
+        props.height ||
+        (style && style.width) ||
+        (style && style.height);
+    if (src && !hasSize) {
+        return null;
+    } else if (onPress || onClick) {
+        return (
+            <TouchableOpacity
+                onPress={onPress || onClick}
+                style={{
+                    ...style,
+                    alignItems: "center",
+                    justifyContent: "center",
+                }}
+            >
+                <Image
+                    resizeMode={resizeMode}
+                    style={style}
+                    source={source}
+                    {...props}
+                />
+            </TouchableOpacity>
+        );
+    } else {
+        return (
+            <Image
+                resizeMode={resizeMode}
+                style={style}
+                source={source}
+                {...props}
+            />
+        );
+    }
+}
+
+Img.propTypes = {
+    src: PropTypes.oneOfType(PropTypes.string, PropTypes.number),
+    width: PropTypes.number,
+    height: PropTypes.number,
+    onPress: PropTypes.func,
+    onClick: PropTypes.func,
+    style: PropTypes.object,
+};

package/src/components/ListItem.js

@@ -3,13 +3,26 @@ import { useIcon } from "@wq/react";
 import { List } from "react-native-paper";
 import PropTypes from "prop-types";
 
-export default function ListItem({ children, description, icon, ...rest }) {
+export default function ListItem({
+    children,
+    description,
+    icon,
+    dense,
+    style,
+    onClick,
+    ...rest
+}) {
     const Icon = useIcon(icon);
     return (
         <List.Item
             title={children}
             description={description}
             left={Icon ? (props) => <List.Icon icon={Icon} {...props} /> : null}
+            onPress={onClick}
+            style={{
+                ...(dense && { paddingTop: 4, paddingBottom: 4 }),
+                ...style,
+            }}
             {...rest}
         />
     );
@@ -19,4 +32,7 @@ ListItem.propTypes = {
     children: PropTypes.node,
     description: PropTypes.node,
     icon: PropTypes.string,
+    dense: PropTypes.bool,
+    style: PropTypes.object,
+    onClick: PropTypes.func,
 };

package/src/components/NavMenuFixed.js

@@ -0,0 +1,3 @@
+export default function NavMenuFixed() {
+    return null; //FIXME
+}

package/src/components/NavMenuPopup.js

@@ -0,0 +1,3 @@
+export default function NavMenuPopup() {
+    return null; // FIXME
+}

package/src/components/Popup.js

@@ -1,3 +1,19 @@
-export default function NotImplemented() {
-    return null; // FIXME
+import React from "react";
+import { Modal, Portal } from "react-native-paper";
+import PropTypes from "prop-types";
+
+export default function Popup({ open, onClose, children, ...rest }) {
+    return (
+        <Portal>
+            <Modal visible={open} onDismiss={onClose} {...rest}>
+                {children}
+            </Modal>
+        </Portal>
+    );
 }
+
+Popup.propTypes = {
+    open: PropTypes.bool,
+    onClose: PropTypes.func,
+    children: PropTypes.node,
+};

package/src/components/RadioButton.js

@@ -1,3 +1,26 @@
-export default function NotImplemented() {
-    return null; // FIXME
+import React from "react";
+import { RadioButton as PaperRadioButton, useTheme } from "react-native-paper";
+import PropTypes from "prop-types";
+
+const STATUSES = {
+    true: "checked",
+    false: "unchecked",
+    undefined: "unchecked",
+    null: "unchecked",
+};
+
+export default function RadioButton({ checked, color, ...rest }) {
+    const status = STATUSES[checked],
+        theme = useTheme();
+    if (color === "primary") {
+        color = theme.colors.primary;
+    } else if (color === "secondary") {
+        color = theme.colors.accent;
+    }
+    return <PaperRadioButton status={status} {...rest} />;
 }
+
+RadioButton.propTypes = {
+    checked: PropTypes.bool,
+    color: PropTypes.string,
+};

package/src/components/SidePanel.js

@@ -1,3 +1,94 @@
-export default function NotImplemented() {
-    return null; // FIXME
+import React, { useState, useEffect } from "react";
+import { useComponents } from "@wq/react";
+import { View } from "react-native";
+import { useTheme } from "react-native-paper";
+import { useMinWidth } from "../hooks.js";
+import PropTypes from "prop-types";
+
+export default function SidePanel({
+    anchor: anchorSpec = "top-left",
+    children,
+    compactChildren,
+    onChange,
+}) {
+    const mobile = !useMinWidth(900),
+        theme = useTheme(),
+        anchor = anchorSpec.endsWith("right") ? "right" : "left",
+        vAnchor = anchorSpec.startsWith("bottom") ? "bottom" : "top",
+        [open, setOpen] = useState(!mobile),
+        { IconButton } = useComponents(),
+        drawerStyle = {},
+        iconStyle = {};
+
+    drawerStyle.zIndex = 1000;
+    drawerStyle.width = open ? 280 : 50;
+    drawerStyle.borderColor = "rgba(0, 0, 0, 0.12)";
+
+    if (mobile && !open) {
+        drawerStyle.backgroundColor = theme.colors.background;
+        drawerStyle.position = "absolute";
+        if (vAnchor === "bottom") {
+            drawerStyle.bottom = 0;
+            drawerStyle.borderTopWidth = 1;
+        } else {
+            drawerStyle.top = 0;
+            drawerStyle.borderBottomWidth = 1;
+        }
+        if (anchor === "right") {
+            drawerStyle.right = 1;
+        } else {
+            drawerStyle.left = 1;
+        }
+    }
+
+    if (anchor === "right") {
+        iconStyle.transform = [{ rotate: "180deg" }];
+        drawerStyle.borderLeftWidth = 1;
+    } else {
+        drawerStyle.borderRightWidth = 1;
+    }
+
+    useEffect(() => {
+        if (onChange) {
+            onChange(open);
+        }
+    }, [open, onChange]);
+
+    return (
+        <View style={drawerStyle}>
+            {open ? (
+                <View
+                    style={{
+                        display: "flex",
+                        flexDirection: "row",
+                        position: "sticky",
+                        top: 0,
+                        zIndex: 100,
+                    }}
+                >
+                    {anchor === "left" && <View style={{ flex: 1 }} />}
+                    <IconButton
+                        icon="panel-close"
+                        style={iconStyle}
+                        onClick={() => setOpen(false)}
+                    />
+                    {anchor === "right" && <View style={{ flex: 1 }} />}
+                </View>
+            ) : (
+                <IconButton
+                    icon="panel-open"
+                    style={iconStyle}
+                    onClick={() => setOpen(true)}
+                />
+            )}
+            {open ? children : compactChildren}
+        </View>
+    );
 }
+
+SidePanel.propTypes = {
+    children: PropTypes.node,
+    compactChildren: PropTypes.node,
+    onChange: PropTypes.func,
+    anchor: PropTypes.string,
+};

package/src/components/Switch.js

@@ -1,3 +1,18 @@
-export default function NotImplemented() {
-    return null; // FIXME
+import React from "react";
+import { Switch as PaperSwitch, useTheme } from "react-native-paper";
+import PropTypes from "prop-types";
+
+export default function Switch({ checked: value, color, ...rest }) {
+    const theme = useTheme();
+    if (color === "primary") {
+        color = theme.colors.primary;
+    } else if (color === "secondary") {
+        color = theme.colors.accent;
+    }
+    return <PaperSwitch value={value} {...rest} />;
 }
+
+Switch.propTypes = {
+    checked: PropTypes.bool,
+    color: PropTypes.string,
+};

package/src/components/TabGroup.js

@@ -0,0 +1,38 @@
+import React, { useState } from "react";
+import { useIconComponents } from "@wq/react";
+import { View } from "react-native";
+import { SegmentedButtons } from "react-native-paper";
+import PropTypes from "prop-types";
+
+export default function TabGroup({ children, style, ...rest }) {
+    const tabs = React.Children.toArray(children),
+        [value, setValue] = useState(tabs[0].props.value),
+        activeTab = tabs.find((tab) => tab.props.value === value),
+        handleChange = (tab) => setValue(tab),
+        icons = useIconComponents(),
+        buttons = tabs.map((tab) => ({
+            value: tab.props.value,
+            label: tab.props.label,
+            icon: icons[tab.props.icon],
+        }));
+
+    return (
+        <View style={{ flex: 1, display: "flex", flexDirection: "column" }}>
+            <SegmentedButtons
+                value={value}
+                onValueChange={handleChange}
+                buttons={buttons}
+                style={{ padding: 8, ...style }}
+                {...rest}
+            />
+            <View style={{ flex: 1, display: "flex", flexDirection: "column" }}>
+                {activeTab && activeTab.props.children}
+            </View>
+        </View>
+    );
+}
+
+TabGroup.propTypes = {
+    children: PropTypes.node,
+    style: PropTypes.object,
+};

package/src/components/TabItem.js

@@ -0,0 +1,16 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export default function TabItem({ value, icon, label, children }) {
+    /* eslint no-unused-vars: off */
+
+    // All rendering handled by TabGroup
+    return null;
+}
+
+TabItem.propTypes = {
+    value: PropTypes.string,
+    icon: PropTypes.string,
+    label: PropTypes.string,
+    children: PropTypes.node,
+};

package/src/components/TableCell.js

@@ -1,3 +1,25 @@
+import React from "react";
+import { View } from "react-native";
 import { DataTable } from "react-native-paper";
+import PropTypes from "prop-types";
 
-export default DataTable.Cell;
+export default function TableCell({ interactive, children, ...rest }) {
+    const Cell = interactive ? InteractiveCell : DataTable.Cell;
+    return <Cell {...rest}>{children}</Cell>;
+}
+
+function InteractiveCell(props) {
+    return (
+        <View
+            style={{
+                flex: 1,
+                flexDirection: "row",
+                alignItems: "center",
+                ...props.style,
+            }}
+            {...props}
+        />
+    );
+}
+
+TableCell.propTypes = { interactive: PropTypes.bool, children: PropTypes.node };

package/src/components/index.js

@@ -1,5 +1,7 @@
 import Container from "./Container.js";
 import Header from "./Header.js";
+import NavMenuPopup from "./NavMenuPopup.js";
+import NavMenuFixed from "./NavMenuFixed.js";
 import Main from "./Main.js";
 import Footer from "./Footer.js";
 import FooterContent from "./FooterContent.js";
@@ -7,6 +9,7 @@ import View from "./View.js";
 import ScrollView from "./ScrollView.js";
 import HorizontalView from "./HorizontalView.js";
 import Text from "./Text.js";
+import Img from "./Img.js";
 import Typography from "./Typography.js";
 import FormatJson from "./FormatJson.js";
 
@@ -16,6 +19,10 @@ import ButtonLink from "./ButtonLink.js";
 import HomeLink from "./HomeLink.js";
 import IconButton from "./IconButton.js";
 import Fab from "./Fab.js";
+import TabGroup from "./TabGroup.js";
+import TabItem from "./TabItem.js";
+import BottomNavigation from "./BottomNavigation.js";
+import BottomNavigationAction from "./BottomNavigationAction.js";
 import Chip from "./Chip.js";
 import Switch from "./Switch.js";
 import CheckboxButton from "./CheckboxButton.js";
@@ -25,7 +32,7 @@ import List from "./List.js";
 import ListItem from "./ListItem.js";
 import ListItemLink from "./ListItemLink.js";
 import ListSubheader from "./ListSubheader.js";
-import ExpansionPanel from "./ExpansionPanel.js";
+import Accordion from "./Accordion.js";
 import ExpandableListItem from "./ExpandableListItem.js";
 import Divider from "./Divider.js";
 
@@ -58,6 +65,8 @@ import Pagination from "./Pagination.js";
 export {
     Container,
     Header,
+    NavMenuPopup,
+    NavMenuFixed,
     Main,
     Footer,
     FooterContent,
@@ -65,6 +74,7 @@ export {
     ScrollView,
     HorizontalView,
     Text,
+    Img,
     Typography,
     FormatJson,
 };
@@ -76,6 +86,10 @@ export {
     HomeLink,
     IconButton,
     Fab,
+    TabGroup,
+    TabItem,
+    BottomNavigation,
+    BottomNavigationAction,
     Chip,
     Switch,
     CheckboxButton,
@@ -87,7 +101,8 @@ export {
     ListItem,
     ListItemLink,
     ListSubheader,
-    ExpansionPanel,
+    Accordion,
+    Accordion as ExpansionPanel,
     ExpandableListItem,
     Divider,
 };

package/src/icons.js

@@ -4,6 +4,21 @@ export const Add = "plus",
     Success = "check",
     Error = "alert-circle",
     Pending = "sync",
+    Close = "close",
+    Expand = "chevron-down",
+    Collapse = "chevron-up",
+    PanelOpen = "chevron-right",
+    PanelClose = "chevron-left",
     GpsStart = "crosshairs-gps",
     GpsStop = "crosshairs-off",
-    Search = "magnify";
+    Search = "magnify",
+    List = "view-list",
+    Detail = "information",
+    Map = "map",
+    Home = "home",
+    BreadcrumbSeparator = "chevron-right",
+    Menu = "menu",
+    Login = "login",
+    Logout = "logout",
+    Config = "cog",
+    External = "open-in-new";

package/src/inputs/Checkbox.js

@@ -2,9 +2,10 @@ import React from "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";
 
-export default function Checkbox({ name, label }) {
+export default function Checkbox({ name, label, hint }) {
     const theme = useTheme(),
         [, meta, helpers] = useField(name),
         { value } = meta,
@@ -15,19 +16,26 @@ export default function Checkbox({ name, label }) {
     }
 
     return (
-        <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}
+        <View>
+            <View
+                style={{
+                    flexDirection: "row",
+                    alignItems: "center",
+                    padding: 8,
+                }}
             >
-                {label}
-            </Text>
+                <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>
     );
 }
@@ -35,4 +43,5 @@ export default function Checkbox({ name, label }) {
 Checkbox.propTypes = {
     name: PropTypes.string,
     label: PropTypes.string,
+    hint: PropTypes.string,
 };

package/src/inputs/DateTime.js

@@ -1,10 +1,11 @@
 import React, { useState } from "react";
 import DateTimePickerModal from "react-native-modal-datetime-picker";
-import { Text } from "react-native";
+import { Text, View } from "react-native";
 import { TouchableRipple, TextInput } from "react-native-paper";
 import { useField } from "formik";
-import PropTypes from "prop-types";
 import { format, parse } from "./date-utils.js";
+import HelperText from "./HelperText.js";
+import PropTypes from "prop-types";
 
 const displayFormat = {
     date: (value) => parse.date(value).toLocaleDateString(),
@@ -12,7 +13,7 @@ const displayFormat = {
     datetime: (value) => parse.datetime(value).toLocaleString(),
 };
 
-export default function DateTime({ name, type, label }) {
+export default function DateTime({ name, type, label, hint }) {
     type = type.toLowerCase();
 
     const [, meta, helpers] = useField(name),
@@ -33,7 +34,7 @@ export default function DateTime({ name, type, label }) {
     }
 
     return (
-        <>
+        <View>
             <TextInput
                 label={label}
                 value={value ? displayFormat[type](value) : ""}
@@ -43,6 +44,7 @@ export default function DateTime({ name, type, label }) {
                     </TouchableRipple>
                 )}
             />
+            <HelperText name={name} hint={hint} />
             <DateTimePickerModal
                 isVisible={show}
                 mode={type}
@@ -50,7 +52,7 @@ export default function DateTime({ name, type, label }) {
                 onConfirm={onConfirm}
                 onCancel={hidePicker}
             />
-        </>
+        </View>
     );
 }
 
@@ -58,4 +60,5 @@ DateTime.propTypes = {
     name: PropTypes.string,
     type: PropTypes.string,
     label: PropTypes.string,
+    hint: PropTypes.string,
 };

package/src/inputs/File.js

@@ -1,3 +1,176 @@
-export default function NotImplemented() {
-    return null; // FIXME
+import React, { useState } from "react";
+import { useField } from "formik";
+import { useComponents } 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 "./date-utils.js";
+import HelperText from "./HelperText.js";
+import PropTypes from "prop-types";
+
+export default 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,
+};
+
+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/inputs/HelperText.js

@@ -1,3 +1,29 @@
-import { HelperText } from "react-native-paper";
+import React from "react";
+import { useFormikContext, getIn } from "formik";
+import { HelperText as FormHelperText } from "react-native-paper";
+import PropTypes from "prop-types";
 
-export default HelperText;
+export default 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,
+};

package/src/inputs/Hidden.js

@@ -1,6 +1,6 @@
 import React from "react";
-import { Field, ErrorMessage } from "formik";
-import { HelperText } from "react-native-paper";
+import { Field } from "formik";
+import HelperText from "./HelperText.js";
 import PropTypes from "prop-types";
 
 function Empty() {
@@ -8,15 +8,16 @@ function Empty() {
 }
 
 export default function Hidden(props) {
-    const { name } = props;
+    const { name, hint } = props;
     return (
         <>
             <Field {...props} component={Empty} />
-            <ErrorMessage type="error" component={HelperText} name={name} />
+            <HelperText name={name} hint={hint} />
         </>
     );
 }
 
 Hidden.propTypes = {
     name: PropTypes.string,
+    hint: PropTypes.string,
 };

package/src/inputs/Image.js

@@ -1,3 +1,6 @@
-export default function NotImplemented() {
-    return null; // FIXME
+import React from "react";
+import File from "./File.js";
+
+export default function Image(props) {
+    return <File accept="image/*" {...props} />;
 }

package/src/inputs/Input.js

@@ -1,7 +1,9 @@
 import React from "react";
+import { View } from "react-native";
 import { TextInput } from "react-native-paper";
 import { useField } from "formik";
 import { useHtmlInput } from "@wq/react";
+import HelperText from "./HelperText.js";
 import PropTypes from "prop-types";
 
 const keyboards = {
@@ -12,7 +14,7 @@ const keyboards = {
 };
 
 export default function Input(props) {
-    const { name, type, label, style, min, max } = props,
+    const { name, type, label, hint, style, min, max } = props,
         { maxLength } = useHtmlInput(props),
         [, meta, helpers] = useField(name),
         { value } = meta,
@@ -49,16 +51,19 @@ export default function Input(props) {
     }
 
     return (
-        <TextInput
-            label={label}
-            multiline={type === "text"}
-            keyboardType={keyboards[type] || "default"}
-            maxLength={maxLength}
-            onChangeText={handleChange}
-            onBlur={() => setTouched(true)}
-            value={formatValue}
-            style={style}
-        />
+        <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>
     );
 }
 
@@ -66,6 +71,7 @@ Input.propTypes = {
     name: PropTypes.string,
     type: PropTypes.string,
     label: PropTypes.string,
+    hint: PropTypes.string,
     style: PropTypes.object,
     min: PropTypes.number,
     max: PropTypes.number,

package/src/inputs/Radio.js

@@ -1,3 +1,32 @@
-export default function NotImplemented() {
-    return null; // FIXME
+import React from "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";
+
+export default 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),
+};

package/src/inputs/Select.js

@@ -1,10 +1,12 @@
 import React from "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";
 
-export default function Select({ name, choices, label }) {
+export default function Select({ name, choices, label, hint }) {
     const theme = useTheme(),
         [, meta, helpers] = useField(name),
         { value } = meta,
@@ -27,26 +29,30 @@ export default function Select({ name, choices, label }) {
     };
 
     return (
-        <TextInput
-            label={label}
-            value={"-"}
-            render={() => (
-                <RNPickerSelect
-                    value={value}
-                    onValueChange={setValue}
-                    items={choices.map(({ name, label }) => ({
-                        value: name,
-                        label,
-                    }))}
-                    style={styles}
-                />
-            )}
-        />
+        <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),
 };

package/src/inputs/Toggle.js

@@ -1,3 +1,38 @@
-export default function NotImplemented() {
-    return null; // FIXME
+import React from "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";
+
+export default 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,
+};

package/setup-jest.js

@@ -1,5 +0,0 @@
-import { NativeModules } from "react-native";
-
-if (!NativeModules.PlatformLocalStorage) {
-    NativeModules.PlatformLocalStorage = {};
-}