unicorn-demo-app 6.22.3 → 6.23.0

package/package.json

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

package/src/screens/MenuStructure.js

@@ -43,7 +43,8 @@ export const navigationData = {
         screen: 'unicorn.components.SharedTransitionScreen'
       },
       {title: 'Stack Aggregator', tags: 'stack aggregator', screen: 'unicorn.components.StackAggregatorScreen'},
-      {title: 'Wheel Picker Dialog', tags: 'wheel picker dialog', screen: 'unicorn.components.WheelPickerDialogScreen'}
+      {title: 'Wheel Picker Dialog', tags: 'wheel picker dialog', screen: 'unicorn.components.WheelPickerDialogScreen'},
+      {title: 'Marquee', tags: 'sliding text', screen: 'unicorn.components.MarqueeScreen'}
     ]
   },
   Form: {

package/src/screens/componentScreens/MarqueeScreen.tsx

@@ -0,0 +1,102 @@
+import _ from 'lodash';
+import React, {Component} from 'react';
+import {StyleSheet} from 'react-native';
+import {Marquee, MarqueeDirections, Text, View, Spacings} from 'react-native-ui-lib';
+import {renderBooleanOption, renderMultipleSegmentOptions} from '../ExampleScreenPresenter';
+
+export default class MarqueeScreen extends Component<{}> {
+  state = {
+    duration: 5000,
+    directionHorizontal: true,
+    directionVertical: true,
+    numOfReps: -1
+  };
+
+  renderHorizontalSection = () => {
+    const {directionHorizontal, numOfReps, duration} = this.state;
+    return (
+      <View marginV-s3 center>
+        <Text h2 marginB-s2 $textDefault>
+          Horizontal
+        </Text>
+        <Text h3 marginV-s2 $textDefault>
+          Marquee: {directionHorizontal ? MarqueeDirections.LEFT : MarqueeDirections.RIGHT}
+        </Text>
+        <Marquee
+          key={`${directionHorizontal}-${duration}-${numOfReps}`}
+          label={'Hey there, this is the new Marquee component from UILIB!'}
+          direction={directionHorizontal ? MarqueeDirections.LEFT : MarqueeDirections.RIGHT}
+          duration={duration}
+          numberOfReps={numOfReps}
+          containerStyle={[styles.containerHorizontal, styles.horizontal]}
+        />
+      </View>
+    );
+  };
+
+  renderVerticalSection = () => {
+    const {directionVertical, numOfReps, duration} = this.state;
+    return (
+      <View marginV-s3 center>
+        <Text h2 marginB-s2 $textDefault>
+          Vertical
+        </Text>
+        <Text h3 marginV-s2 $textDefault>
+          Marquee: {directionVertical ? MarqueeDirections.UP : MarqueeDirections.DOWN}
+        </Text>
+        <Marquee
+          label={
+            'Hey there, this is the new Marquee! Hey there, this is the new Marquee! Hey there, this is the new Marquee! Hey there, this is the new Marquee!'
+          }
+          labelStyle={styles.label}
+          key={`${directionVertical}-${duration}-${numOfReps}`}
+          direction={directionVertical ? MarqueeDirections.UP : MarqueeDirections.DOWN}
+          duration={duration}
+          numberOfReps={numOfReps}
+          containerStyle={[styles.containerHorizontal, styles.vertical]}
+        />
+      </View>
+    );
+  };
+
+  render() {
+    return (
+      <View flex padding-page>
+        <Text h1 center margin-20 $textDefault>
+          Marquee
+        </Text>
+        <View>
+          {renderMultipleSegmentOptions.call(this, 'Duration (optional)', 'duration', [
+            {label: '3000', value: 3000},
+            {label: '5000', value: 5000},
+            {label: '10000', value: 10000}
+          ])}
+          {renderMultipleSegmentOptions.call(this, 'Number Of Reps', 'numOfReps', [
+            {label: 'Infinite', value: -1},
+            {label: '1', value: 1},
+            {label: '3', value: 3},
+            {label: '5', value: 5}
+          ])}
+          <View marginV-s2>
+            {renderBooleanOption.call(this, 'Direction Horizontal: Left To Right/Right To Left', 'directionHorizontal')}
+            {renderBooleanOption.call(this, 'Direction Vertical:  Bottom To Up/Up To Bottom', 'directionVertical')}
+          </View>
+        </View>
+        {this.renderHorizontalSection()}
+        {this.renderVerticalSection()}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  containerHorizontal: {
+    borderWidth: 1,
+    borderColor: 'black',
+    marginVertical: Spacings.s2
+  },
+  horizontal: {width: 200},
+  vertical: {width: 250, height: 100, alignItems: 'center'},
+  containerVertical: {borderWidth: 1, borderColor: 'black', marginVertical: Spacings.s2},
+  label: {alignSelf: 'center'}
+});

package/src/screens/componentScreens/SortableListScreen.tsx

@@ -1,18 +1,33 @@
 import _ from 'lodash';
 import React, {useCallback, useState, useRef} from 'react';
 import {StyleSheet} from 'react-native';
-import {SortableList, View, TouchableOpacity, Text, Icon, Assets, Colors, Button} from 'react-native-ui-lib';
+import {
+  SortableList,
+  SortableListItemProps,
+  View,
+  TouchableOpacity,
+  Text,
+  Icon,
+  Assets,
+  Colors,
+  Button
+} from 'react-native-ui-lib';
 import {renderHeader} from '../ExampleScreenPresenter';
 
-interface Item {
-  originalIndex: number;
-  id: string;
+interface Item extends SortableListItemProps {
+  text: string;
 }
 
-const data = _.times(30, index => {
+const data: Item[] = _.times(30, index => {
+  let text = `${index}`;
+  if (index === 3) {
+    text = 'Locked item';
+  }
+
   return {
-    originalIndex: index,
-    id: `${index}`
+    text,
+    id: `${index}`,
+    locked: index === 3
   };
 });
 
@@ -57,23 +72,26 @@ const SortableListScreen = () => {
 
   const renderItem = useCallback(({item, index: _index}: {item: Item; index: number}) => {
     const isSelected = selectedItems.includes(item);
+    const {locked} = item;
+    const Container = locked ? View : TouchableOpacity;
     return (
-      <TouchableOpacity
+      <Container
         style={[styles.itemContainer, isSelected && styles.selectedItemContainer]}
         onPress={() => toggleItemSelection(item)}
         // overriding the BG color to anything other than white will cause Android's elevation to fail
         // backgroundColor={Colors.red30}
         centerV
+        centerH={locked}
         paddingH-page
       >
         <View flex row spread centerV>
-          <Icon source={Assets.icons.demo.drag} tintColor={Colors.$iconDisabled}/>
-          <Text center $textDefault>
-            {item.originalIndex}
+          {!locked && <Icon source={Assets.icons.demo.drag} tintColor={Colors.$iconDisabled}/>}
+          <Text center $textDefault={!locked} $textNeutralLight={locked}>
+            {item.text}
           </Text>
-          <Icon source={Assets.icons.demo.chevronRight} tintColor={Colors.$iconDefault}/>
+          {!locked && <Icon source={Assets.icons.demo.chevronRight} tintColor={Colors.$iconDefault}/>}
         </View>
-      </TouchableOpacity>
+      </Container>
     );
   },
   [selectedItems, toggleItemSelection]);

package/src/screens/componentScreens/index.js

@@ -30,6 +30,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.GridViewScreen', () => require('./GridViewScreen').default);
   registrar('unicorn.components.KeyboardAwareScrollViewScreen', () => require('./KeyboardAwareScrollViewScreen').default);
   registrar('unicorn.components.MaskedInputScreen', () => require('./MaskedInputScreen').default);
+  registrar('unicorn.components.MarqueeScreen', () => require('./MarqueeScreen').default);
   registrar('unicorn.components.OverlaysScreen', () => require('./OverlaysScreen').default);
   registrar('unicorn.components.PageControlScreen', () => require('./PageControlScreen').default);
   registrar('unicorn.components.PanDismissibleScreen', () => require('./PanDismissibleScreen').default);