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

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";
 
@@ -40,10 +47,6 @@ import TablePagination from "./TablePagination.js";
 
 import FormRoot from "./FormRoot.js";
 import FormError from "./FormError.js";
-import Fieldset from "./Fieldset.js";
-import FlatFieldset from "./FlatFieldset.js";
-import FieldsetArray from "./FieldsetArray.js";
-import FileArray from "./FileArray.js";
 import CancelButton from "./CancelButton.js";
 import SubmitButton from "./SubmitButton.js";
 import IconSubmitButton from "./IconSubmitButton.js";
@@ -58,6 +61,8 @@ import Pagination from "./Pagination.js";
 export {
     Container,
     Header,
+    NavMenuPopup,
+    NavMenuFixed,
     Main,
     Footer,
     FooterContent,
@@ -65,6 +70,7 @@ export {
     ScrollView,
     HorizontalView,
     Text,
+    Img,
     Typography,
     FormatJson,
 };
@@ -76,6 +82,10 @@ export {
     HomeLink,
     IconButton,
     Fab,
+    TabGroup,
+    TabItem,
+    BottomNavigation,
+    BottomNavigationAction,
     Chip,
     Switch,
     CheckboxButton,
@@ -87,7 +97,8 @@ export {
     ListItem,
     ListItemLink,
     ListSubheader,
-    ExpansionPanel,
+    Accordion,
+    Accordion as ExpansionPanel,
     ExpandableListItem,
     Divider,
 };
@@ -106,10 +117,6 @@ export {
 export {
     FormRoot,
     FormError,
-    Fieldset,
-    FlatFieldset,
-    FieldsetArray,
-    FileArray,
     CancelButton,
     SubmitButton,
     IconSubmitButton,

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/FileArray.js

@@ -0,0 +1,12 @@
+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/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,
+};