unicorn-demo-app 6.15.2 → 6.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unicorn-demo-app",
-  "version": "6.15.2",
+  "version": "6.16.0",
   "main": "src/index.js",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
   "license": "MIT",

package/src/configurations.js

@@ -3,10 +3,12 @@ import {Assets, Colors, Typography, Spacings, Incubator} from 'react-native-ui-l
 export const loadDemoConfigurations = () => {
   Assets.loadAssetsGroup('icons.demo', {
     chevronDown: require('./assets/icons/chevronDown.png'),
+    chevronRight: require('./assets/icons/chevronRight.png'),
     add: require('./assets/icons/add.png'),
     camera: require('./assets/icons/cameraSelected.png'),
     close: require('./assets/icons/close.png'),
     dashboard: require('./assets/icons/dashboard.png'),
+    drag: require('./assets/icons/drag.png'),
     image: require('./assets/icons/image.png'),
     plus: require('./assets/icons/plus.png'),
     refresh: require('./assets/icons/refresh.png'),

package/src/index.js

@@ -111,6 +111,9 @@ module.exports = {
       get SkeletonViewScreen() {
         return require('./screens/componentScreens/SkeletonViewScreen').default;
       },
+      get SortableListScreen() {
+        return require('./screens/componentScreens/SortableListScreen').default;
+      },
       get StepperScreen() {
         return require('./screens/componentScreens/StepperScreen').default;
       },

package/src/screens/MenuStructure.js

@@ -83,7 +83,8 @@ export const navigationData = {
       {title: 'Basic List', tags: 'basic list', screen: 'unicorn.lists.BasicListScreen'},
       {title: 'Contacts List', tags: 'list contacts', screen: 'unicorn.lists.ContactsListScreen'},
       {title: 'Conversation List', tags: 'list conversation', screen: 'unicorn.lists.ConversationListScreen'},
-      {title: 'Drawer', tags: 'drawer', screen: 'unicorn.components.DrawerScreen'}
+      {title: 'Drawer', tags: 'drawer', screen: 'unicorn.components.DrawerScreen'},
+      {title: 'SortableList', tags: 'sortable list drag', screen: 'unicorn.components.SortableListScreen'}
     ]
   },
   LayoutsAndTemplates: {
@@ -96,6 +97,7 @@ export const navigationData = {
       {title: 'Modal', tags: 'modal topbar screen', screen: 'unicorn.screens.ModalScreen'},
       {title: 'StateScreen', tags: 'empty state screen', screen: 'unicorn.screens.EmptyStateScreen'},
       {title: 'TabController', tags: 'tabbar controller native', screen: 'unicorn.components.TabControllerScreen'},
+      {title: 'Timeline', tags: 'timeline', screen: 'unicorn.components.TimelineScreen'},
       {
         title: 'withScrollEnabler',
         tags: 'scroll enabled withScrollEnabler',

package/src/screens/componentScreens/DialogScreen.js

@@ -50,7 +50,7 @@ export default class DialogScreen extends Component {
     ];
 
     this.state = {
-      panDirection: PanningProvider.Directions.DOWN,
+      panDirection: Dialog.directions.DOWN,
       position: 'bottom',
       scroll: this.SCROLL_TYPE.NONE,
       showHeader: true,
@@ -114,7 +114,7 @@ export default class DialogScreen extends Component {
       return (
         <Text color={Colors.$textDangerLight}>It is recommended to have pannable header with scrollable content</Text>
       );
-    } else if (showHeader && panDirection !== PanningProvider.Directions.DOWN) {
+    } else if (showHeader && panDirection !== Dialog.directions.DOWN) {
       return <Text color={Colors.$textDangerLight}>It is recommended to have pannable header with direction=down</Text>;
     }
   };
@@ -270,10 +270,10 @@ Scroll: ${scroll}`;
             <Text $textDefault>Panning Direction:</Text>
             <View row marginV-10>
               <RadioButton value={null} label={'None'}/>
-              <RadioButton value={PanningProvider.Directions.UP} label={'Up'} marginL-10/>
-              <RadioButton value={PanningProvider.Directions.DOWN} label={'Down'} marginL-10/>
-              <RadioButton value={PanningProvider.Directions.LEFT} label={'Left'} marginL-10/>
-              <RadioButton value={PanningProvider.Directions.RIGHT} label={'Right'} marginL-10/>
+              <RadioButton value={Dialog.directions.UP} label={'Up'} marginL-10/>
+              <RadioButton value={Dialog.directions.DOWN} label={'Down'} marginL-10/>
+              <RadioButton value={Dialog.directions.LEFT} label={'Left'} marginL-10/>
+              <RadioButton value={Dialog.directions.RIGHT} label={'Right'} marginL-10/>
             </View>
           </RadioGroup>
 

package/src/screens/componentScreens/PickerScreen.tsx

@@ -22,6 +22,7 @@ import {longOptions} from './PickerScreenLongOptions';
 
 const tagIcon = require('../../assets/icons/tags.png');
 const dropdown = require('../../assets/icons/chevronDown.png');
+const dropdownIcon = <Icon source={dropdown} tintColor={Colors.$iconDefault}/>;
 
 const contacts = _.map(contactsData, (c, index) => ({...c, value: index, label: c.name}));
 
@@ -56,7 +57,7 @@ export default class PickerScreen extends Component {
   dialogHeader: DialogProps['renderPannableHeader'] = props => {
     const {title} = props;
     return (
-      <Text margin-15 text60>
+      <Text margin-15 text60 $textDefault>
         {title}
       </Text>
     );
@@ -76,7 +77,7 @@ export default class PickerScreen extends Component {
         height="45%"
         bottom
         useSafeArea
-        containerStyle={{backgroundColor: Colors.white}}
+        containerStyle={{backgroundColor: Colors.$backgroundDefault}}
         renderPannableHeader={this.dialogHeader}
         panDirection={PanningProvider.Directions.DOWN}
         pannableHeaderProps={{title: 'Custom modal'}}
@@ -90,7 +91,9 @@ export default class PickerScreen extends Component {
     return (
       <ScrollView keyboardShouldPersistTaps="always">
         <View flex padding-20>
-          <Text text40>Picker</Text>
+          <Text text40 $textDefault>
+            Picker
+          </Text>
           <Picker
             placeholder="Favorite Language"
             floatingPlaceholder
@@ -103,6 +106,7 @@ export default class PickerScreen extends Component {
             searchPlaceholder={'Search a language'}
             searchStyle={{color: Colors.blue30, placeholderTextColor: Colors.grey50}}
             // onSearchChange={value => console.warn('value', value)}
+            migrateTextField
           >
             {_.map(longOptions, option => (
               <Picker.Item key={option.value} value={option} label={''} disabled={option.disabled}/>
@@ -115,7 +119,8 @@ export default class PickerScreen extends Component {
             onChange={items => this.setState({languages: items})}
             mode={Picker.modes.MULTI}
             selectionLimit={3}
-            rightIconSource={dropdown}
+            trailingAccessory={dropdownIcon}
+            migrateTextField
           >
             {_.map(options, option => (
               <Picker.Item key={option.value} value={option} label={''} disabled={option.disabled}/>
@@ -152,12 +157,13 @@ export default class PickerScreen extends Component {
           </Picker>
 
           <Picker
-            title="Custom modal"
+            label="Custom modal"
             placeholder="Pick multiple Languages"
             value={this.state.customModalValues}
             onChange={items => this.setState({customModalValues: items})}
             mode={Picker.modes.MULTI}
-            rightIconSource={dropdown}
+            trailingAccessory={dropdownIcon}
+            migrateTextField
             renderCustomModal={this.renderDialog}
           >
             {_.map(options, option => (
@@ -171,7 +177,7 @@ export default class PickerScreen extends Component {
             ))}
           </Picker>
 
-          <Text marginB-10 text70>
+          <Text marginB-10 text70 $textDefault>
             Custom Picker:
           </Text>
           <Picker
@@ -180,8 +186,12 @@ export default class PickerScreen extends Component {
             renderPicker={(_value?: any, label?: string) => {
               return (
                 <View row>
-                  <Icon style={{marginRight: 1, height: 16, resizeMode: 'contain'}} source={tagIcon}/>
-                  <Text grey10 text80>
+                  <Icon
+                    style={{marginRight: 1, height: 16, resizeMode: 'contain'}}
+                    source={tagIcon}
+                    tintColor={Colors.$iconDefault}
+                  />
+                  <Text $textDefault text80>
                     {label} Posts
                   </Text>
                 </View>
@@ -193,11 +203,11 @@ export default class PickerScreen extends Component {
             ))}
           </Picker>
 
-          <Text text60 marginT-s5>
+          <Text text60 marginT-s5 $textDefault>
             Migrated Pickers
           </Text>
 
-          <Text marginT-20 marginB-10 text70>
+          <Text marginT-20 marginB-10 text70 $textDefault>
             Custom Picker Items:
           </Text>
           <Picker
@@ -214,12 +224,12 @@ export default class PickerScreen extends Component {
                   {contact ? (
                     <>
                       <Avatar size={30} source={{uri: contact?.thumbnail}}/>
-                      <Text text70 marginL-10>
+                      <Text text70 marginL-10 $textDefault>
                         {contact?.name}
                       </Text>
                     </>
                   ) : (
-                    <Text text70 grey30>
+                    <Text text70 $textNeutral>
                       Pick a contact
                     </Text>
                   )}
@@ -239,7 +249,7 @@ export default class PickerScreen extends Component {
                       style={{
                         height: 56,
                         borderBottomWidth: 1,
-                        borderColor: Colors.grey80
+                        borderColor: Colors.$backgroundNeutral
                       }}
                       paddingH-15
                       row
@@ -248,11 +258,11 @@ export default class PickerScreen extends Component {
                     >
                       <View row centerV>
                         <Avatar size={35} source={{uri: contact?.thumbnail}}/>
-                        <Text marginL-10 text70 grey10>
+                        <Text marginL-10 text70 $textDefault>
                           {contact?.name}
                         </Text>
                       </View>
-                      {props.isSelected && <Icon source={Assets.icons.check}/>}
+                      {props.isSelected && <Icon source={Assets.icons.check} tintColor={Colors.$iconDefault}/>}
                     </View>
                   );
                 }}

package/src/screens/componentScreens/SortableListScreen.tsx

@@ -0,0 +1,64 @@
+import _ from 'lodash';
+import React, {useCallback} from 'react';
+import {StyleSheet} from 'react-native';
+import {SortableList, View, TouchableOpacity, Text, Icon, Assets, Colors} from 'react-native-ui-lib';
+import {renderHeader} from '../ExampleScreenPresenter';
+
+interface Item {
+  originalIndex: number;
+}
+
+const data = _.times(30, index => {
+  return {
+    originalIndex: index
+  };
+});
+
+const SortableListScreen = () => {
+  const keyExtractor = useCallback((item: Item) => {
+    return `${item.originalIndex}`;
+  }, []);
+
+  const onOrderChange = useCallback((newData: Item[]) => {
+    console.log('New order:', newData);
+  }, []);
+
+  const renderItem = useCallback(({item, index: _index}: {item: Item; index: number}) => {
+    return (
+      <TouchableOpacity
+        style={styles.itemContainer}
+        onPress={() => console.log('Original index is', item.originalIndex)}
+        // overriding the BG color to anything other than white will cause Android's elevation to fail
+        // backgroundColor={Colors.red30}
+        centerV
+        marginH-page
+      >
+        <View flex row spread centerV>
+          <Icon source={Assets.icons.demo.drag} tintColor={Colors.$iconDisabled}/>
+          <Text center $textDefault>
+            {item.originalIndex}
+          </Text>
+          <Icon source={Assets.icons.demo.chevronRight} tintColor={Colors.$iconDefault}/>
+        </View>
+      </TouchableOpacity>
+    );
+  }, []);
+
+  return (
+    <View flex bg-$backgroundDefault>
+      {renderHeader('Sortable List', {'margin-10': true})}
+      <View flex useSafeArea>
+        <SortableList data={data} renderItem={renderItem} keyExtractor={keyExtractor} onOrderChange={onOrderChange}/>
+      </View>
+    </View>
+  );
+};
+
+export default SortableListScreen;
+const styles = StyleSheet.create({
+  itemContainer: {
+    height: 52,
+    borderColor: Colors.$outlineDefault,
+    borderBottomWidth: 1
+  }
+});

package/src/screens/componentScreens/TabControllerScreen/index.tsx

@@ -174,7 +174,7 @@ class TabControllerScreen extends Component<{}, State> {
             // iconColor={'green'}
             // selectedIconColor={'blue'}
             enableShadow
-            activeBackgroundColor={Colors.$backgroundGeneralLight}
+            activeBackgroundColor={Colors.$backgroundPrimaryLight}
             centerSelected={centerSelected}
           >
             {/* {this.renderTabItems()} */}

package/src/screens/componentScreens/TimelineScreen.tsx

@@ -0,0 +1,143 @@
+import React, {useCallback, useRef, useState} from 'react';
+import {StyleSheet, ScrollView} from 'react-native';
+import {Assets, Colors, Timeline, View, Card, Text, Button} from 'react-native-ui-lib';
+
+const contents = [
+  'CURRENT (default) state with dashed line.\nAligned to title',
+  'SUCCESS state with label.',
+  'ERROR state with icon.',
+  'Custom color with icon and outline.\nAligned to title',
+  'NEXT state with outline.',
+  'NEXT state with circle point and entry point.'
+];
+
+const TimelineScreen = () => {
+  const [anchorIndex, setAnchorIndex] = useState(0);
+  const [expand, setExpand] = useState(false);
+  const anchor = useRef();
+
+  const onPress = useCallback(() => {
+    setAnchorIndex(anchorIndex === 0 ? 1 : 0);
+  }, [anchorIndex]);
+
+  const onPressExpand = useCallback(() => {
+    setExpand(!expand);
+  }, [expand]);
+
+  const renderContent = (index = 0, anchorRef?: any) => {
+    return (
+      <Card padding-page>
+        <Text text70BO ref={anchorRef}>
+          Step {index + 1}
+        </Text>
+        <View marginT-5 padding-8 bg-grey70 br30>
+          <Text>{contents[index]}</Text>
+          <Button marginT-10 size={'small'} label={!expand ? 'Expand' : 'Close'} onPress={onPressExpand}/>
+          {expand && <View style={{height: 100, marginTop: 10, backgroundColor: 'red'}}/>}
+        </View>
+      </Card>
+    );
+  };
+
+  return (
+    <>
+      <View row margin-20 spread>
+        <Text h1 $textDefault margin-20>
+          Timeline
+        </Text>
+        <Button margin-20 link size={'small'} label={'Change Points Anchor'} onPress={onPress}/>
+      </View>
+      <ScrollView contentContainerStyle={styles.container}>
+        <Timeline
+          // key={String(expand)}
+          // topLine={{
+          //   type: Timeline.lineTypes.DASHED, 
+          //   entry: true
+          // }}
+          bottomLine={{type: Timeline.lineTypes.DASHED}}
+          // bottomLine={{state: Timeline.states.SUCCESS}}
+          point={{anchorRef: anchorIndex === 0 ? anchor : undefined}}
+        >
+          {renderContent(0, anchorIndex === 0 ? anchor : undefined)}
+        </Timeline>
+        <Timeline
+          topLine={{type: Timeline.lineTypes.DASHED}}
+          bottomLine={{state: Timeline.states.SUCCESS}}
+          point={{
+            state: Timeline.states.SUCCESS,
+            label: 2,
+            anchorRef: anchorIndex === 1 ? anchor : undefined
+          }}
+        >
+          {renderContent(1, anchorIndex === 1 ? anchor : undefined)}
+        </Timeline>
+
+        <Timeline
+          topLine={{state: Timeline.states.SUCCESS}}
+          bottomLine={{state: Timeline.states.ERROR}}
+          point={{
+            state: Timeline.states.ERROR,
+            icon: Assets.icons.demo.settings
+          }}
+        >
+          {renderContent(2)}
+        </Timeline>
+        <Timeline
+          topLine={{state: Timeline.states.ERROR}}
+          bottomLine={{
+            type: Timeline.lineTypes.DASHED,
+            color: Colors.orange40
+          }}
+          point={{
+            type: Timeline.pointTypes.OUTLINE,
+            color: Colors.orange40,
+            icon: Assets.icons.demo.camera
+          }}
+        >
+          {renderContent(3)}
+        </Timeline>
+        <Timeline
+          topLine={{
+            type: Timeline.lineTypes.DASHED,
+            color: Colors.orange40
+          }}
+          bottomLine={{
+            state: Timeline.states.NEXT,
+            type: Timeline.lineTypes.DASHED
+          }}
+          point={{
+            state: Timeline.states.NEXT,
+            type: Timeline.pointTypes.OUTLINE
+          }}
+        >
+          {renderContent(4)}
+        </Timeline>
+
+        <Timeline
+          topLine={{
+            state: Timeline.states.NEXT,
+            type: Timeline.lineTypes.DASHED
+          }}
+          bottomLine={{
+            state: Timeline.states.NEXT,
+            entry: true
+          }}
+          point={{
+            state: Timeline.states.NEXT,
+            type: Timeline.pointTypes.CIRCLE
+          }}
+        >
+          {renderContent(5)}
+        </Timeline>
+      </ScrollView>
+    </>
+  );
+};
+
+export default TimelineScreen;
+
+const styles = StyleSheet.create({
+  container: {
+    paddingBottom: 20
+  }
+});

package/src/screens/componentScreens/index.js

@@ -46,6 +46,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.SkeletonViewScreen', () => require('./SkeletonViewScreen').default);
   registrar('unicorn.components.SliderScreen', () => require('./SliderScreen').default);
   registrar('unicorn.components.SortableGridListScreen', () => require('./SortableGridListScreen').default);
+  registrar('unicorn.components.SortableListScreen', () => require('./SortableListScreen').default);
   registrar('unicorn.components.StackAggregatorScreen', () => require('./StackAggregatorScreen').default);
   registrar('unicorn.components.StepperScreen', () => require('./StepperScreen').default);
   registrar('unicorn.components.SwitchScreen', () => require('./SwitchScreen').default);
@@ -62,6 +63,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.lists.BasicListScreen', () => require('./BasicListScreen').default);
   registrar('unicorn.lists.ContactsListScreen', () => require('./ContactsListScreen').default);
   registrar('unicorn.lists.ConversationListScreen', () => require('./ConversationListScreen').default);
+  registrar('unicorn.components.TimelineScreen', () => require('./TimelineScreen').default);
   // Full Screen components
   registrar('unicorn.screens.EmptyStateScreen', () => require('./EmptyStateScreen').default);
   registrar('unicorn.components.FaderScreen', () => require('./FaderScreen').default);

package/src/screens/nativeComponentScreens/keyboardAccessory/KeyboardAccessoryViewScreen.js

@@ -206,6 +206,7 @@ export default class KeyboardAccessoryViewScreen extends PureComponent {
           revealKeyboardInteractive
           onRequestShowKeyboard={this.onRequestShowKeyboard}
           useSafeArea={useSafeArea}
+          addBottomView={useSafeArea}
           // usesBottomTabs={!isModal}
         />
       </View>