unicorn-demo-app 6.0.0 → 6.1.0

package/package.json

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

package/src/configurations.js

@@ -1,55 +1,57 @@
 import {Assets, Colors, Typography, Spacings, Incubator} from 'react-native-ui-lib'; // eslint-disable-line
 
-Assets.loadAssetsGroup('icons.demo', {
-  chevronDown: require('./assets/icons/chevronDown.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'),
-  image: require('./assets/icons/image.png'),
-  plus: require('./assets/icons/plus.png'),
-  refresh: require('./assets/icons/refresh.png'),
-  search: require('./assets/icons/search.png'),
-  share: require('./assets/icons/share.png')
-});
+export const loadDemoConfigurations = () => {
+  Assets.loadAssetsGroup('icons.demo', {
+    chevronDown: require('./assets/icons/chevronDown.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'),
+    image: require('./assets/icons/image.png'),
+    plus: require('./assets/icons/plus.png'),
+    refresh: require('./assets/icons/refresh.png'),
+    search: require('./assets/icons/search.png'),
+    share: require('./assets/icons/share.png')
+  });
 
-Assets.loadAssetsGroup('images.demo', {
-  brokenImage: require('./assets/images/placeholderMissingImage.png')
-});
+  Assets.loadAssetsGroup('images.demo', {
+    brokenImage: require('./assets/images/placeholderMissingImage.png')
+  });
 
-Assets.loadAssetsGroup('svgs.demo', {
-  logo: require('./assets/svgs/headerLogo.svg').default
-});
+  Assets.loadAssetsGroup('svgs.demo', {
+    logo: require('./assets/svgs/headerLogo.svg').default
+  });
 
-Typography.loadTypographies({
-  h1: {...Typography.text40},
-  h2: {...Typography.text50},
-  h3: {...Typography.text70M},
-  body: Typography.text70,
-  bodySmall: Typography.text80
-});
+  Typography.loadTypographies({
+    h1: {...Typography.text40},
+    h2: {...Typography.text50},
+    h3: {...Typography.text70M},
+    body: Typography.text70,
+    bodySmall: Typography.text80
+  });
 
-Spacings.loadSpacings({
-  page: Spacings.s5
-});
+  Spacings.loadSpacings({
+    page: Spacings.s5
+  });
 
-/* Dark Mode Schemes */
-Colors.loadSchemes({
-  light: {
-    screenBG: 'transparent',
-    textColor: Colors.grey10,
-    moonOrSun: Colors.yellow30,
-    mountainForeground: Colors.green30,
-    mountainBackground: Colors.green50
-  },
-  dark: {
-    screenBG: Colors.grey10,
-    textColor: Colors.white,
-    moonOrSun: Colors.grey80,
-    mountainForeground: Colors.violet10,
-    mountainBackground: Colors.violet20
-  }
-});
+  /* Dark Mode Schemes */
+  Colors.loadSchemes({
+    light: {
+      screenBG: Colors.white,
+      textColor: Colors.grey10,
+      moonOrSun: Colors.yellow30,
+      mountainForeground: Colors.green30,
+      mountainBackground: Colors.green50
+    },
+    dark: {
+      screenBG: Colors.grey10,
+      textColor: Colors.white,
+      moonOrSun: Colors.grey80,
+      mountainForeground: Colors.violet10,
+      mountainBackground: Colors.violet20
+    }
+  });
 
-/* Components */
-Incubator.TextField.defaultProps = {...Incubator.TextField.defaultProps, preset: 'default'};
+  /* Components */
+  Incubator.TextField.defaultProps = {...Incubator.TextField.defaultProps, preset: 'default'};
+};

package/src/index.js

@@ -1,5 +1,6 @@
 import {UIManager, I18nManager} from 'react-native';
 import {navigationData as menuStructure} from './screens/MenuStructure';
+import {loadDemoConfigurations} from './configurations';
 
 UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true); // eslint-disable-line
 I18nManager.allowRTL(true);
@@ -7,6 +8,7 @@ I18nManager.allowRTL(true);
 module.exports = {
   name: 'unicorn demo app',
   menuStructure,
+  loadDemoConfigurations,
   // componentScreens
   get screens() {
     return {
@@ -219,6 +221,9 @@ module.exports = {
       get PanViewScreen() {
         return require('./screens/incubatorScreens/PanViewScreen').default;
       },
+      get TransitionViewScreen() {
+        return require('./screens/incubatorScreens/TransitionViewScreen').default;
+      },
       // realExamples
       get AppleMusic() {
         return require('./screens/realExamples/AppleMusic').default;

package/src/screens/MenuStructure.js

@@ -156,7 +156,8 @@ export const navigationData = {
       {title: '(New) TextField', tags: 'text field input', screen: 'unicorn.components.IncubatorTextFieldScreen'},
       {title: 'ExpandableOverlay', tags: 'text field expandable input picker', screen: 'unicorn.components.IncubatorExpandableOverlayScreen'},
       {title: 'WheelPicker (Incubator)', tags: 'wheel picker spinner experimental', screen: 'unicorn.incubator.WheelPickerScreen'},
-      {title: 'Pan View', tags: 'pan swipe drag', screen: 'unicorn.incubator.PanViewScreen'}
+      {title: 'Pan View', tags: 'pan swipe drag', screen: 'unicorn.incubator.PanViewScreen'},
+      {title: 'Transition View', tags: 'transition animation enter exit', screen: 'unicorn.incubator.TransitionViewScreen'}
     ]
   },
   Inspirations: {

package/src/screens/componentScreens/ImageScreen.tsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {ScrollView} from 'react-native';
-import {View, Text, Image, Colors, Assets} from 'react-native-ui-lib';
+import {View, Text, Image, Colors, Assets, OverlayTypes} from 'react-native-ui-lib';
 import {renderBooleanOption, renderRadioGroup, renderSliderOption} from '../ExampleScreenPresenter';
 
 const IMAGE_URL =
@@ -38,11 +38,24 @@ enum SizeType {
   Percentage = '50%'
 }
 
-class ImageScreen extends Component {
+interface State {
+  cover: boolean;
+  showOverlayContent: boolean;
+  overlayType: 'none' | OverlayTypes['type'];
+  overlayIntensity: OverlayTypes['intensity'];
+  margin: number;
+  showErrorImage: boolean;
+  showSvg: boolean;
+  isFile: boolean;
+  sizeType: SizeType;
+}
+
+class ImageScreen extends Component<{}, State> {
   state = {
     cover: true,
     showOverlayContent: false,
     overlayType: 'none',
+    overlayIntensity: Image.overlayIntensityType.LOW,
     margin: 0,
     showErrorImage: false,
     showSvg: false,
@@ -75,13 +88,15 @@ class ImageScreen extends Component {
   }
 
   renderImage() {
-    const {cover, overlayType, margin, showErrorImage} = this.state;
+    const {cover, overlayType, overlayIntensity, margin, showErrorImage} = this.state;
     return (
       <Image
+        key={`${overlayType}-${overlayIntensity}`}
         source={{uri: showErrorImage ? BROKEN_URL : IMAGE_URL}}
         errorSource={Assets.images.demo.brokenImage}
         cover={cover}
         overlayType={overlayType !== 'none' ? overlayType : undefined}
+        overlayIntensity={overlayIntensity}
         style={!cover && {width: DEFAULT_SIZE, height: DEFAULT_SIZE}}
         customOverlayContent={this.renderOverlayContent()}
         {...{[`margin-${margin}`]: true}}
@@ -109,7 +124,10 @@ class ImageScreen extends Component {
         {renderBooleanOption.call(this, 'Show as Cover Image', 'cover')}
         {renderBooleanOption.call(this, 'Show Overlay Content', 'showOverlayContent')}
         {renderBooleanOption.call(this, 'Show Error Image', 'showErrorImage')}
-        {renderRadioGroup.call(this, 'Overlay Type', 'overlayType', {none: 'none', ...Image.overlayTypes})}
+        <View row spread>
+          {renderRadioGroup.call(this, 'Overlay Type', 'overlayType', {none: 'none', ...Image.overlayTypes})}
+          {renderRadioGroup.call(this, 'Overlay Intensity', 'overlayIntensity', Image.overlayIntensityType)}
+        </View>
         {renderSliderOption.call(this, 'Margin(margin-XX)', 'margin', {step: 4, min: 0, max: 40})}
       </>
     );

package/src/screens/componentScreens/SectionsWheelPickerScreen.tsx

@@ -64,7 +64,7 @@ const SectionsWheelPickerScreen = () => {
     {
       items: getItems(days),
       onChange: onDaysChange,
-      selectedValue: selectedDays,
+      initialValue: selectedDays,
       label: 'Days',
       align: numOfSections === 1 ? WheelPicker.alignments.CENTER : WheelPicker.alignments.RIGHT,
       style: {flex: 1}
@@ -72,7 +72,7 @@ const SectionsWheelPickerScreen = () => {
     {
       items: getItems(hours),
       onChange: onHoursChange,
-      selectedValue: selectedHours,
+      initialValue: selectedHours,
       label: 'Hrs',
       align: numOfSections === 2 ? WheelPicker.alignments.LEFT : WheelPicker.alignments.CENTER,
       style: numOfSections === 2 ? {flex: 1} : undefined
@@ -80,7 +80,7 @@ const SectionsWheelPickerScreen = () => {
     {
       items: getItems(minutes),
       onChange: onMinutesChange,
-      selectedValue: selectedMinutes,
+      initialValue: selectedMinutes,
       label: 'Mins',
       align: WheelPicker.alignments.LEFT,
       style: {flex: 1}

package/src/screens/componentScreens/StackAggregatorScreen.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {ScrollView} from 'react-native';
-import {View, Text, Button, ButtonSize, StackAggregator} from 'react-native-ui-lib';
+import {View, Text, Button, StackAggregator} from 'react-native-ui-lib';
 
 
 const contents = [
@@ -24,7 +24,7 @@ export default class StackAggregatorScreen extends Component {
   renderItem = (_: string, index: number) => {
     return (
       <View key={index} center padding-12>
-        <Button label={`${index}`} marginB-10 size={ButtonSize.small} onPress={() => this.onPress(index)}/>
+        <Button label={`${index}`} marginB-10 size={Button.sizes.small} onPress={() => this.onPress(index)}/>
         <Text>{contents[index]}</Text>
       </View>
     );

package/src/screens/foundationScreens/DarkModeScreen.tsx

@@ -1,22 +1,46 @@
 import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
-import {View, Text, Constants} from 'react-native-ui-lib';
+import {View, Text, Colors, Constants, SegmentedControl, SchemeType} from 'react-native-ui-lib';
+
+const SCHEME_TYPES: {label: string; value: SchemeType}[] = [
+  {label: 'device (default)', value: 'default'},
+  {label: 'dark', value: 'dark'},
+  {label: 'light', value: 'light'}
+];
+
+const DEVICE_DARK_MODE_MESSAGE = Constants.isIOS
+  ? 'Change to dark mode in simulator by pressing Cmd+Shift+A'
+  : 'Change to dark mode';
+const MANUAL_DARK_MODE_MESSAGE = 'Setting the scheme manually will ignore device settings';
 
 class DarkModeScreen extends Component {
-  state = {};
+  state = {
+    selectedSchemeType: 'default'
+  };
+
+  changeSchemeType = (index: number) => {
+    this.setState({selectedSchemeType: SCHEME_TYPES[index].value});
+    Colors.setScheme(SCHEME_TYPES[index].value);
+  };
+
   render() {
+    const {selectedSchemeType} = this.state;
+    const message = selectedSchemeType === 'default' ? DEVICE_DARK_MODE_MESSAGE : MANUAL_DARK_MODE_MESSAGE;
+
     return (
       <View flex padding-page bg-screenBG>
         <Text h1 textColor>
           Dark Mode
         </Text>
-        {Constants.isIOS ? (
-          <Text marginT-s2 body textColor>
-            Change to dark mode in simulator by pressing Cmd+Shift+A
-          </Text>
-        ) : (
-          <Text marginT-s2 body textColor>Change to dark mode</Text>
-        )}
+        <SegmentedControl
+          containerStyle={{alignSelf: 'flex-start', marginTop: 20}}
+          segments={SCHEME_TYPES}
+          onChangeIndex={this.changeSchemeType}
+        />
+
+        <Text marginT-s2 body textColor>
+          {message}
+        </Text>
 
         <View style={styles.moonOrSun} bg-moonOrSun/>
         <View style={[styles.mountain, styles.mountainBackground]} bg-mountainBackground/>

package/src/screens/incubatorScreens/IncubatorTextFieldScreen.tsx

@@ -5,6 +5,8 @@ import {Assets, Colors, Spacings, Typography, View, Text, Button, Keyboard, Incu
 const {TextField} = Incubator;
 const {KeyboardAwareInsetsView} = Keyboard;
 
+const priceFormatter = Intl.NumberFormat('en-US');
+
 export default class TextFieldScreen extends Component {
   input = React.createRef<TextInput>();
   input2 = React.createRef<TextInput>();
@@ -47,7 +49,7 @@ export default class TextFieldScreen extends Component {
   }
 
   render() {
-    const {errorPosition, shouldDisable} = this.state;
+    const {errorPosition, shouldDisable, price} = this.state;
     return (
       <ScrollView keyboardShouldPersistTaps="always">
         <View flex padding-page>
@@ -218,6 +220,21 @@ export default class TextFieldScreen extends Component {
             hint="1-6 chars including numeric chars"
             fieldStyle={styles.withUnderline}
           />
+          <Text h3 blue50 marginV-s4>
+            Formatter
+          </Text>
+          <TextField
+            value={price}
+            onChangeText={value => this.setState({price: value})}
+            label="Price"
+            placeholder="Enter price"
+            validate={'number'}
+            validationMessage="Invalid price"
+            // @ts-expect-error
+            formatter={(value) => (isNaN(value) ? value : priceFormatter.format(Number(value)))}
+            leadingAccessory={<Text marginR-s1 grey30>$</Text>}
+            fieldStyle={styles.withUnderline}
+          />
         </View>
         <KeyboardAwareInsetsView/>
       </ScrollView>

package/src/screens/incubatorScreens/TransitionViewScreen.tsx

@@ -0,0 +1,59 @@
+import React, {Component} from 'react';
+import {View, Button, Incubator} from 'react-native-ui-lib';
+const {TransitionView} = Incubator;
+// @ts-ignore
+import {renderRadioGroup} from '../ExampleScreenPresenter';
+
+interface State {
+  enterDirection: Incubator.Direction;
+  exitDirection: Incubator.Direction;
+  key: number;
+}
+
+export default class TransitionViewScreen extends Component<{}, State> {
+  private ref = React.createRef<typeof TransitionView>();
+  state = {
+    enterDirection: 'left' as Incubator.Direction,
+    exitDirection: 'bottom' as Incubator.Direction,
+    key: 1
+  };
+
+  onPress = () => {
+    this.ref.current?.animateOut();
+  };
+
+  // onAnimationEnd = (type: Incubator.TransitionViewAnimationType) => {
+  //   console.warn('Animation complete', type);
+  // };
+
+  render() {
+    const {key, enterDirection, exitDirection} = this.state;
+    return (
+      <View padding-20 bg-grey80 flex>
+        {renderRadioGroup.call(this,
+          'Enter direction',
+          'enterDirection',
+          {top: 'top', bottom: 'bottom', left: 'left', right: 'right'},
+          {isRow: true})}
+        {renderRadioGroup.call(this,
+          'Exit direction',
+          'exitDirection',
+          {top: 'top', bottom: 'bottom', left: 'left', right: 'right'},
+          {isRow: true})}
+        <Button label="Refresh" onPress={() => this.setState({key: key + 1})}/>
+        <View flex center>
+          <TransitionView
+            key={`${key}`}
+            // @ts-expect-error
+            ref={this.ref}
+            enterFrom={enterDirection}
+            exitTo={exitDirection}
+            // onAnimationEnd={this.onAnimationEnd}
+          >
+            <Button label="Press to remove" onPress={this.onPress}/>
+          </TransitionView>
+        </View>
+      </View>
+    );
+  }
+}

package/src/screens/incubatorScreens/index.js

@@ -5,6 +5,7 @@ export function registerScreens(registrar) {
     gestureHandlerRootHOC(require('./TouchableOpacityScreen').default));
   registrar('unicorn.components.IncubatorExpandableOverlayScreen', () => require('./IncubatorExpandableOverlayScreen').default);
   registrar('unicorn.components.IncubatorTextFieldScreen', () => require('./IncubatorTextFieldScreen').default);
-  registrar('unicorn.incubator.WheelPickerScreen', () => gestureHandlerRootHOC(require('./WheelPickerScreen').default));
   registrar('unicorn.incubator.PanViewScreen', () => require('./PanViewScreen').default);
+  registrar('unicorn.incubator.TransitionViewScreen', () => require('./TransitionViewScreen').default);
+  registrar('unicorn.incubator.WheelPickerScreen', () => gestureHandlerRootHOC(require('./WheelPickerScreen').default));
 }

package/src/screens/index.js

@@ -2,7 +2,7 @@ import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 
 export function registerScreens(registrar) {
   // load demo app presets
-  require('../configurations');
+  require('../configurations').loadDemoConfigurations();
 
   require('./componentScreens').registerScreens(registrar);
   require('./foundationScreens').registerScreens(registrar);