TheGitDevelopers · patryksliwinski · Mar 11, 2020
diff --git a/App.js b/App.js
@@ -8,13 +8,14 @@ import { createStore } from 'redux';
 import Basic from './src/screens/register/basic';
 import PictureUpload from './src/screens/register/pictureUpload';
 import OtherInfo from './src/screens/register/otherInfo';
-import { screenWithoutMenu } from './src/tools/showMenu';
+import { screenWithoutMenu, screenWithMenu } from './src/tools/showMenu';
 import reducer from './src/redux/reducers/reducer';
 import EducationInfo from './src/screens/register/educationInfo';
 import AddFriends from './src/screens/register/addFriends';
 import Login from './src/screens/login/login';
 import NewPassword from './src/screens/login/newPassword';
 import ForgotPassword from './src/screens/login/forgotPassword';
+import CreateGroup from './src/screens/group/createGroup';
 
 const Stack = createStackNavigator();
 
@@ -39,16 +40,8 @@ const App = () => {
         <Provider store={store}>
           <NavigationContainer>
             <Stack.Navigator>
-              <Stack.Screen
-                name="Register"
-                component={Basic}
-                options={screenWithoutMenu}
-              />
-              <Stack.Screen
-                name="Login"
-                component={Login}
-                options={screenWithoutMenu}
-              />
+              <Stack.Screen name="Register" component={Basic} options={screenWithoutMenu} />
+              <Stack.Screen name="Login" component={Login} options={screenWithoutMenu} />
               <Stack.Screen
                 name="ForgotPassword"
                 component={ForgotPassword}
@@ -64,21 +57,14 @@ const App = () => {
                 component={PictureUpload}
                 options={screenWithoutMenu}
               />
-              <Stack.Screen
-                name="OtherInfo"
-                component={OtherInfo}
-                options={screenWithoutMenu}
-              />
+              <Stack.Screen name="OtherInfo" component={OtherInfo} options={screenWithoutMenu} />
               <Stack.Screen
                 name="EducationInfo"
                 component={EducationInfo}
                 options={screenWithoutMenu}
               />
-              <Stack.Screen
-                name="AddFriends"
-                component={AddFriends}
-                options={screenWithoutMenu}
-              />
+              <Stack.Screen name="AddFriends" component={AddFriends} options={screenWithoutMenu} />
+              <Stack.Screen name="CreateGroup" component={CreateGroup} options={screenWithMenu} />
             </Stack.Navigator>
           </NavigationContainer>
         </Provider>

diff --git a/src/assets/texts/group.js b/src/assets/texts/group.js
@@ -0,0 +1,31 @@
+const CREATE_GROUP_HEADER = 'Stwórz swoją grupę';
+const CREATE_GROUP_GROUP_NAME = 'Nazwa grupy';
+const CREATE_GROUP_LOCATION = 'Lokalizacja';
+const CREATE_GROUP_MEETING_TIME = 'Data i czas';
+const CREATE_GROUP_PRIVATE_GROUP = 'Prywatna grupa';
+const CREATE_GROUP_PUBLIC_GROUP = 'Publiczna grupa';
+const CREATE_GROUP_PRIVACY_PLACEHOLDER = 'Rodzaj prywatności';
+const CREATE_GROUP_ONLY_MEN = 'Tylko mężczyźni';
+const CREATE_GROUP_ONLY_WOMEN = 'Tylko kobiety';
+const CREATE_GROUP_ALL = 'Wszyscy';
+const CREATE_GROUP_ACCESSIBILITY_PLACEHOLDER = 'Dostępnosć grupy';
+const CREATE_GROUP_MEMBERS_LIMIT = 'Limit miejsc';
+const CREATE_GROUP_MEMBERS = 'Członkowie';
+const CREATE_GROUP_CREATE_GROUP = 'Utwórz grupę';
+
+export {
+  CREATE_GROUP_ACCESSIBILITY_PLACEHOLDER,
+  CREATE_GROUP_ALL,
+  CREATE_GROUP_CREATE_GROUP,
+  CREATE_GROUP_GROUP_NAME,
+  CREATE_GROUP_LOCATION,
+  CREATE_GROUP_MEETING_TIME,
+  CREATE_GROUP_MEMBERS,
+  CREATE_GROUP_MEMBERS_LIMIT,
+  CREATE_GROUP_HEADER,
+  CREATE_GROUP_ONLY_MEN,
+  CREATE_GROUP_ONLY_WOMEN,
+  CREATE_GROUP_PRIVACY_PLACEHOLDER,
+  CREATE_GROUP_PRIVATE_GROUP,
+  CREATE_GROUP_PUBLIC_GROUP,
+};
diff --git a/src/components/common/counter/counter.jsx b/src/components/common/counter/counter.jsx
@@ -0,0 +1,191 @@
+import React, { useState, useEffect } from 'react';
+import { View, TextInput, Text, TouchableOpacity } from 'react-native';
+import { SimpleLineIcons, MaterialCommunityIcons, Ionicons, FontAwesome } from '@expo/vector-icons';
+import PropTypes from 'prop-types';
+import styles from './styles';
+import {
+  MAIN_TEXT_COLOR,
+  MAIN_THEME_COLOR,
+  SECONDARY_TEXT_COLOR,
+} from '../../../constants/theme/colors';
+import validate from '../../../tools/validators/validate';
+
+const iconStyle = {
+  width: 34,
+  textAlign: 'center',
+};
+
+const touchableIconStyle = {
+  width: 34,
+  padding: 7,
+  textAlign: 'center',
+};
+
+const Counter = ({
+  isReadOnly,
+  placeholder,
+  min,
+  max,
+  maxLength,
+  iconName,
+  iconType,
+  iconColor,
+  style,
+  onChange,
+  required,
+}) => {
+  const [value, onChangeValue] = useState(0);
+  const [focusColor, setFocusColor] = useState(null);
+  const [isTouched, setIsTouched] = useState(false);
+  const [errorMsg, setErrorMsg] = useState(null);
+
+  useEffect(() => {
+    if (errorMsg !== null && required) {
+      setErrorMsg(validate(value, 'text'));
+    }
+  }, [value]);
+
+  const handleChange = (v) => {
+    let newVal = v;
+    if (!v.length) newVal = 0;
+    if (!new RegExp(/^(0|[1-9][0-9]*)$/).test(newVal)) return;
+    if (parseInt(newVal) > max || parseInt(newVal) < min) return;
+    if (onChange) {
+      onChange(newVal);
+    }
+    onChangeValue(newVal);
+  };
+
+  const handleFocus = () => {
+    setFocusColor(MAIN_THEME_COLOR);
+    setIsTouched(true);
+  };
+
+  const handleBlur = () => {
+    setFocusColor(iconColor);
+    if (required) setErrorMsg(validate(value, 'text'));
+  };
+
+  const handlePlus = () => {
+    let newVal = parseInt(value) + 1;
+    if (parseInt(newVal) > max) newVal = `${max}`;
+    if (onChange) {
+      onChange(newVal);
+    }
+    onChangeValue(`${newVal}`);
+  };
+  const handleMinus = () => {
+    let newVal = parseInt(value) - 1;
+    if (parseInt(newVal) < min) newVal = `${min}`;
+    if (onChange) {
+      onChange(newVal);
+    }
+    onChangeValue(`${newVal}`);
+  };
+
+  const handleIconType = () => {
+    if (iconType === 'mci')
+      return (
+        <MaterialCommunityIcons
+          name={iconName}
+          style={iconStyle}
+          size={34}
+          color={focusColor !== null ? focusColor : iconColor}
+        />
+      );
+    if (iconType === 'ion')
+      return (
+        <Ionicons
+          name={iconName}
+          style={iconStyle}
+          size={34}
+          color={focusColor !== null ? focusColor : iconColor}
+        />
+      );
+    if (iconType === 'fa')
+      return (
+        <FontAwesome
+          style={iconStyle}
+          name={iconName}
+          size={34}
+          color={focusColor !== null ? focusColor : iconColor}
+        />
+      );
+    return (
+      <SimpleLineIcons
+        name={iconName}
+        style={iconStyle}
+        size={24}
+        color={focusColor !== null ? focusColor : iconColor}
+      />
+    );
+  };
+
+  return (
+    <>
+      <View style={[styles.container, style]}>
+        {iconName ? <>{handleIconType()}</> : null}
+        <TextInput
+          style={styles.input}
+          onChangeText={(v) => handleChange(v)}
+          value={value}
+          maxLength={maxLength}
+          editable={!isReadOnly}
+          placeholder={placeholder}
+          onFocus={() => handleFocus()}
+          onBlur={() => handleBlur()}
+          keyboardType={'numeric'}
+        />
+        <TouchableOpacity onPress={() => handleMinus()}>
+          <MaterialCommunityIcons
+            style={touchableIconStyle}
+            size={27}
+            name="minus"
+            color={SECONDARY_TEXT_COLOR}
+          />
+        </TouchableOpacity>
+        <TouchableOpacity onPress={() => handlePlus()}>
+          <MaterialCommunityIcons
+            style={touchableIconStyle}
+            size={27}
+            name="plus"
+            color={MAIN_THEME_COLOR}
+          />
+        </TouchableOpacity>
+      </View>
+      {isTouched ? (
+        <>{errorMsg === null ? null : <Text style={styles.error}>{errorMsg}</Text>}</>
+      ) : null}
+    </>
+  );
+};
+
+Counter.propTypes = {
+  placeholder: PropTypes.string,
+  isReadOnly: PropTypes.bool,
+  min: PropTypes.number,
+  max: PropTypes.number,
+  maxLength: PropTypes.number,
+  iconName: PropTypes.string,
+  iconType: PropTypes.string,
+  iconColor: PropTypes.string,
+  style: PropTypes.objectOf(PropTypes.string),
+  onChange: PropTypes.func,
+  required: PropTypes.bool,
+};
+
+Counter.defaultProps = {
+  placeholder: '',
+  isReadOnly: false,
+  maxLength: 300,
+  iconName: null,
+  iconType: null,
+  iconColor: MAIN_TEXT_COLOR,
+  style: null,
+  onChange: null,
+  required: false,
+  min: 0,
+  max: Infinity,
+};
+
+export default Counter;
diff --git a/src/components/common/counter/styles.js b/src/components/common/counter/styles.js
@@ -0,0 +1,45 @@
+import { StyleSheet } from 'react-native';
+import {
+  SECONDARY_THEME_COLOR,
+  MAIN_TEXT_COLOR,
+  ERROR_COLOR,
+} from '../../../constants/theme/colors';
+import {
+  NORMAL_TEXT_SIZE,
+  VALIDATOR_TEXT_SIZE,
+  NORMAL_TEXT_FONT_FAMILY,
+} from '../../../constants/theme/colors';
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: SECONDARY_THEME_COLOR,
+    borderRadius: 6,
+    flexDirection: 'row',
+    paddingHorizontal: 20,
+  },
+  input: {
+    fontSize: NORMAL_TEXT_SIZE,
+    fontFamily: NORMAL_TEXT_FONT_FAMILY,
+    flex: 1,
+    padding: 14,
+    color: MAIN_TEXT_COLOR,
+  },
+  touchableIcon: {
+    width: 34,
+    padding: 7,
+    textAlign: 'center',
+  },
+  error: {
+    color: ERROR_COLOR,
+    width: '100%',
+    paddingHorizontal: 2,
+    paddingTop: 6,
+    textAlign: 'right',
+    fontSize: VALIDATOR_TEXT_SIZE,
+  },
+});
+
+export default styles;