Merge pull request #633 from rvsia/antCustomization

fix(ant): refactor and add customization for each component

Author: Hyperkid123

packages/ant-component-mapper/demo/index.js

@@ -20,7 +20,7 @@ const App = () => (
       componentMapper={componentMapper}
       FormTemplate={(props) => <FormTemplate layout='vertical' {...props} />}
       onSubmit={console.log}
-      schema={demoSchema}
+      schema={wizardSchema}
     />
   </div>
 );

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

@@ -2,23 +2,32 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { Form } from 'antd';
+import { validationError } from './helpers';
+import { childrenPropTypes } from '@data-driven-forms/common/src/prop-types-templates';
+
+const AntForm = ({ label, children, isRequired, FormItemProps, meta, validateOnMount, helperText, description, hideLabel }) => {
+  const invalid = validationError(meta, validateOnMount);
+  const help = invalid || helperText || description;
 
-const AntForm = ({ label, children, layout, component, invalid, isRequired, help }) => {
   return (
-    <Form.Item validateStatus={!invalid ? '' : 'error'} help={help} label={label} name={label}>
+    <Form.Item validateStatus={!invalid ? '' : 'error'} help={help} label={!hideLabel && label} name={label} required={isRequired} {...FormItemProps}>
       <div>{children}</div>
     </Form.Item>
   );
 };
 
 AntForm.propTypes = {
   label: PropTypes.string,
-  layout: PropTypes.string,
-  children: PropTypes.object,
+  children: childrenPropTypes,
   help: PropTypes.string,
   isRequired: PropTypes.bool,
-  component: PropTypes.string,
-  invalid: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
+  invalid: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  FormItemProps: PropTypes.object,
+  meta: PropTypes.object,
+  validateOnMount: PropTypes.bool,
+  helperText: PropTypes.node,
+  description: PropTypes.node,
+  hideLabel: PropTypes.bool
 };
 
 export default AntForm;

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

@@ -1,10 +1,11 @@
 import React from 'react';
 import { childrenPropTypes } from '@data-driven-forms/common/src/prop-types-templates';
+
 import './style.scss';
 
 const IsRequired = ({ children }) => (
   <React.Fragment>
-    <span className="styles" aria-hidden="true">
+    <span className="ddorg__ant-component-mapper_is-required" aria-hidden="true">
       *
     </span>
     {children}

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

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 
 import { Checkbox as AntCheckbox } from 'antd';
 import MultipleChoiceListCommon, { wrapperProps } from '@data-driven-forms/common/src/multiple-choice-list';
-import { validationError } from './helpers';
 import AntForm from './form-wrapper';
 
 const FinalCheckbox = ({ isDisabled, label, ...props }) => (
@@ -17,15 +16,19 @@ FinalCheckbox.propTypes = {
   label: PropTypes.node
 };
 
-const Wrapper = ({ label, isRequired, children, meta, validateOnMount, helperText, description }) => {
-  const invalid = validationError(meta, validateOnMount);
-  const help = helperText || description || invalid;
-  return (
-    <AntForm label={label} help={help} invalid={invalid} component="fieldset" isRequired={isRequired} layout="vertical">
-      {children}
-    </AntForm>
-  );
-};
+const Wrapper = ({ label, isRequired, children, meta, validateOnMount, helperText, description, FormItemProps }) => (
+  <AntForm
+    label={label}
+    meta={meta}
+    validateOnMount={validateOnMount}
+    helperText={helperText}
+    description={description}
+    FormItemProps={FormItemProps}
+    isRequired={isRequired}
+  >
+    {children}
+  </AntForm>
+);
 
 Wrapper.propTypes = {
   ...wrapperProps

packages/ant-component-mapper/src/common/style.scss

@@ -1,4 +1,4 @@
-.styles {
-    color: #ff4d4f;
-    margin-right: 4px;
-  }
+.ddorg__ant-component-mapper_is-required {
+  color: #ff4d4f;
+  margin-right: 4px;
+}

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

@@ -3,25 +3,33 @@ import PropTypes from 'prop-types';
 import { Checkbox as AntCheckbox } from 'antd';
 import MultipleChoiceList from '../common/multiple-choice-list';
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
-import { validationError } from '../common/helpers';
 import IsRequired from '../common/is-required';
 import AntForm from '../common/form-wrapper';
 
 export const SingleCheckbox = (props) => {
-  const { input, isReadOnly, isDisabled, isRequired, label, helperText, description, validateOnMount, meta } = useFieldApi({
+  const { input, isReadOnly, isDisabled, isRequired, label, helperText, description, validateOnMount, meta, FormItemProps, ...rest } = useFieldApi({
     ...props,
     type: 'checkbox'
   });
-  const invalid = validationError(meta, validateOnMount);
-  const text = invalid || helperText || description;
+
   return (
-    <AntForm component="fieldset" invalid={invalid} help={text}>
+    <AntForm
+      label={label}
+      meta={meta}
+      validateOnMount={validateOnMount}
+      helperText={helperText}
+      description={description}
+      FormItemProps={FormItemProps}
+      isRequired={isRequired}
+      hideLabel
+    >
       <AntCheckbox
         checked={input.checked}
         {...input}
         defaultValue={input.value ? input.value : undefined}
         disabled={isDisabled || isReadOnly}
         value={input.name}
+        {...rest}
       >
         {isRequired ? <IsRequired>{label}</IsRequired> : label}
       </AntCheckbox>
@@ -36,7 +44,8 @@ SingleCheckbox.propTypes = {
   label: PropTypes.node,
   helperText: PropTypes.node,
   description: PropTypes.node,
-  validateOnMount: PropTypes.bool
+  validateOnMount: PropTypes.bool,
+  FormItemProps: PropTypes.object
 };
 
 const Checkbox = ({ options, ...props }) => (options ? <MultipleChoiceList options={options} {...props} /> : <SingleCheckbox {...props} />);

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

@@ -1,9 +1,9 @@
 import { componentTypes } from '@data-driven-forms/react-form-renderer';
+
 import Tabs from './tabs';
-import React from 'react';
 import PlainText from './plain-text';
 import TextField from './text-field';
-import TextArea from './text-area';
+import Textarea from './textarea';
 import Checkbox from './checkbox';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
@@ -12,9 +12,13 @@ import Switch from './switch';
 import Select from './select';
 import Wizard from './wizard';
 import SubForm from './sub-form.js';
+import DualListSelect from './dual-list-select.js';
+import FieldArray from './field-array.js';
+import Slider from './slider.js';
+
 export const components = {
   TextField,
-  TextArea,
+  Textarea,
   Select,
   Checkbox,
   Radio,
@@ -23,12 +27,15 @@ export const components = {
   TimePicker,
   PlainText,
   SubForm,
-  Wizard
+  Wizard,
+  DualListSelect,
+  FieldArray,
+  Slider
 };
 
 const componentMapper = {
   [componentTypes.TEXT_FIELD]: TextField,
-  [componentTypes.TEXTAREA]: TextArea,
+  [componentTypes.TEXTAREA]: Textarea,
   [componentTypes.SELECT]: Select,
   [componentTypes.CHECKBOX]: Checkbox,
   [componentTypes.SUB_FORM]: SubForm,
@@ -39,9 +46,9 @@ const componentMapper = {
   [componentTypes.PLAIN_TEXT]: PlainText,
   [componentTypes.SWITCH]: Switch,
   [componentTypes.WIZARD]: Wizard,
-  [componentTypes.SLIDER]: () => <div>Not Implemented</div>,
-  [componentTypes.DUAL_LIST_SELECT]: () => <div>Not Implemented</div>,
-  [componentTypes.FIELD_ARRAY]: () => <div>Not Implemented</div>
+  [componentTypes.SLIDER]: Slider,
+  [componentTypes.DUAL_LIST_SELECT]: DualListSelect,
+  [componentTypes.FIELD_ARRAY]: FieldArray
 };
 
 export default componentMapper;

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

@@ -6,21 +6,42 @@ import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 import AntForm from '../common/form-wrapper';
 
 const DatePicker = (props) => {
-  const { input, isReadOnly, isDisabled, placeholder, isRequired, label, helperText, description, validateOnMount, meta } = useFieldApi(props);
+  const {
+    input,
+    isReadOnly,
+    isDisabled,
+    placeholder,
+    isRequired,
+    label,
+    helperText,
+    description,
+    validateOnMount,
+    meta,
+    FormItemProps,
+    ...rest
+  } = useFieldApi(props);
   const invalid = validationError(meta, validateOnMount);
-  const placeholderDisplay = placeholder ? placeholder : 'Select date';
-  const help = invalid || helperText || description;
+
   return (
-    <AntForm layout="vertical" isRequired={isRequired} label={label} invalid={invalid} help={help}>
+    <AntForm
+      label={label}
+      meta={meta}
+      validateOnMount={validateOnMount}
+      helperText={helperText}
+      description={description}
+      FormItemProps={FormItemProps}
+      isRequired={isRequired}
+    >
       <AntDatePicker
         disabled={isDisabled || isReadOnly}
         defaultValue={input.value ? input.value : undefined}
-        placeholder={placeholderDisplay}
+        placeholder={placeholder}
         required={isRequired}
         error={!!invalid}
         readOnly={isReadOnly}
         {...input}
         value={input.value || null}
+        {...rest}
       />
     </AntForm>
   );
@@ -35,7 +56,12 @@ DatePicker.propTypes = {
   helperText: PropTypes.node,
   validateOnMount: PropTypes.bool,
   locale: PropTypes.string,
-  description: PropTypes.node
+  description: PropTypes.node,
+  FormItemProps: PropTypes.object
+};
+
+DatePicker.defaultProps = {
+  placeholder: 'Select date'
 };
 
 export default DatePicker;

packages/ant-component-mapper/src/files/dual-list-select.js

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default () => <div>not implemented</div>;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default () => <div>not implemented</div>;