@topconsultnpm/sdkui-react 6.22.0-dev3.3 → 6.22.0-dev3.30

package/lib/components/base/TMSpinner.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 interface ITMSpinner {
     backgroundColor?: string;
     fontSize?: string;
@@ -7,7 +8,7 @@ interface ITMSpinner {
     onCancel?: () => void;
     cancelText?: string;
 }
-declare const Spinner: ({ backgroundColor, description, fontSize, width, flat, onCancel, cancelText }: ITMSpinner) => import("react/jsx-runtime").JSX.Element;
+declare const Spinner: ({ backgroundColor, description, fontSize, width, flat, onCancel, cancelText }: ITMSpinner) => React.JSX.Element;
 declare class TMSpinner {
     static show({ description, backgroundColor, fontSize, flat, onCancel, cancelText }?: ITMSpinner): void;
     static hide(): void;

package/lib/components/base/TMTab.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ValidationItem } from '@topconsultnpm/sdk-ts';
 export interface ITMTabProps {
     title: string;
@@ -7,14 +8,14 @@ export declare const TMTab: ({ label, propsToBeValidated, children }: {
     label?: string;
     propsToBeValidated?: string[] | undefined;
     children?: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export declare const TMTabItemBadge: ({ vil }: {
     vil: ValidationItem[];
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 declare const TMTabGroup: ({ children, fontSize, validationItems, onTabIndexChanged }: {
     onTabIndexChanged?: (e: number) => void;
     children: any;
     fontSize?: string;
     validationItems?: ValidationItem[];
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default TMTabGroup;

package/lib/components/base/TMTabControl.d.ts

@@ -0,0 +1,106 @@
+import React from 'react';
+import { TMContextMenuItemProps } from '../NewComponents/ContextMenu/types';
+/** Stile della barra, sempre nei colori del modulo: 'module' con la striscia, 'card' senza fondo, 'moduleFilled' col tab pieno. */
+export type TMTabControlVariant = 'card' | 'module' | 'moduleFilled';
+/** Effetto del contenuto quando si cambia tab: 'fade' e il default, 'none' toglie l'animazione. */
+export type TMTabControlAnimation = 'none' | 'fade' | 'slide' | 'zoom';
+export interface TMTabPanelProps {
+    /** Identificativo univoco del tab. */
+    id: string;
+    /** Titolo mostrato nella barra: stringa se vuoi poterlo rinominare. */
+    label: React.ReactNode;
+    /** Numero nel badge accanto al titolo: nascosto se 0 o undefined. */
+    badge?: number;
+    /** Colore del badge, default rosso. */
+    badgeColor?: string;
+    /** Tab non cliccabile. */
+    disabled?: boolean;
+    /** Se false il tab non viene renderizzato: comodo per tab condizionali. Default true. */
+    visible?: boolean;
+    /** Se false nasconde la 'x' e la voce Chiudi su questo tab. Default true. */
+    closable?: boolean;
+    /** Se false disabilita la rinomina su questo tab. Default true. */
+    renamable?: boolean;
+    /** Se false il tab non si trascina e non accetta il rilascio di altri: resta al suo posto. Default true. */
+    movable?: boolean;
+    children?: React.ReactNode;
+}
+/** Contenitore dichiarativo di un tab: figlio diretto di TMTabControl, non renderizza nulla di suo. */
+export declare const TMTabPanel: React.FC<TMTabPanelProps>;
+export interface TMTabControlProps {
+    /** Id del tab attivo in modalita controllata. */
+    selectedId?: string;
+    /** Tab iniziale in modalita non controllata. Default: primo tab visibile. */
+    defaultSelectedId?: string;
+    /** Notifica il cambio tab in entrambe le modalita. */
+    onSelectedIdChange?: (id: string) => void;
+    /** Se true con un solo tab la barra non viene mostrata: resta solo il contenuto. Default false. */
+    hideBarWhenSingle?: boolean;
+    /** Se valorizzata mostra la 'x' sui tab e notifica la richiesta di chiusura. */
+    onTabClose?: (id: string) => void;
+    /** Se true anche l'ultimo tab rimasto e chiudibile, lasciando il controllo senza tab. Default false. */
+    closableWhenSingle?: boolean;
+    /** Se valorizzata abilita la rinomina del titolo. */
+    onTabRename?: (id: string, label: string) => void;
+    /** Se valorizzata abilita lo spostamento con trascinamento: sposta draggedId nella posizione di targetId. */
+    onTabReorder?: (draggedId: string, targetId: string) => void;
+    /** Se valorizzata il menu contestuale del tab mostra anche la voce per aggiungere un tab. */
+    onTabAdd?: () => void;
+    /** Voci del chiamante nel menu contestuale del tab: precedono quelle del controllo, che non ripete una voce con lo stesso testo (es. Chiudi). */
+    tabMenuItems?: (id: string) => TMContextMenuItemProps[];
+    /** Testo della voce di menu per l'aggiunta. */
+    addCaption?: string;
+    /** Testo della voce di menu per la rinomina. */
+    renameCaption?: string;
+    /** Testo della voce di menu per la chiusura. */
+    closeCaption?: string;
+    /** Testo della voce di menu per la chiusura degli altri tab. */
+    closeOtherCaption?: string;
+    /** Stile della barra: 'module' (default) con la striscia, 'card' senza fondo o 'moduleFilled' col tab pieno. */
+    variant?: TMTabControlVariant;
+    /** Colore del titolo del tab attivo: scavalca quello della variante. */
+    textColor?: string;
+    /** Colore del titolo dei tab inattivi: scavalca quello della variante. */
+    idleTextColor?: string;
+    /** Effetto del contenuto al cambio tab: 'fade' (default), 'slide' nel verso dello spostamento, 'zoom' o 'none'. */
+    contentAnimation?: TMTabControlAnimation;
+    /** Durata dell'effetto in millisecondi. Default 280. */
+    animationDuration?: number;
+    /** Se true su touch si cambia tab trascinando il contenuto di lato. Default false. */
+    swipeEnabled?: boolean;
+    /** Stile del contenitore del contenuto, es. altezza e overflow. */
+    contentStyle?: React.CSSProperties;
+    /** Stile del contenitore esterno. */
+    style?: React.CSSProperties;
+    /** Contenuto del chiamante in coda alla barra, a destra dei tab: es. i pulsanti di azione della pagina.
+        Fa parte della barra, quindi con hideBarWhenSingle e un solo tab non viene mostrato. */
+    toolbar?: React.ReactNode;
+    children: React.ReactNode;
+}
+declare const TMTabControl: React.FC<TMTabControlProps>;
+export default TMTabControl;
+export interface TMTabDescriptor {
+    id: string;
+    label: string;
+}
+export interface TMTabsController {
+    items: TMTabDescriptor[];
+    activeId: string;
+    setActiveId: (id: string) => void;
+    /** Aggiunge un tab e lo attiva. Torna l'id creato. */
+    add: (label?: string) => string;
+    /** Chiude un tab: se era attivo passa al precedente. */
+    close: (id: string) => void;
+    rename: (id: string, label: string) => void;
+    /** Sposta il tab trascinato nella posizione di quello di arrivo. */
+    move: (draggedId: string, targetId: string) => void;
+    /** TMTabControl: funzionalità selezione, chiusura, rinomina, spostamento e aggiunta. */
+    controlProps: Pick<TMTabControlProps, 'selectedId' | 'onSelectedIdChange' | 'onTabClose' | 'onTabRename' | 'onTabReorder' | 'onTabAdd'>;
+}
+export interface TMTabsOptions {
+    /** Titolo del primo tab e base per quelli aggiunti ("Ricerca", poi "Ricerca 2", "Ricerca 3"...). */
+    label: string;
+    /** Titolo personalizzato per i tab aggiunti, in alternativa alla numerazione automatica. */
+    newLabel?: (index: number) => string;
+}
+export declare const useTMTabs: ({ label, newLabel }: TMTabsOptions) => TMTabsController;