@boneframework/native-components 1.0.4 → 1.0.6

package/components/forms/ErrorMessage.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import {StyleSheet} from "react-native";
+
+import Text from '../Text'
+
+function ErrorMessage({error, visible}) {
+    if (!visible || !error) return null;
+
+    return (
+        <Text style={styles.error}>{error}</Text>
+    );
+}
+
+const styles = StyleSheet.create({
+    error: {
+        color: 'tomato'
+    }
+});
+
+export default ErrorMessage;

package/components/forms/Form.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import {Formik} from "formik";
+import {View} from "react-native";
+
+function Form({initialValues, onSubmit, validationSchema, children}) {
+    return (
+        <Formik
+            initialValues={initialValues}
+            onSubmit={onSubmit}
+            validationSchema={validationSchema}
+        >
+            {() => (
+                <View>
+                    {children}
+                </View>
+            )}
+        </Formik>
+    );
+}
+
+export default Form;

package/components/forms/FormDateTimePicker.js

@@ -0,0 +1,31 @@
+import RNDateTimePicker from '@react-native-community/datetimepicker';
+import React from 'react';
+import {Field, useFormikContext} from "formik";
+import DateTimePicker from "../DateTimePicker";
+import {StyleSheet} from "react-native";
+import useStyle from "../../hooks/useStyle";
+
+function FormDateTimePicker ({...props}) {
+
+    const { values, setFieldValue } = useFormikContext();
+    const style = useStyle();
+
+    const styles = StyleSheet.create({
+        picker: {
+            flex: 1,
+            width: '50%',
+            backgroundColor: style.backgroundColor,
+            borderRadius: 25,
+            flexDirection: 'row',
+            padding: 15,
+            marginVertical: 10,
+            marginHorizontal: 10,
+        }
+    });
+
+    return <Field style={styles.picker} component={DateTimePicker}  value={values[props.name]} {...props}  onChange={(event, value) => {
+        setFieldValue(props.name, new Date(value));
+    }} />
+}
+
+export default FormDateTimePicker;

package/components/forms/FormField.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import {useFormikContext} from "formik";
+import {StyleSheet, View} from "react-native";
+
+import TextInput from "../TextInput";
+import ErrorMessage from "./ErrorMessage";
+import useStyle from "../../hooks/useStyle";
+
+function FormField({name, width,  ...otherProps}) {
+    const {setFieldTouched, handleChange, errors, values, touched} = useFormikContext();
+
+    return (
+        <View>
+            <TextInput
+                onChangeText={handleChange(name)}
+                onBlur={() => setFieldTouched(name)}
+                value={values[name]}
+                width={width}
+                {...otherProps}
+            />
+            <ErrorMessage error={errors[name]} visible={touched[name]}/>
+        </View>
+    );
+}
+
+export default FormField;

package/components/forms/FormImagePicker.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import {View} from "react-native";
+import {useFormikContext} from "formik";
+
+import ErrorMessage from './ErrorMessage'
+import ImageInputList from '../ImageInputList'
+
+function FormImagePicker({ name }) {
+    const {setFieldValue, touched, values, errors} = useFormikContext();
+    const imageUris = values[name]
+    const handleAdd = (uri) => {
+        setFieldValue(name, [...imageUris, uri])
+    };
+    const handleRemove = (uri) => {
+        setFieldValue(name, imageUris.filter(imageUri => imageUri !== uri))
+    };
+
+    return (
+        <View>
+            <ImageInputList
+                imageUris={imageUris}
+                onAddImage={handleAdd}
+                onRemoveImage={handleRemove}
+            />
+            <ErrorMessage error={errors[name]} visible={touched[name]} />
+        </View>
+    );
+}
+
+export default FormImagePicker;

package/components/forms/FormPicker.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import {View} from "react-native";
+
+import Picker from '../Picker'
+import PickerItemComponent from '../PickerItemComponent'
+import ErrorMessage from "./ErrorMessage";
+import {useFormikContext} from "formik";
+
+function FormPicker({items, name, PickerItemComponent, placeholder, width, numColumns, ...otherProps}) {
+    const {setFieldValue, touched, values, errors} = useFormikContext();
+
+    return (
+        <View>
+            <Picker
+                items={items}
+                numColumns={numColumns}
+                onSelectItem={(value) => {
+                    setFieldValue(name, value);
+                }}
+                PickerItemComponent={PickerItemComponent}
+                placeholder={placeholder}
+                selectedItem={values[name]} {...otherProps}
+                width={width}
+            />
+            <ErrorMessage error={errors[name]} visible={touched[name]} />
+        </View>
+    );
+}
+
+export default FormPicker;

package/components/forms/SubmitButton.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import Button from "../Button";
+import {useFormikContext} from "formik";
+
+function SubmitButton({title, ...otherProps}) {
+    const {handleSubmit} = useFormikContext();
+
+    return (
+        <Button color="primary" title={title} onPress={handleSubmit} {...otherProps} />
+    );
+}
+
+export default SubmitButton;

package/components/forms/index.js

@@ -0,0 +1,7 @@
+export { default as Form} from './Form';
+export { default as FormDateTimePicker} from './FormDateTimePicker';
+export { default as FormField} from './FormField';
+export { default as FormImagePicker} from './FormImagePicker';
+export { default as FormPicker} from './FormPicker';
+export { default as ErrorMessage} from './ErrorMessage';
+export { default as SubmitButton} from './SubmitButton';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boneframework/native-components",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Expo Components for Bone Framework",
   "main": "src/Bone.ts",
   "scripts": {

package/screens/RegisterScreen.tsx

@@ -3,11 +3,11 @@ import React, {useState} from 'react';
 import {Image, ImageBackground, Keyboard, StyleSheet, TouchableOpacity, View} from "react-native";
 import * as Yup from 'yup'
 
-import ActivityIndicator from "@/components/ActivityIndicator";
-import useApi from "@/hooks/useApi";
-import usersApi from '@/api/users';
+import ActivityIndicator from "../components/ActivityIndicator";
+import useApi from "../hooks/useApi";
+import usersApi from '../api/users';
 import {ErrorMessage, FormField, Form, SubmitButton} from '../components/forms'
-import Icon from "@/components/Icon";
+import Icon from "../components/Icon";
 
 const validationSchema = Yup.object().shape({
     email: Yup.string().required().email().label('Email'),

package/screens/WelcomeScreen.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {Image, ImageBackground, StyleSheet, Text, View} from "react-native";
 import {exchangeCodeAsync, makeRedirectUri, useAuthRequest} from "expo-auth-session";
 
-import Button from '@/components/Button'
+import Button from '../components/Button'
 import colors from '@/config/colors'
 
 function WelcomeScreen({loginOnPress = () => {}, registerOnPress = () => {}}) {