Added switch.js

Author: Arun-42

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

@@ -8,6 +8,7 @@ import Checkbox from './checkbox';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 import Radio from './radio';
+import Switch from './switch';
 import Select from './select';
 export const components = {};
 
@@ -22,7 +23,7 @@ const componentMapper = {
   [componentTypes.DATE_PICKER]: DatePicker,
   [componentTypes.TIME_PICKER]: TimePicker,
   [componentTypes.PLAIN_TEXT]: PlainText,
-  [componentTypes.SWITCH]: () => <div>switch</div>
+  [componentTypes.SWITCH]: Switch
 };
 
 export default componentMapper;

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

@@ -6,14 +6,6 @@ import FormTemplate from '@data-driven-forms/common/src/form-template';
 
 const { Title, Paragraph } = Typography;
 
-const AntButton = ({ children, ...props }) => {
-  return (
-    <Button {...props} type="primary" htmlType="submit">
-      {children}
-    </Button>
-  );
-};
-
 const Form = ({ children, ...props }) => <form {...props}>{children}</form>;
 const Description = ({ children }) => (
   <Typography>
@@ -27,7 +19,11 @@ const TitleComponent = ({ children }) => (
 );
 
 const ButtonGroup = ({ children }) => <div style={{ display: 'flex', justifyContent: 'flex-end' }}>{children}</div>;
-const ButtonComponent = ({ label, variant, children, ...props }) => <AntButton {...props}>{label || children}</AntButton>;
+const ButtonComponent = ({ label, variant, children, buttonType, ...props }) => (
+  <Button {...props} type="primary" htmlType={props.type}>
+    {label || children}
+  </Button>
+);
 
 const AntFormTemplate = (props) => (
   <FormTemplate FormWrapper={Form} Button={ButtonComponent} ButtonGroup={ButtonGroup} Title={TitleComponent} Description={Description} {...props} />

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Switch as AntSwitch } from 'antd';
+import { meta, input } from '@data-driven-forms/common/src/prop-types-templates';
+import AntForm from '../common/form-wrapper';
+import { validationError } from '../common/helpers';
+import { useFieldApi } from '@data-driven-forms/react-form-renderer';
+
+export const Switch = (props) => {
+  const { input, isReadOnly, isDisabled, isRequired, label, helperText, description, validateOnMount, meta, onText, offText, ...rest } = useFieldApi({
+    ...props,
+    type: 'checkbox'
+  });
+  const invalid = validationError(meta, validateOnMount);
+  const text = invalid || helperText || description;
+  const { name, value, onChange, onBlur } = input;
+  return (
+    <AntForm help={text} invalid={invalid} isRequired={isRequired} error={!!invalid} label={input.checked ? onText || label : offText || label}>
+      <AntSwitch {...rest} onChange={onChange} value={value} name={name} onClick={onBlur} disabled={isDisabled || isReadOnly} />
+    </AntForm>
+  );
+};
+
+Switch.propTypes = {
+  input,
+  meta,
+  isReadOnly: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  label: PropTypes.node,
+  helperText: PropTypes.node,
+  validateOnMount: PropTypes.bool,
+  onText: PropTypes.node,
+  offText: PropTypes.node,
+  description: PropTypes.node
+};
+
+export default Switch;