Refactor: Pass data via value argument and use children to wrap value

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-widgets-view",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Volto Widgets in View mode",
   "main": "src/index.js",
   "scripts": {

src/components/theme/Widgets/ArrayWidget.jsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import cx from 'classnames';
 
-export const ArrayWidget = ({ children, className }) => (
-  <span className={cx(className, 'array', 'widget')}>
-    {children
-      ? children.map((child) => (
-          <span key={child.token || child.title || child}>
-            {child.title || child.token || child}
-          </span>
-        ))
-      : ''}
-  </span>
-);
+export const ArrayWidget = ({ value, children, className }) =>
+  value ? (
+    <span className={cx(className, 'array', 'widget')}>
+      {value.map((item) => (
+        <span key={item.token || item.title || item}>
+          {children
+            ? children(item.title || item.token || item)
+            : item.title || item.token || item}
+        </span>
+      ))}
+    </span>
+  ) : (
+    ''
+  );

src/components/theme/Widgets/ArrayWidget.test.js

@@ -11,29 +11,47 @@ describe('ArrayWidget', () => {
 
   it('renders a simple array view widget component', () => {
     const component = renderer.create(
-      <ArrayWidget className="metadata">{['foo', 'bar']}</ArrayWidget>,
+      <ArrayWidget className="metadata" value={['foo', 'bar']} />,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
 
   it('renders a vocabulary array view widget component', () => {
     const component = renderer.create(
-      <ArrayWidget className="metadata">
-        {[{ title: 'Foo' }, { title: 'Bar' }]}
-      </ArrayWidget>,
+      <ArrayWidget
+        className="metadata"
+        value={[{ title: 'Foo' }, { title: 'Bar' }]}
+      />,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
 
   it('renders a full vocabulary array view widget component', () => {
     const component = renderer.create(
-      <ArrayWidget className="metadata">
-        {[
+      <ArrayWidget
+        className="metadata"
+        value={[
+          { title: 'Foo', token: 'foo' },
+          { title: 'Bar', token: 'bar' },
+        ]}
+      />,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a full vocabulary array view widget component with children', () => {
+    const component = renderer.create(
+      <ArrayWidget
+        className="metadata"
+        value={[
           { title: 'Foo', token: 'foo' },
           { title: 'Bar', token: 'bar' },
         ]}
+      >
+        {(child) => <strong>{child}</strong>}
       </ArrayWidget>,
     );
     const json = component.toJSON();

src/components/theme/Widgets/BooleanWidget.jsx

@@ -1,8 +1,12 @@
 import React from 'react';
 import cx from 'classnames';
+import { isBoolean } from 'lodash';
 
-export const BooleanWidget = ({ children, className }) => (
-  <span className={cx(className, 'boolean', 'widget')}>
-    {children ? 'Yes' : 'No'}
-  </span>
-);
+export const BooleanWidget = ({ value, children, className }) =>
+  isBoolean(value) ? (
+    <span className={cx(className, 'boolean', 'widget')}>
+      {children ? children(value ? 'Yes' : 'No') : value ? 'Yes' : 'No'}
+    </span>
+  ) : (
+    ''
+  );

src/components/theme/Widgets/BooleanWidget.test.js

@@ -3,23 +3,43 @@ import renderer from 'react-test-renderer';
 import { BooleanWidget } from './BooleanWidget';
 
 describe('BooleanWidget', () => {
-  it('renders an empty boolean true view widget component', () => {
+  it('renders an empty boolean view widget component', () => {
     const component = renderer.create(<BooleanWidget />);
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
 
   it('renders a boolean true view widget component', () => {
     const component = renderer.create(
-      <BooleanWidget className="metadata">{true}</BooleanWidget>,
+      <BooleanWidget className="metadata" value={true} />,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
 
   it('renders a boolean false view widget component', () => {
     const component = renderer.create(
-      <BooleanWidget className="metadata">{false}</BooleanWidget>,
+      <BooleanWidget className="metadata" value={false} />,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a boolean true view widget component with children', () => {
+    const component = renderer.create(
+      <BooleanWidget className="metadata" value={true}>
+        {(child) => <strong>{child}</strong>}
+      </BooleanWidget>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a boolean false view widget component with children', () => {
+    const component = renderer.create(
+      <BooleanWidget className="metadata" value={false}>
+        {(child) => <strong>{child}</strong>}
+      </BooleanWidget>,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();

src/components/theme/Widgets/DateWidget.jsx

@@ -2,13 +2,13 @@ import React from 'react';
 import cx from 'classnames';
 import moment from 'moment';
 
-// import 'moment/locale/en-gb';
-// import { useIntl } from 'react-intl';
-
-export const DateWidget = ({ children, className }) => (
-  // const intl = useIntl();
-  // moment.locale(intl.locale);
-  <span className={cx(className, 'date', 'widget')}>
-    {children ? moment(children).format('ll') : ''}
-  </span>
-);
+export const DateWidget = ({ value, children, className }) =>
+  value ? (
+    <span className={cx(className, 'date', 'widget')}>
+      {children
+        ? children(moment(value).format('ll'))
+        : moment(value).format('ll')}
+    </span>
+  ) : (
+    ''
+  );

src/components/theme/Widgets/DateWidget.test.js

@@ -11,7 +11,17 @@ describe('DateWidget', () => {
 
   it('renders a date view widget component', () => {
     const component = renderer.create(
-      <DateWidget className="metadata">2020-08-18</DateWidget>,
+      <DateWidget className="metadata" value="2020-08-18" />,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a date view widget component with children', () => {
+    const component = renderer.create(
+      <DateWidget className="metadata" value="2020-08-18">
+        {(child) => <strong>{child}</strong>}
+      </DateWidget>,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();

src/components/theme/Widgets/DatetimeWidget.jsx

@@ -2,13 +2,13 @@ import React from 'react';
 import cx from 'classnames';
 import moment from 'moment';
 
-// import 'moment/locale/en-gb';
-// import { useIntl } from 'react-intl';
-
-export const DatetimeWidget = ({ children, className }) => (
-  // const intl = useIntl();
-  // moment.locale(intl.locale);
-  <span className={cx(className, 'datetime', 'widget')}>
-    {children ? moment(children).format('lll') : ''}
-  </span>
-);
+export const DatetimeWidget = ({ value, children, className }) =>
+  value ? (
+    <span className={cx(className, 'datetime', 'widget')}>
+      {children
+        ? children(moment(value).format('lll'))
+        : moment(value).format('lll')}
+    </span>
+  ) : (
+    ''
+  );

src/components/theme/Widgets/DatetimeWidget.test.js

@@ -11,7 +11,17 @@ describe('DatetimeWidget', () => {
 
   it('renders a date view widget component', () => {
     const component = renderer.create(
-      <DatetimeWidget className="metadata">2020-08-04T09:00:00</DatetimeWidget>,
+      <DatetimeWidget className="metadata" value="2020-08-04T09:00:00" />,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a date view widget component with children', () => {
+    const component = renderer.create(
+      <DatetimeWidget className="metadata" value="2020-08-04T09:00:00">
+        {(child) => <strong>{child}</strong>}
+      </DatetimeWidget>,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();

src/components/theme/Widgets/EmailWidget.jsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import cx from 'classnames';
 
-export const EmailWidget = ({ children, className }) =>
-  children ? (
+export const EmailWidget = ({ value, children, className }) =>
+  value ? (
     <a
-      href={'mailto:' + children}
+      href={'mailto:' + value}
       className={cx(className, 'email', 'widget')}
       rel="noreferrer"
       target="_blank"
     >
-      {children}
+      {children ? children(value) : value}
     </a>
   ) : (
     ''

src/components/theme/Widgets/EmailWidget.test.js

@@ -11,7 +11,17 @@ describe('EmailWidget', () => {
 
   it('renders an email view widget component', () => {
     const component = renderer.create(
-      <EmailWidget className="metadata">foo@bar.com</EmailWidget>,
+      <EmailWidget className="metadata" value="foo@bar.com" />,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders an email view widget component with children', () => {
+    const component = renderer.create(
+      <EmailWidget className="metadata" value="foo@bar.com">
+        {(child) => <strong>{child}</strong>}
+      </EmailWidget>,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();

src/components/theme/Widgets/PasswordWidget.jsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import cx from 'classnames';
 
-export const PasswordWidget = ({ children, className }) => (
-  <span className={cx(className, 'password', 'widget')}>
-    {children ? '********' : ''}
-  </span>
-);
+export const PasswordWidget = ({ value, children, className }) =>
+  value ? (
+    <span className={cx(className, 'password', 'widget')}>
+      {children ? children('********') : '********'}
+    </span>
+  ) : (
+    ''
+  );

src/components/theme/Widgets/PasswordWidget.test.js

@@ -11,8 +11,16 @@ describe('PasswordWidget', () => {
 
   it('renders a password view widget component', () => {
     const component = renderer.create(
-      <PasswordWidget className="metadata">
-        A very strong password
+      <PasswordWidget className="metadata" value="A very strong password" />,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a password view widget component with children', () => {
+    const component = renderer.create(
+      <PasswordWidget className="metadata" value="A very strong password">
+        {(child) => <strong>{child}</strong>}
       </PasswordWidget>,
     );
     const json = component.toJSON();

src/components/theme/Widgets/RichTextWidget.jsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import cx from 'classnames';
 
-export const RichTextWidget = ({ children, className }) =>
-  children ? (
+export const RichTextWidget = ({ value, className }) =>
+  value ? (
     <p
       className={cx(className, 'richtext', 'widget')}
-      dangerouslySetInnerHTML={{ __html: children.data }}
+      dangerouslySetInnerHTML={{
+        __html: value.data,
+      }}
     />
   ) : (
     ''

src/components/theme/Widgets/RichTextWidget.test.js

@@ -8,10 +8,22 @@ describe('RichTextWidget', () => {
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
+
   it('renders a rich text view widget component', () => {
     const component = renderer.create(
-      <RichTextWidget className="metadata">
-        {{ data: '<b>Foo bar</b>' }}
+      <RichTextWidget
+        className="metadata"
+        value={{ data: '<b>Foo bar</b>' }}
+      />,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a rich text view widget component with children', () => {
+    const component = renderer.create(
+      <RichTextWidget className="metadata" value={{ data: '<b>Foo bar</b>' }}>
+        {(child) => <strong>{child}</strong>}
       </RichTextWidget>,
     );
     const json = component.toJSON();

src/components/theme/Widgets/SelectWidget.jsx

@@ -1,8 +1,13 @@
 import React from 'react';
 import cx from 'classnames';
 
-export const SelectWidget = ({ children, className }) => (
-  <span className={cx(className, 'select', 'widget')}>
-    {children?.title || children?.token || children}
-  </span>
-);
+export const SelectWidget = ({ value, children, className }) =>
+  value ? (
+    <span className={cx(className, 'select', 'widget')}>
+      {children
+        ? children(value?.title || value?.token || value)
+        : value?.title || value?.token || value}
+    </span>
+  ) : (
+    ''
+  );