Skip to content

Commit 06a2ce0

Browse files
theankurkediatheankurkedia
authored
Merge pull request #2 from nativebase/fix/api-changes
Fixed API Changes and added PinInput
2 parents 8c01e24 + 09861e4 commit 06a2ce0

File tree

51 files changed

+19732
-858
lines changed

Some content is hidden

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

51 files changed

+19732
-858
lines changed

‎example/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"@expo/vector-icons": "^12.0.2",
1919
"expo": "^40.0.0",
2020
"expo-splash-screen": "~0.8.1",
21-
"native-base": "^3.0.0-next.9",
21+
"native-base": "^3.0.0-next.31",
2222
"react": "^17.0.1",
2323
"react-dom": "16.13.1",
2424
"react-is": "^17.0.1",

‎example/src/storybook/stories/Checkbox/custom.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
ButtonGroup,
99
} from '@native-base/formik-ui';
1010
import { Formik } from 'formik';
11-
import { Heading, FormControl, FormErrorMessage, FormLabel } from 'native-base';
11+
import { Heading, FormControl } from 'native-base';
1212
import * as Yup from 'yup';
1313

1414
const validationSchema = Yup.object().shape({
@@ -34,17 +34,19 @@ export default function () {
3434
<Box>
3535
<Heading>Custom Checkbox using FormControl</Heading>
3636
<FormControl mt={4} isRequired isInvalid={errors.tnc}>
37-
<FormLabel>Custom Label</FormLabel>
37+
<FormControl.Label>Custom Label</FormControl.Label>
3838
<Checkbox name="tnc" mt={4}>
3939
<Text mx={2}>Terms and Conditions</Text>
4040
</Checkbox>
41-
<FormErrorMessage>{errors.tnc}</FormErrorMessage>
41+
<FormControl.ErrorMessage>{errors.tnc}</FormControl.ErrorMessage>
4242
</FormControl>
4343
<FormControl>
4444
<Checkbox name="newsletter" mt={4}>
4545
<Text mx={2}>Subscribe to Our Newsletter</Text>
4646
</Checkbox>
47-
<FormErrorMessage>{errors.newsletter}</FormErrorMessage>
47+
<FormControl.ErrorMessage>
48+
{errors.newsletter}
49+
</FormControl.ErrorMessage>
4850
</FormControl>
4951
<Box pb={4} />
5052
<ButtonGroup spacing={6}>

‎example/src/storybook/stories/Checkbox/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,5 @@ import Custom from './custom';
88
storiesOf('Checkbox', module)
99
.addDecorator(withKnobs)
1010
.addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)
11-
.add('Basic Checkbox Example', () => <Basic />)
12-
.add('Custom FormControl Checkbox Example', () => <Custom />);
11+
.add('Basic CheckboxControl', () => <Basic />)
12+
.add('Custom Checkbox with FormControl', () => <Custom />);

‎example/src/storybook/stories/Input/basic.tsx

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
ButtonGroup,
88
} from '@native-base/formik-ui';
99
import { Formik } from 'formik';
10-
import { Heading, FormControl, FormErrorMessage, FormLabel } from 'native-base';
10+
import { Heading, FormControl } from 'native-base';
1111
import * as Yup from 'yup';
1212

1313
const validationSchema = Yup.object().shape({
@@ -37,19 +37,23 @@ export default function () {
3737
<Box>
3838
<Heading>Login form using Custom FormControl</Heading>
3939
<FormControl mt={4} isRequired isInvalid={errors.email}>
40-
<FormLabel color="teal.600">Email Address</FormLabel>
40+
<FormControl.Label color="teal.600">
41+
Email Address
42+
</FormControl.Label>
4143
<Input name="email" mt={2} placeholder="jane.doe@example.com" />
42-
<FormErrorMessage>{errors.email}</FormErrorMessage>
44+
<FormControl.ErrorMessage>{errors.email}</FormControl.ErrorMessage>
4345
</FormControl>
4446
<FormControl mt={4} isRequired isInvalid={errors.password}>
45-
<FormLabel color="orange.600">Password</FormLabel>
47+
<FormControl.Label color="orange.600">Password</FormControl.Label>
4648
<Input
4749
name="password"
4850
type="password"
4951
mt={2}
5052
placeholder="MyPassword"
5153
/>
52-
<FormErrorMessage>{errors.password}</FormErrorMessage>
54+
<FormControl.ErrorMessage>
55+
{errors.password}
56+
</FormControl.ErrorMessage>
5357
</FormControl>
5458
<Box pb={4} />
5559
<ButtonGroup spacing={6}>

‎example/src/storybook/stories/Input/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,5 @@ import Basic from './basic';
88
storiesOf('Input', module)
99
.addDecorator(withKnobs)
1010
.addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)
11-
.add('Login Form Custom Form Control', () => <Basic />)
12-
.add('Login Form FormControl Wrapped Input', () => <Login />);
11+
.add('Login Form using InputControl', () => <Basic />)
12+
.add('Login Form using Input with FormControl', () => <Login />);

‎example/src/storybook/stories/NumberInput/basic.tsx

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import {
3-
NumberInput,
3+
NumberInputControl,
44
NumberInputStepper,
55
NumberIncrementStepper,
66
NumberDecrementStepper,
@@ -10,15 +10,13 @@ import {
1010
ButtonGroup,
1111
} from '@native-base/formik-ui';
1212
import { Formik } from 'formik';
13-
import { Heading, FormLabel, FormControl, FormErrorMessage } from 'native-base';
13+
import { Heading } from 'native-base';
1414
import * as Yup from 'yup';
1515

1616
const validationSchema = Yup.object().shape({
17-
age: Yup.number().min(
18-
18,
19-
({ min }) => `Age must be at least ${min} years old`
20-
),
21-
// .required('Please specify your age, it is important.'),
17+
age: Yup.number()
18+
.min(18, ({ min }) => `Age must be at least ${min} years old`)
19+
.required('Please specify your age, it is important.'),
2220
});
2321

2422
export default function () {
@@ -37,16 +35,12 @@ export default function () {
3735
{({ values, errors }) => (
3836
<Box mt={4}>
3937
<Heading>Let's check if you are eligible.</Heading>
40-
<FormControl mt={4} isInvalid={errors.age}>
41-
<FormLabel>What's your Age?</FormLabel>
42-
<NumberInput mt={2} name="age">
43-
<NumberInputStepper>
44-
<NumberIncrementStepper />
45-
<NumberDecrementStepper />
46-
</NumberInputStepper>
47-
</NumberInput>
48-
<FormErrorMessage>{errors.age}</FormErrorMessage>
49-
</FormControl>
38+
<NumberInputControl mt={4} name="age" label="Age ?">
39+
<NumberInputStepper>
40+
<NumberIncrementStepper />
41+
<NumberDecrementStepper />
42+
</NumberInputStepper>
43+
</NumberInputControl>
5044
<Box pb={4} />
5145
<ButtonGroup spacing={6}>
5246
<SubmitButton colorScheme="teal">Next</SubmitButton>

‎example/src/storybook/stories/NumberInput/custom.tsx

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import {
3-
NumberInputControl,
3+
NumberInput,
44
NumberInputStepper,
55
NumberIncrementStepper,
66
NumberDecrementStepper,
@@ -10,13 +10,14 @@ import {
1010
ButtonGroup,
1111
} from '@native-base/formik-ui';
1212
import { Formik } from 'formik';
13-
import { Heading } from 'native-base';
13+
import { Heading, FormControl } from 'native-base';
1414
import * as Yup from 'yup';
1515

1616
const validationSchema = Yup.object().shape({
17-
age: Yup.number()
18-
.min(18, ({ min }) => `Age must be at least ${min} years old`)
19-
.required('Please specify your age, it is important.'),
17+
age: Yup.number().min(
18+
18,
19+
({ min }) => `Age must be at least ${min} years old`
20+
),
2021
});
2122

2223
export default function () {
@@ -35,12 +36,16 @@ export default function () {
3536
{({ values, errors }) => (
3637
<Box mt={4}>
3738
<Heading>Let's check if you are eligible.</Heading>
38-
<NumberInputControl mt={4} name="age" label="Age ?">
39-
<NumberInputStepper>
40-
<NumberIncrementStepper />
41-
<NumberDecrementStepper />
42-
</NumberInputStepper>
43-
</NumberInputControl>
39+
<FormControl mt={4} isInvalid={errors.age}>
40+
<FormControl.Label>What's your Age?</FormControl.Label>
41+
<NumberInput mt={2} name="age">
42+
<NumberInputStepper>
43+
<NumberIncrementStepper />
44+
<NumberDecrementStepper />
45+
</NumberInputStepper>
46+
</NumberInput>
47+
<FormControl.ErrorMessage>{errors.age}</FormControl.ErrorMessage>
48+
</FormControl>
4449
<Box pb={4} />
4550
<ButtonGroup spacing={6}>
4651
<SubmitButton colorScheme="teal">Next</SubmitButton>

‎example/src/storybook/stories/NumberInput/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import React from 'react';
22
import { storiesOf } from '@storybook/react-native';
33
import { withKnobs } from '@storybook/addon-knobs';
44
import Wrapper from '../Wrapper';
5-
import Basic from './basic';
65
import Custom from './custom';
6+
import Basic from './basic';
77

88
storiesOf('NumberInput', module)
99
.addDecorator(withKnobs)
1010
.addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)
11-
.add('Basic NumberInput', () => <Basic />)
12-
.add('Custom FormControl NumberInput', () => <Custom />);
11+
.add('Basic NumberInputControl', () => <Basic />)
12+
.add('Custom NumberInput with FormControl', () => <Custom />);

‎example/src/storybook/stories/PinInput/basic.tsx

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from 'react';
2+
import {
3+
PinInputControl,
4+
PinInput,
5+
SubmitButton,
6+
ResetButton,
7+
Box,
8+
ButtonGroup,
9+
} from '@native-base/formik-ui';
10+
import { Formik } from 'formik';
11+
import { Heading } from 'native-base';
12+
import * as Yup from 'yup';
13+
14+
const validationSchema = Yup.object().shape({
15+
otp: Yup.string().required(
16+
'Please specify your otp, it is required to proceed forward.'
17+
),
18+
});
19+
20+
export default function () {
21+
const onSubmit = async (values: any) => {
22+
await new Promise((resolve) => setTimeout(resolve, 1000));
23+
console.log(values);
24+
};
25+
return (
26+
<Formik
27+
initialValues={{
28+
otp: '',
29+
}}
30+
onSubmit={onSubmit}
31+
validationSchema={validationSchema}
32+
>
33+
{({ values, errors }) => (
34+
<Box mt={4}>
35+
<Heading>Verify your Phone Number</Heading>
36+
<PinInputControl mt={4} name="otp" label="Enter Your Otp" isRequired>
37+
<PinInput.Field />
38+
<PinInput.Field />
39+
<PinInput.Field />
40+
<PinInput.Field />
41+
</PinInputControl>
42+
<Box pb={4} />
43+
<ButtonGroup spacing={6}>
44+
<SubmitButton colorScheme="teal">Next</SubmitButton>
45+
<ResetButton colorScheme="yellow">Reset</ResetButton>
46+
</ButtonGroup>
47+
<Box mt={4} bg="gray.100" p={3}>
48+
<Heading size="sm" mb={2}>
49+
Current State
50+
</Heading>
51+
Values: {JSON.stringify(values, null, 2)}
52+
Errors: {JSON.stringify(errors, null, 2)}
53+
</Box>
54+
</Box>
55+
)}
56+
</Formik>
57+
);
58+
}

‎example/src/storybook/stories/PinInput/custom.tsx

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from 'react';
2+
import {
3+
PinInput,
4+
SubmitButton,
5+
ResetButton,
6+
Box,
7+
ButtonGroup,
8+
} from '@native-base/formik-ui';
9+
import { Formik } from 'formik';
10+
import { Heading, FormControl } from 'native-base';
11+
import * as Yup from 'yup';
12+
13+
const validationSchema = Yup.object().shape({
14+
otp: Yup.string().required('Please specify your otp, it is important.'),
15+
});
16+
17+
export default function () {
18+
const onSubmit = async (values: any) => {
19+
await new Promise((resolve) => setTimeout(resolve, 1000));
20+
console.log(values);
21+
};
22+
return (
23+
<Formik
24+
initialValues={{
25+
otp: '',
26+
}}
27+
onSubmit={onSubmit}
28+
validationSchema={validationSchema}
29+
enablereinitialize
30+
>
31+
{({ values, errors }) => (
32+
<Box mt={4}>
33+
<Heading>Confirm Your Identity</Heading>
34+
<FormControl mt={4} isInvalid={errors.otp}>
35+
<FormControl.Label>
36+
Please enter the OTP. Trust me , I won't steal anything 😉 .
37+
</FormControl.Label>
38+
<PinInput mt={2} name="otp">
39+
<PinInput.Field />
40+
<PinInput.Field />
41+
<PinInput.Field />
42+
<PinInput.Field />
43+
</PinInput>
44+
<FormControl.ErrorMessage>{errors.otp}</FormControl.ErrorMessage>
45+
</FormControl>
46+
<Box pb={4} />
47+
<ButtonGroup spacing={6}>
48+
<SubmitButton colorScheme="teal">Next</SubmitButton>
49+
<ResetButton colorScheme="yellow">Reset</ResetButton>
50+
</ButtonGroup>
51+
<Box mt={4} bg="gray.100" p={3}>
52+
<Heading size="sm" mb={2}>
53+
Current State
54+
</Heading>
55+
Values: {JSON.stringify(values, null, 2)}
56+
Errors: {JSON.stringify(errors, null, 2)}
57+
</Box>
58+
</Box>
59+
)}
60+
</Formik>
61+
);
62+
}

0 commit comments

Comments
 (0)