Merge branch 'master' of github.com:wix/react-native-ui-lib into release

Author: Inbal-Tish

demo/src/index.js

@@ -260,6 +260,9 @@ module.exports = {
       get IncubatorExpandableOverlay() {
         return require('./screens/incubatorScreens/IncubatorExpandableOverlayScreen').default;
       },
+      get IncubatorCalendarScreen() {
+        return require('./screens/incubatorScreens/IncubatorCalendarScreen').default;
+      },
       // realExamples
       get AppleMusic() {
         return require('./screens/realExamples/AppleMusic').default;

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

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import {data} from './MockData';
 
-const PAGE_SIZE = 100;
+const PAGE_SIZE = 400;
 const FAKE_FETCH_TIME = 1500;
 
 class MockServer {

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

@@ -1,13 +1,15 @@
 import _ from 'lodash';
+import {StyleSheet} from 'react-native';
 import React, {Component} from 'react';
-import {Incubator, View, Text} from 'react-native-ui-lib';
+import {Incubator, View, Text, Card, Colors} from 'react-native-ui-lib';
 import MockServer from './MockServer';
 
 export default class CalendarScreen extends Component {
   pageIndex = 0;
+  loadingEventsPromise?: Promise<any[]>;
 
   state = {
-    date: new Date().getTime(),
+    date: new Date(/* '2025-01-12' */).getTime(),
     events: [] as any[],
     showLoader: false
   };
@@ -16,17 +18,25 @@ export default class CalendarScreen extends Component {
     this.loadEvents(this.state.date);
   }
 
-  loadEvents = async (date: number) => {
+  // Note: we throttle event loading because initially the Agenda reach end and trigger extra event load
+  loadEvents = (async (date: number) => {
+
+    if (this.loadingEventsPromise) {
+      return;
+    }
+
     this.setState({showLoader: true});
     // const {events} = this.state;
-    const newEvents = await MockServer.getEvents(date);
+    this.loadingEventsPromise = MockServer.getEvents(date);
+    const newEvents = await this.loadingEventsPromise;
+    this.loadingEventsPromise = undefined;
     this.pageIndex++;
     // this.setState({events: _.uniqBy([...events, ...newEvents], e => e.id), showLoader: false});
     this.setState({events: newEvents, showLoader: false});
-  };
+  });
 
   onChangeDate = (date: number) => {
-    console.log('Date change: ', date);
+    /* console.log('Date change: ', date); */
     const {events} = this.state;
     if (date < events[0]?.start || date > _.last(events)?.start) {
       console.log('Load new events');
@@ -41,28 +51,37 @@ export default class CalendarScreen extends Component {
 
   // TODO: Fix type once we export them
   renderEvent = (eventItem: any) => {
+    const makeEventBigger = new Date(eventItem.start).getDay() % 2 === 0;
+    const startTime = new Date(eventItem.start).toLocaleString('en-GB', {
+      // month: 'short',
+      // day: 'numeric',
+      hour12: false,
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+    const endTime = new Date(eventItem.end).toLocaleString('en-GB', {
+      hour12: false,
+      hour: '2-digit',
+      minute: '2-digit'
+    });
     return (
-      <View marginH-10 padding-5 bg-blue70>
-        <Text>
-          Item for
-          {new Date(eventItem.start).toLocaleString('en-GB', {
-            month: 'short',
-            day: 'numeric',
-            hour12: false,
-            hour: '2-digit',
-            minute: '2-digit'
-          })}
-          -{new Date(eventItem.end).toLocaleString('en-GB', {hour12: false, hour: '2-digit', minute: '2-digit'})}
+      <Card marginH-s5 marginB-s4 padding-s4 backgroundColor={Colors.$backgroundGeneralLight}>
+        <Text text70>Event Title</Text>
+        {makeEventBigger && <Text>Event short description</Text>}
+        <Text marginT-s1 text90>
+          {startTime}-{endTime}
         </Text>
-      </View>
+      </Card>
     );
   };
 
   // TODO: Fix type once we export them
   renderHeader = (headerItem: any) => {
     return (
-      <View centerV flex marginL-5>
-        <Text>{headerItem.header}</Text>
+      <View bg-$backgroundDefault paddingH-s5 centerV flex paddingV-s2 style={styles.sectionHeader}>
+        <Text text70BO>
+          {new Date(headerItem.date).toLocaleString('en-US', {weekday: 'long', day: 'numeric', month: 'short'})}
+        </Text>
       </View>
     );
   };
@@ -71,15 +90,23 @@ export default class CalendarScreen extends Component {
     const {date, events, showLoader} = this.state;
 
     return (
-      <Incubator.Calendar data={events} initialDate={date} onChangeDate={this.onChangeDate} staticHeader>
-        <Incubator.Calendar.Agenda
-          renderEvent={this.renderEvent}
-          renderHeader={this.renderHeader}
-          // itemHeight={30}
-          onEndReached={this.onEndReached}
-          showLoader={showLoader}
-        />
-      </Incubator.Calendar>
+      <View flex>
+        <Incubator.Calendar data={events} initialDate={date} onChangeDate={this.onChangeDate} staticHeader>
+          <Incubator.Calendar.Agenda
+            renderEvent={this.renderEvent}
+            renderHeader={this.renderHeader}
+            onEndReached={this.onEndReached}
+            showLoader={showLoader}
+          />
+        </Incubator.Calendar>
+        <Incubator.Toast visible={showLoader} message="Loading events..." preset="general"/>
+      </View>
     );
   }
 }
+
+const styles = StyleSheet.create({
+  sectionHeader: {
+    opacity: 0.9
+  }
+});

docuilib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilib-docs",
-  "version": "3.25.0",
+  "version": "3.26.0",
   "main": "./src/index.ts",
   "scripts": {
     "docusaurus": "docusaurus",

docuilib/sidebars.js

@@ -22,9 +22,7 @@ const componentsCategories = {
   form: 'Form',
   // dateTime: 'Date & Time',
   overlays: 'Overlays',
-  charts: 'Charts',
-  incubator: 'Incubator',
-  infra: 'Infra'
+  charts: 'Charts'
 };
 
 module.exports = {
@@ -74,6 +72,28 @@ module.exports = {
             ]
           };
         })
+    },
+    {
+      type: 'category',
+      label: 'Incubator',
+      collapsible: false,
+      items: [
+        {
+          type: 'autogenerated',
+          dirName: `components/incubator`
+        }
+      ]
+    },
+    {
+      type: 'category',
+      label: 'Infra',
+      collapsible: false,
+      items: [
+        {
+          type: 'autogenerated',
+          dirName: `components/infra`
+        }
+      ]
     }
   ]
 };

docuilib/src/components/pageComponents/ContentItem.tsx

@@ -96,7 +96,7 @@ type ContentItemProps = {
 
 export const ContentItem = ({item, componentName, showCodeButton, category}: ContentItemProps) => {
   const getFigmaEmbed = (value: string, height = 450) => {
-    const modifiedValue = !value.includes('page-selector=') ? value + '&page-selector=false' : value;
+    const modifiedValue = !value.includes('page-selector=') ? value + '&page-selector=false&footer=false' : value;
     return <iframe width={'100%'} height={height} src={modifiedValue}/>;
   };
 

docuilib/src/components/pageComponents/PropsList.tsx

@@ -73,7 +73,20 @@ export const PropsList = ({props}) => {
             {defaultValue}
           </span>
           {prop.note && (
-            <span key={`${props.name}-note`} style={{display: 'block', marginBottom: 28, fontSize: '16px', fontWeight: '700'}}>{prop.note}</span>
+            <span
+              key={`${props.name}-note`}
+              style={{
+                display: 'block',
+                marginBottom: 28,
+                fontSize: '16px',
+                fontWeight: '400',
+                backgroundColor: '#F0F2F5',
+                padding: '24px 40px',
+                borderRadius: '8px'
+              }}
+            >
+              {prop.note}
+            </span>
           )}
         </>
       );

docuilib/src/theme/ReactLiveScope/index.js

@@ -10,6 +10,7 @@ import Card from 'react-native-ui-lib/card';
 import Carousel from 'react-native-ui-lib/carousel';
 import Checkbox from 'react-native-ui-lib/checkbox';
 import Chip from 'react-native-ui-lib/chip';
+import ChipsInput from 'react-native-ui-lib/chipsInput';
 import ColorPalette from 'react-native-ui-lib/colorPalette';
 import ColorPicker from 'react-native-ui-lib/colorPicker';
 import ColorSwatch from 'react-native-ui-lib/colorSwatch';
@@ -87,6 +88,7 @@ const ReactLiveScope = {
   Carousel,
   Checkbox,
   Chip,
+  ChipsInput,
   ColorPalette,
   ColorPicker,
   Colors,

scripts/docs/buildDocsCommon.js

@@ -26,7 +26,8 @@ const VALID_COMPONENTS_CATEGORIES = [
   'incubator',
   'infra',
   // non components categories
-  'services'
+  'services',
+  'dev' // development category for components we don't want to render in our docs (used in test.api.json)
 ];
 
 function buildDocs(apiFolders, componentsPreProcess) {

scripts/release/prReleaseNotesCommon.js

@@ -196,7 +196,7 @@ async function generateReleaseNotes(latestVersion,
   newVersion,
   fileNamePrefix,
   repo,
-  header = '',
+  getHeader = () => '',
   tagPrefix = '',
   categories = []) {
   let latestVer, newVer;
@@ -214,6 +214,7 @@ async function generateReleaseNotes(latestVersion,
   });
 
   rl.on('close', () => {
+    const header = getHeader(newVer);
     console.info(`Current latest version is v${latestVer}`);
     console.info(`Generating release notes out or PRs for v${newVer}`);
     _generateReleaseNotes(latestVer, newVer, fileNamePrefix, repo, header, tagPrefix, categories);

src/components/WheelPicker/Item.tsx

@@ -25,6 +25,7 @@ interface InternalProps<T> extends WheelPickerItemProps<T> {
   inactiveColor?: string;
   style?: TextStyle;
   onSelect: (index: number) => void;
+  onPress?: () => void;
   centerH?: boolean;
   fakeLabel?: string;
   fakeLabelStyle?: TextStyle;
@@ -42,6 +43,7 @@ const WheelPickerItem = <T extends WheelPickerItemValue = number>(props: Interna
     fakeLabelProps,
     itemHeight,
     onSelect,
+    onPress,
     offset,
     activeColor = Colors.$textPrimary,
     inactiveColor = Colors.$textNeutralHeavy,
@@ -76,6 +78,11 @@ const WheelPickerItem = <T extends WheelPickerItemValue = number>(props: Interna
     return [animatedColorStyle, style, fakeLabel ? textWithLabelPaddingStyle : styles.textPadding];
   }, [style, fakeLabel, animatedColorStyle, textWithLabelPaddingStyle]);
 
+  const _onPress = useCallback(() => {
+    selectItem();
+    onPress?.();
+  }, [onPress, selectItem]);
+
   const _fakeLabelStyle = useMemo(() => StyleSheet.flatten([fakeLabelStyle, styles.hidden]), [fakeLabelStyle]);
   return (
     <AnimatedTouchableOpacity
@@ -86,7 +93,7 @@ const WheelPickerItem = <T extends WheelPickerItemValue = number>(props: Interna
       centerH={align ? align === WheelPickerAlign.CENTER : centerH}
       right={align ? align === WheelPickerAlign.RIGHT : !centerH}
       left={align === WheelPickerAlign.LEFT}
-      onPress={selectItem}
+      onPress={_onPress}
       // @ts-ignore reanimated2
       index={index}
       testID={testID}