@canvas-components/react-components

@canvas-components/react-components 提供一组为表格适配层和业务表单场景准备的 React 基础组件，包含输入类组件、弹层、过渡、虚拟列表、分页和图片预览等能力。

功能作用

• 提供统一风格的 React 基础交互组件
• 为 @canvas-components/react-table 提供编辑器、弹层和辅助 UI
• 暴露 Popup、Popconfirm、Transition、VirtualList 等可独立复用组件

安装方法

pnpm add @canvas-components/react-components react@^16.8 react-dom@^16.8

最低依赖版本：

• react >= 16.8.0
• react-dom >= 16.8.0
• Node.js >= 18.12.0
• pnpm >= 9.0.0

使用方法

import {
  ReactPopconfirm,
  ReactPopup,
  ReactTransition,
} from "@canvas-components/react-components";

function Demo() {
  return (
    <ReactPopconfirm
      title="确认删除这条记录？"
      description="删除后不可恢复"
      onConfirm={() => console.log("confirmed")}
    >
      <button type="button">删除</button>
    </ReactPopconfirm>
  );
}

组件列表

输入与选择

• ReactInput
• ReactNumberInput
• ReactInputNumber
• ReactCheckbox
• ReactSelect
• ReactColorPicker

日期时间

• ReactDatePicker
• ReactDateRangePicker
• ReactDateTimePicker
• ReactDateTimeRangePicker
• ReactTimePicker
• ReactTimeRangePicker
• ReactMonthPicker
• ReactQuarterPicker
• ReactYearPicker

展示与交互

• ReactPopup
• ReactPopconfirm
• ReactTransition
• ReactPagination
• ReactVirtualList
• ReactImagePreview

属性说明

ReactPopupProps

| 属性 | 类型 | 说明 | | --- | --- | --- | | open | boolean | 是否显示 | | anchorRef | RefObject<HTMLElement \| null> | 锚点元素引用 | | anchorRect | PopupAnchorRect \| null | 外部传入的锚点矩形 | | placement | "bottomLeft" \| "bottomRight" \| "topLeft" \| "topRight" \| "rightTop" \| "rightBottom" \| "leftTop" \| "leftBottom" | 弹层位置 | | offset | number | 与锚点间距 | | matchAnchorWidth | boolean | 是否跟随锚点宽度 | | minWidth | number | 最小宽度 | | zIndex | number | 层级 | | className | string | 外层类名 | | surfaceClassName | string | 面板类名 | | style | CSSProperties | 外层样式 | | surfaceStyle | CSSProperties | 面板样式 | | onOpenChange | (open: boolean) => void | 打开状态变化回调 | | children | ReactNode | 弹层内容 |

ReactPopconfirmProps

| 属性 | 类型 | 说明 | | --- | --- | --- | | children | ReactNode | 触发器内容 | | title | ReactNode | 标题 | | description | ReactNode | 描述文本 | | open / defaultOpen | boolean | 受控 / 非受控打开状态 | | disabled | boolean | 是否禁用 | | placement | ReactPopconfirmPlacement | 弹层位置 | | offset | number | 触发器与弹层间距 | | zIndex | number | 层级 | | icon | ReactNode | 自定义图标，传 null 隐藏默认图标 | | okText / cancelText | ReactNode | 按钮文案 | | showCancel | boolean | 是否显示取消按钮 | | confirmLoading | boolean | 是否强制确认按钮 loading | | okButtonProps / cancelButtonProps | ReactPopconfirmButtonProps | 按钮透传属性 | | onConfirm | (event) => void \| Promise<void> | 点击确认回调，支持异步 | | onCancel | (event) => void | 点击取消回调 | | onOpenChange | (open: boolean) => void | 状态变化回调 | | className / style | string / CSSProperties | 触发器样式 | | popupClassName / popupStyle | string / CSSProperties | 弹层面板样式 |

ReactTransitionProps

| 属性 | 类型 | 说明 | | --- | --- | --- | | show | boolean | 是否显示内容 | | name | string | CSS 类名前缀 | | duration | number \| { enter?: number; leave?: number } | 动画时长 | | appear | boolean | 首次显示是否执行进入动画 | | children | (state: ReactTransitionState) => ReactNode | 根据阶段渲染内容 |

ReactVirtualListProps<Item>

| 属性 | 类型 | 说明 | | --- | --- | --- | | items | Item[] | 数据列表 | | height | number | 视口高度 | | itemHeight | number | 固定项高度 | | overscan | number | 预渲染项数 | | renderItem | (item, index, meta) => ReactNode | 渲染函数 | | itemKey | (item, index) => string \| number | 列表 key |

方法说明

ReactTransition

| 导出 | 说明 | | --- | --- | | ReactTransition | 无包装过渡组件，离场动画结束后自动卸载 | | useReactTransition | 获取 Vue 风格过渡阶段和 className |

ReactVirtualListRef

| 方法 | 说明 | | --- | --- | | scrollTo | 滚动到指定位置 | | scrollToIndex | 滚动到指定索引 |

其他导出

| 导出 | 说明 | | --- | --- | | ReactContentScaleProvider / useReactContentScale | 内容缩放上下文 | | REACT_COMPONENT_PREFIX | 统一类名前缀 |

说明

这个包的导出面比较大，输入类组件大多保持接近原生表单语义；如果需要精确字段，请优先查看对应组件的 Props 类型定义。