ENH Convert LiteralField to functional component with legacy support

client/src/bundles/bundle.js

@@ -54,6 +54,7 @@ import 'expose-loader?exposes=LegacyInputField!legacy/ReactComponents/LegacyInpu
 import 'expose-loader?exposes=LegacyTextField!legacy/ReactComponents/LegacyTextField';
 import 'expose-loader?exposes=LegacyDateField!legacy/ReactComponents/LegacyDateField';
 import 'expose-loader?exposes=LegacyDatetimeField!legacy/ReactComponents/LegacyDatetimeField';
+import 'expose-loader?exposes=LegacyLiteralField!legacy/ReactComponents/LegacyLiteralField';
 import 'expose-loader?exposes=Toolbar!components/Toolbar/Toolbar';
 import 'expose-loader?exposes=Breadcrumb!components/Breadcrumb/Breadcrumb';
 import 'expose-loader?exposes=ResizeAware!components/ResizeAware/ResizeAware';

client/src/components/LiteralField/LiteralField.js

@@ -1,41 +1,41 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
-class LiteralField extends Component {
+const LiteralField = ({
+  className = '',
+  extraClass = '',
+  id,
+  name,
+  value,
+}) => {
   /**
    * Sets the content into a dangerouslySetInnerHTML object
    *
    * @returns {object} innerHtml
    */
-  getContent() {
-    return { __html: this.props.value };
-  }
+  const getContent = () => ({ __html: value });
 
   /**
    * Fetches the properties for the text field
    *
    * @returns {object} properties
    */
-  getInputProps() {
-    return {
-      // The extraClass property is defined on both the holder and element
-      // for legacy reasons (same behaviour as PHP rendering)
-      className: `${this.props.className} ${this.props.extraClass}`,
-      id: this.props.id,
-      name: this.props.name,
-    };
-  }
+  const getInputProps = () => ({
+    // The extraClass property is defined on both the holder and element
+    // for legacy reasons (same behaviour as PHP rendering)
+    className: `${className} ${extraClass}`,
+    id,
+    name,
+  });
 
-  render() {
-    return (
-      <div
-        {...this.getInputProps()}
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={this.getContent()}
-      />
-    );
-  }
-}
+  return (
+    <div
+      {...getInputProps()}
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={getContent()}
+    />
+  );
+};
 
 LiteralField.propTypes = {
   id: PropTypes.string,
@@ -44,10 +44,4 @@ LiteralField.propTypes = {
   value: PropTypes.string,
 };
 
-LiteralField.defaultProps = {
-  // React considers "undefined" as an uncontrolled component.
-  extraClass: '',
-  className: '',
-};
-
 export default LiteralField;

client/src/components/LiteralField/tests/LiteralField-test.js

@@ -20,3 +20,37 @@ test('LiteralField render() renders', () => {
   expect(h2.innerHTML).toBe('My literal heading');
   expect(p.innerHTML).toBe('My literal content');
 });
+
+test('LiteralField renders with minimal props', () => {
+  const { container } = render(
+    <LiteralField {...{
+      name: 'MinimalField',
+      value: '',
+    }}
+    />
+  );
+  const div = container.querySelector('div');
+  expect(div).not.toBeNull();
+  expect(div.getAttribute('name')).toBe('MinimalField');
+  expect(div.getAttribute('id')).toBeNull();
+  expect(div.className.trim()).toBe('');
+  expect(div.innerHTML).toBe('');
+});
+
+test('LiteralField applies id and class names', () => {
+  const { container } = render(
+    <LiteralField {...{
+      id: 'field-id',
+      name: 'FieldName',
+      className: 'field-class',
+      extraClass: 'extra-class',
+      value: 'Content',
+    }}
+    />
+  );
+  const div = container.querySelector('div');
+  expect(div.getAttribute('id')).toBe('field-id');
+  expect(div.getAttribute('name')).toBe('FieldName');
+  expect(div.className).toBe('field-class extra-class');
+  expect(div.innerHTML).toBe('Content');
+});

client/src/legacy/ReactComponents/LegacyLiteralField.js

@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class LegacyLiteralField extends Component {
+  /**
+   * Sets the content into a dangerouslySetInnerHTML object
+   *
+   * @returns {object} innerHtml
+   */
+  getContent() {
+    return { __html: this.props.value };
+  }
+
+  /**
+   * Fetches the properties for the text field
+   *
+   * @returns {object} properties
+   */
+  getInputProps() {
+    return {
+      // The extraClass property is defined on both the holder and element
+      // for legacy reasons (same behaviour as PHP rendering)
+      className: `${this.props.className} ${this.props.extraClass}`,
+      id: this.props.id,
+      name: this.props.name,
+    };
+  }
+
+  render() {
+    return (
+      <div
+        {...this.getInputProps()}
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={this.getContent()}
+      />
+    );
+  }
+}
+
+LegacyLiteralField.propTypes = {
+  id: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  extraClass: PropTypes.string,
+  value: PropTypes.string,
+};
+
+LegacyLiteralField.defaultProps = {
+  // React considers "undefined" as an uncontrolled component.
+  extraClass: '',
+  className: '',
+};
+
+export default LegacyLiteralField;