@capillarytech/blaze-ui 5.0.6 → 5.0.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/.npmrc +2 -0
- package/CapCondition/messages.d.ts +85 -0
- package/CapCondition/messages.d.ts.map +1 -0
- package/CapConditionPreview/MIGRATION_ANALYSIS.md +70 -0
- package/CapConditionPreview/README.md +40 -0
- package/CapConditionPreview/constants.d.ts +24 -0
- package/CapConditionPreview/constants.d.ts.map +1 -0
- package/CapConditionPreview/index.d.ts +7 -0
- package/CapConditionPreview/index.d.ts.map +1 -0
- package/CapConditionPreview/index.js +132 -184
- package/CapConditionPreview/index.js.map +1 -1
- package/CapConditionPreview/tests/USE_CASES_CapConditionPreview.md +65 -0
- package/CapConditionPreview/types.d.ts +82 -0
- package/CapConditionPreview/types.d.ts.map +1 -0
- package/CapListLayout/index.js +193 -25
- package/CapListLayout/index.js.map +1 -1
- package/CapNavigation/index.js +6 -7
- package/CapNavigation/index.js.map +1 -1
- package/CapSteps/Status.md +40 -0
- package/CapSteps/index.d.ts +30 -0
- package/CapSteps/index.d.ts.map +1 -0
- package/CapSteps/index.js +657 -24
- package/CapSteps/index.js.map +1 -1
- package/CapSteps/types.d.ts +26 -0
- package/CapSteps/types.d.ts.map +1 -0
- package/CapTab/README.md +406 -0
- package/CapTab/Status.md +104 -0
- package/CapTab/index.d.ts +1 -27
- package/CapTab/index.d.ts.map +1 -1
- package/CapTab/index.js +56 -7
- package/CapTab/index.js.map +1 -1
- package/CapTab/tests/USE_CASE_GAPS.md +143 -0
- package/CapTab/types.d.ts +29 -0
- package/CapTab/types.d.ts.map +1 -0
- package/CapTabV3/ANALYSIS.md +60 -0
- package/CapTabV3/README.md +156 -0
- package/CapTabV3/Status.md +52 -0
- package/CapTabV3/index.d.ts +9 -0
- package/CapTabV3/index.d.ts.map +1 -0
- package/CapTabV3/index.js +105 -67
- package/CapTabV3/index.js.map +1 -1
- package/CapTabV3/tests/USE_CASE_GAPS.md +149 -0
- package/CapTabV3/types.d.ts +28 -0
- package/CapTabV3/types.d.ts.map +1 -0
- package/CapTable/README.md +160 -0
- package/CapTable/Status.md +41 -0
- package/CapTable/index.d.ts +2 -21
- package/CapTable/index.d.ts.map +1 -1
- package/CapTable/index.js +193 -25
- package/CapTable/index.js.map +1 -1
- package/CapTable/types.d.ts +46 -0
- package/CapTable/types.d.ts.map +1 -0
- package/CapTable/utils.d.ts +24 -0
- package/CapTable/utils.d.ts.map +1 -0
- package/CapTimePicker/index.js +51 -129
- package/CapTimePicker/index.js.map +1 -1
- package/CapUserProfile/index.js +6 -7
- package/CapUserProfile/index.js.map +1 -1
- package/CapVerticalGroupTable/index.js +193 -25
- package/CapVerticalGroupTable/index.js.map +1 -1
- package/index.d.ts +7 -3
- package/index.d.ts.map +1 -1
- package/index.js +1271 -233
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/utils/getCapThemeConfig.d.ts.map +1 -1
- package/utils/index.js +9 -1
- package/utils/index.js.map +1 -1
- package/.DS_Store +0 -0
- package/CapTimePicker/index.d.ts +0 -11
- package/CapTimePicker/index.d.ts.map +0 -1
- package/CapTimePicker/types.d.ts +0 -95
- package/CapTimePicker/types.d.ts.map +0 -1
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
# CapTable Migration: Ant Design v3 → v6
|
|
2
|
+
|
|
3
|
+
## Migration Summary
|
|
4
|
+
|
|
5
|
+
CapTable has been successfully migrated from Ant Design v3 to v6. All style overrides have been moved to design tokens, and the component now uses v6-compatible APIs.
|
|
6
|
+
|
|
7
|
+
## Breaking Changes
|
|
8
|
+
|
|
9
|
+
### None
|
|
10
|
+
|
|
11
|
+
CapTable does not use any deprecated Ant Design APIs. The component was already using v6-compatible prop names.
|
|
12
|
+
|
|
13
|
+
## Style Migration
|
|
14
|
+
|
|
15
|
+
### Before (SCSS Overrides)
|
|
16
|
+
|
|
17
|
+
The component previously used SCSS overrides with `:global` and `.ant-` class selectors:
|
|
18
|
+
|
|
19
|
+
```scss
|
|
20
|
+
.cap-table-v2 {
|
|
21
|
+
:global {
|
|
22
|
+
.ant-table {
|
|
23
|
+
border: $border-width-1 solid $cap-g07;
|
|
24
|
+
.ant-table-thead > tr > th {
|
|
25
|
+
font-size: $font-size-s;
|
|
26
|
+
line-height: $spacing-16;
|
|
27
|
+
padding: $spacing-16 $spacing-24;
|
|
28
|
+
}
|
|
29
|
+
// ... more overrides
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### After (Design Tokens)
|
|
36
|
+
|
|
37
|
+
All style overrides have been migrated to design tokens in `getCapThemeConfig.ts`:
|
|
38
|
+
|
|
39
|
+
```typescript
|
|
40
|
+
Table: {
|
|
41
|
+
borderColor: styledVars.CAP_G07 || '#dfe2e7',
|
|
42
|
+
headerFontSize: remToPx(styledVars.FONT_SIZE_S, '0.857rem'), // 12px
|
|
43
|
+
headerLineHeight: remToPx(styledVars.SPACING_16, '1.142rem'), // 16px
|
|
44
|
+
headerPaddingBlock: remToPx(styledVars.SPACING_16, '1.142rem'), // 16px
|
|
45
|
+
headerPaddingInline: remToPx(styledVars.SPACING_24, '1.714rem'), // 24px
|
|
46
|
+
paddingBlock: remToPx(styledVars.SPACING_16, '1.142rem'), // 16px
|
|
47
|
+
paddingInline: remToPx(styledVars.SPACING_24, '1.714rem'), // 24px
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### Style Overrides Migrated
|
|
52
|
+
|
|
53
|
+
| Old Override | New Token Path | Value |
|
|
54
|
+
|-------------|----------------|-------|
|
|
55
|
+
| `.ant-table { border }` | `components.Table.borderColor` | `#dfe2e7` |
|
|
56
|
+
| `.ant-table-thead > tr > th { font-size }` | `components.Table.headerFontSize` | `12px` |
|
|
57
|
+
| `.ant-table-thead > tr > th { line-height }` | `components.Table.headerLineHeight` | `16px` |
|
|
58
|
+
| `.ant-table-thead > tr > th { padding }` | `components.Table.headerPaddingBlock`<br>`components.Table.headerPaddingInline` | `16px`<br>`24px` |
|
|
59
|
+
| `.ant-table-tbody > tr > td { padding }` | `components.Table.paddingBlock`<br>`components.Table.paddingInline` | `16px`<br>`24px` |
|
|
60
|
+
| `.ant-table-tbody > tr > td { border-bottom }` | `components.Table.borderColor` | `#dfe2e7` |
|
|
61
|
+
|
|
62
|
+
## API Changes
|
|
63
|
+
|
|
64
|
+
### Import Statement
|
|
65
|
+
|
|
66
|
+
**Before:**
|
|
67
|
+
```typescript
|
|
68
|
+
import { Table } from 'antd-v5';
|
|
69
|
+
import type { TableProps } from 'antd-v5';
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
**After:**
|
|
73
|
+
```typescript
|
|
74
|
+
import { Table } from 'antd';
|
|
75
|
+
import type { CapTableProps, OffsetLimit } from './types';
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### Loading State
|
|
79
|
+
|
|
80
|
+
The `showLoader` prop now uses Ant Design's built-in `loading` prop instead of a custom CSS pseudo-element.
|
|
81
|
+
|
|
82
|
+
**Before:**
|
|
83
|
+
- Custom CSS pseudo-element (`::after`) displayed "Loading..." text
|
|
84
|
+
- Required `:global` and `.ant-` class selectors
|
|
85
|
+
|
|
86
|
+
**After:**
|
|
87
|
+
- Uses Ant Design's native `loading` prop
|
|
88
|
+
- Displays Ant Design's standard loading spinner
|
|
89
|
+
- No custom CSS required
|
|
90
|
+
|
|
91
|
+
## Type Definitions
|
|
92
|
+
|
|
93
|
+
All types have been extracted to `types.ts`:
|
|
94
|
+
|
|
95
|
+
- `CapTableProps` - Main component props interface
|
|
96
|
+
- `OffsetLimit` - Pagination structure interface
|
|
97
|
+
|
|
98
|
+
## Validation
|
|
99
|
+
|
|
100
|
+
### ✅ Style Validation
|
|
101
|
+
|
|
102
|
+
```bash
|
|
103
|
+
grep -E '(:global|\.ant-)' components/CapTable/styles.scss
|
|
104
|
+
# Expected: Empty (no matches)
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
### ✅ Theme Config Validation
|
|
108
|
+
|
|
109
|
+
```bash
|
|
110
|
+
git diff components/utils/getCapThemeConfig.ts
|
|
111
|
+
# Expected: Shows additions under components.Table
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
### ✅ TypeScript Compilation
|
|
115
|
+
|
|
116
|
+
```bash
|
|
117
|
+
tsc --noEmit
|
|
118
|
+
# Expected: Exit code 0 (no errors)
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
## Usage
|
|
122
|
+
|
|
123
|
+
The component API remains unchanged:
|
|
124
|
+
|
|
125
|
+
```tsx
|
|
126
|
+
import CapTable from '@capillarytech/blaze-ui';
|
|
127
|
+
|
|
128
|
+
<CapTable
|
|
129
|
+
id="my-table"
|
|
130
|
+
dataSource={data}
|
|
131
|
+
infiniteScroll
|
|
132
|
+
showLoader={loading}
|
|
133
|
+
offset_limit={offsetLimit}
|
|
134
|
+
setPagination={handlePagination}
|
|
135
|
+
scroll={{ y: 400 }}
|
|
136
|
+
>
|
|
137
|
+
<Table.Column title="Name" dataIndex="name" />
|
|
138
|
+
<Table.Column title="Email" dataIndex="email" />
|
|
139
|
+
</CapTable>
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
## Files Changed
|
|
143
|
+
|
|
144
|
+
1. ✅ `components/CapTable/index.tsx` - Updated imports, removed type definitions
|
|
145
|
+
2. ✅ `components/CapTable/types.ts` - New file with extracted types
|
|
146
|
+
3. ✅ `components/CapTable/styles.scss` - Removed all `:global` and `.ant-` selectors
|
|
147
|
+
4. ✅ `components/utils/getCapThemeConfig.ts` - Added Table design tokens
|
|
148
|
+
5. ✅ `components/CapTable/README.md` - Migration documentation (this file)
|
|
149
|
+
|
|
150
|
+
## Migration Checklist
|
|
151
|
+
|
|
152
|
+
- [x] All `:global` keywords removed from styles.scss
|
|
153
|
+
- [x] All `.ant-` class selectors removed from styles.scss
|
|
154
|
+
- [x] Design tokens added to getCapThemeConfig.ts
|
|
155
|
+
- [x] Import changed from `antd-v5` to `antd`
|
|
156
|
+
- [x] Types extracted to types.ts
|
|
157
|
+
- [x] Loading state uses Ant Design's `loading` prop
|
|
158
|
+
- [x] TypeScript compiles without errors
|
|
159
|
+
- [x] No breaking API changes
|
|
160
|
+
- [x] Documentation updated
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
# Migration Status: CapTable
|
|
2
|
+
|
|
3
|
+
**Last Updated**: 2026-02-06 11:48:41
|
|
4
|
+
|
|
5
|
+
## Migration Steps
|
|
6
|
+
|
|
7
|
+
- [x] **Step 0**: Setup branch and remote tracking
|
|
8
|
+
- [x] **Step 1**: Migration Prompt 1 (Main migration)
|
|
9
|
+
- [x] **Step 2**: Migration Prompt 2 (Storybook support)
|
|
10
|
+
- [x] **Step 3**: Migration Prompt 3 (Unit tests)
|
|
11
|
+
- [x] **Step 4**: Migration Prompt 4 (Visual test cases)
|
|
12
|
+
- [x] **Step 5**: Linting (ESLint)
|
|
13
|
+
- [x] **Step 6**: Pre-build Validation
|
|
14
|
+
- [x] **Step 7**: Build blaze-ui
|
|
15
|
+
- [x] **Step 8**: Visual Testing
|
|
16
|
+
- [ ] **Step 9**: CSS Analysis (if mismatches found)
|
|
17
|
+
- [ ] **Step 9.5**: CSS Analysis Completed
|
|
18
|
+
- [] **Step 10**: Git Commit & Push to branch (pre-commit hook will run tests)
|
|
19
|
+
- [] **Step 11**: Create Pull Request
|
|
20
|
+
|
|
21
|
+
## Visual Testing Results
|
|
22
|
+
|
|
23
|
+
**Last Test**: 2026-02-06 11:48:41
|
|
24
|
+
**Maximum Mismatch**: 3.26%
|
|
25
|
+
|
|
26
|
+
### Mismatched Variants:
|
|
27
|
+
- default:3.15%
|
|
28
|
+
- infinite-scroll:2.90%
|
|
29
|
+
- bordered:2.78%
|
|
30
|
+
- selected-rows:2.78%
|
|
31
|
+
- long-list:2.89%
|
|
32
|
+
- custom-scroll:3.26%
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
## CSS Fixes Applied
|
|
36
|
+
|
|
37
|
+
_No CSS fixes applied yet._
|
|
38
|
+
|
|
39
|
+
## Notes
|
|
40
|
+
|
|
41
|
+
_No notes yet._
|
package/CapTable/index.d.ts
CHANGED
|
@@ -1,25 +1,6 @@
|
|
|
1
|
-
import type { TableProps } from 'antd-v5';
|
|
2
1
|
import React from 'react';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
limit: number;
|
|
6
|
-
[key: string]: unknown;
|
|
7
|
-
}
|
|
8
|
-
export interface CapTableProps extends Omit<TableProps, 'pagination' | 'scroll'> {
|
|
9
|
-
id: string;
|
|
10
|
-
className?: string;
|
|
11
|
-
children?: React.ReactNode;
|
|
12
|
-
infiniteScroll?: boolean;
|
|
13
|
-
pagination?: TableProps['pagination'] | false;
|
|
14
|
-
dataSource?: TableProps['dataSource'];
|
|
15
|
-
offset_limit?: OffsetLimit;
|
|
16
|
-
setPagination?: (pagination: OffsetLimit) => void;
|
|
17
|
-
scroll?: {
|
|
18
|
-
x?: number | string;
|
|
19
|
-
y?: number | string;
|
|
20
|
-
};
|
|
21
|
-
showLoader?: boolean;
|
|
22
|
-
}
|
|
2
|
+
import type { CapTableProps } from './types';
|
|
3
|
+
export type { CapTableProps, OffsetLimit } from './types';
|
|
23
4
|
declare const _default: React.FC<import("react-intl").WithIntlProps<CapTableProps & import("react-intl").WrappedComponentProps>> & {
|
|
24
5
|
WrappedComponent: React.ComponentType<CapTableProps & import("react-intl").WrappedComponentProps>;
|
|
25
6
|
};
|
package/CapTable/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapTable/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapTable/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAKjF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAQ7C,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;;;;AAyK1D,wBAAwD"}
|
package/CapTable/index.js
CHANGED
|
@@ -904,7 +904,7 @@ var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ = __webpack_require__(31601);
|
|
|
904
904
|
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(76314);
|
|
905
905
|
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);
|
|
906
906
|
// Module
|
|
907
|
-
___CSS_LOADER_EXPORT___.push([module.id, `.cap-table-v2 .ant-table{border:.071rem solid #dfe2e7}.cap-table-v2 .ant-table .ant-table-thead>tr>th{font-size:.857rem;line-height:1.142rem;text-align:left;padding:1.142rem 1.714rem}.cap-table-v2 .ant-table .ant-table-thead>tr>th .ant-table-column-sorter{vertical-align:unset}.cap-table-v2 .ant-table .ant-table-tbody>tr>td{padding:1.142rem 1.714rem;border-bottom:.071rem solid #dfe2e7}.cap-table-v2 .ant-table .ant-table-tbody>tr:last-child>td{border-bottom:none}.cap-table-v2
|
|
907
|
+
___CSS_LOADER_EXPORT___.push([module.id, `.cap-table-v2{width:100%}.cap-table-v2 .ant-table-tbody .ant-table-row.ant-table-row-selected>.ant-table-cell{background:#fafafa}.cap-table-v2 .ant-table-tbody .ant-table-row.ant-table-row-selected:hover>.ant-table-cell{background:#faf9f4}.cap-table-v2 .ant-table{border:.071rem solid #dfe2e7}.cap-table-v2 .ant-table .ant-table-thead>tr>th{font-size:.857rem;line-height:1.142rem;text-align:left;padding:1.142rem 1.714rem}.cap-table-v2 .ant-table .ant-table-thead>tr>th .ant-table-column-sorter{vertical-align:unset}.cap-table-v2 .ant-table .ant-table-tbody>tr>td{padding:1.142rem 1.714rem;border-bottom:.071rem solid #dfe2e7}.cap-table-v2 .ant-table .ant-table-tbody>tr:last-child>td{border-bottom:none}.cap-table-v2.show-loader .ant-table-body>table>tbody::after{content:"Loading...";display:flex;justify-content:center;position:absolute;width:100%;align-items:center;height:4.286rem;text-align:center;font-size:1.143rem;color:cap-g04;border-top:.071rem solid #dfe2e7}`, ""]);
|
|
908
908
|
// Exports
|
|
909
909
|
___CSS_LOADER_EXPORT___.locals = {
|
|
910
910
|
"cap-table-v2": `cap-table-v2`,
|
|
@@ -1004,6 +1004,123 @@ module.exports = function (list, options) {
|
|
|
1004
1004
|
};
|
|
1005
1005
|
};
|
|
1006
1006
|
|
|
1007
|
+
/***/ }),
|
|
1008
|
+
|
|
1009
|
+
/***/ 99394:
|
|
1010
|
+
/***/ ((__unused_webpack_module, exports) => {
|
|
1011
|
+
|
|
1012
|
+
"use strict";
|
|
1013
|
+
|
|
1014
|
+
|
|
1015
|
+
exports.__esModule = true;
|
|
1016
|
+
exports.getFilterCheckAllLocale = getFilterCheckAllLocale;
|
|
1017
|
+
exports.transformColumns = transformColumns;
|
|
1018
|
+
exports.transformPagination = transformPagination;
|
|
1019
|
+
exports.transformRowSelection = transformRowSelection;
|
|
1020
|
+
const _excluded = ["position"],
|
|
1021
|
+
_excluded2 = ["filterDropdownOpen", "onFilterDropdownOpenChange"],
|
|
1022
|
+
_excluded3 = ["onSelectInvert", "onChange"];
|
|
1023
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
1024
|
+
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
1025
|
+
/**
|
|
1026
|
+
* Transform deprecated pagination.position to pagination.placement
|
|
1027
|
+
*/
|
|
1028
|
+
function transformPagination(pagination) {
|
|
1029
|
+
if (!pagination || pagination === false) return pagination;
|
|
1030
|
+
const _ref = pagination,
|
|
1031
|
+
{
|
|
1032
|
+
position
|
|
1033
|
+
} = _ref,
|
|
1034
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
1035
|
+
if (position && Array.isArray(position)) {
|
|
1036
|
+
// Map position array to placement (use first position as placement)
|
|
1037
|
+
const positionToPlacement = {
|
|
1038
|
+
topLeft: 'topLeft',
|
|
1039
|
+
topCenter: 'topLeft',
|
|
1040
|
+
topRight: 'topRight',
|
|
1041
|
+
bottomLeft: 'bottomLeft',
|
|
1042
|
+
bottomCenter: 'bottomLeft',
|
|
1043
|
+
bottomRight: 'bottomRight'
|
|
1044
|
+
};
|
|
1045
|
+
const placement = positionToPlacement[position[0]] || 'bottomRight';
|
|
1046
|
+
return _extends({}, rest, {
|
|
1047
|
+
position: [placement]
|
|
1048
|
+
});
|
|
1049
|
+
}
|
|
1050
|
+
return pagination;
|
|
1051
|
+
}
|
|
1052
|
+
|
|
1053
|
+
/**
|
|
1054
|
+
* Transform deprecated column props:
|
|
1055
|
+
* - filterDropdownOpen → filterDropdownProps.open
|
|
1056
|
+
* - onFilterDropdownOpenChange → filterDropdownProps.onOpenChange
|
|
1057
|
+
* - filterCheckall → locale.filterCheckAll (handled at table level)
|
|
1058
|
+
*/
|
|
1059
|
+
function transformColumns(columns) {
|
|
1060
|
+
if (!columns) return columns;
|
|
1061
|
+
return columns.map(column => {
|
|
1062
|
+
const _ref2 = column,
|
|
1063
|
+
{
|
|
1064
|
+
filterDropdownOpen,
|
|
1065
|
+
onFilterDropdownOpenChange
|
|
1066
|
+
} = _ref2,
|
|
1067
|
+
rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
|
|
1068
|
+
const transformed = _extends({}, rest);
|
|
1069
|
+
|
|
1070
|
+
// Transform filterDropdownOpen and onFilterDropdownOpenChange to filterDropdownProps
|
|
1071
|
+
if (filterDropdownOpen !== undefined || onFilterDropdownOpenChange !== undefined) {
|
|
1072
|
+
transformed.filterDropdownProps = _extends({}, transformed.filterDropdownProps, filterDropdownOpen !== undefined && {
|
|
1073
|
+
open: filterDropdownOpen
|
|
1074
|
+
}, onFilterDropdownOpenChange !== undefined && {
|
|
1075
|
+
onOpenChange: onFilterDropdownOpenChange
|
|
1076
|
+
});
|
|
1077
|
+
}
|
|
1078
|
+
return transformed;
|
|
1079
|
+
});
|
|
1080
|
+
}
|
|
1081
|
+
|
|
1082
|
+
/**
|
|
1083
|
+
* Transform deprecated rowSelection.onSelectInvert to onChange
|
|
1084
|
+
*/
|
|
1085
|
+
function transformRowSelection(rowSelection) {
|
|
1086
|
+
if (!rowSelection) return rowSelection;
|
|
1087
|
+
const _ref3 = rowSelection,
|
|
1088
|
+
{
|
|
1089
|
+
onSelectInvert,
|
|
1090
|
+
onChange
|
|
1091
|
+
} = _ref3,
|
|
1092
|
+
rest = _objectWithoutPropertiesLoose(_ref3, _excluded3);
|
|
1093
|
+
if (onSelectInvert && !onChange) {
|
|
1094
|
+
// Wrap onSelectInvert in onChange
|
|
1095
|
+
return _extends({}, rest, {
|
|
1096
|
+
onChange: selectedRowKeys => {
|
|
1097
|
+
onSelectInvert(selectedRowKeys);
|
|
1098
|
+
}
|
|
1099
|
+
});
|
|
1100
|
+
}
|
|
1101
|
+
return _extends({}, rest, {
|
|
1102
|
+
onChange
|
|
1103
|
+
});
|
|
1104
|
+
}
|
|
1105
|
+
|
|
1106
|
+
/**
|
|
1107
|
+
* Check if any column has deprecated filterCheckall and return locale override
|
|
1108
|
+
*/
|
|
1109
|
+
function getFilterCheckAllLocale(columns) {
|
|
1110
|
+
if (!columns) return undefined;
|
|
1111
|
+
for (const column of columns) {
|
|
1112
|
+
const {
|
|
1113
|
+
filterCheckall
|
|
1114
|
+
} = column;
|
|
1115
|
+
if (filterCheckall !== undefined) {
|
|
1116
|
+
return {
|
|
1117
|
+
filterCheckAll: filterCheckall
|
|
1118
|
+
};
|
|
1119
|
+
}
|
|
1120
|
+
}
|
|
1121
|
+
return undefined;
|
|
1122
|
+
}
|
|
1123
|
+
|
|
1007
1124
|
/***/ })
|
|
1008
1125
|
|
|
1009
1126
|
/******/ });
|
|
@@ -1094,12 +1211,14 @@ var _lodash = __webpack_require__(42551);
|
|
|
1094
1211
|
var _react = _interopRequireWildcard(__webpack_require__(9206));
|
|
1095
1212
|
var _LocaleHoc = _interopRequireDefault(__webpack_require__(39879));
|
|
1096
1213
|
var _styles = _interopRequireDefault(__webpack_require__(40845));
|
|
1214
|
+
var _utils = __webpack_require__(99394);
|
|
1097
1215
|
var _jsxRuntime = __webpack_require__(74848);
|
|
1098
|
-
const _excluded = ["id", "className", "children", "infiniteScroll", "pagination", "dataSource", "offset_limit", "setPagination", "scroll", "showLoader"];
|
|
1216
|
+
const _excluded = ["id", "className", "children", "infiniteScroll", "virtual", "pagination", "dataSource", "offset_limit", "setPagination", "scroll", "showLoader", "columns", "rowSelection", "locale"];
|
|
1099
1217
|
/**
|
|
1100
1218
|
* CapTable - Migrated to Ant Design v5
|
|
1101
1219
|
* A table component that supports:
|
|
1102
|
-
* - Infinite scrolling with
|
|
1220
|
+
* - Infinite scrolling with manual scroll event handling
|
|
1221
|
+
* - Optional virtual scrolling for large datasets (requires explicit column widths)
|
|
1103
1222
|
* - Sequential data loading
|
|
1104
1223
|
* - Optimized scroll performance
|
|
1105
1224
|
*/
|
|
@@ -1108,7 +1227,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
|
|
|
1108
1227
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
1109
1228
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
1110
1229
|
const SCROLL_THRESHOLD = 80; // Percentage of scroll to trigger load
|
|
1111
|
-
const
|
|
1230
|
+
const THROTTLE_DELAY = 50; // ms to wait between scroll events (matching original cap-ui-library)
|
|
1112
1231
|
const DEFAULT_SCROLL_HEIGHT = 400;
|
|
1113
1232
|
const CapTable = _ref => {
|
|
1114
1233
|
let {
|
|
@@ -1116,27 +1235,43 @@ const CapTable = _ref => {
|
|
|
1116
1235
|
className,
|
|
1117
1236
|
children,
|
|
1118
1237
|
infiniteScroll,
|
|
1238
|
+
virtual,
|
|
1239
|
+
pagination: _pagination,
|
|
1119
1240
|
dataSource,
|
|
1120
1241
|
offset_limit,
|
|
1121
1242
|
setPagination,
|
|
1122
1243
|
scroll,
|
|
1123
|
-
showLoader
|
|
1244
|
+
showLoader,
|
|
1245
|
+
columns,
|
|
1246
|
+
rowSelection,
|
|
1247
|
+
locale
|
|
1124
1248
|
} = _ref,
|
|
1125
1249
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
1126
1250
|
const scrollRef = (0, _react.useRef)(null);
|
|
1127
1251
|
const [hasMore, setHasMore] = (0, _react.useState)(true);
|
|
1128
|
-
|
|
1252
|
+
|
|
1253
|
+
// Transform deprecated props
|
|
1254
|
+
const transformedColumns = (0, _react.useMemo)(() => (0, _utils.transformColumns)(columns), [columns]);
|
|
1255
|
+
const transformedRowSelection = (0, _react.useMemo)(() => (0, _utils.transformRowSelection)(rowSelection), [rowSelection]);
|
|
1256
|
+
const transformedPagination = (0, _react.useMemo)(() => (0, _utils.transformPagination)(_pagination), [_pagination]);
|
|
1257
|
+
const filterCheckAllLocale = (0, _react.useMemo)(() => (0, _utils.getFilterCheckAllLocale)(columns), [columns]);
|
|
1258
|
+
|
|
1259
|
+
// Merge locale with filterCheckAll if needed
|
|
1260
|
+
const mergedLocale = (0, _react.useMemo)(() => {
|
|
1261
|
+
if (!filterCheckAllLocale) return locale;
|
|
1262
|
+
return _extends({}, locale, filterCheckAllLocale);
|
|
1263
|
+
}, [locale, filterCheckAllLocale]);
|
|
1129
1264
|
const loadMore = (0, _react.useCallback)(() => {
|
|
1130
1265
|
if (!showLoader && hasMore && setPagination && offset_limit) {
|
|
1131
|
-
|
|
1266
|
+
// Increment offset by limit (matching original cap-ui-library behavior)
|
|
1267
|
+
const nextOffset = offset_limit.offset + (offset_limit.limit || 10);
|
|
1132
1268
|
const newOffsetLimit = _extends({}, offset_limit, {
|
|
1133
1269
|
offset: nextOffset
|
|
1134
1270
|
});
|
|
1135
|
-
currentOffsetRef.current = nextOffset;
|
|
1136
1271
|
setPagination(newOffsetLimit);
|
|
1137
1272
|
}
|
|
1138
1273
|
}, [showLoader, hasMore, setPagination, offset_limit]);
|
|
1139
|
-
const handleScroll = (0, _react.useCallback)((0, _lodash.
|
|
1274
|
+
const handleScroll = (0, _react.useCallback)((0, _lodash.throttle)(event => {
|
|
1140
1275
|
const target = event.target;
|
|
1141
1276
|
if (!target || !infiniteScroll || !hasMore || showLoader) return;
|
|
1142
1277
|
const scrollTop = Math.ceil(target.scrollTop);
|
|
@@ -1146,7 +1281,7 @@ const CapTable = _ref => {
|
|
|
1146
1281
|
if (scrolledPercentage >= SCROLL_THRESHOLD) {
|
|
1147
1282
|
loadMore();
|
|
1148
1283
|
}
|
|
1149
|
-
},
|
|
1284
|
+
}, THROTTLE_DELAY), [infiniteScroll, showLoader, hasMore, loadMore]);
|
|
1150
1285
|
|
|
1151
1286
|
// Setup scroll listener and handle initial load
|
|
1152
1287
|
(0, _react.useEffect)(() => {
|
|
@@ -1159,10 +1294,13 @@ const CapTable = _ref => {
|
|
|
1159
1294
|
passive: true
|
|
1160
1295
|
});
|
|
1161
1296
|
|
|
1162
|
-
// Check if initial load needed
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1297
|
+
// Check if initial load needed (matching original cap-ui-library behavior)
|
|
1298
|
+
// Only trigger if: dataSource >= limit AND content doesn't overflow scroll area
|
|
1299
|
+
const limit = (offset_limit == null ? void 0 : offset_limit.limit) || 10;
|
|
1300
|
+
const hasEnoughData = dataSource && dataSource.length >= limit;
|
|
1301
|
+
const scrollY = scroll != null && scroll.y ? Number(scroll.y) : 0;
|
|
1302
|
+
const isNotOverflowing = scrollY && tableBody.scrollHeight <= scrollY;
|
|
1303
|
+
if (hasEnoughData && isNotOverflowing && !showLoader && hasMore) {
|
|
1166
1304
|
loadMore();
|
|
1167
1305
|
}
|
|
1168
1306
|
|
|
@@ -1172,31 +1310,61 @@ const CapTable = _ref => {
|
|
|
1172
1310
|
(_scrollRef$current = scrollRef.current) == null || _scrollRef$current.removeEventListener('scroll', handleScroll);
|
|
1173
1311
|
handleScroll.cancel();
|
|
1174
1312
|
};
|
|
1175
|
-
}, [id, handleScroll, showLoader, hasMore, loadMore]);
|
|
1313
|
+
}, [id, handleScroll, showLoader, hasMore, loadMore, dataSource, offset_limit, scroll]);
|
|
1176
1314
|
|
|
1177
|
-
// Handle data changes
|
|
1315
|
+
// Handle data changes - reset hasMore when data changes
|
|
1178
1316
|
(0, _react.useEffect)(() => {
|
|
1179
|
-
|
|
1180
|
-
currentOffsetRef.current = 0;
|
|
1181
|
-
setHasMore(true);
|
|
1182
|
-
} else {
|
|
1183
|
-
setHasMore(true);
|
|
1184
|
-
}
|
|
1317
|
+
setHasMore(true);
|
|
1185
1318
|
}, [dataSource]);
|
|
1186
1319
|
const tableClassName = (0, _classnames.default)(_styles.default['cap-table-v2'], className, {
|
|
1187
1320
|
[_styles.default['show-loader']]: showLoader
|
|
1188
1321
|
});
|
|
1322
|
+
|
|
1323
|
+
// Calculate scroll.x for virtual tables if not explicitly provided
|
|
1324
|
+
// Virtual tables require a numeric scroll.x to calculate row widths correctly
|
|
1325
|
+
const scrollX = (0, _react.useMemo)(() => {
|
|
1326
|
+
// If explicitly provided, use that value
|
|
1327
|
+
if ((scroll == null ? void 0 : scroll.x) !== undefined) {
|
|
1328
|
+
return scroll.x;
|
|
1329
|
+
}
|
|
1330
|
+
|
|
1331
|
+
// For virtual tables, calculate total width from column widths
|
|
1332
|
+
if (virtual && transformedColumns) {
|
|
1333
|
+
const totalWidth = transformedColumns.reduce((sum, col) => {
|
|
1334
|
+
if (typeof col.width === 'number') {
|
|
1335
|
+
return sum + col.width;
|
|
1336
|
+
}
|
|
1337
|
+
if (typeof col.width === 'string') {
|
|
1338
|
+
const parsed = parseInt(col.width, 10);
|
|
1339
|
+
return sum + (isNaN(parsed) ? 0 : parsed);
|
|
1340
|
+
}
|
|
1341
|
+
return sum;
|
|
1342
|
+
}, 0);
|
|
1343
|
+
|
|
1344
|
+
// Warn in development if columns don't have widths
|
|
1345
|
+
if (totalWidth === 0 && "production" === 'development') // removed by dead control flow
|
|
1346
|
+
{}
|
|
1347
|
+
return totalWidth > 0 ? totalWidth : undefined;
|
|
1348
|
+
}
|
|
1349
|
+
return undefined;
|
|
1350
|
+
}, [scroll == null ? void 0 : scroll.x, virtual, transformedColumns]);
|
|
1351
|
+
|
|
1352
|
+
// Use transformed pagination or false for infinite scroll
|
|
1353
|
+
const finalPagination = infiniteScroll ? false : transformedPagination;
|
|
1189
1354
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antdV.Table, _extends({
|
|
1190
1355
|
id: id,
|
|
1191
1356
|
className: tableClassName,
|
|
1192
1357
|
dataSource: dataSource,
|
|
1193
|
-
|
|
1358
|
+
columns: transformedColumns,
|
|
1359
|
+
rowSelection: transformedRowSelection,
|
|
1360
|
+
pagination: finalPagination,
|
|
1361
|
+
locale: mergedLocale,
|
|
1194
1362
|
scroll: {
|
|
1195
|
-
x:
|
|
1363
|
+
x: scrollX,
|
|
1196
1364
|
y: (scroll == null ? void 0 : scroll.y) || DEFAULT_SCROLL_HEIGHT,
|
|
1197
1365
|
scrollToFirstRowOnChange: false
|
|
1198
1366
|
},
|
|
1199
|
-
virtual:
|
|
1367
|
+
virtual: virtual
|
|
1200
1368
|
}, rest, {
|
|
1201
1369
|
children: children
|
|
1202
1370
|
}));
|