@onesy/ui-react 1.0.143 → 1.0.145
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/TableCell/TableCell.js +63 -28
- package/TableHead/TableHead.js +65 -28
- package/TimelineItem/TimelineItem.d.ts +3 -3
- package/TimelineItem/TimelineItem.js +5 -5
- package/esm/TableCell/TableCell.js +62 -28
- package/esm/TableHead/TableHead.js +64 -28
- package/esm/TimelineItem/TimelineItem.js +5 -5
- package/esm/index.js +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
package/TableCell/TableCell.js
CHANGED
|
@@ -129,7 +129,6 @@ const useStyle = (0, _styleReact.style)(theme => ({
|
|
|
129
129
|
});
|
|
130
130
|
const TableCell = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
|
|
131
131
|
const theme = (0, _styleReact.useOnesyTheme)();
|
|
132
|
-
const windowWidth = (0, _useResize.default)();
|
|
133
132
|
const l = theme.l;
|
|
134
133
|
const props = _react.default.useMemo(() => {
|
|
135
134
|
var _theme$ui, _theme$ui2;
|
|
@@ -181,12 +180,15 @@ const TableCell = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
|
|
|
181
180
|
const {
|
|
182
181
|
classes
|
|
183
182
|
} = useStyle();
|
|
183
|
+
const windowWidth = (0, _useResize.default)();
|
|
184
184
|
const [root, setRoot] = _react.default.useState();
|
|
185
185
|
const [stickyActive, setStickyActive] = _react.default.useState(false);
|
|
186
186
|
const [offset, setOffset] = _react.default.useState(0);
|
|
187
187
|
const [sortedBy, setSortedBy] = _react.default.useState(sortedByDefault);
|
|
188
188
|
const refs = {
|
|
189
|
-
root: _react.default.useRef(undefined)
|
|
189
|
+
root: _react.default.useRef(undefined),
|
|
190
|
+
offset: _react.default.useRef(null),
|
|
191
|
+
observer: _react.default.useRef(null)
|
|
190
192
|
};
|
|
191
193
|
const init = _react.default.useCallback(() => {
|
|
192
194
|
setTimeout(() => {
|
|
@@ -214,34 +216,67 @@ const TableCell = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
|
|
|
214
216
|
_react.default.useEffect(() => {
|
|
215
217
|
if (sortedBy !== sortedBy_) setSortedBy(sortedBy_);
|
|
216
218
|
}, [sortedBy_]);
|
|
217
|
-
_react.default.
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
219
|
+
const onStickyMove = _react.default.useCallback(() => {
|
|
220
|
+
const offsetNew = refs.root.current.offsetLeft;
|
|
221
|
+
setStickyActive(refs.offset.current !== offsetNew);
|
|
222
|
+
}, []);
|
|
223
|
+
const onStickyInit = _react.default.useCallback(() => {
|
|
224
|
+
if (sticky && root) {
|
|
225
|
+
root.style.position = 'unset';
|
|
226
|
+
refs.offset.current = root.offsetLeft;
|
|
227
|
+
root.style.position = 'sticky';
|
|
228
|
+
onStickyMove();
|
|
229
|
+
}
|
|
230
|
+
}, [sticky, root]);
|
|
231
|
+
const onObserve = _react.default.useCallback(() => {
|
|
232
|
+
var _refs$root$current2;
|
|
233
|
+
const element = (_refs$root$current2 = refs.root.current) === null || _refs$root$current2 === void 0 ? void 0 : _refs$root$current2.closest('table');
|
|
234
|
+
|
|
235
|
+
// clean up
|
|
236
|
+
if (refs.observer.current) refs.observer.current.disconnect();
|
|
237
|
+
if (!element) return;
|
|
229
238
|
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
239
|
+
// init
|
|
240
|
+
const config = {
|
|
241
|
+
childList: true,
|
|
242
|
+
subtree: true,
|
|
243
|
+
attributes: true,
|
|
244
|
+
attributeFilter: ['style', 'data-*'],
|
|
245
|
+
characterData: true
|
|
246
|
+
};
|
|
247
|
+
const method = mutations => {
|
|
248
|
+
for (const mutation of mutations) {
|
|
249
|
+
switch (mutation.type) {
|
|
250
|
+
case 'childList':
|
|
251
|
+
case 'attributes':
|
|
252
|
+
case 'characterData':
|
|
253
|
+
onStickyInit();
|
|
254
|
+
break;
|
|
255
|
+
}
|
|
244
256
|
}
|
|
257
|
+
};
|
|
258
|
+
refs.observer.current = new MutationObserver(method);
|
|
259
|
+
refs.observer.current.observe(element, config);
|
|
260
|
+
return refs.observer.current;
|
|
261
|
+
}, []);
|
|
262
|
+
_react.default.useEffect(() => {
|
|
263
|
+
if (root && sticky) {
|
|
264
|
+
onStickyInit();
|
|
265
|
+
setTimeout(() => {
|
|
266
|
+
onStickyInit();
|
|
267
|
+
}, 250);
|
|
268
|
+
|
|
269
|
+
// observer
|
|
270
|
+
onObserve();
|
|
271
|
+
|
|
272
|
+
// scroll
|
|
273
|
+
const parentOverflow = window.document.querySelector('.onesy-Table-wrapper');
|
|
274
|
+
if (parentOverflow) parentOverflow.addEventListener('scroll', onStickyMove, {
|
|
275
|
+
passive: false
|
|
276
|
+
});
|
|
277
|
+
return () => {
|
|
278
|
+
if (parentOverflow) parentOverflow.removeEventListener('scroll', onStickyMove);
|
|
279
|
+
};
|
|
245
280
|
}
|
|
246
281
|
}, [timeout, windowWidth, sticky, stickyPosition, root]);
|
|
247
282
|
const onSort = _react.default.useCallback(() => {
|
package/TableHead/TableHead.js
CHANGED
|
@@ -15,6 +15,7 @@ var _Surface = _interopRequireDefault(require("../Surface"));
|
|
|
15
15
|
var _utils2 = require("../utils");
|
|
16
16
|
var _TableRow = _interopRequireDefault(require("../TableRow"));
|
|
17
17
|
var _LinearProgress = _interopRequireDefault(require("../LinearProgress"));
|
|
18
|
+
var _useResize = _interopRequireDefault(require("../useResize"));
|
|
18
19
|
const _excluded = ["tonal", "color", "size", "sticky", "stickyOffset", "timeout", "loading", "LinearGradientProps", "TableRowLoaderProps", "Component", "className", "style", "children"];
|
|
19
20
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
20
21
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
@@ -83,43 +84,79 @@ const TableHead = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
|
|
|
83
84
|
const {
|
|
84
85
|
classes
|
|
85
86
|
} = useStyle();
|
|
87
|
+
const windowWidth = (0, _useResize.default)();
|
|
86
88
|
const [root, setRoot] = _react.default.useState();
|
|
87
89
|
const [stickyActive, setStickyActive] = _react.default.useState(false);
|
|
88
90
|
const refs = {
|
|
89
|
-
root: _react.default.useRef(undefined)
|
|
91
|
+
root: _react.default.useRef(undefined),
|
|
92
|
+
offset: _react.default.useRef(null),
|
|
93
|
+
observer: _react.default.useRef(null)
|
|
90
94
|
};
|
|
91
95
|
const styleOther = {};
|
|
92
96
|
if (sticky && stickyOffset !== undefined) styleOther.top = stickyOffset;
|
|
93
|
-
_react.default.
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
97
|
+
const onStickyMove = _react.default.useCallback(() => {
|
|
98
|
+
const offsetNew = refs.root.current.offsetTop;
|
|
99
|
+
setStickyActive(refs.offset.current !== offsetNew);
|
|
100
|
+
}, []);
|
|
101
|
+
const onStickyInit = _react.default.useCallback(() => {
|
|
102
|
+
if (sticky && root) {
|
|
103
|
+
root.style.position = 'unset';
|
|
104
|
+
refs.offset.current = root.offsetTop;
|
|
105
|
+
root.style.position = 'sticky';
|
|
106
|
+
onStickyMove();
|
|
107
|
+
}
|
|
108
|
+
}, [sticky, root]);
|
|
109
|
+
const onObserve = _react.default.useCallback(() => {
|
|
110
|
+
var _refs$root$current;
|
|
111
|
+
const element = (_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.closest('table');
|
|
112
|
+
|
|
113
|
+
// clean up
|
|
114
|
+
if (refs.observer.current) refs.observer.current.disconnect();
|
|
115
|
+
if (!element) return;
|
|
105
116
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
117
|
+
// init
|
|
118
|
+
const config = {
|
|
119
|
+
childList: true,
|
|
120
|
+
subtree: true,
|
|
121
|
+
attributes: true,
|
|
122
|
+
attributeFilter: ['style', 'data-*'],
|
|
123
|
+
characterData: true
|
|
124
|
+
};
|
|
125
|
+
const method = mutations => {
|
|
126
|
+
for (const mutation of mutations) {
|
|
127
|
+
switch (mutation.type) {
|
|
128
|
+
case 'childList':
|
|
129
|
+
case 'attributes':
|
|
130
|
+
case 'characterData':
|
|
131
|
+
onStickyInit();
|
|
132
|
+
break;
|
|
133
|
+
}
|
|
120
134
|
}
|
|
135
|
+
};
|
|
136
|
+
refs.observer.current = new MutationObserver(method);
|
|
137
|
+
refs.observer.current.observe(element, config);
|
|
138
|
+
return refs.observer.current;
|
|
139
|
+
}, []);
|
|
140
|
+
_react.default.useEffect(() => {
|
|
141
|
+
if (root && sticky) {
|
|
142
|
+
onStickyInit();
|
|
143
|
+
setTimeout(() => {
|
|
144
|
+
onStickyInit();
|
|
145
|
+
}, 250);
|
|
146
|
+
|
|
147
|
+
// observer
|
|
148
|
+
onObserve();
|
|
149
|
+
|
|
150
|
+
// scroll
|
|
151
|
+
const parentOverflow = window.document.querySelector('.onesy-Table-wrapper');
|
|
152
|
+
if (parentOverflow) parentOverflow.addEventListener('scroll', onStickyMove, {
|
|
153
|
+
passive: false
|
|
154
|
+
});
|
|
155
|
+
return () => {
|
|
156
|
+
if (parentOverflow) parentOverflow.removeEventListener('scroll', onStickyMove);
|
|
157
|
+
};
|
|
121
158
|
}
|
|
122
|
-
}, [timeout, sticky, root]);
|
|
159
|
+
}, [timeout, windowWidth, sticky, root]);
|
|
123
160
|
return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
|
|
124
161
|
ref: item => {
|
|
125
162
|
if (ref) {
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ILine } from '../Line/Line';
|
|
3
|
-
import { IElement, IPropsAny
|
|
3
|
+
import { IElement, IPropsAny } from '../types';
|
|
4
4
|
export type ITimelineItem = ILine & {
|
|
5
5
|
orientation?: 'vertical' | 'horizontal';
|
|
6
6
|
start?: IElement;
|
|
7
7
|
end?: IElement;
|
|
8
|
+
icon?: any;
|
|
8
9
|
DividerProps?: IPropsAny;
|
|
9
|
-
|
|
10
|
-
Icon?: IElementReference;
|
|
10
|
+
iconProps?: IPropsAny;
|
|
11
11
|
Divider?: any;
|
|
12
12
|
};
|
|
13
13
|
declare const TimelineItem: React.FC<ITimelineItem>;
|
|
@@ -14,7 +14,7 @@ var _Surface = _interopRequireDefault(require("../Surface"));
|
|
|
14
14
|
var _Divider = _interopRequireDefault(require("../Divider"));
|
|
15
15
|
var _Line = _interopRequireDefault(require("../Line"));
|
|
16
16
|
var _utils = require("../utils");
|
|
17
|
-
const _excluded = ["orientation", "start", "end", "DividerProps", "
|
|
17
|
+
const _excluded = ["orientation", "start", "end", "DividerProps", "iconProps", "icon", "Divider", "Component", "className", "children"];
|
|
18
18
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
19
19
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
20
20
|
const useStyle = (0, _styleReact.style)(theme => ({
|
|
@@ -100,12 +100,12 @@ const TimelineItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
|
|
|
100
100
|
tonal: 'secondary',
|
|
101
101
|
color: 'neutral'
|
|
102
102
|
} : undefined,
|
|
103
|
-
|
|
103
|
+
iconProps = !props.icon ? {
|
|
104
104
|
tonal: 'secondary',
|
|
105
105
|
color: 'neutral',
|
|
106
106
|
version: 'filled'
|
|
107
107
|
} : undefined,
|
|
108
|
-
|
|
108
|
+
icon,
|
|
109
109
|
Divider: Divider_,
|
|
110
110
|
Component = 'li',
|
|
111
111
|
className,
|
|
@@ -139,9 +139,9 @@ const TimelineItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
|
|
|
139
139
|
className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('TimelineItem', theme) && ['onesy-TimelineItem-item', 'onesy-TimelineItem-middle'], classes.item, classes.middle])
|
|
140
140
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
141
141
|
className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('TimelineItem', theme) && ['onesy-TimelineItem-icon-wrapper'], classes.iconWrapper, classes[`iconWrapper_orientation_${orientation}`]])
|
|
142
|
-
},
|
|
142
|
+
}, icon ? icon : /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({}, iconProps, {
|
|
143
143
|
tonal: true,
|
|
144
|
-
className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('TimelineItem', theme) && ['onesy-TimelineItem-icon'],
|
|
144
|
+
className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('TimelineItem', theme) && ['onesy-TimelineItem-icon'], iconProps === null || iconProps === void 0 ? void 0 : iconProps.className, classes.icon])
|
|
145
145
|
}))), Divider_ ? Divider_ : /*#__PURE__*/_react.default.createElement(Divider, (0, _extends2.default)({}, DividerProps, {
|
|
146
146
|
className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('TimelineItem', theme) && ['onesy-TimelineItem-divider'], DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className, classes.divider, classes[`divider_orientation_${orientation}`]]),
|
|
147
147
|
flex: true
|
|
@@ -122,7 +122,6 @@ const useStyle = styleMethod(theme => ({
|
|
|
122
122
|
});
|
|
123
123
|
const TableCell = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
124
124
|
const theme = useOnesyTheme();
|
|
125
|
-
const windowWidth = useResize();
|
|
126
125
|
const l = theme.l;
|
|
127
126
|
const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTableCell?.props?.default), props_), [props_]);
|
|
128
127
|
const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
|
|
@@ -159,12 +158,15 @@ const TableCell = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
159
158
|
const {
|
|
160
159
|
classes
|
|
161
160
|
} = useStyle();
|
|
161
|
+
const windowWidth = useResize();
|
|
162
162
|
const [root, setRoot] = React.useState();
|
|
163
163
|
const [stickyActive, setStickyActive] = React.useState(false);
|
|
164
164
|
const [offset, setOffset] = React.useState(0);
|
|
165
165
|
const [sortedBy, setSortedBy] = React.useState(sortedByDefault);
|
|
166
166
|
const refs = {
|
|
167
|
-
root: React.useRef(undefined)
|
|
167
|
+
root: React.useRef(undefined),
|
|
168
|
+
offset: React.useRef(null),
|
|
169
|
+
observer: React.useRef(null)
|
|
168
170
|
};
|
|
169
171
|
const init = React.useCallback(() => {
|
|
170
172
|
setTimeout(() => {
|
|
@@ -191,34 +193,66 @@ const TableCell = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
191
193
|
React.useEffect(() => {
|
|
192
194
|
if (sortedBy !== sortedBy_) setSortedBy(sortedBy_);
|
|
193
195
|
}, [sortedBy_]);
|
|
194
|
-
React.
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
196
|
+
const onStickyMove = React.useCallback(() => {
|
|
197
|
+
const offsetNew = refs.root.current.offsetLeft;
|
|
198
|
+
setStickyActive(refs.offset.current !== offsetNew);
|
|
199
|
+
}, []);
|
|
200
|
+
const onStickyInit = React.useCallback(() => {
|
|
201
|
+
if (sticky && root) {
|
|
202
|
+
root.style.position = 'unset';
|
|
203
|
+
refs.offset.current = root.offsetLeft;
|
|
204
|
+
root.style.position = 'sticky';
|
|
205
|
+
onStickyMove();
|
|
206
|
+
}
|
|
207
|
+
}, [sticky, root]);
|
|
208
|
+
const onObserve = React.useCallback(() => {
|
|
209
|
+
const element = refs.root.current?.closest('table');
|
|
210
|
+
|
|
211
|
+
// clean up
|
|
212
|
+
if (refs.observer.current) refs.observer.current.disconnect();
|
|
213
|
+
if (!element) return;
|
|
206
214
|
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
215
|
+
// init
|
|
216
|
+
const config = {
|
|
217
|
+
childList: true,
|
|
218
|
+
subtree: true,
|
|
219
|
+
attributes: true,
|
|
220
|
+
attributeFilter: ['style', 'data-*'],
|
|
221
|
+
characterData: true
|
|
222
|
+
};
|
|
223
|
+
const method = mutations => {
|
|
224
|
+
for (const mutation of mutations) {
|
|
225
|
+
switch (mutation.type) {
|
|
226
|
+
case 'childList':
|
|
227
|
+
case 'attributes':
|
|
228
|
+
case 'characterData':
|
|
229
|
+
onStickyInit();
|
|
230
|
+
break;
|
|
231
|
+
}
|
|
221
232
|
}
|
|
233
|
+
};
|
|
234
|
+
refs.observer.current = new MutationObserver(method);
|
|
235
|
+
refs.observer.current.observe(element, config);
|
|
236
|
+
return refs.observer.current;
|
|
237
|
+
}, []);
|
|
238
|
+
React.useEffect(() => {
|
|
239
|
+
if (root && sticky) {
|
|
240
|
+
onStickyInit();
|
|
241
|
+
setTimeout(() => {
|
|
242
|
+
onStickyInit();
|
|
243
|
+
}, 250);
|
|
244
|
+
|
|
245
|
+
// observer
|
|
246
|
+
onObserve();
|
|
247
|
+
|
|
248
|
+
// scroll
|
|
249
|
+
const parentOverflow = window.document.querySelector('.onesy-Table-wrapper');
|
|
250
|
+
if (parentOverflow) parentOverflow.addEventListener('scroll', onStickyMove, {
|
|
251
|
+
passive: false
|
|
252
|
+
});
|
|
253
|
+
return () => {
|
|
254
|
+
if (parentOverflow) parentOverflow.removeEventListener('scroll', onStickyMove);
|
|
255
|
+
};
|
|
222
256
|
}
|
|
223
257
|
}, [timeout, windowWidth, sticky, stickyPosition, root]);
|
|
224
258
|
const onSort = React.useCallback(() => {
|
|
@@ -11,6 +11,7 @@ import SurfaceElement from '../Surface';
|
|
|
11
11
|
import { staticClassName } from '../utils';
|
|
12
12
|
import TableRowElement from '../TableRow';
|
|
13
13
|
import LinearProgressElement from '../LinearProgress';
|
|
14
|
+
import useResize from '../useResize';
|
|
14
15
|
const useStyle = styleMethod(theme => ({
|
|
15
16
|
root: {
|
|
16
17
|
display: 'table-header-group',
|
|
@@ -64,43 +65,78 @@ const TableHead = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
64
65
|
const {
|
|
65
66
|
classes
|
|
66
67
|
} = useStyle();
|
|
68
|
+
const windowWidth = useResize();
|
|
67
69
|
const [root, setRoot] = React.useState();
|
|
68
70
|
const [stickyActive, setStickyActive] = React.useState(false);
|
|
69
71
|
const refs = {
|
|
70
|
-
root: React.useRef(undefined)
|
|
72
|
+
root: React.useRef(undefined),
|
|
73
|
+
offset: React.useRef(null),
|
|
74
|
+
observer: React.useRef(null)
|
|
71
75
|
};
|
|
72
76
|
const styleOther = {};
|
|
73
77
|
if (sticky && stickyOffset !== undefined) styleOther.top = stickyOffset;
|
|
74
|
-
React.
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
78
|
+
const onStickyMove = React.useCallback(() => {
|
|
79
|
+
const offsetNew = refs.root.current.offsetTop;
|
|
80
|
+
setStickyActive(refs.offset.current !== offsetNew);
|
|
81
|
+
}, []);
|
|
82
|
+
const onStickyInit = React.useCallback(() => {
|
|
83
|
+
if (sticky && root) {
|
|
84
|
+
root.style.position = 'unset';
|
|
85
|
+
refs.offset.current = root.offsetTop;
|
|
86
|
+
root.style.position = 'sticky';
|
|
87
|
+
onStickyMove();
|
|
88
|
+
}
|
|
89
|
+
}, [sticky, root]);
|
|
90
|
+
const onObserve = React.useCallback(() => {
|
|
91
|
+
const element = refs.root.current?.closest('table');
|
|
92
|
+
|
|
93
|
+
// clean up
|
|
94
|
+
if (refs.observer.current) refs.observer.current.disconnect();
|
|
95
|
+
if (!element) return;
|
|
86
96
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
97
|
+
// init
|
|
98
|
+
const config = {
|
|
99
|
+
childList: true,
|
|
100
|
+
subtree: true,
|
|
101
|
+
attributes: true,
|
|
102
|
+
attributeFilter: ['style', 'data-*'],
|
|
103
|
+
characterData: true
|
|
104
|
+
};
|
|
105
|
+
const method = mutations => {
|
|
106
|
+
for (const mutation of mutations) {
|
|
107
|
+
switch (mutation.type) {
|
|
108
|
+
case 'childList':
|
|
109
|
+
case 'attributes':
|
|
110
|
+
case 'characterData':
|
|
111
|
+
onStickyInit();
|
|
112
|
+
break;
|
|
113
|
+
}
|
|
101
114
|
}
|
|
115
|
+
};
|
|
116
|
+
refs.observer.current = new MutationObserver(method);
|
|
117
|
+
refs.observer.current.observe(element, config);
|
|
118
|
+
return refs.observer.current;
|
|
119
|
+
}, []);
|
|
120
|
+
React.useEffect(() => {
|
|
121
|
+
if (root && sticky) {
|
|
122
|
+
onStickyInit();
|
|
123
|
+
setTimeout(() => {
|
|
124
|
+
onStickyInit();
|
|
125
|
+
}, 250);
|
|
126
|
+
|
|
127
|
+
// observer
|
|
128
|
+
onObserve();
|
|
129
|
+
|
|
130
|
+
// scroll
|
|
131
|
+
const parentOverflow = window.document.querySelector('.onesy-Table-wrapper');
|
|
132
|
+
if (parentOverflow) parentOverflow.addEventListener('scroll', onStickyMove, {
|
|
133
|
+
passive: false
|
|
134
|
+
});
|
|
135
|
+
return () => {
|
|
136
|
+
if (parentOverflow) parentOverflow.removeEventListener('scroll', onStickyMove);
|
|
137
|
+
};
|
|
102
138
|
}
|
|
103
|
-
}, [timeout, sticky, root]);
|
|
139
|
+
}, [timeout, windowWidth, sticky, root]);
|
|
104
140
|
return /*#__PURE__*/React.createElement(Surface, _extends({
|
|
105
141
|
ref: item => {
|
|
106
142
|
if (ref) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
4
|
-
const _excluded = ["orientation", "start", "end", "DividerProps", "
|
|
4
|
+
const _excluded = ["orientation", "start", "end", "DividerProps", "iconProps", "icon", "Divider", "Component", "className", "children"];
|
|
5
5
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
6
6
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
7
7
|
import React from 'react';
|
|
@@ -81,12 +81,12 @@ const TimelineItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
81
81
|
tonal: 'secondary',
|
|
82
82
|
color: 'neutral'
|
|
83
83
|
} : undefined,
|
|
84
|
-
|
|
84
|
+
iconProps = !props.icon ? {
|
|
85
85
|
tonal: 'secondary',
|
|
86
86
|
color: 'neutral',
|
|
87
87
|
version: 'filled'
|
|
88
88
|
} : undefined,
|
|
89
|
-
|
|
89
|
+
icon,
|
|
90
90
|
Divider: Divider_,
|
|
91
91
|
Component = 'li',
|
|
92
92
|
className,
|
|
@@ -120,9 +120,9 @@ const TimelineItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
|
|
|
120
120
|
className: classNames([staticClassName('TimelineItem', theme) && ['onesy-TimelineItem-item', 'onesy-TimelineItem-middle'], classes.item, classes.middle])
|
|
121
121
|
}, /*#__PURE__*/React.createElement("div", {
|
|
122
122
|
className: classNames([staticClassName('TimelineItem', theme) && ['onesy-TimelineItem-icon-wrapper'], classes.iconWrapper, classes[`iconWrapper_orientation_${orientation}`]])
|
|
123
|
-
},
|
|
123
|
+
}, icon ? icon : /*#__PURE__*/React.createElement(Surface, _extends({}, iconProps, {
|
|
124
124
|
tonal: true,
|
|
125
|
-
className: classNames([staticClassName('TimelineItem', theme) && ['onesy-TimelineItem-icon'],
|
|
125
|
+
className: classNames([staticClassName('TimelineItem', theme) && ['onesy-TimelineItem-icon'], iconProps?.className, classes.icon])
|
|
126
126
|
}))), Divider_ ? Divider_ : /*#__PURE__*/React.createElement(Divider, _extends({}, DividerProps, {
|
|
127
127
|
className: classNames([staticClassName('TimelineItem', theme) && ['onesy-TimelineItem-divider'], DividerProps?.className, classes.divider, classes[`divider_orientation_${orientation}`]]),
|
|
128
128
|
flex: true
|
package/esm/index.js
CHANGED
package/index.js
CHANGED