refactor: Display List as ul, li; Register data_provenance widget by …

…id - refs #256379

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-widget-dataprovenance",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "description": "@eeacms/volto-widget-dataprovenance: Volto Data Provenance add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

src/components/index.js

@@ -1,2 +1,2 @@
 export { DataProvenance } from '@eeacms/volto-widget-dataprovenance/components/theme/Widgets/DataProvenance';
-export DataProvenanceWidgetView from '@eeacms/volto-widget-dataprovenance/components/theme/Widgets/DataProvenanceView';
+export { default as DataProvenanceWidgetView } from '@eeacms/volto-widget-dataprovenance/components/theme/Widgets/DataProvenanceView';

src/components/theme/Widgets/DataProvenance.jsx

@@ -6,7 +6,7 @@ import {
   DragDropList,
 } from '@plone/volto/components';
 import { ObjectWidget } from '@plone/volto/components';
-
+import { default as DataProvenanceWidgetView } from './DataProvenanceView';
 import deleteSVG from '@plone/volto/icons/delete.svg';
 import addSVG from '@plone/volto/icons/add.svg';
 import dragSVG from '@plone/volto/icons/drag.svg';
@@ -15,10 +15,17 @@ import Schema from './schema';
 import './style.css';
 
 export const DataProvenance = (props) => {
-  const { id, value = [], onChange, defaultData = {} } = props;
+  const { id, value = {}, defaultData = {}, onChange } = props;
+  const { readOnly = false, data = [] } = value;
   const predefinedSchema = Schema(props);
-  const flatListValue = value?.data || [];
-  return (
+  const flatListValue = data || [];
+  return readOnly ? (
+    <>
+      <FormFieldWrapper {...props} className="objectlist-inline-widget">
+        <DataProvenanceWidgetView value={value} />
+      </FormFieldWrapper>
+    </>
+  ) : (
     <>
       <FormFieldWrapper {...props} className="objectlist-inline-widget">
         <div>

src/components/theme/Widgets/DataProvenanceView.jsx

@@ -5,22 +5,21 @@ import { UniversalLink } from '@plone/volto/components';
 
 const DataProvenanceWidgetView = ({ value, className }) =>
   value?.data ? (
-    <List className={cx(className, 'widget')} bulleted={true}>
+    <List className={cx(className, 'widget')} bulleted={true} as="ul">
       {value.data.map((item, index) => (
-        <List.Item className="horizontal" key={index}>
-          <List.Content>
+        <List.Item className="horizontal" key={index} as="li">
+          <div>
             {item.link ? (
               <UniversalLink href={item.link}>{item.title}</UniversalLink>
             ) : (
               item.title
             )}
             {item.organisation ? `, ${item.organisation}` : null}
-          </List.Content>
+          </div>
         </List.Item>
       ))}
     </List>
   ) : (
     ''
   );
-
 export default DataProvenanceWidgetView;

src/index.js

@@ -4,9 +4,11 @@ import {
 } from '@eeacms/volto-widget-dataprovenance/components';
 
 const applyConfig = (config) => {
+  config.widgets.id.data_provenance = DataProvenance;
   config.widgets.widget.data_provenance = DataProvenance;
 
   if (config.widgets.views?.widget) {
+    config.widgets.views.id.data_provenance = DataProvenanceWidgetView;
     config.widgets.views.widget.data_provenance = DataProvenanceWidgetView;
   }