@apia/components 3.0.9 → 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 +159 -151
- package/dist/index.js +5893 -5765
- package/dist/index.js.map +1 -1
- package/package.json +6 -6
package/dist/index.d.ts
CHANGED
|
@@ -248,6 +248,145 @@ declare class ApiaUtilNotifications {
|
|
|
248
248
|
Component: () => React$1.JSX.Element;
|
|
249
249
|
}
|
|
250
250
|
|
|
251
|
+
declare const TabsList: (({ arrowsBehavior }: {
|
|
252
|
+
arrowsBehavior?: "open" | "focus" | undefined;
|
|
253
|
+
}) => React__default.JSX.Element | null) & {
|
|
254
|
+
displayName: string;
|
|
255
|
+
};
|
|
256
|
+
|
|
257
|
+
declare class Tab<TabType extends TTab = TTab> {
|
|
258
|
+
state: TabType;
|
|
259
|
+
controller: TabsController<TabType>;
|
|
260
|
+
constructor(state: TabType, controller: TabsController<TabType>);
|
|
261
|
+
get id(): string;
|
|
262
|
+
/**
|
|
263
|
+
* El parámetro force evita que se muestre cartel de confirmación al usuario cuando puede haber pérdida de datos.
|
|
264
|
+
*/
|
|
265
|
+
close(force?: boolean): Promise<boolean>;
|
|
266
|
+
open(): void;
|
|
267
|
+
}
|
|
268
|
+
declare class TabsController<TabType extends TTab = TTab> {
|
|
269
|
+
#private;
|
|
270
|
+
id: string;
|
|
271
|
+
props: Omit<TabsControllerProps<TabType>, 'id'>;
|
|
272
|
+
state: TTabsListState<TabType>;
|
|
273
|
+
getActiveTab(): Tab<TabType>;
|
|
274
|
+
/**
|
|
275
|
+
* Es el tab que está abierto
|
|
276
|
+
*/
|
|
277
|
+
get activeTab(): Tab<TabType>;
|
|
278
|
+
getTab(id: string): Tab<TabType> | undefined;
|
|
279
|
+
get tabsList(): Tab<TabType>[];
|
|
280
|
+
constructor(id: string, props: Omit<TabsControllerProps<TabType>, 'id'>);
|
|
281
|
+
/**
|
|
282
|
+
* Obviamente agrega un tab al listado de tabs
|
|
283
|
+
*/
|
|
284
|
+
append(tab: TabType): void;
|
|
285
|
+
closeAll(closeFixedTabsAsWell?: boolean, force?: boolean): Promise<void>;
|
|
286
|
+
closeOpenTab(force?: boolean): void;
|
|
287
|
+
closeToRight(targetId: string, force?: boolean): Promise<void>;
|
|
288
|
+
closeToLeft(targetId: string, force?: boolean): Promise<void>;
|
|
289
|
+
closeOthers(targetId: string, force?: boolean): Promise<void>;
|
|
290
|
+
closeTab(tabId: string, force?: boolean): Promise<boolean>;
|
|
291
|
+
focusNextTab(): Tab<TabType> | null;
|
|
292
|
+
focusPreviousTab(): Tab<TabType> | null;
|
|
293
|
+
focusTab(tabId: string): void;
|
|
294
|
+
getTabElement(tabId: string): Element | null;
|
|
295
|
+
handleKeyDown(ev: React__default.KeyboardEvent): void;
|
|
296
|
+
openNextTab(): Tab<TabType> | null;
|
|
297
|
+
openPreviousTab(): Tab<TabType> | null;
|
|
298
|
+
/**
|
|
299
|
+
* Se utiliza para hacer que el tab aparezca visible en el listado
|
|
300
|
+
*/
|
|
301
|
+
openTab(tabId: string): void;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
type TOrientation = 'horizontal' | 'vertical';
|
|
305
|
+
type TabsControllerProps<TabType extends TTab> = {
|
|
306
|
+
id: string;
|
|
307
|
+
initialTabs?: TabType[];
|
|
308
|
+
getController?: (controller: TabsController) => unknown;
|
|
309
|
+
onCloseTab?: (tan: Tab) => void;
|
|
310
|
+
orientation: TOrientation;
|
|
311
|
+
};
|
|
312
|
+
type TTab = {
|
|
313
|
+
addEvent?: (ev: 'onFocusTab', cb: (ev: {
|
|
314
|
+
stop: () => void;
|
|
315
|
+
}) => unknown) => unknown;
|
|
316
|
+
content: React__default.FunctionComponent<{
|
|
317
|
+
tab: Tab;
|
|
318
|
+
}>;
|
|
319
|
+
icon?: TIconName | TIconType;
|
|
320
|
+
/**
|
|
321
|
+
* El id es importante ya que se utiliza por temas de accesibilidad. Es
|
|
322
|
+
* importante asegurarse de que sea único.
|
|
323
|
+
*/
|
|
324
|
+
id: string;
|
|
325
|
+
isClosable?: boolean;
|
|
326
|
+
isDisabled?: boolean;
|
|
327
|
+
/**
|
|
328
|
+
* Los tabs que estén marcados como fixed aparecerán al inicio del listado.
|
|
329
|
+
*/
|
|
330
|
+
isFixed?: boolean;
|
|
331
|
+
isFocused?: boolean;
|
|
332
|
+
/**
|
|
333
|
+
* Si se marca como iconTab, se oculta el label y solamente se muestra el
|
|
334
|
+
* ícono.
|
|
335
|
+
*/
|
|
336
|
+
isIconTab?: boolean;
|
|
337
|
+
isLoading?: boolean;
|
|
338
|
+
isOpen?: boolean;
|
|
339
|
+
/**
|
|
340
|
+
* Si un tab se marca como lazy, el iframe no se inicializará hasta que no
|
|
341
|
+
* sea abierta por primera vez.
|
|
342
|
+
*/
|
|
343
|
+
lazy?: boolean;
|
|
344
|
+
/**
|
|
345
|
+
* Cuando se cierra un tab que tiene un método onBeforeClose, el mismo será
|
|
346
|
+
* llamado y deberá devolver un boolean o un string. Si devuelve true, se
|
|
347
|
+
* cierra. Si devuelve false, se muestra un cartel de confirmación genérico y
|
|
348
|
+
* si se devuelve un string, se muestra un cartel de confirmación con el
|
|
349
|
+
* string devuelto. En caso de que el usuario confirme el cuadro de diálogo,
|
|
350
|
+
* el tab será cerrado de todas formas. Es decir, no hay forma de evitar que
|
|
351
|
+
* el tab sea cerrado si el usuario decide continuar con la acción. Para
|
|
352
|
+
* evitar que un tab sea cerrado, debe pasarse isClosable=false
|
|
353
|
+
*/
|
|
354
|
+
onBeforeClose?: () => boolean | string | Promise<boolean | string>;
|
|
355
|
+
/**
|
|
356
|
+
* Este callback será llamado cada vez que el tab sea abierto
|
|
357
|
+
*/
|
|
358
|
+
onFocus?: (ev: Tab) => unknown;
|
|
359
|
+
/**
|
|
360
|
+
* Es el texto que se va a mostrar en el tab
|
|
361
|
+
*/
|
|
362
|
+
label: string;
|
|
363
|
+
labelRenderer?: TTabLabelRenderer;
|
|
364
|
+
/**
|
|
365
|
+
* Se pueden pasar propiedades adicionales que serán recibidas en cada
|
|
366
|
+
* evento, de forma de poder compartir piezas de información útiles en las
|
|
367
|
+
* distintas partes de la aplicación.
|
|
368
|
+
*/
|
|
369
|
+
additionalProps?: any;
|
|
370
|
+
tabId: string;
|
|
371
|
+
title?: string;
|
|
372
|
+
};
|
|
373
|
+
type TTabLabelRenderer = (props: {
|
|
374
|
+
tab: Tab<TTab>;
|
|
375
|
+
}) => React__default.ReactElement;
|
|
376
|
+
type TTabsListState<TabType extends TTab> = {
|
|
377
|
+
openTabs: Set<Tab<TabType>>;
|
|
378
|
+
tabs: Map<string, Tab<TabType>>;
|
|
379
|
+
timestamp: number;
|
|
380
|
+
};
|
|
381
|
+
|
|
382
|
+
declare const DefaultTabsLabelRenderer: TTabLabelRenderer;
|
|
383
|
+
|
|
384
|
+
declare const TabsContent: ((props: Omit<BoxProps, 'children'>) => React$1.JSX.Element | null) & {
|
|
385
|
+
displayName: string;
|
|
386
|
+
};
|
|
387
|
+
|
|
388
|
+
declare const Tabs: ({ id, getController, initialTabs, orientation, ...props }: TabsControllerProps<TTab> & Omit<BoxProps, 'id' | 'as' | 'role'>, ref: React__default.ForwardedRef<HTMLDivElement>) => React__default.JSX.Element | null;
|
|
389
|
+
|
|
251
390
|
declare class ApiaUtilTabsController {
|
|
252
391
|
get currentTab(): Tab<TTab>;
|
|
253
392
|
closeTab(tabId: string, force?: boolean): void;
|
|
@@ -298,7 +437,16 @@ declare class ApiaUtilParsers {
|
|
|
298
437
|
* separadores de decimales.
|
|
299
438
|
*/
|
|
300
439
|
addThousSeparator(nStr: string | number): string;
|
|
440
|
+
/**
|
|
441
|
+
* Toma un número y lo devuelve formateado con los parámetros de Apia
|
|
442
|
+
*/
|
|
301
443
|
apiaNumber(pValue: number): number | string;
|
|
444
|
+
/**
|
|
445
|
+
* Toma una cadena de caracteres y lo parsea en el formato de Apia.
|
|
446
|
+
* Esta cadena de caracteres podría venir por ejemplo de un evento
|
|
447
|
+
* onChange en un campo de tipo input.
|
|
448
|
+
*/
|
|
449
|
+
apiaNumber(pValue: string): string;
|
|
302
450
|
/**
|
|
303
451
|
* Toma un número en formato Apia y lo devuelve como float en javascript.
|
|
304
452
|
*/
|
|
@@ -450,7 +598,9 @@ declare class AutomaticTooltip {
|
|
|
450
598
|
#private;
|
|
451
599
|
private handler;
|
|
452
600
|
ref: (el: HTMLElement | null) => void;
|
|
453
|
-
constructor(tooltip: Partial<TTooltip>
|
|
601
|
+
constructor(tooltip: (Partial<TTooltip> & {
|
|
602
|
+
timeout?: number | undefined;
|
|
603
|
+
}) | null | undefined, handler: ApiaUtilTooltips);
|
|
454
604
|
update: (tooltip: Partial<TTooltip>) => void;
|
|
455
605
|
}
|
|
456
606
|
|
|
@@ -462,7 +612,9 @@ declare class ApiaUtilTooltips {
|
|
|
462
612
|
* Permite crear un tooltip que se abrirá automáticamente al estar parado
|
|
463
613
|
* sobre un elemento durante 300ms
|
|
464
614
|
*/
|
|
465
|
-
useHover: (tooltip?: Partial<TTooltip>
|
|
615
|
+
useHover: (tooltip?: Partial<TTooltip> & {
|
|
616
|
+
timeout?: number;
|
|
617
|
+
}) => AutomaticTooltip;
|
|
466
618
|
close: (id: string) => void;
|
|
467
619
|
closeAll: () => void;
|
|
468
620
|
open: (tooltip: TTooltip) => ApiaUtilTooltip;
|
|
@@ -518,145 +670,6 @@ declare class ApiaUtil {
|
|
|
518
670
|
Component: () => React$1.JSX.Element;
|
|
519
671
|
}
|
|
520
672
|
|
|
521
|
-
declare const TabsList: (({ arrowsBehavior }: {
|
|
522
|
-
arrowsBehavior?: "open" | "focus" | undefined;
|
|
523
|
-
}) => React__default.JSX.Element | null) & {
|
|
524
|
-
displayName: string;
|
|
525
|
-
};
|
|
526
|
-
|
|
527
|
-
declare class Tab<TabType extends TTab = TTab> {
|
|
528
|
-
state: TabType;
|
|
529
|
-
controller: TabsController<TabType>;
|
|
530
|
-
constructor(state: TabType, controller: TabsController<TabType>);
|
|
531
|
-
get id(): string;
|
|
532
|
-
/**
|
|
533
|
-
* El parámetro force evita que se muestre cartel de confirmación al usuario cuando puede haber pérdida de datos.
|
|
534
|
-
*/
|
|
535
|
-
close(force?: boolean): Promise<boolean>;
|
|
536
|
-
open(): void;
|
|
537
|
-
}
|
|
538
|
-
declare class TabsController<TabType extends TTab = TTab> {
|
|
539
|
-
#private;
|
|
540
|
-
id: string;
|
|
541
|
-
props: Omit<TabsControllerProps<TabType>, 'id'>;
|
|
542
|
-
state: TTabsListState<TabType>;
|
|
543
|
-
getActiveTab(): Tab<TabType>;
|
|
544
|
-
/**
|
|
545
|
-
* Es el tab que está abierto
|
|
546
|
-
*/
|
|
547
|
-
get activeTab(): Tab<TabType>;
|
|
548
|
-
getTab(id: string): Tab<TabType> | undefined;
|
|
549
|
-
get tabsList(): Tab<TabType>[];
|
|
550
|
-
constructor(id: string, props: Omit<TabsControllerProps<TabType>, 'id'>);
|
|
551
|
-
/**
|
|
552
|
-
* Obviamente agrega un tab al listado de tabs
|
|
553
|
-
*/
|
|
554
|
-
append(tab: TabType): void;
|
|
555
|
-
closeAll(closeFixedTabsAsWell?: boolean, force?: boolean): Promise<void>;
|
|
556
|
-
closeOpenTab(force?: boolean): void;
|
|
557
|
-
closeToRight(targetId: string, force?: boolean): Promise<void>;
|
|
558
|
-
closeToLeft(targetId: string, force?: boolean): Promise<void>;
|
|
559
|
-
closeOthers(targetId: string, force?: boolean): Promise<void>;
|
|
560
|
-
closeTab(tabId: string, force?: boolean): Promise<boolean>;
|
|
561
|
-
focusNextTab(): Tab<TabType> | null;
|
|
562
|
-
focusPreviousTab(): Tab<TabType> | null;
|
|
563
|
-
focusTab(tabId: string): void;
|
|
564
|
-
getTabElement(tabId: string): Element | null;
|
|
565
|
-
handleKeyDown(ev: React__default.KeyboardEvent): void;
|
|
566
|
-
openNextTab(): Tab<TabType> | null;
|
|
567
|
-
openPreviousTab(): Tab<TabType> | null;
|
|
568
|
-
/**
|
|
569
|
-
* Se utiliza para hacer que el tab aparezca visible en el listado
|
|
570
|
-
*/
|
|
571
|
-
openTab(tabId: string): void;
|
|
572
|
-
}
|
|
573
|
-
|
|
574
|
-
type TOrientation = 'horizontal' | 'vertical';
|
|
575
|
-
type TabsControllerProps<TabType extends TTab> = {
|
|
576
|
-
id: string;
|
|
577
|
-
initialTabs?: TabType[];
|
|
578
|
-
getController?: (controller: TabsController) => unknown;
|
|
579
|
-
onCloseTab?: (tan: Tab) => void;
|
|
580
|
-
orientation: TOrientation;
|
|
581
|
-
};
|
|
582
|
-
type TTab = {
|
|
583
|
-
addEvent?: (ev: 'onFocusTab', cb: (ev: {
|
|
584
|
-
stop: () => void;
|
|
585
|
-
}) => unknown) => unknown;
|
|
586
|
-
content: React__default.FunctionComponent<{
|
|
587
|
-
tab: Tab;
|
|
588
|
-
}>;
|
|
589
|
-
icon?: TIconName | TIconType;
|
|
590
|
-
/**
|
|
591
|
-
* El id es importante ya que se utiliza por temas de accesibilidad. Es
|
|
592
|
-
* importante asegurarse de que sea único.
|
|
593
|
-
*/
|
|
594
|
-
id: string;
|
|
595
|
-
isClosable?: boolean;
|
|
596
|
-
isDisabled?: boolean;
|
|
597
|
-
/**
|
|
598
|
-
* Los tabs que estén marcados como fixed aparecerán al inicio del listado.
|
|
599
|
-
*/
|
|
600
|
-
isFixed?: boolean;
|
|
601
|
-
isFocused?: boolean;
|
|
602
|
-
/**
|
|
603
|
-
* Si se marca como iconTab, se oculta el label y solamente se muestra el
|
|
604
|
-
* ícono.
|
|
605
|
-
*/
|
|
606
|
-
isIconTab?: boolean;
|
|
607
|
-
isLoading?: boolean;
|
|
608
|
-
isOpen?: boolean;
|
|
609
|
-
/**
|
|
610
|
-
* Si un tab se marca como lazy, el iframe no se inicializará hasta que no
|
|
611
|
-
* sea abierta por primera vez.
|
|
612
|
-
*/
|
|
613
|
-
lazy?: boolean;
|
|
614
|
-
/**
|
|
615
|
-
* Cuando se cierra un tab que tiene un método onBeforeClose, el mismo será
|
|
616
|
-
* llamado y deberá devolver un boolean o un string. Si devuelve true, se
|
|
617
|
-
* cierra. Si devuelve false, se muestra un cartel de confirmación genérico y
|
|
618
|
-
* si se devuelve un string, se muestra un cartel de confirmación con el
|
|
619
|
-
* string devuelto. En caso de que el usuario confirme el cuadro de diálogo,
|
|
620
|
-
* el tab será cerrado de todas formas. Es decir, no hay forma de evitar que
|
|
621
|
-
* el tab sea cerrado si el usuario decide continuar con la acción. Para
|
|
622
|
-
* evitar que un tab sea cerrado, debe pasarse isClosable=false
|
|
623
|
-
*/
|
|
624
|
-
onBeforeClose?: () => boolean | string | Promise<boolean | string>;
|
|
625
|
-
/**
|
|
626
|
-
* Este callback será llamado cada vez que el tab sea abierto
|
|
627
|
-
*/
|
|
628
|
-
onFocus?: (ev: Tab) => unknown;
|
|
629
|
-
/**
|
|
630
|
-
* Es el texto que se va a mostrar en el tab
|
|
631
|
-
*/
|
|
632
|
-
label: string;
|
|
633
|
-
labelRenderer?: TTabLabelRenderer;
|
|
634
|
-
/**
|
|
635
|
-
* Se pueden pasar propiedades adicionales que serán recibidas en cada
|
|
636
|
-
* evento, de forma de poder compartir piezas de información útiles en las
|
|
637
|
-
* distintas partes de la aplicación.
|
|
638
|
-
*/
|
|
639
|
-
additionalProps?: any;
|
|
640
|
-
tabId: string;
|
|
641
|
-
title?: string;
|
|
642
|
-
};
|
|
643
|
-
type TTabLabelRenderer = (props: {
|
|
644
|
-
tab: Tab<TTab>;
|
|
645
|
-
}) => React__default.ReactElement;
|
|
646
|
-
type TTabsListState<TabType extends TTab> = {
|
|
647
|
-
openTabs: Set<Tab<TabType>>;
|
|
648
|
-
tabs: Map<string, Tab<TabType>>;
|
|
649
|
-
timestamp: number;
|
|
650
|
-
};
|
|
651
|
-
|
|
652
|
-
declare const DefaultTabsLabelRenderer: TTabLabelRenderer;
|
|
653
|
-
|
|
654
|
-
declare const TabsContent: ((props: Omit<BoxProps, 'children'>) => React$1.JSX.Element | null) & {
|
|
655
|
-
displayName: string;
|
|
656
|
-
};
|
|
657
|
-
|
|
658
|
-
declare const Tabs: ({ id, getController, initialTabs, orientation, ...props }: TabsControllerProps<TTab> & Omit<BoxProps, 'id' | 'as' | 'role'>, ref: React__default.ForwardedRef<HTMLDivElement>) => React__default.JSX.Element | null;
|
|
659
|
-
|
|
660
673
|
interface ITab {
|
|
661
674
|
fncId: number;
|
|
662
675
|
tabId: string;
|
|
@@ -950,6 +963,7 @@ interface IIconInput extends IField {
|
|
|
950
963
|
icon?: TIconType | TIconName;
|
|
951
964
|
inputProps?: Partial<InputProps>;
|
|
952
965
|
inputRef?: React__default.RefObject<HTMLInputElement>;
|
|
966
|
+
mask?: string;
|
|
953
967
|
onClick?: (ev: React__default.MouseEvent) => void;
|
|
954
968
|
onBlur?: React__default.FocusEventHandler;
|
|
955
969
|
[key: string]: unknown;
|
|
@@ -1017,16 +1031,8 @@ type TNumberInput = Omit<InputProps, 'type' | 'onChange' | 'onBlur' | 'value' |
|
|
|
1017
1031
|
value?: string;
|
|
1018
1032
|
defaultValue?: string;
|
|
1019
1033
|
avoidDecimalRestriction?: boolean;
|
|
1034
|
+
deleteValueOnError?: boolean;
|
|
1020
1035
|
};
|
|
1021
|
-
declare global {
|
|
1022
|
-
interface Window {
|
|
1023
|
-
AMOUNT_DECIMAL_SEPARATOR: string;
|
|
1024
|
-
AMOUNT_DECIMAL_ZEROS: string;
|
|
1025
|
-
CHAR_DECIMAL_SEPARATOR: string;
|
|
1026
|
-
CHAR_THOUS_SEPARATOR: string;
|
|
1027
|
-
ADD_THOUSAND_SEPARATOR: boolean;
|
|
1028
|
-
}
|
|
1029
|
-
}
|
|
1030
1036
|
declare function parseNumberInputValueToNumber(value: string): number;
|
|
1031
1037
|
declare function parseNumberValueToNumberInput(value: string | number): string;
|
|
1032
1038
|
declare const NumberInput: React__default.ForwardRefExoticComponent<Omit<TNumberInput, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
|
|
@@ -1595,6 +1601,7 @@ type TIcon<P = Record<string, unknown>> = {
|
|
|
1595
1601
|
className?: string;
|
|
1596
1602
|
id: TId$1;
|
|
1597
1603
|
icon?: TIconName | TIconType;
|
|
1604
|
+
iconRenderer?: TIconRenderer<P>;
|
|
1598
1605
|
imageUrl?: string;
|
|
1599
1606
|
/**
|
|
1600
1607
|
* Es el texto que se mostrará debajo de la imagen.
|
|
@@ -1712,6 +1719,7 @@ type TToolbarIconButton = {
|
|
|
1712
1719
|
* entonces el estado de toggle será controlado internamente en el toolbar
|
|
1713
1720
|
*/
|
|
1714
1721
|
allowToggle?: boolean;
|
|
1722
|
+
className?: string;
|
|
1715
1723
|
/**
|
|
1716
1724
|
* Si se desea usar defaultToggled, debería pasarse también allowToggle
|
|
1717
1725
|
*/
|
|
@@ -1736,7 +1744,7 @@ type TToolInput = {
|
|
|
1736
1744
|
|
|
1737
1745
|
declare const ToolbarTextButton: (props: ISimpleButton) => React$1.JSX.Element;
|
|
1738
1746
|
|
|
1739
|
-
declare const ToolbarIconButton: ({ id, action, actionSource, allowToggle, defaultToggled, disabled, icon, iconSize, isLoading: outerIsLoading, title, toggled: toggledProp, }: TToolbarIconButton) => React$1.JSX.Element;
|
|
1747
|
+
declare const ToolbarIconButton: ({ id, action, actionSource, allowToggle, className, defaultToggled, disabled, icon, iconSize, isLoading: outerIsLoading, title, toggled: toggledProp, }: TToolbarIconButton) => React$1.JSX.Element;
|
|
1740
1748
|
|
|
1741
1749
|
declare const ToolbarInput: (tool: TToolInput) => React$1.JSX.Element;
|
|
1742
1750
|
|