feat: redo inline input

reaviz · May 15, 2024 · 821e31a · 821e31a
1 parent 22594e7
commit 821e31a
Showing 3 changed files with 36 additions and 18 deletions.
diff --git a/src/form/Input/InlineInput/InlineInput.story.tsx b/src/form/Input/InlineInput/InlineInput.story.tsx
@@ -9,17 +9,11 @@ export default {
 export const Basic = () => {
   const [text, setText] = useState('');
   return (
-    <div
-      style={{
-        border: 'var(--input-border)',
-        borderRadius: 'var(--border-radius-md)',
-        padding: 'var(--spacing-sm)'
-      }}
-    >
+    <div className="border border-blue-500 p-2">
       <InlineInput
         value={text}
         onChange={event => setText(event.target.value)}
-        placeholder="Type here..."
+        placeholder="..."
       />
     </div>
   );

diff --git a/src/form/Input/InlineInput/InlineInput.tsx b/src/form/Input/InlineInput/InlineInput.tsx
@@ -2,7 +2,7 @@ import React, { forwardRef, Ref, InputHTMLAttributes } from 'react';
 import AutosizeInput from 'react-18-input-autosize';
 import { twMerge } from 'tailwind-merge';
 import { InputTheme } from '@/form/Input/InputTheme';
-import { useComponentTheme } from '@/utils';
+import { cn, useComponentTheme } from '@/utils';
 
 export interface InlineInputProps
   extends InputHTMLAttributes<HTMLInputElement> {
@@ -42,13 +42,43 @@ export const InlineInput = forwardRef<HTMLDivElement, InlineInputProps>(
     {
       inputClassName,
       placeholderIsMinWidth = true,
+      className,
+      placeholder,
+      value,
       theme: customTheme,
-      ...rest
+      ...props
     },
     ref: Ref<HTMLInputElement>
   ) => {
     const theme: InputTheme = useComponentTheme('input', customTheme);
 
+    return (
+      <div className={cn('inline-grid', className)}>
+        <span className="invisible" style={{ gridArea: ' 1 / 1 ' }}>
+          {!value && '\u00A0'}
+          {typeof value === 'string'
+            ? !value
+              ? placeholder.replace(/ /g, '\u00A0')
+              : value.replace(/ /g, '\u00A0')
+            : value}
+        </span>
+        <input
+          {...props}
+          size={1}
+          ref={ref}
+          style={{ gridArea: ' 1 / 1 ' }}
+          type="text"
+          placeholder={placeholder}
+          value={value}
+          className={cn(
+            'border-none bg-transparent focus:outline-none',
+            inputClassName,
+            theme.inline
+          )}
+        />
+      </div>
+    );
+    /*
     return (
       <AutosizeInput
         inputRef={ref}
@@ -57,5 +87,6 @@ export const InlineInput = forwardRef<HTMLDivElement, InlineInputProps>(
         {...rest}
       />
     );
+    */
   }
 );
diff --git a/src/form/Select/SelectInput/SelectInput.tsx b/src/form/Select/SelectInput/SelectInput.tsx
@@ -51,11 +51,6 @@ export interface SelectInputProps {
    */
   menuOpen?: boolean;
 
-  /**
-   * The font size of the select input.
-   */
-  fontSize?: string | number;
-
   /**
    * The input text of the select input.
    */
@@ -231,7 +226,6 @@ export const SelectInput: FC<Partial<SelectInputProps>> = ({
   disabled,
   placeholder,
   filterable,
-  fontSize = 13,
   id,
   name,
   className,
@@ -505,9 +499,8 @@ export const SelectInput: FC<Partial<SelectInputProps>> = ({
       >
         {renderPrefix()}
         <InlineInput
-          inputRef={el => (inputRef.current = el)}
+          ref={inputRef}
           id={id}
-          style={{ fontSize }}
           name={name}
           disabled={disabled}
           required={required}