Skip to content

Commit 960a723

Browse files
M-i-k-e-lM-i-k-e-l
committed
Merge branch 'master' into release
2 parents b1fe026 + ebd9fb6 commit 960a723

File tree

75 files changed

+888
-245
lines changed

Some content is hidden

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

75 files changed

+888
-245
lines changed

‎demo/src/screens/ExampleScreenPresenter.js renamed to ‎demo/src/screens/ExampleScreenPresenter.tsx

Lines changed: 36 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,44 +10,53 @@ import {
1010
RadioGroup,
1111
Slider,
1212
SegmentedControl,
13+
SegmentedControlItemProps,
1314
Text,
15+
TextProps,
1416
View
1517
} from 'react-native-ui-lib';
1618

17-
export function renderHeader(title, others) {
19+
interface RadioGroupOptions {
20+
isRow?: boolean;
21+
afterValueChanged?: () => void;
22+
useValueAsLabel?: boolean;
23+
}
24+
25+
export function renderHeader(title: string, others: TextProps) {
1826
return (
1927
<Text text30 grey10 {...others}>
2028
{title}
2129
</Text>
2230
);
2331
}
2432

25-
export function renderBooleanOption(title, key) {
33+
export function renderBooleanOption(title: string, key: string) {
34+
// @ts-ignore
2635
const value = this.state[key];
2736
return (
2837
<View row centerV spread marginB-s4 key={key}>
29-
<Text flex>
30-
{title}
31-
</Text>
38+
<Text flex>{title}</Text>
3239
<Switch
3340
useCustomTheme
3441
key={key}
35-
textID={key}
42+
testID={key}
3643
value={value}
44+
// @ts-ignore
3745
onValueChange={value => this.setState({[key]: value})}
3846
/>
3947
</View>
4048
);
4149
}
4250

43-
export function renderBooleanGroup(title, options) {
51+
export function renderBooleanGroup(title: string, options: string[]) {
4452
return (
4553
<View marginB-s2>
4654
<Text text70M marginB-s2>
4755
{title}
4856
</Text>
4957
<View row style={styles.rowWrap}>
5058
{_.map(options, key => {
59+
// @ts-ignore
5160
const value = this.state[key];
5261
return (
5362
<View spread centerH row key={key}>
@@ -57,6 +66,7 @@ export function renderBooleanGroup(title, options) {
5766
key={key}
5867
testID={key}
5968
value={value}
69+
// @ts-ignore
6070
onValueChange={value => this.setState({[key]: value})}
6171
/>
6272
<Text text70 marginR-s3 marginB-s2>
@@ -70,7 +80,11 @@ export function renderBooleanGroup(title, options) {
7080
);
7181
}
7282

73-
export function renderRadioGroup(title, key, options, {isRow, afterValueChanged, useValueAsLabel} = {}) {
83+
export function renderRadioGroup(title: string,
84+
key: string,
85+
options: object,
86+
{isRow, afterValueChanged, useValueAsLabel}: RadioGroupOptions = {}) {
87+
// @ts-ignore
7488
const value = this.state[key];
7589
return (
7690
<View marginB-s2>
@@ -83,6 +97,7 @@ export function renderRadioGroup(title, key, options, {isRow, afterValueChanged,
8397
row={isRow}
8498
style={isRow && styles.rowWrap}
8599
initialValue={value}
100+
// @ts-ignore
86101
onValueChange={value => this.setState({[key]: value}, afterValueChanged)}
87102
>
88103
{_.map(options, (value, key) => {
@@ -103,23 +118,28 @@ export function renderRadioGroup(title, key, options, {isRow, afterValueChanged,
103118
);
104119
}
105120

106-
export function renderColorOption(title,
107-
key,
121+
export function renderColorOption(title: string,
122+
key: string,
108123
colors = ['transparent', Colors.blue30, Colors.grey10, Colors.yellow30, Colors.green30, Colors.purple30]) {
124+
// @ts-ignore
109125
const value = this.state[key];
110126
return (
111127
<View marginV-s2>
112128
<Text text70M>{title}</Text>
113129
<ColorPalette
114130
value={value}
115131
colors={colors}
132+
// @ts-ignore
116133
onValueChange={value => this.setState({[key]: value === 'transparent' ? undefined : value})}
117134
/>
118135
</View>
119136
);
120137
}
121138

122-
export function renderSliderOption(title, key, {min = 0, max = 10, step = 1, initial = 0, sliderText = ''}) {
139+
export function renderSliderOption(title: string,
140+
key: string,
141+
{min = 0, max = 10, step = 1, initial = 0, sliderText = ''}) {
142+
// @ts-ignore
123143
const value = this.state[key] || initial;
124144
return (
125145
<View marginV-s2>
@@ -134,6 +154,7 @@ export function renderSliderOption(title, key, {min = 0, max = 10, step = 1, ini
134154
minimumValue={min}
135155
maximumValue={max}
136156
step={step}
157+
// @ts-ignore
137158
onValueChange={value => this.setState({[key]: value})}
138159
/>
139160
<Text marginL-s4 text70 style={styles.text}>
@@ -145,16 +166,18 @@ export function renderSliderOption(title, key, {min = 0, max = 10, step = 1, ini
145166
);
146167
}
147168

148-
export function renderMultipleSegmentOptions(title, key, options) {
169+
export function renderMultipleSegmentOptions(title: string, key: string, options: (SegmentedControlItemProps & {value: any})[]) {
170+
// @ts-ignore
149171
const value = this.state[key];
150172
const index = _.findIndex(options, {value});
151173

152174
return (
153175
<View row centerV spread marginB-s4 key={key}>
154-
<Text marginR-s2>{title}</Text>
176+
{!!title && <Text marginR-s2>{title}</Text>}
155177
<SegmentedControl
156178
initialIndex={index}
157179
segments={options}
180+
// @ts-ignore
158181
onChangeIndex={index => this.setState({[key]: options[index].value})}
159182
/>
160183
</View>

‎demo/src/screens/MenuStructure.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,7 @@ export const navigationData = {
153153
Incubator: {
154154
title: 'Incubator (Experimental)',
155155
screens: [
156+
{title: '(New) ChipsInput', tags: 'chips input', screen: 'unicorn.components.IncubatorChipsInputScreen'},
156157
{title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'},
157158
{title: '(New) Dialog', tags: 'dialog modal popup alert', screen: 'unicorn.incubator.IncubatorDialogScreen'},
158159
{title: '(New) TextField', tags: 'text field input', screen: 'unicorn.components.IncubatorTextFieldScreen'},

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -179,8 +179,11 @@ class GridViewScreen extends Component {
179179
<GridView items={pairs} numColumns={2}/>
180180
<Text marginV-s5 text60BO>
181181
Dynamic itemSize
182+
<Text text90>
183+
{' '} (Using maxItemWidth)
184+
</Text>
182185
</Text>
183-
<GridView items={dynamicLayout} numColumns={3}/>
186+
<GridView items={dynamicLayout} maxItemWidth={120}/>
184187
<Text marginV-s5 text60BO>
185188
OverlayText
186189
</Text>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import _ from 'lodash';
22
import React, {Component} from 'react';
33
import {Alert} from 'react-native';
44
import {Colors, View, Text, Hint, Button, Assets, Incubator} from 'react-native-ui-lib';
5-
// @ts-expect-error
65
import {renderMultipleSegmentOptions, renderBooleanOption} from '../ExampleScreenPresenter';
76

87
const settingsIcon = require('../../assets/icons/settings.png');

‎demo/src/screens/componentScreens/TabControllerScreen/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ class TabControllerScreen extends Component<{}, State> {
119119
}
120120

121121
renderTabPages() {
122-
const {asCarousel} = this.state;
122+
const {asCarousel, fewItems} = this.state;
123123
const Container = asCarousel ? TabController.PageCarousel : View;
124124
const containerProps = asCarousel ? {} : {flex: true};
125125
return (
@@ -134,7 +134,7 @@ class TabControllerScreen extends Component<{}, State> {
134134
<Tab3/>
135135
</TabController.TabPage>
136136

137-
{_.map(_.takeRight(TABS, TABS.length - 3), (title, index) => {
137+
{!fewItems && _.map(_.takeRight(TABS, TABS.length - 3), (title, index) => {
138138
return (
139139
<TabController.TabPage key={title} index={index + 3}>
140140
<View padding-s5>

‎demo/src/screens/componentScreens/TabControllerScreen/tab3.tsx

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {Card, Avatar, View, Text} from 'react-native-ui-lib';
55

66
class Tab2 extends Component {
77
state = {
8+
counter: 0,
89
loading: true
910
};
1011

@@ -13,7 +14,17 @@ class Tab2 extends Component {
1314
this.setState({loading: false});
1415
}, 1200);
1516

16-
// this.slow();
17+
/* Uncomment to test TabPage freeze functionality when the page lose focus */
18+
// setInterval(() => {
19+
// this.setState({counter: this.state.counter + 1});
20+
// }, 1000);
21+
}
22+
23+
componentDidUpdate() {
24+
/* Uncomment to test TabPage freeze functionality when the page lose focus */
25+
// if (this.state.counter % 3 === 0) {
26+
// console.warn('freeze counter', this.state.counter);
27+
// }
1728
}
1829

1930
slow(iterations = 10) {

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

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,20 @@ export function registerScreens(registrar) {
1313
registrar('unicorn.components.CarouselVerticalScreen', () => require('./CarouselVerticalScreen').default);
1414
registrar('unicorn.components.CheckboxScreen', () => require('./CheckboxScreen').default);
1515
registrar('unicorn.components.ChipScreen', () => require('./ChipScreen').default);
16+
registrar('unicorn.components.ChipsInputScreen', () => require('./ChipsInputScreen').default);
17+
registrar('unicorn.components.ColorPickerScreen', () => require('./ColorPickerScreen').default);
18+
registrar('unicorn.components.ColorSwatchScreen', () => require('./ColorSwatchScreen').default);
1619
registrar('unicorn.components.ConnectionStatusBar', () => require('./ConnectionStatusBarScreen').default);
20+
registrar('unicorn.components.DateTimePickerScreen', () => require('./DateTimePickerScreen').default);
1721
registrar('unicorn.components.DialogScreen', () => require('./DialogScreen').default);
1822
registrar('unicorn.components.DrawerScreen', () => require('./DrawerScreen').default);
1923
registrar('unicorn.components.ExpandableSectionScreen', () => require('./ExpandableSectionScreen').default);
20-
registrar('unicorn.components.ChipsInputScreen', () => require('./ChipsInputScreen').default);
24+
registrar('unicorn.components.FloatingButtonScreen', () => require('./FloatingButtonScreen').default);
2125
registrar('unicorn.components.HapticScreen', () => require('./HapticScreen').default);
2226
registrar('unicorn.components.HintsScreen', () => require('./HintsScreen').default);
2327
registrar('unicorn.components.IconScreen', () => require('./IconScreen').default);
2428
registrar('unicorn.components.ImageScreen', () => require('./ImageScreen').default);
25-
registrar('unicorn.components.ProgressiveImageScreen', () => require('./ProgressiveImageScreen').default);
29+
registrar('unicorn.components.GridViewScreen', () => require('./GridViewScreen').default);
2630
registrar('unicorn.components.KeyboardAwareScrollViewScreen', () => require('./KeyboardAwareScrollViewScreen').default);
2731
registrar('unicorn.components.MaskedInputScreen', () => require('./MaskedInputScreen').default);
2832
registrar('unicorn.components.OverlaysScreen', () => require('./OverlaysScreen').default);
@@ -32,41 +36,37 @@ export function registerScreens(registrar) {
3236
registrar('unicorn.components.PanResponderScreen', () => require('./PanResponderScreen').default);
3337
registrar('unicorn.components.PickerScreen', () => require('./PickerScreen').default);
3438
registrar('unicorn.animations.ProgressBarScreen', () => require('../componentScreens/ProgressBarScreen').default);
39+
registrar('unicorn.components.ProgressiveImageScreen', () => require('./ProgressiveImageScreen').default);
3540
registrar('unicorn.components.RadioButtonScreen', () => require('./RadioButtonScreen').default);
3641
registrar('unicorn.components.ScrollBarScreen', () => require('./ScrollBarScreen').default);
3742
registrar('unicorn.components.SectionsWheelPickerScreen', () => require('./SectionsWheelPickerScreen').default);
3843
registrar('unicorn.components.SegmentedControlScreen', () => require('./SegmentedControlScreen').default);
3944
registrar('unicorn.components.SharedTransitionScreen', () => require('./SharedTransitionScreen').default);
4045
registrar('unicorn.components.SkeletonViewScreen', () => require('./SkeletonViewScreen').default);
46+
registrar('unicorn.components.SliderScreen', () => require('./SliderScreen').default);
47+
registrar('unicorn.components.StackAggregatorScreen', () => require('./StackAggregatorScreen').default);
4148
registrar('unicorn.components.StepperScreen', () => require('./StepperScreen').default);
4249
registrar('unicorn.components.SwitchScreen', () => require('./SwitchScreen').default);
43-
registrar('unicorn.components.ToastsScreen', () => require('./ToastsScreen').default);
4450
registrar('unicorn.components.TabControllerScreen', () => require('./TabControllerScreen').default);
45-
registrar('unicorn.components.TextScreen', () => require('./TextScreen').default);
4651
registrar('unicorn.components.TextFieldScreen', () => require('./TextFieldScreen').default);
52+
registrar('unicorn.components.TextScreen', () => require('./TextScreen').default);
53+
registrar('unicorn.components.ToastsScreen', () => require('./ToastsScreen').default);
4754
registrar('unicorn.wrappers.TouchableOpacityScreen', () => require('./TouchableOpacityScreen').default);
4855
registrar('unicorn.components.TourScreen', () => require('./TourScreen').default);
49-
registrar('unicorn.components.FeatureHighlightScreen', () => require('./FeatureHighlightScreen').default);
50-
registrar('unicorn.components.WheelPickerDialogScreen', () => require('./WheelPickerDialogScreen').default);
51-
registrar('unicorn.components.SliderScreen', () => require('./SliderScreen').default);
52-
registrar('unicorn.components.FloatingButtonScreen', () => require('./FloatingButtonScreen').default);
53-
registrar('unicorn.components.ColorPickerScreen', () => require('./ColorPickerScreen').default);
54-
registrar('unicorn.components.ColorSwatchScreen', () => require('./ColorSwatchScreen').default);
55-
registrar('unicorn.components.StackAggregatorScreen', () => require('./StackAggregatorScreen').default);
56-
registrar('unicorn.components.DateTimePickerScreen', () => require('./DateTimePickerScreen').default);
5756
registrar('unicorn.components.ViewScreen', () => require('./ViewScreen').default);
57+
registrar('unicorn.components.WheelPickerDialogScreen', () => require('./WheelPickerDialogScreen').default);
5858
registrar('unicorn.components.WizardScreen', () => require('./WizardScreen').default);
59-
registrar('unicorn.components.GridViewScreen', () => require('./GridViewScreen').default);
6059
// List Components
6160
registrar('unicorn.lists.BasicListScreen', () => require('./BasicListScreen').default);
6261
registrar('unicorn.lists.ContactsListScreen', () => require('./ContactsListScreen').default);
6362
registrar('unicorn.lists.ConversationListScreen', () => require('./ConversationListScreen').default);
6463
// Full Screen components
6564
registrar('unicorn.screens.EmptyStateScreen', () => require('./EmptyStateScreen').default);
65+
registrar('unicorn.components.FaderScreen', () => require('./FaderScreen').default);
66+
registrar('unicorn.components.FeatureHighlightScreen', () => require('./FeatureHighlightScreen').default);
6667
registrar('unicorn.screens.LoadingScreen', () => require('./LoadingScreen').default);
6768
registrar('unicorn.screens.ModalScreen', () => require('./ModalScreen').default);
6869
registrar('unicorn.components.WithScrollEnablerScreen', () => require('./WithScrollEnablerScreen').default);
6970
registrar('unicorn.components.WithScrollReachedScreen', () => require('./WithScrollReachedScreen').default);
70-
registrar('unicorn.components.FaderScreen', () => require('./FaderScreen').default);
7171
}
7272

‎demo/src/screens/incubatorScreens/IncubatorChipsInputScreen.tsx

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React, {Component} from 'react';
2+
import {View, Text, Card, TextField, Button, Colors, Incubator} from 'react-native-ui-lib'; //eslint-disable-line
3+
4+
export default class ChipsInputScreen extends Component {
5+
state = {
6+
chips: [{label: 'one'}, {label: 'two'}],
7+
chips2: []
8+
};
9+
10+
render() {
11+
return (
12+
<View flex padding-20>
13+
<Text h1 marginB-s4>
14+
ChipsInput
15+
</Text>
16+
<Incubator.ChipsInput
17+
placeholder="Enter chips"
18+
defaultChipProps={{
19+
backgroundColor: Colors.primary,
20+
labelStyle: {color: Colors.white},
21+
containerStyle: {borderWidth: 0},
22+
dismissColor: Colors.white
23+
}}
24+
chips={this.state.chips}
25+
leadingAccessory={<Text>TO: </Text>}
26+
onChange={newChips => {
27+
this.setState({chips: newChips});
28+
}}
29+
/>
30+
31+
<Incubator.ChipsInput
32+
label="Max 3 chips"
33+
placeholder="Enter chips..."
34+
chips={this.state.chips2}
35+
onChange={newChips => this.setState({chips2: newChips})}
36+
maxChips={3}
37+
/>
38+
</View>
39+
);
40+
}
41+
}

‎demo/src/screens/incubatorScreens/IncubatorTextFieldScreen.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,9 +98,10 @@ export default class TextFieldScreen extends Component {
9898
<TextField
9999
ref={this.input2}
100100
placeholder="Enter URL"
101+
floatingPlaceholder
101102
text70
102103
leadingAccessory={
103-
<Text text70 blue30>
104+
<Text text70 blue30 marginR-2>
104105
Https://
105106
</Text>
106107
}
@@ -214,7 +215,7 @@ export default class TextFieldScreen extends Component {
214215
label="Label"
215216
placeholder="Enter text..."
216217
preset={preset}
217-
fieldStyle={(_state, {preset}) => (preset === 'withUnderline' ? styles.withUnderline : styles.withFrame)}
218+
dynamicFieldStyle={(_state, {preset}) => (preset === 'withUnderline' ? styles.withUnderline : styles.withFrame)}
218219
editable={!shouldDisable}
219220
/>
220221

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
22

33
export function registerScreens(registrar) {
4+
registrar('unicorn.components.IncubatorChipsInputScreen', () => require('./IncubatorChipsInputScreen').default);
45
registrar('unicorn.incubator.TouchableOpacityScreen', () =>
56
gestureHandlerRootHOC(require('./TouchableOpacityScreen').default));
67
registrar('unicorn.incubator.IncubatorDialogScreen', () => require('./IncubatorDialogScreen').default);

‎docuilib/docusaurus.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,9 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
111111
prism: {
112112
theme: lightCodeTheme,
113113
darkTheme: darkCodeTheme
114+
},
115+
colorMode: {
116+
disableSwitch: true
114117
}
115118
})
116119
}

‎docuilib/sidebars.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ const componentsCategories = {
1414
Form: 'form',
1515
Overlays: 'overlays',
1616
Layout: 'layoutsAndTemplates',
17-
Lists: 'lists',
1817
Incubator: 'incubator'
1918
};
2019

@@ -50,7 +49,7 @@ module.exports = {
5049
type: 'category',
5150
label: 'Components',
5251
collapsible: false,
53-
items: ['Basic', 'Form', 'Overlays', 'Layout', 'Lists', 'Native', 'Incubator'].map(category => {
52+
items: ['Basic', 'Form', 'Overlays', 'Layout', 'Native', 'Incubator'].map(category => {
5453
return {
5554
type: 'category',
5655
label: category,

0 commit comments

Comments
 (0)