@tellescope/react-components 1.232.0 → 1.233.0

package/src/Forms/inputs.v2.tsx

@@ -1754,310 +1754,20 @@ export const DropdownInput = ({ field, value, onChange }: FormInputProps<'Dropdo
   )
 }
 
-const choicesForDatabase: {
-  [index: string]: {
-    done: boolean,
-    records: DatabaseRecord[],
-    lastId?: string,
-  } | {
-    done: undefined,
-    records: undefined,
-    lastId?: string,
-  }
-} = {}
-const preventRefetch: Record<string, boolean> = {}
-
-const LOAD_CHOICES_LIMIT = 500
-const useDatabaseChoices = ({ databaseId='', field, otherAnswers } : { databaseId?: string, field: FormField, otherAnswers?: DatabaseSelectResponse[] }) => {
-  const session = useResolvedSession()
-  const [renderCount, setRenderCount] = useState(0)
-
-  // todo: make searchable, don't load all
-  useEffect(() => {
-    if (choicesForDatabase[databaseId]?.done) return
-    if (renderCount > 100) return // limit to 50000 entries / prevent infinite looping
-    const choices = choicesForDatabase[databaseId]?.records ?? []
-    const lastId = choicesForDatabase[databaseId]?.lastId
-
-    if (preventRefetch[databaseId + field.id + lastId]) return
-    preventRefetch[databaseId + field.id + lastId] = true
-
-    session.api.form_fields.load_choices_from_database({
-      fieldId: field.id,
-      lastId,
-      limit: LOAD_CHOICES_LIMIT,
-      databaseId, // overrides fieldId, supports using Database question in Table Input
-    })
-    .then(({ choices: newChoices }) => {
-      choicesForDatabase[databaseId] = {
-        lastId: newChoices?.[newChoices.length - 1]?.id,
-        records: [...choices, ...newChoices]
-          .sort((c1, c2) => (
-            label_for_database_record(field, c1)
-            .localeCompare(label_for_database_record(field, c2))
-          )
-        ),
-        done: newChoices.length < LOAD_CHOICES_LIMIT, 
-      } 
-      setRenderCount(r => r + 1)
-    })
-    .catch(err => {
-      console.error(err)
-      preventRefetch[databaseId + field.id + lastId] = false
-    })
-  }, [session, field, databaseId, renderCount])
-
-  const addChoice = useCallback((record: DatabaseRecord) => {
-    if (!choicesForDatabase[databaseId]) {
-      choicesForDatabase[databaseId] = { 
-        done: false,
-        records: [],
-      }
-    }
-    choicesForDatabase[databaseId].records!.push(record)
-  }, [choicesForDatabase, databaseId])
-
-  return {
-    addChoice,
-    doneLoading: choicesForDatabase[databaseId]?.done ?? false,
-    choices: [
-      ...choicesForDatabase[databaseId]?.records ?? [],
-      ...(otherAnswers || []).map(v => ({
-        id: v.text,
-        databaseId,
-        values: [{ label: field.options?.databaseLabel || '', type: 'Text', value: v.text }],
-      }) as Pick<DatabaseRecord, 'id' | 'values' | 'databaseId'>)
-    ],
-    renderCount,
-  }
-}
-
-
-const label_for_database_record = (field: FormField, record?: Pick<DatabaseRecord, 'values'>) => {
-  if (!record) return ''
-
-  const addedLabels = (
-    (field.options?.databaseLabels || [])
-    .map(l => record.values.find(v => v.label === l)?.value?.toString())
-    .filter(v => v?.trim())
-  ) as string[]
-
-  return (
-    (record.values.find(v => v.label === field.options?.databaseLabel)?.value?.toString() ?? '')
-    + (
-      addedLabels.length
-        ? ` (${addedLabels.join(', ')})`
-        : ''
-    ) 
-  )
-}
+// DatabaseSelectInput logic is shared with inputs.tsx to avoid duplication
+// Import the interface and component from the shared implementation
+import { AddToDatabaseProps as AddToDatabasePropsImported, DatabaseSelectInput as SharedDatabaseSelectInput } from './inputs'
 
-const get_other_answers = (_value?: DatabaseSelectResponse[], typing?: string) => {
-  try { 
-    const existing = (
-      (_value || [])
-      .filter(v => typeof v === 'string' || v.recordId === v.text)
-      .map(v => typeof v === 'string' ? { databaseId: '', recordId: v, text: v } : v)
-    )
-    if (typing) {
-      existing.push({ text: typing, databaseId: '', recordId: typing })
-    }
-
-    return existing
-  } catch(err) { console.error(err) }
-
-  return []
-}
-
-export interface AddToDatabaseProps {
-  databaseId: string,
-  onAdd: (record: DatabaseRecord) => void
-}
+// Re-export the interface for external use
+export type AddToDatabaseProps = AddToDatabasePropsImported
 
-export const DatabaseSelectInput = ({ AddToDatabase, field, value: _value, onChange, onDatabaseSelect, responses, size, disabled, enduser }: FormInputProps<'Database Select'> & {
+// Wrap the shared DatabaseSelectInput component with v2-specific props
+export const DatabaseSelectInput = (props: FormInputProps<'Database Select'> & {
   responses: FormResponseValue[],
   AddToDatabase?: React.JSXElementConstructor<AddToDatabaseProps>,
 }) => {
-  const [typing, setTyping] = useState('')
-  const { addChoice, choices, doneLoading } = useDatabaseChoices({ 
-    databaseId: field.options?.databaseId,
-    field,
-    otherAnswers: get_other_answers(_value, field?.options?.other ? typing : undefined),
-  })
-
-  const value = React.useMemo(() => {
-    try {
-      // if the value is a string (some single answer that was save), make sure we coerce to array
-      const __value = typeof _value === 'string' ? [_value] : _value
-      return (
-        (__value?.map(v => 
-          choices.find(c => 
-            c.id === v.recordId || (typeof v === 'string' && label_for_database_record(field, c) === v)
-          )
-        )?.filter(v => v!) ?? []) as DatabaseRecord[]
-      )
-    } catch(err) {
-      console.error('Error resolving database answers for _value', err)
-      return []
-    }
-  }, [_value, choices, field])
-
-  const filterResponse = useMemo(() => (
-    field.options?.databaseFilter?.fieldId
-      ? responses.find(r => r.fieldId === field.options?.databaseFilter?.fieldId)?.answer?.value
-      : undefined
-  ), [responses, field.options?.databaseFilter])
-
-  // State filtering logic similar to Insurance component
-  const addressQuestion = useMemo(() => responses?.find(r => {
-    if (r.answer.type !== 'Address') return false
-    if (r.field.intakeField !== 'Address') return false
-
-    // make sure state is actually defined (in case of multiple address questions, where 1+ are blank)
-    if (!r.answer.value?.state) return false
-
-    return true
-  }), [responses])
-
-  const state = useMemo(() => (
-    field.options?.filterByEnduserState
-      ? ((addressQuestion?.answer?.type === 'Address' ? addressQuestion?.answer?.value?.state : undefined) || enduser?.state)
-      : undefined
-  ), [enduser?.state, addressQuestion, field.options?.filterByEnduserState])
-
-  const filteredChoicesWithPotentialDuplicates = useMemo(() => {
-    if (!choices) return []
-    if (!filterResponse) return choices
-    if (!field?.options?.databaseFilter?.databaseLabel)
-    if (!value || value.length === 0) return choices
-
-    return (
-      choices
-      .filter(c => {
-        const v = c.values.find(_v => _v.label === field.options?.databaseFilter?.databaseLabel)?.value
-        if (!v) return true
-
-        // use .text on r values to handle Database Select types as filter source (in addition to basic text and list of text)
-
-        if (typeof v === 'object') {
-          return !!(
-            Object.values(v).find(oVal => (
-              typeof oVal === 'string' || typeof oVal === 'number'
-                ? (
-                  Array.isArray(filterResponse)
-                    ? (filterResponse as any[]).find(r => r === oVal.toString() || (typeof r === 'object' && r.text === oVal))
-                : (typeof filterResponse === 'string' || typeof filterResponse === 'number')
-                    ? filterResponse.toString() === oVal.toString()
-                    : false
-                )
-                : false
-            ))
-          )
-        }
-
-        if (typeof v === 'string' || typeof v === 'number') {
-          return !!(
-            Array.isArray(filterResponse)
-              ? (filterResponse as any[]).find(r => r === v.toString() || (typeof r === 'object' && r.text === v))
-          : (typeof filterResponse === 'string' || typeof filterResponse === 'number')
-              ? filterResponse.toString() === v.toString()
-          : (typeof filterResponse === 'object' && (filterResponse as Address).city === v.toString()) ? true
-          : (typeof filterResponse === 'object' && (filterResponse as Address).state === v.toString()) ? true
-          : (typeof filterResponse === 'object' && (filterResponse as Address).zipCode === v.toString()) ? true
-              : false
-          )
-        }
-
-        return false
-      })
-    )
-  }, [choices, filterResponse, field.options?.databaseFilter, value])
-
-  // Apply state filtering as a secondary filter (doesn't modify existing logic)
-  const stateFilteredChoices = useMemo(() => {
-    if (!field.options?.filterByEnduserState || !state) {
-      return filteredChoicesWithPotentialDuplicates
-    }
-
-    return filteredChoicesWithPotentialDuplicates.filter(c => {
-      const recordState = c.values.find(v => v.label?.trim()?.toLowerCase() === 'state')?.value?.toString() || ''
-      return !recordState || recordState === state
-    })
-  }, [filteredChoicesWithPotentialDuplicates, field.options?.filterByEnduserState, state])
-
-  const filteredChoices = useMemo(() => {
-    const filtered = []
-
-    const uniques = new Set<string>([])
-    for (const c of stateFilteredChoices) {
-      const text = label_for_database_record(field, c)
-      if (uniques.has(text)) continue // duplicate found
-
-      uniques.add(text)
-      filtered.push(c)
-    }
-
-    return filtered
-  }, [field, stateFilteredChoices])
-
-  if (!doneLoading) return <LinearProgress />
-  return (
-    <>
-    <Autocomplete id={field.id} freeSolo={false} size={size}
-      componentsProps={{ popper: { sx: { wordBreak: "break-word" } } } }
-      options={filteredChoices} multiple={true}
-      getOptionLabel={o => (
-        Array.isArray(o) // edge case
-          ? ''
-          : label_for_database_record(field, o)
-      )}
-      value={value}
-      disabled={disabled}
-      onChange={(_, v) => {
-        if (v.length && onDatabaseSelect) {
-          onDatabaseSelect(
-            field.options?.radio
-              ? [v[v.length - 1]] // if radio, only last selected
-              : v
-          )
-        }
-        return onChange(
-          (
-            !field.options?.radio
-              ? v.map(_v => ({
-                  databaseId: field.options?.databaseId!,
-                  recordId: _v.id,
-                  text: label_for_database_record(field, _v),
-                }))
-              : [{
-                databaseId: field.options?.databaseId!,
-                recordId: v[v.length -1]?.id ?? '',
-                text: label_for_database_record(field, v[v.length - 1]),
-              }]
-          ),
-          field.id,
-        )
-      }}
-      inputValue={typing}
-      onInputChange={(e, v) => e && setTyping(v)}
-      renderInput={params => <TextField {...params} InputProps={{ ...params.InputProps, sx: defaultInputProps.sx }} />}
-      // use custom Chip to ensure very long entries break properly (whitespace: normal)
-      renderTags={(value, getTagProps) =>
-        value.map((value, index) => (
-          <Chip
-            label={<Typography style={{whiteSpace: 'normal'}}>{Array.isArray(value) ? '' : label_for_database_record(field, value)}</Typography>}
-            {...getTagProps({ index })}
-            sx={{height:"100%", py: 0.5 }}
-          />
-        ))
-      }
-    />
-
-    {AddToDatabase && field?.options?.allowAddToDatabase && (
-      <AddToDatabase databaseId={field.options?.databaseId!} onAdd={addChoice} />
-    )}
-    </>
-  )
+  // Pass all props plus v2-specific defaultInputProps to the shared component
+  return <SharedDatabaseSelectInput {...props} inputProps={defaultInputProps} />
 }
 
 type DisplayTermsResult = { displayTermsList: { term: string[] } }