Simplify code and extract shared pieces

rvsia · rvsia · commit 976b2a8cda8f · 2020-09-09T16:15:13.000+02:00
diff --git a/packages/carbon-component-mapper/demo/demo-schemas/wizard-schema.js b/packages/carbon-component-mapper/demo/demo-schemas/wizard-schema.js
@@ -27,7 +27,7 @@ export const wizardSchema = {
               component: componentTypes.TEXTAREA,
               name: 'source.source-name',
               type: 'text',
-              label: 'Source name',
+              label: 'Source name'
             },
             {
               component: componentTypes.SELECT,
@@ -42,7 +42,7 @@ export const wizardSchema = {
                 {
                   value: 'google',
                   label: 'Google'
-                },
+                }
               ],
               validate: [
                 {
diff --git a/packages/carbon-component-mapper/demo/index.js b/packages/carbon-component-mapper/demo/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import FormRenderer from '@data-driven-forms/react-form-renderer';
-import { arraySchemaDDF } from './demo-schemas/widget-schema';
+// import { arraySchemaDDF } from './demo-schemas/widget-schema';
 import { componentMapper, FormTemplate } from '../src';
 import { wizardSchema } from './demo-schemas/wizard-schema';
 import sandboxSchema from './demo-schemas/sandbox';
diff --git a/packages/carbon-component-mapper/src/common/is-optional.js b/packages/carbon-component-mapper/src/common/is-optional.js
diff --git a/packages/carbon-component-mapper/src/common/prepare-props.js b/packages/carbon-component-mapper/src/common/prepare-props.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import WithDescription from './with-description';
+
+const prepareProps = ({ isDisabled, isReadOnly, label, description, ...props }) => ({
+  disabled: isDisabled,
+  labelText: label,
+  readOnly: isReadOnly,
+  ...props,
+  ...(description ? { labelText: <WithDescription description={description} labelText={label || props.labelText} /> } : {})
+});
+
+export default prepareProps;
diff --git a/packages/carbon-component-mapper/src/common/with-description.js b/packages/carbon-component-mapper/src/common/with-description.js
@@ -3,11 +3,7 @@ import PropTypes from 'prop-types';
 
 import { Tooltip } from 'carbon-components-react';
 
-const WithDescription = ({ labelText, description }) => (
-  <React.Fragment>
-    {labelText} <Tooltip>{description}</Tooltip>
-  </React.Fragment>
-);
+const WithDescription = ({ labelText, description }) => <Tooltip triggerText={labelText}>{description}</Tooltip>;
 
 WithDescription.propTypes = {
   labelText: PropTypes.node,
diff --git a/packages/carbon-component-mapper/src/files/checkbox.js b/packages/carbon-component-mapper/src/files/checkbox.js
@@ -6,6 +6,7 @@ import MultipleChoiceListCommon from '@data-driven-forms/common/src/multiple-cho
 import { Checkbox as CarbonCheckbox, FormGroup } from 'carbon-components-react';
 
 import WithDescription from '../common/with-description';
+import prepareProps from '../common/prepare-props';
 
 const Wrapper = ({ label, description, children }) => (
   <FormGroup legendText={description ? <WithDescription labelText={label} description={description} /> : label}>{children}</FormGroup>
@@ -18,11 +19,9 @@ Wrapper.propTypes = {
 };
 
 const SingleCheckbox = (props) => {
-  const { input, isDisabled, label, labelText, description, isReadOnly, helperText, ...rest } = useFieldApi({ ...props, type: 'checkbox' });
+  const { input, ...rest } = useFieldApi(prepareProps({ ...props, type: 'checkbox' }));
 
-  const finalLabel = description ? <WithDescription labelText={labelText || label} description={description} /> : labelText || label;
-
-  return <CarbonCheckbox {...input} id={input.name} labelText={finalLabel} disabled={isDisabled} {...rest} />;
+  return <CarbonCheckbox {...input} id={input.name} {...rest} />;
 };
 
 const SingleCheckboxInCommon = ({ label, isDisabled, id, ...props }) => <CarbonCheckbox id={id} labelText={label} disabled={isDisabled} />;
diff --git a/packages/carbon-component-mapper/src/files/date-picker.js b/packages/carbon-component-mapper/src/files/date-picker.js
@@ -4,34 +4,16 @@ import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 
 import { DatePicker as CarbonDatePicker, DatePickerInput } from 'carbon-components-react';
 
-import IsOptional from '../common/is-optional';
-import WithDescription from '../common/with-description';
+import prepareProps from '../common/prepare-props';
 
 const DatePicker = (props) => {
-  const {
-    input,
-    isDisabled,
-    isReadOnly,
-    datePickerType,
-    isRequired,
-    description,
-    meta,
-    labelText,
-    optionalText,
-    label,
-    DatePickerProps,
-    ...rest
-  } = useFieldApi(props);
-
-  const modifiedLabel = description ? <WithDescription description={description} labelText={labelText || label} /> : labelText || label;
-
-  const finalLabel = isRequired ? modifiedLabel : <IsOptional labelText={modifiedLabel} optionalText={optionalText} />;
+  const { input, datePickerType, meta, DatePickerProps, ...rest } = useFieldApi(prepareProps(props));
 
   const invalid = meta.touched && meta.error;
 
   return (
     <CarbonDatePicker {...input} datePickerType={datePickerType} {...DatePickerProps}>
-      <DatePickerInput disabled={isDisabled} labelText={finalLabel} invalid={Boolean(invalid)} invalidText={invalid} autocomplete={false} {...rest} />
+      <DatePickerInput id={input.name} invalid={Boolean(invalid)} invalidText={invalid ? invalid : ''} {...rest} />
     </CarbonDatePicker>
   );
 };
diff --git a/packages/carbon-component-mapper/src/files/form-group.js b/packages/carbon-component-mapper/src/files/form-group.js
diff --git a/packages/carbon-component-mapper/src/files/radio.js b/packages/carbon-component-mapper/src/files/radio.js
@@ -4,19 +4,16 @@ import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 
 import { FormGroup, RadioButtonGroup, RadioButton } from 'carbon-components-react';
 
-import WithDescription from '../common/with-description';
+import prepareProps from '../common/prepare-props';
 
 const Radio = (props) => {
-  const { label, labelText, input, isDisabled, options, FormGroupProps, helperText, description, ...rest } = useFieldApi({ type: 'radio', ...props });
+  const { labelText, disabled, input, options, FormGroupProps, ...rest } = useFieldApi(prepareProps({ type: 'radio', ...props }));
 
   return (
-    <FormGroup
-      legendText={description ? <WithDescription labelText={labelText || label} description={description} /> : labelText || label}
-      {...FormGroupProps}
-    >
-      <RadioButtonGroup {...input} valueSelected={input.value} disabled={isDisabled} {...rest}>
+    <FormGroup legendText={labelText} {...FormGroupProps}>
+      <RadioButtonGroup {...input} valueSelected={input.value} disabled={disabled} {...rest}>
         {options.map((option) => (
-          <RadioButton key={option.value} {...props} disabled={isDisabled} labelText={option.label} value={option.value} {...option} />
+          <RadioButton key={option.value} {...props} disabled={disabled} labelText={option.label} value={option.value} {...option} />
         ))}
       </RadioButtonGroup>
     </FormGroup>
diff --git a/packages/carbon-component-mapper/src/files/slider.js b/packages/carbon-component-mapper/src/files/slider.js
@@ -4,12 +4,10 @@ import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 
 import { Slider as CarbonSlider } from 'carbon-components-react';
 
-import WithDescription from '../common/with-description';
+import prepareProps from '../common/prepare-props';
 
 const Slider = (props) => {
-  const { input, meta, isDisabled, label, labelText, isRequired, optionalText, description, ...rest } = useFieldApi(props);
-
-  const modifiedLabel = description ? <WithDescription description={description} labelText={labelText || label} /> : labelText || label;
+  const { input, meta, isRequired, ...rest } = useFieldApi(prepareProps(props));
 
   const invalid = meta.touched && meta.error;
 
@@ -19,8 +17,6 @@ const Slider = (props) => {
       value={Number(input.value) || 0}
       key={input.name}
       id={input.name}
-      labelText={modifiedLabel}
-      disabled={isDisabled}
       invalid={Boolean(invalid)}
       min={0}
       max={100}
diff --git a/packages/carbon-component-mapper/src/files/switch.js b/packages/carbon-component-mapper/src/files/switch.js
@@ -4,36 +4,17 @@ import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 
 import { Toggle } from 'carbon-components-react';
 
-import WithDescription from '../common/with-description';
+import prepareProps from '../common/prepare-props';
 
 const Switch = (props) => {
-  const {
-    input,
-    meta,
-    isDisabled,
-    isReadOnly,
-    label,
-    labelText,
-    isRequired,
-    optionalText,
-    description,
-    helperText,
-    onText,
-    offText,
-    ...rest
-  } = useFieldApi(props);
+  const { input, meta, onText, offText, ...rest } = useFieldApi(prepareProps(props));
 
-  const modifiedLabel = description ? <WithDescription description={description} labelText={labelText || label} /> : labelText || label;
-
-  return (
-    <Toggle {...input} key={input.name} id={input.name} labelText={modifiedLabel} disabled={isDisabled} labelA={offText} labelB={onText} {...rest} />
-  );
+  return <Toggle {...input} key={input.name} id={input.name} labelA={offText} labelB={onText} {...rest} />;
 };
 
 Switch.propTypes = {
   isDisabled: PropTypes.bool,
   isReadOnly: PropTypes.bool,
-  isRequired: PropTypes.bool,
   label: PropTypes.node,
   labelText: PropTypes.node,
   optionalText: PropTypes.node,
diff --git a/packages/carbon-component-mapper/src/files/text-field.js b/packages/carbon-component-mapper/src/files/text-field.js
@@ -4,31 +4,14 @@ import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 
 import { TextInput } from 'carbon-components-react';
 
-import IsOptional from '../common/is-optional';
-import WithDescription from '../common/with-description';
+import prepareProps from '../common/prepare-props';
 
 const TextField = (props) => {
-  const { input, meta, isDisabled, isReadOnly, label, labelText, isRequired, optionalText, description, ...rest } = useFieldApi(props);
-
-  const modifiedLabel = description ? <WithDescription description={description} labelText={labelText || label} /> : labelText || label;
-
-  const finalLabel = isRequired ? modifiedLabel : <IsOptional labelText={modifiedLabel} optionalText={optionalText} />;
+  const { input, meta, ...rest } = useFieldApi(prepareProps(props));
 
   const invalid = meta.touched && meta.error;
 
-  return (
-    <TextInput
-      {...input}
-      key={input.name}
-      id={input.name}
-      labelText={finalLabel}
-      disabled={isDisabled}
-      readOnly={isReadOnly}
-      invalid={Boolean(invalid)}
-      invalidText={invalid || ''}
-      {...rest}
-    />
-  );
+  return <TextInput {...input} key={input.name} id={input.name} invalid={Boolean(invalid)} invalidText={invalid || ''} {...rest} />;
 };
 
 TextField.propTypes = {
@@ -37,7 +20,6 @@ TextField.propTypes = {
   isRequired: PropTypes.bool,
   label: PropTypes.node,
   labelText: PropTypes.node,
-  optionalText: PropTypes.node,
   description: PropTypes.node
 };
 
diff --git a/packages/carbon-component-mapper/src/files/textarea.js b/packages/carbon-component-mapper/src/files/textarea.js
@@ -4,31 +4,14 @@ import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 
 import { TextArea } from 'carbon-components-react';
 
-import IsOptional from '../common/is-optional';
-import WithDescription from '../common/with-description';
+import prepareProps from '../common/prepare-props';
 
 const Textarea = (props) => {
-  const { input, meta, isDisabled, isReadOnly, label, labelText, isRequired, optionalText, description, ...rest } = useFieldApi(props);
-
-  const modifiedLabel = description ? <WithDescription description={description} labelText={labelText || label} /> : labelText || label;
-
-  const finalLabel = isRequired ? modifiedLabel : <IsOptional labelText={modifiedLabel} optionalText={optionalText} />;
+  const { input, meta, ...rest } = useFieldApi(prepareProps(props));
 
   const invalid = meta.touched && meta.error;
 
-  return (
-    <TextArea
-      {...input}
-      key={input.name}
-      id={input.name}
-      labelText={finalLabel}
-      disabled={isDisabled}
-      readOnly={isReadOnly}
-      invalid={Boolean(invalid)}
-      invalidText={invalid || ''}
-      {...rest}
-    />
-  );
+  return <TextArea {...input} key={input.name} id={input.name} invalid={Boolean(invalid)} invalidText={invalid || ''} {...rest} />;
 };
 
 Textarea.propTypes = {
diff --git a/packages/carbon-component-mapper/src/files/time-picker.js b/packages/carbon-component-mapper/src/files/time-picker.js
@@ -4,43 +4,15 @@ import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 
 import { TimePicker as CarbonTimePicker, TimePickerSelect, SelectItem } from 'carbon-components-react';
 
-import IsOptional from '../common/is-optional';
-import WithDescription from '../common/with-description';
+import prepareProps from '../common/prepare-props';
 
 const TimePicker = (props) => {
-  const {
-    input,
-    meta,
-    isDisabled,
-    isReadOnly,
-    label,
-    labelText,
-    isRequired,
-    optionalText,
-    description,
-    twelveHoursFormat,
-    timezones,
-    ...rest
-  } = useFieldApi(props);
-
-  const modifiedLabel = description ? <WithDescription description={description} labelText={labelText || label} /> : labelText || label;
-
-  const finalLabel = isRequired ? modifiedLabel : <IsOptional labelText={modifiedLabel} optionalText={optionalText} />;
+  const { input, meta, twelveHoursFormat, timezones, ...rest } = useFieldApi(prepareProps(props));
 
   const invalid = meta.touched && meta.error;
 
   return (
-    <CarbonTimePicker
-      {...input}
-      key={input.name}
-      id={input.name}
-      labelText={finalLabel}
-      disabled={isDisabled}
-      readOnly={isReadOnly}
-      invalid={Boolean(invalid)}
-      invalidText={invalid || ''}
-      {...rest}
-    >
+    <CarbonTimePicker {...input} key={input.name} id={input.name} invalid={Boolean(invalid)} invalidText={invalid || ''} {...rest}>
       {twelveHoursFormat && (
         <TimePickerSelect id={`${rest.id || input.name}-12h`}>
           <SelectItem value="AM" text="AM" />
diff --git a/packages/carbon-component-mapper/src/files/wizard.js b/packages/carbon-component-mapper/src/files/wizard.js
@@ -3,15 +3,7 @@ import WizardCommon from '@data-driven-forms/common/src/wizard/wizard';
 import { FormSpy, WizardContext } from '@data-driven-forms/react-form-renderer';
 
 const WizardInternal = () => {
-  const {
-    formOptions,
-    currentStep,
-    handlePrev,
-    onKeyDown,
-    handleNext,
-    activeStepIndex,
-    selectNext
-  } = useContext(WizardContext);
+  const { formOptions, currentStep, handlePrev, onKeyDown, handleNext, activeStepIndex, selectNext } = useContext(WizardContext);
 
   return (
     <div onKeyDown={onKeyDown}>
diff --git a/packages/carbon-component-mapper/src/index.js b/packages/carbon-component-mapper/src/index.js
@@ -4,7 +4,6 @@ export { default as Checkbox } from './files/checkbox';
 export { default as DatePicker } from './files/date-picker';
 export { default as DualListSelect } from './files/dual-list-select';
 export { default as FieldArray } from './files/field-array';
-export { default as FormGroup } from './files/form-group';
 export { default as PlainText } from './files/plain-text';
 export { default as Radio } from './files/radio';
 export { default as Select } from './files/select';
diff --git a/packages/common/src/demoschema.js b/packages/common/src/demoschema.js
@@ -27,7 +27,6 @@ const genereateField = (component, name = 'standard', optionsOptional = {}) => [
 ];
 
 const componentList = ['text-field', 'checkbox', 'date-picker', 'radio', 'select', 'switch', 'textarea', 'time-picker', 'slider'];
-const componentList2 = ['date-picker'];
 
 const superSchema = {
   fields: [

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@ export const wizardSchema = {`
`27`	`27`	`component: componentTypes.TEXTAREA,`
`28`	`28`	`name: 'source.source-name',`
`29`	`29`	`type: 'text',`
`30`		`- label: 'Source name',`
	`30`	`+ label: 'Source name'`
`31`	`31`	`},`
`32`	`32`	`{`
`33`	`33`	`component: componentTypes.SELECT,`
`@@ -42,7 +42,7 @@ export const wizardSchema = {`
`42`	`42`	`{`
`43`	`43`	`value: 'google',`
`44`	`44`	`label: 'Google'`
`45`		`- },`
	`45`	`+ }`
`46`	`46`	`],`
`47`	`47`	`validate: [`
`48`	`48`	`{`