tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: only renders arrays and blocks once they are initialized

Browse Source
This commit is contained in:
James
2022-07-15 17:26:05 -07:00
parent c995f797fe
commit 735e385537
4 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/admin/components/forms/field-types/Array/Array.tsx
View File

@@ -59,7 +59,7 @@ const ArrayFieldType: React.FC<Props> = (props) => {
const { preferencesKey, preferences } = useDocumentInfo();
const { setPreference } = usePreferences();
const [rows, dispatchRows] = useReducer(reducer, []);
const [rows, dispatchRows] = useReducer(reducer, undefined);
const formContext = useForm();
const { user } = useAuth();
const { id } = useDocumentInfo();
@@ -191,7 +191,7 @@ const ArrayFieldType: React.FC<Props> = (props) => {
}
}, [rows, setValue]);
const hasMaxRows = maxRows && rows.length >= maxRows;
const hasMaxRows = maxRows && rows?.length >= maxRows;
const classes = [
'field-type',
@@ -199,6 +199,8 @@ const ArrayFieldType: React.FC<Props> = (props) => {
className,
].filter(Boolean).join(' ');
if (!rows) return null;
return (
<DragDropContext onDragEnd={onDragEnd}>
<div

6
src/admin/components/forms/field-types/Blocks/Blocks.tsx
View File

@@ -61,7 +61,7 @@ const Blocks: React.FC<Props> = (props) => {
const { preferencesKey, preferences } = useDocumentInfo();
const { setPreference } = usePreferences();
const [rows, dispatchRows] = useReducer(reducer, []);
const [rows, dispatchRows] = useReducer(reducer, undefined);
const formContext = useForm();
const { user } = useAuth();
const { id } = useDocumentInfo();
@@ -201,7 +201,7 @@ const Blocks: React.FC<Props> = (props) => {
}
}, [rows, setValue]);
const hasMaxRows = maxRows && rows.length >= maxRows;
const hasMaxRows = maxRows && rows?.length >= maxRows;
const classes = [
'field-type',
@@ -209,6 +209,8 @@ const Blocks: React.FC<Props> = (props) => {
className,
].filter(Boolean).join(' ');
if (!rows) return null;
return (
<DragDropContext onDragEnd={onDragEnd}>
<div

2
src/admin/components/forms/field-types/rowReducer.tsx
View File

@@ -44,7 +44,7 @@ type MOVE = {
type Action = SET_ALL | SET_COLLAPSE | SET_ALL_COLLAPSED | ADD | REMOVE | MOVE;
const reducer = (currentState: Row[], action: Action): Row[] => {
const stateCopy = [...currentState];
const stateCopy = [...currentState || []];
switch (action.type) {
case 'SET_ALL': {

3
test/fields/collections/Tabs/index.ts
View File

@@ -9,6 +9,7 @@ const TabsFields: CollectionConfig = {
tabs: [
{
label: 'Tab One',
description: 'Here is a description for tab one',
fields: [
{
name: 'array',
@@ -26,6 +27,7 @@ const TabsFields: CollectionConfig = {
},
{
label: 'Tab Two',
description: 'Description for tab two',
fields: [
{
name: 'text',
@@ -36,6 +38,7 @@ const TabsFields: CollectionConfig = {
},
{
label: 'Tab Three',
description: 'Description for tab three',
fields: [
{
name: 'number',