1.4.0: fix autocomplete

n1kko777 · Jan 27, 2024 · 52aec40 · 52aec40
1 parent 3f57bbf
commit 52aec40
Show file tree

Hide file tree

Showing 10 changed files with 111 additions and 83 deletions.
diff --git a/app.json b/app.json
@@ -8,7 +8,7 @@
       "ios",
       "android"
     ],
-    "version": "1.2.3",
+    "version": "1.4.0",
     "userInterfaceStyle": "automatic",
     "orientation": "portrait",
     "icon": "./assets/logo.png",
@@ -27,11 +27,11 @@
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "ru.mncntrl.n1kko777",
-      "buildNumber": "1.2.3"
+      "buildNumber": "1.4.0"
     },
     "android": {
       "package": "ru.mncntrl.n1kko777",
-      "versionCode": 123,
+      "versionCode": 140,
       "permissions": [
         "CAMERA",
         "READ_EXTERNAL_STORAGE",

diff --git a/eas.json b/eas.json
@@ -5,18 +5,15 @@
   "build": {
     "development": {
       "developmentClient": true,
-      "distribution": "internal",
-      "channel": "development"
+      "distribution": "internal"
     },
     "preview": {
-      "channel": "preview",
-      "distribution": "internal",
+      "distribution": "internal"
+    },
+    "production": {
       "android": {
         "buildType": "apk"
       }
-    },
-    "production": {
-      "channel": "production"
     }
   },
   "submit": {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "moneycontrol-rn-app",
-  "version": "1.2.3",
+  "version": "1.4.0",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
     "start": "expo start",
@@ -38,7 +38,7 @@
     "expo-haptics": "~12.4.0",
     "expo-image-picker": "~14.3.2",
     "expo-linear-gradient": "~12.3.0",
-    "expo-updates": "~0.18.17",
+    "expo-updates": "~0.18.19",
     "jetifier": "^2.0.0",
     "moment": "^2.29.1",
     "react": "18.2.0",

diff --git a/src/components/operation/account/AccountSelector.js b/src/components/operation/account/AccountSelector.js
@@ -1,5 +1,5 @@
 import React, { useEffect, memo, useCallback, useMemo } from 'react';
-import { TouchableWithoutFeedback } from 'react-native';
+import { TouchableWithoutFeedback, View } from 'react-native';
 import { Autocomplete, AutocompleteItem, Icon } from '@ui-kitten/components';
 
 export const AccountSelector = memo(
@@ -16,6 +16,11 @@ export const AccountSelector = memo(
     const accountInput = React.useRef(null);
 
     const [value, setValue] = React.useState(current !== null ? current.title : '');
+    const [width, setWidth] = React.useState(400);
+    const handleWidth = (event) => {
+      const { width } = event.nativeEvent.layout;
+      setWidth(width);
+    };
 
     React.useEffect(() => {
       setValue(current !== null ? current.title : '');
@@ -86,19 +91,21 @@ export const AccountSelector = memo(
     );
 
     return (
-      <Autocomplete
-        value={value}
-        onChangeText={onChangeText}
-        onSelect={onSelect}
-        placeholder={placeholder}
-        style={{ marginVertical: 10 }}
-        accessoryRight={renderIcon}
-        onSubmitEditing={addAccount}
-        ref={accountInput}
-        status={isNotEmpty ? 'success' : 'danger'}
-      >
-        {renderOption}
-      </Autocomplete>
+      <View onLayout={handleWidth}>
+        <Autocomplete
+          value={value}
+          onChangeText={onChangeText}
+          onSelect={onSelect}
+          placeholder={placeholder}
+          style={{ width, marginVertical: 10 }}
+          accessoryRight={renderIcon}
+          onSubmitEditing={addAccount}
+          ref={accountInput}
+          status={isNotEmpty ? 'success' : 'danger'}
+        >
+          {renderOption}
+        </Autocomplete>
+      </View>
     );
   },
 );
diff --git a/src/components/operation/category/CategorySelector.js b/src/components/operation/category/CategorySelector.js
@@ -1,11 +1,16 @@
 import React, { memo, useCallback, useMemo } from 'react';
-import { TouchableWithoutFeedback } from 'react-native';
+import { TouchableWithoutFeedback, View } from 'react-native';
 import { Autocomplete, AutocompleteItem, Icon } from '@ui-kitten/components';
 
 export const CategorySelector = memo(
   ({ current, setCurrent, clearCurrent, categoryData, isNotEmpty, navigation }) => {
     const categoryInput = React.useRef(null);
     const [value, setValue] = React.useState(current !== null ? current.title : '');
+    const [width, setWidth] = React.useState(400);
+    const handleWidth = (event) => {
+      const { width } = event.nativeEvent.layout;
+      setWidth(width);
+    };
 
     React.useEffect(() => {
       setValue(current !== null ? current.title : '');
@@ -68,19 +73,21 @@ export const CategorySelector = memo(
     );
 
     return (
-      <Autocomplete
-        value={value}
-        onChangeText={onChangeText}
-        onSelect={onSelect}
-        placeholder="Укажите категорию"
-        style={{ marginVertical: 10 }}
-        accessoryRight={renderIcon}
-        onSubmitEditing={addCategory}
-        ref={categoryInput}
-        status={isNotEmpty ? 'success' : 'danger'}
-      >
-        {renderOption}
-      </Autocomplete>
+      <View onLayout={handleWidth}>
+        <Autocomplete
+          value={value}
+          onChangeText={onChangeText}
+          onSelect={onSelect}
+          placeholder="Укажите категорию"
+          style={{ width, marginVertical: 10 }}
+          accessoryRight={renderIcon}
+          onSubmitEditing={addCategory}
+          ref={categoryInput}
+          status={isNotEmpty ? 'success' : 'danger'}
+        >
+          {renderOption}
+        </Autocomplete>
+      </View>
     );
   },
 );
diff --git a/src/components/operation/profile/ProfileSelector.js b/src/components/operation/profile/ProfileSelector.js
@@ -1,5 +1,5 @@
 import React, { memo, useCallback, useMemo } from 'react';
-import { TouchableWithoutFeedback } from 'react-native';
+import { TouchableWithoutFeedback, View } from 'react-native';
 import { Autocomplete, AutocompleteItem, Icon } from '@ui-kitten/components';
 
 export const ProfileSelector = memo(
@@ -15,6 +15,11 @@ export const ProfileSelector = memo(
     const profileInput = React.useRef(null);
 
     const [value, setValue] = React.useState(current !== null ? current.title : '');
+    const [width, setWidth] = React.useState(400);
+    const handleWidth = (event) => {
+      const { width } = event.nativeEvent.layout;
+      setWidth(width);
+    };
 
     React.useEffect(() => {
       setValue(current !== null ? current.title : '');
@@ -82,19 +87,21 @@ export const ProfileSelector = memo(
     );
 
     return (
-      <Autocomplete
-        value={value}
-        onChangeText={onChangeText}
-        onSelect={onSelect}
-        placeholder={placeholder}
-        style={{ marginVertical: 10 }}
-        accessoryRight={value && renderIcon}
-        onSubmitEditing={addProfile}
-        ref={profileInput}
-        status={isNotEmpty ? 'success' : 'danger'}
-      >
-        {renderOption}
-      </Autocomplete>
+      <View onLayout={handleWidth}>
+        <Autocomplete
+          value={value}
+          onChangeText={onChangeText}
+          onSelect={onSelect}
+          placeholder={placeholder}
+          style={{ width, marginVertical: 10 }}
+          accessoryRight={value && renderIcon}
+          onSubmitEditing={addProfile}
+          ref={profileInput}
+          status={isNotEmpty ? 'success' : 'danger'}
+        >
+          {renderOption}
+        </Autocomplete>
+      </View>
     );
   },
 );
diff --git a/src/screens/operation/FilterOperationScreen.js b/src/screens/operation/FilterOperationScreen.js
@@ -143,14 +143,16 @@ export const FilterOperationScreen = memo(({ navigation }) => {
         />
         <Layout style={mainLayoutStyles}>
           <Layout style={secondaryLayoutStyles}>
-            <View style={viewStyles}>
-              <CustomSearchWithSelect
-                datasets={profileData}
-                dataList={profileList}
-                setDataList={setProfileList}
-                placeholder="Укажите сотрудников"
-              />
-            </View>
+            {profileData?.length > 1 ? (
+              <View style={viewStyles}>
+                <CustomSearchWithSelect
+                  datasets={profileData}
+                  dataList={profileList}
+                  setDataList={setProfileList}
+                  placeholder="Укажите сотрудников"
+                />
+              </View>
+            ) : null}
             <View style={viewStyles}>
               <CustomSearchWithSelect
                 datasets={accountData}

diff --git a/src/store/constants.js b/src/store/constants.js
@@ -5,4 +5,4 @@ const apiURL = '/api/v1';
 export const url = `${localhost}`;
 export const endpointAPI = `${url}${apiURL}`;
 
-export const APP_VERSION = '1.2.3';
+export const APP_VERSION = '1.4.0';
diff --git a/src/ui/CustomSearchWithSelect/index.js b/src/ui/CustomSearchWithSelect/index.js
@@ -9,6 +9,11 @@ export const CustomSearchWithSelect = memo(
   ({ datasets = [], dataList, setDataList, enableCreate, ...props }) => {
     const [value, setValue] = useState('');
     const [data, setData] = useState(datasets);
+    const [width, setWidth] = React.useState(400);
+    const handleWidth = (event) => {
+      const { width } = event.nativeEvent.layout;
+      setWidth(width);
+    };
 
     const onChangeText = useCallback(
       (query) => {
@@ -66,17 +71,20 @@ export const CustomSearchWithSelect = memo(
 
     return (
       <Layout style={styles.container}>
-        <Autocomplete
-          placement={PopoverPlacements.TOP}
-          onChangeText={onChangeText}
-          onSelect={onSelect}
-          value={value}
-          accessoryRight={renderIcon}
-          ref={props.forwardedRef}
-          {...props}
-        >
-          {memoAutocompleteData}
-        </Autocomplete>
+        <View onLayout={handleWidth}>
+          <Autocomplete
+            placement={PopoverPlacements.TOP}
+            onChangeText={onChangeText}
+            onSelect={onSelect}
+            value={value}
+            accessoryRight={renderIcon}
+            ref={props.forwardedRef}
+            style={{ width }}
+            {...props}
+          >
+            {memoAutocompleteData}
+          </Autocomplete>
+        </View>
         {memoDataList.length ? (
           <ScrollView style={styles.scrollView}>
             <View style={styles.view}>{memoDataList}</View>