Release statistics; various fixes

tubignat · Feb 27, 2021 · 07b06cd · 07b06cd
1 parent d3c1c11
commit 07b06cd
Show file tree

Hide file tree

Showing 12 changed files with 46 additions and 53 deletions.
diff --git a/.expo/packager-info.json b/.expo/packager-info.json
@@ -1,5 +1,5 @@
 {
-  "expoServerPort": null,
+  "expoServerPort": 19000,
   "expoServerNgrokUrl": null,
   "packagerNgrokUrl": null,
   "ngrokPid": null,

diff --git a/App.tsx b/App.tsx
@@ -163,7 +163,6 @@ export default class App extends Component<{}, {
                 component: Statistics,
                 icon: 'pie-chart',
                 label: this.application.locale.statisticsPageTitle,
-                hidden: !this.devSettings.isFlagEnabled(FeatureFlag.Statistics)
             },
             {name: 'Settings', component: Settings, icon: 'setting', label: this.application.locale.settingsPageTitle},
         ]

diff --git a/src/domain/repositories/DevSettingsRepository.ts b/src/domain/repositories/DevSettingsRepository.ts
@@ -1,6 +1,8 @@
 import {AsyncStorage} from 'react-native';
 
-export enum FeatureFlag { Statistics, TestFlag }
+export enum FeatureFlag {
+    TestFlag = "TEST_FLAG"
+}
 
 export type DevSettings = {
     devMenuVisible: boolean

diff --git a/src/interface/DevSettingsState.ts b/src/interface/DevSettingsState.ts
@@ -19,11 +19,13 @@ export class DevSettingsState {
 
     public allFeatureFlags = (): { name: string, value: FeatureFlag }[] => {
         return Object.keys(FeatureFlag)
-            .filter(key => typeof FeatureFlag[key as any] === "number")
+            // @ts-ignore
+            .filter(key => typeof FeatureFlag[key] === "string")
             .map(key => {
                 return {
                     name: key,
-                    value: FeatureFlag[key as any] as unknown as FeatureFlag
+                    // @ts-ignore
+                    value: FeatureFlag[key] as unknown as FeatureFlag
                 }
             })
     }

diff --git a/src/interface/DeviceState.tsx b/src/interface/DeviceState.tsx
@@ -8,6 +8,8 @@ export class DeviceStateImpl {
     public screenSize: ScreenSize = this.width < 350
         ? 'S'
         : this.height > 800 ? 'L' : 'M'
+
+    public keyboardVerticalOffset: number = this.screenSize === 'L' ? 64 : 40
 }
 
 export type ScreenSize = 'S' | 'M' | 'L' // S ~ iPhone SE 1st generation, M ~ iPhone 7/8, L ~ iPhone 12 Mini and bigger

diff --git a/src/interface/color/DarkColorScheme.ts b/src/interface/color/DarkColorScheme.ts
@@ -16,5 +16,5 @@ export const darkColorScheme: ColorScheme = {
     buttonBackground: 'rgb(72, 72, 74)',
     buttonBackgroundPressed: 'rgb(50, 50, 54)',
     buttonBorder: 'rgb(44, 44, 46)',
-    categoryItemBackground: 'rgb(72, 72, 74)'
+    categoryItemBackground: 'rgb(72, 72, 74)',
 }
diff --git a/src/interface/color/LightColorScheme.ts b/src/interface/color/LightColorScheme.ts
@@ -16,5 +16,5 @@ export const lightColorScheme: ColorScheme = {
     buttonBackground: 'white',
     buttonBorder: 'rgb(229, 229, 234)',
     buttonBackgroundPressed: 'rgb(199, 199, 204)',
-    categoryItemBackground: 'rgb(242, 242, 247)'
+    categoryItemBackground: 'rgb(242, 242, 247)',
 }
diff --git a/src/interface/components/Settings/BudgetSettings/FinancesSettingsPanel.tsx b/src/interface/components/Settings/BudgetSettings/FinancesSettingsPanel.tsx
@@ -18,15 +18,14 @@ export const FinancesSettingsPanel = observer(({onClose}: { onClose: () => void
     const offset = isBigScreen ? 75 : 50;
 
     return <SlidingUpPanel colorScheme={application.colorScheme} offsetTop={offset} onClose={onClose}>
-        <View style={{paddingBottom: 70, marginHorizontal: isSmallScreen ? -8 : 0}}>
+            <View style={{paddingBottom: 70, marginHorizontal: isSmallScreen ? -8 : 0}}>
 
-            <View style={styles.headerContainer}>
-                <Text style={styles.header}>{application.locale.financesHeader}</Text>
-                <Text style={styles.additionalText}>{application.locale.financesDescriptor}</Text>
+                <View style={styles.headerContainer}>
+                    <Text style={styles.header}>{application.locale.financesHeader}</Text>
+                    <Text style={styles.additionalText}>{application.locale.financesDescriptor}</Text>
+                </View>
+                <BudgetSettings/>
             </View>
-
-            <BudgetSettings />
-        </View>
     </SlidingUpPanel>
 });
 

diff --git a/...interface/components/Settings/CategoriesSettings/CategoryDetails/ModalWithContextMenu.tsx b/...interface/components/Settings/CategoriesSettings/CategoryDetails/ModalWithContextMenu.tsx
@@ -60,7 +60,7 @@ export function ModalWithContextMenu(props: IModalWithContextMenuProps) {
     </Animated.View>
 
     function open() {
-        Animated.spring(translateY, {toValue: 0, bounciness: 2, useNativeDriver: false}).start();
+        Animated.spring(translateY, {toValue: 0, bounciness: 1, speed: 25, useNativeDriver: false}).start();
     }
 
     function close(duration: number) {

diff --git a/src/interface/components/Settings/UserPreferencesSettings/DevSettingsPanel.tsx b/src/interface/components/Settings/UserPreferencesSettings/DevSettingsPanel.tsx
@@ -30,7 +30,7 @@ export const DevSettingsPanel = observer(({onClose}: { onClose: () => void }) =>
                 {
                     devSettings.allFeatureFlags().map(flag =>
                         <View key={flag.name} style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
-                            <Text style={{fontSize: 20, paddingVertical: 12}}>{flag.name}</Text>
+                            <Text style={styles.flagLabel}>{flag.name}</Text>
                             <Switch
                                 checked={devSettings.isFlagEnabled(flag.value)}
                                 onChange={() => {
@@ -86,7 +86,7 @@ const TestDataSettings = observer(() => {
                 disabled={false}
                 fontSize={16}
                 scheme={app.colorScheme}
-                text={isClearingData ? 'Wait...' : 'Clear all data' }
+                text={isClearingData ? 'Wait...' : 'Clear all data'}
                 onPress={() => showAlert('Clear all storages?', () => {
                     setIsClearingData(true)
                     AsyncStorage.clear().then(() => {
@@ -128,6 +128,12 @@ const getStyles = (scheme: ColorScheme) => StyleSheet.create({
     subheader: {
         fontSize: 24,
         fontWeight: 'bold',
-        marginBottom: 24
+        marginBottom: 24,
+        color: scheme.primaryText
+    },
+    flagLabel: {
+        fontSize: 20,
+        paddingVertical: 12,
+        color: scheme.primaryText
     }
 })
diff --git a/src/interface/components/Statistics/Statistics.tsx b/src/interface/components/Statistics/Statistics.tsx
@@ -10,6 +10,8 @@ import {DistributionByDaysOfWeek} from "./DistributionByDaysOfWeek";
 import {Gap} from "../common/Gap";
 import {DaysWithPositiveLimitToDaysWithNegativeLimitRatio} from "./DaysWithPositiveLimitToDaysWithNegativeLimitRatio";
 import {SpendingsStat} from "./SpendingsStat";
+import {colorNames} from "react-native-svg/lib/typescript/lib/extract/extractColor";
+import {SegmentedControl} from "@ant-design/react-native";
 
 export const Statistics = observer(() => {
     const application = useContextUnsafe(ApplicationContext);
@@ -21,7 +23,8 @@ export const Statistics = observer(() => {
         <ScrollView>
             <PageHeader header={application.locale.statisticsPageTitle} scheme={application.colorScheme}/>
             <View style={{paddingHorizontal: 16}}>
-                <SegmentedControlIOS
+                <SegmentedControl
+                    tintColor={application.colorScheme.primary}
                     values={segments}
                     selectedIndex={segments.findIndex(value => value === selectedSegment)}
                     onValueChange={setSelectedSegment}
@@ -38,29 +41,6 @@ export const Statistics = observer(() => {
                     selectedSegment === segments[0] && <DaysWithPositiveLimitToDaysWithNegativeLimitRatio/>
                 }
             </View>
-            {/*<View style={{*/}
-            {/*    marginBottom: 50,*/}
-            {/*    backgroundColor: '',*/}
-            {/*    borderRadius: 16,*/}
-            {/*}}>*/}
-            {/*    <LineChart*/}
-            {/*        data={data2}*/}
-            {/*        width={Dimensions.get("window").width - 40}*/}
-            {/*        height={256}*/}
-            {/*        xLabelsOffset={-10}*/}
-            {/*        verticalLabelRotation={30}*/}
-            {/*        chartConfig={commonChartConfig}*/}
-            {/*        formatYLabel={(value) => {*/}
-            {/*            const amount = Number(value);*/}
-            {/*            return amount < 1000*/}
-            {/*                ? value*/}
-            {/*                : amount < 1000000 ? `${(amount / 1000)}K` : `${amount / 1000000}M`*/}
-            {/*        }}*/}
-            {/*        style={{borderRadius: 16}}*/}
-            {/*        fromZero={true}*/}
-            {/*        bezier*/}
-            {/*    />*/}
-            {/*</View>*/}
         </ScrollView>
     </Page>
 })
diff --git a/src/interface/components/common/SlidingUpPanel.tsx b/src/interface/components/common/SlidingUpPanel.tsx
@@ -9,10 +9,11 @@ import {
     StyleSheet,
     PanResponderInstance,
     ScrollView,
-    GestureResponderEvent
+    GestureResponderEvent, KeyboardAvoidingView
 } from 'react-native';
 import {ModalStackState} from '../../ModalStackState';
 import {ColorScheme} from '../../color/ColorScheme';
+import {DeviceState} from "../../DeviceState";
 
 const Window = Dimensions.get('window');
 
@@ -160,16 +161,18 @@ class SlidingUpPanel extends React.Component<ISlidingUpPanelProps, ISlidingUpPan
                             </View>
                         </View>
                         <View style={{height: Window.height - offsetTop - 7}} {...scrollViewResponders}>
-                            <ScrollView
-                                showsVerticalScrollIndicator={false}
-                                style={{paddingHorizontal: 20, paddingVertical: 40}}
-                                onScroll={event => this.setState({scroll: event.nativeEvent.contentOffset.y})}
-                                scrollEventThrottle={16}
-                            >
-                                <View onStartShouldSetResponder={() => true}>
-                                    {this.props.children}
-                                </View>
-                            </ScrollView>
+                            <KeyboardAvoidingView behavior='padding' keyboardVerticalOffset={DeviceState.keyboardVerticalOffset}>
+                                <ScrollView
+                                    showsVerticalScrollIndicator={false}
+                                    style={{paddingHorizontal: 20, paddingVertical: 40}}
+                                    onScroll={event => this.setState({scroll: event.nativeEvent.contentOffset.y})}
+                                    scrollEventThrottle={16}
+                                >
+                                    <View onStartShouldSetResponder={() => true}>
+                                        {this.props.children}
+                                    </View>
+                                </ScrollView>
+                            </KeyboardAvoidingView>
                         </View>
                     </Animated.View>
                 </View>