Add autoMapSelectValues flag and automatic matching.

Author: masiulis

README.md

@@ -203,6 +203,8 @@ Common date-time formats can be viewed [here](https://docs.sheetjs.com/docs/csf/
   maxFileSize?: number
   // Automatically map imported headers to specified fields if possible. Default: true
   autoMapHeaders?: boolean
+  // When field type is "select", automatically match values if possible. Default: true
+  autoMapSelectValues?: boolean
   // Headers matching accuracy: 1 for strict and up for more flexible matching. Default: 2
   autoMapDistance?: number
 ```

src/ReactSpreadsheetImport.tsx

@@ -11,6 +11,7 @@ export const defaultTheme = themeOverrides
 
 export const defaultRSIProps: Partial<RsiProps<any>> = {
   autoMapHeaders: true,
+  autoMapSelectValues: false,
   allowInvalidSubmit: true,
   autoMapDistance: 2,
   translations: translations,

src/steps/MatchColumnsStep/MatchColumnsStep.tsx

@@ -65,7 +65,7 @@ export type Columns<T extends string> = Column<T>[]
 export const MatchColumnsStep = <T extends string>({ data, headerValues, onContinue }: MatchColumnsProps<T>) => {
   const toast = useToast()
   const dataExample = data.slice(0, 2)
-  const { fields, autoMapHeaders, autoMapDistance, translations } = useRsi<T>()
+  const { fields, autoMapHeaders, autoMapSelectValues, autoMapDistance, translations } = useRsi<T>()
   const [isLoading, setIsLoading] = useState(false)
   const [columns, setColumns] = useState<Columns<T>>(
     // Do not remove spread, it indexes empty array elements, otherwise map() skips over them
@@ -81,7 +81,7 @@ export const MatchColumnsStep = <T extends string>({ data, headerValues, onConti
         columns.map<Column<T>>((column, index) => {
           columnIndex === index ? setColumn(column, field, data) : column
           if (columnIndex === index) {
-            return setColumn(column, field, data)
+            return setColumn(column, field, data, autoMapSelectValues)
           } else if (index === existingFieldIndex) {
             toast({
               status: "warning",
@@ -153,7 +153,7 @@ export const MatchColumnsStep = <T extends string>({ data, headerValues, onConti
 
   useEffect(() => {
     if (autoMapHeaders) {
-      setColumns(getMatchedColumns(columns, fields, data, autoMapDistance))
+      setColumns(getMatchedColumns(columns, fields, data, autoMapDistance, autoMapSelectValues))
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])

src/steps/MatchColumnsStep/components/TemplateColumn.tsx

@@ -22,7 +22,7 @@ import type { Styles } from "./ColumnGrid"
 const getAccordionTitle = <T extends string>(fields: Fields<T>, column: Column<T>, translations: Translations) => {
   const fieldLabel = fields.find((field) => "value" in column && field.key === column.value)!.label
   return `${translations.matchColumnsStep.matchDropdownTitle} ${fieldLabel} (${
-    "matchedOptions" in column && column.matchedOptions.length
+    "matchedOptions" in column && column.matchedOptions.filter((option) => !option.value).length
   } ${translations.matchColumnsStep.unmatched})`
 }
 

src/steps/MatchColumnsStep/utils/getMatchedColumns.ts

@@ -10,6 +10,7 @@ export const getMatchedColumns = <T extends string>(
   fields: Fields<T>,
   data: MatchColumnsProps<T>["data"],
   autoMapDistance: number,
+  autoMapSelectValues?: boolean,
 ) =>
   columns.reduce<Column<T>[]>((arr, column) => {
     const autoMatch = findMatch(column.header, fields, autoMapDistance)
@@ -21,18 +22,18 @@ export const getMatchedColumns = <T extends string>(
         return lavenstein(duplicate.value, duplicate.header) < lavenstein(autoMatch, column.header)
           ? [
               ...arr.slice(0, duplicateIndex),
-              setColumn(arr[duplicateIndex], field, data),
+              setColumn(arr[duplicateIndex], field, data, autoMapSelectValues),
               ...arr.slice(duplicateIndex + 1),
               setColumn(column),
             ]
           : [
               ...arr.slice(0, duplicateIndex),
               setColumn(arr[duplicateIndex]),
               ...arr.slice(duplicateIndex + 1),
-              setColumn(column, field, data),
+              setColumn(column, field, data, autoMapSelectValues),
             ]
       } else {
-        return [...arr, setColumn(column, field, data)]
+        return [...arr, setColumn(column, field, data, autoMapSelectValues)]
       }
     } else {
       return [...arr, column]

src/steps/MatchColumnsStep/utils/setColumn.ts

@@ -1,26 +1,30 @@
 import type { Field } from "../../../types"
-import { Column, ColumnType, MatchColumnsProps } from "../MatchColumnsStep"
+import { Column, ColumnType, MatchColumnsProps, MatchedOptions } from "../MatchColumnsStep"
 import { uniqueEntries } from "./uniqueEntries"
 
 export const setColumn = <T extends string>(
   oldColumn: Column<T>,
   field?: Field<T>,
   data?: MatchColumnsProps<T>["data"],
+  autoMapSelectValues?: boolean,
 ): Column<T> => {
   switch (field?.fieldType.type) {
     case "select":
-      const uniqueData = uniqueEntries(data || [], oldColumn.index)
-      const matchedOptions = uniqueData?.map(option => {
-        const value = field.fieldType.options.find(o => o.value == option.value || o.label == option.entry)?.value
-        return value ? {...option, value} as MatchedOptions<T>  : option as MatchedOptions<T>
-      })
-      const allMatched = matchedOptions.filter(o => o.value).length == uniqueData?.length
+      const options = field.fieldType.options
+      const uniqueData = uniqueEntries(data || [], oldColumn.index) as MatchedOptions<T>[]
+      const matchedOptions = autoMapSelectValues
+        ? uniqueData.map((option) => {
+            const value = options.find((o) => o.value == option.value || o.label == option.entry)?.value
+            return value ? ({ ...option, value } as MatchedOptions<T>) : (option as MatchedOptions<T>)
+          })
+        : uniqueData
+      const allMatched = matchedOptions.filter((o) => o.value).length == uniqueData?.length
 
       return {
         ...oldColumn,
         type: allMatched ? ColumnType.matchedSelectOptions : ColumnType.matchedSelect,
         value: field.key,
-        matchedOptions
+        matchedOptions,
       }
     case "checkbox":
       return { index: oldColumn.index, type: ColumnType.matchedCheckbox, value: field.key, header: oldColumn.header }

src/types.ts

@@ -35,6 +35,8 @@ export type RsiProps<T extends string> = {
   maxFileSize?: number
   // Automatically map imported headers to specified fields if possible. Default: true
   autoMapHeaders?: boolean
+  // When field type is "select", automatically match values if possible. Default: false
+  autoMapSelectValues?: boolean
   // Headers matching accuracy: 1 for strict and up for more flexible matching
   autoMapDistance?: number
   // Initial Step state to be rendered on load