@apia/table 3.0.10 → 3.0.11
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 +15 -8
- package/dist/index.js +81 -28
- package/dist/index.js.map +1 -1
- package/package.json +6 -6
package/dist/index.d.ts
CHANGED
|
@@ -292,6 +292,9 @@ type TResponsiveTableContextProps = TResponsiveTableStoreProps & Pick<ISelectabl
|
|
|
292
292
|
onFilterChange?: (ev: TApiaFilter) => void | Promise<boolean>;
|
|
293
293
|
onFilterBlur?: (ev: TApiaFilter) => unknown;
|
|
294
294
|
onFilterPressEnter?: (ev: TApiaFilter) => unknown;
|
|
295
|
+
FiltersRenderer?: (id: string) => FC<{
|
|
296
|
+
filter: TApiaFilter;
|
|
297
|
+
}>;
|
|
295
298
|
onChangeSelection?: (ev: TResponsiveTableRowsSelectionEvent) => unknown;
|
|
296
299
|
/**
|
|
297
300
|
* Este evento será llamado cada vez que el usuario esté
|
|
@@ -324,7 +327,7 @@ type TResponsiveTableContextProps = TResponsiveTableStoreProps & Pick<ISelectabl
|
|
|
324
327
|
* desee informar de un evento en particular
|
|
325
328
|
* pueda hacerlo en forma sencilla.
|
|
326
329
|
*/
|
|
327
|
-
type TResponsiveTableContext = TModify<Pick<TResponsiveTableContextProps, 'avoidAutoEllipsis' | 'currentBreakPoint' | 'name' | 'onChangeSelection' | 'onFilterBlur' | 'onFilterChange' | 'onFilterPressEnter' | 'onSelectRows' | 'onRowClick' | 'onSortChange' | 'label' | 'SelectionHandler'>, {
|
|
330
|
+
type TResponsiveTableContext = TModify<Pick<TResponsiveTableContextProps, 'avoidAutoEllipsis' | 'FiltersRenderer' | 'currentBreakPoint' | 'name' | 'onChangeSelection' | 'onFilterBlur' | 'onFilterChange' | 'onFilterPressEnter' | 'onSelectRows' | 'onRowClick' | 'onSortChange' | 'label' | 'SelectionHandler'>, {
|
|
328
331
|
labels: typeof defaultLabels;
|
|
329
332
|
name: string;
|
|
330
333
|
}>;
|
|
@@ -582,7 +585,7 @@ interface IPagination {
|
|
|
582
585
|
declare const Pagination: React__default.MemoExoticComponent<({ appliedFilters, areAllFiltersApplied, className, currentPage, disabled, disableReduced, hasMore, hideMaximizeButton, hideRefreshButton, isLoading, isPerforming, listId: outerListId, onDeleteFilters, onPageChange, onRefresh, pageCount, recordsCount: outerRecordsCount, reachedMax, showMaximizeOnSmallBreakpoints, variant, }: IPagination) => React__default.JSX.Element>;
|
|
583
586
|
|
|
584
587
|
declare function useResponsiveTableContext(tableName?: string): TResponsiveTableContext;
|
|
585
|
-
declare const ResponsiveTableContext: React__default.MemoExoticComponent<({ allowEdition, allowRowsKeyboardSorting, avoidAutoEllipsis, allowSelection, allowSorting, avoidReparseSelectionOnRowChange, children, className, currentBreakPoint, customLabels, columns, filters, rows, label, isMultiple, name, onChangeSelection, onFilterBlur, onFilterChange, onFilterPressEnter, onRowClick, onSelectRows, onSortChange, reserveColumnsForStates, SelectionHandler, variant, }: TResponsiveTableContextProps) => React__default.JSX.Element>;
|
|
588
|
+
declare const ResponsiveTableContext: React__default.MemoExoticComponent<({ allowEdition, allowRowsKeyboardSorting, avoidAutoEllipsis, allowSelection, allowSorting, avoidReparseSelectionOnRowChange, children, className, currentBreakPoint, customLabels, columns, filters, FiltersRenderer, rows, label, isMultiple, name, onChangeSelection, onFilterBlur, onFilterChange, onFilterPressEnter, onRowClick, onSelectRows, onSortChange, reserveColumnsForStates, SelectionHandler, variant, }: TResponsiveTableContextProps) => React__default.JSX.Element>;
|
|
586
589
|
|
|
587
590
|
type TypedUseSelectorHook<TState> = <TSelected>(selector: (state: TState) => TSelected, equalityFn?: (a: TSelected, b: TSelected) => boolean) => TSelected;
|
|
588
591
|
declare const responsiveTableStore: _reduxjs_toolkit_dist_configureStore.ToolkitStore<{
|
|
@@ -665,16 +668,14 @@ declare const responsiveTableActions: _reduxjs_toolkit.CaseReducerActions<{
|
|
|
665
668
|
declare class Controller2 {
|
|
666
669
|
readonly tableName: string;
|
|
667
670
|
constructor(tableName: string);
|
|
668
|
-
|
|
669
|
-
setEvents(events:
|
|
670
|
-
onChangeSelection?: (newRows: TResponsiveTableRowsSelectionEvent) => unknown;
|
|
671
|
-
onSelectRows?: (newRows: TResponsiveTableRowsSelectionEvent, focusedIndex: number) => unknown;
|
|
672
|
-
}): void;
|
|
671
|
+
protected events: Pick<TKeyHandlerProps, 'onRowClick' | 'onSelectRows' | 'onChangeSelection'>;
|
|
672
|
+
setEvents(events: Pick<TKeyHandlerProps, 'onRowClick' | 'onSelectRows' | 'onChangeSelection'>): void;
|
|
673
673
|
private unsubscribe;
|
|
674
674
|
private el;
|
|
675
675
|
setRef: (el: HTMLElement) => void;
|
|
676
676
|
handleClickEvent: (ev: MouseEvent) => void;
|
|
677
677
|
handleKeyDownEvent: (ev: KeyboardEvent) => void;
|
|
678
|
+
handleDoubleClickEvent: () => void;
|
|
678
679
|
/**
|
|
679
680
|
* Returns a copy of the current state object
|
|
680
681
|
*/
|
|
@@ -703,11 +704,17 @@ declare class Controller2 {
|
|
|
703
704
|
accordionIndexColumns: TResponsiveTableIndexColumns;
|
|
704
705
|
isLoading: boolean;
|
|
705
706
|
};
|
|
707
|
+
getSelection(): number[];
|
|
706
708
|
setState(state: Partial<TResponsiveTableState>): void;
|
|
707
709
|
updateSelectionState(): void;
|
|
708
710
|
}
|
|
709
711
|
declare function makeController2(tableName: string): [Controller2, FC<TKeyHandlerProps>];
|
|
710
712
|
|
|
713
|
+
declare const TableContextReproducer: ({ children, tableName, }: {
|
|
714
|
+
children: ReactNode;
|
|
715
|
+
tableName: string;
|
|
716
|
+
}) => React.JSX.Element;
|
|
717
|
+
|
|
711
718
|
type TDocNameCellRendererProps$1 = {
|
|
712
719
|
docName: string;
|
|
713
720
|
docUrl: string;
|
|
@@ -790,5 +797,5 @@ declare const TableRenderer: React__default.MemoExoticComponent<({ variant }: {
|
|
|
790
797
|
variant?: string | undefined;
|
|
791
798
|
}) => React__default.JSX.Element>;
|
|
792
799
|
|
|
793
|
-
export { AccordionCell, AccordionDocNameCellRenderer, AccordionElement, AccordionHTMLCellRenderer, AccordionRenderer, Additional, AdditionalColumnDefaultRenderer, Controller2, DefaultCellRenderer, DefaultRowRenderer, DocNameCellRenderer, HTMLCellRenderer, type IAccordionElement, IsLoadingRenderer, NoEllipsisCellRenderer, NoRegistersRenderer, Pagination, PriorityAccordionRenderer, PriorityRenderer, Responsive, ResponsiveTable, ResponsiveTableContext, RowStatesRenderer, Sort, StatusAccordionRenderer, StatusRenderer, type TAccordionCellRenderer, type TAccordionCellRendererProps, type TColoredElement, type TDocNameCellRenderer, type TDocNameCellRendererProps, type TResponsiveTableCell, type TResponsiveTableCellRenderer, type TResponsiveTableCellRendererProps, type TResponsiveTableColumn, type TResponsiveTableContext, type TResponsiveTableContextProps, type TResponsiveTableRow, type TResponsiveTableRowRenderer, type TResponsiveTableRowRendererProps, type TResponsiveTableRowState, type TResponsiveTableRowsSelectionEvent, type TResponsiveTableSortChangeEvent, type TResponsiveTableSortValue, type TResponsiveTableStoreProps, type TResponsiveTableWithRendererElement, TableRenderer, defaultLabels, getPriorityHandler, getStatusRendererClassName, makeAccordionAsyncRenderer, makeAsyncRenderer, makeController2, responsiveTableActions, responsiveTableStore, useResponsiveTable, useResponsiveTableContext };
|
|
800
|
+
export { AccordionCell, AccordionDocNameCellRenderer, AccordionElement, AccordionHTMLCellRenderer, AccordionRenderer, Additional, AdditionalColumnDefaultRenderer, Controller2, DefaultCellRenderer, DefaultRowRenderer, DocNameCellRenderer, HTMLCellRenderer, type IAccordionElement, IsLoadingRenderer, NoEllipsisCellRenderer, NoRegistersRenderer, Pagination, PriorityAccordionRenderer, PriorityRenderer, Responsive, ResponsiveTable, ResponsiveTableContext, RowStatesRenderer, Sort, StatusAccordionRenderer, StatusRenderer, type TAccordionCellRenderer, type TAccordionCellRendererProps, type TColoredElement, type TDocNameCellRenderer, type TDocNameCellRendererProps, type TResponsiveTableCell, type TResponsiveTableCellRenderer, type TResponsiveTableCellRendererProps, type TResponsiveTableColumn, type TResponsiveTableContext, type TResponsiveTableContextProps, type TResponsiveTableRow, type TResponsiveTableRowRenderer, type TResponsiveTableRowRendererProps, type TResponsiveTableRowState, type TResponsiveTableRowsSelectionEvent, type TResponsiveTableSortChangeEvent, type TResponsiveTableSortValue, type TResponsiveTableStoreProps, type TResponsiveTableWithRendererElement, TableContextReproducer, TableRenderer, defaultLabels, getPriorityHandler, getStatusRendererClassName, makeAccordionAsyncRenderer, makeAsyncRenderer, makeController2, responsiveTableActions, responsiveTableStore, useResponsiveTable, useResponsiveTableContext };
|
|
794
801
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.js
CHANGED
|
@@ -4,7 +4,7 @@ import { Box, getVariant, Input, Select, useBreakpointIndex, Label, Link, Spinne
|
|
|
4
4
|
import { useMount, useUpdateEffect, useUnmount, useThrottleFn } from 'ahooks';
|
|
5
5
|
import uniqueId from 'lodash-es/uniqueId';
|
|
6
6
|
import { createSlice, injectReducers, shallowEqual as shallowEqual$1 } from '@apia/store';
|
|
7
|
-
import { addBoundary, useLatest, useUpdateEffect as useUpdateEffect$1, getSpecificParent, isChild, autoDisconnectMutationObserver, getFocusSelector, cantFocusSelector, globalFocus, scrollParentIntoElement, customEvents, debugDispatcher, persistentStorage, EventEmitter, usePrevious, useIntermediateValue, getLabel, getDateFormat, formatMessage, noNaN, downloadUrl, arrayOrArray, useMount as useMount$1 } from '@apia/util';
|
|
7
|
+
import { addBoundary, useLatest, useUpdateEffect as useUpdateEffect$1, getSpecificParent, isChild, autoDisconnectMutationObserver, getFocusSelector, cantFocusSelector, globalFocus, scrollParentIntoElement, customEvents, debugDispatcher, persistentStorage, EventEmitter, usePrevious, useIntermediateValue, getLabel, getDateFormat, formatMessage, noNaN, getIndex, downloadUrl, arrayOrArray, useMount as useMount$1 } from '@apia/util';
|
|
8
8
|
import { shallowEqual } from 'react-redux';
|
|
9
9
|
import { useOtherTagButton, AutoEllipsis, ApiaFilter, IconButton, AccordionItem, Accordion, RequiredMark, ApiaUtil, SimpleButton } from '@apia/components';
|
|
10
10
|
import { Icon } from '@apia/icons';
|
|
@@ -468,6 +468,7 @@ const NoMemoResponsiveTableContext = ({
|
|
|
468
468
|
customLabels,
|
|
469
469
|
columns,
|
|
470
470
|
filters,
|
|
471
|
+
FiltersRenderer,
|
|
471
472
|
rows,
|
|
472
473
|
label,
|
|
473
474
|
isMultiple,
|
|
@@ -497,6 +498,7 @@ const NoMemoResponsiveTableContext = ({
|
|
|
497
498
|
label,
|
|
498
499
|
labels,
|
|
499
500
|
avoidAutoEllipsis,
|
|
501
|
+
FiltersRenderer,
|
|
500
502
|
name: actualName,
|
|
501
503
|
onChangeSelection,
|
|
502
504
|
onFilterBlur,
|
|
@@ -513,6 +515,7 @@ const NoMemoResponsiveTableContext = ({
|
|
|
513
515
|
labels,
|
|
514
516
|
avoidAutoEllipsis,
|
|
515
517
|
actualName,
|
|
518
|
+
FiltersRenderer,
|
|
516
519
|
onChangeSelection,
|
|
517
520
|
onFilterBlur,
|
|
518
521
|
onFilterChange,
|
|
@@ -1520,7 +1523,7 @@ const NoMemoRangeFilter = ({
|
|
|
1520
1523
|
};
|
|
1521
1524
|
const RangeFilter = NoMemoRangeFilter;
|
|
1522
1525
|
|
|
1523
|
-
const FilterCell = ({ columnIndex, filter }) => {
|
|
1526
|
+
const FilterCell = ({ columnIndex, filter, Renderer }) => {
|
|
1524
1527
|
const { name, onFilterBlur, onFilterChange, onFilterPressEnter } = useResponsiveTableContext();
|
|
1525
1528
|
const domProps = useDomProps(
|
|
1526
1529
|
"filterTd",
|
|
@@ -1574,11 +1577,11 @@ const FilterCell = ({ columnIndex, filter }) => {
|
|
|
1574
1577
|
}
|
|
1575
1578
|
return /* @__PURE__ */ jsx(Input, { "aria-label": label, disabled: true });
|
|
1576
1579
|
}
|
|
1577
|
-
return /* @__PURE__ */ jsx("td", { ...domProps, children: findFilter() });
|
|
1580
|
+
return /* @__PURE__ */ jsx("td", { ...domProps, children: Renderer ? /* @__PURE__ */ jsx(Renderer, { filter }) : findFilter() });
|
|
1578
1581
|
};
|
|
1579
1582
|
|
|
1580
1583
|
const NoMemoHeader = () => {
|
|
1581
|
-
const { name } = useResponsiveTableContext();
|
|
1584
|
+
const { name, FiltersRenderer } = useResponsiveTableContext();
|
|
1582
1585
|
const columns = useResponsiveTable(
|
|
1583
1586
|
(global) => global.responsiveTableSlice[name]?.columns
|
|
1584
1587
|
);
|
|
@@ -1697,6 +1700,8 @@ const NoMemoHeader = () => {
|
|
|
1697
1700
|
(filters?.length ?? 0) > 0 && /* @__PURE__ */ jsxs(
|
|
1698
1701
|
"tr",
|
|
1699
1702
|
{
|
|
1703
|
+
"aria-rowindex": 2,
|
|
1704
|
+
"data-rowindex": -1,
|
|
1700
1705
|
ref: setRef,
|
|
1701
1706
|
"data-focusindex": 2,
|
|
1702
1707
|
className: `responsiveTable__filters__row ${isFiltersRowVisible ? "" : "hidden"}`,
|
|
@@ -1713,15 +1718,17 @@ const NoMemoHeader = () => {
|
|
|
1713
1718
|
}
|
|
1714
1719
|
),
|
|
1715
1720
|
statesIds.map((id, i) => /* @__PURE__ */ jsx(StateCell, { isHeader: true, index: i, rowIndex: 2 }, id)),
|
|
1716
|
-
columns?.filter((current) => !current.showAsAdditional).map((current, columnIndex) => {
|
|
1721
|
+
columns?.filter((current) => !current.showAsAdditional && !current.hidden).map((current, columnIndex) => {
|
|
1717
1722
|
const filter = filters.find(
|
|
1718
1723
|
(search) => search.definition.column === current.name
|
|
1719
1724
|
);
|
|
1725
|
+
const RenderComponent = filter ? FiltersRenderer?.(String(filter.definition.id)) : void 0;
|
|
1720
1726
|
return current.showAsAdditional ? null : /* @__PURE__ */ jsx(
|
|
1721
1727
|
FilterCell,
|
|
1722
1728
|
{
|
|
1723
1729
|
columnIndex,
|
|
1724
|
-
filter: filter?.definition
|
|
1730
|
+
filter: filter?.definition,
|
|
1731
|
+
Renderer: RenderComponent
|
|
1725
1732
|
},
|
|
1726
1733
|
current.name
|
|
1727
1734
|
);
|
|
@@ -2405,12 +2412,19 @@ const NoMemoInnerRender = React.forwardRef(
|
|
|
2405
2412
|
filters,
|
|
2406
2413
|
tableName
|
|
2407
2414
|
}, ref) => {
|
|
2408
|
-
const {
|
|
2415
|
+
const {
|
|
2416
|
+
onFilterBlur,
|
|
2417
|
+
onFilterChange,
|
|
2418
|
+
onFilterPressEnter,
|
|
2419
|
+
name,
|
|
2420
|
+
FiltersRenderer
|
|
2421
|
+
} = useResponsiveTableContext(tableName);
|
|
2409
2422
|
const [lastEmittedValue, setLastEmittedValue] = React.useState(null);
|
|
2410
2423
|
const [lastEmittedValueByPartner, setLastEmittedValueByPartner] = React.useState(null);
|
|
2411
2424
|
return /* @__PURE__ */ jsx(Box, { ref, className: "filtersRender", children: filters?.map((filter, key) => {
|
|
2412
2425
|
if (filter.hide)
|
|
2413
2426
|
return null;
|
|
2427
|
+
const Renderer = FiltersRenderer?.(String(filter.id));
|
|
2414
2428
|
const isDate = filter.type === "D" || filter.type === "date";
|
|
2415
2429
|
const filterToId = filter.filterToId ?? `${filter.id}i`;
|
|
2416
2430
|
const filterTo = {
|
|
@@ -2436,7 +2450,7 @@ const NoMemoInnerRender = React.forwardRef(
|
|
|
2436
2450
|
/* @__PURE__ */ jsx(Box, { as: "span", children: isDate && !filter.hideToFilter ? formatMessage(window.LBL_DATE_FILTER_FROM_TXT, {
|
|
2437
2451
|
TOK1: filterTitle
|
|
2438
2452
|
}) : filterTitle }),
|
|
2439
|
-
filter.isRange ? /* @__PURE__ */ jsx(RangeFilter, { filter }) : /* @__PURE__ */ jsx(
|
|
2453
|
+
Renderer ? /* @__PURE__ */ jsx(Renderer, { filter }) : filter.isRange ? /* @__PURE__ */ jsx(RangeFilter, { filter }) : /* @__PURE__ */ jsx(
|
|
2440
2454
|
ApiaFilter,
|
|
2441
2455
|
{
|
|
2442
2456
|
filter,
|
|
@@ -3008,15 +3022,23 @@ function setAriaAttributes(element, attribute, value) {
|
|
|
3008
3022
|
element.setAttribute(attribute, value);
|
|
3009
3023
|
}
|
|
3010
3024
|
function getRowDomProps(rowIndex, state) {
|
|
3025
|
+
const elementType = getIndex(
|
|
3026
|
+
["headerTr", "filtersTr", "tr"],
|
|
3027
|
+
[
|
|
3028
|
+
rowIndex == -2 || !state.hasNonAdditionalFilters && rowIndex == -1,
|
|
3029
|
+
rowIndex == -1,
|
|
3030
|
+
true
|
|
3031
|
+
]
|
|
3032
|
+
);
|
|
3011
3033
|
return getDomProps(
|
|
3012
3034
|
getDomStoreProps(
|
|
3013
|
-
|
|
3035
|
+
elementType,
|
|
3014
3036
|
{
|
|
3015
3037
|
rowIndex
|
|
3016
3038
|
},
|
|
3017
3039
|
() => state
|
|
3018
3040
|
),
|
|
3019
|
-
|
|
3041
|
+
elementType,
|
|
3020
3042
|
{ rowIndex }
|
|
3021
3043
|
);
|
|
3022
3044
|
}
|
|
@@ -3059,7 +3081,7 @@ function handleMouseDownEvent(ev) {
|
|
|
3059
3081
|
const rowIndex = Number.parseInt(row.dataset.rowindex || "a", 10);
|
|
3060
3082
|
const colIndex = Number.parseInt(cell.ariaColIndex || "a", 10);
|
|
3061
3083
|
if (!isNaN(rowIndex) && !isNaN(colIndex)) {
|
|
3062
|
-
if (!ev.ctrlKey && !ev.shiftKey) {
|
|
3084
|
+
if (!ev.ctrlKey && !ev.shiftKey || state.isMultiple === false) {
|
|
3063
3085
|
state.selectedRows = [rowIndex];
|
|
3064
3086
|
} else if (ev.ctrlKey) {
|
|
3065
3087
|
if (state.selectedRows.includes(rowIndex)) {
|
|
@@ -3084,6 +3106,10 @@ function handleMouseDownEvent(ev) {
|
|
|
3084
3106
|
applySelectionAttributes(table, this.getState(), state);
|
|
3085
3107
|
applyFocusAttributes(table, this.getState(), state);
|
|
3086
3108
|
this.setState(state);
|
|
3109
|
+
this.events.onRowClick?.(
|
|
3110
|
+
{ row: state.rows[state.focusedRow], index: state.focusedRow },
|
|
3111
|
+
state.focusedRow
|
|
3112
|
+
);
|
|
3087
3113
|
} else {
|
|
3088
3114
|
console.warn("Cannot parse rowIndex or colIndex");
|
|
3089
3115
|
}
|
|
@@ -3139,7 +3165,7 @@ function handleKeyDownEvent(ev) {
|
|
|
3139
3165
|
state.hasNonAdditionalFilters ? -2 : -1,
|
|
3140
3166
|
state.rows.length - 1
|
|
3141
3167
|
);
|
|
3142
|
-
if (ev.ctrlKey) ; else if (ev.shiftKey) {
|
|
3168
|
+
if (ev.ctrlKey) ; else if (ev.shiftKey && state.isMultiple !== false) {
|
|
3143
3169
|
state.selectedRows = [
|
|
3144
3170
|
...state.selectedRows,
|
|
3145
3171
|
state.focusedRow
|
|
@@ -3154,7 +3180,7 @@ function handleKeyDownEvent(ev) {
|
|
|
3154
3180
|
state.hasNonAdditionalFilters ? -2 : -1,
|
|
3155
3181
|
state.rows.length - 1
|
|
3156
3182
|
);
|
|
3157
|
-
if (ev.ctrlKey) ; else if (ev.shiftKey) {
|
|
3183
|
+
if (ev.ctrlKey) ; else if (ev.shiftKey && state.isMultiple !== false) {
|
|
3158
3184
|
state.selectedRows = [
|
|
3159
3185
|
...state.selectedRows,
|
|
3160
3186
|
state.focusedRow
|
|
@@ -3174,13 +3200,13 @@ function handleKeyDownEvent(ev) {
|
|
|
3174
3200
|
state.focusedColumn = addBoundary(
|
|
3175
3201
|
state.focusedColumn + 1,
|
|
3176
3202
|
0,
|
|
3177
|
-
state.columns.length
|
|
3203
|
+
state.columns.length + (state.hasNonAdditionalFilters ? 1 : 0)
|
|
3178
3204
|
);
|
|
3179
3205
|
break;
|
|
3180
3206
|
case "Home":
|
|
3181
3207
|
if (state.focusedColumn === 0) {
|
|
3182
3208
|
state.focusedRow = state.hasNonAdditionalFilters ? -2 : -1;
|
|
3183
|
-
if (ev.ctrlKey) ; else if (ev.shiftKey) {
|
|
3209
|
+
if (ev.ctrlKey) ; else if (ev.shiftKey && state.isMultiple !== false) {
|
|
3184
3210
|
const max = Math.max(
|
|
3185
3211
|
state.focusedRow,
|
|
3186
3212
|
this.getState().focusedRow
|
|
@@ -3202,7 +3228,7 @@ function handleKeyDownEvent(ev) {
|
|
|
3202
3228
|
case "End":
|
|
3203
3229
|
if (state.focusedColumn === 0) {
|
|
3204
3230
|
state.focusedRow = state.rows.length - 1;
|
|
3205
|
-
if (ev.ctrlKey) ; else if (ev.shiftKey) {
|
|
3231
|
+
if (ev.ctrlKey) ; else if (ev.shiftKey && state.isMultiple !== false) {
|
|
3206
3232
|
const max = Math.max(
|
|
3207
3233
|
state.focusedRow,
|
|
3208
3234
|
this.getState().focusedRow
|
|
@@ -3227,7 +3253,7 @@ function handleKeyDownEvent(ev) {
|
|
|
3227
3253
|
state.hasNonAdditionalFilters ? -2 : -1,
|
|
3228
3254
|
state.rows.length - 1
|
|
3229
3255
|
);
|
|
3230
|
-
if (ev.ctrlKey) ; else if (ev.shiftKey) {
|
|
3256
|
+
if (ev.ctrlKey) ; else if (ev.shiftKey && state.isMultiple !== false) {
|
|
3231
3257
|
const previousFocused = this.getState().focusedRow;
|
|
3232
3258
|
state.selectedRows = [...state.selectedRows];
|
|
3233
3259
|
const min = Math.min(previousFocused, state.focusedRow);
|
|
@@ -3245,7 +3271,7 @@ function handleKeyDownEvent(ev) {
|
|
|
3245
3271
|
state.hasNonAdditionalFilters ? -2 : -1,
|
|
3246
3272
|
state.rows.length - 1
|
|
3247
3273
|
);
|
|
3248
|
-
if (ev.ctrlKey) ; else if (ev.shiftKey) {
|
|
3274
|
+
if (ev.ctrlKey) ; else if (ev.shiftKey && state.isMultiple !== false) {
|
|
3249
3275
|
const previousFocused = this.getState().focusedRow;
|
|
3250
3276
|
state.selectedRows = [...state.selectedRows];
|
|
3251
3277
|
const min = Math.min(previousFocused, state.focusedRow);
|
|
@@ -3257,11 +3283,21 @@ function handleKeyDownEvent(ev) {
|
|
|
3257
3283
|
state.selectedRows = [state.focusedRow];
|
|
3258
3284
|
}
|
|
3259
3285
|
break;
|
|
3260
|
-
case "Enter":
|
|
3286
|
+
case "Enter": {
|
|
3261
3287
|
state.isEditionMode = true;
|
|
3262
3288
|
this.setState(state);
|
|
3263
3289
|
applyFocusAttributes(table, this.getState(), state);
|
|
3290
|
+
if (state.focusedRow >= 0) {
|
|
3291
|
+
this.events.onSelectRows?.(
|
|
3292
|
+
this.getSelection().map((index) => ({
|
|
3293
|
+
index,
|
|
3294
|
+
row: this.getState().rows[index]
|
|
3295
|
+
})),
|
|
3296
|
+
state.focusedRow
|
|
3297
|
+
);
|
|
3298
|
+
}
|
|
3264
3299
|
return;
|
|
3300
|
+
}
|
|
3265
3301
|
}
|
|
3266
3302
|
state.isFocused = true;
|
|
3267
3303
|
applySelectionAttributes(table, this.getState(), state);
|
|
@@ -3293,14 +3329,25 @@ class Controller2 {
|
|
|
3293
3329
|
if (el) {
|
|
3294
3330
|
el.addEventListener("keydown", this.handleKeyDownEvent);
|
|
3295
3331
|
el.addEventListener("mousedown", this.handleClickEvent);
|
|
3332
|
+
el.addEventListener("dblclick", this.handleDoubleClickEvent);
|
|
3296
3333
|
this.unsubscribe = () => {
|
|
3297
3334
|
el.removeEventListener("keydown", this.handleKeyDownEvent);
|
|
3298
3335
|
el.removeEventListener("mousedown", this.handleClickEvent);
|
|
3336
|
+
el.removeEventListener("dblclick", this.handleDoubleClickEvent);
|
|
3299
3337
|
};
|
|
3300
3338
|
}
|
|
3301
3339
|
});
|
|
3302
3340
|
__publicField(this, "handleClickEvent");
|
|
3303
3341
|
__publicField(this, "handleKeyDownEvent");
|
|
3342
|
+
__publicField(this, "handleDoubleClickEvent", () => {
|
|
3343
|
+
this.events.onSelectRows?.(
|
|
3344
|
+
this.getSelection().map((index) => ({
|
|
3345
|
+
index,
|
|
3346
|
+
row: this.getState().rows[index]
|
|
3347
|
+
})),
|
|
3348
|
+
this.getState().focusedRow
|
|
3349
|
+
);
|
|
3350
|
+
});
|
|
3304
3351
|
this.handleClickEvent = handleMouseDownEvent.bind(this);
|
|
3305
3352
|
this.handleKeyDownEvent = handleKeyDownEvent.bind(this);
|
|
3306
3353
|
}
|
|
@@ -3315,6 +3362,10 @@ class Controller2 {
|
|
|
3315
3362
|
...responsiveTableStore.getState().responsiveTableSlice[this.tableName]
|
|
3316
3363
|
};
|
|
3317
3364
|
}
|
|
3365
|
+
getSelection() {
|
|
3366
|
+
const selectedRows = new Set(this.getState().selectedRows);
|
|
3367
|
+
return [...selectedRows.values()];
|
|
3368
|
+
}
|
|
3318
3369
|
setState(state) {
|
|
3319
3370
|
if (state.selectedRows && !shallowEqual$1(state.selectedRows, this.getState().selectedRows)) {
|
|
3320
3371
|
this.events.onChangeSelection?.(
|
|
@@ -3323,13 +3374,6 @@ class Controller2 {
|
|
|
3323
3374
|
row: this.getState().rows[index]
|
|
3324
3375
|
}))
|
|
3325
3376
|
);
|
|
3326
|
-
this.events.onSelectRows?.(
|
|
3327
|
-
state.selectedRows.map((index) => ({
|
|
3328
|
-
index,
|
|
3329
|
-
row: this.getState().rows[index]
|
|
3330
|
-
})),
|
|
3331
|
-
state.focusedRow
|
|
3332
|
-
);
|
|
3333
3377
|
}
|
|
3334
3378
|
if (state.scrollIntoViewRow !== void 0 && state.scrollIntoViewRow !== this.getState().scrollIntoViewRow) {
|
|
3335
3379
|
const row = this.el?.querySelector(
|
|
@@ -3363,7 +3407,8 @@ const Controller2Component = ({
|
|
|
3363
3407
|
}) => {
|
|
3364
3408
|
controller.setEvents({
|
|
3365
3409
|
onChangeSelection: props.onChangeSelection,
|
|
3366
|
-
onSelectRows: props.onSelectRows
|
|
3410
|
+
onSelectRows: props.onSelectRows,
|
|
3411
|
+
onRowClick: props.onRowClick
|
|
3367
3412
|
});
|
|
3368
3413
|
const previousColumns = useRef([]);
|
|
3369
3414
|
const previousRows = useRef([]);
|
|
@@ -3405,6 +3450,14 @@ function makeController2(tableName) {
|
|
|
3405
3450
|
];
|
|
3406
3451
|
}
|
|
3407
3452
|
|
|
3453
|
+
const TableContextReproducer = ({
|
|
3454
|
+
children,
|
|
3455
|
+
tableName
|
|
3456
|
+
}) => {
|
|
3457
|
+
const context = useResponsiveTableContext(tableName);
|
|
3458
|
+
return /* @__PURE__ */ jsx(ResponsiveTableReactContext.Provider, { value: context, children });
|
|
3459
|
+
};
|
|
3460
|
+
|
|
3408
3461
|
const NoMemoDocNameCellRenderer = React.forwardRef(
|
|
3409
3462
|
({
|
|
3410
3463
|
cell: { children, Renderer, rendererProps, AccordionRenderer, ...cell },
|
|
@@ -3758,5 +3811,5 @@ const NoMemoStatusAccordionRenderer = React.forwardRef(({ cell, column }, curren
|
|
|
3758
3811
|
NoMemoStatusAccordionRenderer.displayName = "StatusAccordionRenderer";
|
|
3759
3812
|
const StatusAccordionRenderer = NoMemoStatusAccordionRenderer;
|
|
3760
3813
|
|
|
3761
|
-
export { AccordionCell, AccordionDocNameCellRenderer, AccordionElement, AccordionHTMLCellRenderer, AccordionRenderer, Additional, AdditionalColumnDefaultRenderer, Controller2, DefaultCellRenderer, DefaultRowRenderer, DocNameCellRenderer, HTMLCellRenderer, IsLoadingRenderer, NoEllipsisCellRenderer, NoRegistersRenderer, Pagination, PriorityAccordionRenderer, PriorityRenderer, Responsive, ResponsiveTable, ResponsiveTableContext, RowStatesRenderer, Sort, StatusAccordionRenderer, StatusRenderer, TableRenderer, defaultLabels, getPriorityHandler, getStatusRendererClassName, makeAccordionAsyncRenderer, makeAsyncRenderer, makeController2, responsiveTableActions, responsiveTableStore, useResponsiveTable, useResponsiveTableContext };
|
|
3814
|
+
export { AccordionCell, AccordionDocNameCellRenderer, AccordionElement, AccordionHTMLCellRenderer, AccordionRenderer, Additional, AdditionalColumnDefaultRenderer, Controller2, DefaultCellRenderer, DefaultRowRenderer, DocNameCellRenderer, HTMLCellRenderer, IsLoadingRenderer, NoEllipsisCellRenderer, NoRegistersRenderer, Pagination, PriorityAccordionRenderer, PriorityRenderer, Responsive, ResponsiveTable, ResponsiveTableContext, RowStatesRenderer, Sort, StatusAccordionRenderer, StatusRenderer, TableContextReproducer, TableRenderer, defaultLabels, getPriorityHandler, getStatusRendererClassName, makeAccordionAsyncRenderer, makeAsyncRenderer, makeController2, responsiveTableActions, responsiveTableStore, useResponsiveTable, useResponsiveTableContext };
|
|
3762
3815
|
//# sourceMappingURL=index.js.map
|