unicorn-demo-app 7.4.1 → 7.5.0

package/package.json

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

package/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap

@@ -3072,19 +3072,35 @@ exports[`AvatarScreen renders screen 1`] = `
           >
             <Text
               allowFontScaling={false}
+              fsTagName="unmask"
               numberOfLines={1}
               style={
                 [
                   {
                     "backgroundColor": "transparent",
-                    "color": "#FFFFFF",
-                    "fontFamily": "System",
-                    "fontSize": 12,
-                    "fontWeight": "700",
-                    "lineHeight": 16,
+                    "color": "#20303C",
+                    "textAlign": "left",
                   },
-                  false,
                   undefined,
+                  undefined,
+                  undefined,
+                  undefined,
+                  undefined,
+                  undefined,
+                  undefined,
+                  undefined,
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "color": "#FFFFFF",
+                      "fontFamily": "System",
+                      "fontSize": 12,
+                      "fontWeight": "700",
+                      "lineHeight": 16,
+                    },
+                    false,
+                    undefined,
+                  ],
                 ]
               }
               testID="badge"

package/src/screens/componentScreens/DateTimePickerScreen.tsx

@@ -1,8 +1,23 @@
 import React, {Component} from 'react';
 import {ScrollView} from 'react-native';
-import {DateTimePicker, DateTimePickerProps, View, Text} from 'react-native-ui-lib'; // eslint-disable-line
+import moment from 'moment';
+import * as LightDate from 'light-date';
+import {DateTimePicker, DateTimePickerProps, DateTimePickerMode, View, Text, Switch} from 'react-native-ui-lib';
+
+interface State {
+  mode: DateTimePickerMode;
+  dateTimeFormatter: 'moment' | 'light-date';
+}
+
+export default class DateTimePickerScreen extends Component<{}, State> {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      mode: 'time',
+      dateTimeFormatter: 'moment'
+    };
+  }
 
-export default class DateTimePickerScreen extends Component {
   getCustomInputValue = (value?: string) => {
     if (!value) {
       return 'Default';
@@ -21,7 +36,27 @@ export default class DateTimePickerScreen extends Component {
     );
   };
 
+  toggleTimeOrDate = () => {
+    this.setState({mode: this.state.mode === 'time' ? 'date' : 'time'});
+  };
+
+  toggleFormatter = () => {
+    this.setState({dateTimeFormatter: this.state.dateTimeFormatter === 'moment' ? 'light-date' : 'moment'});
+  };
+
+  getFormatter = (): DateTimePickerProps['dateTimeFormatter'] => {
+    const {dateTimeFormatter} = this.state;
+    if (dateTimeFormatter === 'moment') {
+      return (value: Date, mode: DateTimePickerMode) =>
+        moment(value).format(mode === 'date' ? 'MMM D, YYYY' : 'h:mm A');
+    } else {
+      return (value: Date, mode: DateTimePickerMode) =>
+        LightDate.format(value, mode === 'date' ? '{mm}-{dd}-{yyyy}' : '{HH}:{mm}');
+    }
+  };
+
   render() {
+    const {mode, dateTimeFormatter} = this.state;
     return (
       <ScrollView>
         <View padding-page>
@@ -31,7 +66,6 @@ export default class DateTimePickerScreen extends Component {
             containerStyle={{marginVertical: 20}}
             label={'Date'}
             placeholder={'Select a date'}
-            // dateFormat={'MMM D, YYYY'}
             // value={new Date('October 13, 2014')}
           />
           <DateTimePicker
@@ -39,7 +73,6 @@ export default class DateTimePickerScreen extends Component {
             mode={'time'}
             label={'Time'}
             placeholder={'Select time'}
-            // timeFormat={'h:mm A'}
             // value={new Date('2015-03-25T12:00:00-06:30')}
           />
 
@@ -64,13 +97,22 @@ export default class DateTimePickerScreen extends Component {
           <Text text60R marginT-40>
             Custom Input
           </Text>
+          <View row marginV-20 centerV spread>
+            <View row>
+              <Text text80>{mode}</Text>
+              <Switch value={mode === 'time'} onValueChange={this.toggleTimeOrDate} marginL-10/>
+            </View>
+            <View row>
+              <Text text80>{dateTimeFormatter}</Text>
+              <Switch value={dateTimeFormatter === 'moment'} onValueChange={this.toggleFormatter} marginL-10/>
+            </View>
+          </View>
           <DateTimePicker
             migrateTextField
             containerStyle={{marginVertical: 20}}
-            label={'Date'}
-            placeholder={'Select a date'}
             renderInput={this.renderCustomInput}
-            dateFormat={'MMM D, YYYY'}
+            mode={mode}
+            dateTimeFormatter={this.getFormatter()}
             // value={new Date('2015-03-25T12:00:00-06:30')}
           />
         </View>

package/src/screens/incubatorScreens/IncubatorCalendarScreen/index.tsx

@@ -39,10 +39,10 @@ export default class CalendarScreen extends Component {
   };
 
   render() {
-    const {date, events, showLoader} = this.state;
+    const {date, events/* , showLoader */} = this.state;
     return (
-      <Incubator.Calendar data={events} initialDate={date} onChangeDate={this.onChangeDate} staticHeader>
-        <Incubator.Calendar.Agenda onEndReached={this.onEndReached} showLoader={showLoader}/>
+      <Incubator.Calendar data={events} initialDate={date} /* onChangeDate={this.onChangeDate} */ staticHeader>
+        {/* <Incubator.Calendar.Agenda onEndReached={this.onEndReached} showLoader={showLoader}/> */}
       </Incubator.Calendar>
     );
   }

package/src/screens/incubatorScreens/IncubatorSliderScreen.tsx

@@ -111,7 +111,6 @@ const IncubatorSliderScreen = () => {
         <Text margin-10 text70BL $textDefault>
           Disabled Slider
         </Text>
-        {/* @ts-expect-error */}
         <Incubator.Slider value={0.4} containerStyle={styles.container} disableRTL={disableRTL} disabled/>
       </View>
     );