Refactor：upgrade react19 ref as props (#25225)

Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
2025-09-08 09:46:02 +08:00
parent 27bf244b3b
commit 98204d78fb
8 changed files with 83 additions and 78 deletions
--- a/web/app/components/base/action-button/index.tsx
+++ b/web/app/components/base/action-button/index.tsx
@@ -32,6 +32,7 @@ export type ActionButtonProps = {
  size?: 'xs' | 's' | 'm' | 'l' | 'xl'
  state?: ActionButtonState
  styleCss?: CSSProperties
+  ref?: React.Ref<HTMLButtonElement>
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof actionButtonVariants>

 function getActionButtonState(state: ActionButtonState) {
@@ -49,24 +50,22 @@ function getActionButtonState(state: ActionButtonState) {
  }
 }

-const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(
-  ({ className, size, state = ActionButtonState.Default, styleCss, children, ...props }, ref) => {
-    return (
-      <button
-        type='button'
-        className={classNames(
-          actionButtonVariants({ className, size }),
-          getActionButtonState(state),
-        )}
-        ref={ref}
-        style={styleCss}
-        {...props}
-      >
-        {children}
-      </button>
-    )
-  },
-)
+const ActionButton = ({ className, size, state = ActionButtonState.Default, styleCss, children, ref, ...props }: ActionButtonProps) => {
+  return (
+    <button
+      type='button'
+      className={classNames(
+        actionButtonVariants({ className, size }),
+        getActionButtonState(state),
+      )}
+      ref={ref}
+      style={styleCss}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
 ActionButton.displayName = 'ActionButton'

 export default ActionButton
--- a/web/app/components/base/button/index.tsx
+++ b/web/app/components/base/button/index.tsx
@@ -35,27 +35,26 @@ export type ButtonProps = {
  loading?: boolean
  styleCss?: CSSProperties
  spinnerClassName?: string
+  ref?: React.Ref<HTMLButtonElement>
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>

-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, destructive, loading, styleCss, children, spinnerClassName, ...props }, ref) => {
-    return (
-      <button
-        type='button'
-        className={classNames(
-          buttonVariants({ variant, size, className }),
-          destructive && 'btn-destructive',
-        )}
-        ref={ref}
-        style={styleCss}
-        {...props}
-      >
-        {children}
-        {loading && <Spinner loading={loading} className={classNames('!ml-1 !h-3 !w-3 !border-2 !text-white', spinnerClassName)} />}
-      </button>
-    )
-  },
-)
+const Button = ({ className, variant, size, destructive, loading, styleCss, children, spinnerClassName, ref, ...props }: ButtonProps) => {
+  return (
+    <button
+      type='button'
+      className={classNames(
+        buttonVariants({ variant, size, className }),
+        destructive && 'btn-destructive',
+      )}
+      ref={ref}
+      style={styleCss}
+      {...props}
+    >
+      {children}
+      {loading && <Spinner loading={loading} className={classNames('!ml-1 !h-3 !w-3 !border-2 !text-white', spinnerClassName)} />}
+    </button>
+  )
+}
 Button.displayName = 'Button'

 export default Button
--- a/web/app/components/base/input/index.tsx
+++ b/web/app/components/base/input/index.tsx
@@ -30,9 +30,10 @@ export type InputProps = {
  wrapperClassName?: string
  styleCss?: CSSProperties
  unit?: string
+  ref?: React.Ref<HTMLInputElement>
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & VariantProps<typeof inputVariants>

-const Input = React.forwardRef<HTMLInputElement, InputProps>(({
+const Input = ({
  size,
  disabled,
  destructive,
@@ -46,8 +47,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
  placeholder,
  onChange = noop,
  unit,
+  ref,
  ...props
-}, ref) => {
+}: InputProps) => {
  const { t } = useTranslation()
  return (
    <div className={cn('relative w-full', wrapperClassName)}>
@@ -93,7 +95,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
      }
    </div>
  )
-})
+}

 Input.displayName = 'Input'

--- a/web/app/components/base/mermaid/index.tsx
+++ b/web/app/components/base/mermaid/index.tsx
@@ -107,10 +107,13 @@ const initMermaid = () => {
  return isMermaidInitialized
 }

-const Flowchart = React.forwardRef((props: {
+type FlowchartProps = {
  PrimitiveCode: string
  theme?: 'light' | 'dark'
-}, ref) => {
+  ref?: React.Ref<HTMLDivElement>
+}
+
+const Flowchart = (props: FlowchartProps) => {
  const { t } = useTranslation()
  const [svgString, setSvgString] = useState<string | null>(null)
  const [look, setLook] = useState<'classic' | 'handDrawn'>('classic')
@@ -490,7 +493,7 @@ const Flowchart = React.forwardRef((props: {
  }

  return (
-    <div ref={ref as React.RefObject<HTMLDivElement>} className={themeClasses.container}>
+    <div ref={props.ref as React.RefObject<HTMLDivElement>} className={themeClasses.container}>
      <div className={themeClasses.segmented}>
        <div className="msh-segmented-group">
          <label className="msh-segmented-item m-2 flex w-[200px] items-center space-x-1">
@@ -572,7 +575,7 @@ const Flowchart = React.forwardRef((props: {
      )}
    </div>
  )
-})
+}

 Flowchart.displayName = 'Flowchart'

--- a/web/app/components/base/textarea/index.tsx
+++ b/web/app/components/base/textarea/index.tsx
@@ -24,30 +24,29 @@ export type TextareaProps = {
  disabled?: boolean
  destructive?: boolean
  styleCss?: CSSProperties
+  ref?: React.Ref<HTMLTextAreaElement>
 } & React.TextareaHTMLAttributes<HTMLTextAreaElement> & VariantProps<typeof textareaVariants>

-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, value, onChange, disabled, size, destructive, styleCss, ...props }, ref) => {
-    return (
-      <textarea
-        ref={ref}
-        style={styleCss}
-        className={cn(
-          'min-h-20 w-full appearance-none border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs',
-          textareaVariants({ size }),
-          disabled && 'cursor-not-allowed border-transparent bg-components-input-bg-disabled text-components-input-text-filled-disabled hover:border-transparent hover:bg-components-input-bg-disabled',
-          destructive && 'border-components-input-border-destructive bg-components-input-bg-destructive text-components-input-text-filled hover:border-components-input-border-destructive hover:bg-components-input-bg-destructive focus:border-components-input-border-destructive focus:bg-components-input-bg-destructive',
-          className,
-        )}
-        value={value ?? ''}
-        onChange={onChange}
-        disabled={disabled}
-        {...props}
-      >
-      </textarea>
-    )
-  },
-)
+const Textarea = ({ className, value, onChange, disabled, size, destructive, styleCss, ref, ...props }: TextareaProps) => {
+  return (
+    <textarea
+      ref={ref}
+      style={styleCss}
+      className={cn(
+        'min-h-20 w-full appearance-none border border-transparent bg-components-input-bg-normal p-2 text-components-input-text-filled caret-primary-600 outline-none placeholder:text-components-input-text-placeholder hover:border-components-input-border-hover hover:bg-components-input-bg-hover focus:border-components-input-border-active focus:bg-components-input-bg-active focus:shadow-xs',
+        textareaVariants({ size }),
+        disabled && 'cursor-not-allowed border-transparent bg-components-input-bg-disabled text-components-input-text-filled-disabled hover:border-transparent hover:bg-components-input-bg-disabled',
+        destructive && 'border-components-input-border-destructive bg-components-input-bg-destructive text-components-input-text-filled hover:border-components-input-border-destructive hover:bg-components-input-bg-destructive focus:border-components-input-border-destructive focus:bg-components-input-bg-destructive',
+        className,
+      )}
+      value={value ?? ''}
+      onChange={onChange}
+      disabled={disabled}
+      {...props}
+    >
+    </textarea>
+  )
+}
 Textarea.displayName = 'Textarea'

 export default Textarea