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

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",
     "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",
+        "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/App.js

@@ -1,11 +1,20 @@
 import React, { useMemo } from "react";
 import { App as DefaultApp, usePlugin } from "@wq/react";
 import {
-    DefaultTheme,
-    DarkTheme,
+    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]),
@@ -26,9 +35,18 @@ export default function App() {
     );
 }
 
-function createTheme({ type, primary, secondary, background }) {
+function createTheme({
+    type = "light",
+    version = 3,
+    primary,
+    secondary,
+    background,
+}) {
     const colors = {},
-        base = type === "dark" ? DarkTheme : DefaultTheme;
+        base = THEMES[`${type}-${version}`];
+    if (!base) {
+        console.warn(`Unknown base theme type=${type} version=${version}`);
+    }
     if (primary) {
         colors.primary = primary;
     }
@@ -41,7 +59,7 @@ function createTheme({ type, primary, secondary, background }) {
     return {
         ...base,
         colors: {
-            ...base.colors,
+            ...(base || {}).colors,
             ...colors,
         },
     };

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

@@ -18,7 +18,7 @@ export default function IconButton({ icon, onClick, onPress, color, ...rest }) {
         <PaperIconButton
             icon={Icon}
             onPress={onPress}
-            color={color}
+            iconColor={color}
             {...rest}
         />
     );

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 };