Fix search modal

Author: DaneEveritt

resources/scripts/components/dashboard/search/SearchContainer.tsx

@@ -19,7 +19,7 @@ export default () => {
         <>
             {visible &&
             <SearchModal
-                appear={true}
+                appear
                 visible={visible}
                 onDismissed={() => setVisible(false)}
             />

resources/scripts/components/dashboard/search/SearchModal.tsx

@@ -13,6 +13,7 @@ import { httpErrorToHuman } from '@/api/http';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components/macro';
 import tw from 'twin.macro';
+import Input from '@/components/elements/Input';
 
 type Props = RequiredModalProps;
 
@@ -94,11 +95,7 @@ export default ({ ...props }: Props) => {
                     >
                         <SearchWatcher/>
                         <InputSpinner visible={loading}>
-                            <Field
-                                innerRef={ref}
-                                name={'term'}
-                                className={'input-dark'}
-                            />
+                            <Field as={Input} innerRef={ref} name={'term'}/>
                         </InputSpinner>
                     </FormikFieldWrapper>
                 </Form>

resources/scripts/components/elements/Field.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { Field as FormikField, FieldProps } from 'formik';
 import Input from '@/components/elements/Input';
 import Label from '@/components/elements/Label';
@@ -13,8 +13,8 @@ interface OwnProps {
 
 type Props = OwnProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'name'>;
 
-const Field = ({ id, name, light = false, label, description, validate, className, ...props }: Props) => (
-    <FormikField name={name} validate={validate}>
+const Field = forwardRef<HTMLInputElement, Props>(({ id, name, light = false, label, description, validate, className, ...props }, ref) => (
+    <FormikField innerRef={ref} name={name} validate={validate}>
         {
             ({ field, form: { errors, touched } }: FieldProps) => (
                 <React.Fragment>
@@ -39,6 +39,7 @@ const Field = ({ id, name, light = false, label, description, validate, classNam
             )
         }
     </FormikField>
-);
+));
+Field.displayName = 'Field';
 
 export default Field;

resources/scripts/components/elements/FormikFieldWrapper.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { Field, FieldProps } from 'formik';
 import classNames from 'classnames';
 import InputError from '@/components/elements/InputError';
+import Label from '@/components/elements/Label';
+import tw from 'twin.macro';
 
 interface Props {
     id?: string;
@@ -18,10 +20,10 @@ const FormikFieldWrapper = ({ id, name, label, className, description, validate,
         {
             ({ field, form: { errors, touched } }: FieldProps) => (
                 <div className={classNames(className, { 'has-error': touched[field.name] && errors[field.name] })}>
-                    {label && <label htmlFor={id} className={'input-dark-label'}>{label}</label>}
+                    {label && <Label htmlFor={id}>{label}</Label>}
                     {children}
                     <InputError errors={errors} touched={touched} name={field.name}>
-                        {description ? <p className={'input-help'}>{description}</p> : null}
+                        {description || null}
                     </InputError>
                 </div>
             )

resources/scripts/components/elements/InputError.tsx

@@ -1,27 +1,28 @@
 import React from 'react';
 import capitalize from 'lodash-es/capitalize';
 import { FormikErrors, FormikTouched } from 'formik';
+import tw from 'twin.macro';
 
 interface Props {
     errors: FormikErrors<any>;
     touched: FormikTouched<any>;
     name: string;
-    children?: React.ReactNode;
+    children?: string | number | null | undefined;
 }
 
 const InputError = ({ errors, touched, name, children }: Props) => (
     touched[name] && errors[name] ?
-        <p className={'input-help error'}>
+        <p css={tw`text-xs text-red-400 pt-2`}>
             {typeof errors[name] === 'string' ?
                 capitalize(errors[name] as string)
                 :
                 capitalize((errors[name] as unknown as string[])[0])
             }
         </p>
         :
-        <React.Fragment>
-            {children}
-        </React.Fragment>
+        <>
+            {children ? <p css={tw`text-xs text-neutral-400 pt-2`}>{children}</p> : null}
+        </>
 );
 
 export default InputError;

resources/scripts/components/elements/InputSpinner.tsx

@@ -1,20 +1,21 @@
 import React from 'react';
 import Spinner from '@/components/elements/Spinner';
 import { CSSTransition } from 'react-transition-group';
+import Fade from '@/components/elements/Fade';
+import tw from 'twin.macro';
 
 const InputSpinner = ({ visible, children }: { visible: boolean, children: React.ReactNode }) => (
-    <div className={'relative'}>
-        <CSSTransition
-            timeout={250}
+    <div css={tw`relative`}>
+        <Fade
+            appear
+            unmountOnExit
             in={visible}
-            unmountOnExit={true}
-            appear={true}
-            classNames={'fade'}
+            timeout={250}
         >
-            <div className={'absolute right-0 h-full flex items-center justify-end pr-3'}>
+            <div css={tw`absolute right-0 h-full flex items-center justify-end pr-3`}>
                 <Spinner size={'small'}/>
             </div>
-        </CSSTransition>
+        </Fade>
         {children}
     </div>
 );