feat!: affine cloud support (#3813)

Co-authored-by: Hongtao Lye <codert.sn@gmail.com>
Co-authored-by: liuyi <forehalo@gmail.com>
Co-authored-by: LongYinan <lynweklm@gmail.com>
Co-authored-by: X1a0t <405028157@qq.com>
Co-authored-by: JimmFly <yangjinfei001@gmail.com>
Co-authored-by: Peng Xiao <pengxiao@outlook.com>
Co-authored-by: xiaodong zuo <53252747+zuoxiaodong0815@users.noreply.github.com>
Co-authored-by: DarkSky <25152247+darkskygit@users.noreply.github.com>
Co-authored-by: Qi <474021214@qq.com>
Co-authored-by: danielchim <kahungchim@gmail.com>

packages/component/src/ui/input/input.tsx

@@ -1,84 +1,120 @@
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
-import { useCompositionInput } from 'foxact/use-composition-input';
 import type {
+  ChangeEvent,
   CSSProperties,
+  FocusEvent,
   FocusEventHandler,
   ForwardedRef,
-  HTMLAttributes,
+  InputHTMLAttributes,
+  KeyboardEvent,
   KeyboardEventHandler,
+  ReactNode,
 } from 'react';
-import { forwardRef, useCallback } from 'react';
+import { forwardRef, useCallback, useState } from 'react';
 
-import { heightVar, inputStyle, widthVar } from './index.css';
+import { input, inputWrapper, widthVar } from './style.css';
 
-type InputProps = {
-  // We don't have `value` props here,
-  //  see https://foxact.skk.moe/use-composition-input
-  defaultValue?: string | undefined;
-  placeholder?: string;
+export type InputProps = {
   disabled?: boolean;
   width?: CSSProperties['width'];
-  height?: CSSProperties['height'];
-  maxLength?: number;
-  minLength?: number;
   onChange?: (value: string) => void;
   onBlur?: FocusEventHandler<HTMLInputElement>;
   onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
   noBorder?: boolean;
-} & Omit<
-  HTMLAttributes<HTMLInputElement>,
-  | 'onChange'
-  | 'value'
-  | 'defaultValue'
-  | 'onCompositionStart'
-  | 'onCompositionEnd'
->;
+  status?: 'error' | 'success' | 'warning' | 'default';
+  size?: 'default' | 'large' | 'extraLarge';
+  preFix?: ReactNode;
+  endFix?: ReactNode;
+  type?: HTMLInputElement['type'];
+  inputStyle?: CSSProperties;
+  onEnter?: () => void;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'>;
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
   {
     disabled,
-    defaultValue,
-    placeholder,
-    maxLength,
-    minLength,
-    height,
     width,
-    onChange,
+    onChange: propsOnChange,
     noBorder = false,
     className,
+    status = 'default',
+    style = {},
+    inputStyle = {},
+    size = 'default',
+    onFocus,
+    onBlur,
+    preFix,
+    endFix,
+    onEnter,
+    onKeyDown,
     ...otherProps
   }: InputProps,
   ref: ForwardedRef<HTMLInputElement>
 ) {
-  const inputProps = useCompositionInput(
-    useCallback(
-      (value: string) => {
-        onChange && onChange(value);
-      },
-      [onChange]
-    )
-  );
+  const [isFocus, setIsFocus] = useState(false);
 
   return (
-    <input
-      className={clsx(inputStyle, className)}
-      style={assignInlineVars({
-        [widthVar]: width ? `${width}px` : '100%',
-        [heightVar]: height ? `${height}px` : 'unset',
+    <div
+      className={clsx(inputWrapper, className, {
+        // status
+        disabled: disabled,
+        'no-border': noBorder,
+        focus: isFocus,
+        // color
+        error: status === 'error',
+        success: status === 'success',
+        warning: status === 'warning',
+        default: status === 'default',
+        // size
+        large: size === 'large',
+        'extra-large': size === 'extraLarge',
       })}
-      data-no-border={noBorder}
-      data-disabled={disabled}
-      ref={ref}
-      defaultValue={defaultValue}
-      disabled={disabled}
-      placeholder={placeholder}
-      width={width}
-      maxLength={maxLength}
-      minLength={minLength}
-      height={height}
-      {...otherProps}
-      {...inputProps}
-    />
+      style={{
+        ...assignInlineVars({
+          [widthVar]: width ? `${width}px` : '100%',
+        }),
+        ...style,
+      }}
+    >
+      {preFix}
+      <input
+        className={clsx(input)}
+        ref={ref}
+        disabled={disabled}
+        style={inputStyle}
+        onFocus={useCallback(
+          (e: FocusEvent<HTMLInputElement>) => {
+            setIsFocus(true);
+            onFocus?.(e);
+          },
+          [onFocus]
+        )}
+        onBlur={useCallback(
+          (e: FocusEvent<HTMLInputElement>) => {
+            setIsFocus(false);
+            onBlur?.(e);
+          },
+          [onBlur]
+        )}
+        onChange={useCallback(
+          (e: ChangeEvent<HTMLInputElement>) => {
+            propsOnChange?.(e.target.value);
+          },
+          [propsOnChange]
+        )}
+        onKeyDown={useCallback(
+          (e: KeyboardEvent<HTMLInputElement>) => {
+            if (e.key === 'Enter') {
+              onEnter?.();
+            }
+            onKeyDown?.(e);
+          },
+          [onKeyDown, onEnter]
+        )}
+        {...otherProps}
+      />
+      {endFix}
+    </div>
   );
 });