diff --git a/src/client/components/views/collections/List/Cell/index.js b/src/client/components/views/collections/List/Cell/index.js
index a0601a9e59..068f4b81f3 100644
--- a/src/client/components/views/collections/List/Cell/index.js
+++ b/src/client/components/views/collections/List/Cell/index.js
@@ -1,11 +1,9 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
-import format from 'date-fns/format';
import { useConfig } from '../../../../providers/Config';
import RenderCustomComponent from '../../../../utilities/RenderCustomComponent';
-import Thumbnail from '../../../../elements/Thumbnail';
-import Relationship from './Relationship';
+import cellComponents from './types';
const DefaultCell = (props) => {
const {
@@ -13,17 +11,10 @@ const DefaultCell = (props) => {
colIndex,
collection: {
slug,
- upload: {
- staticURL,
- adminThumbnail,
- } = {},
},
cellData,
rowData: {
id,
- filename,
- mimeType,
- sizes,
} = {},
} = props;
@@ -38,49 +29,24 @@ const DefaultCell = (props) => {
wrapElementProps.to = `${admin}/collections/${slug}/${id}`;
}
- if (field.type === 'thumbnail') {
- return (
-
-
-
- );
- }
+ const CellComponent = cellComponents[field.type];
- if (field.type === 'relationship') {
+ if (!CellComponent) {
return (
-
-
- );
- }
-
- if (field.type === 'date' && cellData) {
- return (
-
-
- {format(new Date(cellData), 'MMMM do yyyy, h:mma')}
-
+ {typeof cellData === 'string' && cellData}
+ {typeof cellData === 'number' && cellData}
+ {typeof cellData === 'object' && JSON.stringify(cellData)}
);
}
return (
- {field.type !== 'date' && (
-
- {typeof cellData === 'string' && cellData}
- {typeof cellData === 'number' && cellData}
- {typeof cellData === 'object' && JSON.stringify(cellData)}
-
- )}
+
);
};
diff --git a/src/client/components/views/collections/List/Cell/types/Blocks/index.js b/src/client/components/views/collections/List/Cell/types/Blocks/index.js
new file mode 100644
index 0000000000..ae997d8d79
--- /dev/null
+++ b/src/client/components/views/collections/List/Cell/types/Blocks/index.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const BlocksCell = ({ data, field }) => {
+ const selectedBlocks = data ? data.map(({ blockType }) => blockType) : [];
+
+ let label = `0 ${field.label}.`;
+
+ if (selectedBlocks.length > 0) {
+ label = `${selectedBlocks.length} ${field.label}`;
+ }
+
+ return (
+ {label}
+ );
+};
+
+BlocksCell.defaultProps = {
+ data: [],
+};
+
+BlocksCell.propTypes = {
+ data: PropTypes.arrayOf(
+ PropTypes.shape({}),
+ ),
+ field: PropTypes.shape({
+ singularLabel: PropTypes.string,
+ label: PropTypes.string,
+ }).isRequired,
+};
+
+export default BlocksCell;
diff --git a/src/client/components/views/collections/List/Cell/types/Date/index.js b/src/client/components/views/collections/List/Cell/types/Date/index.js
new file mode 100644
index 0000000000..b0626d7d9c
--- /dev/null
+++ b/src/client/components/views/collections/List/Cell/types/Date/index.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import format from 'date-fns/format';
+
+const DateCell = ({ data }) => (
+
+ {format(new Date(data), 'MMMM do yyyy, h:mma')}
+
+);
+
+DateCell.propTypes = {
+ data: PropTypes.string.isRequired,
+};
+
+export default DateCell;
diff --git a/src/client/components/views/collections/List/Cell/Relationship/index.js b/src/client/components/views/collections/List/Cell/types/Relationship/index.js
similarity index 89%
rename from src/client/components/views/collections/List/Cell/Relationship/index.js
rename to src/client/components/views/collections/List/Cell/types/Relationship/index.js
index 3458325aac..28e7d47462 100644
--- a/src/client/components/views/collections/List/Cell/Relationship/index.js
+++ b/src/client/components/views/collections/List/Cell/types/Relationship/index.js
@@ -1,9 +1,9 @@
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
-import { useConfig } from '../../../../../providers/Config';
+import { useConfig } from '../../../../../../providers/Config';
const RelationshipCell = (props) => {
- const { field, cellData } = props;
+ const { field, data: cellData } = props;
const { relationTo } = field;
const { collections } = useConfig();
const [data, setData] = useState();
@@ -39,7 +39,7 @@ const RelationshipCell = (props) => {
}
}
}
- }, [cellData, relationTo, field]);
+ }, [cellData, relationTo, field, collections]);
return (
@@ -49,11 +49,11 @@ const RelationshipCell = (props) => {
};
RelationshipCell.defaultProps = {
- cellData: undefined,
+ data: undefined,
};
RelationshipCell.propTypes = {
- cellData: PropTypes.oneOfType([
+ data: PropTypes.oneOfType([
PropTypes.shape({}),
PropTypes.array,
PropTypes.string,
diff --git a/src/client/components/views/collections/List/Cell/types/index.js b/src/client/components/views/collections/List/Cell/types/index.js
new file mode 100644
index 0000000000..15307d8c2b
--- /dev/null
+++ b/src/client/components/views/collections/List/Cell/types/index.js
@@ -0,0 +1,9 @@
+import relationship from './Relationship';
+import date from './Date';
+import blocks from './Blocks';
+
+export default {
+ relationship,
+ date,
+ blocks,
+};