Skip to content

Commit a2370c5

Browse files
Arun-42Arun-42
committed
Added time-picker.js.
Also extracted the form-wrapper to common.
1 parent 936e489 commit a2370c5

File tree

10 files changed

+167
-108
lines changed

10 files changed

+167
-108
lines changed

‎packages/ant-component-mapper/src/common/form-wrapper.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import { Form } from 'antd';
5+
6+
const AntForm = ({ label, children, layout, component, invalid, isRequired, help }) => {
7+
return (
8+
<Form layout={layout} component={component}>
9+
<Form.Item
10+
validateStatus={!invalid ? '' : 'error'}
11+
rules={[
12+
{
13+
required: isRequired,
14+
message: 'Required'
15+
}
16+
]}
17+
help={help}
18+
label={label}
19+
name={label}
20+
>
21+
{children}
22+
</Form.Item>
23+
</Form>
24+
);
25+
};
26+
27+
AntForm.propTypes = {
28+
label: PropTypes.string,
29+
layout: PropTypes.string,
30+
children: PropTypes.object,
31+
help: PropTypes.string,
32+
isRequired: PropTypes.bool,
33+
component: PropTypes.string,
34+
invalid: PropTypes.string
35+
};
36+
37+
export default AntForm;

‎packages/ant-component-mapper/src/common/is-required.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
import { childrenPropTypes } from '@data-driven-forms/common/src/prop-types-templates';
3+
4+
const styles = {
5+
color: '#ff4d4f',
6+
marginRight: '4px'
7+
};
8+
9+
const IsRequired = ({ children }) => (
10+
<React.Fragment>
11+
<span style={styles} aria-hidden="true">
12+
*
13+
</span>
14+
{children}
15+
</React.Fragment>
16+
);
17+
18+
IsRequired.propTypes = {
19+
children: childrenPropTypes
20+
};
21+
22+
export default IsRequired;

‎packages/ant-component-mapper/src/common/multiple-choice-list.js

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33

4-
import { Form, Checkbox as AntCheckbox } from 'antd';
4+
import { Checkbox as AntCheckbox } from 'antd';
55
import MultipleChoiceListCommon, { wrapperProps } from '@data-driven-forms/common/src/multiple-choice-list';
66
import { validationError } from './helpers';
7+
import AntForm from './form-wrapper';
78

89
const FinalCheckbox = ({ isDisabled, label, ...props }) => (
910
<AntCheckbox {...props} disabled={isDisabled}>
@@ -16,26 +17,13 @@ FinalCheckbox.propTypes = {
1617
label: PropTypes.node
1718
};
1819

19-
//not sure if it is necessary to make sure that the checkoboxes are aligned vertiacally when multiple
2020
const Wrapper = ({ label, isRequired, children, meta, validateOnMount, helperText, description }) => {
2121
const invalid = validationError(meta, validateOnMount);
22+
const help = helperText || description || invalid;
2223
return (
23-
<Form required={isRequired} layout="vertical" component="fieldset">
24-
<Form.Item
25-
label={label}
26-
name={label}
27-
help={helperText || description || invalid}
28-
validateStatus={!invalid ? '' : 'error'}
29-
rules={[
30-
{
31-
required: isRequired,
32-
message: 'Required'
33-
}
34-
]}
35-
>
36-
{children}
37-
</Form.Item>
38-
</Form>
24+
<AntForm label={label} help={help} invalid={invalid} component="fieldset" isRequired={isRequired} layout="vertical">
25+
{children}
26+
</AntForm>
3927
);
4028
};
4129

‎packages/ant-component-mapper/src/files/checkbox.js

Lines changed: 8 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { Form, Checkbox as AntCheckbox } from 'antd';
3+
import { Checkbox as AntCheckbox } from 'antd';
44
import { meta, input } from '@data-driven-forms/common/src/prop-types-templates';
55
import MultipleChoiceList from '../common/multiple-choice-list';
66
import { useFieldApi } from '@data-driven-forms/react-form-renderer';
77
import { validationError } from '../common/helpers';
8+
import IsRequired from '../common/is-required';
9+
import AntForm from '../common/form-wrapper';
810

911
export const SingleCheckbox = (props) => {
1012
const { input, isReadOnly, isDisabled, isRequired, label, helperText, description, validateOnMount, meta } = useFieldApi({
@@ -14,22 +16,11 @@ export const SingleCheckbox = (props) => {
1416
const invalid = validationError(meta, validateOnMount);
1517
const text = invalid || helperText || description;
1618
return (
17-
<Form component="fieldset">
18-
<Form.Item
19-
validateStatus={!invalid ? '' : 'error'}
20-
rules={[
21-
{
22-
required: isRequired,
23-
message: 'Required'
24-
}
25-
]} //this is useless
26-
help={text}
27-
>
28-
<AntCheckbox checked={input.checked} {...input} disabled={isDisabled || isReadOnly} value={input.name}>
29-
{label}
30-
</AntCheckbox>
31-
</Form.Item>
32-
</Form>
19+
<AntForm component="fieldset" invalid={invalid} help={text}>
20+
<AntCheckbox checked={input.checked} {...input} disabled={isDisabled || isReadOnly} value={input.name}>
21+
{isRequired ? <IsRequired>{label}</IsRequired> : label}
22+
</AntCheckbox>
23+
</AntForm>
3324
);
3425
};
3526

‎packages/ant-component-mapper/src/files/component-mapper.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import PlainText from './plain-text';
55
import TextField from './text-field';
66
import TextArea from './text-area';
77
import Checkbox from './checkbox';
8-
import DatePicker from './date-picker'
8+
import DatePicker from './date-picker';
9+
import TimePicker from './time-picker';
910

1011
export const components = {};
1112

@@ -18,7 +19,7 @@ const componentMapper = {
1819
[componentTypes.RADIO]: () => <div>Radio field</div>,
1920
[componentTypes.TABS]: Tabs,
2021
[componentTypes.DATE_PICKER]: DatePicker,
21-
[componentTypes.TIME_PICKER]: () => <div>Time picker</div>,
22+
[componentTypes.TIME_PICKER]: TimePicker,
2223
[componentTypes.SELECT]: () => <div>Select field</div>,
2324
[componentTypes.PLAIN_TEXT]: PlainText,
2425
[componentTypes.SWITCH]: <div>Switch</div>

‎packages/ant-component-mapper/src/files/date-picker.js

Lines changed: 14 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,28 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { DatePicker as AntDatePicker, Form } from 'antd';
3+
import { DatePicker as AntDatePicker } from 'antd';
44
import { validationError } from '../common/helpers';
55
import { meta, input } from '@data-driven-forms/common/src/prop-types-templates';
66
import { useFieldApi } from '@data-driven-forms/react-form-renderer';
7+
import AntForm from '../common/form-wrapper';
78

89
const DatePicker = (props) => {
910
const { input, isReadOnly, isDisabled, placeholder, isRequired, label, helperText, description, validateOnMount, meta } = useFieldApi(props);
1011
const invalid = validationError(meta, validateOnMount);
1112
const placeholderDisplay = placeholder ? placeholder : 'Select date';
13+
const help = invalid || helperText || description;
1214
return (
13-
<Form layout="vertical">
14-
<Form.Item
15-
label={label}
16-
rules={[
17-
{
18-
required: isRequired,
19-
message: 'Required'
20-
}
21-
]}
22-
name={label}
23-
validateStatus={!invalid ? '' : 'error'}
24-
help={invalid || helperText || description}
25-
>
26-
<AntDatePicker
27-
disabled={isDisabled || isReadOnly}
28-
placeholder={placeholderDisplay}
29-
required={isRequired}
30-
error={!!invalid}
31-
readOnly={isReadOnly}
32-
{...input}
33-
value={input.value || null}
34-
/>
35-
</Form.Item>
36-
</Form>
15+
<AntForm layout="vertical" isRequired={isRequired} label={label} invalid={invalid} help={help}>
16+
<AntDatePicker
17+
disabled={isDisabled || isReadOnly}
18+
placeholder={placeholderDisplay}
19+
required={isRequired}
20+
error={!!invalid}
21+
readOnly={isReadOnly}
22+
{...input}
23+
value={input.value || null}
24+
/>
25+
</AntForm>
3726
);
3827
};
3928

‎packages/ant-component-mapper/src/files/form-template.js

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,10 @@ import React from 'react';
33
import { Button, Typography } from 'antd';
44
import 'antd/dist/antd.css';
55
import FormTemplate from '@data-driven-forms/common/src/form-template';
6-
// import { Row, Col } from 'antd';
7-
// import Grid from '@material-ui/core/Grid';
8-
// import MUIButton from '@material-ui/core/Button';
9-
// import Typography from '@material-ui/core/Typography';
106

11-
const { Title, Paragraph /* , Text */ } = Typography;
7+
const { Title, Paragraph } = Typography;
128

139
const AntButton = ({ children, ...props }) => {
14-
//type is submit in props however type is an attribuite of antButton
15-
//console.log(props);
1610
return (
1711
<Button {...props} type="primary" htmlType="submit">
1812
{children}

‎packages/ant-component-mapper/src/files/text-area.js

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,34 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { Form, Input /* Typography */ } from 'antd';
3+
import { Input /* Typography */ } from 'antd';
44

55
import { validationError } from '../common/helpers';
66
import { meta, input } from '@data-driven-forms/common/src/prop-types-templates'; //only for propTypes check
77
import { useFieldApi } from '@data-driven-forms/react-form-renderer';
8+
import AntForm from '../common/form-wrapper';
89

9-
const TextArea = (props) => {
10+
const TextField = (props) => {
1011
const { input, isReadOnly, isDisabled, placeholder, isRequired, label, helperText, description, validateOnMount, meta, ...rest } = useFieldApi(
1112
props
1213
);
13-
//console.log(useFieldApi(props));
1414
const invalid = validationError(meta, validateOnMount);
15+
const help = invalid || helperText || description;
1516
return (
16-
<Form layout="vertical">
17-
<Form.Item
18-
help={invalid || helperText || description}
19-
label={label}
20-
name={label}
21-
validateStatus={!invalid ? '' : 'error'}
22-
rules={[
23-
{
24-
required: isRequired,
25-
message: 'Required'
26-
}
27-
]}
28-
>
29-
<Input.TextArea {...input} disabled={isDisabled} readOnly={isReadOnly} placeholder={placeholder} {...rest} />
30-
</Form.Item>
31-
</Form>
17+
<AntForm
18+
layout="vertical"
19+
invalid={invalid}
20+
isRequired={isRequired}
21+
validateStatus={!invalid ? '' : 'error'}
22+
help={help}
23+
label={label}
24+
name={label}
25+
>
26+
<Input.TextArea {...input} disabled={isDisabled} readOnly={isReadOnly} placeholder={placeholder} {...rest} />
27+
</AntForm>
3228
);
3329
};
3430

35-
TextArea.propTypes = {
31+
TextField.propTypes = {
3632
input,
3733
meta,
3834
isReadOnly: PropTypes.bool,
@@ -45,4 +41,4 @@ TextArea.propTypes = {
4541
description: PropTypes.node
4642
};
4743

48-
export default TextArea;
44+
export default TextField;

‎packages/ant-component-mapper/src/files/text-field.js

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,30 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { Form, Input /* Typography */ } from 'antd';
3+
import { Input /* Typography */ } from 'antd';
44

55
import { validationError } from '../common/helpers';
66
import { meta, input } from '@data-driven-forms/common/src/prop-types-templates'; //only for propTypes check
77
import { useFieldApi } from '@data-driven-forms/react-form-renderer';
8+
import AntForm from '../common/form-wrapper';
89

910
const TextField = (props) => {
1011
const { input, isReadOnly, isDisabled, placeholder, isRequired, label, helperText, description, validateOnMount, meta, ...rest } = useFieldApi(
1112
props
1213
);
13-
//console.log(useFieldApi(props));
1414
const invalid = validationError(meta, validateOnMount);
15+
const help = invalid || helperText || description;
1516
return (
16-
<Form layout="vertical">
17-
<Form.Item
18-
help={invalid || helperText || description}
19-
label={label}
20-
name={label}
21-
validateStatus={!invalid ? '' : 'error'}
22-
rules={[
23-
{
24-
required: isRequired,
25-
message: 'Required'
26-
}
27-
]}
28-
>
29-
<Input {...input} disabled={isDisabled} readOnly={isReadOnly} placeholder={placeholder} {...rest} />
30-
</Form.Item>
31-
</Form>
17+
<AntForm
18+
layout="vertical"
19+
invalid={invalid}
20+
isRequired={isRequired}
21+
validateStatus={!invalid ? '' : 'error'}
22+
help={help}
23+
label={label}
24+
name={label}
25+
>
26+
<Input {...input} disabled={isDisabled} readOnly={isReadOnly} placeholder={placeholder} {...rest} />
27+
</AntForm>
3228
);
3329
};
3430

‎packages/ant-component-mapper/src/files/time-picker.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { TimePicker as AntTimePicker } from 'antd';
4+
import { validationError } from '../common/helpers';
5+
import { meta, input } from '@data-driven-forms/common/src/prop-types-templates';
6+
import { useFieldApi } from '@data-driven-forms/react-form-renderer';
7+
import AntForm from '../common/form-wrapper';
8+
9+
const DatePicker = (props) => {
10+
const { input, isReadOnly, isDisabled, placeholder, isRequired, label, helperText, description, validateOnMount, meta } = useFieldApi(props);
11+
const invalid = validationError(meta, validateOnMount);
12+
const placeholderDisplay = placeholder ? placeholder : 'Select time';
13+
const help = invalid || helperText || description;
14+
return (
15+
<AntForm layout="vertical" isRequired={isRequired} label={label} invalid={invalid} help={help}>
16+
<AntTimePicker
17+
use12Hours
18+
format="h:mm a"
19+
disabled={isDisabled || isReadOnly}
20+
placeholder={placeholderDisplay}
21+
required={isRequired}
22+
error={!!invalid}
23+
readOnly={isReadOnly}
24+
{...input}
25+
value={input.value || null}
26+
/>
27+
</AntForm>
28+
);
29+
};
30+
31+
DatePicker.propTypes = {
32+
input,
33+
meta,
34+
isReadOnly: PropTypes.bool,
35+
isDisabled: PropTypes.bool,
36+
placeholder: PropTypes.node,
37+
isRequired: PropTypes.bool,
38+
label: PropTypes.node,
39+
helperText: PropTypes.node,
40+
validateOnMount: PropTypes.bool,
41+
locale: PropTypes.string,
42+
description: PropTypes.node
43+
};
44+
45+
export default DatePicker;

0 commit comments

Comments
 (0)