@apia/table 3.0.1 → 3.0.6
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/index.d.ts +787 -24
- package/dist/index.js +3667 -24
- package/dist/index.js.map +1 -1
- package/package.json +7 -7
- package/dist/Cell.js +0 -52
- package/dist/Cell.js.map +0 -1
- package/dist/FilterCell.js +0 -68
- package/dist/FilterCell.js.map +0 -1
- package/dist/Header.js +0 -171
- package/dist/Header.js.map +0 -1
- package/dist/HeaderCell.js +0 -223
- package/dist/HeaderCell.js.map +0 -1
- package/dist/KeyHandler.js +0 -28
- package/dist/KeyHandler.js.map +0 -1
- package/dist/ResponsiveTable.d.ts +0 -8
- package/dist/ResponsiveTable.d.ts.map +0 -1
- package/dist/ResponsiveTable.js +0 -29
- package/dist/ResponsiveTable.js.map +0 -1
- package/dist/ResponsiveTableContext.d.ts +0 -8
- package/dist/ResponsiveTableContext.d.ts.map +0 -1
- package/dist/ResponsiveTableContext.js +0 -140
- package/dist/ResponsiveTableContext.js.map +0 -1
- package/dist/Row.js +0 -230
- package/dist/Row.js.map +0 -1
- package/dist/SeparatorCell.js +0 -20
- package/dist/SeparatorCell.js.map +0 -1
- package/dist/StateCell.js +0 -19
- package/dist/StateCell.js.map +0 -1
- package/dist/filters/RangeFilter.js +0 -61
- package/dist/filters/RangeFilter.js.map +0 -1
- package/dist/renderers/AccordionCell.d.ts +0 -15
- package/dist/renderers/AccordionCell.d.ts.map +0 -1
- package/dist/renderers/AccordionCell.js +0 -23
- package/dist/renderers/AccordionCell.js.map +0 -1
- package/dist/renderers/AccordionDocNameCellRenderer.d.ts +0 -11
- package/dist/renderers/AccordionDocNameCellRenderer.d.ts.map +0 -1
- package/dist/renderers/AccordionDocNameCellRenderer.js +0 -39
- package/dist/renderers/AccordionDocNameCellRenderer.js.map +0 -1
- package/dist/renderers/AccordionElement.d.ts +0 -11
- package/dist/renderers/AccordionElement.d.ts.map +0 -1
- package/dist/renderers/AccordionElement.js +0 -115
- package/dist/renderers/AccordionElement.js.map +0 -1
- package/dist/renderers/AccordionHTMLCellRenderer.d.ts +0 -8
- package/dist/renderers/AccordionHTMLCellRenderer.d.ts.map +0 -1
- package/dist/renderers/AccordionHTMLCellRenderer.js +0 -37
- package/dist/renderers/AccordionHTMLCellRenderer.js.map +0 -1
- package/dist/renderers/AccordionRenderer.d.ts +0 -6
- package/dist/renderers/AccordionRenderer.d.ts.map +0 -1
- package/dist/renderers/AccordionRenderer.js +0 -76
- package/dist/renderers/AccordionRenderer.js.map +0 -1
- package/dist/renderers/AdditionalColumnDefaultRenderer.d.ts +0 -7
- package/dist/renderers/AdditionalColumnDefaultRenderer.d.ts.map +0 -1
- package/dist/renderers/AdditionalColumnDefaultRenderer.js +0 -31
- package/dist/renderers/AdditionalColumnDefaultRenderer.js.map +0 -1
- package/dist/renderers/DefaultCellRenderer.d.ts +0 -11
- package/dist/renderers/DefaultCellRenderer.d.ts.map +0 -1
- package/dist/renderers/DefaultCellRenderer.js +0 -49
- package/dist/renderers/DefaultCellRenderer.js.map +0 -1
- package/dist/renderers/DefaultRowRenderer.d.ts +0 -6
- package/dist/renderers/DefaultRowRenderer.d.ts.map +0 -1
- package/dist/renderers/DefaultRowRenderer.js +0 -26
- package/dist/renderers/DefaultRowRenderer.js.map +0 -1
- package/dist/renderers/DocNameCellRenderer.d.ts +0 -10
- package/dist/renderers/DocNameCellRenderer.d.ts.map +0 -1
- package/dist/renderers/DocNameCellRenderer.js +0 -43
- package/dist/renderers/DocNameCellRenderer.js.map +0 -1
- package/dist/renderers/HTMLCellRenderer.d.ts +0 -8
- package/dist/renderers/HTMLCellRenderer.d.ts.map +0 -1
- package/dist/renderers/HTMLCellRenderer.js +0 -29
- package/dist/renderers/HTMLCellRenderer.js.map +0 -1
- package/dist/renderers/IsLoadingRenderer.d.ts +0 -6
- package/dist/renderers/IsLoadingRenderer.d.ts.map +0 -1
- package/dist/renderers/IsLoadingRenderer.js +0 -9
- package/dist/renderers/IsLoadingRenderer.js.map +0 -1
- package/dist/renderers/NoRegistersRenderer.d.ts +0 -6
- package/dist/renderers/NoRegistersRenderer.d.ts.map +0 -1
- package/dist/renderers/NoRegistersRenderer.js +0 -11
- package/dist/renderers/NoRegistersRenderer.js.map +0 -1
- package/dist/renderers/PriorityAccordionRenderer.d.ts +0 -6
- package/dist/renderers/PriorityAccordionRenderer.d.ts.map +0 -1
- package/dist/renderers/PriorityAccordionRenderer.js +0 -36
- package/dist/renderers/PriorityAccordionRenderer.js.map +0 -1
- package/dist/renderers/PriorityRenderer.d.ts +0 -9
- package/dist/renderers/PriorityRenderer.d.ts.map +0 -1
- package/dist/renderers/PriorityRenderer.js +0 -46
- package/dist/renderers/PriorityRenderer.js.map +0 -1
- package/dist/renderers/RowStatesRenderer.d.ts +0 -9
- package/dist/renderers/RowStatesRenderer.d.ts.map +0 -1
- package/dist/renderers/RowStatesRenderer.js +0 -34
- package/dist/renderers/RowStatesRenderer.js.map +0 -1
- package/dist/renderers/StatusAccordionRenderer.d.ts +0 -6
- package/dist/renderers/StatusAccordionRenderer.d.ts.map +0 -1
- package/dist/renderers/StatusAccordionRenderer.js +0 -23
- package/dist/renderers/StatusAccordionRenderer.js.map +0 -1
- package/dist/renderers/StatusRenderer.d.ts +0 -9
- package/dist/renderers/StatusRenderer.d.ts.map +0 -1
- package/dist/renderers/StatusRenderer.js +0 -54
- package/dist/renderers/StatusRenderer.js.map +0 -1
- package/dist/renderers/TableRenderer.d.ts +0 -6
- package/dist/renderers/TableRenderer.d.ts.map +0 -1
- package/dist/renderers/TableRenderer.js +0 -50
- package/dist/renderers/TableRenderer.js.map +0 -1
- package/dist/renderers/makeAccordionAsyncRenderer.d.ts +0 -9
- package/dist/renderers/makeAccordionAsyncRenderer.d.ts.map +0 -1
- package/dist/renderers/makeAccordionAsyncRenderer.js +0 -35
- package/dist/renderers/makeAccordionAsyncRenderer.js.map +0 -1
- package/dist/renderers/makeAsyncRenderer.d.ts +0 -10
- package/dist/renderers/makeAsyncRenderer.d.ts.map +0 -1
- package/dist/renderers/makeAsyncRenderer.js +0 -47
- package/dist/renderers/makeAsyncRenderer.js.map +0 -1
- package/dist/store/index.d.ts +0 -72
- package/dist/store/index.d.ts.map +0 -1
- package/dist/store/index.js +0 -131
- package/dist/store/index.js.map +0 -1
- package/dist/store/selection/getInitialState.js +0 -22
- package/dist/store/selection/getInitialState.js.map +0 -1
- package/dist/store/selection/getReduxActions.js +0 -42
- package/dist/store/selection/getReduxActions.js.map +0 -1
- package/dist/store/selection/handleKey.js +0 -143
- package/dist/store/selection/handleKey.js.map +0 -1
- package/dist/store/selection/makeKeyHandler.js +0 -336
- package/dist/store/selection/makeKeyHandler.js.map +0 -1
- package/dist/store/selection/setNewFocused.js +0 -101
- package/dist/store/selection/setNewFocused.js.map +0 -1
- package/dist/store/selection/types.d.ts +0 -150
- package/dist/store/selection/types.d.ts.map +0 -1
- package/dist/store/selection/useDomProps.js +0 -181
- package/dist/store/selection/useDomProps.js.map +0 -1
- package/dist/store/types.d.ts +0 -19
- package/dist/store/types.d.ts.map +0 -1
- package/dist/types.d.ts +0 -315
- package/dist/types.d.ts.map +0 -1
- package/dist/types.js +0 -6
- package/dist/types.js.map +0 -1
|
@@ -1,336 +0,0 @@
|
|
|
1
|
-
import { jsx } from '@apia/theme/jsx-runtime';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { shallowEqual } from 'react-redux';
|
|
4
|
-
import { Box } from '@apia/theme';
|
|
5
|
-
import { useLatest, useUpdateEffect, getSpecificParent, isChild, autoDisconnectMutationObserver, getFocusSelector, cantFocusSelector, globalFocus, scrollParentIntoElement, customEvents } from '@apia/util';
|
|
6
|
-
import { useThrottleFn } from 'ahooks';
|
|
7
|
-
import { willHandleKey } from './handleKey.js';
|
|
8
|
-
import { responsiveTableStore, useResponsiveTable } from '../index.js';
|
|
9
|
-
|
|
10
|
-
function shoutKeyhandlerLive(liveType, additionalData) {
|
|
11
|
-
console.warn("Not implemented arialiveemitter", additionalData);
|
|
12
|
-
}
|
|
13
|
-
let scrollTimeout;
|
|
14
|
-
function makeKeyHandler(actions, id, config) {
|
|
15
|
-
return function KeyHandler({
|
|
16
|
-
children,
|
|
17
|
-
onChangeSelection,
|
|
18
|
-
onSelectRows,
|
|
19
|
-
...props
|
|
20
|
-
}) {
|
|
21
|
-
const { run: keyHandler } = useThrottleFn((ev) => {
|
|
22
|
-
if (!["shift", "alt", "control"].includes(ev.key.toLowerCase())) {
|
|
23
|
-
responsiveTableStore.dispatch(actions.handleKey({ id, ev }));
|
|
24
|
-
}
|
|
25
|
-
}, config?.throttleOptions ?? { wait: 100 });
|
|
26
|
-
const [ref, setRef] = React.useState(null);
|
|
27
|
-
const selectedRows = useResponsiveTable(
|
|
28
|
-
(global) => {
|
|
29
|
-
const state = config.stateSelector(global);
|
|
30
|
-
return (state?.selectedRows ?? []).map((current) => ({
|
|
31
|
-
index: current,
|
|
32
|
-
row: state.rows[current]
|
|
33
|
-
}));
|
|
34
|
-
},
|
|
35
|
-
(a, b) => shallowEqual(
|
|
36
|
-
a.map((current) => current.index),
|
|
37
|
-
b.map((current) => current.index)
|
|
38
|
-
)
|
|
39
|
-
);
|
|
40
|
-
const selectedRowsRef = useLatest(selectedRows);
|
|
41
|
-
useResponsiveTable((global) => {
|
|
42
|
-
const state = config.stateSelector(global);
|
|
43
|
-
return state?.focusedRow ?? -1;
|
|
44
|
-
});
|
|
45
|
-
const { allowKeyboardSorting, focusedCell, isEditionMode, isFocused } = useResponsiveTable((global) => {
|
|
46
|
-
const state = config.stateSelector(global);
|
|
47
|
-
return {
|
|
48
|
-
focusedCell: state?.focusedRow !== void 0 ? `${state?.focusedRow}_${state?.focusedColumn}` : void 0,
|
|
49
|
-
isEditionMode: state?.isEditionMode,
|
|
50
|
-
rows: state?.rows,
|
|
51
|
-
isFocused: state?.isFocused,
|
|
52
|
-
allowKeyboardSorting: state?.allowRowsKeyboardSorting
|
|
53
|
-
};
|
|
54
|
-
}, shallowEqual);
|
|
55
|
-
useUpdateEffect(() => {
|
|
56
|
-
if (onChangeSelection)
|
|
57
|
-
onChangeSelection(selectedRows);
|
|
58
|
-
}, [onChangeSelection, selectedRows]);
|
|
59
|
-
const handleClick = React.useCallback(
|
|
60
|
-
(ev) => {
|
|
61
|
-
if (ev.target.closest(".moreInformationButton"))
|
|
62
|
-
return;
|
|
63
|
-
if (ev.shiftKey) {
|
|
64
|
-
document.getSelection()?.removeAllRanges();
|
|
65
|
-
}
|
|
66
|
-
const parentRow = getSpecificParent(
|
|
67
|
-
ev.target,
|
|
68
|
-
(current) => {
|
|
69
|
-
if (current.tagName.toLowerCase() === "table")
|
|
70
|
-
return null;
|
|
71
|
-
if (current.matches("tr")) {
|
|
72
|
-
return true;
|
|
73
|
-
}
|
|
74
|
-
return false;
|
|
75
|
-
}
|
|
76
|
-
);
|
|
77
|
-
const parentCell = getSpecificParent(
|
|
78
|
-
ev.target,
|
|
79
|
-
(current) => {
|
|
80
|
-
if (current.tagName.toLowerCase() === "table")
|
|
81
|
-
return null;
|
|
82
|
-
if (current.matches("td,th")) {
|
|
83
|
-
return true;
|
|
84
|
-
}
|
|
85
|
-
return false;
|
|
86
|
-
}
|
|
87
|
-
);
|
|
88
|
-
if (parentCell && parentRow) {
|
|
89
|
-
responsiveTableStore.dispatch(
|
|
90
|
-
actions.updateByClick({
|
|
91
|
-
altKey: ev.altKey,
|
|
92
|
-
id,
|
|
93
|
-
ctrlKey: ev.ctrlKey,
|
|
94
|
-
ariaColIndex: Number(parentCell.getAttribute("aria-colindex")),
|
|
95
|
-
rowIndex: Number(parentRow.getAttribute("data-focusindex")),
|
|
96
|
-
shiftKey: ev.shiftKey
|
|
97
|
-
})
|
|
98
|
-
);
|
|
99
|
-
}
|
|
100
|
-
},
|
|
101
|
-
[]
|
|
102
|
-
);
|
|
103
|
-
const handleDoubleClick = React.useCallback(
|
|
104
|
-
(ev) => {
|
|
105
|
-
if (isChild(
|
|
106
|
-
ev.target,
|
|
107
|
-
(current) => current.tagName === "THEAD"
|
|
108
|
-
))
|
|
109
|
-
return;
|
|
110
|
-
ev.preventDefault();
|
|
111
|
-
if (onSelectRows)
|
|
112
|
-
onSelectRows(
|
|
113
|
-
selectedRowsRef.current,
|
|
114
|
-
config.stateSelector(responsiveTableStore.getState()).focusedRow
|
|
115
|
-
);
|
|
116
|
-
},
|
|
117
|
-
[onSelectRows, selectedRowsRef]
|
|
118
|
-
);
|
|
119
|
-
const initialized = React.useRef(true);
|
|
120
|
-
const running = React.useRef(false);
|
|
121
|
-
const doFocusThings = React.useCallback(() => {
|
|
122
|
-
if (!running.current) {
|
|
123
|
-
running.current = true;
|
|
124
|
-
if (focusedCell === void 0) {
|
|
125
|
-
running.current = false;
|
|
126
|
-
return () => {
|
|
127
|
-
};
|
|
128
|
-
}
|
|
129
|
-
if (ref) {
|
|
130
|
-
const disconnectObserver = autoDisconnectMutationObserver(
|
|
131
|
-
ref,
|
|
132
|
-
() => {
|
|
133
|
-
scrollTimeout = setTimeout(() => {
|
|
134
|
-
const focusedElement = ref.querySelector(
|
|
135
|
-
'[data-focused="true"]'
|
|
136
|
-
);
|
|
137
|
-
let tableCellElement = null;
|
|
138
|
-
let tableCellWidget = null;
|
|
139
|
-
if (["td", "th"].includes(
|
|
140
|
-
focusedElement?.tagName.toLowerCase() ?? ""
|
|
141
|
-
)) {
|
|
142
|
-
tableCellElement = focusedElement;
|
|
143
|
-
tableCellWidget = focusedElement?.querySelector(
|
|
144
|
-
getFocusSelector(":not(.debug_info__button)")
|
|
145
|
-
);
|
|
146
|
-
}
|
|
147
|
-
if (focusedElement?.tagName.toLowerCase() === "tr") {
|
|
148
|
-
tableCellElement = focusedElement.querySelector("td,th");
|
|
149
|
-
tableCellWidget = focusedElement.querySelector(
|
|
150
|
-
getFocusSelector(":not(.debug_info__button)")
|
|
151
|
-
) || tableCellElement;
|
|
152
|
-
}
|
|
153
|
-
if (tableCellWidget) {
|
|
154
|
-
tableCellElement?.setAttribute("tabIndex", "-1");
|
|
155
|
-
tableCellWidget.setAttribute("tabIndex", "0");
|
|
156
|
-
} else
|
|
157
|
-
tableCellElement?.setAttribute("tabIndex", "0");
|
|
158
|
-
if (!isEditionMode) {
|
|
159
|
-
const allFocusableElements = ref?.querySelectorAll(
|
|
160
|
-
getFocusSelector(
|
|
161
|
-
`${cantFocusSelector}:not([data-focused="true"])`
|
|
162
|
-
)
|
|
163
|
-
);
|
|
164
|
-
allFocusableElements?.forEach((current) => {
|
|
165
|
-
if (current !== tableCellWidget) {
|
|
166
|
-
current.setAttribute("tabIndex", "-1");
|
|
167
|
-
}
|
|
168
|
-
if (tableCellWidget?.tagName === "BUTTON")
|
|
169
|
-
tableCellWidget.setAttribute("role", "gridcell");
|
|
170
|
-
});
|
|
171
|
-
} else {
|
|
172
|
-
const focusableElements = tableCellElement?.querySelectorAll('[tabindex="-1"]');
|
|
173
|
-
focusableElements?.forEach(
|
|
174
|
-
(current) => current.setAttribute("tabIndex", "0")
|
|
175
|
-
);
|
|
176
|
-
}
|
|
177
|
-
const focusElement = tableCellWidget ?? tableCellElement;
|
|
178
|
-
const row = getSpecificParent(
|
|
179
|
-
focusElement,
|
|
180
|
-
(current) => current.tagName === "TR"
|
|
181
|
-
);
|
|
182
|
-
if (focusElement && initialized.current && config.stateSelector(responsiveTableStore.getState()).isFocused) {
|
|
183
|
-
globalFocus.focus = focusElement;
|
|
184
|
-
focusElement.focus();
|
|
185
|
-
}
|
|
186
|
-
if (row) {
|
|
187
|
-
scrollParentIntoElement(row, 55, 2, 100, "makeKeyHandler");
|
|
188
|
-
}
|
|
189
|
-
if (!initialized.current) {
|
|
190
|
-
initialized.current = true;
|
|
191
|
-
}
|
|
192
|
-
}, 0);
|
|
193
|
-
},
|
|
194
|
-
{ timeout: 5e3 }
|
|
195
|
-
);
|
|
196
|
-
running.current = false;
|
|
197
|
-
return () => {
|
|
198
|
-
disconnectObserver();
|
|
199
|
-
clearTimeout(scrollTimeout);
|
|
200
|
-
};
|
|
201
|
-
}
|
|
202
|
-
running.current = false;
|
|
203
|
-
}
|
|
204
|
-
return () => {
|
|
205
|
-
};
|
|
206
|
-
}, [focusedCell, ref, isEditionMode]);
|
|
207
|
-
React.useLayoutEffect(doFocusThings, [
|
|
208
|
-
focusedCell,
|
|
209
|
-
isFocused,
|
|
210
|
-
isEditionMode
|
|
211
|
-
]);
|
|
212
|
-
React.useEffect(() => {
|
|
213
|
-
function handleFocus(ev) {
|
|
214
|
-
const targetTable = getSpecificParent(
|
|
215
|
-
ev.target,
|
|
216
|
-
(current) => current.tagName.toLowerCase() === "table"
|
|
217
|
-
);
|
|
218
|
-
const relatedTargetTable = getSpecificParent(
|
|
219
|
-
ev.relatedTarget,
|
|
220
|
-
(current) => current.tagName.toLowerCase() === "table"
|
|
221
|
-
);
|
|
222
|
-
if (!relatedTargetTable || relatedTargetTable !== targetTable)
|
|
223
|
-
handleClick(ev);
|
|
224
|
-
}
|
|
225
|
-
ref?.addEventListener("dblclick", handleDoubleClick);
|
|
226
|
-
ref?.addEventListener("mousedown", handleClick);
|
|
227
|
-
ref?.addEventListener("focusin", handleFocus);
|
|
228
|
-
ref?.addEventListener(customEvents.focus, handleClick);
|
|
229
|
-
return () => {
|
|
230
|
-
ref?.removeEventListener("mousedown", handleClick);
|
|
231
|
-
ref?.removeEventListener("dblclick", handleDoubleClick);
|
|
232
|
-
ref?.removeEventListener("focusin", handleFocus);
|
|
233
|
-
ref?.removeEventListener(customEvents.focus, handleClick);
|
|
234
|
-
};
|
|
235
|
-
}, [ref]);
|
|
236
|
-
const isDragging = React.useRef(false);
|
|
237
|
-
const isFocusedRef = React.useRef(false);
|
|
238
|
-
return /* @__PURE__ */ jsx(
|
|
239
|
-
Box,
|
|
240
|
-
{
|
|
241
|
-
ref: setRef,
|
|
242
|
-
...props,
|
|
243
|
-
className: `selection__keyHandler ${props.className ?? ""}`,
|
|
244
|
-
onBlur: React.useCallback(
|
|
245
|
-
(ev) => {
|
|
246
|
-
if (!ev.relatedTarget || !getSpecificParent(
|
|
247
|
-
ev.relatedTarget,
|
|
248
|
-
(current) => current === ref
|
|
249
|
-
)) {
|
|
250
|
-
responsiveTableStore.dispatch(
|
|
251
|
-
actions.selectionStateUpdate({ id, isFocused: false })
|
|
252
|
-
);
|
|
253
|
-
shoutKeyhandlerLive();
|
|
254
|
-
isFocusedRef.current = false;
|
|
255
|
-
}
|
|
256
|
-
},
|
|
257
|
-
[ref]
|
|
258
|
-
),
|
|
259
|
-
onFocus: React.useCallback(() => {
|
|
260
|
-
if (!isFocusedRef.current)
|
|
261
|
-
shoutKeyhandlerLive();
|
|
262
|
-
isFocusedRef.current = true;
|
|
263
|
-
}, []),
|
|
264
|
-
sx: React.useMemo(
|
|
265
|
-
() => ({ overflow: "auto", position: "relative" }),
|
|
266
|
-
[]
|
|
267
|
-
),
|
|
268
|
-
onKeyDown: React.useCallback(
|
|
269
|
-
(ev) => {
|
|
270
|
-
const state = config.stateSelector(responsiveTableStore.getState());
|
|
271
|
-
if (willHandleKey(
|
|
272
|
-
ev,
|
|
273
|
-
config.stateSelector(responsiveTableStore.getState())
|
|
274
|
-
)) {
|
|
275
|
-
ev.preventDefault();
|
|
276
|
-
ev.stopPropagation();
|
|
277
|
-
}
|
|
278
|
-
if (actions.swapFocusedRow && isDragging.current && allowKeyboardSorting) {
|
|
279
|
-
if ((ev.key === "Enter" || ev.key === "Escape") && isDragging.current) {
|
|
280
|
-
shoutKeyhandlerLive();
|
|
281
|
-
isDragging.current = false;
|
|
282
|
-
responsiveTableStore.dispatch(
|
|
283
|
-
actions.swapFocusedRow({
|
|
284
|
-
tableName: id,
|
|
285
|
-
newIndex: state.focusedRow
|
|
286
|
-
})
|
|
287
|
-
);
|
|
288
|
-
} else if (["ArrowDown", "ArrowUp"].includes(ev.key)) {
|
|
289
|
-
if (ev.key === "ArrowDown") {
|
|
290
|
-
responsiveTableStore.dispatch(
|
|
291
|
-
actions.swapFocusedRow({
|
|
292
|
-
tableName: id,
|
|
293
|
-
newIndex: state.focusedRow + 1
|
|
294
|
-
})
|
|
295
|
-
);
|
|
296
|
-
} else {
|
|
297
|
-
responsiveTableStore.dispatch(
|
|
298
|
-
actions.swapFocusedRow({
|
|
299
|
-
tableName: id,
|
|
300
|
-
newIndex: state.focusedRow - 1
|
|
301
|
-
})
|
|
302
|
-
);
|
|
303
|
-
}
|
|
304
|
-
}
|
|
305
|
-
} else if (ev.key === "m" && ev.ctrlKey && !isDragging.current && state.focusedRow >= 0 && actions.swapFocusedRow) {
|
|
306
|
-
isDragging.current = true;
|
|
307
|
-
shoutKeyhandlerLive();
|
|
308
|
-
responsiveTableStore.dispatch(
|
|
309
|
-
actions.swapFocusedRow({
|
|
310
|
-
tableName: id,
|
|
311
|
-
newIndex: state.focusedRow
|
|
312
|
-
})
|
|
313
|
-
);
|
|
314
|
-
} else {
|
|
315
|
-
const currentSelectedRows = (state?.selectedRows ?? []).map((current) => ({
|
|
316
|
-
index: current,
|
|
317
|
-
row: state.rows[current]
|
|
318
|
-
}));
|
|
319
|
-
if (props.onKeyDown)
|
|
320
|
-
props.onKeyDown(ev);
|
|
321
|
-
if (ev.key === "Enter" && onSelectRows && state.focusedRow >= 0) {
|
|
322
|
-
onSelectRows(currentSelectedRows, state.focusedRow);
|
|
323
|
-
}
|
|
324
|
-
keyHandler(ev);
|
|
325
|
-
}
|
|
326
|
-
},
|
|
327
|
-
[allowKeyboardSorting, keyHandler, onSelectRows, props]
|
|
328
|
-
),
|
|
329
|
-
children
|
|
330
|
-
}
|
|
331
|
-
);
|
|
332
|
-
};
|
|
333
|
-
}
|
|
334
|
-
|
|
335
|
-
export { makeKeyHandler, shoutKeyhandlerLive };
|
|
336
|
-
//# sourceMappingURL=makeKeyHandler.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"makeKeyHandler.js","sources":["../../../src/store/selection/makeKeyHandler.tsx"],"sourcesContent":["import React from 'react';\nimport { shallowEqual } from 'react-redux';\nimport { Box, BoxProps } from '@apia/theme';\nimport {\n autoDisconnectMutationObserver,\n customEvents,\n getFocusSelector,\n getSpecificParent,\n globalFocus,\n isChild,\n cantFocusSelector,\n scrollParentIntoElement,\n useLatest,\n useUpdateEffect,\n} from '@apia/util';\nimport { ThrottleOptions } from 'ahooks/lib/useThrottle/throttleOptions';\nimport { useThrottleFn } from 'ahooks';\nimport { TUpdateByClickPayload } from './getReduxActions';\nimport { willHandleKey } from './handleKey';\nimport { INewFocus, ISelectableState, THandleKey, TUseDomProps } from './types';\nimport {\n TResponsiveTableRow,\n TResponsiveTableRowsSelectionEvent,\n} from '../../types';\nimport { responsiveTableStore, useResponsiveTable } from '..';\n\nexport function shoutKeyhandlerLive(\n liveType: 'reset' | 'howToStartDrag' | 'howToEndDrag' | 'whichIsTheNewIndex',\n additionalData?: {\n newIndex: number;\n },\n) {\n console.warn('Not implemented arialiveemitter', additionalData);\n switch (liveType) {\n /* case 'howToEndDrag':\n AriaLiveEmitter.emit('live', {\n type: 'assertive',\n message: window.ARIA_HOW_TO_END_DRAG,\n });\n break;\n case 'whichIsTheNewIndex':\n AriaLiveEmitter.emit('live', {\n type: 'assertive',\n * message:\n * formatMessage(window.ARIA_HOW_TO_WHICH_IS_THE_NEW_POSITION, {\n TOK1: String(additionalData?.newIndex ?? 0),\n }),\n });\n break;\n case 'reset':\n AriaLiveEmitter.emit('live', {\n type: 'reset',\n message: '',\n });\n break;\n default:\n AriaLiveEmitter.emit('live', {\n type: 'assertive',\n message: window.ARIA_HOW_TO_START_DRAG,\n }); */\n default:\n }\n}\n\nlet scrollTimeout: number;\n/**\n * Devuelve un elemento KeyHandler que puede usarse como\n * en el ejemplo.\n *\n * Su función es la de manejar los eventos de teclado y\n * ejecutar las acciones necesarias en el estado de la\n * grilla de acuerdo a la funcionalidad estándar de\n * usabilidad de grillas.\n *\n * @example\n *\n <KeyHandler>\n <table ... />\n </KeyHandler>\n */\nexport function makeKeyHandler(\n actions: {\n handleKey: (payload: THandleKey & { id: string }) => {\n payload: THandleKey & { id: string };\n type: string;\n };\n selectionStateUpdate: (\n payload: Partial<ISelectableState> & { id: string },\n ) => {\n payload: Partial<ISelectableState> & { id: string };\n type: string;\n };\n setNewFocused: (payload: INewFocus & { id: string }) => {\n payload: INewFocus & { id: string };\n type: string;\n };\n swapFocusedRow?: (\n payload: {\n newIndex: number;\n } & {\n tableName: string;\n },\n ) => {\n payload: {\n newIndex: number;\n } & {\n tableName: string;\n };\n type: string;\n };\n updateByClick: (payload: TUpdateByClickPayload['payload']) => {\n payload: INewFocus & { id: string };\n type: string;\n };\n },\n id: string,\n config: { throttleOptions?: ThrottleOptions; stateSelector: TUseDomProps },\n) {\n return function KeyHandler({\n children,\n onChangeSelection,\n onSelectRows,\n ...props\n }: BoxProps & {\n /**\n * Se emite un evento cada vez que el usuario modifica\n * la selección actual.\n */\n onChangeSelection?: (\n newRows: TResponsiveTableRowsSelectionEvent,\n ) => unknown;\n onSelectRows?: (\n newRows: TResponsiveTableRowsSelectionEvent,\n focusedIndex: number,\n ) => unknown;\n }) {\n const { run: keyHandler } = useThrottleFn<\n React.KeyboardEventHandler<HTMLDivElement>\n >((ev) => {\n if (!['shift', 'alt', 'control'].includes(ev.key.toLowerCase())) {\n responsiveTableStore.dispatch(actions.handleKey({ id, ev }));\n }\n }, config?.throttleOptions ?? { wait: 100 });\n\n const [ref, setRef] = React.useState<HTMLElement | null>(null);\n\n const selectedRows = useResponsiveTable(\n (global) => {\n const state = config.stateSelector(global);\n return (state?.selectedRows ?? []).map<\n TResponsiveTableRowsSelectionEvent[0]\n >((current) => ({\n index: current,\n row: state.rows[current] as TResponsiveTableRow,\n }));\n },\n (a, b) =>\n shallowEqual(\n a.map((current) => current.index),\n b.map((current) => current.index),\n ),\n );\n const selectedRowsRef = useLatest(selectedRows);\n const focusedRow = useResponsiveTable((global) => {\n const state = config.stateSelector(global);\n return state?.focusedRow ?? -1;\n });\n const { allowKeyboardSorting, focusedCell, isEditionMode, isFocused } =\n useResponsiveTable((global) => {\n const state = config.stateSelector(global);\n return {\n focusedCell:\n state?.focusedRow !== undefined\n ? `${state?.focusedRow}_${state?.focusedColumn}`\n : undefined,\n isEditionMode: state?.isEditionMode,\n rows: state?.rows,\n isFocused: state?.isFocused,\n allowKeyboardSorting: state?.allowRowsKeyboardSorting,\n };\n }, shallowEqual);\n useUpdateEffect(() => {\n if (onChangeSelection) onChangeSelection(selectedRows);\n }, [onChangeSelection, selectedRows]);\n\n const handleClick = React.useCallback(\n (ev: MouseEvent | FocusEvent | Event) => {\n if ((ev.target as HTMLElement).closest('.moreInformationButton'))\n return;\n\n if ((ev as MouseEvent).shiftKey) {\n document.getSelection()?.removeAllRanges();\n }\n const parentRow = getSpecificParent(\n ev.target as HTMLElement,\n (current) => {\n if (current.tagName.toLowerCase() === 'table') return null;\n if (current.matches('tr')) {\n return true;\n }\n return false;\n },\n );\n const parentCell = getSpecificParent(\n ev.target as HTMLElement,\n (current) => {\n if (current.tagName.toLowerCase() === 'table') return null;\n if (current.matches('td,th')) {\n return true;\n }\n return false;\n },\n );\n if (parentCell && parentRow) {\n responsiveTableStore.dispatch(\n actions.updateByClick({\n altKey: (ev as MouseEvent).altKey,\n id,\n ctrlKey: (ev as MouseEvent).ctrlKey,\n ariaColIndex: Number(parentCell.getAttribute('aria-colindex')),\n rowIndex: Number(parentRow.getAttribute('data-focusindex')),\n shiftKey: (ev as MouseEvent).shiftKey,\n }),\n );\n }\n },\n [],\n );\n const handleDoubleClick = React.useCallback(\n (ev: MouseEvent) => {\n if (\n isChild(\n ev.target as HTMLElement,\n (current) => current.tagName === 'THEAD',\n )\n )\n return;\n ev.preventDefault();\n if (onSelectRows)\n onSelectRows(\n selectedRowsRef.current,\n config.stateSelector(responsiveTableStore.getState()).focusedRow,\n );\n },\n [onSelectRows, selectedRowsRef],\n );\n\n const initialized = React.useRef(true);\n\n const running = React.useRef(false);\n const doFocusThings = React.useCallback(() => {\n if (!running.current) {\n running.current = true;\n if (focusedCell === undefined) {\n running.current = false;\n return () => {};\n }\n\n if (ref) {\n const disconnectObserver = autoDisconnectMutationObserver(\n ref,\n () => {\n scrollTimeout = setTimeout(() => {\n const focusedElement = ref.querySelector(\n '[data-focused=\"true\"]',\n );\n\n let tableCellElement: HTMLElement | null = null;\n let tableCellWidget: HTMLElement | null = null;\n\n if (\n ['td', 'th'].includes(\n focusedElement?.tagName.toLowerCase() ?? '',\n )\n ) {\n tableCellElement = focusedElement as HTMLElement;\n tableCellWidget = focusedElement?.querySelector(\n getFocusSelector(':not(.debug_info__button)'),\n ) as HTMLElement;\n }\n\n if (focusedElement?.tagName.toLowerCase() === 'tr') {\n tableCellElement = focusedElement.querySelector('td,th');\n tableCellWidget =\n (focusedElement.querySelector(\n getFocusSelector(':not(.debug_info__button)'),\n ) as HTMLElement) || tableCellElement;\n }\n\n if (tableCellWidget) {\n tableCellElement?.setAttribute('tabIndex', '-1');\n tableCellWidget.setAttribute('tabIndex', '0');\n } else tableCellElement?.setAttribute('tabIndex', '0');\n\n if (!isEditionMode) {\n const allFocusableElements = ref?.querySelectorAll(\n getFocusSelector(\n `${cantFocusSelector}:not([data-focused=\"true\"])`,\n ),\n );\n allFocusableElements?.forEach((current) => {\n if (current !== tableCellWidget) {\n current.setAttribute('tabIndex', '-1');\n }\n if (tableCellWidget?.tagName === 'BUTTON')\n tableCellWidget.setAttribute('role', 'gridcell');\n });\n } else {\n const focusableElements =\n tableCellElement?.querySelectorAll('[tabindex=\"-1\"]');\n\n focusableElements?.forEach((current) =>\n current.setAttribute('tabIndex', '0'),\n );\n }\n\n const focusElement = tableCellWidget ?? tableCellElement;\n const row = getSpecificParent(\n focusElement,\n (current) => current.tagName === 'TR',\n );\n\n if (\n focusElement &&\n initialized.current &&\n config.stateSelector(responsiveTableStore.getState())\n .isFocused\n ) {\n globalFocus.focus = focusElement;\n\n focusElement.focus();\n }\n\n if (row) {\n scrollParentIntoElement(row, 55, 2, 100, 'makeKeyHandler');\n }\n\n if (!initialized.current) {\n initialized.current = true;\n }\n }, 0) as unknown as number;\n },\n { timeout: 5000 },\n );\n\n running.current = false;\n return () => {\n disconnectObserver();\n clearTimeout(scrollTimeout);\n };\n }\n running.current = false;\n }\n return () => {};\n }, [focusedCell, ref, isEditionMode]);\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n React.useLayoutEffect(doFocusThings, [\n focusedCell,\n isFocused,\n isEditionMode,\n ]);\n React.useEffect(() => {\n function handleFocus(ev: FocusEvent) {\n const targetTable = getSpecificParent(\n ev.target as HTMLElement,\n (current) => current.tagName.toLowerCase() === 'table',\n );\n const relatedTargetTable = getSpecificParent(\n ev.relatedTarget as HTMLElement,\n (current) => current.tagName.toLowerCase() === 'table',\n );\n\n if (!relatedTargetTable || relatedTargetTable !== targetTable)\n handleClick(ev);\n }\n\n ref?.addEventListener('dblclick', handleDoubleClick);\n ref?.addEventListener('mousedown', handleClick);\n ref?.addEventListener('focusin', handleFocus);\n ref?.addEventListener(customEvents.focus, handleClick);\n return () => {\n ref?.removeEventListener('mousedown', handleClick);\n ref?.removeEventListener('dblclick', handleDoubleClick);\n ref?.removeEventListener('focusin', handleFocus);\n ref?.removeEventListener(customEvents.focus, handleClick);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [ref]);\n\n const isDragging = React.useRef(false);\n const isFocusedRef = React.useRef(false);\n\n return (\n <Box\n ref={setRef}\n {...props}\n className={`selection__keyHandler ${props.className ?? ''}`}\n onBlur={React.useCallback(\n (ev: React.FocusEvent) => {\n if (\n !ev.relatedTarget ||\n !getSpecificParent(\n ev.relatedTarget as HTMLElement,\n (current) => current === ref,\n )\n ) {\n responsiveTableStore.dispatch(\n actions.selectionStateUpdate({ id, isFocused: false }),\n );\n shoutKeyhandlerLive('reset');\n isFocusedRef.current = false;\n }\n },\n [ref],\n )}\n onFocus={React.useCallback(() => {\n if (!isFocusedRef.current) shoutKeyhandlerLive('howToStartDrag');\n isFocusedRef.current = true;\n }, [])}\n sx={React.useMemo(\n () => ({ overflow: 'auto', position: 'relative' }),\n [],\n )}\n onKeyDown={React.useCallback<\n React.KeyboardEventHandler<HTMLDivElement>\n >(\n (ev) => {\n const state = config.stateSelector(responsiveTableStore.getState());\n\n if (\n willHandleKey(\n ev,\n config.stateSelector(responsiveTableStore.getState()),\n )\n ) {\n ev.preventDefault();\n ev.stopPropagation();\n }\n if (\n actions.swapFocusedRow &&\n isDragging.current &&\n allowKeyboardSorting\n ) {\n if (\n (ev.key === 'Enter' || ev.key === 'Escape') &&\n isDragging.current\n ) {\n shoutKeyhandlerLive('howToStartDrag');\n isDragging.current = false;\n responsiveTableStore.dispatch(\n actions.swapFocusedRow({\n tableName: id,\n newIndex: state.focusedRow,\n }),\n );\n } else if (['ArrowDown', 'ArrowUp'].includes(ev.key)) {\n if (ev.key === 'ArrowDown') {\n responsiveTableStore.dispatch(\n actions.swapFocusedRow({\n tableName: id,\n newIndex: state.focusedRow + 1,\n }),\n );\n } else {\n responsiveTableStore.dispatch(\n actions.swapFocusedRow({\n tableName: id,\n newIndex: state.focusedRow - 1,\n }),\n );\n }\n }\n } else if (\n ev.key === 'm' &&\n ev.ctrlKey &&\n !isDragging.current &&\n state.focusedRow >= 0 &&\n actions.swapFocusedRow\n ) {\n isDragging.current = true;\n shoutKeyhandlerLive('howToEndDrag');\n responsiveTableStore.dispatch(\n actions.swapFocusedRow({\n tableName: id,\n newIndex: state.focusedRow,\n }),\n );\n } else {\n const currentSelectedRows = (state?.selectedRows ?? []).map<\n TResponsiveTableRowsSelectionEvent[0]\n >((current) => ({\n index: current,\n row: state.rows[current] as TResponsiveTableRow,\n }));\n if (props.onKeyDown) props.onKeyDown(ev);\n if (ev.key === 'Enter' && onSelectRows && state.focusedRow >= 0) {\n onSelectRows(currentSelectedRows, state.focusedRow);\n }\n keyHandler(ev);\n }\n },\n [allowKeyboardSorting, keyHandler, onSelectRows, props],\n )}\n >\n {children}\n </Box>\n );\n };\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
import { addBoundary } from '@apia/util';
|
|
2
|
-
|
|
3
|
-
function addRowBoundary(newRow, state) {
|
|
4
|
-
const hasFiltersRow = !!state.filters.find(
|
|
5
|
-
(current) => !!state.columns.find((search) => search.name === current.column)
|
|
6
|
-
);
|
|
7
|
-
return addBoundary({
|
|
8
|
-
number: newRow,
|
|
9
|
-
min: hasFiltersRow ? -2 : -1,
|
|
10
|
-
max: Math.max(0, state.rows.length - 1)
|
|
11
|
-
});
|
|
12
|
-
}
|
|
13
|
-
function addColumnBoundary(newColumn, state) {
|
|
14
|
-
return addBoundary({
|
|
15
|
-
number: newColumn,
|
|
16
|
-
min: 0,
|
|
17
|
-
max: state.nonAdditionalColumnsCount + state.statesColumns + (state.hasNonAdditionalFilters ? 1 : 0)
|
|
18
|
-
});
|
|
19
|
-
}
|
|
20
|
-
function isBasicRow(row) {
|
|
21
|
-
return typeof row === "object" && !!row && "forbidSelection" in row;
|
|
22
|
-
}
|
|
23
|
-
function filterNonSellectableRows(state, newSelection) {
|
|
24
|
-
let expandedRowsBefore = 0;
|
|
25
|
-
return newSelection.filter((selectedRowIndex) => {
|
|
26
|
-
const row = state.rows[selectedRowIndex + expandedRowsBefore];
|
|
27
|
-
if (state.expandedRows.includes(selectedRowIndex))
|
|
28
|
-
expandedRowsBefore += 1;
|
|
29
|
-
return !(isBasicRow(row) && row.forbidSelection);
|
|
30
|
-
});
|
|
31
|
-
}
|
|
32
|
-
function setNewFocused(state, {
|
|
33
|
-
/**
|
|
34
|
-
* Propiedad proveniente del evento click o keydown.
|
|
35
|
-
*/
|
|
36
|
-
ctrlKey,
|
|
37
|
-
/**
|
|
38
|
-
* Propiedad proveniente del evento click o keydown.
|
|
39
|
-
*/
|
|
40
|
-
shiftKey,
|
|
41
|
-
newFocusedColumn,
|
|
42
|
-
newFocusedRow,
|
|
43
|
-
/**
|
|
44
|
-
* Con este método se puede seleccionar cuál celda
|
|
45
|
-
* va a recibir el foco y la selección, o solamente
|
|
46
|
-
* el foco si esta propiedad es pasada en false.
|
|
47
|
-
*/
|
|
48
|
-
shouldSelectNewFocused
|
|
49
|
-
}) {
|
|
50
|
-
let actualNewFocusedRow = Math.round(
|
|
51
|
-
addRowBoundary(newFocusedRow ?? state.focusedRow ?? 0, state) * 2
|
|
52
|
-
) / 2;
|
|
53
|
-
const actualNewFocusedColumn = addColumnBoundary(
|
|
54
|
-
newFocusedColumn ?? state.focusedColumn,
|
|
55
|
-
state
|
|
56
|
-
);
|
|
57
|
-
state.focusedColumn = actualNewFocusedColumn;
|
|
58
|
-
state.focusedRow = actualNewFocusedRow;
|
|
59
|
-
state.isFocused = shouldSelectNewFocused ?? false;
|
|
60
|
-
if (shouldSelectNewFocused === false || actualNewFocusedRow < 0)
|
|
61
|
-
return;
|
|
62
|
-
if (Math.round(actualNewFocusedRow) - actualNewFocusedRow !== 0)
|
|
63
|
-
actualNewFocusedRow = Math.floor(actualNewFocusedRow);
|
|
64
|
-
const isDeselectingWithCtrl = ctrlKey && state.selectedRows.includes(actualNewFocusedRow);
|
|
65
|
-
if (state.allowSelection !== false) {
|
|
66
|
-
if (!ctrlKey && !shiftKey || state.isMultiple === false && !isDeselectingWithCtrl)
|
|
67
|
-
state.selectedRows = filterNonSellectableRows(state, [
|
|
68
|
-
actualNewFocusedRow
|
|
69
|
-
]);
|
|
70
|
-
else if (ctrlKey && state.isMultiple || isDeselectingWithCtrl) {
|
|
71
|
-
state.selectedRows = filterNonSellectableRows(
|
|
72
|
-
state,
|
|
73
|
-
state.selectedRows.includes(actualNewFocusedRow) ? state.selectedRows.filter(
|
|
74
|
-
(current) => current !== actualNewFocusedRow
|
|
75
|
-
) : [...state.selectedRows, actualNewFocusedRow]
|
|
76
|
-
);
|
|
77
|
-
} else if (shiftKey && state.isMultiple) {
|
|
78
|
-
const sortedSelectedRows = [...state.selectedRows].sort((a, b) => a - b);
|
|
79
|
-
let minSelectedRow = sortedSelectedRows[0];
|
|
80
|
-
let maxSelectedRow = sortedSelectedRows[sortedSelectedRows.length - 1];
|
|
81
|
-
if (minSelectedRow === void 0) {
|
|
82
|
-
state.selectedRows = filterNonSellectableRows(state, [
|
|
83
|
-
actualNewFocusedRow
|
|
84
|
-
]);
|
|
85
|
-
return;
|
|
86
|
-
}
|
|
87
|
-
if (actualNewFocusedRow < minSelectedRow)
|
|
88
|
-
minSelectedRow = actualNewFocusedRow;
|
|
89
|
-
if (actualNewFocusedRow > maxSelectedRow)
|
|
90
|
-
maxSelectedRow = actualNewFocusedRow;
|
|
91
|
-
const newSelectedRows = filterNonSellectableRows(
|
|
92
|
-
state,
|
|
93
|
-
new Array(maxSelectedRow - minSelectedRow + 1).fill("").map((_, i) => i + (minSelectedRow ?? 0))
|
|
94
|
-
);
|
|
95
|
-
state.selectedRows = filterNonSellectableRows(state, newSelectedRows);
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
export { addColumnBoundary, addRowBoundary, setNewFocused };
|
|
101
|
-
//# sourceMappingURL=setNewFocused.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"setNewFocused.js","sources":["../../../src/store/selection/setNewFocused.ts"],"sourcesContent":["import { addBoundary } from '@apia/util';\nimport { Draft } from '@apia/store';\nimport { INewFocus, ISelectableState, TBasicRow } from './types';\n\n/**\n * Este método conoce las interfaces necesarias\n * para aplicar las restricciones correspondientes\n * a la hora de hacer foco en una fila, evitando\n * que se haga foco en filas inexistentes.\n */\nexport function addRowBoundary(newRow: number, state: ISelectableState) {\n const hasFiltersRow = !!state.filters.find(\n (current) =>\n !!state.columns.find((search) => search.name === current.column),\n );\n return addBoundary({\n number: newRow,\n min: hasFiltersRow ? -2 : -1,\n max: Math.max(0, state.rows.length - 1),\n });\n}\n/**\n * Este método conoce las interfaces necesarias\n * para aplicar las restricciones correspondientes\n * a la hora de hacer foco en una columna, evitando\n * que se haga foco en columnas inexistentes.\n */\nexport function addColumnBoundary(newColumn: number, state: ISelectableState) {\n return addBoundary({\n number: newColumn,\n min: 0,\n max:\n state.nonAdditionalColumnsCount +\n state.statesColumns +\n (state.hasNonAdditionalFilters ? 1 : 0),\n });\n}\n\nfunction isBasicRow(row: unknown): row is TBasicRow {\n return typeof row === 'object' && !!row && 'forbidSelection' in row;\n}\n\nfunction filterNonSellectableRows(\n state: Draft<ISelectableState>,\n newSelection: number[],\n) {\n let expandedRowsBefore = 0;\n return newSelection.filter((selectedRowIndex) => {\n const row = state.rows[selectedRowIndex + expandedRowsBefore];\n if (state.expandedRows.includes(selectedRowIndex)) expandedRowsBefore += 1;\n return !(isBasicRow(row) && row.forbidSelection);\n });\n}\n\n/**\n * Normalmente, este método será llamado desde un\n * action de Redux, para eso fue diseñado. Su\n * utilidad es la de tomar el estado y alterarlo\n * dependiendo de los parámetros pasados y la lógica\n * de selección de filas y columnas en una grilla,\n * devolviendo un estado coherente que represente\n * las acciones de un usuario en la grilla.\n */\nexport function setNewFocused(\n state: Draft<ISelectableState>,\n {\n /**\n * Propiedad proveniente del evento click o keydown.\n */\n ctrlKey,\n /**\n * Propiedad proveniente del evento click o keydown.\n */\n shiftKey,\n newFocusedColumn,\n newFocusedRow,\n /**\n * Con este método se puede seleccionar cuál celda\n * va a recibir el foco y la selección, o solamente\n * el foco si esta propiedad es pasada en false.\n */\n shouldSelectNewFocused,\n }: INewFocus,\n) {\n let actualNewFocusedRow =\n Math.round(\n addRowBoundary(newFocusedRow ?? state.focusedRow ?? 0, state) * 2,\n ) / 2;\n const actualNewFocusedColumn = addColumnBoundary(\n newFocusedColumn ?? state.focusedColumn,\n state,\n );\n\n state.focusedColumn = actualNewFocusedColumn;\n state.focusedRow = actualNewFocusedRow;\n state.isFocused = shouldSelectNewFocused ?? false;\n\n if (shouldSelectNewFocused === false || actualNewFocusedRow < 0) return;\n\n if (Math.round(actualNewFocusedRow) - actualNewFocusedRow !== 0)\n actualNewFocusedRow = Math.floor(actualNewFocusedRow);\n\n const isDeselectingWithCtrl =\n ctrlKey && state.selectedRows.includes(actualNewFocusedRow);\n\n if (state.allowSelection !== false)\n if (\n (!ctrlKey && !shiftKey) ||\n (state.isMultiple === false && !isDeselectingWithCtrl)\n )\n state.selectedRows = filterNonSellectableRows(state, [\n actualNewFocusedRow,\n ]);\n else if ((ctrlKey && state.isMultiple) || isDeselectingWithCtrl) {\n state.selectedRows = filterNonSellectableRows(\n state,\n state.selectedRows.includes(actualNewFocusedRow)\n ? state.selectedRows.filter(\n (current) => current !== actualNewFocusedRow,\n )\n : [...state.selectedRows, actualNewFocusedRow],\n );\n } else if (shiftKey && state.isMultiple) {\n const sortedSelectedRows = [...state.selectedRows].sort((a, b) => a - b);\n let minSelectedRow = sortedSelectedRows[0];\n let maxSelectedRow = sortedSelectedRows[sortedSelectedRows.length - 1];\n\n if (minSelectedRow === undefined) {\n state.selectedRows = filterNonSellectableRows(state, [\n actualNewFocusedRow,\n ]);\n return;\n }\n\n if (actualNewFocusedRow < minSelectedRow)\n minSelectedRow = actualNewFocusedRow;\n if (actualNewFocusedRow > maxSelectedRow)\n maxSelectedRow = actualNewFocusedRow;\n\n const newSelectedRows = filterNonSellectableRows(\n state,\n new Array(maxSelectedRow - minSelectedRow + 1)\n .fill('')\n .map((_, i) => i + (minSelectedRow ?? 0)),\n );\n\n state.selectedRows = filterNonSellectableRows(state, newSelectedRows);\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,150 +0,0 @@
|
|
|
1
|
-
import React__default from 'react';
|
|
2
|
-
import { TResponsiveTableSortValue } from '../../types.js';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Representa la intención de establecer foco en
|
|
6
|
-
* un elemento de la grilla y alterar el estado
|
|
7
|
-
* de la misma.
|
|
8
|
-
*/
|
|
9
|
-
interface INewFocus {
|
|
10
|
-
altKey?: boolean;
|
|
11
|
-
ctrlKey?: boolean;
|
|
12
|
-
isFocused?: boolean;
|
|
13
|
-
newFocusedRow?: number;
|
|
14
|
-
newFocusedColumn?: number;
|
|
15
|
-
shouldSelectNewFocused?: boolean;
|
|
16
|
-
shiftKey?: boolean;
|
|
17
|
-
}
|
|
18
|
-
/**
|
|
19
|
-
* Contiene las partes importantes para el handler
|
|
20
|
-
* de un evento de teclado.
|
|
21
|
-
*/
|
|
22
|
-
type THandleKey = {
|
|
23
|
-
ev: React__default.KeyboardEvent;
|
|
24
|
-
};
|
|
25
|
-
/**
|
|
26
|
-
* Son los elementos mínimos que toda columna debe
|
|
27
|
-
* tener para ser parte de esta grilla.
|
|
28
|
-
*/
|
|
29
|
-
interface IBasicColumn {
|
|
30
|
-
currentSorting?: TResponsiveTableSortValue;
|
|
31
|
-
name: string;
|
|
32
|
-
}
|
|
33
|
-
/**
|
|
34
|
-
* Son los elementos mínimos que todo filtro debe
|
|
35
|
-
* tener para ser parte de esta grilla.
|
|
36
|
-
*/
|
|
37
|
-
interface IBasicFilter {
|
|
38
|
-
/**
|
|
39
|
-
* LEGACY: El nombre de la columna a la que
|
|
40
|
-
* pertenece este filtro. Puede no tener columna
|
|
41
|
-
* y entonces será tratado como filtro adicional.
|
|
42
|
-
*
|
|
43
|
-
* Me gustaría nombrarlo columnName pero se
|
|
44
|
-
* estableció así desde el principio del desarrollo
|
|
45
|
-
* y está impregnado en todo el desarrollo, haciendo
|
|
46
|
-
* imposible cambiar su nombre con sencillez.
|
|
47
|
-
*/
|
|
48
|
-
column?: string;
|
|
49
|
-
showAsAdditional?: boolean;
|
|
50
|
-
}
|
|
51
|
-
type TBasicRow = {
|
|
52
|
-
/**
|
|
53
|
-
* Si esta propiedad es pasada en true, esta fila
|
|
54
|
-
* no podrá ser seleccionada.
|
|
55
|
-
*/
|
|
56
|
-
forbidSelection?: boolean;
|
|
57
|
-
/**
|
|
58
|
-
* El id es obligatorio para los rows, ya que de
|
|
59
|
-
* esta forma se logra mejorar el performance.
|
|
60
|
-
*/
|
|
61
|
-
id: string;
|
|
62
|
-
/**
|
|
63
|
-
* Si esta propiedad es pasada como true, esta fila
|
|
64
|
-
* será bloqueada.
|
|
65
|
-
*/
|
|
66
|
-
isLocked?: boolean;
|
|
67
|
-
};
|
|
68
|
-
/**
|
|
69
|
-
* Esta interfaz representa el estado de selección
|
|
70
|
-
* en una grilla. Los tipos ColumnType y RowType
|
|
71
|
-
* son opcionales y solamente se ofrecen como una
|
|
72
|
-
* utilidad para la implementación.
|
|
73
|
-
*/
|
|
74
|
-
interface ISelectableState<ColumnType extends IBasicColumn = IBasicColumn, FilterType extends IBasicFilter = IBasicFilter, RowType extends TBasicRow | string = TBasicRow | string> {
|
|
75
|
-
/**
|
|
76
|
-
* IMPORTANTE: Por defecto la grilla no permitirá edición,
|
|
77
|
-
* para permitirlo, se debe especificar allowEdition: true.
|
|
78
|
-
*/
|
|
79
|
-
allowEdition?: boolean;
|
|
80
|
-
/**
|
|
81
|
-
* Si esta propiedad se pasa en true, es posible
|
|
82
|
-
* reordenar las filas de la tabla. Para ello es
|
|
83
|
-
* necesario estar en foco en la tabla y presionar
|
|
84
|
-
* ctrl+m para mover una fila de lugar. Se presiona
|
|
85
|
-
* Enter o Escape para salir del modo orden.
|
|
86
|
-
*/
|
|
87
|
-
allowRowsKeyboardSorting?: boolean;
|
|
88
|
-
/**
|
|
89
|
-
* Por defecto, la grilla permitirá la selección de filas,
|
|
90
|
-
* para evitar este comportamiento se debe pasar
|
|
91
|
-
* allowSelection: false.
|
|
92
|
-
*/
|
|
93
|
-
allowSelection?: boolean;
|
|
94
|
-
/**
|
|
95
|
-
* Es importante conocer las columnas para no hacer foco
|
|
96
|
-
* en una columna que no exista.
|
|
97
|
-
*/
|
|
98
|
-
columns: ColumnType[];
|
|
99
|
-
draggingRow?: number;
|
|
100
|
-
/**
|
|
101
|
-
* Es importante conocer cuáles filas están expandidas de
|
|
102
|
-
* modo que al filtrar las filas no seleccionables, las
|
|
103
|
-
* expandidas no se van a tomar en cuenta.
|
|
104
|
-
*/
|
|
105
|
-
expandedRows: number[];
|
|
106
|
-
/**
|
|
107
|
-
* La grilla debe conocer los filtros que se aplican a ella
|
|
108
|
-
* para saber si existe fila de filtros o no.
|
|
109
|
-
*/
|
|
110
|
-
filters: FilterType[];
|
|
111
|
-
focusedRow: number;
|
|
112
|
-
focusedColumn: number;
|
|
113
|
-
hasNonAdditionalFilters: boolean;
|
|
114
|
-
/**
|
|
115
|
-
* Hay grillas que admiten edición, con este booleano
|
|
116
|
-
* es posible evitar que el keyHandler altere el
|
|
117
|
-
* estado de la selección cuando la grilla está en ese
|
|
118
|
-
* modo.
|
|
119
|
-
*/
|
|
120
|
-
isEditionMode?: boolean;
|
|
121
|
-
/**
|
|
122
|
-
* Para efectuar las acciones de foco, es necesario saber
|
|
123
|
-
* si la grilla tiene el foco activo, de modo de evitar
|
|
124
|
-
* que el foco se dispare cuando se está trabajando con
|
|
125
|
-
* otros controles.
|
|
126
|
-
*/
|
|
127
|
-
isFocused: boolean;
|
|
128
|
-
/**
|
|
129
|
-
* Indica si se pueden seleccionar muchas filas o una
|
|
130
|
-
* sola.
|
|
131
|
-
*/
|
|
132
|
-
isMultiple?: boolean;
|
|
133
|
-
/**
|
|
134
|
-
* Es importante conocer las filas para no hacer foco
|
|
135
|
-
* en una fila que no exista.
|
|
136
|
-
*/
|
|
137
|
-
nonAdditionalColumnsCount: number;
|
|
138
|
-
rows: RowType[];
|
|
139
|
-
/**
|
|
140
|
-
* Representa cuáles filas fueron seleccionadas por el
|
|
141
|
-
* usuario. El array resultante es el conjunto de índices
|
|
142
|
-
* de filas seleccionadas. Este array es actualizado
|
|
143
|
-
* automáticamente por el keyHandler.
|
|
144
|
-
*/
|
|
145
|
-
selectedRows: number[];
|
|
146
|
-
statesColumns: number;
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
export type { IBasicColumn, IBasicFilter, INewFocus, ISelectableState, TBasicRow, THandleKey };
|
|
150
|
-
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|