From 509a0b874aed72c57d85c2878412ced6f2b64faa Mon Sep 17 00:00:00 2001 From: Lamberto Fichera Date: Tue, 21 Nov 2023 09:51:08 +0000 Subject: [PATCH] Support init fields assignments --- src/components/Importer.tsx | 16 +++++++++++----- src/components/ImporterProps.ts | 8 +++++++- src/components/fields-step/FieldsStep.tsx | 4 ++++ 3 files changed, 22 insertions(+), 6 deletions(-) diff --git a/src/components/Importer.tsx b/src/components/Importer.tsx index d21e576..135c832 100644 --- a/src/components/Importer.tsx +++ b/src/components/Importer.tsx @@ -31,25 +31,31 @@ export function Importer( onClose, children: content, locale: userLocale, + fieldAssignments, ...customPapaParseConfig } = props; - // helper to combine our displayed content and the user code that provides field definitions + const initialFieldsState = useMemo( + () => (fieldAssignments ? { fieldAssignments } : null), + [fieldAssignments] + ); const [fields, userFieldContentWrapper] = useFieldDefinitions(); const [fileState, setFileState] = useState(null); const [fileAccepted, setFileAccepted] = useState(false); - const [fieldsState, setFieldsState] = useState(null); + const [fieldsState, setFieldsState] = useState( + initialFieldsState + ); const [fieldsAccepted, setFieldsAccepted] = useState(false); // reset field assignments when file changes const activeFile = fileState && fileState.file; useEffect(() => { if (activeFile) { - setFieldsState(null); + setFieldsState(initialFieldsState); } - }, [activeFile]); + }, [activeFile, initialFieldsState]); const externalPreview = useMemo(() => { // generate stable externally-visible data objects @@ -142,7 +148,7 @@ export function Importer( // reset all state setFileState(null); setFileAccepted(false); - setFieldsState(null); + setFieldsState(initialFieldsState); setFieldsAccepted(false); } : undefined diff --git a/src/components/ImporterProps.ts b/src/components/ImporterProps.ts index 457233d..d05f6d3 100644 --- a/src/components/ImporterProps.ts +++ b/src/components/ImporterProps.ts @@ -1,6 +1,11 @@ import React from 'react'; import { ImporterLocale } from '../locale'; -import { CustomizablePapaParseConfig, ParseCallback, BaseRow } from '../parser'; +import { + CustomizablePapaParseConfig, + ParseCallback, + BaseRow, + FieldAssignmentMap +} from '../parser'; // information for displaying a spreadsheet-style column export interface ImporterPreviewColumn { @@ -66,4 +71,5 @@ export type ImporterProps = ImporterDataHandlerProps< onClose?: (info: ImportInfo) => void; children?: ImporterContentRenderProp | React.ReactNode; locale?: ImporterLocale; + fieldAssignments?: FieldAssignmentMap; } & CustomizablePapaParseConfig; diff --git a/src/components/fields-step/FieldsStep.tsx b/src/components/fields-step/FieldsStep.tsx index 955a592..f46e392 100644 --- a/src/components/fields-step/FieldsStep.tsx +++ b/src/components/fields-step/FieldsStep.tsx @@ -62,6 +62,10 @@ export const FieldsStep: React.FC<{ // make sure there are no extra fields useEffect(() => { + if (fields.length === 0) { + // Defer removal logic until fields have loaded from children components + return; + } const removedFieldNames = Object.keys(fieldAssignments).filter( (existingFieldName) => !fields.some((field) => field.name === existingFieldName)