Add recent screens chips to our demo app for easy access (#3261)

* Add recent screens chips to our demo app for easy access

* Get rid of AUTO_SET_DEFAULT

Author: ethanshar

demo/src/screens/MainScreen.js

@@ -7,6 +7,7 @@ import {Navigation} from 'react-native-navigation';
 import {
   Assets,
   Colors,
+  Typography,
   Spacings,
   View,
   Text,
@@ -19,7 +20,7 @@ import {
   Dividers
 } from 'react-native-ui-lib'; //eslint-disable-line
 import {navigationData} from './MenuStructure';
-import Storage, {DEFAULT_SCREEN} from '../storage';
+import Storage, {DEFAULT_SCREEN, RECENT_SCREENS} from '../storage';
 
 const settingsIcon = require('../assets/icons/settings.png');
 const chevronIcon = require('../assets/icons/chevronRight.png');
@@ -52,12 +53,15 @@ class MainScreen extends Component {
   constructor(props) {
     super(props);
 
+    const recentScreens = Storage.getString(RECENT_SCREENS);
+
     const data = props.navigationData || navigationData;
     this.state = {
       currentPage: 0,
       filteredNavigationData: data,
       chipsLabels: _.map(data, section => section.title),
       sectionsData: _.map(data, section => ({title: section.title, data: section.screens})),
+      recentScreens: recentScreens ? JSON.parse(recentScreens) : [],
       selectedSection: 0,
       faderStart: false,
       faderEnd: true
@@ -155,8 +159,21 @@ class MainScreen extends Component {
     this.openScreen({customValue: item});
   };
 
+  updateRecentScreens(screen) {
+    const {recentScreens} = this.state;
+    recentScreens.unshift(screen);
+    const uniqueArr = [...new Set(recentScreens.map(item => JSON.stringify(item)))].map(item => JSON.parse(item));
+
+    Storage.set(RECENT_SCREENS, JSON.stringify(uniqueArr));
+
+    this.setState({
+      recentScreens: uniqueArr
+    });
+  }
+
   openScreen = ({customValue: row}) => {
     this.closeSearchBox();
+    this.updateRecentScreens(row);
 
     setTimeout(() => {
       this.pushScreen(row);
@@ -303,6 +320,34 @@ class MainScreen extends Component {
     return <SectionHeader section={section}/>;
   };
 
+  renderRecentScreens = () => {
+    const {recentScreens} = this.state;
+
+    if (recentScreens.length > 0) {
+      return (
+        <View row paddingV-s2 paddingH-s5 centerV>
+          <Text text90BO marginR-s2>
+            Recent:
+          </Text>
+          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+            {recentScreens.map(screen => {
+              return (
+                <Chip
+                  marginR-s2
+                  label={screen.title}
+                  key={screen.title}
+                  onPress={this.openScreen}
+                  customValue={screen}
+                  labelStyle={Typography.text100BO}
+                />
+              );
+            })}
+          </ScrollView>
+        </View>
+      );
+    }
+  };
+
   renderItem = ({item}) => {
     const {renderItem} = this.props;
 
@@ -337,12 +382,10 @@ class MainScreen extends Component {
 
   render() {
     const {containerStyle} = this.props;
-    const {filteredNavigationData, filterText} = this.state;
+    const {filteredNavigationData, filterText, chipsLabels, sectionsData} = this.state;
     const showNoResults = _.isEmpty(filteredNavigationData) && !!filterText;
     const showResults = !_.isEmpty(filteredNavigationData) && !!filterText;
     const showSectionList = !filterText;
-    const chipsLabels = this.state.chipsLabels;
-    const sectionsData = this.state.sectionsData;
 
     return (
       <View testID="demo_main_screen" flex style={containerStyle} useSafeArea>
@@ -366,6 +409,8 @@ class MainScreen extends Component {
           </View>
         )}
 
+        {this.renderRecentScreens()}
+
         {showSectionList && (
           <SectionList
             sections={sectionsData}

demo/src/screens/SettingsScreen.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {StyleSheet, I18nManager} from 'react-native';
-import {Colors, View, Text, Picker, Incubator, Switch} from 'react-native-ui-lib'; //eslint-disable-line
+import {Colors, View, Text, Picker, Incubator, Switch, Spacings} from 'react-native-ui-lib'; //eslint-disable-line
 import {navigationData} from './MenuStructure';
 import Storage, {DEFAULT_SCREEN, IS_RTL} from '../storage';
 
@@ -66,10 +66,15 @@ class SettingsScreen extends Component {
     const {extraSettingsUI} = this.props;
     const filteredScreens = _.filter(screens, screen => !_.isUndefined(screen.value));
 
+    const _extraSettingsUI = extraSettingsUI?.();
+
     return (
       <View flex padding-25 bg-grey80>
-        <View flex>
-          <Text text60>Default Screen</Text>
+        <Text text40 marginB-s5>
+          Settings
+        </Text>
+
+        <View style={styles.block}>
           <Text text70 marginB-20>
             Set default screen to open on app startup
           </Text>
@@ -82,31 +87,27 @@ class SettingsScreen extends Component {
             onChange={this.setDefaultScreen}
             items={filteredScreens}
           />
+        </View>
 
-          <View style={{borderWidth: 1, borderColor: Colors.grey70, marginTop: 40}}>
-            <View style={[{padding: 5, borderBottomWidth: 1}, styles.block]}>
-              <Text text80 grey20>
-                Current layout direction
-              </Text>
-            </View>
-            <View center margin-5 padding-10>
-              <Text text70>{isRTL ? 'RIGHT to LEFT' : 'LEFT to RIGHT'}</Text>
-            </View>
-
-            <View row spread centerV style={[{padding: 12, borderTopWidth: 1}, styles.block]}>
-              <Switch value={isRTL} onValueChange={this.onDirectionChange}/>
-              <Text text80 grey20>
-                Force RTL
-              </Text>
-            </View>
+        <View style={styles.block} marginT-s4>
+          <View row spread centerV>
+            <Text text80 grey20>
+              Force RTL
+            </Text>
+            <Switch value={isRTL} onValueChange={this.onDirectionChange}/>
           </View>
 
-          {extraSettingsUI?.()}
+          <View center marginT-5>
+            <Text text70>{isRTL ? 'RIGHT to LEFT' : 'LEFT to RIGHT'}</Text>
+          </View>
         </View>
 
-        <Text text30 grey10>
-          Settings
-        </Text>
+        {_extraSettingsUI && (
+          <View marginT-s4 style={styles.block}>
+            {_extraSettingsUI}
+          </View>
+        )}
+
         <Incubator.Toast
           visible={showRefreshMessage}
           message={`Default screen set to: ${defaultScreen?.label}. Please refresh the app.`}
@@ -118,8 +119,10 @@ class SettingsScreen extends Component {
 
 const styles = StyleSheet.create({
   block: {
-    borderColor: Colors.grey70,
-    backgroundColor: Colors.grey80
+    borderWidth: 1,
+    borderColor: Colors.$outlineNeutral,
+    backgroundColor: Colors.grey80,
+    padding: Spacings.s3
   }
 });
 

demo/src/storage.ts

@@ -3,5 +3,7 @@ const Storage = new MMKV();
 
 export const DEFAULT_SCREEN = 'uilib.defaultScreen';
 export const IS_RTL = 'uilib.isRTL';
+export const RECENT_SCREENS = 'uilib.recentScreens';
+
 
 export default Storage;