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

package/src/inputs/File.js

@@ -1,176 +0,0 @@
-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,29 +0,0 @@
-import React from "react";
-import { useFormikContext, getIn } from "formik";
-import { HelperText as FormHelperText } from "react-native-paper";
-import PropTypes from "prop-types";
-
-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,23 +0,0 @@
-import React from "react";
-import { Field } from "formik";
-import HelperText from "./HelperText.js";
-import PropTypes from "prop-types";
-
-function Empty() {
-    return null;
-}
-
-export default 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,
-};

package/src/inputs/Image.js

@@ -1,6 +0,0 @@
-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,78 +0,0 @@
-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 = {
-    int: "number-pad",
-    decimal: "decimal-pad",
-    tel: "phone-pad",
-    email: "email-address",
-};
-
-export default function Input(props) {
-    const { name, type, label, hint, style, min, max } = props,
-        { maxLength } = useHtmlInput(props),
-        [, meta, helpers] = useField(name),
-        { value } = meta,
-        { setValue, setTouched } = helpers;
-
-    function handleChange(value) {
-        if (type === "int" || type === "decimal") {
-            if (type === "int") {
-                value = parseInt(value);
-            } else {
-                value = +value;
-            }
-            if (Number.isNaN(value)) {
-                setValue(null);
-            } else {
-                if (typeof min === "number" && value < min) {
-                    value = min;
-                }
-                if (typeof max === "number" && value > max) {
-                    value = max;
-                }
-                setValue(value);
-            }
-        } else {
-            setValue(value);
-        }
-    }
-
-    let formatValue;
-    if (type === "int" || type === "decimal") {
-        formatValue = typeof value === "number" ? "" + value : "";
-    } else {
-        formatValue = 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,
-};

package/src/inputs/Radio.js

@@ -1,32 +0,0 @@
-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,58 +0,0 @@
-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, 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),
-};

package/src/inputs/Toggle.js

@@ -1,38 +0,0 @@
-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/src/inputs/date-utils.js

@@ -1,21 +0,0 @@
-import { parseISO, formatISO9075 } from "date-fns";
-
-export const format = {
-    date: (value) => tryFormat(value, { representation: "date" }),
-    time: (value) => tryFormat(value, { representation: "time" }),
-    datetime: (value) => tryFormat(value),
-};
-
-function tryFormat(value, options) {
-    try {
-        return formatISO9075(value, options);
-    } catch (e) {
-        return value;
-    }
-}
-
-export const parse = {
-    date: (value) => (value ? parseISO(value) : null),
-    time: (value) => (value ? parseISO("9999-01-01 " + value) : null),
-    datetime: (value) => (value ? parseISO(value) : null),
-};

package/src/inputs/index.js

@@ -1,30 +0,0 @@
-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";
-
-const Date = DateTime;
-const Time = DateTime;
-const dateTime = DateTime;
-
-export {
-    Input,
-    Checkbox,
-    DateTime,
-    Date,
-    Time,
-    dateTime,
-    File,
-    Image,
-    Select,
-    Radio,
-    Toggle,
-    Hidden,
-    HelperText,
-};