@wq/material-native 2.0.0-alpha.0

package/src/inputs/Select.js

@@ -0,0 +1,52 @@
+import React from "react";
+import RNPickerSelect from "react-native-picker-select";
+import { TextInput, useTheme } from "react-native-paper";
+import { useField } from "formik";
+import PropTypes from "prop-types";
+
+export default function Select({ name, choices, label }) {
+    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 (
+        <TextInput
+            label={label}
+            value={"-"}
+            render={() => (
+                <RNPickerSelect
+                    value={value}
+                    onValueChange={setValue}
+                    items={choices.map(({ name, label }) => ({
+                        value: name,
+                        label,
+                    }))}
+                    style={styles}
+                />
+            )}
+        />
+    );
+}
+
+Select.propTypes = {
+    name: PropTypes.string,
+    label: PropTypes.string,
+    choices: PropTypes.arrayOf(PropTypes.object),
+};

package/src/inputs/Toggle.js

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

package/src/inputs/date-utils.js

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

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