dify/web/app/components/workflow/block-selector/block-selector-row.tsx

import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react'
import { cn } from '@langgenius/dify-ui/cn'

type SharedProps = {
  children: ReactNode
  className?: string
  disabled?: boolean
  hoverable?: boolean
}

type ButtonRowProps = SharedProps
  & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'disabled'>
  & {
    as?: 'button'
    nativeDisabled?: boolean
  }

type DivRowProps = SharedProps
  & Omit<HTMLAttributes<HTMLDivElement>, 'className'>
  & {
    as: 'div'
  }

type BlockSelectorRowProps = ButtonRowProps | DivRowProps

const rowClassName = (className?: string, disabled = false, hoverable = true) => cn(
  'flex h-8 w-full items-center rounded-lg pr-2 pl-3',
  !disabled && hoverable && 'hover:bg-state-base-hover',
  disabled && 'cursor-not-allowed',
  className,
)

const buttonClassName = (className?: string, disabled = false, hoverable = true) => cn(
  rowClassName(className, disabled, hoverable),
  !disabled && 'cursor-pointer',
  'border-0 bg-transparent text-left focus-visible:ring-1 focus-visible:ring-components-input-border-hover focus-visible:outline-hidden',
)

export function BlockSelectorRow(props: BlockSelectorRowProps) {
  if (props.as === 'div') {
    const {
      as: _as,
      children,
      className,
      disabled = false,
      hoverable,
      ...rest
    } = props

    return (
      <div
        className={rowClassName(className, disabled, hoverable)}
        {...rest}
      >
        {children}
      </div>
    )
  }

  const {
    as: _as,
    children,
    className,
    disabled = false,
    hoverable,
    nativeDisabled,
    type = 'button',
    ...rest
  } = props

  return (
    <button
      type={type}
      disabled={nativeDisabled}
      className={buttonClassName(className, disabled, hoverable)}
      {...rest}
    >
      {children}
    </button>
  )
}