unicorn-demo-app 7.6.2 → 7.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/index.js +3 -0
- package/src/screens/MenuStructure.js +2 -1
- package/src/screens/foundationScreens/RTLScreen.tsx +96 -0
- package/src/screens/foundationScreens/index.js +1 -0
- package/src/screens/incubatorScreens/IncubatorCalendarScreen/MockData.ts +1 -1
- package/src/screens/incubatorScreens/IncubatorCalendarScreen/index.tsx +42 -6
package/package.json
CHANGED
package/src/index.js
CHANGED
|
@@ -210,6 +210,9 @@ module.exports = {
|
|
|
210
210
|
get SpacingsScreen() {
|
|
211
211
|
return require('./screens/foundationScreens/SpacingsScreen').default;
|
|
212
212
|
},
|
|
213
|
+
get RTLScreen() {
|
|
214
|
+
return require('./screens/foundationScreens/RTLScreen').default;
|
|
215
|
+
},
|
|
213
216
|
// animationScreens
|
|
214
217
|
get CardScannerScreen() {
|
|
215
218
|
return require('./screens/componentScreens/CardScannerScreen').default;
|
|
@@ -7,7 +7,8 @@ export const navigationData = {
|
|
|
7
7
|
{title: 'Dark Mode', tags: 'dark mode colors', screen: 'unicorn.style.DarkModeScreen'},
|
|
8
8
|
{title: 'Shadows (iOS)', tags: 'shadow', screen: 'unicorn.style.ShadowsScreen'},
|
|
9
9
|
{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'}
|
|
11
12
|
]
|
|
12
13
|
},
|
|
13
14
|
// Wrappers: {
|
|
@@ -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;
|
|
@@ -5,4 +5,5 @@ export function registerScreens(registrar) {
|
|
|
5
5
|
registrar('unicorn.style.TypographyScreen', () => require('./TypographyScreen').default);
|
|
6
6
|
registrar('unicorn.style.ShadowsScreen', () => require('./ShadowsScreen').default);
|
|
7
7
|
registrar('unicorn.style.SpacingsScreen', () => require('./SpacingsScreen').default);
|
|
8
|
+
registrar('unicorn.style.RTLScreen', () => require('./RTLScreen').default);
|
|
8
9
|
}
|