Added docs for global props settings.

Hyperkid123 · Hyperkid123 · commit 17236773b8fa · 2020-04-15T16:28:42.000+02:00
diff --git a/packages/mui-component-mapper/src/files/tabs.js b/packages/mui-component-mapper/src/files/tabs.js
@@ -12,7 +12,7 @@ TabContent.propTypes = {
   formOptions: PropTypes.shape({ renderForm: PropTypes.func.isRequired }).isRequired
 };
 
-const FormTabs = ({ fields, AppBarProps, TabsProps, TabProps, TabContentProps }) => {
+const FormTabs = ({ fields, AppBarProps, TabsProps, TabProps }) => {
   const formOptions = useFormApi();
   const [activeTab, setActiveTab] = useState(0);
 
@@ -27,7 +27,7 @@ const FormTabs = ({ fields, AppBarProps, TabsProps, TabProps, TabContentProps })
       </AppBar>
       {fields.map((field, index) => (
         <div key={field.name} hidden={index !== activeTab}>
-          <TabContent {...field} name={field.name} formOptions={formOptions} {...TabContentProps} />
+          <TabContent {...field} name={field.name} formOptions={formOptions} />
         </div>
       ))}
     </div>
@@ -38,15 +38,13 @@ FormTabs.propTypes = {
   fields: PropTypes.array.isRequired,
   AppBarProps: PropTypes.object,
   TabsProps: PropTypes.object,
-  TabProps: PropTypes.object,
-  TabContentProps: PropTypes.object
+  TabProps: PropTypes.object
 };
 
 FormTabs.defaultProps = {
   AppBarProps: {},
   TabsProps: {},
-  TabProps: {},
-  TabContentProps: {}
+  TabProps: {}
 };
 
 export default FormTabs;
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/checkbox-multiple.js b/packages/react-renderer-demo/src/app/pages/component-example/checkbox-multiple.js
@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import ComponentText from '@docs/components/component-example-text';
 import useComponentExample from '../../src/hooks/use-component-example';
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
 import Pf4Checkbox from '@data-driven-forms/pf4-component-mapper/dist/cjs/checkbox';
 import Pf3Checkbox from '@data-driven-forms/pf3-component-mapper/dist/cjs/checkbox';
 import MuiCheckbox from '@data-driven-forms/mui-component-mapper/dist/cjs/checkbox';
+import CheckboxText from '@docs/components/mui-definitions/checkbox-text.md';
 
 const mappers = {
   pf4: {
@@ -20,5 +21,10 @@ const mappers = {
 
 export default () => {
   const [component, baseStructure, activeMapper] = useComponentExample();
-  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers[activeMapper]} />;
+  return (
+    <Fragment>
+      <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers[activeMapper]} />
+      {activeMapper === 'mui' && <CheckboxText />}
+    </Fragment>
+  );
 };
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/checkbox.js b/packages/react-renderer-demo/src/app/pages/component-example/checkbox.js
@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import ComponentText from '@docs/components/component-example-text';
 import useComponentExample from '../../src/hooks/use-component-example';
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
 import Pf4Checkbox from '@data-driven-forms/pf4-component-mapper/dist/cjs/checkbox';
 import Pf3Checkbox from '@data-driven-forms/pf3-component-mapper/dist/cjs/checkbox';
 import MuiCheckbox from '@data-driven-forms/mui-component-mapper/dist/cjs/checkbox';
+import CheckboxText from '@docs/components/mui-definitions/checkbox-text.md';
 
 const mappers = {
   pf4: {
@@ -20,5 +21,10 @@ const mappers = {
 
 export default () => {
   const [component, baseStructure, activeMapper] = useComponentExample();
-  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers[activeMapper]} />;
+  return (
+    <Fragment>
+      <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers[activeMapper]} />
+      {activeMapper === 'mui' && <CheckboxText />}
+    </Fragment>
+  );
 };
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/date-picker.js b/packages/react-renderer-demo/src/app/pages/component-example/date-picker.js
@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import ComponentText from '@docs/components/component-example-text';
 import useComponentExample from '../../src/hooks/use-component-example';
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
 import Pf4Datepicker from '@data-driven-forms/pf4-component-mapper/dist/cjs/date-picker';
 import MuiDatepicker from '@data-driven-forms/mui-component-mapper/dist/cjs/date-picker';
+import DatePickerText from '@docs/components/mui-definitions/date-picker-text.md';
 
 import dynamic from 'next/dynamic';
 
@@ -25,5 +26,10 @@ const mappers = {
 
 export default () => {
   const [component, baseStructure, activeMapper] = useComponentExample();
-  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers[activeMapper]} />;
+  return (
+    <Fragment>
+      <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers[activeMapper]} />
+      {activeMapper === 'mui' && <DatePickerText />}
+    </Fragment>
+  );
 };
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/radio.js b/packages/react-renderer-demo/src/app/pages/component-example/radio.js
@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import ComponentText from '@docs/components/component-example-text';
 import useComponentExample from '../../src/hooks/use-component-example';
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
 import Pf4Radio from '@data-driven-forms/pf4-component-mapper/dist/cjs/radio';
 import Pf3Radio from '@data-driven-forms/pf3-component-mapper/dist/cjs/radio';
 import MuiRadio from '@data-driven-forms/mui-component-mapper/dist/cjs/radio';
+import RadioText from '@docs/components/mui-definitions/radio-text.md';
 
 const mappers = {
   pf4: {
@@ -20,5 +21,10 @@ const mappers = {
 
 export default () => {
   const [component, baseStructure, activeMapper] = useComponentExample();
-  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers[activeMapper]} />;
+  return (
+    <Fragment>
+      <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers[activeMapper]} />
+      {activeMapper === 'mui' && <RadioText />}
+    </Fragment>
+  );
 };
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/switch.js b/packages/react-renderer-demo/src/app/pages/component-example/switch.js
@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import ComponentText from '@docs/components/component-example-text';
 import useComponentExample from '../../src/hooks/use-component-example';
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
 import Pf4Switch from '@data-driven-forms/pf4-component-mapper/dist/cjs/switch';
 import Pf3Switch from '@data-driven-forms/pf3-component-mapper/dist/cjs/switch';
 import MuiSwitch from '@data-driven-forms/mui-component-mapper/dist/cjs/switch';
+import SwitchText from '@docs/components/mui-definitions/switch-text.md';
 
 const mappers = {
   pf4: {
@@ -20,5 +21,10 @@ const mappers = {
 
 export default () => {
   const [component, baseStructure, activeMapper] = useComponentExample();
-  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers[activeMapper]} />;
+  return (
+    <Fragment>
+      <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers[activeMapper]} />
+      {activeMapper === 'mui' && <SwitchText />}
+    </Fragment>
+  );
 };
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/tabs.js b/packages/react-renderer-demo/src/app/pages/component-example/tabs.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import ComponentText from '@docs/components/component-example-text';
 import useComponentExample from '../../src/hooks/use-component-example';
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
@@ -8,6 +8,7 @@ import MuiTabs from '@data-driven-forms/mui-component-mapper/dist/cjs/tabs';
 import Pf4TextField from '@data-driven-forms/pf4-component-mapper/dist/cjs/text-field';
 import Pf3TextField from '@data-driven-forms/pf3-component-mapper/dist/cjs/text-field';
 import MuiTextField from '@data-driven-forms/mui-component-mapper/dist/cjs/text-field';
+import TabsText from '@docs/components/mui-definitions/tabs-text.md';
 
 const mappers = {
   pf4: {
@@ -26,5 +27,10 @@ const mappers = {
 
 export default () => {
   const [component, baseStructure, activeMapper] = useComponentExample();
-  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers[activeMapper]} />;
+  return (
+    <Fragment>
+      <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers[activeMapper]} />
+      {activeMapper === 'mui' && <TabsText />}
+    </Fragment>
+  );
 };
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/time-picker.js b/packages/react-renderer-demo/src/app/pages/component-example/time-picker.js
@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import ComponentText from '@docs/components/component-example-text';
 import useComponentExample from '../../src/hooks/use-component-example';
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
 import Pf4TimePicker from '@data-driven-forms/pf4-component-mapper/dist/cjs/time-picker';
 import MuiTimePicker from '@data-driven-forms/mui-component-mapper/dist/cjs/time-picker';
+import TimePickerText from '@docs/components/mui-definitions/time-picker-text.md';
 
 const mappers = {
   pf4: {
@@ -19,5 +20,10 @@ const mappers = {
 
 export default () => {
   const [component, baseStructure, activeMapper] = useComponentExample();
-  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers[activeMapper]} />;
+  return (
+    <Fragment>
+      <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers[activeMapper]} />
+      {activeMapper === 'mui' && <TimePickerText />}
+    </Fragment>
+  );
 };
diff --git a/packages/react-renderer-demo/src/app/pages/renderer/global-component-props.md b/packages/react-renderer-demo/src/app/pages/renderer/global-component-props.md
@@ -0,0 +1,17 @@
+import RawComponent from '@docs/raw-component';
+
+# Global component props
+
+If you need to set the same value to prop to every component occurance in a form, you can do so via [component mapper](/renderer/component-mapping).
+
+Always keep in mind, that the props depend on component mapper.
+
+## Adding global prop to 
+
+<RawComponent source="global-component-props/add-global-prop-to-component"/>
+
+## Props priority
+
+Props from **schema** have **higher** priority and will override the global props from mappers.
+
+<RawComponent source="global-component-props/props-priority"/>
diff --git a/packages/react-renderer-demo/src/app/src/components/mui-definitions/checkbox-text.md b/packages/react-renderer-demo/src/app/src/components/mui-definitions/checkbox-text.md
@@ -0,0 +1,14 @@
+import Common from './common.md';
+
+<Common />
+
+### Composite props
+|name|type|default|target component|
+|----|----|-------|----------------|
+|FormFieldGridProps|object|`{}`|[Grid](https://material-ui.com/api/grid/)|
+|FormControlProps|object|`{}`|[Form Control](https://material-ui.com/api/form-control/#formcontrol-api)|
+|FormGroupProps|object|`{}`|[Form Group](https://material-ui.com/api/form-group/#formgroup-api)|
+|FormControlLabelProps|object|`{}`|[Form Control Label](https://material-ui.com/api/form-control-label/#formcontrollabel-api)|
+|CheckboxProps|object|`{}`|[Checkbox](https://material-ui.com/api/checkbox/#checkbox-api)|
+|FormLabelProps|object|`{}`|[Form label](https://material-ui.com/api/form-label/#formlabel-api)|
+|FormHelperTextProps|object|`{}`|[Form helper text](https://material-ui.com/api/form-helper-text/#formhelpertext-api)|
diff --git a/packages/react-renderer-demo/src/app/src/components/mui-definitions/common.md b/packages/react-renderer-demo/src/app/src/components/mui-definitions/common.md
@@ -0,0 +1,5 @@
+### Component styling
+
+In order to fully leverage material UI styling, this component accepts a number of different props. These props are distributed to respective components.
+
+To avoid manually setting common styles and props to each field in schema, please use the [global components props](/renderer/global-component-props) in component mapper.
diff --git a/packages/react-renderer-demo/src/app/src/components/mui-definitions/date-picker-text.md b/packages/react-renderer-demo/src/app/src/components/mui-definitions/date-picker-text.md
@@ -0,0 +1,10 @@
+import Common from './common.md';
+
+<Common/>
+
+### Composite props
+|name|type|default|target component|
+|----|----|-------|----------------|
+|FormFieldGridProps|object|`{}`|[Grid](https://material-ui.com/api/grid/)|
+|MuiPickersUtilsProviderProps|object|`{}`|[Date picker](https://material-ui-pickers-v2.dmtr-kovalenko.now.sh/getting-started/usage)|,
+|DatePickerProps|object|`{}`|[Date picker](https://material-ui-pickers-v2.dmtr-kovalenko.now.sh/getting-started/usage)|
diff --git a/packages/react-renderer-demo/src/app/src/components/mui-definitions/radio-text.md b/packages/react-renderer-demo/src/app/src/components/mui-definitions/radio-text.md
@@ -0,0 +1,13 @@
+import Common from './common.md';
+
+<Common />
+
+### Composite props
+|name|type|default|target component|
+|----|----|-------|----------------|
+|FormFieldGridProps|object|`{}`|[Grid](https://material-ui.com/api/grid/)|
+|FormControlProps|object|`{}`|[Form Control](https://material-ui.com/api/form-control/#formcontrol-api)|
+|FormControlLabelProps|object|`{}`|[Form Control Label](https://material-ui.com/api/form-control-label/#formcontrollabel-api)|
+|RadioProps|object|`{}`|[Radio](https://material-ui.com/api/radio/#radio-api)|
+|FormLabelProps|object|`{}`|[Form label](https://material-ui.com/api/form-label/#formlabel-api)|
+|FormHelperTextProps|object|`{}`|[Form helper text](https://material-ui.com/api/form-helper-text/#formhelpertext-api)|
diff --git a/packages/react-renderer-demo/src/app/src/components/mui-definitions/switch-text.md b/packages/react-renderer-demo/src/app/src/components/mui-definitions/switch-text.md
@@ -0,0 +1,14 @@
+import Common from './common.md';
+
+<Common />
+
+### Composite props
+|name|type|default|target component|
+|----|----|-------|----------------|
+|FormFieldGridProps|object|`{}`|[Grid](https://material-ui.com/api/grid/)|
+|FormControlProps|object|`{}`|[Form Control](https://material-ui.com/api/form-control/#formcontrol-api)|
+|FormGroupProps|object|`{}`|[Form Group](https://material-ui.com/api/form-group/#formgroup-api)|
+|FormControlLabelProps|object|`{}`|[Form Control Label](https://material-ui.com/api/form-control-label/#formcontrollabel-api)|
+|SwitchProps|object|`{}`|[Switch](https://material-ui.com/api/switch/#switch-api)|
+|FormLabelProps|object|`{}`|[Form label](https://material-ui.com/api/form-label/#formlabel-api)|
+|FormHelperTextProps|object|`{}`|[Form helper text](https://material-ui.com/api/form-helper-text/#formhelpertext-api)|
diff --git a/packages/react-renderer-demo/src/app/src/components/mui-definitions/tabs-text.md b/packages/react-renderer-demo/src/app/src/components/mui-definitions/tabs-text.md
@@ -0,0 +1,10 @@
+import Common from './common.md';
+
+<Common />
+
+### Composite props
+|name|type|default|target component|
+|----|----|-------|----------------|
+|AppBarProps|object|`{}`|[App bar](https://material-ui.com/api/app-bar/#appbar-api)|
+|TabsProps|object|`{}`|[Tabs](https://material-ui.com/api/tabs/)|
+|TabProps|object|`{}`|[Tab](https://material-ui.com/api/tab/)|
diff --git a/packages/react-renderer-demo/src/app/src/components/mui-definitions/time-picker-text.md b/packages/react-renderer-demo/src/app/src/components/mui-definitions/time-picker-text.md
@@ -0,0 +1,9 @@
+import Common from './common.md';
+
+<Common/>
+
+### Composite props
+|name|type|default|target component|
+|----|----|-------|----------------|
+|FormFieldGridProps|object|`{}`|[Grid](https://material-ui.com/api/grid/)|
+|MuiPickersUtilsProviderProps|object|`{}`|[Date picker](https://material-ui-pickers-v2.dmtr-kovalenko.now.sh/getting-started/usage)|,
diff --git a/packages/react-renderer-demo/src/app/src/components/navigation/documentation-pages.js b/packages/react-renderer-demo/src/app/src/components/navigation/documentation-pages.js
@@ -15,6 +15,10 @@ export const docs = [
     component: 'component-mapping',
     linkText: 'Create component mapper'
   },
+  {
+    component: 'global-component-props',
+    linkText: 'Global component props'
+  },
   {
     component: 'renderer-api',
     linkText: 'FormRenderer API'
diff --git a/packages/react-renderer-demo/src/app/src/doc-components/global-component-props/add-global-prop-to-component.js b/packages/react-renderer-demo/src/app/src/doc-components/global-component-props/add-global-prop-to-component.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
+import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
+import Switch from '@data-driven-forms/mui-component-mapper/dist/cjs/switch';
+import TextField from '@data-driven-forms/mui-component-mapper/dist/cjs/text-field';
+import FormTemplate from '@data-driven-forms/mui-component-mapper/dist/cjs/form-template';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useInputClasses = makeStyles({
+  root: {
+    '& label': {
+      color: 'tomato'
+    }
+  }
+});
+
+const AddGlobalPropToComponent = () => {
+  const inputClasses = useInputClasses();
+  const componentMapper = {
+    [componentTypes.TEXT_FIELD]: {
+      component: TextField,
+      classes: inputClasses
+    },
+    [componentTypes.SWITCH]: {
+      component: Switch,
+      FormControlLabelProps: {
+        labelPlacement: 'bottom'
+      }
+    }
+  };
+
+  const schema = {
+    fields: [
+      {
+        component: componentTypes.TEXT_FIELD,
+        name: 'custom-text-field',
+        label: 'Custom label color',
+        helperText: 'nice'
+      },
+      {
+        component: componentTypes.SWITCH,
+        name: 'custom-switch-field',
+        label: 'Label is on the bottom of the switch'
+      }
+    ]
+  };
+  return <FormRenderer FormTemplate={FormTemplate} schema={schema} componentMapper={componentMapper} onSubmit={console.log} />;
+};
+
+export default AddGlobalPropToComponent;
diff --git a/packages/react-renderer-demo/src/app/src/doc-components/global-component-props/props-priority.js b/packages/react-renderer-demo/src/app/src/doc-components/global-component-props/props-priority.js
