[#5] feat - ajusting create marker modal

Co-authored-by: Alexandre Miguel <aleronupe@gmail.com>
Signed-off-by: Guilherme Banci <guibanci@gmail.com>

__tests__/App-test.js

@@ -4,11 +4,11 @@
 
 import 'react-native';
 import React from 'react';
-import App from '../App';
+import renderer from 'react-test-renderer';
+import Map from '../src/pages/Map';
 
 // Note: test renderer must be required after react-native.
-import renderer from 'react-test-renderer';
 
 it('renders correctly', () => {
-  renderer.create(<App />);
+  renderer.create(<Map />);
 });

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  preset: 'react-native',
+};

package.json

@@ -12,6 +12,7 @@
     "postinstall": "patch-package"
   },
   "dependencies": {
+    "@gorhom/bottom-sheet": "^4",
     "@react-native-community/async-storage": "^1.12.1",
     "@react-native-community/clipboard": "^1.5.1",
     "@react-native-masked-view/masked-view": "^0.2.2",

patches/rn-material-ui-textfield+1.0.5.patch

@@ -0,0 +1,26 @@
+diff --git a/node_modules/rn-material-ui-textfield/src/components/outline/index.js b/node_modules/rn-material-ui-textfield/src/components/outline/index.js
+index 8d0d8c1..660a28e 100644
+--- a/node_modules/rn-material-ui-textfield/src/components/outline/index.js
++++ b/node_modules/rn-material-ui-textfield/src/components/outline/index.js
+@@ -2,7 +2,8 @@ import PropTypes from 'prop-types'
+ import React, { Fragment, PureComponent } from 'react'
+ import { View, Animated, I18nManager } from 'react-native'
+
+-import styles, { borderRadius } from './styles'
++import styles from './styles'
++const borderRadius = 4
+
+ export default class Line extends PureComponent {
+   static defaultProps = {
+diff --git a/node_modules/rn-material-ui-textfield/src/components/outline/styles.js b/node_modules/rn-material-ui-textfield/src/components/outline/styles.js
+index a6e0d0f..64b407b 100644
+--- a/node_modules/rn-material-ui-textfield/src/components/outline/styles.js
++++ b/node_modules/rn-material-ui-textfield/src/components/outline/styles.js
+@@ -1,6 +1,6 @@
+ import { StyleSheet, Platform } from 'react-native'
+
+-export const borderRadius = 4
++export const borderRadius = 10
+
+ let containerStyle = {
+   position: 'absolute',

src/components/CreatePoint/index.js

@@ -1,31 +1,70 @@
-import React, {useRef, useMemo} from 'react';
+import React, {useRef, useMemo, useState} from 'react';
 import BottomSheet, {BottomSheetScrollView} from '@gorhom/bottom-sheet';
 import PropTypes from 'prop-types';
-import {Text, Btn} from 'components/UI';
+import {Text, Btn, Input, View} from 'components/UI';
 import theme from 'theme/theme';
+import required from 'validators/required';
 
-import {Container, Option} from './styles';
+import {Container, Icon} from './styles';
 
-const CreatePoint = ({locationSelected, show}) => {
-  const snapPoints = useMemo(() => ['10%', '50%', '95%'], []);
+const CreatePoint = ({locationSelected, show, onClose}) => {
+  const snapPoints = useMemo(() => ['12%', '50%', '95%'], []);
   const sheetRef = useRef(null);
 
+  const [name, setName] = useState({
+    isValid: false,
+    value: '',
+  });
+
+  const [description, setDescription] = useState({
+    isValid: false,
+    value: '',
+  });
+
   const onSave = () => {
+    sheetRef.current.close();
+    setTimeout(() => {
+      onClose();
+    }, 1000);
     return locationSelected;
   };
 
+  const pointName = () => (
+    <View p={3}>
+      <Input
+        label="Digite aqui o nome do novo ponto"
+        onChange={(value) => setName(value)}
+        value={name.value}
+        autoCapitalize="words"
+        onFocus={() => sheetRef.current.snapToIndex(2)}
+        rules={[required]}
+      />
+    </View>
+  );
+
   if (show) {
     return (
       <>
         <Container>
-          <Option size={50} onPress={() => sheetRef.current.snapToIndex(0)}>
-            <Text color={theme.colors.white}>Teste</Text>
-          </Option>
+          <Icon size={40} name="map-marker-alt" />
         </Container>
-        <BottomSheet ref={sheetRef} index={0} snapPoints={snapPoints}>
+        <BottomSheet
+          ref={sheetRef}
+          index={0}
+          snapPoints={snapPoints}
+          handleComponent={pointName}>
           <BottomSheetScrollView>
-            <Text>Teste</Text>
-            <Btn onPress={onSave} title="Salvar ponto" />
+            <View px={3}>
+              <View py={3}>
+                <Input
+                  label="Digite aqui a descrição do novo ponto"
+                  onChange={(value) => setDescription(value)}
+                  value={description.value}
+                  multiline
+                />
+              </View>
+              <Btn onPress={onSave} title="Salvar ponto" />
+            </View>
           </BottomSheetScrollView>
         </BottomSheet>
       </>

src/components/CreatePoint/styles.js

@@ -3,15 +3,13 @@ import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome5';
 import theme from 'theme/theme';
 
 export const Icon = styled(FontAwesomeIcon).attrs({
-  color: theme.colors.white,
+  color: theme.colors.black,
 })``;
 
 export const Container = styled.View`
   position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  margin: 20px;
+  top: 50%;
+  left: 47%;
   align-items: center;
   justify-content: center;
 `;

src/components/UI/Input/index.js

@@ -2,7 +2,7 @@ import React, {useRef, useState, useEffect} from 'react';
 import {PixelRatio} from 'react-native';
 import PropTypes from 'prop-types';
 import theme from 'theme/theme';
-import {TextField} from 'rn-material-ui-textfield';
+import {OutlinedTextField} from 'rn-material-ui-textfield';
 
 const Input = ({
   label,
@@ -28,6 +28,8 @@ const Input = ({
   externalError,
   multiline,
   autoCorrect,
+  onFocus,
+  style,
 }) => {
   const inputEl = useRef(null);
 
@@ -78,7 +80,7 @@ const Input = ({
   }, [blurredOnce, value]);
 
   return (
-    <TextField
+    <OutlinedTextField
       label={label}
       keyboardType={hide ? 'default' : keyboardType}
       returnKeyType={returnKeyType}
@@ -98,13 +100,15 @@ const Input = ({
       onBlur={() => {
         setBlurredOnce(true);
       }}
+      onFocus={onFocus}
       formatText={inputMask}
       onError={onError}
       error={externalError || validationError}
       ref={inputEl}
       renderRightAccessory={rightAccessory}
       multiline={multiline}
       autoCorrect={autoCorrect}
+      style={style}
     />
   );
 };
@@ -133,6 +137,7 @@ Input.propTypes = {
   multiline: PropTypes.bool,
   autoCorrect: PropTypes.bool,
   errorMessage: PropTypes.bool,
+  onFocus: PropTypes.func,
 };
 
 Input.defaultProps = {
@@ -156,6 +161,7 @@ Input.defaultProps = {
   externalError: '',
   multiline: false,
   autoCorrect: false,
+  onFocus: () => {},
 };
 
 export default Input;

src/pages/Map/index.js

@@ -2,8 +2,8 @@ import React, {useState} from 'react';
 import {View} from 'components/UI';
 import useLocation from 'services/useLocation';
 import Fabs from 'components/Fabs';
-import {MapView} from './styles';
 import CreatePoint from 'components/CreatePoint';
+import {MapView} from './styles';
 
 const Map = () => {
   const {location} = useLocation();
@@ -38,7 +38,11 @@ const Map = () => {
           }}
         />
         <Fabs actions={actions} alwaysOpenActions={alwaysOpenActions} />
-        <CreatePoint locationSelected={location} show={showPointCreation} />
+        <CreatePoint
+          locationSelected={location}
+          show={showPointCreation}
+          onClose={() => setShowPointCreation(false)}
+        />
       </View>
     );
   }

src/pages/Settings/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import {View, Text} from 'components/UI';
+
+const Page2 = () => {
+  return (
+    <View flex={1} alignItems="center" justifyContent="center">
+      <Text>Page 2</Text>
+    </View>
+  );
+};
+
+export default Page2;

src/pages/Settings/styles.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components/native';
+
+export const Container = styled.View`
+  padding: 20px;
+`;
+
+export const FirstInput = styled.View`
+  flex-direction: row;
+  align-items: center;
+`;
+
+export const InputView = styled.View`
+  flex: 1;
+`;

yarn.lock

@@ -759,6 +759,24 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@gorhom/bottom-sheet@^4":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@gorhom/bottom-sheet/-/bottom-sheet-4.0.3.tgz#465d28bd39ff19e8ba248b514427c0d790d5de30"
+  integrity sha512-aIStbi8FxquhH4FRuzyQBau8QUPWQljkrq7kaSo+BFanuAoO0B/YpfakxlDSgum+m7p5jXDopj2GU6cLzw9+qw==
+  dependencies:
+    "@gorhom/portal" "^1.0.7"
+    invariant "^2.2.4"
+    nanoid "^3.1.20"
+    react-native-redash "^16.1.1"
+
+"@gorhom/portal@^1.0.7":
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/@gorhom/portal/-/portal-1.0.8.tgz#1582f7f2ce288e4622382c19ca4a5dff9f56c11a"
+  integrity sha512-APBRdSEPzxK5lOHU5zFoc9y938ACWBzkNBSDajubvtw5XGIWsxggCSyateDnIVs94LTuw1hWyYvM4OsYeepBQw==
+  dependencies:
+    immer "^9.0.3"
+    nanoid "^3.1.23"
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -1691,6 +1709,11 @@ abort-controller@^3.0.0:
   dependencies:
     event-target-shim "^5.0.0"
 
+abs-svg-path@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/abs-svg-path/-/abs-svg-path-0.1.1.tgz#df601c8e8d2ba10d4a76d625e236a9a39c2723bf"
+  integrity sha1-32Acjo0roQ1KdtYl4japo5wnI78=
+
 absolute-path@^0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/absolute-path/-/absolute-path-0.0.0.tgz#a78762fbdadfb5297be99b15d35a785b2f095bf7"
@@ -4412,6 +4435,11 @@ image-size@^0.6.0:
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.6.3.tgz#e7e5c65bb534bd7cdcedd6cb5166272a85f75fb2"
   integrity sha512-47xSUiQioGaB96nqtp5/q55m0aBQSQdyIloMOc/x+QVTDZLNmXE892IIDrJ0hM1A5vcNUDD5tDffkSP5lCaIIA==
 
+immer@^9.0.3:
+  version "9.0.6"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.6.tgz#7a96bf2674d06c8143e327cbf73539388ddf1a73"
+  integrity sha512-G95ivKpy+EvVAnAab4fVa4YGYn24J1SpEktnJX7JJ45Bd7xqME/SCplFzYFmTbrkwZbQ4xJK1xMTUYBkN6pWsQ==
+
 import-fresh@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
@@ -6176,7 +6204,7 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.15.0.tgz#3f34a473ff18e15c1b5626b62903b5ad6e665fee"
   integrity sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==
 
-nanoid@^3.1.15:
+nanoid@^3.1.15, nanoid@^3.1.20, nanoid@^3.1.23:
   version "3.1.25"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.25.tgz#09ca32747c0e543f0e1814b7d3793477f9c8e152"
   integrity sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==
@@ -6294,6 +6322,13 @@ normalize-path@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
+normalize-svg-path@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/normalize-svg-path/-/normalize-svg-path-1.1.0.tgz#0e614eca23c39f0cffe821d6be6cd17e569a766c"
+  integrity sha512-r9KHKG2UUeB5LoTouwDzBy2VxXlHsiM6fyLQvnJa0S5hrhzqElH/CH7TUGhT1fVvIYBIKf3OpY4YJ4CK+iaqHg==
+  dependencies:
+    svg-arc-to-cubic-bezier "^3.0.0"
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -6638,6 +6673,11 @@ parse-node-version@^1.0.0:
   resolved "https://registry.yarnpkg.com/parse-node-version/-/parse-node-version-1.0.1.tgz#e2b5dbede00e7fa9bc363607f53327e8b073189b"
   integrity sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==
 
+parse-svg-path@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/parse-svg-path/-/parse-svg-path-0.1.2.tgz#7a7ec0d1eb06fa5325c7d3e009b859a09b5d49eb"
+  integrity sha1-en7A0esG+lMlx9PgCbhZoJtdSes=
+
 parse5-htmlparser2-tree-adapter@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz#2cdf9ad823321140370d4dbf5d3e92c7c8ddc6e6"
@@ -7109,6 +7149,15 @@ react-native-reanimated@^2.2.0:
     mockdate "^3.0.2"
     string-hash-64 "^1.0.3"
 
+react-native-redash@^16.1.1:
+  version "16.2.2"
+  resolved "https://registry.yarnpkg.com/react-native-redash/-/react-native-redash-16.2.2.tgz#99ecb49810aab8ed778b6d8c8726a29117065d96"
+  integrity sha512-febggvSI93H796DS1ufNNf/8FQMw21UTiMYBRscmhzyIamcC194oNamW1UtbreRSC1OweKBDEbyxPSugiuncmQ==
+  dependencies:
+    abs-svg-path "^0.1.1"
+    normalize-svg-path "^1.0.1"
+    parse-svg-path "^0.1.2"
+
 react-native-safe-area-context@^3.1.9:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-3.3.0.tgz#6e0b45baa031589ec9c54f8359ace166a36aa5e5"
@@ -8270,6 +8319,11 @@ supports-hyperlinks@^2.0.0:
     has-flag "^4.0.0"
     supports-color "^7.0.0"
 
+svg-arc-to-cubic-bezier@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/svg-arc-to-cubic-bezier/-/svg-arc-to-cubic-bezier-3.2.0.tgz#390c450035ae1c4a0104d90650304c3bc814abe6"
+  integrity sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g==
+
 svg-parser@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"