@wq/material-native 2.0.0 → 3.0.0-alpha.1

package/src/components/ScrollView.js

@@ -2,8 +2,9 @@ import React from "react";
 import { ScrollView as PaperScrollView } from "react-native";
 import { useTheme } from "react-native-paper";
 import PropTypes from "prop-types";
+import { withWQ } from "@wq/react";
 
-export default function ScrollView({ style, ...rest }) {
+function ScrollView({ style, ...rest }) {
     const theme = useTheme();
     return (
         <PaperScrollView
@@ -20,3 +21,5 @@ export default function ScrollView({ style, ...rest }) {
 ScrollView.propTypes = {
     style: PropTypes.object,
 };
+
+export default withWQ(ScrollView);

package/src/components/SidePanel.js

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from "react";
-import { useComponents } from "@wq/react";
+import { useComponents, withWQ } 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({
+function SidePanel({
     anchor: anchorSpec = "top-left",
     children,
     compactChildren,
@@ -92,3 +92,5 @@ SidePanel.propTypes = {
     onChange: PropTypes.func,
     anchor: PropTypes.string,
 };
+
+export default withWQ(SidePanel);

package/src/components/Skeleton.js

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

package/src/components/Switch.js

@@ -1,8 +1,9 @@
 import React from "react";
 import { Switch as PaperSwitch, useTheme } from "react-native-paper";
 import PropTypes from "prop-types";
+import { withWQ } from "@wq/react";
 
-export default function Switch({ checked: value, color, ...rest }) {
+function Switch({ checked: value, color, ...rest }) {
     const theme = useTheme();
     if (color === "primary") {
         color = theme.colors.primary;
@@ -16,3 +17,5 @@ Switch.propTypes = {
     checked: PropTypes.bool,
     color: PropTypes.string,
 };
+
+export default withWQ(Switch);

package/src/components/TabGroup.js

@@ -1,15 +1,15 @@
 import React, { useState } from "react";
-import { useIconComponents } from "@wq/react";
+import { useWQ, withWQ } 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 }) {
+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(),
+        icons = useWQ("icons", true),
         buttons = tabs.map((tab) => ({
             value: tab.props.value,
             label: tab.props.label,
@@ -36,3 +36,5 @@ TabGroup.propTypes = {
     children: PropTypes.node,
     style: PropTypes.object,
 };
+
+export default withWQ(TabGroup);

package/src/components/TabItem.js

@@ -1,14 +1,18 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-export default function TabItem({ value, icon, label, children }) {
+export default function TabItem({ wq, value, icon, label, children }) {
     /* eslint no-unused-vars: off */
 
     // All rendering handled by TabGroup
+    if (wq) {
+        console.warn("wq prop has no effect in TabItem");
+    }
     return null;
 }
 
 TabItem.propTypes = {
+    wq: PropTypes.object,
     value: PropTypes.string,
     icon: PropTypes.string,
     label: PropTypes.string,

package/src/components/Table.js

@@ -1,3 +1,4 @@
 import { DataTable } from "react-native-paper";
+import { withWQ } from "@wq/react";
 
-export default DataTable;
+export default withWQ(DataTable);

package/src/components/TableBody.js

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

package/src/components/TableCell.js

@@ -2,8 +2,9 @@ import React from "react";
 import { View } from "react-native";
 import { DataTable } from "react-native-paper";
 import PropTypes from "prop-types";
+import { withWQ } from "@wq/react";
 
-export default function TableCell({ interactive, children, ...rest }) {
+function TableCell({ interactive, children, ...rest }) {
     const Cell = interactive ? InteractiveCell : DataTable.Cell;
     return <Cell {...rest}>{children}</Cell>;
 }
@@ -23,3 +24,5 @@ function InteractiveCell(props) {
 }
 
 TableCell.propTypes = { interactive: PropTypes.bool, children: PropTypes.node };
+
+export default withWQ(TableCell);

package/src/components/TableContainer.js

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

package/src/components/TableHead.js

@@ -1,3 +1,4 @@
 import { DataTable } from "react-native-paper";
+import { withWQ } from "@wq/react";
 
-export default DataTable.Header;
+export default withWQ(DataTable.Header);

package/src/components/TableRow.js

@@ -1,3 +1,4 @@
 import { DataTable } from "react-native-paper";
+import { withWQ } from "@wq/react";
 
-export default DataTable.Row;
+export default withWQ(DataTable.Row);

package/src/components/TableTitle.js

@@ -1,3 +1,4 @@
 import { DataTable } from "react-native-paper";
+import { withWQ } from "@wq/react";
 
-export default DataTable.Title;
+export default withWQ(DataTable.Title);

package/src/components/Text.js

@@ -1,3 +1,4 @@
 import { Text } from "react-native";
+import { withWQ } from "@wq/react";
 
-export default Text;
+export default withWQ(Text);

package/src/components/Typography.js

@@ -8,6 +8,7 @@ import {
     Caption,
 } from "react-native-paper";
 import PropTypes from "prop-types";
+import { withWQ } from "@wq/react";
 
 const variants = {
     default: Text,
@@ -25,7 +26,7 @@ const variants = {
     overline: Caption,
 };
 
-export default function Typography({ variant, children, ...rest }) {
+function Typography({ variant, children, ...rest }) {
     const Component = variants[variant] || variants.default;
     if (variant === "overline" && typeof children === "string") {
         children = children.toUpperCase();
@@ -37,3 +38,5 @@ Typography.propTypes = {
     variant: PropTypes.string,
     children: PropTypes.node,
 };
+
+export default withWQ(Typography);

package/src/components/View.js

@@ -1,3 +1,4 @@
 import { View } from "react-native";
+import { withWQ } from "@wq/react";
 
-export default View;
+export default withWQ(View);

package/src/components/index.js

@@ -45,19 +45,21 @@ 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 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";
 
+import Badge from "./Badge.js";
+import Grid from "./Grid.js";
+import Menu from "./Menu.js";
+import MenuItem from "./MenuItem.js";
+
+import Alert from "./Alert.js";
+import CircularProgress from "./CircularProgress.js";
+import LinearProgress from "./LinearProgress.js";
+import Skeleton from "./Skeleton.js";
+
 export {
     Container,
     Header,
@@ -98,7 +100,6 @@ export {
     ListItemLink,
     ListSubheader,
     Accordion,
-    Accordion as ExpansionPanel,
     ExpandableListItem,
     Divider,
 };
@@ -114,13 +115,8 @@ export {
     TablePagination,
 };
 
-export {
-    FormRoot,
-    FormError,
-    CancelButton,
-    SubmitButton,
-    IconSubmitButton,
-    DeleteForm,
-};
+export { Popup, SidePanel, Breadcrumbs, Pagination };
+
+export { Badge, Grid, Menu, MenuItem };
 
-export { Spinner, Popup, SidePanel, Breadcrumbs, Pagination };
+export { Alert, CircularProgress, LinearProgress, Skeleton };

package/src/icons.js

@@ -5,6 +5,7 @@ export const Add = "plus",
     Error = "alert-circle",
     Pending = "sync",
     Close = "close",
+    Cancel = "cancel",
     Expand = "chevron-down",
     Collapse = "chevron-up",
     PanelOpen = "chevron-right",
@@ -12,12 +13,12 @@ export const Add = "plus",
     GpsStart = "crosshairs-gps",
     GpsStop = "crosshairs-off",
     Search = "magnify",
-    List = "view-list",
+    ListIcon = "view-list",
     Detail = "information",
     Map = "map",
     Home = "home",
     BreadcrumbSeparator = "chevron-right",
-    Menu = "menu",
+    MenuIcon = "menu",
     Login = "login",
     Logout = "logout",
     Config = "cog",

package/src/index.js

@@ -1,45 +1,5 @@
-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 };
+import Root from "./Root.js";
+export { Root };
 export * from "./components/index.js";
-export * from "./inputs/index.js";
+export * from "./icons.js";
 export * from "./hooks.js";
-export { format, parse };

package/src/App.js

@@ -1,66 +0,0 @@
-import React, { useMemo } from "react";
-import { App as DefaultApp, usePlugin } from "@wq/react";
-import {
-    MD2LightTheme,
-    MD3LightTheme,
-    MD2DarkTheme,
-    MD3DarkTheme,
-    Provider as PaperProvider,
-} from "react-native-paper";
-
-const THEMES = {
-    "light-2": MD2LightTheme,
-    "light-3": MD3LightTheme,
-    "dark-2": MD2DarkTheme,
-    "dark-3": MD3DarkTheme,
-};
-
-export default function App() {
-    const { theme: configTheme } = usePlugin("material").config,
-        theme = useMemo(() => createTheme(configTheme), [configTheme]),
-        options = useMemo(
-            () => ({
-                navigator: { theme },
-                screen: {
-                    cardStyle: { backgroundColor: theme.colors.background },
-                },
-            }),
-            [theme]
-        );
-
-    return (
-        <PaperProvider theme={theme}>
-            <DefaultApp options={options} />
-        </PaperProvider>
-    );
-}
-
-function createTheme({
-    type = "light",
-    version = 3,
-    primary,
-    secondary,
-    background,
-}) {
-    const colors = {},
-        base = THEMES[`${type}-${version}`];
-    if (!base) {
-        console.warn(`Unknown base theme type=${type} version=${version}`);
-    }
-    if (primary) {
-        colors.primary = primary;
-    }
-    if (secondary) {
-        colors.accent = secondary;
-    }
-    if (background) {
-        colors.background = background;
-    }
-    return {
-        ...base,
-        colors: {
-            ...(base || {}).colors,
-            ...colors,
-        },
-    };
-}

package/src/components/CancelButton.js

@@ -1,3 +0,0 @@
-import ButtonLink from "./ButtonLink.js";
-
-export default ButtonLink;

package/src/components/DeleteForm.js

@@ -1,64 +0,0 @@
-import React from "react";
-import Alert from "react-native";
-import { useComponents, useMessages } from "@wq/react";
-import PropTypes from "prop-types";
-
-export default function DeleteForm({ action }) {
-    const { Form, SubmitButton, View, HorizontalView } = useComponents(),
-        {
-            CONFIRM_DELETE,
-            CONFIRM_DELETE_TITLE,
-            CONFIRM_DELETE_OK,
-            CONFIRM_DELETE_CANCEL,
-        } = useMessages();
-
-    async function confirmSubmit() {
-        return new Promise((resolve) => {
-            Alert.alert(
-                CONFIRM_DELETE_TITLE,
-                CONFIRM_DELETE,
-                [
-                    {
-                        text: CONFIRM_DELETE_CANCEL,
-                        onPress() {
-                            resolve(false);
-                        },
-                        style: "cancel",
-                    },
-                    {
-                        text: CONFIRM_DELETE_OK,
-                        onPress() {
-                            resolve(true);
-                        },
-                        style: "destructive",
-                    },
-                ],
-                {
-                    onDismiss() {
-                        resolve(false);
-                    },
-                }
-            );
-        });
-    }
-
-    return (
-        <Form
-            action={action}
-            method="DELETE"
-            backgroundSync={false}
-            onSubmit={confirmSubmit}
-        >
-            <HorizontalView>
-                <View />
-                <SubmitButton icon="delete" variant="text" color="secondary">
-                    Delete
-                </SubmitButton>
-            </HorizontalView>
-        </Form>
-    );
-}
-
-DeleteForm.propTypes = {
-    action: PropTypes.string,
-};

package/src/components/FormError.js

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

package/src/components/FormRoot.js

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

package/src/components/IconSubmitButton.js

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

package/src/components/Spinner.js

@@ -1,16 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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/inputs/Checkbox.js

@@ -1,47 +0,0 @@
-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, hint }) {
-    const theme = useTheme(),
-        [, meta, helpers] = useField(name),
-        { value } = meta,
-        { setValue } = helpers;
-
-    function toggleChecked() {
-        setValue(!value);
-    }
-
-    return (
-        <View>
-            <View
-                style={{
-                    flexDirection: "row",
-                    alignItems: "center",
-                    padding: 8,
-                }}
-            >
-                <PaperCheckbox.Android
-                    status={value ? "checked" : "unchecked"}
-                    onPress={toggleChecked}
-                />
-                <Text
-                    style={{ color: theme.colors.text, fontSize: 16, flex: 1 }}
-                    onPress={toggleChecked}
-                >
-                    {label}
-                </Text>
-            </View>
-            <HelperText name={name} hint={hint} />
-        </View>
-    );
-}
-
-Checkbox.propTypes = {
-    name: PropTypes.string,
-    label: PropTypes.string,
-    hint: PropTypes.string,
-};

package/src/inputs/DateTime.js

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

package/src/inputs/Fieldset.js

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