From 27df2b617e70c840767ff3c85a62a405d291f8e7 Mon Sep 17 00:00:00 2001 From: Justin Date: Tue, 9 Aug 2022 14:18:55 -0400 Subject: [PATCH] Update Input with append and prepend props --- app/soapbox/components/ui/input/input.tsx | 39 +++++++++++++------ .../components/ui/phone-input/phone-input.tsx | 2 +- 2 files changed, 29 insertions(+), 12 deletions(-) diff --git a/app/soapbox/components/ui/input/input.tsx b/app/soapbox/components/ui/input/input.tsx index 5ca748ebc..2bd77dbfa 100644 --- a/app/soapbox/components/ui/input/input.tsx +++ b/app/soapbox/components/ui/input/input.tsx @@ -20,7 +20,7 @@ interface IInput extends Pick, 'maxL className?: string, /** Extra class names for the outer
element. */ outerClassName?: string, - /** URL to the svg icon. Cannot be used with addon. */ + /** URL to the svg icon. Cannot be used with prepend. */ icon?: string, /** Internal input name. */ name?: string, @@ -30,12 +30,13 @@ interface IInput extends Pick, 'maxL value?: string | number, /** Change event handler for the input. */ onChange?: (event: React.ChangeEvent) => void, - /** HTML input type. */ - type?: 'text' | 'number' | 'email' | 'tel' | 'password', /** Whether to display the input in red. */ hasError?: boolean, /** An element to display as prefix to input. Cannot be used with icon. */ - addon?: React.ReactElement, + prepend?: React.ReactElement, + /** An element to display as suffix to input. Cannot be used with password type. */ + append?: React.ReactElement, + isSearch?: boolean, } /** Form input element. */ @@ -43,7 +44,7 @@ const Input = React.forwardRef( (props, ref) => { const intl = useIntl(); - const { type = 'text', icon, className, outerClassName, hasError, addon, ...filteredProps } = props; + const { type = 'text', icon, className, outerClassName, hasError, append, prepend, isSearch, ...filteredProps } = props; const [revealed, setRevealed] = React.useState(false); @@ -54,16 +55,23 @@ const Input = React.forwardRef( }, []); return ( -
+
{icon ? (
) : null} - {addon ? ( + {prepend ? (
- {addon} + {prepend}
) : null} @@ -72,15 +80,24 @@ const Input = React.forwardRef( type={revealed ? 'text' : type} ref={ref} className={classNames({ - 'bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder:text-gray-600 dark:placeholder:text-gray-600 block w-full sm:text-sm border-gray-400 dark:border-gray-800 dark:ring-1 dark:ring-gray-800 rounded-md focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500': + 'text-gray-900 dark:text-gray-100 placeholder:text-gray-600 dark:placeholder:text-gray-600 block w-full sm:text-sm dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500': true, - 'pr-7': isPassword, + 'rounded-md bg-white dark:bg-gray-900 border-gray-400 dark:border-gray-800': !isSearch, + 'rounded-full bg-gray-200 border-gray-200 dark:bg-gray-800 dark:border-gray-800 focus:bg-white': isSearch, + 'pr-7': isPassword || append, 'text-red-600 border-red-600': hasError, 'pl-8': typeof icon !== 'undefined', - 'pl-16': typeof addon !== 'undefined', + 'pl-16': typeof prepend !== 'undefined', }, className)} /> + {/* eslint-disable-next-line no-nested-ternary */} + {append ? ( +
+ {append} +
+ ) : null} + {isPassword ? ( = (props) => {