wip

packages/webapp/src/components/Select/DisplayNameList.tsx

@@ -1,50 +1,68 @@
-// @ts-nocheck
-import React from 'react';
+import React, { useMemo } from 'react';
 import intl from 'react-intl-universal';
-import { ListSelect } from './ListSelect';
+import { FSelect } from '../Forms';
+import { useFormikContext } from 'formik';
 
-export function DisplayNameList({
-  salutation,
-  firstName,
-  lastName,
-  company,
-  ...restProps
-}) {
-  const formats = [
-    {
-      format: '{1} {2} {3}',
-      values: [salutation, firstName, lastName],
-      required: [1],
+export type DisplayNameListItem = { label: string };
+
+export interface DisplayNameListProps
+  extends Omit<
+    React.ComponentProps<typeof FSelect>,
+    'items' | 'valueAccessor' | 'textAccessor' | 'labelAccessor'
+  > {}
+
+export function DisplayNameList({ ...restProps }: DisplayNameListProps) {
+  const {
+    values: {
+      first_name: firstName,
+      last_name: lastName,
+      company_name: companyName,
+      salutation,
     },
-    { format: '{1} {2}', values: [firstName, lastName], required: [] },
-    { format: '{1}, {2}', values: [firstName, lastName], required: [1, 2] },
-    { format: '{1}', values: [company], required: [1] },
-  ];
+  } = useFormikContext<any>();
 
-  const formatOptions = formats
-    .filter(
-      (format) =>
-        !format.values.some((value, index) => {
-          return !value && format.required.indexOf(index + 1) !== -1;
+  const formats = useMemo(
+    () => [
+      {
+        format: '{1} {2} {3}',
+        values: [salutation, firstName, lastName],
+        required: [1],
+      },
+      { format: '{1} {2}', values: [firstName, lastName], required: [] },
+      { format: '{1}, {2}', values: [firstName, lastName], required: [1, 2] },
+      { format: '{1}', values: [companyName], required: [1] },
+    ],
+    [firstName, lastName, companyName, salutation],
+  );
+
+  const formatOptions: DisplayNameListItem[] = useMemo(
+    () =>
+      formats
+        .filter(
+          (format) =>
+            !format.values.some((value, index) => {
+              return !value && format.required.indexOf(index + 1) !== -1;
+            }),
+        )
+        .map((formatOption) => {
+          const { format, values } = formatOption;
+          let label = format;
+
+          values.forEach((value, index) => {
+            const replaceWith = value || '';
+            label = label.replace(`{${index + 1}}`, replaceWith).trim();
+          });
+          return { label: label.replace(/\s+/g, ' ') };
         }),
-    )
-    .map((formatOption) => {
-      const { format, values } = formatOption;
-      let label = format;
-
-      values.forEach((value, index) => {
-        const replaceWith = value || '';
-        label = label.replace(`{${index + 1}}`, replaceWith).trim();
-      });
-      return { label: label.replace(/\s+/g, ' ') };
-    });
+    [formats],
+  );
 
   return (
-    <ListSelect
+    <FSelect
       items={formatOptions}
-      selectedItemProp={'label'}
-      textProp={'label'}
-      defaultText={intl.get('select_display_name_as')}
+      valueAccessor={'label'}
+      textAccessor={'label'}
+      placeholder={intl.get('select_display_name_as')}
       filterable={false}
       {...restProps}
     />

packages/webapp/src/components/Select/SalutationList.tsx

@@ -1,10 +1,16 @@
-// @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
+import { FSelect } from '../Forms';
 
-import { ListSelect } from './ListSelect';
+export type SalutationItem = { key: string; label: string };
 
-export function SalutationList({ ...restProps }) {
+export interface SalutationListProps
+  extends Omit<
+    React.ComponentProps<typeof FSelect>,
+    'items' | 'valueAccessor' | 'textAccessor' | 'labelAccessor'
+  > {}
+
+export function SalutationList({ ...restProps }: SalutationListProps) {
   const saluations = [
     intl.get('mr'),
     intl.get('mrs'),
@@ -12,17 +18,17 @@ export function SalutationList({ ...restProps }) {
     intl.get('miss'),
     intl.get('dr'),
   ];
-  const items = saluations.map((saluation) => ({
+  const items: SalutationItem[] = saluations.map((saluation) => ({
     key: saluation,
     label: saluation,
   }));
 
   return (
-    <ListSelect
+    <FSelect
       items={items}
-      selectedItemProp={'key'}
-      textProp={'label'}
-      defaultText={intl.get('salutation')}
+      valueAccessor={'key'}
+      textAccessor={'label'}
+      placeholder={intl.get('salutation')}
       filterable={false}
       {...restProps}
     />