Merge pull request #144 from data-driven-forms/plain-text-component

Plain text component

Author: rvsia

packages/mui-component-mapper/package.json

@@ -17,7 +17,7 @@
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/preset-env": "^7.1.6",
     "@babel/preset-react": "^7.0.0",
-    "@data-driven-forms/react-form-renderer": "^1.9.3",
+    "@data-driven-forms/react-form-renderer": "*",
     "@material-ui/core": "^4.2.1",
     "@material-ui/icons": "^4.2.1",
     "@material-ui/styles": "^4.2.1",

packages/mui-component-mapper/src/form-fields/component-mapper.js

@@ -1,6 +1,16 @@
 import React from 'react';
 import { componentTypes } from '@data-driven-forms/react-form-renderer';
-import { TextField, TextareaField, SelectField, CheckboxGroup, Radio, SwitchField, DatePickerField, TimePickerField } from './form-fields';
+import {
+  TextField,
+  TextareaField,
+  SelectField,
+  CheckboxGroup,
+  Radio,
+  SwitchField,
+  DatePickerField,
+  TimePickerField,
+  PlainTextField,
+} from './form-fields';
 import SubForm from './sub-form';
 import Tabs from './tabs';
 
@@ -16,6 +26,7 @@ const mapper = {
   [componentTypes.TIME_PICKER]: TimePickerField,
   [componentTypes.TAG_CONTROL]: props => <div>tag control</div>,
   [componentTypes.SWITCH]: SwitchField,
+  [componentTypes.PLAIN_TEXT]: PlainTextField,
 };
 
 export default mapper;

packages/mui-component-mapper/src/form-fields/form-fields.js

@@ -20,6 +20,7 @@ import MomentUtils from '@date-io/moment';
 import RadioGroup from './radio';
 
 import './form-fields.scss';
+import PlainText from './plain-text';
 const selectValue = option => option.sort((a, b) => a.label.localeCompare(b.label, 'en', { sensitivity: 'base' })).map(item => item.value);
 
 const selectComponent = ({
@@ -250,3 +251,4 @@ export const SwitchField = ({ FieldProvider, ...props }) =>
   <FieldProvider { ...props } render={ props => <FieldInterface { ...props } name={ props.input.name } componentType={ componentTypes.SWITCH } /> }/>;
 export const DatePickerField = props => <FieldInterface { ...props } name={ props.input.name } componentType={ componentTypes.DATE_PICKER } />;
 export const TimePickerField = props => <FieldInterface { ...props } name={ props.input.name } componentType={ componentTypes.TIME_PICKER } />;
+export const PlainTextField = ({ label, name }) => <PlainText name={ name } label={ label }/>;

packages/mui-component-mapper/src/form-fields/plain-text.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import PropTypes from 'prop-types';
+
+const PlainText = ({ label, name }) => label.split('\n').map((paragraph, index) =>
+  <Typography key={ `${index}-${name}` } gutterBottom variant="body1">{ paragraph }</Typography>
+);
+
+PlainText.propTypes = {
+  label: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+};
+
+export default PlainText;

packages/pf3-component-mapper/src/form-fields/component-mapper.js

@@ -1,6 +1,15 @@
 import React from 'react';
 import { componentTypes } from '@data-driven-forms/react-form-renderer';
-import { TextField, TextareaField, SelectField, CheckboxGroup, Radio, SwitchField, DatePickerField } from './form-fields';
+import {
+  TextField,
+  TextareaField,
+  SelectField,
+  CheckboxGroup,
+  Radio,
+  SwitchField,
+  DatePickerField,
+  PlainTextField,
+} from './form-fields';
 import SubForm from './sub-form';
 import Tabs from './tabs';
 import Wizard from './wizzard/wizzard';
@@ -19,6 +28,7 @@ const mapper = {
   [componentTypes.TAG_CONTROL]: props => <div>tag control</div>,
   [componentTypes.SWITCH]: SwitchField,
   [componentTypes.WIZARD]: Wizard,
+  [componentTypes.PLAIN_TEXT]: PlainTextField,
 };
 
 export default mapper;
@@ -34,6 +44,7 @@ export const components = {
   DatePickerField,
   SwitchField,
   Wizard,
+  PlainTextField,
 };
 
 export const rawComponents = {

packages/pf3-component-mapper/src/form-fields/form-fields.js

@@ -9,6 +9,7 @@ import Switch from './switch-field';
 import { DateTimePicker } from './date-time-picker/date-time-picker';
 import Select from './select';
 import RagioGroup from './radio';
+import PlainText from './plain-text';
 
 const selectComponent = ({
   componentType,
@@ -169,3 +170,4 @@ export const SwitchField = ({ FieldProvider, ...props }) =>
   <FieldProvider { ...props } render={ props => <FieldInterface { ...props } name={ props.input.name } componentType={ componentTypes.SWITCH } /> }/>;
 export const DatePickerField = props =>
   <FieldInterface { ...props } name={ props.input.name } variant={ props.variant } componentType={ componentTypes.DATE_PICKER } />;
+export const PlainTextField = ({ input, label }) =>  <PlainText { ...input } label={ label } />;

packages/pf3-component-mapper/src/form-fields/plain-text.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const PlainText = ({ label, name }) => label.split('\n').map((paragraph, index) => <p key={ `${name}-${index}` }>{ paragraph }</p>);
+
+PlainText.propTypes = {
+  label: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+};
+
+export default PlainText;

packages/pf4-component-mapper/src/form-fields/component-mapper.js

@@ -11,6 +11,7 @@ import {
   DatePickerField,
   TimePickerField,
   SwitchField,
+  PlainTextField,
 } from './form-fields';
 import Wizard from './wizard/wizard';
 import { Select } from './select/select';
@@ -28,6 +29,7 @@ const mapper = {
   [componentTypes.TAG_CONTROL]: props => <div>Unsupported tag control</div>,
   [componentTypes.WIZARD]: Wizard,
   [componentTypes.SWITCH]: SwitchField,
+  [componentTypes.PLAIN_TEXT]: PlainTextField,
 };
 
 export default mapper;
@@ -41,6 +43,7 @@ export const components = {
   DatePickerField,
   TimePickerField,
   SwitchField,
+  PlainTextField,
 };
 
 export const rawComponents = {

packages/pf4-component-mapper/src/form-fields/form-fields.js

@@ -14,6 +14,7 @@ import {
 import { componentTypes } from '@data-driven-forms/react-form-renderer';
 import Select from './select/select';
 import RadioGroup from './radio';
+import PlainText from './plain-text';
 
 const selectComponent = ({
   componentType,
@@ -177,3 +178,4 @@ export const SwitchField = ({ FieldProvider, ...props }) =>
     { ...props }
     render={ props => <FieldInterface { ...props } hideLabel={ true } name={ props.input.name } componentType={ componentTypes.SWITCH } /> }
   />;
+export const PlainTextField = ({ label, name }) => <PlainText label={ label } name={ name } />;

packages/pf4-component-mapper/src/form-fields/plain-text.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Text, TextContent, TextVariants } from '@patternfly/react-core';
+
+const PlainText = ({ label, name }) => (
+  <TextContent>
+    { label.split('\n').map((paragraph, index) => <Text component={ TextVariants.p } key={ `${name}-${index}` }>{ paragraph }</Text>) }
+  </TextContent>
+);
+
+PlainText.propTypes = {
+  label: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+};
+
+export default PlainText;