Skip to content

Commit 1e12f62

Browse files
Inbal-TishInbal-Tish
committed
Merge branch 'master' of github.com:wix/react-native-ui-lib into release
2 parents b99a836 + 7ba8152 commit 1e12f62

File tree

41 files changed

+811
-235
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+811
-235
lines changed

‎demo/src/index.js

+3
Original file line numberDiff line numberDiff line change
@@ -260,6 +260,9 @@ module.exports = {
260260
get IncubatorExpandableOverlay() {
261261
return require('./screens/incubatorScreens/IncubatorExpandableOverlayScreen').default;
262262
},
263+
get IncubatorCalendarScreen() {
264+
return require('./screens/incubatorScreens/IncubatorCalendarScreen').default;
265+
},
263266
// realExamples
264267
get AppleMusic() {
265268
return require('./screens/realExamples/AppleMusic').default;

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import _ from 'lodash';
22
import {data} from './MockData';
33

4-
const PAGE_SIZE = 100;
4+
const PAGE_SIZE = 400;
55
const FAKE_FETCH_TIME = 1500;
66

77
class MockServer {

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

+56-29
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import _ from 'lodash';
2+
import {StyleSheet} from 'react-native';
23
import React, {Component} from 'react';
3-
import {Incubator, View, Text} from 'react-native-ui-lib';
4+
import {Incubator, View, Text, Card, Colors} from 'react-native-ui-lib';
45
import MockServer from './MockServer';
56

67
export default class CalendarScreen extends Component {
78
pageIndex = 0;
9+
loadingEventsPromise?: Promise<any[]>;
810

911
state = {
10-
date: new Date().getTime(),
12+
date: new Date(/* '2025-01-12' */).getTime(),
1113
events: [] as any[],
1214
showLoader: false
1315
};
@@ -16,17 +18,25 @@ export default class CalendarScreen extends Component {
1618
this.loadEvents(this.state.date);
1719
}
1820

19-
loadEvents = async (date: number) => {
21+
// Note: we throttle event loading because initially the Agenda reach end and trigger extra event load
22+
loadEvents = (async (date: number) => {
23+
24+
if (this.loadingEventsPromise) {
25+
return;
26+
}
27+
2028
this.setState({showLoader: true});
2129
// const {events} = this.state;
22-
const newEvents = await MockServer.getEvents(date);
30+
this.loadingEventsPromise = MockServer.getEvents(date);
31+
const newEvents = await this.loadingEventsPromise;
32+
this.loadingEventsPromise = undefined;
2333
this.pageIndex++;
2434
// this.setState({events: _.uniqBy([...events, ...newEvents], e => e.id), showLoader: false});
2535
this.setState({events: newEvents, showLoader: false});
26-
};
36+
});
2737

2838
onChangeDate = (date: number) => {
29-
console.log('Date change: ', date);
39+
/* console.log('Date change: ', date); */
3040
const {events} = this.state;
3141
if (date < events[0]?.start || date > _.last(events)?.start) {
3242
console.log('Load new events');
@@ -41,28 +51,37 @@ export default class CalendarScreen extends Component {
4151

4252
// TODO: Fix type once we export them
4353
renderEvent = (eventItem: any) => {
54+
const makeEventBigger = new Date(eventItem.start).getDay() % 2 === 0;
55+
const startTime = new Date(eventItem.start).toLocaleString('en-GB', {
56+
// month: 'short',
57+
// day: 'numeric',
58+
hour12: false,
59+
hour: '2-digit',
60+
minute: '2-digit'
61+
});
62+
const endTime = new Date(eventItem.end).toLocaleString('en-GB', {
63+
hour12: false,
64+
hour: '2-digit',
65+
minute: '2-digit'
66+
});
4467
return (
45-
<View marginH-10 padding-5 bg-blue70>
46-
<Text>
47-
Item for
48-
{new Date(eventItem.start).toLocaleString('en-GB', {
49-
month: 'short',
50-
day: 'numeric',
51-
hour12: false,
52-
hour: '2-digit',
53-
minute: '2-digit'
54-
})}
55-
-{new Date(eventItem.end).toLocaleString('en-GB', {hour12: false, hour: '2-digit', minute: '2-digit'})}
68+
<Card marginH-s5 marginB-s4 padding-s4 backgroundColor={Colors.$backgroundGeneralLight}>
69+
<Text text70>Event Title</Text>
70+
{makeEventBigger && <Text>Event short description</Text>}
71+
<Text marginT-s1 text90>
72+
{startTime}-{endTime}
5673
</Text>
57-
</View>
74+
</Card>
5875
);
5976
};
6077

6178
// TODO: Fix type once we export them
6279
renderHeader = (headerItem: any) => {
6380
return (
64-
<View centerV flex marginL-5>
65-
<Text>{headerItem.header}</Text>
81+
<View bg-$backgroundDefault paddingH-s5 centerV flex paddingV-s2 style={styles.sectionHeader}>
82+
<Text text70BO>
83+
{new Date(headerItem.date).toLocaleString('en-US', {weekday: 'long', day: 'numeric', month: 'short'})}
84+
</Text>
6685
</View>
6786
);
6887
};
@@ -71,15 +90,23 @@ export default class CalendarScreen extends Component {
7190
const {date, events, showLoader} = this.state;
7291

7392
return (
74-
<Incubator.Calendar data={events} initialDate={date} onChangeDate={this.onChangeDate} staticHeader>
75-
<Incubator.Calendar.Agenda
76-
renderEvent={this.renderEvent}
77-
renderHeader={this.renderHeader}
78-
// itemHeight={30}
79-
onEndReached={this.onEndReached}
80-
showLoader={showLoader}
81-
/>
82-
</Incubator.Calendar>
93+
<View flex>
94+
<Incubator.Calendar data={events} initialDate={date} onChangeDate={this.onChangeDate} staticHeader>
95+
<Incubator.Calendar.Agenda
96+
renderEvent={this.renderEvent}
97+
renderHeader={this.renderHeader}
98+
onEndReached={this.onEndReached}
99+
showLoader={showLoader}
100+
/>
101+
</Incubator.Calendar>
102+
<Incubator.Toast visible={showLoader} message="Loading events..." preset="general"/>
103+
</View>
83104
);
84105
}
85106
}
107+
108+
const styles = StyleSheet.create({
109+
sectionHeader: {
110+
opacity: 0.9
111+
}
112+
});

‎docuilib/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "uilib-docs",
3-
"version": "3.25.0",
3+
"version": "3.26.0",
44
"main": "./src/index.ts",
55
"scripts": {
66
"docusaurus": "docusaurus",

‎docuilib/sidebars.js

+23-3
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,7 @@ const componentsCategories = {
2222
form: 'Form',
2323
// dateTime: 'Date & Time',
2424
overlays: 'Overlays',
25-
charts: 'Charts',
26-
incubator: 'Incubator',
27-
infra: 'Infra'
25+
charts: 'Charts'
2826
};
2927

3028
module.exports = {
@@ -74,6 +72,28 @@ module.exports = {
7472
]
7573
};
7674
})
75+
},
76+
{
77+
type: 'category',
78+
label: 'Incubator',
79+
collapsible: false,
80+
items: [
81+
{
82+
type: 'autogenerated',
83+
dirName: `components/incubator`
84+
}
85+
]
86+
},
87+
{
88+
type: 'category',
89+
label: 'Infra',
90+
collapsible: false,
91+
items: [
92+
{
93+
type: 'autogenerated',
94+
dirName: `components/infra`
95+
}
96+
]
7797
}
7898
]
7999
};

‎docuilib/src/components/pageComponents/ContentItem.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ type ContentItemProps = {
9696

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

‎docuilib/src/components/pageComponents/PropsList.tsx

+14-1
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,20 @@ export const PropsList = ({props}) => {
7373
{defaultValue}
7474
</span>
7575
{prop.note && (
76-
<span key={`${props.name}-note`} style={{display: 'block', marginBottom: 28, fontSize: '16px', fontWeight: '700'}}>{prop.note}</span>
76+
<span
77+
key={`${props.name}-note`}
78+
style={{
79+
display: 'block',
80+
marginBottom: 28,
81+
fontSize: '16px',
82+
fontWeight: '400',
83+
backgroundColor: '#F0F2F5',
84+
padding: '24px 40px',
85+
borderRadius: '8px'
86+
}}
87+
>
88+
{prop.note}
89+
</span>
7790
)}
7891
</>
7992
);

‎docuilib/src/theme/ReactLiveScope/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import Card from 'react-native-ui-lib/card';
1010
import Carousel from 'react-native-ui-lib/carousel';
1111
import Checkbox from 'react-native-ui-lib/checkbox';
1212
import Chip from 'react-native-ui-lib/chip';
13+
import ChipsInput from 'react-native-ui-lib/chipsInput';
1314
import ColorPalette from 'react-native-ui-lib/colorPalette';
1415
import ColorPicker from 'react-native-ui-lib/colorPicker';
1516
import ColorSwatch from 'react-native-ui-lib/colorSwatch';
@@ -87,6 +88,7 @@ const ReactLiveScope = {
8788
Carousel,
8889
Checkbox,
8990
Chip,
91+
ChipsInput,
9092
ColorPalette,
9193
ColorPicker,
9294
Colors,

‎scripts/docs/buildDocsCommon.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ const VALID_COMPONENTS_CATEGORIES = [
2626
'incubator',
2727
'infra',
2828
// non components categories
29-
'services'
29+
'services',
30+
'dev' // development category for components we don't want to render in our docs (used in test.api.json)
3031
];
3132

3233
function buildDocs(apiFolders, componentsPreProcess) {

‎scripts/release/prReleaseNotesCommon.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@ async function generateReleaseNotes(latestVersion,
196196
newVersion,
197197
fileNamePrefix,
198198
repo,
199-
header = '',
199+
getHeader = () => '',
200200
tagPrefix = '',
201201
categories = []) {
202202
let latestVer, newVer;
@@ -214,6 +214,7 @@ async function generateReleaseNotes(latestVersion,
214214
});
215215

216216
rl.on('close', () => {
217+
const header = getHeader(newVer);
217218
console.info(`Current latest version is v${latestVer}`);
218219
console.info(`Generating release notes out or PRs for v${newVer}`);
219220
_generateReleaseNotes(latestVer, newVer, fileNamePrefix, repo, header, tagPrefix, categories);

‎src/components/WheelPicker/Item.tsx

+8-1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ interface InternalProps<T> extends WheelPickerItemProps<T> {
2525
inactiveColor?: string;
2626
style?: TextStyle;
2727
onSelect: (index: number) => void;
28+
onPress?: () => void;
2829
centerH?: boolean;
2930
fakeLabel?: string;
3031
fakeLabelStyle?: TextStyle;
@@ -42,6 +43,7 @@ const WheelPickerItem = <T extends WheelPickerItemValue = number>(props: Interna
4243
fakeLabelProps,
4344
itemHeight,
4445
onSelect,
46+
onPress,
4547
offset,
4648
activeColor = Colors.$textPrimary,
4749
inactiveColor = Colors.$textNeutralHeavy,
@@ -76,6 +78,11 @@ const WheelPickerItem = <T extends WheelPickerItemValue = number>(props: Interna
7678
return [animatedColorStyle, style, fakeLabel ? textWithLabelPaddingStyle : styles.textPadding];
7779
}, [style, fakeLabel, animatedColorStyle, textWithLabelPaddingStyle]);
7880

81+
const _onPress = useCallback(() => {
82+
selectItem();
83+
onPress?.();
84+
}, [onPress, selectItem]);
85+
7986
const _fakeLabelStyle = useMemo(() => StyleSheet.flatten([fakeLabelStyle, styles.hidden]), [fakeLabelStyle]);
8087
return (
8188
<AnimatedTouchableOpacity
@@ -86,7 +93,7 @@ const WheelPickerItem = <T extends WheelPickerItemValue = number>(props: Interna
8693
centerH={align ? align === WheelPickerAlign.CENTER : centerH}
8794
right={align ? align === WheelPickerAlign.RIGHT : !centerH}
8895
left={align === WheelPickerAlign.LEFT}
89-
onPress={selectItem}
96+
onPress={_onPress}
9097
// @ts-ignore reanimated2
9198
index={index}
9299
testID={testID}

0 commit comments

Comments
 (0)