CSS tableau (...) + "disabled" et "secondaryLabel" sur actions de listes

klee-contrib · Feb 14, 2024 · e1b7470 · e1b7470
1 parent d511f80
commit e1b7470
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 28 deletions.
diff --git a/packages/collections/src/list/__style__/table.css b/packages/collections/src/list/__style__/table.css
@@ -147,8 +147,8 @@
 }
 
 .table--selected .header {
-    .checkbox,
-    .checkbox ~ th {
+    .checkbox--all,
+    .checkbox--all ~ th {
         --focus-ring-color: var(--table-header-sorted-selected-color);
 
         --table-header-color: var(--table-header-selected-color);

diff --git a/packages/collections/src/list/contextual-actions.tsx b/packages/collections/src/list/contextual-actions.tsx
@@ -20,16 +20,20 @@ export {contextualActionsCss, ContextualActionsCss};
 export interface OperationListItem<T> {
     /** L'action à effectuer. */
     action: (data: T) => void;
-    /** Couleur du bouton (si pas secondaire). */
+    /** Couleur du bouton. Si c'est une action secondaire, ce sera la couleur du bouton d'actions secondaires. S'il y en a plusieurs, c'est la première valeur non vide qui sera utilisée. */
     color?: "accent" | "light" | "primary";
+    /** Affiche l'action, mais désactivée. */
+    disabled?: boolean;
     /** Le libellé (ou la tooltip) du bouton. */
     label?: string;
     /** L'icône du bouton */
     icon?: Icon;
-    /** Variante du bouton (si pas secondaire). */
-    variant?: "elevated-filled" | "elevated" | "filled" | "outlined";
+    /** Label pour la tooltip du bouton d'actions secondaires, si l'action est de type `secondary`. S'il y a plusieurs actions secondaires, c'est le premier label non vide qui sera utilisé. */
+    secondaryLabel?: string;
     /** Type d'affichage pour l'action. Seul "secondary" sera pris en compte pour une mosaïque. Par défaut : "icon-label". */
     type?: "icon-label" | "icon-tooltip" | "icon" | "label" | "secondary";
+    /** Variante du bouton. Si c'est une action secondaire, ce sera la variante du bouton d'actions secondaires. S'il y en a plusieurs, c'est la première valeur non vide qui sera utilisée. */
+    variant?: "elevated-filled" | "elevated" | "filled" | "outlined";
 }
 
 /** Props du composant d'actions contextuelles. */
@@ -57,44 +61,45 @@ export function ContextualActions({
     const theme = useTheme("contextualActions", contextualActionsCss, pTheme);
 
     const {primaryActions, secondaryActions} = operationList.reduce(
-        (actionLists, Operation, key) => {
+        (actionLists, operation, key) => {
             // eslint-disable-next-line @typescript-eslint/no-shadow
             const {primaryActions, secondaryActions} = actionLists;
-            if (Operation.type !== "secondary") {
-                const hasTooltip = (isMosaic && !!Operation.label) || Operation.type === "icon-tooltip";
+            if (operation.type !== "secondary") {
+                const hasTooltip = (isMosaic && !!operation.label) || operation.type === "icon-tooltip";
                 const FinalButton = isMosaic
                     ? FloatingActionButton
-                    : !isMosaic && (Operation.type === "icon" || Operation.type === "icon-tooltip")
+                    : !isMosaic && (operation.type === "icon" || operation.type === "icon-tooltip")
                     ? IconButton
                     : Button;
                 const button = (
                     <FinalButton
                         key={key}
-                        color={isMosaic ? "primary" : Operation.color}
+                        color={isMosaic ? "primary" : operation.color}
                         icon={
-                            (isMosaic || !Operation.type || Operation.type.includes("icon")
-                                ? Operation.icon
+                            (isMosaic || !operation.type || operation.type.includes("icon")
+                                ? operation.icon
                                 : undefined)!
                         }
-                        label={!isMosaic && FinalButton === Button ? Operation.label : undefined}
+                        label={!isMosaic && FinalButton === Button ? operation.label : undefined}
                         onClick={() => operationList[key].action(data)}
-                        variant={Operation.variant as "filled"}
+                        variant={operation.variant as "filled"}
                     />
                 );
                 primaryActions.push(
                     hasTooltip ? (
-                        <Tooltip key={key} tooltip={Operation.label}>
+                        <Tooltip key={key} tooltip={operation.label}>
                             {button}
                         </Tooltip>
                     ) : (
                         button
                     )
                 );
-            } else if (Operation.label) {
+            } else if (operation.label) {
                 secondaryActions.push({
-                    iconLeft: Operation.icon,
+                    iconLeft: operation.icon,
                     onClick: () => operationList[key].action(data),
-                    caption: Operation.label
+                    caption: operation.label,
+                    disabled: operation.disabled
                 });
             }
             return actionLists;
@@ -106,16 +111,26 @@ export function ContextualActions({
     );
 
     const menu = useMenu();
+    const saColor = operationList.find(sa => sa.type === "secondary" && !!sa.color)?.color;
+    const saTooltip = operationList.find(sa => sa.type === "secondary" && !!sa.secondaryLabel)?.secondaryLabel;
+    const saButton = isMosaic ? (
+        <FloatingActionButton
+            color={saColor}
+            icon={{i18nKey: `${i18nPrefix}.icons.contextualActions.secondary`}}
+            onClick={menu.toggle}
+        />
+    ) : (
+        <IconButton
+            color={saColor}
+            icon={{i18nKey: `${i18nPrefix}.icons.contextualActions.secondary`}}
+            onClick={menu.toggle}
+            variant={operationList.find(sa => sa.type === "secondary" && !!sa.variant)?.variant as "filled"}
+        />
+    );
+
     const secondaryActionMenu = secondaryActions.length ? (
         <div ref={menu.anchor} style={{position: "relative"}}>
-            {isMosaic ? (
-                <FloatingActionButton
-                    icon={{i18nKey: `${i18nPrefix}.icons.contextualActions.secondary`}}
-                    onClick={menu.toggle}
-                />
-            ) : (
-                <IconButton icon={{i18nKey: `${i18nPrefix}.icons.contextualActions.secondary`}} onClick={menu.toggle} />
-            )}
+            {saTooltip ? <Tooltip tooltip={saTooltip}>{saButton}</Tooltip> : saButton}
             <Menu {...menu}>
                 {secondaryActions.map((a, i) => (
                     <MenuItem key={i} {...a} />

diff --git a/packages/collections/src/list/table/header.tsx b/packages/collections/src/list/table/header.tsx
@@ -36,7 +36,7 @@ export function TableHeader<T>({
         <th
             className={classNames(
                 cellClassName,
-                theme.heading({sortable: !!(store && sortKey), sorted: store && store?.sortBy === sortKey})
+                theme.heading({sortable: !!(store && sortKey), sorted: store && !!sortKey && store?.sortBy === sortKey})
             )}
             onClick={
                 store && sortKey

diff --git a/packages/collections/src/list/table/index.tsx b/packages/collections/src/list/table/index.tsx
@@ -101,7 +101,7 @@ export function Table<T>({
                     <thead>
                         <tr className={theme.header()}>
                             {hasSelection ? (
-                                <th className={hasSelectAll ? theme.checkbox() : undefined}>
+                                <th className={theme.checkbox({all: hasSelectAll})}>
                                     {hasSelectAll ? (
                                         <Checkbox
                                             indeterminate={store?.selectionStatus === "partial"}