|
1 |
| -/* eslint-disable react/prop-types */ |
2 | 1 | import React from 'react';
|
| 2 | +import PropTypes from 'prop-types'; |
3 | 3 | import { Button, Typography, Form as AntForm } from 'antd';
|
4 | 4 | import FormTemplate from '@data-driven-forms/common/src/form-template';
|
| 5 | +import { childrenPropTypes } from '@data-driven-forms/common/src/prop-types-templates'; |
5 | 6 |
|
6 | 7 | const { Title, Paragraph } = Typography;
|
7 | 8 |
|
8 |
| -const Form = ({ layout, children, onSubmit, ...props }) => ( |
9 |
| - <AntForm onFinish={onSubmit} layout={layout ? layout : 'vertical'} {...props}> |
| 9 | +const Form = ({ children, onSubmit, ...props }) => ( |
| 10 | + <AntForm onFinish={onSubmit} {...props}> |
10 | 11 | {children}
|
11 | 12 | </AntForm>
|
12 | 13 | );
|
13 | 14 |
|
| 15 | +Form.propTypes = { |
| 16 | + layout: PropTypes.string, |
| 17 | + onSubmit: PropTypes.func, |
| 18 | + children: childrenPropTypes |
| 19 | +}; |
| 20 | + |
| 21 | +Form.defaultProps = { |
| 22 | + layout: 'vertical' |
| 23 | +}; |
| 24 | + |
14 | 25 | const Description = ({ children }) => (
|
15 | 26 | <Typography>
|
16 | 27 | <Paragraph>{children}</Paragraph>
|
17 | 28 | </Typography>
|
18 | 29 | );
|
| 30 | + |
| 31 | +Description.propTypes = { |
| 32 | + children: childrenPropTypes |
| 33 | +}; |
| 34 | + |
19 | 35 | const TitleComponent = ({ children }) => (
|
20 | 36 | <Typography>
|
21 | 37 | <Title level={3}>{children}</Title>
|
22 | 38 | </Typography>
|
23 | 39 | );
|
24 | 40 |
|
| 41 | +TitleComponent.propTypes = { |
| 42 | + children: childrenPropTypes |
| 43 | +}; |
| 44 | + |
25 | 45 | const ButtonGroup = ({ children }) => <div style={{ display: 'flex', justifyContent: 'flex-end' }}>{children}</div>;
|
| 46 | + |
| 47 | +ButtonGroup.propTypes = { |
| 48 | + children: childrenPropTypes |
| 49 | +}; |
| 50 | + |
26 | 51 | const ButtonComponent = ({ label, variant, children, buttonType, ...props }) => (
|
27 | 52 | <Button {...props} type="primary" htmlType={props.type}>
|
28 | 53 | {label || children}
|
29 | 54 | </Button>
|
30 | 55 | );
|
31 | 56 |
|
32 |
| -const AntFormTemplate = (props) => ( |
| 57 | +ButtonComponent.propTypes = { |
| 58 | + children: childrenPropTypes, |
| 59 | + label: PropTypes.node, |
| 60 | + variant: PropTypes.string, |
| 61 | + buttonType: PropTypes.string, |
| 62 | + type: PropTypes.string |
| 63 | +}; |
| 64 | + |
| 65 | +const AntFormTemplate = ({ layout, formWrapperProps, ...props }) => ( |
33 | 66 | <FormTemplate
|
34 | 67 | FormWrapper={Form}
|
35 | 68 | Button={ButtonComponent}
|
36 | 69 | ButtonGroup={ButtonGroup}
|
37 | 70 | Title={TitleComponent}
|
38 | 71 | Description={Description}
|
39 |
| - formWrapperProps={{ layout: props.layout, ...props.formWrapperProps }} |
| 72 | + formWrapperProps={{ layout, ...formWrapperProps }} |
40 | 73 | {...props}
|
41 | 74 | />
|
42 | 75 | );
|
43 | 76 |
|
| 77 | +AntFormTemplate.propTypes = { |
| 78 | + layout: PropTypes.string, |
| 79 | + formWrapperProps: PropTypes.object |
| 80 | +}; |
| 81 | + |
44 | 82 | export default AntFormTemplate;
|
0 commit comments