yootd 0.2.43 → 0.2.45
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/dist/table/index.d.ts +2 -0
- package/dist/table/index.js +38 -2
- package/dist/table/index.scss +25 -0
- package/package.json +1 -1
package/dist/table/index.d.ts
CHANGED
@@ -15,6 +15,8 @@ export interface TableProps<T = AnyObject> extends Omit<AntTableProps<T>, 'colum
|
|
15
15
|
headerTextColor?: string;
|
16
16
|
showSetting?: boolean;
|
17
17
|
persistKeys?: string;
|
18
|
+
striped?: boolean;
|
19
|
+
stripedColor?: string[];
|
18
20
|
}
|
19
21
|
export interface ColumnType<T = AnyObject> extends Omit<AntColumnType<T>, 'key'> {
|
20
22
|
key: React.Key;
|
package/dist/table/index.js
CHANGED
@@ -3,7 +3,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
3
3
|
import _typeof from "@babel/runtime/helpers/esm/typeof";
|
4
4
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
5
5
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
6
|
-
var _excluded = ["type", "showSetting", "columns", "components", "persistKeys", "headerBgColor", "headerTextColor"];
|
6
|
+
var _excluded = ["type", "showSetting", "columns", "components", "persistKeys", "headerBgColor", "headerTextColor", "striped", "stripedColor"];
|
7
7
|
import { Table as AntTable } from 'antd';
|
8
8
|
import React, { forwardRef, useEffect, useMemo, useState } from 'react';
|
9
9
|
import { PrimaryHeaderRow } from "./components/primary-header-row";
|
@@ -13,8 +13,10 @@ import { PrimaryTBodyRow } from "./components/primary-tbody-row";
|
|
13
13
|
// import { RefTable } from 'antd/es/table/interface';
|
14
14
|
|
15
15
|
import "./index.scss";
|
16
|
+
import { useBem } from "../hooks/useBem";
|
16
17
|
export var TableRowContext = /*#__PURE__*/React.createContext({});
|
17
18
|
var InternalTable = function InternalTable(_ref, ref) {
|
19
|
+
var _rest$style;
|
18
20
|
var type = _ref.type,
|
19
21
|
showSetting = _ref.showSetting,
|
20
22
|
columns = _ref.columns,
|
@@ -22,6 +24,10 @@ var InternalTable = function InternalTable(_ref, ref) {
|
|
22
24
|
persistKeys = _ref.persistKeys,
|
23
25
|
headerBgColor = _ref.headerBgColor,
|
24
26
|
headerTextColor = _ref.headerTextColor,
|
27
|
+
_ref$striped = _ref.striped,
|
28
|
+
striped = _ref$striped === void 0 ? false : _ref$striped,
|
29
|
+
_ref$stripedColor = _ref.stripedColor,
|
30
|
+
stripedColor = _ref$stripedColor === void 0 ? ['#F0F9FF', '#FFFFFF'] : _ref$stripedColor,
|
25
31
|
rest = _objectWithoutProperties(_ref, _excluded);
|
26
32
|
var _useState = useState([]),
|
27
33
|
_useState2 = _slicedToArray(_useState, 2),
|
@@ -139,6 +145,7 @@ var InternalTable = function InternalTable(_ref, ref) {
|
|
139
145
|
console.error(error);
|
140
146
|
}
|
141
147
|
}, [persistKeys]);
|
148
|
+
var bem = useBem('table');
|
142
149
|
return /*#__PURE__*/React.createElement(TableRowContext.Provider, {
|
143
150
|
value: {
|
144
151
|
columns: innerColumns,
|
@@ -154,7 +161,36 @@ var InternalTable = function InternalTable(_ref, ref) {
|
|
154
161
|
}, /*#__PURE__*/React.createElement(AntTable, _extends({}, rest, {
|
155
162
|
ref: ref,
|
156
163
|
columns: filterColumns(innerColumns, keys),
|
157
|
-
components: _components
|
164
|
+
components: _components,
|
165
|
+
style: _objectSpread(_objectSpread({}, (_rest$style = rest.style) !== null && _rest$style !== void 0 ? _rest$style : {}), {}, {
|
166
|
+
// @ts-expect-error
|
167
|
+
'--even-striped-color': stripedColor === null || stripedColor === void 0 ? void 0 : stripedColor[1],
|
168
|
+
'--odd-striped-color': stripedColor === null || stripedColor === void 0 ? void 0 : stripedColor[0]
|
169
|
+
}),
|
170
|
+
rowClassName: striped ? function (_record, index) {
|
171
|
+
if (index == null || !striped) return '';
|
172
|
+
if (index % 2 === 0) {
|
173
|
+
return "".concat(bem.b('tbody').b('row').m('striped').m('even'));
|
174
|
+
} else {
|
175
|
+
return "".concat(bem.b('tbody').b('row').m('striped').m('odd'));
|
176
|
+
}
|
177
|
+
} : undefined
|
178
|
+
// onRow={(_, index?: number) => {
|
179
|
+
// if (index == null || !striped) return {};
|
180
|
+
// if (index % 2 === 0) {
|
181
|
+
// return {
|
182
|
+
// style: {
|
183
|
+
// backgroundColor: stripedColor?.[0],
|
184
|
+
// },
|
185
|
+
// };
|
186
|
+
// } else {
|
187
|
+
// return {
|
188
|
+
// style: {
|
189
|
+
// backgroundColor: stripedColor?.[1],
|
190
|
+
// },
|
191
|
+
// };
|
192
|
+
// }
|
193
|
+
// }}
|
158
194
|
})));
|
159
195
|
};
|
160
196
|
var Table = /*#__PURE__*/forwardRef(InternalTable);
|
package/dist/table/index.scss
CHANGED
@@ -15,6 +15,7 @@
|
|
15
15
|
// }
|
16
16
|
// }
|
17
17
|
|
18
|
+
|
18
19
|
&-header {
|
19
20
|
&:hover {
|
20
21
|
&__icon {
|
@@ -30,4 +31,28 @@
|
|
30
31
|
}
|
31
32
|
}
|
32
33
|
}
|
34
|
+
&-tbody {
|
35
|
+
&-row {
|
36
|
+
&--striped {
|
37
|
+
&--even {
|
38
|
+
background-color: var(--even-striped-color);
|
39
|
+
.ant-table-cell-fix-right{
|
40
|
+
background-color: var(--even-striped-color) !important;
|
41
|
+
}
|
42
|
+
.ant-table-cell-fix-left{
|
43
|
+
background-color: var(--even-striped-color) !important;
|
44
|
+
}
|
45
|
+
}
|
46
|
+
&--odd {
|
47
|
+
background-color: var(--odd-striped-color);
|
48
|
+
.ant-table-cell-fix-right{
|
49
|
+
background-color: var(--odd-striped-color) !important;
|
50
|
+
}
|
51
|
+
.ant-table-cell-fix-left{
|
52
|
+
background-color: var(--odd-striped-color) !important;
|
53
|
+
}
|
54
|
+
}
|
55
|
+
}
|
56
|
+
}
|
57
|
+
}
|
33
58
|
}
|