@canvas-components/react-components 0.1.1 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +161 -0
  2. package/dist/index.cjs +705 -108
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +286 -2
  5. package/dist/index.d.ts +286 -2
  6. package/dist/index.js +701 -110
  7. package/dist/index.js.map +1 -1
  8. package/package.json +1 -1
package/README.md ADDED
@@ -0,0 +1,161 @@
1
+ # @canvas-components/react-components
2
+
3
+ `@canvas-components/react-components` 提供一组为表格适配层和业务表单场景准备的 React 基础组件，包含输入类组件、弹层、过渡、虚拟列表、分页和图片预览等能力。
4
+
5
+ ## 功能作用
6
+
7
+ - 提供统一风格的 React 基础交互组件
8
+ - 为 `@canvas-components/react-table` 提供编辑器、弹层和辅助 UI
9
+ - 暴露 `Popup`、`Popconfirm`、`Transition`、`VirtualList` 等可独立复用组件
10
+
11
+ ## 安装方法
12
+
13
+ ```bash
14
+ pnpm add @canvas-components/react-components react react-dom
15
+ ```
16
+
17
+ ## 使用方法
18
+
19
+ ```tsx
20
+ import {
21
+ ReactPopconfirm,
22
+ ReactPopup,
23
+ ReactTransition,
24
+ } from "@canvas-components/react-components";
25
+
26
+ function Demo() {
27
+ return (
28
+ <ReactPopconfirm
29
+ title="确认删除这条记录？"
30
+ description="删除后不可恢复"
31
+ onConfirm={() => console.log("confirmed")}
32
+ >
33
+ <button type="button">删除</button>
34
+ </ReactPopconfirm>
35
+ );
36
+ }
37
+ ```
38
+
39
+ ## 组件列表
40
+
41
+ ### 输入与选择
42
+
43
+ - `ReactInput`
44
+ - `ReactNumberInput`
45
+ - `ReactInputNumber`
46
+ - `ReactCheckbox`
47
+ - `ReactSelect`
48
+ - `ReactColorPicker`
49
+
50
+ ### 日期时间
51
+
52
+ - `ReactDatePicker`
53
+ - `ReactDateRangePicker`
54
+ - `ReactDateTimePicker`
55
+ - `ReactDateTimeRangePicker`
56
+ - `ReactTimePicker`
57
+ - `ReactTimeRangePicker`
58
+ - `ReactMonthPicker`
59
+ - `ReactQuarterPicker`
60
+ - `ReactYearPicker`
61
+
62
+ ### 展示与交互
63
+
64
+ - `ReactPopup`
65
+ - `ReactPopconfirm`
66
+ - `ReactTransition`
67
+ - `ReactPagination`
68
+ - `ReactVirtualList`
69
+ - `ReactImagePreview`
70
+
71
+ ## 属性说明
72
+
73
+ ### `ReactPopupProps`
74
+
75
+ | 属性 | 类型 | 说明 |
76
+ | --- | --- | --- |
77
+ | `open` | `boolean` | 是否显示 |
78
+ | `anchorRef` | `RefObject<HTMLElement \| null>` | 锚点元素引用 |
79
+ | `anchorRect` | `PopupAnchorRect \| null` | 外部传入的锚点矩形 |
80
+ | `placement` | `"bottomLeft" \| "bottomRight" \| "topLeft" \| "topRight" \| "rightTop" \| "rightBottom" \| "leftTop" \| "leftBottom"` | 弹层位置 |
81
+ | `offset` | `number` | 与锚点间距 |
82
+ | `matchAnchorWidth` | `boolean` | 是否跟随锚点宽度 |
83
+ | `minWidth` | `number` | 最小宽度 |
84
+ | `zIndex` | `number` | 层级 |
85
+ | `className` | `string` | 外层类名 |
86
+ | `surfaceClassName` | `string` | 面板类名 |
87
+ | `style` | `CSSProperties` | 外层样式 |
88
+ | `surfaceStyle` | `CSSProperties` | 面板样式 |
89
+ | `onOpenChange` | `(open: boolean) => void` | 打开状态变化回调 |
90
+ | `children` | `ReactNode` | 弹层内容 |
91
+
92
+ ### `ReactPopconfirmProps`
93
+
94
+ | 属性 | 类型 | 说明 |
95
+ | --- | --- | --- |
96
+ | `children` | `ReactNode` | 触发器内容 |
97
+ | `title` | `ReactNode` | 标题 |
98
+ | `description` | `ReactNode` | 描述文本 |
99
+ | `open` / `defaultOpen` | `boolean` | 受控 / 非受控打开状态 |
100
+ | `disabled` | `boolean` | 是否禁用 |
101
+ | `placement` | `ReactPopconfirmPlacement` | 弹层位置 |
102
+ | `offset` | `number` | 触发器与弹层间距 |
103
+ | `zIndex` | `number` | 层级 |
104
+ | `icon` | `ReactNode` | 自定义图标，传 `null` 隐藏默认图标 |
105
+ | `okText` / `cancelText` | `ReactNode` | 按钮文案 |
106
+ | `showCancel` | `boolean` | 是否显示取消按钮 |
107
+ | `confirmLoading` | `boolean` | 是否强制确认按钮 loading |
108
+ | `okButtonProps` / `cancelButtonProps` | `ReactPopconfirmButtonProps` | 按钮透传属性 |
109
+ | `onConfirm` | `(event) => void \| Promise<void>` | 点击确认回调，支持异步 |
110
+ | `onCancel` | `(event) => void` | 点击取消回调 |
111
+ | `onOpenChange` | `(open: boolean) => void` | 状态变化回调 |
112
+ | `className` / `style` | `string` / `CSSProperties` | 触发器样式 |
113
+ | `popupClassName` / `popupStyle` | `string` / `CSSProperties` | 弹层面板样式 |
114
+
115
+ ### `ReactTransitionProps`
116
+
117
+ | 属性 | 类型 | 说明 |
118
+ | --- | --- | --- |
119
+ | `show` | `boolean` | 是否显示内容 |
120
+ | `name` | `string` | CSS 类名前缀 |
121
+ | `duration` | `number \| { enter?: number; leave?: number }` | 动画时长 |
122
+ | `appear` | `boolean` | 首次显示是否执行进入动画 |
123
+ | `children` | `(state: ReactTransitionState) => ReactNode` | 根据阶段渲染内容 |
124
+
125
+ ### `ReactVirtualListProps<Item>`
126
+
127
+ | 属性 | 类型 | 说明 |
128
+ | --- | --- | --- |
129
+ | `items` | `Item[]` | 数据列表 |
130
+ | `height` | `number` | 视口高度 |
131
+ | `itemHeight` | `number` | 固定项高度 |
132
+ | `overscan` | `number` | 预渲染项数 |
133
+ | `renderItem` | `(item, index, meta) => ReactNode` | 渲染函数 |
134
+ | `itemKey` | `(item, index) => string \| number` | 列表 key |
135
+
136
+ ## 方法说明
137
+
138
+ ### `ReactTransition`
139
+
140
+ | 导出 | 说明 |
141
+ | --- | --- |
142
+ | `ReactTransition` | 无包装过渡组件，离场动画结束后自动卸载 |
143
+ | `useReactTransition` | 获取 Vue 风格过渡阶段和 className |
144
+
145
+ ### `ReactVirtualListRef`
146
+
147
+ | 方法 | 说明 |
148
+ | --- | --- |
149
+ | `scrollTo` | 滚动到指定位置 |
150
+ | `scrollToIndex` | 滚动到指定索引 |
151
+
152
+ ## 其他导出
153
+
154
+ | 导出 | 说明 |
155
+ | --- | --- |
156
+ | `ReactContentScaleProvider` / `useReactContentScale` | 内容缩放上下文 |
157
+ | `REACT_COMPONENT_PREFIX` | 统一类名前缀 |
158
+
159
+ ## 说明
160
+
161
+ 这个包的导出面比较大，输入类组件大多保持接近原生表单语义；如果需要精确字段，请优先查看对应组件的 `Props` 类型定义。