Merge branch 'master' into release

Author: M-i-k-e-l

GestureDetectorMock.tsx

@@ -127,3 +127,7 @@ class MyScreen extends Component {
   }
 }
 ```
+
+## Contributing
+ See [Contribution Guide](https://github.com/wix/react-native-ui-lib/blob/master/CONTRIBUTING.md)
+ 

README.md

@@ -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'}

demo/src/screens/componentScreens/HintsScreen.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}

demo/src/screens/componentScreens/ModalScreen.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
   }
 });
 

demo/src/screens/componentScreens/SegmentedControlScreen.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()}

demo/src/screens/componentScreens/SliderScreen.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

demo/src/screens/componentScreens/SortableListScreen.tsx

@@ -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();

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

@@ -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>
     );
   }
 }