Added sub-form.js

Author: Arun-42

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { componentTypes } from '@data-driven-forms/react-form-renderer';
 import Tabs from './tabs';
 import PlainText from './plain-text';
@@ -10,14 +9,26 @@ import TimePicker from './time-picker';
 import Radio from './radio';
 import Switch from './switch';
 import Select from './select';
-export const components = {};
+import SubForm from './sub-form.js';
+export const components = {
+  TextField,
+  TextArea,
+  Select,
+  Checkbox,
+  Radio,
+  Switch,
+  DatePicker,
+  TimePicker,
+  PlainText,
+  SubForm
+};
 
 const componentMapper = {
   [componentTypes.TEXT_FIELD]: TextField,
   [componentTypes.TEXTAREA]: TextArea,
   [componentTypes.SELECT]: Select,
   [componentTypes.CHECKBOX]: Checkbox,
-  [componentTypes.SUB_FORM]: () => <div>sub form</div>,
+  [componentTypes.SUB_FORM]: SubForm,
   [componentTypes.RADIO]: Radio,
   [componentTypes.TABS]: Tabs,
   [componentTypes.DATE_PICKER]: DatePicker,

packages/ant-component-mapper/src/files/sub-form.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Typography, Row, Col } from 'antd';
+
+import { useFormApi } from '@data-driven-forms/react-form-renderer';
+
+const { Title, Paragraph } = Typography;
+const SubForm = ({ fields, title, description, FormSpyProvider: _FormSpyProvider, validate: _validate, ...rest }) => {
+  const { renderForm } = useFormApi();
+  return (
+    <div>
+      {title && (
+        <Row>
+          <Col span={24}>
+            <Title>{title}</Title>
+          </Col>
+        </Row>
+      )}
+      {description && (
+        <Row>
+          <Col span={24}>
+            <Paragraph>{description}</Paragraph>
+          </Col>
+        </Row>
+      )}
+      <Row>
+        <Col span={24}>{renderForm(fields)}</Col>
+      </Row>
+    </div>
+  );
+};
+
+SubForm.propTypes = {
+  fields: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  FormSpyProvider: PropTypes.any,
+  validate: PropTypes.any
+};
+
+export default SubForm;