Merge pull request #67 from aboutbits/revert_select_item

removed React.forwardRef from SelectItem Component
aboutbits · Sep 30, 2021 · 712a193 · 712a193
2 parents 6ece78e + b99a08f
commit 712a193
Showing 1 changed file with 101 additions and 126 deletions.
diff --git a/src/components/form/async/SelectItem.tsx b/src/components/form/async/SelectItem.tsx
@@ -1,47 +1,41 @@
-import React, { useMemo, useState } from 'react'
+import React, { ReactElement, useMemo, useState } from 'react'
 import { useField } from 'formik'
 import classnames from 'classnames'
 import IconKeyboardArrowDown from '@aboutbits/react-material-icons/dist/IconKeyboardArrowDown'
 import IconClose from '@aboutbits/react-material-icons/dist/IconClose'
-
-import { useInternationalization } from '../../../framework'
 import { useCustomInputCss } from '../useCustomInputCss'
+import { useInternationalization } from '../../../framework'
 import { InputLabel } from '../InputLabel'
 import { InputError } from '../InputError'
 import {
   SelectItemDialogWithSearch,
   Props as DialogProps,
 } from './SelectItemDialogWithSearch'
 
-type Props<ItemType extends ReferenceObject, Error> = React.DetailedHTMLProps<
-  React.ButtonHTMLAttributes<HTMLButtonElement>,
-  HTMLButtonElement
-> & {
+type Props<ItemType extends ReferenceObject, Error> = {
   id: string
   name: string
   label: string
   placeholder: string
   disabled?: boolean
   defaultValue: ItemType
 } & Pick<
-    DialogProps<ItemType, Error>,
-    | 'useGetData'
-    | 'dialogTitle'
-    | 'dialogLabel'
-    | 'noSearchResults'
-    | 'renderListItem'
-    | 'renderErrorMessage'
-    | 'paginationConfig'
-  >
+  DialogProps<ItemType, Error>,
+  | 'useGetData'
+  | 'dialogTitle'
+  | 'dialogLabel'
+  | 'noSearchResults'
+  | 'renderListItem'
+  | 'renderErrorMessage'
+  | 'paginationConfig'
+>
 
 export type ReferenceObject = {
   id: string | number
   name: string
   label?: string
 }
 
-type ItemType = ReferenceObject
-
 /**
  * Converts tailwindcss classes from placeholder to text.
  *
@@ -70,120 +64,101 @@ export const replacePlaceholderColorWithTextColor = (css: string): string => {
   )
 }
 
-export const SelectItem = React.forwardRef<
-  HTMLButtonElement,
-  Props<ItemType, Error>
->(
-  (
-    {
-      disabled = false,
-      id,
-      name,
-      label,
-      placeholder,
-      defaultValue,
-      useGetData,
-      dialogTitle,
-      dialogLabel,
-      noSearchResults,
-      renderListItem,
-      renderErrorMessage,
-      paginationConfig,
-    },
-    ref
-  ) => {
-    const [field, , helpers] = useField<ItemType>(name)
-    const [, , helpersId] = useField<ItemType>(name + '.id')
-    const [showDialog, setShowDialog] = useState<boolean>(false)
-    const customCss = useCustomInputCss(`${field.name}.id`, disabled)
-    const internationalization = useInternationalization()
-    const customCssInputCss = useMemo(
-      () => replacePlaceholderColorWithTextColor(customCss.inputCss),
-      [customCss.inputCss]
-    )
+export function SelectItem<ItemType extends ReferenceObject, Error>({
+  disabled = false,
+  id,
+  name,
+  label,
+  placeholder,
+  defaultValue,
+  useGetData,
+  dialogTitle,
+  dialogLabel,
+  noSearchResults,
+  renderListItem,
+  renderErrorMessage,
+  paginationConfig,
+}: Props<ItemType, Error>): ReactElement {
+  const [field, , helpers] = useField<ItemType>(name)
+  const [, , helpersId] = useField<ItemType>(name + '.id')
+  const [showDialog, setShowDialog] = useState<boolean>(false)
+  const customCss = useCustomInputCss(`${field.name}.id`, disabled)
+  const internationalization = useInternationalization()
+  const customCssInputCss = useMemo(
+    () => replacePlaceholderColorWithTextColor(customCss.inputCss),
+    [customCss.inputCss]
+  )
 
-    return (
-      <>
-        <div>
-          <InputLabel
-            inputId={id}
-            label={label}
-            className={customCss.labelCss}
-          />
-          {field.value.id === '' || field.value.id === 0 ? (
+  return (
+    <>
+      <div>
+        <InputLabel inputId={id} label={label} className={customCss.labelCss} />
+        {field.value.id === '' || field.value.id === 0 ? (
+          <button
+            type="button"
+            id={id}
+            onClick={() => {
+              setShowDialog(true)
+            }}
+            className={classnames(customCssInputCss, 'flex flex-row text-left')}
+          >
+            <span className="flex-1">{placeholder}</span>
+            <IconKeyboardArrowDown className="w-6 h-6" />
+          </button>
+        ) : (
+          <div
+            className={classnames(
+              customCss.inputCss,
+              'flex flex-row text-left'
+            )}
+          >
             <button
               type="button"
               id={id}
+              onClick={() => setShowDialog(true)}
+              className="flex-1 text-left"
+            >
+              <span>{field.value.name}</span>
+            </button>
+            <button
+              type="button"
               onClick={() => {
-                setShowDialog(true)
+                helpers.setTouched(true)
+                helpersId.setTouched(true)
+                helpers.setValue(defaultValue)
               }}
-              className={classnames(
-                customCssInputCss,
-                'flex flex-row text-left'
-              )}
-              {...ref}
+              className="pl-2"
             >
-              <span className="flex-1">{placeholder}</span>
-              <IconKeyboardArrowDown className="w-6 h-6" />
+              <IconClose
+                className="w-6 h-6"
+                title={internationalization.translate('shared.select.clear')}
+              />
             </button>
-          ) : (
-            <div
-              className={classnames(
-                customCss.inputCss,
-                'flex flex-row text-left'
-              )}
-            >
-              <button
-                type="button"
-                id={id}
-                onClick={() => setShowDialog(true)}
-                className="flex-1 text-left"
-                {...ref}
-              >
-                <span>{field.value.name}</span>
-              </button>
-              <button
-                type="button"
-                onClick={() => {
-                  helpers.setTouched(true)
-                  helpersId.setTouched(true)
-                  helpers.setValue(defaultValue)
-                }}
-                className="pl-2"
-              >
-                <IconClose
-                  className="w-6 h-6"
-                  title={internationalization.translate('shared.select.clear')}
-                />
-              </button>
-            </div>
-          )}
-          <InputError name={field.name + '.id'} className="mt-1" />
-        </div>
-        {showDialog && (
-          <SelectItemDialogWithSearch
-            onDismiss={() => {
-              helpersId.setTouched(true)
-              setShowDialog(false)
-            }}
-            isOpen={showDialog}
-            onConfirm={(item: ItemType) => {
-              helpersId.setTouched(true)
-              helpers.setValue(item)
-              setShowDialog(false)
-            }}
-            useGetData={useGetData}
-            renderListItem={renderListItem}
-            renderErrorMessage={renderErrorMessage}
-            dialogTitle={dialogTitle}
-            dialogLabel={dialogLabel}
-            noSearchResults={noSearchResults}
-            paginationConfig={paginationConfig}
-          />
+          </div>
         )}
-      </>
-    )
-  }
-)
-
-SelectItem.displayName = 'SelectItem'
+        <InputError name={field.name + '.id'} className="mt-1" />
+      </div>
+      {showDialog && (
+        <SelectItemDialogWithSearch
+          onDismiss={() => {
+            helpersId.setTouched(true)
+            setShowDialog(false)
+          }}
+          isOpen={showDialog}
+          onConfirm={(item: ItemType) => {
+            helpersId.setTouched(true)
+            helpers.setValue(item)
+            setShowDialog(false)
+          }}
+          useGetData={useGetData}
+          renderListItem={renderListItem}
+          renderErrorMessage={renderErrorMessage}
+          dialogTitle={dialogTitle}
+          dialogLabel={dialogLabel}
+          noSearchResults={noSearchResults}
+          paginationConfig={paginationConfig}
+        />
+      )}
+    </>
+  )
+}