-
Notifications
You must be signed in to change notification settings - Fork 27
/
custom-form-modal-page.example.js
114 lines (111 loc) 路 4.05 KB
/
custom-form-modal-page.example.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import React from 'react';
import { Formik } from 'formik';
import { CustomFormModalPage } from '@commercetools-frontend/application-components';
import { TextInput, TextField } from '@commercetools-frontend/ui-kit';
import ExampleWrapper from '../../internals/for-docs/example-wrapper';
import ModalController from '../../internals/for-docs/modal-controller';
// This component is supposed to be used in the mdx documentation
const CustomFormModalPageExample = () => (
<React.Fragment>
<ExampleWrapper
knobs={[
{
kind: 'text',
name: 'title',
label: 'Title',
initialValue:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
},
{
kind: 'text',
name: 'subtitle',
label: 'Subtitle',
initialValue:
'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
},
{
kind: 'select',
name: 'hideControls',
label: 'Hide Controls?',
valueOptions: [
{ value: false, label: 'No' },
{ value: true, label: 'Yes' },
],
initialValue: false,
},
]}
>
{({ values, isPlaygroundMode }) => {
const containerId = isPlaygroundMode
? 'custom-form-modal-page-playground'
: 'custom-form-modal-page';
return (
<ModalController
title="Open the Custom Form Modal Page by clicking on the button"
buttonLabel="Open Custom Form Modal Page"
containerId={containerId}
>
{({ isOpen, setIsOpen }) => (
<Formik
initialValues={{ email: '' }}
validate={formikValues => {
if (TextInput.isEmpty(formikValues.email)) {
return { email: { missing: true } };
}
return {};
}}
onSubmit={formikValues => {
alert(`email: ${formikValues.email}`);
setIsOpen(false);
}}
render={formikProps => (
<CustomFormModalPage
title={values.title}
subtitle={values.subtitle}
isOpen={isOpen}
onClose={() => setIsOpen(false)}
formControls={
<React.Fragment>
<CustomFormModalPage.FormSecondaryButton
onClick={() => {
formikProps.resetForm();
setIsOpen(false);
}}
/>
<CustomFormModalPage.FormPrimaryButton
onClick={formikProps.handleSubmit}
/>
<CustomFormModalPage.FormDeleteButton
onClick={() => null}
isDisabled={true}
/>
</React.Fragment>
}
hideControls={values.hideControls}
getParentSelector={() =>
document.querySelector(`#${containerId}`)
}
>
<TextField
name="email"
title="Email"
isRequired={true}
value={formikProps.values.email}
errors={formikProps.errors.email}
touched={formikProps.touched.email}
onChange={formikProps.handleChange}
onBlur={formikProps.handleBlur}
onFocus={formikProps.handleFocus}
/>
</CustomFormModalPage>
)}
/>
)}
</ModalController>
);
}}
</ExampleWrapper>
</React.Fragment>
);
CustomFormModalPageExample.displayName = 'CustomFormModalPageExample';
export default CustomFormModalPageExample;