@hzab/edit-table 0.1.5 → 0.1.8
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.
- package/CHANGELOG.md +95 -0
- package/README.md +170 -0
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,4 +1,99 @@
|
|
|
1
1
|
# @hzab/edit-table@0.1.5
|
|
2
|
+
|
|
3
|
+
## 0.1.8
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 跳过被 npm staged publish 占用的版本号,重新编号发布(**无代码变更**)。
|
|
8
|
+
|
|
9
|
+
这四个版本在 `registry.npmjs.org` 上返回
|
|
10
|
+
`409 Conflict - Cannot publish over previously staged version`——即发布时被 npm 的
|
|
11
|
+
staged publishing 机制暂存(账号启用 2FA、token 不允许绕过 2FA),该版本号随即被占用,
|
|
12
|
+
且 `npm stage list` 已查不到对应 stage(已过期/清理),但版本号无法再次发布。故重新编号:
|
|
13
|
+
|
|
14
|
+
| 包 | 被占用(不可用) | 本次发布 |
|
|
15
|
+
| --- | --- | --- |
|
|
16
|
+
| `@hzab/utils` | 1.1.9 | **1.1.10** |
|
|
17
|
+
| `@hzab/list-render` | 1.12.8 | **1.12.9** |
|
|
18
|
+
| `@hzab/edit-table` | 0.1.7 | **0.1.8** |
|
|
19
|
+
| `@hzab/form-render-mobile` | 1.2.11 | **1.2.12** |
|
|
20
|
+
|
|
21
|
+
包内容与上一版本完全一致(仅版本号变化),阿里云 `ld`/`old` 与公共 npm 三源同步发布。
|
|
22
|
+
- Updated dependencies
|
|
23
|
+
- @hzab/utils@1.1.10
|
|
24
|
+
|
|
25
|
+
## 0.1.7
|
|
26
|
+
|
|
27
|
+
### Patch Changes
|
|
28
|
+
|
|
29
|
+
- bb45682: 移除 `package.json` 的 `"type": "module"`,修复 webpack 消费方「升级即构建失败」。
|
|
30
|
+
|
|
31
|
+
**症状**:消费方用 webpack 构建时报一批 `Module not found`,并附带
|
|
32
|
+
|
|
33
|
+
```
|
|
34
|
+
BREAKING CHANGE: The request '@hzab/utils/src/upload/ossUpload' failed to resolve only because
|
|
35
|
+
it was resolved as fully specified … The extension in the request is mandatory for it to be fully specified.
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
**根因**:`"type": "module"` 让包内 `.js` 文件被 webpack 判为 **strict ESM**(`javascript/esm`,默认
|
|
39
|
+
`fullySpecified: true`)⇒ 这些文件里**所有省略扩展名的 import 都必须带扩展名**。而本仓源码大量使用
|
|
40
|
+
无扩展名 import(`@hzab/utils/src/upload/ossUpload`、`./formily-utils`、`dayjs/plugin/advancedFormat` …)。
|
|
41
|
+
|
|
42
|
+
**关键事实**:这个字段是**本仓迁移时新增的**——源仓各包 `package.json` **都没有** `type`,消费线既有的
|
|
43
|
+
老版本(`utils@1.1.6` / `form-render@1.7.17` / `list-render@1.12.1` …)也都没有。所以老消费方一直正常,
|
|
44
|
+
只有升级到本仓版本的项目才撞上(webpack 5.111 实测复现)。
|
|
45
|
+
|
|
46
|
+
**改动**:**12 个 src 直出包**移除该字段,恢复到与源仓一致的语义(webpack 回落到 `javascript/auto`,
|
|
47
|
+
无扩展名 import 照常解析)。**3 个 dist 发布包**(`biz-utils` / `formily-utils` / `data-model-core`)**保留**
|
|
48
|
+
该字段——它们的 `exports` 直接引用 `./dist/index.cjs` / `./dist/index.js`,而 tsup 的输出扩展名受此字段影响。
|
|
49
|
+
|
|
50
|
+
**验证**:`check-package` 20 包全绿;`pnpm build` 18/18;`pnpm typecheck` 27/27;playground 模块图冒烟
|
|
51
|
+
(171 模块)通过。产物命名:vite 包(`createLibraryViteConfig` 硬编码 `index.cjs`)不变;tsup 包 ESM 由
|
|
52
|
+
`index.js` 变为 `index.mjs`,但无任何 `exports`/`main` 引用它,`types: ./dist/index.d.ts` 仍在。
|
|
53
|
+
|
|
54
|
+
**消费方提示**:升级到本版本前若暂时无法升级,可在 webpack 配置加
|
|
55
|
+
`{ test: /\.m?js$/, include: /[\\/]node_modules[\\/]@hzab[\\/]/, resolve: { fullySpecified: false } }` 兜底。
|
|
56
|
+
- Updated dependencies [bb45682]
|
|
57
|
+
- @hzab/utils@1.1.9
|
|
58
|
+
- @hzab/form-render@1.7.21
|
|
59
|
+
|
|
60
|
+
## 0.1.6
|
|
61
|
+
|
|
62
|
+
### Patch Changes
|
|
63
|
+
|
|
64
|
+
- 0617135: 把源仓声明为 `peerDependencies` 的内部依赖整体回退(**12 处 / 7 个包**):由 `dependencies`
|
|
65
|
+
改为 `peerDependencies` + `devDependencies`。
|
|
66
|
+
|
|
67
|
+
**为什么**:把这类包声明为 `dependencies` 会让 pnpm 为依赖方单独解析出一份实例(其 peer
|
|
68
|
+
组合与消费方顶层那份不同),消费方在包根配置的模块级全局状态随之分裂:
|
|
69
|
+
|
|
70
|
+
- `@hzab/data-model`:axios `baseURL` / 401 路由守卫(`setAxios` / `setAxRequest` /
|
|
71
|
+
`setAxResponse`)对该包发出的请求**静默失效**——构建照常通过,只有运行期丢配置;
|
|
72
|
+
- `@hzab/utils`:`src/globalConfig.ts` 全局配置读写各持一份;
|
|
73
|
+
- `@hzab/form-render`:formily 全局组件注册表 / `formRenderPCGlobalServeConfig` 不同步。
|
|
74
|
+
|
|
75
|
+
**回归来源**:本仓迁移时按「跨包依赖统一改 `dependencies`」(`docs/iteration-publish-upgrade.md`
|
|
76
|
+
§13.7,动机是让 turbo `^build` 建边)把源仓的 peer 声明几乎全部改成了 deps。消费方实测:
|
|
77
|
+
`@hzab/utils` 降回 1.1.6 即恢复(1.1.6 声明为 peer)。
|
|
78
|
+
|
|
79
|
+
**turbo 建边不受影响**:`devDependencies` 同样让 turbo 建 `^build` 边——实测 `turbo run build
|
|
80
|
+
--dry` 中 `@hzab/list-render#build` 的 `Dependencies` 仍含全部 6 个 workspace 依赖,
|
|
81
|
+
`@hzab/data-model#build` 的 `Dependents` 含 `@hzab/utils#build`。
|
|
82
|
+
|
|
83
|
+
架构已固化(§6.6):`MODULE_SINGLETON_PACKAGES`(A 类,不可 dist 化)+ `PEER_REQUIRED_PACKAGES`
|
|
84
|
+
(B 类,不得进 `dependencies`)/ `checkPeerRequiredNotInDependencies()` 全仓拦截;源仓参照规则
|
|
85
|
+
见 `docs/source-sync.md` §2.1。
|
|
86
|
+
|
|
87
|
+
**peer 范围允许 1.x**(不强制升到 data-model 2.x):`@hzab/utils` 为 `>=1.2.0`(与 1.1.6 一致),
|
|
88
|
+
`@hzab/list-render` / `@hzab/list-render-mobile` / `@hzab/form-render-mobile` 为 `>=1.7.4`,其余
|
|
89
|
+
为本仓原有下限。装 `data-model` 1.8.x 的消费方无需升级即可平滑升级本包。
|
|
90
|
+
|
|
91
|
+
**消费方注意**:升级后请确认这些内部依赖在 `node_modules` 中只有**一份**(如
|
|
92
|
+
`pnpm why @hzab/data-model`)——多版本并存(如 1.8.8 与 2.0.x)会触发同样的静默失效,排查方法见
|
|
93
|
+
`docs/consumer-access.md` §7。
|
|
94
|
+
- Updated dependencies [0617135]
|
|
95
|
+
- @hzab/utils@1.1.8
|
|
96
|
+
- @hzab/form-render@1.7.20
|
|
2
97
|
|
|
3
98
|
chore: 本仓迁移版本首次发布(源码直出 `main: "src"` + 类型入口指向 `dist`)
|
|
4
99
|
|
package/README.md
ADDED
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
# @hzab/edit-table
|
|
2
|
+
|
|
3
|
+
可编辑表格:基于 `@silevis/reactgrid` 的单元格级编辑表格,支持批量提交、公式列、展开行与自定义单元格模板。
|
|
4
|
+
|
|
5
|
+
- Node.js ≥ 24
|
|
6
|
+
|
|
7
|
+
## 安装
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @hzab/edit-table
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
本包同时发布到**公共 npm**(`registry.npmjs.org`,public access)与企业私有源(ld / old)。默认源可直接安装,
|
|
14
|
+
无需额外配置;若团队要求走内网源,见[消费方接入指南 §2](../../../docs/consumer-access.md#2-可选改为从企业私有源安装)。
|
|
15
|
+
|
|
16
|
+
消费方需自备 peerDependencies:`@ant-design/icons`、`@hzab/form-render`、`@hzab/utils`、`@silevis/reactgrid`、`antd`、`react`、`react-dom`(本包不会随包安装)。
|
|
17
|
+
|
|
18
|
+
> **发布形态**:本包在本仓以**源码直出**方式发布——`main` 指向 `src`,由消费方打包器编译
|
|
19
|
+
> TypeScript 与 `.less` 样式;`@hzab/edit-table/src/*` 深路径同样可直接引用。随包发布的 `dist/` 仅用于
|
|
20
|
+
> 类型解析(`types` → `dist/index.d.ts`),不是运行时入口。消费方需要承担的编译责任见
|
|
21
|
+
> [消费方接入指南 §4](../../../docs/consumer-access.md#4-src-直出包消费方要承担的编译责任)。
|
|
22
|
+
|
|
23
|
+
## 快速开始
|
|
24
|
+
|
|
25
|
+
默认导出即组件(内部为 `forwardRef`):
|
|
26
|
+
|
|
27
|
+
```jsx
|
|
28
|
+
import { useMemo, useRef } from "react";
|
|
29
|
+
import CellEditTable from "@hzab/edit-table";
|
|
30
|
+
|
|
31
|
+
const columns = [
|
|
32
|
+
{ key: "name", title: "姓名", width: 120 },
|
|
33
|
+
{ key: "age", type: "Number", title: "年龄", width: 80 },
|
|
34
|
+
{ key: "birthday", type: "DatePicker", title: "生日", width: 160 },
|
|
35
|
+
{ key: "memo", type: "Input.TextArea", title: "备注", width: 200, nonEditable: true },
|
|
36
|
+
];
|
|
37
|
+
|
|
38
|
+
function Demo() {
|
|
39
|
+
const tableRef = useRef(null);
|
|
40
|
+
|
|
41
|
+
const dataSource = useMemo(
|
|
42
|
+
() => [
|
|
43
|
+
{ id: 1, name: "张三", age: 30, birthday: "1994-01-01" },
|
|
44
|
+
{ id: 2, name: "李四", age: 28, birthday: "1996-06-15" },
|
|
45
|
+
],
|
|
46
|
+
[],
|
|
47
|
+
);
|
|
48
|
+
|
|
49
|
+
return (
|
|
50
|
+
<CellEditTable
|
|
51
|
+
ref={tableRef}
|
|
52
|
+
rowKey="id"
|
|
53
|
+
columns={columns}
|
|
54
|
+
dataSource={dataSource}
|
|
55
|
+
onEditSubmit={async (rows) => {
|
|
56
|
+
// rows:本次变更后的整行对象数组(批量编辑时一次提交多行)
|
|
57
|
+
await saveRows(rows);
|
|
58
|
+
}}
|
|
59
|
+
onChange={(row) => console.log("单元格变更", row)}
|
|
60
|
+
getList={() => console.log("提交失败后重新拉取列表")}
|
|
61
|
+
/>
|
|
62
|
+
);
|
|
63
|
+
}
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## API
|
|
67
|
+
|
|
68
|
+
### 组件 Props
|
|
69
|
+
|
|
70
|
+
| 属性 | 类型 | 必须 | 默认值 | 说明 |
|
|
71
|
+
| ----------------- | ---------------------------------------- | ---- | ------- | -------------------------------------------------------------------------------- |
|
|
72
|
+
| `columns` | Array | 是 | - | 列定义,详见「columns 列配置」 |
|
|
73
|
+
| `dataSource` | Array | 是 | - | 数据源;元素需含 `rowKey` 指定的唯一字段 |
|
|
74
|
+
| `rowKey` | string | 否 | `"id"` | 唯一值字段名 |
|
|
75
|
+
| `onEditSubmit` | `(rows) => void \| Promise` | 否 | - | 编辑提交回调,入参为**整行对象数组**;抛错时会调用 `getList()` |
|
|
76
|
+
| `onChange` | `(row) => void` | 否 | - | 单个单元格变更后回调,入参为该行最新数据 |
|
|
77
|
+
| `getList` | `() => void` | 否 | - | 重新拉取列表;`onEditSubmit` 抛错时被调用 |
|
|
78
|
+
| `query` | Object | 否 | - | 列表查询参数;`query.pageNum` 变化时会清空行选中 |
|
|
79
|
+
| `loading` | boolean | 否 | - | 加载中;为真时渲染上一帧行数据并显示 `Spin` |
|
|
80
|
+
| `headerRowHeight` | number | 否 | `44` | 表头行高 |
|
|
81
|
+
| `rowHeight` | number | 否 | `44` | 数据行高 |
|
|
82
|
+
| `isExpand` | boolean | 否 | `false` | 是否在首列插入展开列,展开 `record.children` 子行 |
|
|
83
|
+
| `rowSelection` | Object | 否 | - | 行选择配置:`width`、`style`、`selectedRowKeys`、`onChange(keys, rows)` |
|
|
84
|
+
| `formulaConfig` | Object | 否 | - | 公式/计算列配置,详见下节 |
|
|
85
|
+
| `reactGridProps` | Object | 否 | `{}` | 透传给 `@silevis/reactgrid` 的 `ReactGrid`,另含本包扩展项(见下节) |
|
|
86
|
+
| `reactGridStyle` | Object | 否 | - | 外层容器 `div` 的行内样式 |
|
|
87
|
+
| `className` | string | 否 | - | 外层容器 `div` 的 className |
|
|
88
|
+
| `onRow` | `(record, rowIndex, colIndex) => Object` | 否 | - | 逐单元格回调,返回值会合并进该单元格定义(可覆盖 `text` / `value` / `style` 等) |
|
|
89
|
+
| `Slots` | Object | 否 | - | 插槽,详见「Slots」 |
|
|
90
|
+
|
|
91
|
+
### columns 列配置
|
|
92
|
+
|
|
93
|
+
`columns` 元素除自身字段外,会被展开进对应单元格定义。
|
|
94
|
+
|
|
95
|
+
| 字段 | 类型 | 说明 |
|
|
96
|
+
| ------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
97
|
+
| `key` | string | 对应数据字段名(即单元格 `columnId`) |
|
|
98
|
+
| `title` | string \| Function | 表头文案;为函数且返回 ReactElement 时按自定义表头组件渲染(自动包 `WidthWrapHoc`) |
|
|
99
|
+
| `width` | number | 列宽 |
|
|
100
|
+
| `type` | string | 单元格模板类型,默认 `"text"`。内置模板来自 `@hzab/form-render` 的 `antdComponents` 与 `customComponents`,另加本包的 `DatePicker.*` / `Input.*` / `TimePicker.*` 细分项(如 `Number`、`DatePicker`、`Input.TextArea`、`DatePicker.RangePicker`) |
|
|
101
|
+
| `nonEditable` | boolean | 该列不可编辑 |
|
|
102
|
+
| `onCell` | `(record, rowIndex, colIndex) => Object` | 逐单元格回调,返回值合并进单元格定义(优先级高于 `onRow`) |
|
|
103
|
+
| `cellProps` | Object | 直接合并进单元格定义的 props |
|
|
104
|
+
| `children` | Array | 多级表头 |
|
|
105
|
+
|
|
106
|
+
本包额外提供的内置模板名:`DatePicker.MonthPicker`、`DatePicker.QuarterPicker`、`DatePicker.RangePicker`、
|
|
107
|
+
`DatePicker.TimePicker`、`DatePicker.WeekPicker`、`DatePicker.YearPicker`、`Input.Password`、`Input.Search`、
|
|
108
|
+
`Input.TextArea`、`TimePicker.RangePicker`。
|
|
109
|
+
|
|
110
|
+
### `formulaConfig`:计算列
|
|
111
|
+
|
|
112
|
+
以**目标列的 `key`** 为键,声明该列的值与样式如何由整行数据算出:
|
|
113
|
+
|
|
114
|
+
```js
|
|
115
|
+
const formulaConfig = {
|
|
116
|
+
total: {
|
|
117
|
+
// 返回该列的显示值与值(text 与 value 用同一结果)
|
|
118
|
+
setCellData: (row) => Number(row.price || 0) * Number(row.count || 0),
|
|
119
|
+
// 返回单元格 style;入参为 setCellData 的结果,setCellData 缺省时回退整行
|
|
120
|
+
setCellStyle: (value) => (Number(value) > 1000 ? { background: "#fff1f0" } : undefined),
|
|
121
|
+
},
|
|
122
|
+
};
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
计算列会在**初始化渲染**与**每次单元格变更后**重算。
|
|
126
|
+
|
|
127
|
+
### `reactGridProps` 扩展项
|
|
128
|
+
|
|
129
|
+
除 `ReactGrid` 自身的 props(如 `enableFillHandle`、`enableRangeSelection`、`onSelectionChanged`,
|
|
130
|
+
参考 [@silevis/reactgrid 文档](https://reactgrid.com/))外,本包识别以下键:
|
|
131
|
+
|
|
132
|
+
| 键 | 类型 | 说明 |
|
|
133
|
+
| ------------------------- | ------------------------- | -------------------------------------------------------------------- |
|
|
134
|
+
| `customCellTemplates` | Object | 注册自定义单元格模板(`{ 模板名: 组件 }`),供 `columns[].type` 引用 |
|
|
135
|
+
| `highlights` | Array | 高亮单元格/区域;缺省时使用内部维护的高亮状态 |
|
|
136
|
+
| `isRowHighlights` | boolean | 为真时按行高亮(单元格 `columnId` 参与判断) |
|
|
137
|
+
| `onFocusLocationChanging` | `(cell, rows) => boolean` | 进入编辑态前回调;返回 `false` 阻止进入编辑 |
|
|
138
|
+
|
|
139
|
+
`_$actions`、`rowSelection`、`ExpandListTemplate` 三类内置列不会触发 `onFocusLocationChanging`。
|
|
140
|
+
|
|
141
|
+
### Slots
|
|
142
|
+
|
|
143
|
+
| 插槽 | 入参 | 说明 |
|
|
144
|
+
| ------------------ | ------------------------ | -------------- |
|
|
145
|
+
| `tableActionsSlot` | 单元格 props + `rowData` | 覆盖操作列渲染 |
|
|
146
|
+
| `actionPrefixSlot` | 同上 | 操作按钮左侧 |
|
|
147
|
+
| `actionCenterSlot` | 同上 | 操作按钮中间 |
|
|
148
|
+
| `actionSuffixSlot` | 同上 | 操作按钮右侧 |
|
|
149
|
+
|
|
150
|
+
### ref 方法
|
|
151
|
+
|
|
152
|
+
`ref.current` 暴露:
|
|
153
|
+
|
|
154
|
+
| 字段 | 说明 |
|
|
155
|
+
| ------ | ------------------------------------------ |
|
|
156
|
+
| `rows` | 当前表格行数据(`ReactGrid` 的 rows 结构) |
|
|
157
|
+
|
|
158
|
+
## 注意事项
|
|
159
|
+
|
|
160
|
+
- **提交粒度**:单次变更立即以「单行数组」调用 `onEditSubmit`;一次 `ReactGrid` 变更回调里含多行时按**批量**提交一次。
|
|
161
|
+
`onEditSubmit` 抛错会调用 `getList()` 回滚视图。
|
|
162
|
+
- **样式**:组件内已 `import "@silevis/reactgrid/styles.css"` 与 `./index.less`;src 直出模式下由消费方打包器编译这些样式。
|
|
163
|
+
- **与 `@hzab/list-render` 的关系**:两者互为 `peerDependencies`(来源仓的容器/扩展设计)。
|
|
164
|
+
本仓内同时安装时 `pnpm install` 会提示 `There are cyclic workspace dependencies: edit-table, list-render`,属预期,
|
|
165
|
+
见 [src-direct-compliance-tracking.md](../../../docs/archive/src-direct-compliance-tracking.md)。
|
|
166
|
+
|
|
167
|
+
## 相关文档
|
|
168
|
+
|
|
169
|
+
- [消费方接入指南](../../../docs/consumer-access.md)
|
|
170
|
+
- [CHANGELOG.md](./CHANGELOG.md)
|
package/package.json
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hzab/edit-table",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.8",
|
|
4
4
|
"private": false,
|
|
5
5
|
"src-direct": true,
|
|
6
|
-
"type": "module",
|
|
7
6
|
"description": "可编辑表格",
|
|
8
7
|
"license": "ISC",
|
|
9
8
|
"author": "CaiYansong",
|
|
@@ -22,15 +21,14 @@
|
|
|
22
21
|
],
|
|
23
22
|
"peerDependencies": {
|
|
24
23
|
"@ant-design/icons": ">=4.0.0",
|
|
24
|
+
"@hzab/form-render": ">=1.7.21",
|
|
25
|
+
"@hzab/utils": ">=1.1.10",
|
|
25
26
|
"@silevis/reactgrid": "^4.1.17",
|
|
26
27
|
"antd": ">=4.0.0",
|
|
27
28
|
"react": ">=16.8.0",
|
|
28
29
|
"react-dom": ">=16.8.0"
|
|
29
30
|
},
|
|
30
|
-
"dependencies": {
|
|
31
|
-
"@hzab/form-render": ">=1.7.17",
|
|
32
|
-
"@hzab/utils": ">=1.1.6"
|
|
33
|
-
},
|
|
31
|
+
"dependencies": {},
|
|
34
32
|
"devDependencies": {
|
|
35
33
|
"@ant-design/icons": "^4.8.0",
|
|
36
34
|
"@types/lodash": "^4.17.12",
|
|
@@ -47,9 +45,11 @@
|
|
|
47
45
|
"typescript": "^5.9.3",
|
|
48
46
|
"vite": "^8.0.0",
|
|
49
47
|
"vitest": "^4.1.10",
|
|
50
|
-
"@hzab/
|
|
48
|
+
"@hzab/utils": "^1.1.10",
|
|
51
49
|
"@hzab/eslint-config": "^0.0.0",
|
|
52
|
-
"@hzab/
|
|
50
|
+
"@hzab/vite-config": "^0.0.3-alpha.0",
|
|
51
|
+
"@hzab/typescript-config": "^0.0.0",
|
|
52
|
+
"@hzab/form-render": "^1.7.21"
|
|
53
53
|
},
|
|
54
54
|
"scripts": {
|
|
55
55
|
"build": "vite build && tsc -p tsconfig.build.json",
|