@canvas-components/react-components 0.3.27 → 0.3.29

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 (6) hide show
  1. package/README.md +96 -65
  2. package/dist/index.cjs +1104 -976
  3. package/dist/index.d.cts +19 -1
  4. package/dist/index.d.ts +19 -1
  5. package/dist/index.js +1104 -977
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -75,7 +75,10 @@ export function ProfileForm() {
75
75
  <form onSubmit={(event) => event.preventDefault()}>
76
76
  <label>
77
77
  姓名
78
- <ReactInput value={name} onChange={(event) => setName(event.currentTarget.value)} />
78
+ <ReactInput
79
+ value={name}
80
+ onChange={(event) => setName(event.currentTarget.value)}
81
+ />
79
82
  </label>
80
83
  <label>
81
84
  团队
@@ -97,7 +100,9 @@ export function ProfileForm() {
97
100
  接收团队动态
98
101
  </ReactCheckbox>
99
102
  <ReactFlex gap={8}>
100
- <ReactButton type="primary" htmlType="submit">保存</ReactButton>
103
+ <ReactButton type="primary" htmlType="submit">
104
+ 保存
105
+ </ReactButton>
101
106
  <ReactPopconfirm title="确认删除？" onConfirm={() => setName("")}>
102
107
  <ReactButton danger>删除</ReactButton>
103
108
  </ReactPopconfirm>
@@ -112,7 +117,10 @@ export function ProfileForm() {
112
117
  `ReactSelect` 的暗色模式通过 `ReactConfigProvider` 配置。输入框与挂载到页面外层的下拉面板会使用同一组颜色：
113
118
 
114
119
  ```tsx
115
- import { ReactConfigProvider, ReactSelect } from "@canvas-components/react-components";
120
+ import {
121
+ ReactConfigProvider,
122
+ ReactSelect,
123
+ } from "@canvas-components/react-components";
116
124
 
117
125
  <ReactConfigProvider
118
126
  theme={{
@@ -127,7 +135,7 @@ import { ReactConfigProvider, ReactSelect } from "@canvas-components/react-compo
127
135
  }}
128
136
  >
129
137
  <ReactSelect options={[{ label: "选项一", value: "one" }]} />
130
- </ReactConfigProvider>
138
+ </ReactConfigProvider>;
131
139
  ```
132
140
 
133
141
  ## 组件列表
@@ -187,6 +195,29 @@ import { ReactConfigProvider, ReactSelect } from "@canvas-components/react-compo
187
195
 
188
196
  ## 属性说明
189
197
 
198
+ ### `ReactPagination`
199
+
200
+ ```tsx
201
+ <ReactPagination
202
+ current={current}
203
+ total={1000}
204
+ pageSize={pageSize}
205
+ showSizeChanger
206
+ allowPageSizeInput
207
+ minPageSize={5}
208
+ maxPageSize={500}
209
+ onChange={setCurrent}
210
+ onPageSizeChange={(page, size) => {
211
+ setCurrent(page);
212
+ setPageSize(size);
213
+ }}
214
+ />
215
+ ```
216
+
217
+ `allowPageSizeInput` 默认关闭。开启后可在每页条数下拉框中输入正整数，按回车或失焦提交；合法值触发 `onPageSizeChange(1, size)`，并在当前组件挂载期间作为去重、升序的候选项保留，切换到其他条数后仍可再次选择。空候选列表也支持输入。自定义选项右侧可点击删除，预设选项和默认每页 10 条不可删除；删除当前选中的自定义项时回到每页 10 条并切回第 1 页，若 10 超出配置范围则取范围内最近的值。删除其他项不改变当前分页，删除后仍可重新输入该值。
218
+
219
+ `minPageSize` 默认 `1`，`maxPageSize` 默认 `Number.MAX_SAFE_INTEGER`，上下限均包含边界。非法或越界输入不触发变更，失焦恢复当前值；范围外的候选项不可选择。无效的上下限使用默认值，最大值小于最小值时按最小值处理。组件不会主动修改外部传入的当前 `pageSize`。
220
+
190
221
  ### `ReactTag`
191
222
 
192
223
  ```tsx
@@ -215,89 +246,89 @@ import { ReactConfigProvider, ReactSelect } from "@canvas-components/react-compo
215
246
 
216
247
  ### `ReactPopupProps`
217
248
 
218
- | 属性 | 类型 | 说明 |
219
- | --- | --- | --- |
220
- | `open` | `boolean` | 是否显示 |
221
- | `anchorRef` | `RefObject<HTMLElement \| null>` | 锚点元素引用 |
222
- | `anchorRect` | `PopupAnchorRect \| null` | 外部传入的锚点矩形 |
223
- | `placement` | `"bottomLeft" \| "bottomRight" \| "topLeft" \| "topRight" \| "rightTop" \| "rightBottom" \| "leftTop" \| "leftBottom"` | 弹层位置 |
224
- | `offset` | `number` | 与锚点间距 |
225
- | `matchAnchorWidth` | `boolean` | 是否跟随锚点宽度 |
226
- | `minWidth` | `number` | 最小宽度 |
227
- | `zIndex` | `number` | 层级 |
228
- | `className` | `string` | 外层类名 |
229
- | `surfaceClassName` | `string` | 面板类名 |
230
- | `style` | `CSSProperties` | 外层样式 |
231
- | `surfaceStyle` | `CSSProperties` | 面板样式 |
232
- | `onOpenChange` | `(open: boolean) => void` | 打开状态变化回调 |
233
- | `children` | `ReactNode` | 弹层内容 |
249
+ | 属性 | 类型 | 说明 |
250
+ | ------------------ | ---------------------------------------------------------------------------------------------------------------------- | ------------------ |
251
+ | `open` | `boolean` | 是否显示 |
252
+ | `anchorRef` | `RefObject<HTMLElement \| null>` | 锚点元素引用 |
253
+ | `anchorRect` | `PopupAnchorRect \| null` | 外部传入的锚点矩形 |
254
+ | `placement` | `"bottomLeft" \| "bottomRight" \| "topLeft" \| "topRight" \| "rightTop" \| "rightBottom" \| "leftTop" \| "leftBottom"` | 弹层位置 |
255
+ | `offset` | `number` | 与锚点间距 |
256
+ | `matchAnchorWidth` | `boolean` | 是否跟随锚点宽度 |
257
+ | `minWidth` | `number` | 最小宽度 |
258
+ | `zIndex` | `number` | 层级 |
259
+ | `className` | `string` | 外层类名 |
260
+ | `surfaceClassName` | `string` | 面板类名 |
261
+ | `style` | `CSSProperties` | 外层样式 |
262
+ | `surfaceStyle` | `CSSProperties` | 面板样式 |
263
+ | `onOpenChange` | `(open: boolean) => void` | 打开状态变化回调 |
264
+ | `children` | `ReactNode` | 弹层内容 |
234
265
 
235
266
  ### `ReactPopconfirmProps`
236
267
 
237
- | 属性 | 类型 | 说明 |
238
- | --- | --- | --- |
239
- | `children` | `ReactNode` | 触发器内容 |
240
- | `title` | `ReactNode` | 标题 |
241
- | `description` | `ReactNode` | 描述文本 |
242
- | `open` / `defaultOpen` | `boolean` | 受控 / 非受控打开状态 |
243
- | `disabled` | `boolean` | 是否禁用 |
244
- | `placement` | `ReactPopconfirmPlacement` | 弹层位置 |
245
- | `offset` | `number` | 触发器与弹层间距 |
246
- | `zIndex` | `number` | 层级 |
247
- | `icon` | `ReactNode` | 自定义图标，传 `null` 隐藏默认图标 |
248
- | `okText` / `cancelText` | `ReactNode` | 按钮文案 |
249
- | `showCancel` | `boolean` | 是否显示取消按钮 |
250
- | `confirmLoading` | `boolean` | 是否强制确认按钮 loading |
251
- | `okButtonProps` / `cancelButtonProps` | `ReactPopconfirmButtonProps` | 按钮透传属性 |
252
- | `onConfirm` | `(event) => void \| Promise<void>` | 点击确认回调，支持异步 |
253
- | `onCancel` | `(event) => void` | 点击取消回调 |
254
- | `onOpenChange` | `(open: boolean) => void` | 状态变化回调 |
255
- | `className` / `style` | `string` / `CSSProperties` | 触发器样式 |
256
- | `popupClassName` / `popupStyle` | `string` / `CSSProperties` | 弹层面板样式 |
268
+ | 属性 | 类型 | 说明 |
269
+ | ------------------------------------- | ---------------------------------- | ---------------------------------- |
270
+ | `children` | `ReactNode` | 触发器内容 |
271
+ | `title` | `ReactNode` | 标题 |
272
+ | `description` | `ReactNode` | 描述文本 |
273
+ | `open` / `defaultOpen` | `boolean` | 受控 / 非受控打开状态 |
274
+ | `disabled` | `boolean` | 是否禁用 |
275
+ | `placement` | `ReactPopconfirmPlacement` | 弹层位置 |
276
+ | `offset` | `number` | 触发器与弹层间距 |
277
+ | `zIndex` | `number` | 层级 |
278
+ | `icon` | `ReactNode` | 自定义图标，传 `null` 隐藏默认图标 |
279
+ | `okText` / `cancelText` | `ReactNode` | 按钮文案 |
280
+ | `showCancel` | `boolean` | 是否显示取消按钮 |
281
+ | `confirmLoading` | `boolean` | 是否强制确认按钮 loading |
282
+ | `okButtonProps` / `cancelButtonProps` | `ReactPopconfirmButtonProps` | 按钮透传属性 |
283
+ | `onConfirm` | `(event) => void \| Promise<void>` | 点击确认回调，支持异步 |
284
+ | `onCancel` | `(event) => void` | 点击取消回调 |
285
+ | `onOpenChange` | `(open: boolean) => void` | 状态变化回调 |
286
+ | `className` / `style` | `string` / `CSSProperties` | 触发器样式 |
287
+ | `popupClassName` / `popupStyle` | `string` / `CSSProperties` | 弹层面板样式 |
257
288
 
258
289
  ### `ReactTransitionProps`
259
290
 
260
- | 属性 | 类型 | 说明 |
261
- | --- | --- | --- |
262
- | `show` | `boolean` | 是否显示内容 |
263
- | `name` | `string` | CSS 类名前缀 |
264
- | `duration` | `number \| { enter?: number; leave?: number }` | 动画时长 |
265
- | `appear` | `boolean` | 首次显示是否执行进入动画 |
266
- | `children` | `(state: ReactTransitionState) => ReactNode` | 根据阶段渲染内容 |
291
+ | 属性 | 类型 | 说明 |
292
+ | ---------- | ---------------------------------------------- | ------------------------ |
293
+ | `show` | `boolean` | 是否显示内容 |
294
+ | `name` | `string` | CSS 类名前缀 |
295
+ | `duration` | `number \| { enter?: number; leave?: number }` | 动画时长 |
296
+ | `appear` | `boolean` | 首次显示是否执行进入动画 |
297
+ | `children` | `(state: ReactTransitionState) => ReactNode` | 根据阶段渲染内容 |
267
298
 
268
299
  ### `ReactVirtualListProps<Item>`
269
300
 
270
- | 属性 | 类型 | 说明 |
271
- | --- | --- | --- |
272
- | `items` | `Item[]` | 数据列表 |
273
- | `height` | `number` | 视口高度 |
274
- | `itemHeight` | `number` | 固定项高度 |
275
- | `overscan` | `number` | 预渲染项数 |
276
- | `renderItem` | `(item, index, meta) => ReactNode` | 渲染函数 |
277
- | `itemKey` | `(item, index) => string \| number` | 列表 key |
301
+ | 属性 | 类型 | 说明 |
302
+ | ------------ | ----------------------------------- | ---------- |
303
+ | `items` | `Item[]` | 数据列表 |
304
+ | `height` | `number` | 视口高度 |
305
+ | `itemHeight` | `number` | 固定项高度 |
306
+ | `overscan` | `number` | 预渲染项数 |
307
+ | `renderItem` | `(item, index, meta) => ReactNode` | 渲染函数 |
308
+ | `itemKey` | `(item, index) => string \| number` | 列表 key |
278
309
 
279
310
  ## 方法说明
280
311
 
281
312
  ### `ReactTransition`
282
313
 
283
- | 导出 | 说明 |
284
- | --- | --- |
285
- | `ReactTransition` | 无包装过渡组件，离场动画结束后自动卸载 |
286
- | `useReactTransition` | 获取 Vue 风格过渡阶段和 className |
314
+ | 导出 | 说明 |
315
+ | -------------------- | -------------------------------------- |
316
+ | `ReactTransition` | 无包装过渡组件，离场动画结束后自动卸载 |
317
+ | `useReactTransition` | 获取 Vue 风格过渡阶段和 className |
287
318
 
288
319
  ### `ReactVirtualListRef`
289
320
 
290
- | 方法 | 说明 |
291
- | --- | --- |
292
- | `scrollTo` | 滚动到指定位置 |
321
+ | 方法 | 说明 |
322
+ | --------------- | -------------- |
323
+ | `scrollTo` | 滚动到指定位置 |
293
324
  | `scrollToIndex` | 滚动到指定索引 |
294
325
 
295
326
  ## 其他导出
296
327
 
297
- | 导出 | 说明 |
298
- | --- | --- |
328
+ | 导出 | 说明 |
329
+ | ---------------------------------------------------- | -------------- |
299
330
  | `ReactContentScaleProvider` / `useReactContentScale` | 内容缩放上下文 |
300
- | `REACT_COMPONENT_PREFIX` | 统一类名前缀 |
331
+ | `REACT_COMPONENT_PREFIX` | 统一类名前缀 |
301
332
 
302
333
  ## 说明
303
334