@bit.rhplus/ui.grid 0.0.51 → 0.0.53
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/ColumnBuilder.jsx +1293 -1031
- package/dist/ColumnBuilder.d.ts +237 -53
- package/dist/ColumnBuilder.js +243 -17
- package/dist/ColumnBuilder.js.map +1 -1
- package/package.json +4 -4
- /package/dist/{preview-1758639402266.js → preview-1759320571652.js} +0 -0
package/dist/ColumnBuilder.d.ts
CHANGED
|
@@ -1,91 +1,275 @@
|
|
|
1
1
|
export default ColumnBuilder;
|
|
2
|
+
/**
|
|
3
|
+
* ColumnBuilder třída pro builder pattern vytváření sloupců AG Grid.
|
|
4
|
+
* Poskytuje fluent API pro snadné a čitelné definování různých typů sloupců.
|
|
5
|
+
* Podporuje lokalizaci přes react-intl a automatickou konfiguraci sloupců.
|
|
6
|
+
*/
|
|
2
7
|
declare class ColumnBuilder {
|
|
3
|
-
|
|
8
|
+
/**
|
|
9
|
+
* Konstruktor ColumnBuilder třídy.
|
|
10
|
+
* @param {Object} intl - React-intl objekt pro lokalizaci
|
|
11
|
+
*/
|
|
12
|
+
constructor(intl: Object);
|
|
4
13
|
columns: any[];
|
|
5
|
-
intl:
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
14
|
+
intl: Object;
|
|
15
|
+
/**
|
|
16
|
+
* Přidá základní sloupec do AG Grid s podporou barevného pole.
|
|
17
|
+
* Umožňuje dynamické obarvení textu buňky na základě hodnoty z jiného pole.
|
|
18
|
+
* @param {Object} config - Konfigurace sloupce
|
|
19
|
+
* @param {string} config.colorField - Název pole obsahujícího barvu pro text buňky
|
|
20
|
+
* @param {string} config.bgColorField - Název pole obsahujícího barvu pozadí buňky
|
|
21
|
+
* @param {Object} ...props - Další AG Grid vlastnosti sloupce
|
|
22
|
+
* @returns {ColumnBuilder} Instance pro chaining
|
|
23
|
+
*/
|
|
24
|
+
addColumn({ colorField, bgColorField, ...props }: {
|
|
25
|
+
colorField: string;
|
|
26
|
+
bgColorField: string;
|
|
27
|
+
}): ColumnBuilder;
|
|
28
|
+
/**
|
|
29
|
+
* Přidá sloupec s kartou faktury optimalizovaný pro overview mód.
|
|
30
|
+
* Zobrazuje fakturační informace v kartovém formátu s podporou checkboxu.
|
|
31
|
+
* @param {Object} config - Konfigurace sloupce
|
|
32
|
+
* @param {string} [config.field='invoice'] - Název datového pole
|
|
33
|
+
* @param {string} [config.headerName=''] - Název hlavičky sloupce
|
|
34
|
+
* @param {number} [config.width=340] - Šířka sloupce
|
|
35
|
+
* @param {Function} config.onCheckboxChange - Callback při změně stavu checkboxu
|
|
36
|
+
* @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
|
|
37
|
+
* @returns {ColumnBuilder} Instance pro chaining
|
|
38
|
+
*/
|
|
10
39
|
addInvoiceCardColumn({ field, headerName, width, onCheckboxChange, ...restProps }?: {
|
|
11
40
|
field?: string | undefined;
|
|
12
41
|
headerName?: string | undefined;
|
|
13
42
|
width?: number | undefined;
|
|
14
|
-
onCheckboxChange:
|
|
15
|
-
}):
|
|
43
|
+
onCheckboxChange: Function;
|
|
44
|
+
}): ColumnBuilder;
|
|
45
|
+
/**
|
|
46
|
+
* Přidá sloupec pro zobrazení měny s podporou různých formátů a pozicování symbolu.
|
|
47
|
+
* Automaticky formátuje hodnoty jako měnu s dvěma desetinnými místy.
|
|
48
|
+
* @param {Object} config - Konfigurace měnového sloupce
|
|
49
|
+
* @param {string|Function} config.currency - Kód měny nebo funkce vracející kód měny
|
|
50
|
+
* @param {string} [config.position] - Pozice symbolu měny ('left' nebo 'right')
|
|
51
|
+
* @param {Object|Function} config.currencyStyle - CSS styl pro symbol měny
|
|
52
|
+
* @param {string} [config.cellAlign='right'] - Zarovnání obsahu buňky
|
|
53
|
+
* @param {boolean} config.editable - Zda je sloupec editovatelný
|
|
54
|
+
* @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
|
|
55
|
+
* @returns {ColumnBuilder} Instance pro chaining
|
|
56
|
+
*/
|
|
16
57
|
addCurrencyColumn({ currency, position, currencyStyle, cellAlign, editable, ...restProps }: {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
currencyStyle: any;
|
|
58
|
+
currency: string | Function;
|
|
59
|
+
position?: string | undefined;
|
|
60
|
+
currencyStyle: Object | Function;
|
|
21
61
|
cellAlign?: string | undefined;
|
|
22
|
-
editable:
|
|
23
|
-
}):
|
|
62
|
+
editable: boolean;
|
|
63
|
+
}): ColumnBuilder;
|
|
64
|
+
/**
|
|
65
|
+
* Přidá sloupec pro zobrazení data s možností specifikace formátu.
|
|
66
|
+
* Používá standardní AG Grid date renderer s českým formátováním.
|
|
67
|
+
* @param {Object} config - Konfigurace datového sloupce
|
|
68
|
+
* @param {string} [config.dateFormat='DD.MM.YYYY'] - Formát zobrazení data
|
|
69
|
+
* @param {boolean} config.editable - Zda je sloupec editovatelný
|
|
70
|
+
* @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
|
|
71
|
+
* @returns {ColumnBuilder} Instance pro chaining
|
|
72
|
+
*/
|
|
24
73
|
addDateColumn({ dateFormat, editable, ...restProps }: {
|
|
25
|
-
[x: string]: any;
|
|
26
74
|
dateFormat?: string | undefined;
|
|
27
|
-
editable:
|
|
28
|
-
}):
|
|
75
|
+
editable: boolean;
|
|
76
|
+
}): ColumnBuilder;
|
|
77
|
+
/**
|
|
78
|
+
* Přidá sloupec s klikatelným linkem podporujícím hover efekty.
|
|
79
|
+
* Link může spouštět akce nebo přepínat overview mód v gridu.
|
|
80
|
+
* @param {Object} config - Konfigurace linkového sloupce
|
|
81
|
+
* @param {Function} config.onClick - Callback funkce při kliku na link
|
|
82
|
+
* @param {Object|Function} config.linkStyle - CSS styl pro link nebo funkce vracející styl
|
|
83
|
+
* @param {Object|Function} config.hoverStyle - CSS styl pro hover stav
|
|
84
|
+
* @param {string} [config.cellAlign='left'] - Zarovnání obsahu buňky
|
|
85
|
+
* @param {boolean} config.editable - Zda je sloupec editovatelný
|
|
86
|
+
* @param {boolean} [config.overviewToggle=false] - Zda aktivovat overview toggle
|
|
87
|
+
* @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
|
|
88
|
+
* @returns {ColumnBuilder} Instance pro chaining
|
|
89
|
+
*/
|
|
29
90
|
addLinkColumn({ onClick, linkStyle, hoverStyle, cellAlign, editable, overviewToggle, ...restProps }: {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
hoverStyle: any;
|
|
91
|
+
onClick: Function;
|
|
92
|
+
linkStyle: Object | Function;
|
|
93
|
+
hoverStyle: Object | Function;
|
|
34
94
|
cellAlign?: string | undefined;
|
|
35
|
-
editable:
|
|
95
|
+
editable: boolean;
|
|
36
96
|
overviewToggle?: boolean | undefined;
|
|
37
|
-
}):
|
|
97
|
+
}): ColumnBuilder;
|
|
98
|
+
/**
|
|
99
|
+
* Helper metoda pro přidání overview link sloupce s přednastavenými hodnotami.
|
|
100
|
+
* Specializovaný link sloupec pro přepínání overview módu v gridu.
|
|
101
|
+
* @param {Object} config - Konfigurace overview link sloupce
|
|
102
|
+
* @param {string} [config.field='documentNumber'] - Název datového pole
|
|
103
|
+
* @param {string} [config.headerName=''] - Název hlavičky sloupce
|
|
104
|
+
* @param {number} [config.width=130] - Šířka sloupce
|
|
105
|
+
* @param {string} [config.cellAlign='left'] - Zarovnání obsahu buňky
|
|
106
|
+
* @param {Object|Function} config.linkStyle - CSS styl pro link
|
|
107
|
+
* @param {Object|Function} config.hoverStyle - CSS styl pro hover stav
|
|
108
|
+
* @param {boolean} [config.editable=false] - Zda je sloupec editovatelný
|
|
109
|
+
* @param {Object} ...rest - Další AG Grid vlastnosti sloupce včetně intlId
|
|
110
|
+
* @returns {ColumnBuilder} Instance pro chaining
|
|
111
|
+
*/
|
|
38
112
|
addOverviewLinkColumn({ field, headerName, width, cellAlign, linkStyle, hoverStyle, editable, ...rest }?: {
|
|
39
113
|
field?: string | undefined;
|
|
40
114
|
headerName?: string | undefined;
|
|
41
115
|
width?: number | undefined;
|
|
42
116
|
cellAlign?: string | undefined;
|
|
43
|
-
linkStyle:
|
|
44
|
-
hoverStyle:
|
|
117
|
+
linkStyle: Object | Function;
|
|
118
|
+
hoverStyle: Object | Function;
|
|
45
119
|
editable?: boolean | undefined;
|
|
46
|
-
}):
|
|
120
|
+
}): ColumnBuilder;
|
|
121
|
+
/**
|
|
122
|
+
* Přidá sloupec pro zobrazení objektů s možností editace a tooltip podporou.
|
|
123
|
+
* Při hoveru zobrazuje edit tlačítko pro editovatelné objekty.
|
|
124
|
+
* @param {Object} config - Konfigurace objektového sloupce
|
|
125
|
+
* @param {boolean} config.contentTooltip - Zda zobrazovat tooltip s obsahem
|
|
126
|
+
* @param {string} config.tooltipField - Pole obsahující text pro tooltip
|
|
127
|
+
* @param {boolean} config.tooltipInteraction - Zda povolit interakci s tooltipem
|
|
128
|
+
* @param {number} [config.tooltipShowDelay=100] - Zpoždění zobrazení tooltipu v ms
|
|
129
|
+
* @param {boolean} config.editable - Zda je objekt editovatelný
|
|
130
|
+
* @param {Function} config.onEditClick - Callback při kliku na edit tlačítko
|
|
131
|
+
* @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
|
|
132
|
+
* @returns {ColumnBuilder} Instance pro chaining
|
|
133
|
+
*/
|
|
47
134
|
addObjectColumn({ contentTooltip, tooltipField, tooltipInteraction, tooltipShowDelay, editable, onEditClick, ...restProps }: {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
tooltipInteraction: any;
|
|
135
|
+
contentTooltip: boolean;
|
|
136
|
+
tooltipField: string;
|
|
137
|
+
tooltipInteraction: boolean;
|
|
52
138
|
tooltipShowDelay?: number | undefined;
|
|
53
|
-
editable:
|
|
54
|
-
onEditClick:
|
|
55
|
-
}):
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
139
|
+
editable: boolean;
|
|
140
|
+
onEditClick: Function;
|
|
141
|
+
}): ColumnBuilder;
|
|
142
|
+
/**
|
|
143
|
+
* Přidá sloupec pro zobrazení ikon s podporou badge (číselného označení).
|
|
144
|
+
* Umožňuje podmíněné zobrazování ikon a jejich stylování.
|
|
145
|
+
* @param {Object} config - Konfigurace ikonového sloupce
|
|
146
|
+
* @param {Function} [config.visibleGetter=() => true] - Funkce určující viditelnost ikony
|
|
147
|
+
* @param {string} config.cellAlign - Zarovnání ikony v buňce
|
|
148
|
+
* @param {string|Function} config.icon - Název ikony nebo funkce vracející ikonu
|
|
149
|
+
* @param {string|Function} [config.iconColor] - Barva ikony nebo funkce vracející barvu podle parametrů
|
|
150
|
+
* @param {number} [config.size=16] - Velikost ikony v pixelech
|
|
151
|
+
* @param {boolean} [config.iconLeft=false] - Zda zobrazit ikonu vlevo od textu
|
|
152
|
+
* @param {boolean} [config.iconRight=false] - Zda zobrazit ikonu vpravo od textu
|
|
153
|
+
* @param {boolean} [config.showText=true] - Zda zobrazit text (hodnotu pole)
|
|
154
|
+
* @param {number} [config.textGap=5] - Mezera mezi ikonou a textem v pixelech
|
|
155
|
+
* @param {boolean} [config.showOnGroup=false] - Zda zobrazit ikonu na skupinových řádcích
|
|
156
|
+
* @param {string|number|Function} config.badge - Text/číslo badge nebo funkce vracející badge
|
|
157
|
+
* @param {boolean} config.showZero - Zda zobrazit badge s hodnotou 0
|
|
158
|
+
* @param {string} [config.badgeColor='#dc3545'] - Barva pozadí badge
|
|
159
|
+
* @param {string} [config.badgeTextColor='white'] - Barva textu badge
|
|
160
|
+
* @param {string} [config.badgePosition='top-right'] - Pozice badge ('top-right', 'top-left', 'bottom-right', 'bottom-left')
|
|
161
|
+
* @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
|
|
162
|
+
* @returns {ColumnBuilder} Instance pro chaining
|
|
163
|
+
*/
|
|
164
|
+
addIconColumn({ visibleGetter, cellAlign, icon, iconColor, size, iconLeft, iconRight, showText, textGap, showOnGroup, badge, showZero, badgeColor, badgeTextColor, badgePosition, ...restProps }: {
|
|
165
|
+
visibleGetter?: Function | undefined;
|
|
166
|
+
cellAlign: string;
|
|
167
|
+
icon: string | Function;
|
|
168
|
+
iconColor?: string | Function | undefined;
|
|
169
|
+
size?: number | undefined;
|
|
170
|
+
iconLeft?: boolean | undefined;
|
|
171
|
+
iconRight?: boolean | undefined;
|
|
172
|
+
showText?: boolean | undefined;
|
|
173
|
+
textGap?: number | undefined;
|
|
174
|
+
showOnGroup?: boolean | undefined;
|
|
175
|
+
badge: string | number | Function;
|
|
176
|
+
showZero: boolean;
|
|
177
|
+
badgeColor?: string | undefined;
|
|
178
|
+
badgeTextColor?: string | undefined;
|
|
179
|
+
badgePosition?: string | undefined;
|
|
180
|
+
}): ColumnBuilder;
|
|
181
|
+
/**
|
|
182
|
+
* Přidá sloupec pro zobrazování stavů s kruhovým pozadím.
|
|
183
|
+
* Zobrazuje text stavu v kruhovém pozadí s definovanou barvou.
|
|
184
|
+
* @param {Object} config - Konfigurace stavového sloupce
|
|
185
|
+
* @param {Function} [config.visibleGetter=() => true] - Funkce určující viditelnost
|
|
186
|
+
* @param {string} [config.cellAlign='center'] - Zarovnání v buňce
|
|
187
|
+
* @param {string|Function} [config.bgColor] - Barva pozadí nebo funkce vracející barvu podle parametrů
|
|
188
|
+
* @param {string|Function} [config.textColor='white'] - Barva textu nebo funkce vracející barvu
|
|
189
|
+
* @param {string|Function} [config.displayField] - Pole pro zobrazení textu (pokud se liší od field)
|
|
190
|
+
* @param {number} [config.minWidth=80] - Minimální šířka kruhového pozadí
|
|
191
|
+
* @param {number} [config.fontSize=12] - Velikost fontu
|
|
192
|
+
* @param {boolean} [config.showOnGroup=false] - Zda zobrazit na skupinových řádcích
|
|
193
|
+
* @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
|
|
194
|
+
* @returns {ColumnBuilder} Instance pro chaining
|
|
195
|
+
*/
|
|
196
|
+
addStateColumn({ visibleGetter, cellAlign, bgColor, textColor, displayField, minWidth, fontSize, showOnGroup, ...restProps }: {
|
|
197
|
+
visibleGetter?: Function | undefined;
|
|
198
|
+
cellAlign?: string | undefined;
|
|
199
|
+
bgColor?: string | Function | undefined;
|
|
200
|
+
textColor?: string | Function | undefined;
|
|
201
|
+
displayField?: string | Function | undefined;
|
|
202
|
+
minWidth?: number | undefined;
|
|
203
|
+
fontSize?: number | undefined;
|
|
204
|
+
showOnGroup?: boolean | undefined;
|
|
205
|
+
}): ColumnBuilder;
|
|
206
|
+
/**
|
|
207
|
+
* Přidá sloupec pro zobrazení boolean hodnot pomocí ikon (zaškrtnutí/křížek).
|
|
208
|
+
* Podporuje různé ikony pro true/false stav a podmíněnou viditelnost.
|
|
209
|
+
* @param {Object} config - Konfigurace boolean sloupce
|
|
210
|
+
* @param {boolean} [config.visibleFalse=true] - Zda zobrazit ikonu pro false hodnotu
|
|
211
|
+
* @param {boolean} [config.visibleTrue=true] - Zda zobrazit ikonu pro true hodnotu
|
|
212
|
+
* @param {string} [config.cellAlign='center'] - Zarovnání ikony v buňce
|
|
213
|
+
* @param {Function} [config.visibleGetter=() => true] - Funkce určující viditelnost ikony
|
|
214
|
+
* @param {boolean} [config.defaultIcon=true] - Zda zobrazit výchozí ikonu pro undefined hodnoty
|
|
215
|
+
* @param {string} [config.defaultIconColor='#898989'] - Barva výchozí ikony
|
|
216
|
+
* @param {number} [config.size=16] - Velikost ikony v pixelech
|
|
217
|
+
* @param {string} [config.colorTrue='green'] - Barva ikony pro true hodnotu
|
|
218
|
+
* @param {string} [config.colorFalse='red'] - Barva ikony pro false hodnotu
|
|
219
|
+
* @param {boolean} [config.showOnGroup=false] - Zda zobrazit ikonu na skupinových řádcích
|
|
220
|
+
* @param {boolean} config.editable - Zda je sloupec editovatelný
|
|
221
|
+
* @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
|
|
222
|
+
* @returns {ColumnBuilder} Instance pro chaining
|
|
223
|
+
*/
|
|
64
224
|
addBooleanColumn({ visibleFalse, visibleTrue, cellAlign, visibleGetter, defaultIcon, defaultIconColor, size, colorTrue, colorFalse, showOnGroup, editable, ...restProps }: {
|
|
65
|
-
[x: string]: any;
|
|
66
225
|
visibleFalse?: boolean | undefined;
|
|
67
226
|
visibleTrue?: boolean | undefined;
|
|
68
227
|
cellAlign?: string | undefined;
|
|
69
|
-
visibleGetter?:
|
|
228
|
+
visibleGetter?: Function | undefined;
|
|
70
229
|
defaultIcon?: boolean | undefined;
|
|
71
230
|
defaultIconColor?: string | undefined;
|
|
72
231
|
size?: number | undefined;
|
|
73
232
|
colorTrue?: string | undefined;
|
|
74
233
|
colorFalse?: string | undefined;
|
|
75
234
|
showOnGroup?: boolean | undefined;
|
|
76
|
-
editable:
|
|
77
|
-
}):
|
|
235
|
+
editable: boolean;
|
|
236
|
+
}): ColumnBuilder;
|
|
237
|
+
/**
|
|
238
|
+
* Přidá připnutý akční sloupec s dropdown menu, který se zobrazuje pouze při hoveru nad řádkem.
|
|
239
|
+
* Používa pokročilou detekci hover stavu s MutationObserver pro každou instanci gridu zvlášť.
|
|
240
|
+
* Sloupec je automaticky připnut vpravo a obsahuje akční tlačítko s kontextovým menu.
|
|
241
|
+
* @param {Object} config - Konfigurace akčního sloupce
|
|
242
|
+
* @param {Array} [config.menuItems=[]] - Array položek menu s key, label, disable vlastnostmi
|
|
243
|
+
* @param {Function} config.onActionClick - Callback při kliku na položku menu (key, params, item)
|
|
244
|
+
* @param {Function} config.onBeforeShow - Async callback před zobrazením menu pro dynamické položky
|
|
245
|
+
* @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
|
|
246
|
+
* @returns {ColumnBuilder} Instance pro chaining
|
|
247
|
+
*/
|
|
78
248
|
addPinnedActionButton({ menuItems, onActionClick, onBeforeShow, ...restProps }?: {
|
|
79
249
|
menuItems?: any[] | undefined;
|
|
80
|
-
onActionClick:
|
|
81
|
-
onBeforeShow:
|
|
82
|
-
}):
|
|
250
|
+
onActionClick: Function;
|
|
251
|
+
onBeforeShow: Function;
|
|
252
|
+
}): ColumnBuilder;
|
|
253
|
+
/**
|
|
254
|
+
* Přidá sloupec s custom tlačítky s podmíněnou viditelností.
|
|
255
|
+
* Každé tlačítko může mít vlastní styl, akci a podmínku viditelnosti.
|
|
256
|
+
* @param {Object} config - Konfigurace tlačítkového sloupce
|
|
257
|
+
* @param {Array} config.buttons - Array definic tlačítek s vlastnostmi jako text, onClick, style
|
|
258
|
+
* @param {Function} [config.visibleGetter=() => true] - Funkce určující viditelnost tlačítek
|
|
259
|
+
* @param {boolean} config.editable - Zda je sloupec editovatelný
|
|
260
|
+
* @param {Object} ...restProps - Další AG Grid vlastnosti sloupce
|
|
261
|
+
* @returns {ColumnBuilder} Instance pro chaining
|
|
262
|
+
*/
|
|
83
263
|
addButtonColumn({ buttons, visibleGetter, editable, ...restProps }: {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
264
|
+
buttons: any[];
|
|
265
|
+
visibleGetter?: Function | undefined;
|
|
266
|
+
editable: boolean;
|
|
267
|
+
}): ColumnBuilder;
|
|
268
|
+
/**
|
|
269
|
+
* Finální metoda pro sestavení pole sloupců AG Grid.
|
|
270
|
+
* Vrací kompletní konfiguraci všech přidaných sloupců připravených pro AG Grid.
|
|
271
|
+
* @returns {Array} Array připravených definic sloupců pro AG Grid
|
|
272
|
+
*/
|
|
89
273
|
build(): any[];
|
|
90
274
|
#private;
|
|
91
275
|
}
|