Skip to content

Commit 75b3aae

Browse files
M-i-k-e-lM-i-k-e-l
committed
Merge branch 'master' into release
2 parents 91b547c + 806c9ae commit 75b3aae

Some content is hidden

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

43 files changed

+573
-258
lines changed

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

+35-35
Original file line numberDiff line numberDiff line change
@@ -8,45 +8,45 @@ const cardImage = require('../../assets/images/card-example.jpg');
88
const chevronDown = require('../../assets/icons/chevronDown.png');
99
const chevronUp = require('../../assets/icons/chevronUp.png');
1010

11-
const elements = [
12-
<Card style={{marginBottom: 10}} onPress={() => {}}>
13-
<Card.Section
14-
content={[
15-
{text: 'Card #1', text70: true, grey10: true},
16-
{text: 'card description', text90: true, grey50: true}
17-
]}
18-
style={{padding: 20}}
19-
/>
20-
<Card.Section source={cardImage2} imageStyle={{height: 120}} />
21-
</Card>,
22-
<Card style={{marginBottom: 10}} onPress={() => {}}>
23-
<Card.Section
24-
content={[
25-
{text: 'Card #2', text70: true, grey10: true},
26-
{text: 'card description', text90: true, grey50: true}
27-
]}
28-
style={{padding: 20}}
29-
/>
30-
<Card.Section source={cardImage} imageStyle={{height: 120}} />
31-
</Card>,
32-
<Card style={{marginBottom: 10}} onPress={() => {}}>
33-
<Card.Section
34-
content={[
35-
{text: 'Card #3', text70: true, grey10: true},
36-
{text: 'card description', text90: true, grey50: true}
37-
]}
38-
style={{padding: 20}}
39-
/>
40-
<Card.Section source={cardImage2} imageStyle={{height: 120}} />
41-
</Card>
42-
];
43-
4411
class ExpandableSectionScreen extends PureComponent {
4512
state = {
4613
expanded: false,
4714
top: false
4815
};
4916

17+
elements = [
18+
<Card key={0} style={{marginBottom: 10}} onPress={() => this.onExpand()}>
19+
<Card.Section
20+
content={[
21+
{text: 'Card #1', text70: true, grey10: true},
22+
{text: 'card description', text90: true, grey50: true}
23+
]}
24+
style={{padding: 20}}
25+
/>
26+
<Card.Section imageSource={cardImage2} imageStyle={{height: 120}}/>
27+
</Card>,
28+
<Card key={1} style={{marginBottom: 10}} onPress={() => this.onExpand()}>
29+
<Card.Section
30+
content={[
31+
{text: 'Card #2', text70: true, grey10: true},
32+
{text: 'card description', text90: true, grey50: true}
33+
]}
34+
style={{padding: 20}}
35+
/>
36+
<Card.Section imageSource={cardImage} imageStyle={{height: 120}}/>
37+
</Card>,
38+
<Card key={2} style={{marginBottom: 10}} onPress={() => this.onExpand()}>
39+
<Card.Section
40+
content={[
41+
{text: 'Card #3', text70: true, grey10: true},
42+
{text: 'card description', text90: true, grey50: true}
43+
]}
44+
style={{padding: 20}}
45+
/>
46+
<Card.Section imageSource={cardImage2} imageStyle={{height: 120}}/>
47+
</Card>
48+
];
49+
5050
onExpand() {
5151
this.setState({
5252
expanded: !this.state.expanded
@@ -74,7 +74,7 @@ class ExpandableSectionScreen extends PureComponent {
7474
getBodyElement() {
7575
return (
7676
<Carousel pageWidth={350} itemSpacings={Spacings.s2}>
77-
{_.map(elements, (element, key) => {
77+
{_.map(this.elements, (element, key) => {
7878
return (
7979
<View key={key} margin-12>
8080
{element}
@@ -99,7 +99,7 @@ class ExpandableSectionScreen extends PureComponent {
9999
onValueChange={() => {
100100
this.setState({top: !this.state.top});
101101
}}
102-
></Switch>
102+
/>
103103
</View>
104104
<ExpandableSection
105105
top={top}

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

+14-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,18 @@
11
import _ from 'lodash';
22
import React, {Component} from 'react';
33
import {ScrollView} from 'react-native';
4-
import {View, Colors, Icon, Dialog, Text, Picker, Avatar, Assets, PanningProvider, Typography} from 'react-native-ui-lib'; //eslint-disable-line
4+
import {
5+
View,
6+
Colors,
7+
Icon,
8+
Dialog,
9+
Text,
10+
Picker,
11+
Avatar,
12+
Assets,
13+
PanningProvider,
14+
Typography
15+
} from 'react-native-ui-lib'; //eslint-disable-line
516
import contactsData from '../../data/conversations';
617
import tagIcon from '../../assets/icons/tags.png';
718
import dropdown from '../../assets/icons/chevronDown.png';
@@ -239,7 +250,8 @@ export default class PickerScreen extends Component {
239250

240251
<Picker
241252
migrate
242-
title="Language"
253+
migrateTextField
254+
label="Language"
243255
placeholder="Favorite Language"
244256
value={this.state.language2}
245257
onChange={value => this.setState({language2: value})}

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

+48-66
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1+
import _ from 'lodash';
12
import React, {useCallback, useState} from 'react';
23
import {View, Text, Incubator, Colors, Typography, Button, Dialog} from 'react-native-ui-lib';
3-
import _ from 'lodash';
4-
5-
type WheelPickerValue = Incubator.WheelPickerProps['initialValue'];
64

75
const monthItems = _.map([
86
'January',
@@ -18,18 +16,25 @@ const monthItems = _.map([
1816
'November',
1917
'December'
2018
],
21-
item => ({label: item, value: item}));
19+
item => ({label: item, value: item, align: Incubator.WheelPickerAlign.RIGHT}));
2220

23-
const yearItems = _.times(2030, i => i)
21+
const yearItems = _.times(2050, i => i)
2422
.reverse()
2523
.map(item => ({label: `${item}`, value: item}));
2624
const dayItems = _.times(31, i => i + 1).map(day => ({label: `${day}`, value: day}));
2725

28-
const useData = (initialMonth?: string, initialYear?: string, initialDays?: number) => {
29-
const [selectedMonth, setMonth] = useState<WheelPickerValue>(initialMonth);
30-
const [, setYear] = useState<WheelPickerValue>(initialYear);
31-
const [selectedDays, setDays] = useState<WheelPickerValue>(initialDays);
26+
export default () => {
3227
const [showDialog, setShowDialog] = useState(false);
28+
const [yearsValue, setYearsValue] = useState(2022);
29+
30+
const updateYearsInitialValue = useCallback((increaseYears: boolean) => {
31+
increaseYears ? setYearsValue(Math.min(yearsValue + 1, 2049)) : setYearsValue(Math.max(yearsValue - 1, 0));
32+
},
33+
[yearsValue]);
34+
35+
const onChange = useCallback((value) => {
36+
setYearsValue(value);
37+
}, []);
3338

3439
const onPickDaysPress = useCallback(() => {
3540
setShowDialog(true);
@@ -39,75 +44,52 @@ const useData = (initialMonth?: string, initialYear?: string, initialDays?: numb
3944
setShowDialog(false);
4045
}, []);
4146

42-
const onMonthChange = useCallback((item: WheelPickerValue, _: number) => {
43-
setMonth(item);
44-
}, []);
45-
46-
const onYearChange = useCallback((item: WheelPickerValue, _: number) => {
47-
setYear(item);
48-
}, []);
49-
50-
const onDaysChange = useCallback((item: WheelPickerValue, _: number) => {
51-
setDays(item);
52-
}, []);
53-
54-
return {
55-
onMonthChange,
56-
onYearChange,
57-
onDaysChange,
58-
selectedMonth,
59-
selectedDays,
60-
onPickDaysPress,
61-
onDialogDismissed,
62-
showDialog
63-
};
64-
};
65-
66-
export default () => {
67-
const {
68-
selectedMonth,
69-
onMonthChange,
70-
onYearChange,
71-
selectedDays,
72-
onDaysChange,
73-
onPickDaysPress,
74-
onDialogDismissed,
75-
showDialog
76-
} = useData('February', undefined, 5);
77-
7847
return (
7948
<View flex padding-page>
8049
<Text h1>Wheel Picker</Text>
8150

82-
<View marginT-s5 centerH>
83-
<Text h3>Months</Text>
84-
<Incubator.WheelPicker
85-
onChange={onMonthChange}
86-
activeTextColor={Colors.primary}
87-
inactiveTextColor={Colors.grey20}
88-
items={monthItems}
89-
textStyle={Typography.text60R}
90-
selectedValue={selectedMonth}
91-
/>
51+
<View row center marginT-30>
52+
<View center>
53+
<Text h3>Months</Text>
54+
<Incubator.WheelPicker
55+
initialValue={'February'}
56+
activeTextColor={Colors.primary}
57+
inactiveTextColor={Colors.grey20}
58+
items={monthItems}
59+
textStyle={Typography.text60R}
60+
numberOfVisibleRows={3}
61+
/>
62+
</View>
9263

93-
<Text h3>Years</Text>
94-
<Text bodySmall grey30>
95-
(Uncontrolled, initialValue passed)
96-
</Text>
97-
<View width={'100%'} marginT-s3>
64+
<View center>
65+
<Text h3>Years</Text>
9866
<Incubator.WheelPicker
99-
onChange={onYearChange}
100-
numberOfVisibleRows={3}
101-
initialValue={2021}
67+
numberOfVisibleRows={3}
68+
initialValue={yearsValue}
10269
items={yearItems}
70+
onChange={onChange}
10371
/>
10472
</View>
10573
</View>
10674

107-
<View marginB-s10>
108-
<Button marginT-40 label={'Pick Days'} marginH-100 onPress={onPickDaysPress}/>
75+
<View center marginT-30>
76+
<Text body>
77+
Move the wheel programmatically
78+
</Text>
79+
<Text bodySmall grey30>
80+
(by updating the initialValue prop)
81+
</Text>
82+
<View marginT-10 row>
83+
<Button size="medium" label={'Previous'} marginR-20 onPress={() => updateYearsInitialValue(false)}/>
84+
<Button size="medium" label={'Next'} onPress={() => updateYearsInitialValue(true)}/>
85+
</View>
86+
</View>
87+
88+
<View center marginT-40>
89+
<Text h3 marginB-20>Days</Text>
90+
<Button size="small" label={'Pick Days'} onPress={onPickDaysPress}/>
10991
<Dialog width={'90%'} height={260} bottom visible={showDialog} onDismiss={onDialogDismissed}>
110-
<Incubator.WheelPicker onChange={onDaysChange} selectedValue={selectedDays} label={'Days'} items={dayItems}/>
92+
<Incubator.WheelPicker initialValue={5} label={'Days'} items={dayItems}/>
11193
</Dialog>
11294
</View>
11395
</View>

‎docuilib/docusaurus.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
1717
trailingSlash: false,
1818
customFields: {
1919
expoSnackLink: 'https://snack.expo.io/@ethanshar/rnuilib_snack?platform=ios&supportedPlatforms=ios,android',
20-
stars: '4'
20+
stars: '4.1'
2121
},
2222
plugins: ['docusaurus-plugin-sass'],
2323
presets: [

‎generatedTypes/src/components/svgImage/index.d.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/// <reference types="react" />
2+
export interface SvgImageProps {
3+
data: any;
4+
}
5+
declare function SvgImage(props: SvgImageProps): JSX.Element | null;
6+
declare namespace SvgImage {
7+
var displayName: string;
8+
var isSvg: typeof import("../../utils/imageUtils").isSvg;
9+
}
10+
export default SvgImage;

‎generatedTypes/src/incubator/TextField/CharCounter.d.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,10 @@ export interface CharCounterProps {
1010
* Pass custom style to character counter text
1111
*/
1212
charCounterStyle?: TextStyle;
13+
testID: string;
1314
}
1415
declare const CharCounter: {
15-
({ maxLength, charCounterStyle }: CharCounterProps): JSX.Element | null;
16+
({ maxLength, charCounterStyle, testID }: CharCounterProps): JSX.Element | null;
1617
displayName: string;
1718
};
1819
export default CharCounter;

‎generatedTypes/src/incubator/TextField/FloatingPlaceholder.d.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,10 @@ export interface FloatingPlaceholderProps {
2020
floatOnFocus?: boolean;
2121
validationMessagePosition?: ValidationMessagePosition;
2222
extraOffset?: number;
23+
testID: string;
2324
}
2425
declare const FloatingPlaceholder: {
25-
({ placeholder, floatingPlaceholderColor, floatingPlaceholderStyle, floatOnFocus, validationMessagePosition, extraOffset }: FloatingPlaceholderProps): JSX.Element;
26+
({ placeholder, floatingPlaceholderColor, floatingPlaceholderStyle, floatOnFocus, validationMessagePosition, extraOffset, testID }: FloatingPlaceholderProps): JSX.Element;
2627
displayName: string;
2728
};
2829
export default FloatingPlaceholder;

‎generatedTypes/src/incubator/TextField/TextField.driver.d.ts

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { RenderAPI } from '@testing-library/react-native';
2+
import { ReactTestInstance } from 'react-test-renderer';
3+
declare const TextFieldDriverFactory: ({ wrapperComponent, testID }: {
4+
wrapperComponent: RenderAPI;
5+
testID: string;
6+
}) => Promise<{
7+
exists: () => boolean;
8+
getRootElement: () => ReactTestInstance | null;
9+
content: () => any;
10+
isDisabled: () => any;
11+
changeText: (text: string) => void;
12+
isPlaceholderVisible: () => boolean | undefined;
13+
getPlaceholderContent: () => any;
14+
getLabelRootElement: () => ReactTestInstance | null;
15+
isLabelExists: () => boolean;
16+
getLabelContent: () => any;
17+
getValidationMsgRootElement: () => ReactTestInstance | null;
18+
isValidationMsgExists: () => boolean;
19+
getValidationMsgContent: () => any;
20+
getCharCounterRootElement: () => ReactTestInstance | null;
21+
isCharCounterExists: () => boolean;
22+
getCharCounterContent: () => any;
23+
}>;
24+
export default TextFieldDriverFactory;

‎generatedTypes/src/incubator/TextField/index.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { FieldContextType as _FieldContextType } from './FieldContext';
1616
import { FloatingPlaceholderProps } from './FloatingPlaceholder';
1717
import { CharCounterProps } from './CharCounter';
1818
export declare type FieldContextType = _FieldContextType;
19-
export declare type TextFieldProps = MarginModifiers & PaddingModifiers & TypographyModifiers & ColorsModifiers & InputProps & LabelProps & FloatingPlaceholderProps & ValidationMessageProps & Omit<CharCounterProps, 'maxLength'> & {
19+
export declare type TextFieldProps = MarginModifiers & PaddingModifiers & TypographyModifiers & ColorsModifiers & InputProps & LabelProps & Omit<FloatingPlaceholderProps, 'testID'> & ValidationMessageProps & Omit<CharCounterProps, 'maxLength' | 'testID'> & {
2020
/**
2121
* Pass to render a leading element
2222
*/

‎generatedTypes/src/incubator/TextField/useFieldState.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,5 +28,5 @@ export default function useFieldState({ validate, validationMessage, validateOnB
2828
isFocused: boolean;
2929
failingValidatorIndex: number | undefined;
3030
};
31-
validateField: (valueToValidate?: any) => void;
31+
validateField: (valueToValidate?: any) => boolean;
3232
};

‎generatedTypes/src/incubator/TextField/usePreset.d.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -145,8 +145,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
145145
validationMessagePosition?: import("./types").ValidationMessagePosition | undefined;
146146
floatingPlaceholder?: boolean | undefined;
147147
floatingPlaceholderColor?: import("./types").ColorType | undefined;
148-
floatingPlaceholderStyle?: ((false | import("react-native").TextStyle | import("react-native").RegisteredStyle<import("react-native").TextStyle> | import("react-native").RecursiveArray<import("react-native").TextStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<import("react-native").TextStyle>> | null) & import("react-native").TextStyle) | undefined;
149148
floatOnFocus?: boolean | undefined;
149+
floatingPlaceholderStyle?: ((false | import("react-native").TextStyle | import("react-native").RegisteredStyle<import("react-native").TextStyle> | import("react-native").RecursiveArray<import("react-native").TextStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<import("react-native").TextStyle>> | null) & import("react-native").TextStyle) | undefined;
150150
extraOffset?: number | undefined;
151151
enableErrors?: boolean | undefined;
152152
validationMessage?: string | string[] | undefined;
@@ -546,8 +546,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
546546
validationMessagePosition?: import("./types").ValidationMessagePosition | undefined;
547547
floatingPlaceholder?: boolean | undefined;
548548
floatingPlaceholderColor?: import("./types").ColorType | undefined;
549-
floatingPlaceholderStyle?: ((false | import("react-native").TextStyle | import("react-native").RegisteredStyle<import("react-native").TextStyle> | import("react-native").RecursiveArray<import("react-native").TextStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<import("react-native").TextStyle>> | null) & import("react-native").TextStyle) | undefined;
550549
floatOnFocus?: boolean | undefined;
550+
floatingPlaceholderStyle?: ((false | import("react-native").TextStyle | import("react-native").RegisteredStyle<import("react-native").TextStyle> | import("react-native").RecursiveArray<import("react-native").TextStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<import("react-native").TextStyle>> | null) & import("react-native").TextStyle) | undefined;
551551
extraOffset?: number | undefined;
552552
enableErrors?: boolean | undefined;
553553
validationMessage?: string | string[] | undefined;
@@ -1067,6 +1067,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
10671067
error: any;
10681068
disabled: string;
10691069
};
1070+
floatOnFocus?: boolean | undefined;
10701071
floatingPlaceholderStyle: ((false | import("react-native").TextStyle | import("react-native").RegisteredStyle<import("react-native").TextStyle> | import("react-native").RecursiveArray<import("react-native").TextStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<import("react-native").TextStyle>> | null) & import("react-native").TextStyle) | {
10711072
color?: import("react-native").ColorValue | undefined;
10721073
fontFamily?: string | undefined;
@@ -1180,7 +1181,6 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
11801181
textAlignVertical?: "auto" | "center" | "top" | "bottom" | undefined;
11811182
includeFontPadding?: boolean | undefined;
11821183
};
1183-
floatOnFocus?: boolean | undefined;
11841184
extraOffset?: number | undefined;
11851185
enableErrors: boolean;
11861186
validationMessage?: string | string[] | undefined;

0 commit comments

Comments
 (0)