@wq/material-native 2.0.0-alpha.0

package/src/components/Link.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { Button } from "react-native";
+import { useNav } from "@wq/react";
+import PropTypes from "prop-types";
+
+export default function Link({ to, children }) {
+    const onPress = useNav(to);
+    // FIXME: Use styled text instead?
+    return <Button title={children} onPress={onPress} />;
+}
+
+Link.propTypes = {
+    to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    children: PropTypes.node,
+};

package/src/components/List.js

@@ -0,0 +1,3 @@
+import { Fragment } from "react";
+
+export default Fragment;

package/src/components/ListItem.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { useIcon } from "@wq/react";
+import { List } from "react-native-paper";
+import PropTypes from "prop-types";
+
+export default function ListItem({ children, description, icon, ...rest }) {
+    const Icon = useIcon(icon);
+    return (
+        <List.Item
+            title={children}
+            description={description}
+            left={Icon ? (props) => <List.Icon icon={Icon} {...props} /> : null}
+            {...rest}
+        />
+    );
+}
+
+ListItem.propTypes = {
+    children: PropTypes.node,
+    description: PropTypes.node,
+    icon: PropTypes.string,
+};

package/src/components/ListItemLink.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { useNav, useComponents } from "@wq/react";
+import PropTypes from "prop-types";
+
+export default function ListItemLink({ to, ...rest }) {
+    const { ListItem } = useComponents(),
+        onPress = useNav(to);
+    return <ListItem onPress={onPress} {...rest} />;
+}
+
+ListItemLink.propTypes = {
+    to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+};

package/src/components/ListSubheader.js

@@ -0,0 +1,3 @@
+import { List } from "react-native-paper";
+
+export default List.Subheader;

package/src/components/Main.js

@@ -0,0 +1,3 @@
+import { Fragment } from "react";
+
+export default Fragment;

package/src/components/Pagination.js

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

package/src/components/Popup.js

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

package/src/components/RadioButton.js

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

package/src/components/ScrollView.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { ScrollView as PaperScrollView } from "react-native";
+import { useTheme } from "react-native-paper";
+import PropTypes from "prop-types";
+
+export default function ScrollView({ style, ...rest }) {
+    const theme = useTheme();
+    return (
+        <PaperScrollView
+            style={{
+                flex: 1,
+                backgroundColor: theme.colors.background,
+                ...style,
+            }}
+            {...rest}
+        />
+    );
+}
+
+ScrollView.propTypes = {
+    style: PropTypes.object,
+};

package/src/components/SidePanel.js

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

package/src/components/Spinner.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { ActivityIndicator, Modal, Portal } from "react-native-paper";
+import { useSpinner } from "@wq/react";
+
+export default function Spinner() {
+    const { active } = useSpinner();
+
+    // FIXME: text, type
+    return (
+        <Portal>
+            <Modal visible={active}>
+                <ActivityIndicator />
+            </Modal>
+        </Portal>
+    );
+}

package/src/components/SubmitButton.js

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

package/src/components/Switch.js

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

package/src/components/Table.js

@@ -0,0 +1,3 @@
+import { DataTable } from "react-native-paper";
+
+export default DataTable;

package/src/components/TableBody.js

@@ -0,0 +1,3 @@
+import { Fragment } from "react";
+
+export default Fragment;

package/src/components/TableCell.js

@@ -0,0 +1,3 @@
+import { DataTable } from "react-native-paper";
+
+export default DataTable.Cell;

package/src/components/TableContainer.js

@@ -0,0 +1,2 @@
+import { Fragment } from "react";
+export default Fragment;

package/src/components/TableHead.js

@@ -0,0 +1,3 @@
+import { DataTable } from "react-native-paper";
+
+export default DataTable.Header;

package/src/components/TablePagination.js

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

package/src/components/TableRow.js

@@ -0,0 +1,3 @@
+import { DataTable } from "react-native-paper";
+
+export default DataTable.Row;

package/src/components/TableTitle.js

@@ -0,0 +1,3 @@
+import { DataTable } from "react-native-paper";
+
+export default DataTable.Title;

package/src/components/Text.js

@@ -0,0 +1,3 @@
+import { Text } from "react-native";
+
+export default Text;

package/src/components/Typography.js

@@ -0,0 +1,39 @@
+import React from "react";
+import {
+    Text,
+    Subheading,
+    Title,
+    Paragraph,
+    Headline,
+    Caption,
+} from "react-native-paper";
+import PropTypes from "prop-types";
+
+const variants = {
+    default: Text,
+    h1: Headline,
+    h2: Headline,
+    h3: Headline,
+    h4: Headline,
+    h5: Headline,
+    h6: Title,
+    subtitle1: Subheading,
+    subtitle2: Subheading,
+    body1: Paragraph,
+    body2: Paragraph,
+    caption: Caption,
+    overline: Caption,
+};
+
+export default function Typography({ variant, children, ...rest }) {
+    const Component = variants[variant] || variants.default;
+    if (variant === "overline" && typeof children === "string") {
+        children = children.toUpperCase();
+    }
+    return <Component {...rest}>{children}</Component>;
+}
+
+Typography.propTypes = {
+    variant: PropTypes.string,
+    children: PropTypes.node,
+};

package/src/components/View.js

@@ -0,0 +1,3 @@
+import { View } from "react-native";
+
+export default View;

package/src/components/index.js

@@ -0,0 +1,119 @@
+import Container from "./Container.js";
+import Header from "./Header.js";
+import Main from "./Main.js";
+import Footer from "./Footer.js";
+import FooterContent from "./FooterContent.js";
+import View from "./View.js";
+import ScrollView from "./ScrollView.js";
+import HorizontalView from "./HorizontalView.js";
+import Text from "./Text.js";
+import Typography from "./Typography.js";
+import FormatJson from "./FormatJson.js";
+
+import Link from "./Link.js";
+import Button from "./Button.js";
+import ButtonLink from "./ButtonLink.js";
+import HomeLink from "./HomeLink.js";
+import IconButton from "./IconButton.js";
+import Fab from "./Fab.js";
+import Chip from "./Chip.js";
+import Switch from "./Switch.js";
+import CheckboxButton from "./CheckboxButton.js";
+import RadioButton from "./RadioButton.js";
+
+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 ExpandableListItem from "./ExpandableListItem.js";
+import Divider from "./Divider.js";
+
+import Table from "./Table.js";
+import TableHead from "./TableHead.js";
+import TableBody from "./TableBody.js";
+import TableRow from "./TableRow.js";
+import TableTitle from "./TableTitle.js";
+import TableCell from "./TableCell.js";
+import TableContainer from "./TableContainer.js";
+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";
+import DeleteForm from "./DeleteForm.js";
+
+import Spinner from "./Spinner.js";
+import Popup from "./Popup.js";
+import SidePanel from "./SidePanel.js";
+import Breadcrumbs from "./Breadcrumbs.js";
+import Pagination from "./Pagination.js";
+
+export {
+    Container,
+    Header,
+    Main,
+    Footer,
+    FooterContent,
+    View,
+    ScrollView,
+    HorizontalView,
+    Text,
+    Typography,
+    FormatJson,
+};
+
+export {
+    Link,
+    Button,
+    ButtonLink,
+    HomeLink,
+    IconButton,
+    Fab,
+    Chip,
+    Switch,
+    CheckboxButton,
+    RadioButton,
+};
+
+export {
+    List,
+    ListItem,
+    ListItemLink,
+    ListSubheader,
+    ExpansionPanel,
+    ExpandableListItem,
+    Divider,
+};
+
+export {
+    Table,
+    TableHead,
+    TableBody,
+    TableRow,
+    TableTitle,
+    TableCell,
+    TableContainer,
+    TablePagination,
+};
+
+export {
+    FormRoot,
+    FormError,
+    Fieldset,
+    FlatFieldset,
+    FieldsetArray,
+    FileArray,
+    CancelButton,
+    SubmitButton,
+    IconSubmitButton,
+    DeleteForm,
+};
+
+export { Spinner, Popup, SidePanel, Breadcrumbs, Pagination };

package/src/hooks.js

@@ -0,0 +1,6 @@
+import { useWindowDimensions } from "react-native";
+
+export function useMinWidth(minWidth) {
+    const { width } = useWindowDimensions();
+    return width >= minWidth;
+}

package/src/icons.js

@@ -0,0 +1,9 @@
+export const Add = "plus",
+    Edit = "pencil",
+    Delete = "delete",
+    Success = "check",
+    Error = "alert-circle",
+    Pending = "sync",
+    GpsStart = "crosshairs-gps",
+    GpsStop = "crosshairs-off",
+    Search = "magnify";

package/src/index.js

@@ -0,0 +1,45 @@
+import react from "@wq/react";
+import App from "./App.js";
+import * as components from "./components/index.js";
+import * as inputs from "./inputs/index.js";
+import * as icons from "./icons.js";
+import { format, parse } from "./inputs/date-utils.js";
+
+export default {
+    name: "material",
+    dependencies: [react],
+
+    config: {
+        theme: {
+            primary: "#7500ae",
+            secondary: "#0088bd",
+        },
+        inputFormat: {
+            date: "yyyy-MM-dd",
+            time: "HH:mm",
+            datetime: "yyyy-MM-dd HH:mm",
+        },
+    },
+
+    components: { App, ...components },
+    inputs: { ...inputs },
+    icons: { ...icons },
+
+    init(config) {
+        if (!config) {
+            return;
+        }
+        if (config.theme) {
+            Object.assign(this.config.theme, config.theme);
+        }
+        if (config.inputFormat) {
+            Object.assign(this.config.inputFormat, config.inputFormat);
+        }
+    },
+};
+
+export { App };
+export * from "./components/index.js";
+export * from "./inputs/index.js";
+export * from "./hooks.js";
+export { format, parse };

package/src/inputs/Checkbox.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { useField } from "formik";
+import { Checkbox as PaperCheckbox, useTheme } from "react-native-paper";
+import { Text, View } from "react-native";
+import PropTypes from "prop-types";
+
+export default function Checkbox({ name, label }) {
+    const theme = useTheme(),
+        [, meta, helpers] = useField(name),
+        { value } = meta,
+        { setValue } = helpers;
+
+    function toggleChecked() {
+        setValue(!value);
+    }
+
+    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}
+            >
+                {label}
+            </Text>
+        </View>
+    );
+}
+
+Checkbox.propTypes = {
+    name: PropTypes.string,
+    label: PropTypes.string,
+};

package/src/inputs/DateTime.js

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import DateTimePickerModal from "react-native-modal-datetime-picker";
+import { Text } 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";
+
+const displayFormat = {
+    date: (value) => parse.date(value).toLocaleDateString(),
+    time: (value) => parse.time(value).toLocaleTimeString(),
+    datetime: (value) => parse.datetime(value).toLocaleString(),
+};
+
+export default function DateTime({ name, type, label }) {
+    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 (
+        <>
+            <TextInput
+                label={label}
+                value={value ? displayFormat[type](value) : ""}
+                render={({ style, value }) => (
+                    <TouchableRipple onPress={showPicker}>
+                        <Text style={style}>{value}</Text>
+                    </TouchableRipple>
+                )}
+            />
+            <DateTimePickerModal
+                isVisible={show}
+                mode={type}
+                date={parse[type](value) || new Date()}
+                onConfirm={onConfirm}
+                onCancel={hidePicker}
+            />
+        </>
+    );
+}
+
+DateTime.propTypes = {
+    name: PropTypes.string,
+    type: PropTypes.string,
+    label: PropTypes.string,
+};

package/src/inputs/File.js

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

package/src/inputs/HelperText.js

@@ -0,0 +1,3 @@
+import { HelperText } from "react-native-paper";
+
+export default HelperText;

package/src/inputs/Hidden.js

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

package/src/inputs/Image.js

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

package/src/inputs/Input.js

@@ -0,0 +1,72 @@
+import React from "react";
+import { TextInput } from "react-native-paper";
+import { useField } from "formik";
+import { useHtmlInput } from "@wq/react";
+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, 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 (
+        <TextInput
+            label={label}
+            multiline={type === "text"}
+            keyboardType={keyboards[type] || "default"}
+            maxLength={maxLength}
+            onChangeText={handleChange}
+            onBlur={() => setTouched(true)}
+            value={formatValue}
+            style={style}
+        />
+    );
+}
+
+Input.propTypes = {
+    name: PropTypes.string,
+    type: PropTypes.string,
+    label: PropTypes.string,
+    style: PropTypes.object,
+    min: PropTypes.number,
+    max: PropTypes.number,
+};

package/src/inputs/Radio.js

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