@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
package/dist/index.d.ts
CHANGED
|
@@ -1,25 +1,788 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import React__default, { FunctionComponent, ReactNode, FC } from 'react';
|
|
3
|
+
import { BoxProps } from '@apia/theme';
|
|
4
|
+
import { IconType } from '@meronex/icons';
|
|
5
|
+
import * as _apia_util from '@apia/util';
|
|
6
|
+
import { TApiaFilter, TModify, TId } from '@apia/util';
|
|
7
|
+
import * as _reduxjs_toolkit from '@reduxjs/toolkit';
|
|
8
|
+
import { PayloadAction } from '@reduxjs/toolkit';
|
|
9
|
+
import * as immer_dist_internal from 'immer/dist/internal';
|
|
10
|
+
import * as _reduxjs_toolkit_dist_configureStore from '@reduxjs/toolkit/dist/configureStore';
|
|
11
|
+
import * as redux_thunk from 'redux-thunk';
|
|
12
|
+
import * as redux from 'redux';
|
|
13
|
+
|
|
14
|
+
type TAccordionCellRendererProps<CellProps = Record<string, unknown>> = {
|
|
15
|
+
cell: TResponsiveTableCell<CellProps>;
|
|
16
|
+
column: TResponsiveTableColumn;
|
|
17
|
+
columnIndex: number;
|
|
18
|
+
row: TResponsiveTableRow;
|
|
19
|
+
rowIndex: number;
|
|
20
|
+
};
|
|
21
|
+
type TAccordionCellRenderer<CellProps = Record<string, unknown>> = FunctionComponent<TAccordionCellRendererProps<CellProps>>;
|
|
22
|
+
declare const AccordionCell: TAccordionCellRenderer<Record<string, unknown>>;
|
|
23
|
+
|
|
24
|
+
type TColoredElement = {
|
|
25
|
+
background?: string;
|
|
26
|
+
color?: string;
|
|
27
|
+
};
|
|
28
|
+
/**
|
|
29
|
+
* Se encontró en algunos casos particulares que
|
|
30
|
+
* el servidor devuelve Up y Down para referirse
|
|
31
|
+
* al orden actual de una columna.
|
|
32
|
+
*/
|
|
33
|
+
type TResponsiveTableSortValue = null | 'A' | 'D' | 'Down' | 'Up';
|
|
34
|
+
/**
|
|
35
|
+
* Cada vez que se hace click en el botón del
|
|
36
|
+
* cabezal de una columna, si la columna tiene
|
|
37
|
+
* habilitado el ordenamiento, se emite un
|
|
38
|
+
* evento de este tipo, informando cuál columna
|
|
39
|
+
* emitió el evento, y cuál es el nuevo sortValue.
|
|
40
|
+
*/
|
|
41
|
+
type TResponsiveTableSortChangeEvent = {
|
|
42
|
+
name: string;
|
|
43
|
+
column: TResponsiveTableColumn;
|
|
44
|
+
columnIndex: number;
|
|
45
|
+
/**
|
|
46
|
+
* Es el orden que la columna debería tener
|
|
47
|
+
* si no hay ningún motivo para evitar que
|
|
48
|
+
* la acción de ordenamiento se lleve a cabo.
|
|
49
|
+
*
|
|
50
|
+
* Es importante notar que el componente
|
|
51
|
+
* responsiveTable no realiza ninguna acción
|
|
52
|
+
* de ordenamiento por defecto, sino que es
|
|
53
|
+
* quien la usa, quien debe realizar las
|
|
54
|
+
* acciones correspondientes e informarlo a
|
|
55
|
+
* la tabla actualizando los registros y el
|
|
56
|
+
* estado de la columna correspondiente.
|
|
57
|
+
*/
|
|
58
|
+
sortValue: TResponsiveTableSortValue;
|
|
59
|
+
};
|
|
60
|
+
/**
|
|
61
|
+
* Cada celda admite un renderer, que recibe
|
|
62
|
+
* propiedades personalizadas. Este tipo define
|
|
63
|
+
* cuál es la forma de esas propiedades.
|
|
64
|
+
*/
|
|
65
|
+
type TResponsiveTableCellRendererProps<RendererPropsType extends Partial<Record<keyof RendererPropsType, unknown>> = Record<string, unknown>, HTML = HTMLTableCellElement> = {
|
|
66
|
+
cell: TResponsiveTableCell<RendererPropsType>;
|
|
67
|
+
column: TResponsiveTableColumn;
|
|
68
|
+
row: TResponsiveTableRow;
|
|
69
|
+
} & React__default.AllHTMLAttributes<HTML>;
|
|
70
|
+
type TResponsiveTableCellRenderer<RendererPropsType extends Partial<Record<keyof RendererPropsType, unknown>> = Record<string, unknown>> = React__default.FunctionComponent<TResponsiveTableCellRendererProps<RendererPropsType>>;
|
|
71
|
+
/**
|
|
72
|
+
* Algunos elementos de la tabla admiten un
|
|
73
|
+
* Renderer personalizado. Dichos elementos
|
|
74
|
+
* extienden este tipo.
|
|
75
|
+
*/
|
|
76
|
+
type TResponsiveTableWithRendererElement<RendererPropsType extends Partial<Record<keyof RendererPropsType, unknown>> = Record<string, unknown>> = {
|
|
77
|
+
/**
|
|
78
|
+
* Si se desea, el elemento admite un componente
|
|
79
|
+
* personalizado para encargarse del renderizado
|
|
80
|
+
* del mismo en el modo responsivo. De esta forma, se puede proveer
|
|
81
|
+
* de comportamiento específico a cualquier
|
|
82
|
+
* elemento de la tabla.
|
|
83
|
+
*/
|
|
84
|
+
AccordionRenderer?: TAccordionCellRenderer<any>;
|
|
85
|
+
/**
|
|
86
|
+
* Son las propiedades que se desean pasar al
|
|
87
|
+
* componente de renderizado personalizado que
|
|
88
|
+
* se haya establecido.
|
|
89
|
+
*
|
|
90
|
+
* Estas props serán obviadas en caso de que
|
|
91
|
+
* no haya componente de renderizado personalizado.
|
|
92
|
+
*/
|
|
93
|
+
rendererProps?: RendererPropsType;
|
|
94
|
+
/**
|
|
95
|
+
* Si se desea, el elemento admite un componente
|
|
96
|
+
* personalizado para encargarse del renderizado
|
|
97
|
+
* del mismo. De esta forma, se puede proveer
|
|
98
|
+
* de comportamiento específico a cualquier
|
|
99
|
+
* elemento de la tabla.
|
|
100
|
+
*/
|
|
101
|
+
Renderer?: TResponsiveTableCellRenderer<any>;
|
|
102
|
+
};
|
|
103
|
+
type TResponsiveTableCell<RendererPropsType extends Partial<Record<keyof RendererPropsType, unknown>> = Record<string, unknown>> = {
|
|
104
|
+
children?: ReactNode;
|
|
105
|
+
} & TResponsiveTableWithRendererElement<RendererPropsType> & Partial<Pick<HTMLTableCellElement, 'ariaLabel' | 'className' | 'colSpan' | 'id' | 'rowSpan' | 'title'>> & TColoredElement;
|
|
106
|
+
/**
|
|
107
|
+
* Cada celda admite un renderer, que recibe
|
|
108
|
+
* propiedades personalizadas. Este tipo define
|
|
109
|
+
* cuál es la forma de esas propiedades.
|
|
110
|
+
*/
|
|
111
|
+
type TResponsiveTableRowRendererProps<RendererPropsType extends Partial<Record<keyof RendererPropsType, unknown>> = Record<string, unknown>> = {
|
|
112
|
+
row: TResponsiveTableRow<RendererPropsType>;
|
|
113
|
+
rowIndex: number;
|
|
114
|
+
} & React__default.AllHTMLAttributes<HTMLTableRowElement>;
|
|
115
|
+
type TResponsiveTableRowRenderer<RendererPropsType extends Partial<Record<keyof RendererPropsType, unknown>> = Record<string, unknown>> = React__default.FunctionComponent<TResponsiveTableRowRendererProps<RendererPropsType>>;
|
|
116
|
+
type TResponsiveTableRow<RendererPropsType extends Partial<Record<keyof RendererPropsType, unknown>> = Record<string, unknown>> = TBasicRow & TColoredElement & {
|
|
117
|
+
accordionButtonProps?: {
|
|
118
|
+
rightButtons?: React__default.ReactNode;
|
|
119
|
+
onUserPressEnter?: (ev: React__default.KeyboardEvent) => unknown;
|
|
120
|
+
};
|
|
121
|
+
cells: TResponsiveTableCell[];
|
|
122
|
+
/**
|
|
123
|
+
* Si se pasa en true, la fila se mostrará como un separador
|
|
124
|
+
*/
|
|
125
|
+
separator?: boolean;
|
|
126
|
+
initiallySelected?: boolean;
|
|
127
|
+
renderer?: TResponsiveTableRowRenderer<RendererPropsType>;
|
|
128
|
+
rendererProps?: RendererPropsType;
|
|
129
|
+
/**
|
|
130
|
+
* Permite pasar propiedades arbitrarias a un row y recuperarlas en los
|
|
131
|
+
* eventos de onClick por ejemplo.
|
|
132
|
+
*/
|
|
133
|
+
rowProps?: RendererPropsType;
|
|
134
|
+
isHidden?: boolean;
|
|
135
|
+
/**
|
|
136
|
+
* Los estados de la fila agregan un ícono en la columna
|
|
137
|
+
* especial que es la que se muestra a la izquierda y
|
|
138
|
+
* contiene, cuando existe, el botón de más información.
|
|
139
|
+
*/
|
|
140
|
+
states?: TResponsiveTableRowState[];
|
|
141
|
+
} & Partial<Pick<HTMLTableCellElement, 'ariaLabel' | 'colSpan' | 'className' | 'rowSpan' | 'title'>>;
|
|
142
|
+
type TResponsiveTableRowState = {
|
|
143
|
+
/**
|
|
144
|
+
* Es un className que se agregará al elemento <tr>
|
|
145
|
+
*/
|
|
146
|
+
className?: string;
|
|
147
|
+
Icon: IconType;
|
|
148
|
+
color?: string;
|
|
149
|
+
tooltip: string;
|
|
150
|
+
};
|
|
151
|
+
type TResponsiveTableColumn = TResponsiveTableWithRendererElement & {
|
|
152
|
+
/** Con esta propiedad se puede pasar parámetros opcionales */
|
|
153
|
+
additionalData?: Record<string, unknown>;
|
|
154
|
+
/**
|
|
155
|
+
* Determina si la columna admite ordenamiento.
|
|
156
|
+
*/
|
|
157
|
+
allowSorting?: boolean;
|
|
158
|
+
children?: React__default.ReactNode;
|
|
159
|
+
/**
|
|
160
|
+
* Cuando la columna admite ordenamiento, muestra
|
|
161
|
+
* una flecha indicando el orden actual. Esta
|
|
162
|
+
* propiedad establece si la flecha apunta hacia
|
|
163
|
+
* arriba, abajo, o si la flecha es un guión.
|
|
164
|
+
*/
|
|
165
|
+
currentSorting?: TResponsiveTableSortValue;
|
|
166
|
+
/** *
|
|
167
|
+
* Valor para decirle al server cuál columna se está ordenando
|
|
168
|
+
*/
|
|
169
|
+
dataSortBy?: string;
|
|
170
|
+
hidden?: boolean;
|
|
171
|
+
/**
|
|
172
|
+
* Normalmente, todas las columnas se van a mostrar
|
|
173
|
+
* como renglones en el acordión, cuando este es
|
|
174
|
+
* expandido.
|
|
175
|
+
*
|
|
176
|
+
* Si este flag es pasado en true, la columna
|
|
177
|
+
* correspondiente no se va a mostrar en modo
|
|
178
|
+
* responsivo.
|
|
179
|
+
*/
|
|
180
|
+
hideFromAccordion?: boolean;
|
|
181
|
+
/**
|
|
182
|
+
* Elemento id del dom.
|
|
183
|
+
*/
|
|
184
|
+
id?: string;
|
|
185
|
+
/**
|
|
186
|
+
* Es el texto que se mostrará en el cabezal.
|
|
187
|
+
*/
|
|
188
|
+
label: string;
|
|
189
|
+
maxWidth?: number | string;
|
|
190
|
+
minWidth?: number | string;
|
|
191
|
+
/**
|
|
192
|
+
* El nombre de la columna debe ser único, se utiliza
|
|
193
|
+
* para realizar la asosiación entre las columnas
|
|
194
|
+
* y los filtros, así como con los eventos de orden.
|
|
195
|
+
*/
|
|
196
|
+
name: string;
|
|
197
|
+
/**
|
|
198
|
+
* Si se pasa required: true, se pone un asterisco
|
|
199
|
+
* rojo en el cabezal de la columna para señalar que
|
|
200
|
+
* la columna es requerida.
|
|
201
|
+
*/
|
|
202
|
+
required?: boolean;
|
|
203
|
+
/**
|
|
204
|
+
* Algunas columnas podrán mostrarse mediante un botón
|
|
205
|
+
* "mostrar más", para ello deberán ser marcadas con
|
|
206
|
+
* esta prop en true.
|
|
207
|
+
*/
|
|
208
|
+
showAsAdditional?: boolean;
|
|
209
|
+
/**
|
|
210
|
+
* Cuando no se pasa esta propiedad en ninguna columna,
|
|
211
|
+
* la aplicación encuentra la primera fila sin celdas
|
|
212
|
+
* vacías y la utiliza como título.
|
|
213
|
+
*
|
|
214
|
+
* En cambio, si al menos una columna tiene este flag
|
|
215
|
+
* en true, el título de cada fila del acordión estará
|
|
216
|
+
* compuesto por los valores de estas columnas.
|
|
217
|
+
*/
|
|
218
|
+
showInAccordionTitle?: boolean;
|
|
219
|
+
/**
|
|
220
|
+
* Elemento title de html (El tooltip).
|
|
221
|
+
*/
|
|
222
|
+
title?: string;
|
|
223
|
+
width?: number | string;
|
|
224
|
+
} & Partial<Pick<HTMLTableCellElement, 'ariaLabel' | 'className' | 'colSpan' | 'rowSpan'>>;
|
|
225
|
+
type TResponsiveTableStoreProps = {
|
|
226
|
+
/**
|
|
227
|
+
* Habla sobre el orden de las filas en función de
|
|
228
|
+
* las columnas. Esta propiedad habilita/deshabilita
|
|
229
|
+
* el ordenado de las columnas al hacer click en los
|
|
230
|
+
* cabezales.
|
|
231
|
+
*
|
|
232
|
+
* La tabla admite ordenamiento por defecto, a menos
|
|
233
|
+
* que esta prop venga en false. En caso de que se
|
|
234
|
+
* pase false no importa qué digan las columnas,
|
|
235
|
+
* el ordenamiento no estará habilitado.
|
|
236
|
+
*/
|
|
237
|
+
allowSorting?: boolean;
|
|
238
|
+
columns: TResponsiveTableColumn[];
|
|
239
|
+
filters?: TApiaFilter[];
|
|
240
|
+
rows: TResponsiveTableRow<any>[];
|
|
241
|
+
/**
|
|
242
|
+
* Por defecto, la tabla permitirá seleccionar
|
|
243
|
+
* múltiples valores, a menos que esta prop venga
|
|
244
|
+
* en false.
|
|
245
|
+
*/
|
|
246
|
+
isMultiple?: boolean;
|
|
247
|
+
label?: string;
|
|
248
|
+
/**
|
|
249
|
+
* Es normal que una tabla tenga paginación y que en cada página haya una
|
|
250
|
+
* cantidad distinta de estados. Si se quiere mantener consistencia en el
|
|
251
|
+
* tamaño de las páginas, es posible reservar un tamaño para una cantidad
|
|
252
|
+
* definida de estados con este parámetro.
|
|
253
|
+
*/
|
|
254
|
+
reserveColumnsForStates?: number;
|
|
255
|
+
};
|
|
256
|
+
type TResponsiveTableRowsSelectionEvent = {
|
|
257
|
+
index: number;
|
|
258
|
+
row: TResponsiveTableRow;
|
|
259
|
+
}[];
|
|
260
|
+
type TResponsiveTableContextProps = TResponsiveTableStoreProps & Pick<ISelectableState, 'allowRowsKeyboardSorting' | 'allowEdition' | 'allowSelection'> & {
|
|
261
|
+
/**
|
|
262
|
+
* Cuando se actualiza el array de rows de la tabla
|
|
263
|
+
* desde las props del ResponsiveTableContext, se
|
|
264
|
+
* reinicia el estado de selección de acuerdo a cómo
|
|
265
|
+
* viene definido en el prop. **Si esta prop se pasa
|
|
266
|
+
* en true**, este comportamiento es deshabilitado.
|
|
267
|
+
*/
|
|
268
|
+
avoidReparseSelectionOnRowChange?: boolean;
|
|
269
|
+
children?: React__default.ReactNode;
|
|
270
|
+
className?: string;
|
|
271
|
+
/**
|
|
272
|
+
* Permite redefinir el comportamiento de los breakpoints pasando un índice
|
|
273
|
+
* personalizado. Cuando es pasado, deja de prestar atención al breakpoint
|
|
274
|
+
* de la pantalla y comienza a prestar atención a este índice.
|
|
275
|
+
*/
|
|
276
|
+
currentBreakPoint?: number;
|
|
277
|
+
customLabels?: typeof defaultLabels;
|
|
278
|
+
/**
|
|
279
|
+
* Se puede utilizar este booleano para que la tabla
|
|
280
|
+
* deshabilite las opciones de filtrado y ordenado mientras
|
|
281
|
+
* se está ejecutando una acción ajax.
|
|
282
|
+
*/
|
|
283
|
+
isLoading?: boolean;
|
|
284
|
+
/**
|
|
285
|
+
* La tabla debe tener un nombre único que será usado para
|
|
286
|
+
* acceder a las propiedades de la misma en el store. En caso
|
|
287
|
+
* de que no se pase ninguno, la tabla lo generará
|
|
288
|
+
* automaticamente.
|
|
289
|
+
*/
|
|
290
|
+
name?: string;
|
|
291
|
+
onFilterChange?: (ev: TApiaFilter) => void | Promise<boolean>;
|
|
292
|
+
onFilterBlur?: (ev: TApiaFilter) => unknown;
|
|
293
|
+
onFilterPressEnter?: (ev: TApiaFilter) => unknown;
|
|
294
|
+
onChangeSelection?: (ev: TResponsiveTableRowsSelectionEvent) => unknown;
|
|
295
|
+
/**
|
|
296
|
+
* Este evento será llamado cada vez que el usuario esté
|
|
297
|
+
* haciendo foco en la tabla, tenga una selección de
|
|
298
|
+
* filas no vacía y presione la tecla Enter.
|
|
299
|
+
*/
|
|
300
|
+
onSelectRows?: (ev: TResponsiveTableRowsSelectionEvent, focusedRowIndex: number) => unknown;
|
|
301
|
+
/**
|
|
302
|
+
* Es llamado cada vez que el usuario hace click en el botón
|
|
303
|
+
* del cabezal de la columna. **Importante:** la tabla no
|
|
304
|
+
* realizará ninguna acción de ordenamiento, sino solamente
|
|
305
|
+
* avisar de que el usuario desea que las filas sean ordenadas
|
|
306
|
+
* por alguna columna en particular.
|
|
307
|
+
*/
|
|
308
|
+
onSortChange?: (ev: TResponsiveTableSortChangeEvent) => unknown;
|
|
309
|
+
/**
|
|
310
|
+
* Si se pasa selectionHandler, la tabla no realizará ningún control de eventos de teclado o mouse.
|
|
311
|
+
*/
|
|
312
|
+
SelectionHandler?: FC<TKeyHandlerProps>;
|
|
313
|
+
variant?: string;
|
|
314
|
+
};
|
|
315
|
+
/**
|
|
316
|
+
* Los callbacks del responsiveTable estarán
|
|
317
|
+
* disponibles a través de un contexto, de
|
|
318
|
+
* forma que cualquier elemento activo que
|
|
319
|
+
* desee informar de un evento en particular
|
|
320
|
+
* pueda hacerlo en forma sencilla.
|
|
321
|
+
*/
|
|
322
|
+
type TResponsiveTableContext = TModify<Pick<TResponsiveTableContextProps, 'currentBreakPoint' | 'name' | 'onChangeSelection' | 'onFilterBlur' | 'onFilterChange' | 'onFilterPressEnter' | 'onSelectRows' | 'onSortChange' | 'label' | 'SelectionHandler'>, {
|
|
323
|
+
labels: typeof defaultLabels;
|
|
324
|
+
name: string;
|
|
325
|
+
}>;
|
|
326
|
+
declare global {
|
|
327
|
+
interface Window {
|
|
328
|
+
FINDER_NO_DATA: string;
|
|
329
|
+
ORDER_ASC_LABEL: string;
|
|
330
|
+
ORDER_DESC_LABEL: string;
|
|
331
|
+
GNR_TOT_RECORDS: string;
|
|
332
|
+
GNR_TOT_RECORDS_REACHED: string;
|
|
333
|
+
QUERY_MORE_DATA: string;
|
|
334
|
+
LBL_MAXIMIZE: string;
|
|
335
|
+
LBL_MINIMIZE: string;
|
|
336
|
+
BTN_FILE_INFO_TOOLTIP: string;
|
|
337
|
+
NAV_FIRST_PAGE: string;
|
|
338
|
+
NAV_PREVIOUS_PAGE: string;
|
|
339
|
+
NAV_INPUT_LABEL: string;
|
|
340
|
+
PAGE: string;
|
|
341
|
+
NAV_NEXT_PAGE: string;
|
|
342
|
+
NAV_LAST_PAGE: string;
|
|
343
|
+
BTN_DELETE_FILTERS: string;
|
|
344
|
+
NAV_REFRESH: string;
|
|
345
|
+
}
|
|
346
|
+
}
|
|
347
|
+
declare const defaultLabels: {
|
|
348
|
+
noRegisters: string;
|
|
349
|
+
};
|
|
350
|
+
|
|
351
|
+
type TResponsiveTableIndexColumns = {
|
|
352
|
+
index: number;
|
|
353
|
+
column: TResponsiveTableColumn;
|
|
354
|
+
}[];
|
|
355
|
+
type TResponsiveTableState = Omit<TResponsiveTableStoreProps, 'columns' | 'rows' | 'filters'> & ISelectableState<TResponsiveTableStoreProps['columns'][0], NonNullable<TResponsiveTableStoreProps['filters']>[0], TResponsiveTableStoreProps['rows'][0]> & {
|
|
356
|
+
accordionIndexColumns: TResponsiveTableIndexColumns;
|
|
357
|
+
isLoading: boolean;
|
|
358
|
+
};
|
|
359
|
+
type TResponsiveTableSlice = Record<string, TResponsiveTableState>;
|
|
360
|
+
type TResponsiveTableAction<P = Record<string, unknown>, T extends string = string, M = never, E = never> = PayloadAction<P & {
|
|
361
|
+
tableName: string;
|
|
362
|
+
}, T, M, E>;
|
|
363
|
+
|
|
364
|
+
/**
|
|
365
|
+
* Representa la intención de establecer foco en
|
|
366
|
+
* un elemento de la grilla y alterar el estado
|
|
367
|
+
* de la misma.
|
|
368
|
+
*/
|
|
369
|
+
interface INewFocus {
|
|
370
|
+
altKey?: boolean;
|
|
371
|
+
ctrlKey?: boolean;
|
|
372
|
+
isFocused?: boolean;
|
|
373
|
+
newFocusedRow?: number;
|
|
374
|
+
newFocusedColumn?: number;
|
|
375
|
+
shouldSelectNewFocused?: boolean;
|
|
376
|
+
shiftKey?: boolean;
|
|
377
|
+
}
|
|
378
|
+
/**
|
|
379
|
+
* Contiene las partes importantes para el handler
|
|
380
|
+
* de un evento de teclado.
|
|
381
|
+
*/
|
|
382
|
+
type THandleKey = {
|
|
383
|
+
ev: React__default.KeyboardEvent;
|
|
384
|
+
};
|
|
385
|
+
/**
|
|
386
|
+
* Son los elementos mínimos que toda columna debe
|
|
387
|
+
* tener para ser parte de esta grilla.
|
|
388
|
+
*/
|
|
389
|
+
interface IBasicColumn {
|
|
390
|
+
currentSorting?: TResponsiveTableSortValue;
|
|
391
|
+
name: string;
|
|
392
|
+
}
|
|
393
|
+
/**
|
|
394
|
+
* Son los elementos mínimos que todo filtro debe
|
|
395
|
+
* tener para ser parte de esta grilla.
|
|
396
|
+
*/
|
|
397
|
+
interface IBasicFilter {
|
|
398
|
+
/**
|
|
399
|
+
* LEGACY: El nombre de la columna a la que
|
|
400
|
+
* pertenece este filtro. Puede no tener columna
|
|
401
|
+
* y entonces será tratado como filtro adicional.
|
|
402
|
+
*
|
|
403
|
+
* Me gustaría nombrarlo columnName pero se
|
|
404
|
+
* estableció así desde el principio del desarrollo
|
|
405
|
+
* y está impregnado en todo el desarrollo, haciendo
|
|
406
|
+
* imposible cambiar su nombre con sencillez.
|
|
407
|
+
*/
|
|
408
|
+
column?: string;
|
|
409
|
+
showAsAdditional?: boolean;
|
|
410
|
+
}
|
|
411
|
+
type TBasicRow = {
|
|
412
|
+
/**
|
|
413
|
+
* Si esta propiedad es pasada en true, esta fila
|
|
414
|
+
* no podrá ser seleccionada.
|
|
415
|
+
*/
|
|
416
|
+
forbidSelection?: boolean;
|
|
417
|
+
/**
|
|
418
|
+
* El id es obligatorio para los rows, ya que de
|
|
419
|
+
* esta forma se logra mejorar el performance.
|
|
420
|
+
*/
|
|
421
|
+
id: string;
|
|
422
|
+
/**
|
|
423
|
+
* Si esta propiedad es pasada como true, esta fila
|
|
424
|
+
* será bloqueada.
|
|
425
|
+
*/
|
|
426
|
+
isLocked?: boolean;
|
|
427
|
+
};
|
|
428
|
+
/**
|
|
429
|
+
* Esta interfaz representa el estado de selección
|
|
430
|
+
* en una grilla. Los tipos ColumnType y RowType
|
|
431
|
+
* son opcionales y solamente se ofrecen como una
|
|
432
|
+
* utilidad para la implementación.
|
|
433
|
+
*/
|
|
434
|
+
interface ISelectableState<ColumnType extends IBasicColumn = IBasicColumn, FilterType extends IBasicFilter = IBasicFilter, RowType extends TBasicRow | string = TBasicRow | string> {
|
|
435
|
+
/**
|
|
436
|
+
* IMPORTANTE: Por defecto la grilla no permitirá edición,
|
|
437
|
+
* para permitirlo, se debe especificar allowEdition: true.
|
|
438
|
+
*/
|
|
439
|
+
allowEdition?: boolean;
|
|
440
|
+
/**
|
|
441
|
+
* Si esta propiedad se pasa en true, es posible
|
|
442
|
+
* reordenar las filas de la tabla. Para ello es
|
|
443
|
+
* necesario estar en foco en la tabla y presionar
|
|
444
|
+
* ctrl+m para mover una fila de lugar. Se presiona
|
|
445
|
+
* Enter o Escape para salir del modo orden.
|
|
446
|
+
*/
|
|
447
|
+
allowRowsKeyboardSorting?: boolean;
|
|
448
|
+
/**
|
|
449
|
+
* Por defecto, la grilla permitirá la selección de filas,
|
|
450
|
+
* para evitar este comportamiento se debe pasar
|
|
451
|
+
* allowSelection: false.
|
|
452
|
+
*/
|
|
453
|
+
allowSelection?: boolean;
|
|
454
|
+
/**
|
|
455
|
+
* Es importante conocer las columnas para no hacer foco
|
|
456
|
+
* en una columna que no exista.
|
|
457
|
+
*/
|
|
458
|
+
columns: ColumnType[];
|
|
459
|
+
draggingRow?: number;
|
|
460
|
+
/**
|
|
461
|
+
* Es importante conocer cuáles filas están expandidas de
|
|
462
|
+
* modo que al filtrar las filas no seleccionables, las
|
|
463
|
+
* expandidas no se van a tomar en cuenta.
|
|
464
|
+
*/
|
|
465
|
+
expandedRows: number[];
|
|
466
|
+
/**
|
|
467
|
+
* La grilla debe conocer los filtros que se aplican a ella
|
|
468
|
+
* para saber si existe fila de filtros o no.
|
|
469
|
+
*/
|
|
470
|
+
filters: FilterType[];
|
|
471
|
+
focusedRow: number;
|
|
472
|
+
focusedColumn: number;
|
|
473
|
+
hasNonAdditionalFilters: boolean;
|
|
474
|
+
/**
|
|
475
|
+
* Hay grillas que admiten edición, con este booleano
|
|
476
|
+
* es posible evitar que el keyHandler altere el
|
|
477
|
+
* estado de la selección cuando la grilla está en ese
|
|
478
|
+
* modo.
|
|
479
|
+
*/
|
|
480
|
+
isEditionMode?: boolean;
|
|
481
|
+
/**
|
|
482
|
+
* Para efectuar las acciones de foco, es necesario saber
|
|
483
|
+
* si la grilla tiene el foco activo, de modo de evitar
|
|
484
|
+
* que el foco se dispare cuando se está trabajando con
|
|
485
|
+
* otros controles.
|
|
486
|
+
*/
|
|
487
|
+
isFocused: boolean;
|
|
488
|
+
/**
|
|
489
|
+
* Indica si se pueden seleccionar muchas filas o una
|
|
490
|
+
* sola.
|
|
491
|
+
*/
|
|
492
|
+
isMultiple?: boolean;
|
|
493
|
+
/**
|
|
494
|
+
* Es importante conocer las filas para no hacer foco
|
|
495
|
+
* en una fila que no exista.
|
|
496
|
+
*/
|
|
497
|
+
nonAdditionalColumnsCount: number;
|
|
498
|
+
rows: RowType[];
|
|
499
|
+
/**
|
|
500
|
+
* **Controller2**
|
|
501
|
+
* Permite definir en qué fila se hará scroll, solamente tiene efecto al cambiar
|
|
502
|
+
*/
|
|
503
|
+
scrollIntoViewRow?: number;
|
|
504
|
+
/**
|
|
505
|
+
* Representa cuáles filas fueron seleccionadas por el
|
|
506
|
+
* usuario. El array resultante es el conjunto de índices
|
|
507
|
+
* de filas seleccionadas. Este array es actualizado
|
|
508
|
+
* automáticamente por el keyHandler.
|
|
509
|
+
*/
|
|
510
|
+
selectedRows: number[];
|
|
511
|
+
statesColumns: number;
|
|
512
|
+
}
|
|
513
|
+
type TKeyHandlerProps = BoxProps & {
|
|
514
|
+
/**
|
|
515
|
+
* Se emite un evento cada vez que el usuario modifica
|
|
516
|
+
* la selección actual.
|
|
517
|
+
*/
|
|
518
|
+
onChangeSelection?: (newRows: TResponsiveTableRowsSelectionEvent) => unknown;
|
|
519
|
+
onSelectRows?: (newRows: TResponsiveTableRowsSelectionEvent, focusedIndex: number) => unknown;
|
|
520
|
+
};
|
|
521
|
+
|
|
522
|
+
declare const ResponsiveTable: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<BoxProps & React__default.RefAttributes<HTMLDivElement>>>;
|
|
523
|
+
|
|
524
|
+
declare const Sort: React__default.MemoExoticComponent<({ tableName }: {
|
|
525
|
+
tableName?: string | undefined;
|
|
526
|
+
}) => React__default.JSX.Element>;
|
|
527
|
+
|
|
528
|
+
declare const Additional: React__default.MemoExoticComponent<({ tableName }: {
|
|
529
|
+
tableName?: string | undefined;
|
|
530
|
+
}) => React__default.JSX.Element>;
|
|
531
|
+
|
|
532
|
+
declare const Responsive: React__default.MemoExoticComponent<({ tableName }: {
|
|
533
|
+
tableName?: string | undefined;
|
|
534
|
+
}) => React__default.JSX.Element>;
|
|
535
|
+
|
|
536
|
+
interface IPagination {
|
|
537
|
+
appliedFilters?: number;
|
|
538
|
+
/**
|
|
539
|
+
* Este valor determina si el boton de eliminar filtros debe mostrarse como si hubieran filtros sin aplicar (en caso de que haya filtros aplicados por defecto) o si debe mostrarse como si todos los filtros con valor estan aplicados a la busqueda actual. Se deberia verificar con el slice de redux correspondiente a la tabla.
|
|
540
|
+
*/
|
|
541
|
+
areAllFiltersApplied?: boolean;
|
|
542
|
+
className?: string;
|
|
543
|
+
currentPage: number | string;
|
|
544
|
+
disabled?: boolean;
|
|
545
|
+
disableReduced?: boolean;
|
|
546
|
+
hideMaximizeButton?: boolean;
|
|
547
|
+
hideRefreshButton?: boolean;
|
|
548
|
+
isLoading?: boolean;
|
|
549
|
+
/**
|
|
550
|
+
* Valor obtenido del buttonsSlice para bloquear los botones de la paginacion mientras se estan ejecutando acciones
|
|
551
|
+
*/
|
|
552
|
+
isPerforming?: boolean;
|
|
553
|
+
/**
|
|
554
|
+
* Se usa principalmente en grillas de ejecución para indicar al pagination
|
|
555
|
+
* que debe usar el fieldId de la misma y no el de un listado global.
|
|
556
|
+
*/
|
|
557
|
+
listId?: TId;
|
|
558
|
+
/**
|
|
559
|
+
* Si se pasa un método onDeleteFilters, aparece el botón "Eliminar filtros"
|
|
560
|
+
* cerca del refresh
|
|
561
|
+
*/
|
|
562
|
+
onDeleteFilters?: () => unknown;
|
|
563
|
+
onPageChange: (page: number) => unknown;
|
|
564
|
+
onRefresh: (page: number) => unknown;
|
|
565
|
+
pageCount: number | string;
|
|
566
|
+
reachedMax?: boolean | undefined;
|
|
567
|
+
hasMore?: boolean | undefined;
|
|
568
|
+
/**
|
|
569
|
+
* Si la cantidad de registros se obtiene desde un lugar distinto de Redux,
|
|
570
|
+
* se puede pasar como number directamente
|
|
571
|
+
*/
|
|
572
|
+
recordsCount?: number;
|
|
573
|
+
showMaximizeOnSmallBreakpoints?: boolean;
|
|
574
|
+
variant?: 'primary' | 'secondary' | 'datagrid';
|
|
575
|
+
}
|
|
576
|
+
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>;
|
|
577
|
+
|
|
578
|
+
declare function useResponsiveTableContext(tableName?: string): TResponsiveTableContext;
|
|
579
|
+
declare const ResponsiveTableContext: React__default.MemoExoticComponent<({ allowEdition, allowRowsKeyboardSorting, allowSelection, allowSorting, avoidReparseSelectionOnRowChange, children, className, currentBreakPoint, customLabels, columns, filters, rows, label, isMultiple, name, onChangeSelection, onFilterBlur, onFilterChange, onFilterPressEnter, onSelectRows, onSortChange, reserveColumnsForStates, SelectionHandler, variant, }: TResponsiveTableContextProps) => React__default.JSX.Element>;
|
|
580
|
+
|
|
581
|
+
type TypedUseSelectorHook<TState> = <TSelected>(selector: (state: TState) => TSelected, equalityFn?: (a: TSelected, b: TSelected) => boolean) => TSelected;
|
|
582
|
+
declare const responsiveTableStore: _reduxjs_toolkit_dist_configureStore.ToolkitStore<{
|
|
583
|
+
responsiveTableSlice: TResponsiveTableSlice;
|
|
584
|
+
}, redux.AnyAction, [redux_thunk.ThunkMiddleware<{
|
|
585
|
+
responsiveTableSlice: TResponsiveTableSlice;
|
|
586
|
+
}>]>;
|
|
587
|
+
declare const useResponsiveTable: TypedUseSelectorHook<{
|
|
588
|
+
responsiveTableSlice: TResponsiveTableSlice;
|
|
589
|
+
}>;
|
|
590
|
+
|
|
591
|
+
declare const responsiveTableActions: _reduxjs_toolkit.CaseReducerActions<{
|
|
592
|
+
controller2UpdateSelectionState(state: immer_dist_internal.WritableDraft<TResponsiveTableSlice>, { payload: { tableName, ...payload }, }: {
|
|
593
|
+
payload: Partial<TResponsiveTableState> & {
|
|
594
|
+
tableName: string;
|
|
595
|
+
};
|
|
596
|
+
type: string;
|
|
597
|
+
}): void;
|
|
598
|
+
handleKey(state: immer_dist_internal.WritableDraft<Record<string, ISelectableState<IBasicColumn, IBasicFilter, string | TBasicRow>>>, { payload }: {
|
|
599
|
+
payload: THandleKey & {
|
|
600
|
+
id: string;
|
|
601
|
+
};
|
|
602
|
+
type: string;
|
|
603
|
+
}): void;
|
|
604
|
+
selectionStateUpdate(state: immer_dist_internal.WritableDraft<Record<string, ISelectableState<IBasicColumn, IBasicFilter, string | TBasicRow>>>, { payload: { id, ...payload } }: {
|
|
605
|
+
payload: Partial<ISelectableState<IBasicColumn, IBasicFilter, string | TBasicRow>> & {
|
|
606
|
+
id: string;
|
|
607
|
+
};
|
|
608
|
+
type: string;
|
|
609
|
+
}): void;
|
|
610
|
+
setNewFocused(state: immer_dist_internal.WritableDraft<Record<string, ISelectableState<IBasicColumn, IBasicFilter, string | TBasicRow>>>, { payload: { id, ...payload } }: {
|
|
611
|
+
payload: INewFocus & {
|
|
612
|
+
id: string;
|
|
613
|
+
};
|
|
614
|
+
type: string;
|
|
615
|
+
}): void;
|
|
616
|
+
updateByClick(state: immer_dist_internal.WritableDraft<Record<string, ISelectableState<IBasicColumn, IBasicFilter, string | TBasicRow>>>, { payload: { id, colIndex, rowIndex, ariaColIndex, ariaRowIndex, isFocused, ...payload }, }: {
|
|
617
|
+
payload: (_apia_util.TRequireOnlyOne<{
|
|
618
|
+
ariaRowIndex: number;
|
|
619
|
+
rowIndex: number;
|
|
620
|
+
}> & _apia_util.TRequireOnlyOne<{
|
|
621
|
+
ariaColIndex?: number | undefined;
|
|
622
|
+
colIndex: number;
|
|
623
|
+
}> & Pick<INewFocus, "isFocused" | "altKey" | "ctrlKey" | "shiftKey">) & {
|
|
624
|
+
id: string;
|
|
625
|
+
};
|
|
626
|
+
type: string;
|
|
627
|
+
}): void;
|
|
628
|
+
update(state: immer_dist_internal.WritableDraft<TResponsiveTableSlice>, { payload: { tableName, handleFocus, ...rest }, }: {
|
|
629
|
+
payload: Partial<TResponsiveTableState> & {
|
|
630
|
+
isFocused?: boolean | undefined;
|
|
631
|
+
handleFocus?: boolean | undefined;
|
|
632
|
+
} & {
|
|
633
|
+
tableName: string;
|
|
634
|
+
};
|
|
635
|
+
type: string;
|
|
636
|
+
}): void;
|
|
637
|
+
addRows(state: immer_dist_internal.WritableDraft<TResponsiveTableSlice>, { payload }: TResponsiveTableAction<{
|
|
638
|
+
newRows: TResponsiveTableRow[];
|
|
639
|
+
}>): void;
|
|
640
|
+
deleteRows(state: immer_dist_internal.WritableDraft<TResponsiveTableSlice>, { payload }: TResponsiveTableAction<{
|
|
641
|
+
rowIndices: number[];
|
|
642
|
+
}>): void;
|
|
643
|
+
destroy(state: immer_dist_internal.WritableDraft<TResponsiveTableSlice>, { payload: { tableName } }: TResponsiveTableAction): void;
|
|
644
|
+
swapFocusedRow(state: immer_dist_internal.WritableDraft<TResponsiveTableSlice>, { payload: { newIndex, tableName }, }: {
|
|
645
|
+
payload: {
|
|
646
|
+
newIndex: number;
|
|
647
|
+
} & {
|
|
648
|
+
tableName: string;
|
|
649
|
+
};
|
|
650
|
+
type: string;
|
|
651
|
+
}): void;
|
|
652
|
+
}, "responsiveTableSlice">;
|
|
653
|
+
|
|
654
|
+
/**
|
|
655
|
+
* Este controlador maneja la selección en una forma más directa que el anterior, manipulando los elementos del DOM directamente, y persistiendo en el store estas propiedades para garantizar la consistencia en los renderizados posteriores.
|
|
656
|
+
*
|
|
657
|
+
* Esto permite una experiencia más fluida en el manejo del foco. Además, al no depender del estado para calcular las propiedades, se tiene un mayor control sobre qué elementos son afectados y de qué manera, permitiendo
|
|
658
|
+
*/
|
|
659
|
+
declare class Controller2 {
|
|
660
|
+
readonly tableName: string;
|
|
661
|
+
constructor(tableName: string);
|
|
662
|
+
private events;
|
|
663
|
+
setEvents(events: {
|
|
664
|
+
onChangeSelection?: (newRows: TResponsiveTableRowsSelectionEvent) => unknown;
|
|
665
|
+
onSelectRows?: (newRows: TResponsiveTableRowsSelectionEvent, focusedIndex: number) => unknown;
|
|
666
|
+
}): void;
|
|
667
|
+
private unsubscribe;
|
|
668
|
+
private el;
|
|
669
|
+
setRef: (el: HTMLElement) => void;
|
|
670
|
+
handleClickEvent: (ev: MouseEvent) => void;
|
|
671
|
+
handleKeyDownEvent: (ev: KeyboardEvent) => void;
|
|
672
|
+
/**
|
|
673
|
+
* Returns a copy of the current state object
|
|
674
|
+
*/
|
|
675
|
+
getState(): {
|
|
676
|
+
allowSorting?: boolean | undefined;
|
|
677
|
+
isMultiple?: boolean | undefined;
|
|
678
|
+
label?: string | undefined;
|
|
679
|
+
reserveColumnsForStates?: number | undefined;
|
|
680
|
+
allowEdition?: boolean | undefined;
|
|
681
|
+
allowRowsKeyboardSorting?: boolean | undefined;
|
|
682
|
+
allowSelection?: boolean | undefined;
|
|
683
|
+
columns: TResponsiveTableColumn[];
|
|
684
|
+
draggingRow?: number | undefined;
|
|
685
|
+
expandedRows: number[];
|
|
686
|
+
filters: _apia_util.TApiaFilter[];
|
|
687
|
+
focusedRow: number;
|
|
688
|
+
focusedColumn: number;
|
|
689
|
+
hasNonAdditionalFilters: boolean;
|
|
690
|
+
isEditionMode?: boolean | undefined;
|
|
691
|
+
isFocused: boolean;
|
|
692
|
+
nonAdditionalColumnsCount: number;
|
|
693
|
+
rows: TResponsiveTableRow<any>[];
|
|
694
|
+
scrollIntoViewRow?: number | undefined;
|
|
695
|
+
selectedRows: number[];
|
|
696
|
+
statesColumns: number;
|
|
697
|
+
accordionIndexColumns: TResponsiveTableIndexColumns;
|
|
698
|
+
isLoading: boolean;
|
|
699
|
+
};
|
|
700
|
+
setState(state: Partial<TResponsiveTableState>): void;
|
|
701
|
+
updateSelectionState(): void;
|
|
702
|
+
}
|
|
703
|
+
declare function makeController2(tableName: string): [Controller2, FC<TKeyHandlerProps>];
|
|
704
|
+
|
|
705
|
+
type TDocNameCellRendererProps$1 = {
|
|
706
|
+
docName: string;
|
|
707
|
+
docUrl: string;
|
|
708
|
+
};
|
|
709
|
+
declare const DocNameCellRenderer: TResponsiveTableCellRenderer<TDocNameCellRendererProps$1>;
|
|
710
|
+
|
|
711
|
+
type TDocNameCellRendererProps = {
|
|
712
|
+
docName: string;
|
|
713
|
+
docUrl: string;
|
|
714
|
+
};
|
|
715
|
+
type TDocNameCellRenderer = TAccordionCellRendererProps<TDocNameCellRendererProps>;
|
|
716
|
+
declare const AccordionDocNameCellRenderer: TAccordionCellRenderer<TDocNameCellRendererProps>;
|
|
717
|
+
|
|
718
|
+
interface IAccordionElement {
|
|
719
|
+
row: TResponsiveTableRow;
|
|
720
|
+
rowIndex: number;
|
|
721
|
+
}
|
|
722
|
+
declare const AccordionElement: React__default.MemoExoticComponent<({ row, rowIndex }: IAccordionElement) => React__default.JSX.Element | null>;
|
|
723
|
+
|
|
724
|
+
declare const AccordionHTMLCellRenderer: TAccordionCellRenderer<{
|
|
725
|
+
html: string;
|
|
726
|
+
}>;
|
|
727
|
+
|
|
728
|
+
declare const AccordionRenderer: React__default.MemoExoticComponent<() => React__default.JSX.Element>;
|
|
729
|
+
|
|
730
|
+
declare const AdditionalColumnDefaultRenderer: React__default.MemoExoticComponent<({ column, cell, }: TResponsiveTableCellRendererProps) => React__default.JSX.Element>;
|
|
731
|
+
|
|
732
|
+
declare const DefaultCellRenderer: React__default.ForwardRefExoticComponent<{
|
|
733
|
+
cell: TResponsiveTableCell<Record<string, unknown>>;
|
|
734
|
+
column: TResponsiveTableColumn;
|
|
735
|
+
row: TResponsiveTableRow<Record<string, unknown>>;
|
|
736
|
+
} & React__default.AllHTMLAttributes<HTMLTableCellElement> & React__default.RefAttributes<HTMLTableCellElement>>;
|
|
737
|
+
|
|
738
|
+
declare const DefaultRowRenderer: TResponsiveTableRowRenderer;
|
|
739
|
+
|
|
740
|
+
declare const HTMLCellRenderer: TResponsiveTableCellRenderer<{
|
|
741
|
+
html: string;
|
|
742
|
+
}>;
|
|
743
|
+
|
|
744
|
+
declare const IsLoadingRenderer: () => React.JSX.Element;
|
|
745
|
+
|
|
746
|
+
declare function makeAccordionAsyncRenderer(additionalInfoGetter: (row: TResponsiveTableRow) => Promise<{
|
|
747
|
+
label?: string;
|
|
748
|
+
name: string;
|
|
749
|
+
}[]>): TResponsiveTableCellRenderer;
|
|
750
|
+
|
|
751
|
+
declare function makeAsyncRenderer(additionalInfoGetter: (row: TResponsiveTableRow) => Promise<{
|
|
752
|
+
label?: string;
|
|
753
|
+
name: string;
|
|
754
|
+
newline?: boolean;
|
|
755
|
+
}[]>): TResponsiveTableCellRenderer;
|
|
756
|
+
|
|
757
|
+
declare const NoEllipsisCellRenderer: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<{
|
|
758
|
+
cell: TResponsiveTableCell<Record<string, unknown>>;
|
|
759
|
+
column: TResponsiveTableColumn;
|
|
760
|
+
row: TResponsiveTableRow<Record<string, unknown>>;
|
|
761
|
+
} & React__default.AllHTMLAttributes<HTMLTableCellElement> & React__default.RefAttributes<HTMLTableCellElement>>>;
|
|
762
|
+
|
|
763
|
+
declare const NoRegistersRenderer: () => React.JSX.Element;
|
|
764
|
+
|
|
765
|
+
declare const PriorityAccordionRenderer: TAccordionCellRenderer;
|
|
766
|
+
|
|
767
|
+
declare function getPriorityHandler(priority: string | undefined): string | undefined;
|
|
768
|
+
declare const PriorityRenderer: TResponsiveTableCellRenderer<{
|
|
769
|
+
src: string;
|
|
770
|
+
}>;
|
|
771
|
+
|
|
772
|
+
declare const RowStatesRenderer: React__default.MemoExoticComponent<({ state, }: {
|
|
773
|
+
state: TResponsiveTableRowState;
|
|
774
|
+
}) => React__default.JSX.Element>;
|
|
775
|
+
|
|
776
|
+
declare const StatusAccordionRenderer: TAccordionCellRenderer;
|
|
777
|
+
|
|
778
|
+
declare function getStatusRendererClassName(cellValue: string, columnName: string): string;
|
|
779
|
+
declare const StatusRenderer: TResponsiveTableCellRenderer<{
|
|
780
|
+
src: string;
|
|
781
|
+
}>;
|
|
782
|
+
|
|
783
|
+
declare const TableRenderer: React__default.MemoExoticComponent<({ variant }: {
|
|
784
|
+
variant?: string | undefined;
|
|
785
|
+
}) => React__default.JSX.Element>;
|
|
786
|
+
|
|
787
|
+
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 };
|
|
25
788
|
//# sourceMappingURL=index.d.ts.map
|