unicorn-demo-app 7.3.6 → 7.4.0

package/package.json

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

package/src/screens/componentScreens/HintsScreen.tsx

@@ -10,7 +10,6 @@ const reactions = ['❤️', '😮', '😔', '😂', '😡'];
 type HintScreenProps = {};
 
 export default class HintsScreen extends Component<HintScreenProps> {
-
   state = {
     showHint: true,
     useShortMessage: false,
@@ -134,6 +133,7 @@ export default class HintsScreen extends Component<HintScreenProps> {
     const message = useShortMessage
       ? 'Add other cool and useful stuff.'
       : 'Add other cool and useful stuff through adding apps to your visitors to enjoy.';
+    const color = !showCustomContent && showReactionStrip ? {color: Colors.$backgroundDefault} : undefined;
 
     return (
       <View flex>
@@ -178,7 +178,7 @@ export default class HintsScreen extends Component<HintScreenProps> {
                   ? this.renderReactionStrip()
                   : undefined
             }
-            color={!showCustomContent && showReactionStrip ? Colors.$backgroundDefault : undefined}
+            {...color}
             removePaddings={!showCustomContent && showReactionStrip}
             enableShadow={enableShadow}
             testID={'Hint'}

package/src/screens/componentScreens/ModalScreen.tsx

@@ -63,6 +63,7 @@ export default class ModalScreen extends Component<ModalScreenProps, State> {
           <View bg-violet80 flex style={styles.page}>
             <Modal.TopBar
               title="another example"
+              subtitle="with a subtitle"
               onCancel={() => Alert.alert('cancel')}
               onDone={() => Alert.alert('done')}
               cancelIcon={null}

package/src/screens/componentScreens/SegmentedControlScreen.tsx

@@ -14,7 +14,7 @@ const segments = {
     },
     {label: 'Short'}
   ],
-  forth: [{label: 'With'}, {label: 'Custom'}, {label: 'Colors'}],
+  forth: [{label: 'With'}, {label: 'Custom'}, {label: 'Style'}],
   fifth: [{label: 'Full'}, {label: 'Width'}],
   sixth: [{label: 'Full'}, {label: 'Width'}, {label: 'With'}, {label: 'A'}, {label: 'Very Long Segment'}]
 };
@@ -49,6 +49,8 @@ const SegmentedControlScreen = () => {
             backgroundColor={Colors.$backgroundInverted}
             activeBackgroundColor={Colors.$backgroundNeutralIdle}
             inactiveColor={Colors.$textDisabled}
+            style={styles.customStyle}
+            segmentsStyle={styles.customSegmentsStyle}
           />
         </View>
         <SegmentedControl
@@ -70,6 +72,13 @@ const SegmentedControlScreen = () => {
 const styles = StyleSheet.create({
   container: {
     marginTop: 20
+  },
+  customStyle: {
+    height: 50,
+    width: 300
+  },
+  customSegmentsStyle: {
+    height: 50
   }
 });
 

package/src/screens/componentScreens/SliderScreen.tsx

@@ -157,7 +157,13 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
           Disabled
         </Text>
         <Slider minimumValue={100} maximumValue={200} value={120} containerStyle={styles.slider} disabled/>
+      </Fragment>
+    );
+  }
 
+  renderCustomSlider() {
+    return (
+      <>
         <Text $textDefault text70BO marginT-15>
           Custom with Steps
         </Text>
@@ -174,7 +180,7 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
           minimumTrackTintColor={Colors.violet40}
           maximumTrackTintColor={Colors.violet70}
         />
-      </Fragment>
+      </>
     );
   }
 
@@ -317,6 +323,7 @@ export default class SliderScreen extends Component<SliderScreenProps, SliderScr
           {this.renderDefaultSliderExample()}
           {this.renderNegativeSliderExample()}
           {this.renderDisabledSliderExample()}
+          {this.renderCustomSlider()}
           {this.renderRangeSliderExample()}
           {this.renderRangeSliderWithValuesExample()}
           {this.renderGradientSlidersExample()}

package/src/screens/componentScreens/SortableListScreen.tsx

@@ -76,6 +76,7 @@ const SortableListScreen = () => {
     const Container = locked ? View : TouchableOpacity;
     return (
       <Container
+        // TODO: fix Android selection color
         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

package/src/screens/incubatorScreens/IncubatorCalendarScreen/MockServer.ts

@@ -0,0 +1,22 @@
+import _ from 'lodash';
+import {data} from './MockData';
+
+const PAGE_SIZE = 100;
+const FAKE_FETCH_TIME = 1500;
+
+class MockServer {
+  async getEvents(date: number): Promise<any[]> {
+    return new Promise(resolve => {
+      const eventIndexByDate = _.findIndex(data, event => {
+        return event.start > date;
+      });
+
+      setTimeout(() => {
+        const newEvents = _.slice(data, eventIndexByDate - PAGE_SIZE / 2, eventIndexByDate + PAGE_SIZE / 2);
+        resolve(newEvents);
+      }, FAKE_FETCH_TIME);
+    });
+  }
+}
+
+export default new MockServer();

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

@@ -1,27 +1,49 @@
+import _ from 'lodash';
 import React, {Component} from 'react';
-import {View, Incubator} from 'react-native-ui-lib';
-import {data} from './MockData';
+import {Incubator} from 'react-native-ui-lib';
+import MockServer from './MockServer';
 
 export default class CalendarScreen extends Component {
-  // constructor(props) {
-  //   super(props);
-    
-  //   setTimeout(() => {
-  //     this.setState({date: 1676026748000});
-  //   }, 2000);
-  // }
+  pageIndex = 0;
 
   state = {
-    date: undefined
+    date: new Date().getTime(),
+    events: [] as any[],
+    showLoader: false
   };
-  
+
+  componentDidMount(): void {
+    this.loadEvents(this.state.date);
+  }
+
+  loadEvents = async (date: number) => {
+    this.setState({showLoader: true});
+    const {events} = this.state;
+    const newEvents = await MockServer.getEvents(date);
+    this.pageIndex++;
+    this.setState({events: _.uniqBy([...events, ...newEvents], e => e.id), showLoader: false});
+  };
+
+  onChangeDate = (date: number) => {
+    console.log('Date change: ', date);
+    const {events} = this.state;
+    if (date < events[0]?.start || date > _.last(events)?.start) {
+      console.log('Load new events');
+      this.loadEvents(date);
+    }
+  };
+
+  onEndReached = (date: number) => {
+    console.log('Reached End: ', date);
+    this.loadEvents(date);
+  };
+
   render() {
+    const {date, events, showLoader} = this.state;
     return (
-      <View flex>
-        <Incubator.Calendar data={data} staticHeader initialDate={this.state.date}>
-          <Incubator.Calendar.Agenda/>
-        </Incubator.Calendar>
-      </View>
+      <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

@@ -1,6 +1,6 @@
 import React, {useState, useRef, useCallback} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {Constants, Colors, View, Text, Button, Incubator} from 'react-native-ui-lib'; //eslint-disable-line
+import {Constants, Colors, View, Text, Button, Incubator, GradientSlider, ColorSliderGroup} from 'react-native-ui-lib'; //eslint-disable-line
 import {renderBooleanOption} from '../ExampleScreenPresenter';
 
 const VALUE = 20;
@@ -9,6 +9,7 @@ const MIN = 0;
 const MAX = Constants.screenWidth - 40; // horizontal margins 20
 const INITIAL_MIN = 30;
 const INITIAL_MAX = 270;
+const COLOR = Colors.blue30;
 
 const IncubatorSliderScreen = () => {
   const [disableRTL, setDisableRTL] = useState<boolean>(false);
@@ -19,6 +20,9 @@ const IncubatorSliderScreen = () => {
   const [sliderMinValue, setSliderMinValue] = useState(INITIAL_MIN);
   const [sliderMaxValue, setSliderMaxValue] = useState(INITIAL_MAX);
 
+  const [color, setColor] = useState(COLOR);
+  const [alpha, setAlpha] = useState(1);
+
   const slider = useRef<typeof Incubator.Slider>();
   const customSlider = useRef<typeof Incubator.Slider>();
   const negativeSlider = useRef<typeof Incubator.Slider>();
@@ -48,6 +52,15 @@ const IncubatorSliderScreen = () => {
     setSliderMinValue(value.min);
   }, []);
 
+  const onGradientValueChange = useCallback((value: string, alpha: number) => {
+    setColor(value);
+    setAlpha(alpha);
+  }, []);
+
+  const onGroupValueChange = (value: string) => {
+    console.log('onGroupValueChange: ', value);
+  };
+
   const renderValuesBox = (min: number, max?: number) => {
     if (max !== undefined) {
       return (
@@ -179,6 +192,65 @@ const IncubatorSliderScreen = () => {
     );
   };
 
+  const renderGradientSlidersExample = () => {
+    return (
+      <View marginH-20>
+        <Text margin-10 text70BL $textDefault>
+          Gradient Sliders
+        </Text>
+        <View row centerV>
+          <Text text90 $textNeutral>
+            DEFAULT
+          </Text>
+          <GradientSlider
+            color={color}
+            containerStyle={styles.gradientSliderContainer}
+            onValueChange={onGradientValueChange}
+            // @ts-expect-error
+            ref={this.gradientSlider}
+            migrate
+          />
+          <View style={styles.box}>
+            <View style={{flex: 1, backgroundColor: color, opacity: alpha}}/>
+          </View>
+        </View>
+        <View row centerV>
+          <Text text90 $textNeutral>
+            HUE
+          </Text>
+          <GradientSlider
+            type={GradientSlider.types.HUE}
+            color={COLOR}
+            containerStyle={styles.gradientSliderContainer}
+            onValueChange={onGradientValueChange}
+            migrate
+          />
+          <View style={styles.box}>
+            <View style={{flex: 1, backgroundColor: color}}/>
+          </View>
+        </View>
+      </View>
+    );
+  };
+
+  const renderColorSliderGroupExample = () => {
+    return (
+      <>
+        <Text margin-10 text70BL $textDefault>
+          Color Slider Group
+        </Text>
+        <ColorSliderGroup
+          initialColor={color}
+          sliderContainerStyle={styles.slider}
+          containerStyle={styles.group}
+          showLabels
+          onValueChange={onGroupValueChange}
+          migrate
+        />
+      </>
+    );
+  };
+
   return (
     <ScrollView showsVerticalScrollIndicator={false} style={{backgroundColor: Colors.$backgroundDefault}}>
       <View row spread margin-20>
@@ -196,6 +268,8 @@ const IncubatorSliderScreen = () => {
       {renderCustomSliderExample()}
       {renderNegativeSliderExample()}
       {renderRangeSliderExample()}
+      {renderGradientSlidersExample()}
+      {renderColorSliderGroupExample()}
     </ScrollView>
   );
 };
@@ -221,5 +295,26 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.red30,
     borderWidth: 2,
     borderColor: Colors.red70
+  },
+  gradientSliderContainer: {
+    flex: 1, // NOTE: to place a slider in a row layout you must set flex in its 'containerStyle'!!!
+    marginHorizontal: 20,
+    marginVertical: 10
+  },
+  box: {
+    width: 20,
+    height: 20,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: Colors.$outlineDefault
+  },
+  slider: {
+    marginVertical: 6
+  },
+  group: {
+    backgroundColor: Colors.$backgroundNeutralMedium,
+    padding: 20,
+    margin: 20,
+    borderRadius: 6
   }
 });