Skip to content

Commit db9a8e6

Browse files
adids1221adids1221
committed
Merge branch 'master' into release
2 parents e91f31f + 559f9d7 commit db9a8e6

Some content is hidden

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

66 files changed

+554
-862
lines changed

‎android/build.gradle

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ buildscript {
66
minSdkVersion = 21
77
compileSdkVersion = 33
88
targetSdkVersion = 33
9-
RNNKotlinVersion = "1.6.0"
9+
RNNKotlinVersion = "1.8.0"
1010
// We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
1111
ndkVersion = "23.1.7779620"
1212
}

‎demo/src/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -210,6 +210,9 @@ module.exports = {
210210
get SpacingsScreen() {
211211
return require('./screens/foundationScreens/SpacingsScreen').default;
212212
},
213+
get RTLScreen() {
214+
return require('./screens/foundationScreens/RTLScreen').default;
215+
},
213216
// animationScreens
214217
get CardScannerScreen() {
215218
return require('./screens/componentScreens/CardScannerScreen').default;

‎demo/src/screens/MenuStructure.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ export const navigationData = {
77
{title: 'Dark Mode', tags: 'dark mode colors', screen: 'unicorn.style.DarkModeScreen'},
88
{title: 'Shadows (iOS)', tags: 'shadow', screen: 'unicorn.style.ShadowsScreen'},
99
{title: 'Spacings', tags: 'space margins paddings gutter', screen: 'unicorn.style.SpacingsScreen'},
10-
{title: 'Typography', tags: 'fonts text', screen: 'unicorn.style.TypographyScreen'}
10+
{title: 'Typography', tags: 'fonts text', screen: 'unicorn.style.TypographyScreen'},
11+
{title: 'RTL Support', tags: 'rtl', screen: 'unicorn.style.RTLScreen'}
1112
]
1213
},
1314
// Wrappers: {

‎demo/src/screens/foundationScreens/RTLScreen.tsx

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import React, {useState} from 'react';
2+
import {Colors, View, Text, Icon, TextField, Picker, Checkbox, Incubator, ListItem, Avatar, Button, Toast} from 'react-native-ui-lib';
3+
4+
const pickerItems = [
5+
{value: 0, label: 'לא'},
6+
{value: 1, label: 'כן'}
7+
];
8+
const chevronIcon = require('../../assets/icons/chevronRight.png');
9+
10+
const RTLScreen = () => {
11+
const [checkboxValue, setCheckboxValue] = useState(false);
12+
const [sliderValue, setSliderValue] = useState(0);
13+
14+
return (
15+
<View flex>
16+
<View flex padding-page>
17+
<Text text50>מסך דוגמא בעברית</Text>
18+
<Text text70>בדיקה לטקסט רץ בעברית שהוא מיושר כמו שצריך לימין</Text>
19+
<Text marginB-20 grey30>Toggle RTL/LTR from the settings screen</Text>
20+
21+
<TextField
22+
placeholder="שם מלא"
23+
floatingPlaceholder={false}
24+
label="שם"
25+
showCharCounter
26+
maxLength={20}
27+
validate="required"
28+
validationMessage="לא לשכוח שם"
29+
/>
30+
31+
<Picker placeholder="מגיע\ה" label="נוכחות" items={pickerItems}/>
32+
33+
<Checkbox
34+
value={checkboxValue}
35+
label={'עם תווית'}
36+
onValueChange={value => setCheckboxValue(value)}
37+
/>
38+
39+
<View row spread marginT-20 marginL-10>
40+
<Incubator.Slider
41+
onValueChange={value => setSliderValue(value)}
42+
value={sliderValue}
43+
minimumValue={0}
44+
maximumValue={100}
45+
step={1}
46+
containerStyle={{flex: 1}} // only for Slider in row
47+
/>
48+
<Text text70BO marginL-20 numberOfLines={1} style={{width: 40, alignSelf: 'center'}}>{sliderValue}</Text>
49+
</View>
50+
51+
<ListItem
52+
height={75.8}
53+
onPress={() => console.warn('list item press')}
54+
marginT-20
55+
>
56+
<ListItem.Part left marginR-20>
57+
<Avatar
58+
size={54}
59+
source={{uri: 'https://i.pravatar.cc/150?img=3'}}
60+
label={'IT'}
61+
/>
62+
</ListItem.Part>
63+
64+
<ListItem.Part middle column>
65+
<ListItem.Part>
66+
<Text text70 color={Colors.grey10} numberOfLines={1}>איש כלשהו</Text>
67+
</ListItem.Part>
68+
<ListItem.Part>
69+
<Text text80 color={Colors.grey40} numberOfLines={1}>מחובר/ת</Text>
70+
</ListItem.Part>
71+
</ListItem.Part>
72+
73+
<ListItem.Part right>
74+
<Button size={'small'} label={'שלח'} onPress={() => console.warn('list button press')}/>
75+
</ListItem.Part>
76+
</ListItem>
77+
78+
<View centerV row marginT-20 left>
79+
<Icon
80+
marginR-20
81+
source={chevronIcon}
82+
size={16}
83+
supportRTL
84+
/>
85+
<View center style={{height: 40, width: 40, borderRadius: 20, backgroundColor: Colors.red50}}>
86+
<Text text60>כאן</Text>
87+
</View>
88+
</View>
89+
</View>
90+
91+
<Toast visible position={'bottom'} message="עדיין לא עדכנת את לוח הזמנים ופרטי אנשי הצוות"/>
92+
</View>
93+
);
94+
};
95+
96+
export default RTLScreen;

‎demo/src/screens/foundationScreens/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@ export function registerScreens(registrar) {
55
registrar('unicorn.style.TypographyScreen', () => require('./TypographyScreen').default);
66
registrar('unicorn.style.ShadowsScreen', () => require('./ShadowsScreen').default);
77
registrar('unicorn.style.SpacingsScreen', () => require('./SpacingsScreen').default);
8+
registrar('unicorn.style.RTLScreen', () => require('./RTLScreen').default);
89
}

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

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

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

Lines changed: 42 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import _ from 'lodash';
22
import React, {Component} from 'react';
3-
import {Incubator} from 'react-native-ui-lib';
3+
import {Incubator, View, Text} from 'react-native-ui-lib';
44
import MockServer from './MockServer';
55

66
export default class CalendarScreen extends Component {
@@ -18,10 +18,11 @@ export default class CalendarScreen extends Component {
1818

1919
loadEvents = async (date: number) => {
2020
this.setState({showLoader: true});
21-
const {events} = this.state;
21+
// const {events} = this.state;
2222
const newEvents = await MockServer.getEvents(date);
2323
this.pageIndex++;
24-
this.setState({events: _.uniqBy([...events, ...newEvents], e => e.id), showLoader: false});
24+
// this.setState({events: _.uniqBy([...events, ...newEvents], e => e.id), showLoader: false});
25+
this.setState({events: newEvents, showLoader: false});
2526
};
2627

2728
onChangeDate = (date: number) => {
@@ -38,11 +39,46 @@ export default class CalendarScreen extends Component {
3839
this.loadEvents(date);
3940
};
4041

42+
// TODO: Fix type once we export them
43+
renderEvent = (eventItem: any) => {
44+
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'})}
56+
</Text>
57+
</View>
58+
);
59+
};
60+
61+
// TODO: Fix type once we export them
62+
renderHeader = (headerItem: any) => {
63+
return (
64+
<View centerV flex marginL-5>
65+
<Text>{headerItem.header}</Text>
66+
</View>
67+
);
68+
};
69+
4170
render() {
42-
const {date, events/* , showLoader */} = this.state;
71+
const {date, events, showLoader} = this.state;
72+
4373
return (
44-
<Incubator.Calendar data={events} initialDate={date} /* onChangeDate={this.onChangeDate} */ staticHeader>
45-
{/* <Incubator.Calendar.Agenda onEndReached={this.onEndReached} showLoader={showLoader}/> */}
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+
/>
4682
</Incubator.Calendar>
4783
);
4884
}

‎scripts/createCalendarMockData.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ function generateId() {
1414

1515
const data = [];
1616

17-
for (let year = 2021; year <= 2023; ++year) {
17+
for (let year = 2018; year <= 2028; ++year) {
1818
for (let month = 0; month <= 11; ++month) {
1919
for (let day = 1; day <= 31; day += Math.random() > 0.5 ? 2 : 1) {
2020
for (let hour = 9; hour <= 19; hour += Math.random() > 0.5 ? 4 : 3) {

‎src/commons/asBaseComponent.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import * as Modifiers from './modifiers';
44
import {Scheme, SchemeChangeListener, ThemeManager} from '../style';
55
import forwardRef from './forwardRef';
66
import UIComponent from './UIComponent';
7+
import type {ThemeComponent} from '../typings/common';
78

89
export interface BaseComponentInjectedProps {
910
/**
@@ -41,7 +42,7 @@ function asBaseComponent<PROPS, STATICS = {}>(WrappedComponent: React.ComponentT
4142
Scheme.removeChangeListener(this.appearanceListener);
4243
}
4344

44-
appearanceListener: SchemeChangeListener = (colorScheme) => {
45+
appearanceListener: SchemeChangeListener = colorScheme => {
4546
// iOS 13 and above will trigger this call with the wrong colorScheme value. So just ignore returned colorScheme for now
4647
// https://github.com/facebook/react-native/issues/28525
4748
// this.setState({colorScheme: Appearance.getColorScheme()});

‎src/commons/modifiers.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import {BorderRadiusesLiterals} from '../style/borderRadiuses';
55
import TypographyPresets from '../style/typographyPresets';
66
import {SpacingLiterals} from '../style/spacings';
77
import {colorsPalette} from '../style/colorsPalette';
8+
import type {Dictionary} from '../typings/common';
9+
810
export const FLEX_KEY_PATTERN = /^flex(G|S)?(-\d*)?$/;
911
export const PADDING_KEY_PATTERN = new RegExp(`padding[LTRBHV]?-([0-9]*|${Spacings.getKeysPattern()})`);
1012
export const MARGIN_KEY_PATTERN = new RegExp(`margin[LTRBHV]?-([0-9]*|${Spacings.getKeysPattern()})`);

‎src/components/WheelPicker/index.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,11 @@ const WheelPicker = ({
154154
}
155155
}, [items]);
156156

157+
useEffect(() => {
158+
//This effect should replace the onLyout function in the flatlist, should happen only once
159+
scrollToIndex(currentIndex, true);
160+
}, []);
161+
157162
useEffect(() => {
158163
// This effect making sure to reset index if initialValue has changed
159164
!isUndefined(initialValue) && scrollToIndex(currentIndex, true);
@@ -200,10 +205,6 @@ const WheelPicker = ({
200205
setTimeout(() => scrollToOffset(index, animated), 100);
201206
};
202207

203-
const scrollToPassedIndex = useCallback(() => {
204-
scrollToIndex(currentIndex, false);
205-
}, []);
206-
207208
const selectItem = useCallback((index: number) => {
208209
scrollToIndex(index, true);
209210
},
@@ -342,7 +343,6 @@ const WheelPicker = ({
342343
onScroll={scrollHandler}
343344
onMomentumScrollEnd={onValueChange}
344345
showsVerticalScrollIndicator={false}
345-
onLayout={scrollToPassedIndex}
346346
// @ts-ignore
347347
ref={scrollView}
348348
// @ts-expect-error

‎src/components/badge/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ export type BadgeProps = ViewProps &
8989
* Custom element to render instead of an icon
9090
*/
9191
customElement?: JSX.Element;
92+
key?: string | number;
9293
};
9394

9495
/**

‎src/components/button/index.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import {Platform, StyleSheet, LayoutAnimation, LayoutChangeEvent, ImageStyle, Te
44
import {asBaseComponent, forwardRef, Constants} from '../../commons/new';
55
import {Colors, Typography, BorderRadiuses} from 'style';
66
import TouchableOpacity from '../touchableOpacity';
7+
import type {Dictionary} from '../../typings/common';
78
import Text from '../text';
89
import Image from '../image';
910
import Icon from '../icon';
10-
1111
import {
1212
ButtonSize,
1313
ButtonAnimationDirection,
@@ -17,9 +17,10 @@ import {
1717
DEFAULT_PROPS,
1818
ButtonSizeProp
1919
} from './ButtonTypes';
20+
import {PADDINGS, HORIZONTAL_PADDINGS, MIN_WIDTH, DEFAULT_SIZE} from './ButtonConstants';
21+
2022
export {ButtonSize, ButtonAnimationDirection, ButtonProps};
2123

22-
import {PADDINGS, HORIZONTAL_PADDINGS, MIN_WIDTH, DEFAULT_SIZE} from './ButtonConstants';
2324

2425
class Button extends PureComponent<Props, ButtonState> {
2526
static displayName = 'Button';

‎src/components/chip/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -278,7 +278,7 @@ const Chip = ({
278278
marginRight: Spacings.s2
279279
};
280280
} else {
281-
return {marginHorizontal: Spacings.s3};
281+
return {paddingHorizontal: Spacings.s3};
282282
}
283283
case 'avatar':
284284
return {

‎src/components/colorPicker/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, {PureComponent} from 'react';
22
import {StyleSheet} from 'react-native';
3+
import {asBaseComponent} from '../../commons/new';
34
import Assets from '../../assets';
45
import {Colors} from '../../style';
56
import View from '../view';
@@ -129,7 +130,7 @@ class ColorPicker extends PureComponent<Props> {
129130
}
130131
}
131132

132-
export default ColorPicker;
133+
export default asBaseComponent<Props>(ColorPicker);
133134

134135
const plusButtonContainerWidth = SWATCH_SIZE + 20 + 12;
135136
const plusButtonContainerHeight = 92 - 2 * SWATCH_MARGIN;

‎src/components/icon/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React, {useMemo, forwardRef} from 'react';
33
import {Image, ImageProps, StyleSheet} from 'react-native';
44
import {asBaseComponent, BaseComponentInjectedProps, MarginModifiers, Constants} from '../../commons/new';
55
import {getAsset, isSvg, isBase64ImageContent} from '../../utils/imageUtils';
6-
import {RecorderProps} from '../../../typings/recorderTypes';
6+
import {RecorderProps} from '../../typings/recorderTypes';
77
import SvgImage from '../svgImage';
88

99
export type IconProps = Omit<ImageProps, 'source'> &

‎src/components/image/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818
BaseComponentInjectedProps,
1919
MarginModifiers
2020
} from '../../commons/new';
21-
import {RecorderProps} from '../../../typings/recorderTypes';
21+
import {RecorderProps} from '../../typings/recorderTypes';
2222
import {getAsset, isSvg} from '../../utils/imageUtils';
2323
import Overlay, {OverlayTypeType, OverlayIntensityType} from '../overlay';
2424
import SvgImage from '../svgImage';

‎src/components/picker/helpers/usePickerLabel.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const usePickerLabel = (props: UsePickerLabelProps) => {
2020
_.map(arr, item => (_.isPlainObject(item) ? getItemLabel?.(item) || item?.label : itemsByValue[item]?.label)),
2121
arr => _.join(arr, ', '))(value);
2222
},
23-
[getItemLabel]);
23+
[getItemLabel, items]);
2424

2525
const _getLabel = useCallback((value: PickerValue) => {
2626
if (_.isFunction(getLabel) && !_.isUndefined(getLabel(value))) {

‎src/components/picker/index.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -194,10 +194,15 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
194194
}
195195
}, [fieldType, preset, themeProps.trailingAccessory]);
196196

197-
const _renderCustomModal: ExpandableOverlayProps['renderCustomOverlay'] = ({visible, toggleExpandable}) => {
197+
const _renderCustomModal: ExpandableOverlayProps['renderCustomOverlay'] = ({
198+
visible,
199+
closeExpandable,
200+
toggleExpandable
201+
}) => {
198202
if (renderCustomModal) {
199203
const modalProps = {
200204
visible,
205+
closeModal: closeExpandable,
201206
toggleModal: toggleExpandable,
202207
onSearchChange: _onSearchChange,
203208
children,
@@ -256,7 +261,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
256261
const renderPickerInnerInput = () => {
257262
if (fieldType === PickerFieldTypes.filter) {
258263
return (
259-
<Text text70 style={others.style}>
264+
<Text text70 numberOfLines={1} style={others.style}>
260265
{label ?? others.placeholder}
261266
</Text>
262267
);

‎src/components/picker/types.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {ModalTopBarProps} from '../modal/TopBar';
55
// TODO: Replace with new TextField Props after migration to new TextField has completed
66
// import {TextFieldProps} from '../../../typings/components/Inputs';
77
import {TextFieldMethods, TextFieldProps as NewTextFieldProps} from '../../incubator/TextField';
8+
import type {ThemeComponent} from '../../typings/common';
89

910
// Note: enum values are uppercase due to legacy
1011
export enum PickerModes {

0 commit comments

Comments
 (0)