Skip to content

Commit 5827477

Browse files
ethansharethanshar
committed
Merge branch 'master' into release
2 parents d01a899 + 32ad53c commit 5827477

Some content is hidden

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

45 files changed

+1189
-56
lines changed

‎demo/src/index.js

+3
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,9 @@ module.exports = {
164164
return require('./screens/componentScreens/WizardScreen').default;
165165
},
166166
// nativeComponentScreens
167+
get DynamicFontsScreen() {
168+
return require('./screens/nativeComponentScreens/DynamicFontsScreen').default;
169+
},
167170
get HighlightOverlayViewScreen() {
168171
return require('./screens/nativeComponentScreens/HighlightOverlayViewScreen').default;
169172
},

‎demo/src/screens/MenuStructure.js

+5
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,11 @@ export const navigationData = {
141141
tags: 'KeyboardAwareScrollView',
142142
screen: 'unicorn.components.KeyboardAwareScrollViewScreen'
143143
},
144+
{
145+
title: 'Dynamic Fonts',
146+
tags: 'dynamic fonts load download',
147+
screen: 'unicorn.nativeComponents.DynamicFontsScreen'
148+
},
144149
{
145150
title: 'Highlight Overlay',
146151
tags: 'native overlay',

‎demo/src/screens/componentScreens/CheckboxScreen.tsx

+17-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, {Component} from 'react';
22
import {StyleSheet} from 'react-native';
3-
import {Checkbox, Assets, Text, View, Colors} from 'react-native-ui-lib'; //eslint-disable-line
3+
import {Assets, Colors, View, Text, Checkbox} from 'react-native-ui-lib'; //eslint-disable-line
44

55
export default class CheckboxScreen extends Component {
66
state = {
@@ -9,17 +9,19 @@ export default class CheckboxScreen extends Component {
99
value3: true,
1010
value4: true,
1111
value5: false,
12-
value6: false
12+
value6: false,
13+
value7: true
1314
};
14-
15+
1516
render() {
1617
return (
1718
<View flex padding-page>
1819
<Text text40 $textDefault marginB-20>
1920
Checkbox
2021
</Text>
2122

22-
<Text marginB-s4>Customizable UI</Text>
23+
<Text marginV-s4>Customizable UI</Text>
24+
2325
<View row marginB-s5 centerV>
2426
<Checkbox value={this.state.value1} onValueChange={value1 => this.setState({value1})}/>
2527
<Checkbox
@@ -50,10 +52,18 @@ export default class CheckboxScreen extends Component {
5052
containerStyle={styles.checkbox}
5153
/>
5254

55+
<Checkbox
56+
value={this.state.value7}
57+
onValueChange={value7 => this.setState({value7})}
58+
indeterminate
59+
label={'Indeterminate state'}
60+
color={Colors.green20}
61+
containerStyle={styles.checkbox}
62+
/>
63+
5364
<View row style={styles.row}>
54-
<Text $textDefault marginR-10>
55-
Disabled States
56-
</Text>
65+
<Text $textDefault marginR-10>Disabled States</Text>
66+
5767
<Checkbox
5868
disabled
5969
value={this.state.value5}

‎demo/src/screens/componentScreens/ColorPickerScreen.tsx

+23-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import _ from 'lodash';
22
import React, {Component} from 'react';
33
import {StyleSheet, ScrollView} from 'react-native';
4-
import {Colors, View, Text, ColorPicker, ColorPalette, ColorName, ColorInfo} from 'react-native-ui-lib';
4+
import {Colors, View, Text, ColorPicker, ColorPalette, ColorName, ColorInfo, TouchableOpacity, ColorPickerDialog} from 'react-native-ui-lib';
55
import {renderMultipleSegmentOptions} from '../ExampleScreenPresenter';
66

77
interface State {
@@ -10,6 +10,7 @@ interface State {
1010
customColors: string[];
1111
paletteChange: boolean;
1212
backgroundColor: string;
13+
showPicker: boolean;
1314
}
1415

1516
const INITIAL_COLOR = Colors.$backgroundPrimaryHeavy;
@@ -31,7 +32,8 @@ export default class ColorPickerScreen extends Component<{}, State> {
3132
textColor: Colors.$textDefaultLight,
3233
customColors: [],
3334
paletteChange: false,
34-
backgroundColor: Colors.$backgroundDefault
35+
backgroundColor: Colors.$backgroundDefault,
36+
showPicker: false
3537
};
3638

3739
onDismiss = () => {
@@ -123,6 +125,25 @@ export default class ColorPickerScreen extends Component<{}, State> {
123125
</Text>
124126
</View>
125127
</View>
128+
129+
<Text center text60 marginT-10>Color Picker Dialog</Text>
130+
<View center>
131+
<TouchableOpacity
132+
margin-10
133+
center
134+
style={{width: 60, height: 60, borderWidth: 1, borderRadius: 30, backgroundColor: color}}
135+
onPress={() => this.setState({showPicker: true})}
136+
>
137+
<Text>Press</Text>
138+
</TouchableOpacity>
139+
</View>
140+
<ColorPickerDialog
141+
visible={this.state.showPicker}
142+
initialColor={color}
143+
key={color}
144+
onDismiss={() => this.setState({showPicker: false})}
145+
onSubmit={this.onSubmit}
146+
/>
126147
</ScrollView>
127148
);
128149
}

‎demo/src/screens/nativeComponentScreens/DynamicFontsScreen.tsx

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import React, {Component, Fragment} from 'react';
2+
import {ScrollView} from 'react-native';
3+
import {View, Text, Button, DynamicFonts} from 'react-native-ui-lib';
4+
import {renderMultipleSegmentOptions} from '../ExampleScreenPresenter';
5+
6+
enum FontLoadingEnum {
7+
SINGLE_FONT = 'singleFont',
8+
FONT_FAMILY = 'fontFamily'
9+
}
10+
11+
type State = {
12+
fontLoadingType: FontLoadingEnum;
13+
loadedFonts: string[];
14+
};
15+
16+
export default class DynamicFontsScreen extends Component<{}, State> {
17+
private fontDownloader: InstanceType<typeof DynamicFonts> = new DynamicFonts({debug: true});
18+
19+
state = {
20+
fontLoadingType: FontLoadingEnum.SINGLE_FONT,
21+
loadedFonts: []
22+
};
23+
24+
renderSingleFont = () => {
25+
const {loadedFonts} = this.state;
26+
return (
27+
<Fragment>
28+
<Text style={{fontSize: 24, lineHeight: 28, fontFamily: 'System'}}>{`
29+
System:
30+
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
31+
`}</Text>
32+
{loadedFonts.length > 0 && (
33+
<Text marginT-20 style={{fontSize: 24, lineHeight: 28, fontFamily: loadedFonts[0]}}>{`
34+
${loadedFonts}:
35+
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
36+
`}</Text>
37+
)}
38+
<Button
39+
marginV-20
40+
label="Load a single font"
41+
onPress={async () => {
42+
try {
43+
const loadedFonts = await this.fontDownloader.getFont({
44+
fontUri:
45+
'https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/TypographyKits/fonts/Vollkorn/Vollkorn-Regular.ttf',
46+
fontName: 'Vollkorn-Regular',
47+
fontExtension: 'ttf'
48+
});
49+
this.setState({loadedFonts: [loadedFonts]});
50+
} catch (error) {
51+
console.log('Error!', error);
52+
}
53+
}}
54+
/>
55+
</Fragment>
56+
);
57+
};
58+
59+
renderFontFamily = () => {
60+
const {loadedFonts} = this.state;
61+
return (
62+
<Fragment>
63+
<Text style={{fontSize: 16, lineHeight: 18, fontFamily: 'System'}}>{`
64+
System:
65+
ABCDEFGH abcdefgh
66+
`}</Text>
67+
<ScrollView>
68+
{loadedFonts?.map(loadedFont => (
69+
<Text key={loadedFont} style={{fontSize: 16, lineHeight: 18, fontFamily: loadedFont}}>{`
70+
${loadedFont}:
71+
ABCDEFGH abcdefgh
72+
`}</Text>
73+
))}
74+
</ScrollView>
75+
76+
<Button
77+
marginV-20
78+
label="Load a complete font family"
79+
onPress={async () => {
80+
try {
81+
const loadedFonts = await this.fontDownloader.getFontFamily('https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/TypographyKits/fonts/Vollkorn/',
82+
[
83+
'Bold',
84+
'BoldItalic',
85+
'ExtraBold',
86+
'ExtraBoldItalic',
87+
'Italic',
88+
'Medium',
89+
'MediumItalic',
90+
'Regular',
91+
'SemiBold'
92+
],
93+
'ttf',
94+
'Vollkorn-');
95+
this.setState({loadedFonts});
96+
} catch (error) {
97+
console.log('Error!', error);
98+
}
99+
}}
100+
/>
101+
</Fragment>
102+
);
103+
};
104+
105+
render() {
106+
const {fontLoadingType, loadedFonts} = this.state;
107+
return (
108+
<View bg-grey80 flex padding-20>
109+
{renderMultipleSegmentOptions.call(this, 'Font loading:', 'fontLoadingType', [
110+
{label: 'Single', value: FontLoadingEnum.SINGLE_FONT},
111+
{label: 'Family', value: FontLoadingEnum.FONT_FAMILY}
112+
])}
113+
<View flex center key={`${loadedFonts}`}>
114+
{fontLoadingType === FontLoadingEnum.SINGLE_FONT ? this.renderSingleFont() : this.renderFontFamily()}
115+
{loadedFonts && <Text text80>Loaded fonts: {loadedFonts.map(loadedFont => `${loadedFont} `)}</Text>}
116+
</View>
117+
</View>
118+
);
119+
}
120+
}

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

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export function registerScreens(registrar) {
2+
registrar('unicorn.nativeComponents.DynamicFontsScreen', () => require('./DynamicFontsScreen').default);
23
registrar('unicorn.nativeComponents.HighlightOverlayViewScreen', () => require('./HighlightOverlayViewScreen').default);
34
registrar('unicorn.nativeComponents.SafeAreaSpacerViewScreen', () => require('./SafeAreaSpacerViewScreen').default);
45
registrar('unicorn.nativeComponents.KeyboardTrackingViewScreen', () => require('./KeyboardTrackingViewScreen').default);

‎docs/getting-started/setup.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ If you plan on using specific components, see **UILib Packages** above.
3434

3535
### Peer Dependencies
3636
UILIb has mandatory peer dependencies on the following packages:
37-
- react-native-reanimated (Make sure to follow [Reanimated setup guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation))
37+
- react-native-reanimated (Make sure to follow [Reanimated setup guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started))
3838
- react-native-gesture-handler
3939

4040
### Optional Dependencies
@@ -68,6 +68,10 @@ Some of the components are using the native dependencies listed below - those ar
6868
- `cd react-native-ui-lib`
6969
- Install dependencies `npm install`
7070
- (for iOS) `cd ios && pod install`
71+
- (for Windows)
72+
- update `...&& export DEV_MODE...` with `...&& set DEV_MODE...`
73+
- copy `gradlew.bat` from a recent project to `./android/`
74+
- install fb-watchman for [windows](https://facebook.github.io/watchman/docs/install#prebuilt-binaries) or `choco install watchman`
7175
- Start the packager `npm start`
7276
- Build the app `npm run ios` or `npm run android` (or from Xcode or Android Studio).
7377

‎jestSetup/jest-setup.js

+11
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,17 @@ jest.mock('react-native', () => {
115115
return reactNative;
116116
});
117117

118+
jest.mock('react-native-fs',
119+
() => {
120+
return {
121+
exists: jest.fn(() => true),
122+
readFile: jest.fn(),
123+
downloadFile: jest.fn(),
124+
mkdir: jest.fn()
125+
};
126+
},
127+
{virtual: true});
128+
118129
Animated.timing = (value, config) => ({
119130
start: callback => {
120131
value.setValue(config.toValue);

‎lib/android/src/main/java/com/wix/reactnativeuilib/UiLibPackageList.java

+2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import android.app.Application;
44
import com.facebook.react.ReactPackage;
55

6+
import com.wix.reactnativeuilib.dynamicfont.DynamicFontPackage;
67
import com.wix.reactnativeuilib.highlighterview.HighlighterViewPackage;
78
import com.wix.reactnativeuilib.keyboardinput.KeyboardInputPackage;
89
import com.wix.reactnativeuilib.textinput.TextInputDelKeyHandlerPackage;
@@ -20,6 +21,7 @@ public UiLibPackageList(Application application) {
2021

2122
public List<ReactPackage> getPackageList() {
2223
return Arrays.asList(
24+
new DynamicFontPackage(),
2325
new HighlighterViewPackage(),
2426
new TextInputDelKeyHandlerPackage(),
2527
new KeyboardInputPackage(application)

0 commit comments

Comments
 (0)