@axinom/mosaic-ui 0.34.0-rc.2 → 0.34.0-rc.20

package/src/components/List/ListRow/Renderers/BooleanDotRenderer/BooleanDotRenderer.scss

@@ -1,15 +1,17 @@
 @import '../../../../../styles/common.scss';
 
-.green {
-  background-color: var(--boolean-dot-true-color, $boolean-dot-true-color);
+.circle {
   height: var(--boolean-dot-size, $boolean-dot-size);
   width: var(--boolean-dot-size, $boolean-dot-size);
+  min-width: var(--boolean-dot-size, $boolean-dot-size);
+  min-height: var(--boolean-dot-size, $boolean-dot-size);
   border-radius: 100%;
-}
 
-.red {
-  background-color: var(--boolean-dot-false-color, $boolean-dot-false-color);
-  height: var(--boolean-dot-size, $boolean-dot-size);
-  width: var(--boolean-dot-size, $boolean-dot-size);
-  border-radius: 100%;
+  &.green {
+    background-color: var(--boolean-dot-true-color, $boolean-dot-true-color);
+  }
+
+  &.red {
+    background-color: var(--boolean-dot-false-color, $boolean-dot-false-color);
+  }
 }

package/src/components/List/ListRow/Renderers/BooleanDotRenderer/BooleanDotRenderer.tsx

@@ -16,5 +16,7 @@ import classes from './BooleanDotRenderer.scss';
  *
  */
 export const BooleanDotRenderer = (val: unknown): JSX.Element => (
-  <div className={clsx(val ? [classes.green] : [classes.red])}></div>
+  <div
+    className={clsx(classes.circle, val ? [classes.green] : [classes.red])}
+  ></div>
 );

package/src/components/List/useColumnsSize.ts

@@ -0,0 +1,120 @@
+import { useEffect, useState } from 'react';
+import { Data } from '../../types';
+import { Column, ListSelectMode } from './List.model';
+
+/**
+ * Generates a combined string of all columns.columnSize values, to be used as CSS value
+ * @param columns The list of columns that should be used
+ * @returns a string of all column sizes of the array, combined
+ */
+const getColumnsSizeDefinition = function <T extends Data>(
+  columns: Column<T>[],
+  showActionButton: boolean,
+  selectMode: ListSelectMode,
+  showInlineMenu: boolean,
+): string {
+  const columnSizeDefinition = columns.map((column) => column.size ?? '1fr');
+
+  const hasActionsColumn = hasActionColumn(
+    selectMode,
+    showActionButton,
+    showInlineMenu,
+  );
+
+  if (hasActionsColumn) {
+    columnSizeDefinition.push(
+      getActionsColumnSizePx(showInlineMenu, showActionButton),
+    );
+  }
+
+  return columnSizeDefinition.join(' ');
+};
+
+const getActionsColumnSizePx = (...enableActions: boolean[]): string => {
+  const enabledActionsCount = enableActions.filter(
+    (actionEnabled) => actionEnabled,
+  ).length;
+
+  const defaultActionSizePx = 50;
+  const defaultActionsRawGapPx = 8;
+  const calculateMultiActionsColumnSizePx = (actionsCount: number): number => {
+    return (
+      defaultActionSizePx * actionsCount +
+      defaultActionsRawGapPx * (actionsCount - 1)
+    );
+  };
+
+  const sizePx =
+    enabledActionsCount > 1
+      ? calculateMultiActionsColumnSizePx(enabledActionsCount)
+      : defaultActionSizePx;
+
+  return `${sizePx}px`;
+};
+
+/**
+ * Covers the concern of managing the column sizes for the list component
+ * @param columns input definition of columns
+ * @param showActionButton whether the action button is shown
+ * @param selectMode current select mode
+ * @param showInlineMenu whether the inline menu is shown
+ * @returns an object containing the columnSizes (CSS grid-template-columns),
+ *          a reset function (to reset to the initial column sizes)
+ *          and a setter function (to update the column sizes)
+ */
+export const useColumnsSize = <T extends Data>(
+  columns: Column<T>[],
+  showActionButton: boolean,
+  selectMode: ListSelectMode,
+  showInlineMenu: boolean,
+): {
+  columnSizes: string;
+  resetColumnSizes: () => void;
+  setColumnSizes: React.Dispatch<React.SetStateAction<string>>;
+  hasActionColumn: boolean;
+} => {
+  const [orgColumnSizes, setOrgColumnSizes] = useState<string>(
+    getColumnsSizeDefinition(
+      columns,
+      showActionButton,
+      selectMode,
+      showInlineMenu,
+    ),
+  );
+  const [columnSizes, setColumnSizes] = useState<string>(orgColumnSizes);
+
+  useEffect(() => {
+    setOrgColumnSizes(
+      getColumnsSizeDefinition(
+        columns,
+        showActionButton,
+        selectMode,
+        showInlineMenu,
+      ),
+    );
+  }, [columns, selectMode, showActionButton, showInlineMenu]);
+
+  const resetColumnSizes = (): void => {
+    setColumnSizes(orgColumnSizes);
+  };
+
+  return {
+    columnSizes,
+    resetColumnSizes,
+    setColumnSizes,
+    hasActionColumn: hasActionColumn(
+      selectMode,
+      showActionButton,
+      showInlineMenu,
+    ),
+  };
+};
+function hasActionColumn(
+  selectMode: ListSelectMode,
+  showActionButton: boolean,
+  showInlineMenu: boolean,
+): boolean {
+  return (
+    selectMode !== ListSelectMode.None || showActionButton || showInlineMenu
+  );
+}