@addev-be/ui 2.5.20 → 2.6.0

package/src/components/data/DataGrid/DataGridColumnsModal/index.tsx

@@ -1,182 +1,182 @@
-import * as styles from './styles';
-
-import { DataGridColumn, DataGridColumns } from '../types';
-import { Dispatch, SetStateAction, useCallback } from 'react';
-import { DownIcon, LeftIcon, RightIcon, UpIcon } from '../../../../Icons';
-
-import { IconButton } from '../../../forms/IconButton';
-import _ from 'lodash';
-import { normalizeColumnsOrders } from './helpers';
-import { useVisibleAndHiddenColumns } from '../hooks';
-
-export const DataGridColumnItem = <R,>({
-  columnIndex,
-  columnKey,
-  column,
-  visible,
-  onUpButtonClicked,
-  onDownButtonClicked,
-  onVisibleButtonClicked,
-}: {
-  columnIndex: number;
-  columnKey: string;
-  column: DataGridColumn<R>;
-  visible: boolean;
-  onUpButtonClicked?: (index: number) => void;
-  onDownButtonClicked?: (index: number) => void;
-  onVisibleButtonClicked: (key: string) => void;
-}) => (
-  <styles.ColumnItem $visible={visible}>
-    {!visible && (
-      <styles.Buttons $visible={false}>
-        <IconButton
-          size="small"
-          icon={LeftIcon}
-          onClick={() => onVisibleButtonClicked(columnKey)}
-        />
-      </styles.Buttons>
-    )}
-    <span>{column?.name}</span>
-    {visible && (
-      <styles.Buttons $visible>
-        {onUpButtonClicked && (
-          <IconButton
-            size="small"
-            icon={UpIcon}
-            onClick={() => onUpButtonClicked(columnIndex)}
-          />
-        )}
-        {onDownButtonClicked && (
-          <IconButton
-            size="small"
-            icon={DownIcon}
-            onClick={() => onDownButtonClicked(columnIndex)}
-          />
-        )}
-        <IconButton
-          size="small"
-          icon={RightIcon}
-          onClick={() => onVisibleButtonClicked(columnKey)}
-        />
-      </styles.Buttons>
-    )}
-  </styles.ColumnItem>
-);
-
-export const DataGridColumnsEditor = <R,>({
-  columns,
-  onColumnsChanged,
-}: {
-  columns: DataGridColumns<R>;
-  onColumnsChanged: Dispatch<SetStateAction<DataGridColumns<R>>>;
-}) => {
-  console.log('DataGridColumnsEditor columns:', columns);
-  const [visibleColumns, hiddenColumns] = useVisibleAndHiddenColumns(columns);
-  const sortedVisibleColumnsEntries = normalizeColumnsOrders(
-    _.sortBy(visibleColumns, (col) => col.order ?? 0)
-  );
-
-  const onUpButtonClicked = useCallback(
-    (index: number) => {
-      if (index > 0) {
-        const newArray = normalizeColumnsOrders([
-          ...sortedVisibleColumnsEntries.slice(0, index - 1),
-          sortedVisibleColumnsEntries[index],
-          sortedVisibleColumnsEntries[index - 1],
-          ...sortedVisibleColumnsEntries.slice(index + 1),
-        ]);
-        onColumnsChanged(() => [...newArray, ...hiddenColumns]);
-      }
-    },
-    [hiddenColumns, onColumnsChanged, sortedVisibleColumnsEntries]
-  );
-
-  const onDownButtonClicked = useCallback(
-    (index: number) => {
-      if (index < sortedVisibleColumnsEntries.length - 1) {
-        const newArray = normalizeColumnsOrders([
-          ...sortedVisibleColumnsEntries.slice(0, index),
-          sortedVisibleColumnsEntries[index + 1],
-          sortedVisibleColumnsEntries[index],
-          ...sortedVisibleColumnsEntries.slice(index + 2),
-        ]);
-        onColumnsChanged(() => [...newArray, ...hiddenColumns]);
-      }
-    },
-    [hiddenColumns, onColumnsChanged, sortedVisibleColumnsEntries]
-  );
-
-  const onHideButtonClicked = useCallback(
-    (columnKey: string) => {
-      onColumnsChanged((prev) =>
-        prev.map((column) =>
-          column.key === columnKey
-            ? {
-                ...column,
-                order: -1,
-              }
-            : column
-        )
-      );
-    },
-    [onColumnsChanged]
-  );
-
-  const onShowButtonClicked = useCallback(
-    (columnKey: string) => {
-      onColumnsChanged((prev) =>
-        prev.map((column) =>
-          column.key === columnKey
-            ? {
-                ...column,
-                order: Object.keys(prev).length,
-              }
-            : column
-        )
-      );
-    },
-    [onColumnsChanged]
-  );
-
-  return (
-    <styles.Container>
-      <styles.Panel>
-        <styles.Title>Colonnes visibles</styles.Title>
-        <styles.ColumnsList>
-          {sortedVisibleColumnsEntries.map((column, index) => (
-            <DataGridColumnItem
-              key={column.key}
-              columnKey={column.key}
-              columnIndex={index}
-              column={column}
-              visible
-              onUpButtonClicked={index > 0 ? onUpButtonClicked : undefined}
-              onDownButtonClicked={
-                index < sortedVisibleColumnsEntries.length - 1
-                  ? onDownButtonClicked
-                  : undefined
-              }
-              onVisibleButtonClicked={onHideButtonClicked}
-            />
-          ))}
-        </styles.ColumnsList>
-      </styles.Panel>
-
-      <styles.Panel>
-        <styles.Title>Colonnes masquées</styles.Title>
-        <styles.ColumnsList>
-          {hiddenColumns.map((column, index) => (
-            <DataGridColumnItem
-              key={column.key}
-              columnKey={column.key}
-              columnIndex={index}
-              column={column}
-              visible={false}
-              onVisibleButtonClicked={onShowButtonClicked}
-            />
-          ))}
-        </styles.ColumnsList>
-      </styles.Panel>
-    </styles.Container>
-  );
-};
+import * as styles from './styles';
+
+import { DataGridColumn, DataGridColumns } from '../types';
+import { Dispatch, SetStateAction, useCallback } from 'react';
+import { DownIcon, LeftIcon, RightIcon, UpIcon } from '../../../../Icons';
+
+import { IconButton } from '../../../forms/IconButton';
+import _ from 'lodash';
+import { normalizeColumnsOrders } from './helpers';
+import { useVisibleAndHiddenColumns } from '../hooks';
+
+export const DataGridColumnItem = <R,>({
+  columnIndex,
+  columnKey,
+  column,
+  visible,
+  onUpButtonClicked,
+  onDownButtonClicked,
+  onVisibleButtonClicked,
+}: {
+  columnIndex: number;
+  columnKey: string;
+  column: DataGridColumn<R>;
+  visible: boolean;
+  onUpButtonClicked?: (index: number) => void;
+  onDownButtonClicked?: (index: number) => void;
+  onVisibleButtonClicked: (key: string) => void;
+}) => (
+  <styles.ColumnItem $visible={visible}>
+    {!visible && (
+      <styles.Buttons $visible={false}>
+        <IconButton
+          size="small"
+          icon={LeftIcon}
+          onClick={() => onVisibleButtonClicked(columnKey)}
+        />
+      </styles.Buttons>
+    )}
+    <span>{column?.name}</span>
+    {visible && (
+      <styles.Buttons $visible>
+        {onUpButtonClicked && (
+          <IconButton
+            size="small"
+            icon={UpIcon}
+            onClick={() => onUpButtonClicked(columnIndex)}
+          />
+        )}
+        {onDownButtonClicked && (
+          <IconButton
+            size="small"
+            icon={DownIcon}
+            onClick={() => onDownButtonClicked(columnIndex)}
+          />
+        )}
+        <IconButton
+          size="small"
+          icon={RightIcon}
+          onClick={() => onVisibleButtonClicked(columnKey)}
+        />
+      </styles.Buttons>
+    )}
+  </styles.ColumnItem>
+);
+
+export const DataGridColumnsEditor = <R,>({
+  columns,
+  onColumnsChanged,
+}: {
+  columns: DataGridColumns<R>;
+  onColumnsChanged: Dispatch<SetStateAction<DataGridColumns<R>>>;
+}) => {
+  console.log('DataGridColumnsEditor columns:', columns);
+  const [visibleColumns, hiddenColumns] = useVisibleAndHiddenColumns(columns);
+  const sortedVisibleColumnsEntries = normalizeColumnsOrders(
+    _.sortBy(visibleColumns, (col) => col.order ?? 0)
+  );
+
+  const onUpButtonClicked = useCallback(
+    (index: number) => {
+      if (index > 0) {
+        const newArray = normalizeColumnsOrders([
+          ...sortedVisibleColumnsEntries.slice(0, index - 1),
+          sortedVisibleColumnsEntries[index],
+          sortedVisibleColumnsEntries[index - 1],
+          ...sortedVisibleColumnsEntries.slice(index + 1),
+        ]);
+        onColumnsChanged(() => [...newArray, ...hiddenColumns]);
+      }
+    },
+    [hiddenColumns, onColumnsChanged, sortedVisibleColumnsEntries]
+  );
+
+  const onDownButtonClicked = useCallback(
+    (index: number) => {
+      if (index < sortedVisibleColumnsEntries.length - 1) {
+        const newArray = normalizeColumnsOrders([
+          ...sortedVisibleColumnsEntries.slice(0, index),
+          sortedVisibleColumnsEntries[index + 1],
+          sortedVisibleColumnsEntries[index],
+          ...sortedVisibleColumnsEntries.slice(index + 2),
+        ]);
+        onColumnsChanged(() => [...newArray, ...hiddenColumns]);
+      }
+    },
+    [hiddenColumns, onColumnsChanged, sortedVisibleColumnsEntries]
+  );
+
+  const onHideButtonClicked = useCallback(
+    (columnKey: string) => {
+      onColumnsChanged((prev) =>
+        prev.map((column) =>
+          column.key === columnKey
+            ? {
+                ...column,
+                order: -1,
+              }
+            : column
+        )
+      );
+    },
+    [onColumnsChanged]
+  );
+
+  const onShowButtonClicked = useCallback(
+    (columnKey: string) => {
+      onColumnsChanged((prev) =>
+        prev.map((column) =>
+          column.key === columnKey
+            ? {
+                ...column,
+                order: Object.keys(prev).length,
+              }
+            : column
+        )
+      );
+    },
+    [onColumnsChanged]
+  );
+
+  return (
+    <styles.Container>
+      <styles.Panel>
+        <styles.Title>Colonnes visibles</styles.Title>
+        <styles.ColumnsList>
+          {sortedVisibleColumnsEntries.map((column, index) => (
+            <DataGridColumnItem
+              key={column.key}
+              columnKey={column.key}
+              columnIndex={index}
+              column={column}
+              visible
+              onUpButtonClicked={index > 0 ? onUpButtonClicked : undefined}
+              onDownButtonClicked={
+                index < sortedVisibleColumnsEntries.length - 1
+                  ? onDownButtonClicked
+                  : undefined
+              }
+              onVisibleButtonClicked={onHideButtonClicked}
+            />
+          ))}
+        </styles.ColumnsList>
+      </styles.Panel>
+
+      <styles.Panel>
+        <styles.Title>Colonnes masquées</styles.Title>
+        <styles.ColumnsList>
+          {hiddenColumns.map((column, index) => (
+            <DataGridColumnItem
+              key={column.key}
+              columnKey={column.key}
+              columnIndex={index}
+              column={column}
+              visible={false}
+              onVisibleButtonClicked={onShowButtonClicked}
+            />
+          ))}
+        </styles.ColumnsList>
+      </styles.Panel>
+    </styles.Container>
+  );
+};

package/src/components/data/DataGrid/DataGridColumnsModal/styles.ts

@@ -1,104 +1,104 @@
-import styled, { css } from 'styled-components';
-
-export const Container = styled.div.attrs({
-  className: 'DataGridColumnsModal-Container',
-})`
-  display: flex;
-  flex-direction: row;
-  gap: var(--space-2);
-  overflow: auto;
-  font-size: var(--text-base);
-  height: 100%;
-`;
-
-export const Panel = styled.div.attrs({
-  className: 'DataGridColumnsModal-Panel',
-})`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-`;
-
-export const Title = styled.div.attrs({
-  className: 'DataGridColumnsModal-Title',
-})`
-  margin: 0;
-  margin-bottom: var(--space-2);
-  font-weight: bold;
-`;
-
-export const ColumnsList = styled.ul.attrs({
-  className: 'DataGridColumnsModal-ColumnsList',
-})`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow: auto;
-  border: 1px solid var(--color-base-200);
-  margin: 0;
-  background-color: var(--color-base-50);
-
-  & > li:not(:last-child) {
-    border-bottom: 1px solid var(--color-base-100);
-  }
-`;
-
-export const ColumnItem = styled.li.attrs({
-  className: 'DataGridColumnsModal-ColumnItem',
-})<{
-  $visible?: boolean;
-}>`
-  padding: var(--space-1);
-  transition: background-color 0.2s;
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--space-2);
-
-  span {
-    flex: 1;
-  }
-
-  button {
-    display: none;
-    padding: var(--space-1);
-    width: var(--space-6);
-    height: var(--space-6);
-    border-radius: var(--rounded-full);
-    background-color: var(--color-base-200);
-    border: none;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &:hover {
-    background-color: var(--color-base-100);
-    button {
-      display: flex;
-      background-color: var(--color-base-300);
-    }
-  }
-`;
-
-export const Buttons = styled.div.attrs({
-  className: 'DataGridColumnsModal-Buttons',
-})<{ $visible?: boolean }>`
-  display: flex;
-  gap: var(--space-1);
-  height: var(--space-6);
-  ${({ $visible }) =>
-    $visible
-      ? css`
-          width: var(--space-24);
-          justify-content: flex-end;
-        `
-      : css`
-          width: var(--space-6);
-        `}
-
-  svg {
-    width: var(--space-4);
-    height: var(--space-4);
-  }
-`;
+import styled, { css } from 'styled-components';
+
+export const Container = styled.div.attrs({
+  className: 'DataGridColumnsModal-Container',
+})`
+  display: flex;
+  flex-direction: row;
+  gap: var(--space-2);
+  overflow: auto;
+  font-size: var(--text-base);
+  height: 100%;
+`;
+
+export const Panel = styled.div.attrs({
+  className: 'DataGridColumnsModal-Panel',
+})`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;
+
+export const Title = styled.div.attrs({
+  className: 'DataGridColumnsModal-Title',
+})`
+  margin: 0;
+  margin-bottom: var(--space-2);
+  font-weight: bold;
+`;
+
+export const ColumnsList = styled.ul.attrs({
+  className: 'DataGridColumnsModal-ColumnsList',
+})`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: auto;
+  border: 1px solid var(--color-base-200);
+  margin: 0;
+  background-color: var(--color-base-50);
+
+  & > li:not(:last-child) {
+    border-bottom: 1px solid var(--color-base-100);
+  }
+`;
+
+export const ColumnItem = styled.li.attrs({
+  className: 'DataGridColumnsModal-ColumnItem',
+})<{
+  $visible?: boolean;
+}>`
+  padding: var(--space-1);
+  transition: background-color 0.2s;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-2);
+
+  span {
+    flex: 1;
+  }
+
+  button {
+    display: none;
+    padding: var(--space-1);
+    width: var(--space-6);
+    height: var(--space-6);
+    border-radius: var(--rounded-full);
+    background-color: var(--color-base-200);
+    border: none;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &:hover {
+    background-color: var(--color-base-100);
+    button {
+      display: flex;
+      background-color: var(--color-base-300);
+    }
+  }
+`;
+
+export const Buttons = styled.div.attrs({
+  className: 'DataGridColumnsModal-Buttons',
+})<{ $visible?: boolean }>`
+  display: flex;
+  gap: var(--space-1);
+  height: var(--space-6);
+  ${({ $visible }) =>
+    $visible
+      ? css`
+          width: var(--space-24);
+          justify-content: flex-end;
+        `
+      : css`
+          width: var(--space-6);
+        `}
+
+  svg {
+    width: var(--space-4);
+    height: var(--space-4);
+  }
+`;

package/src/components/data/DataGrid/DataGridEditableCell/CheckboxEditableCell.tsx

@@ -1,37 +1,37 @@
-import { DataGridEditableCellProps } from './types';
-import { useCallback } from 'react';
-
-export const CheckboxEditableCell = <R,>({
-  value,
-  onChange,
-  onClose,
-  ref,
-}: DataGridEditableCellProps<R, boolean>) => {
-  const onBlur = useCallback(() => {
-    onClose(true);
-  }, [onClose]);
-
-  const onKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        onClose(true);
-      } else if (e.key === 'Escape') {
-        e.preventDefault();
-        onClose(false);
-      }
-    },
-    [onClose]
-  );
-
-  return (
-    <input
-      ref={ref}
-      type="checkbox"
-      checked={value}
-      onChange={(e) => onChange(e.target.checked)}
-      onBlur={onBlur}
-      onKeyDown={onKeyDown}
-    />
-  );
-};
+import { DataGridEditableCellProps } from './types';
+import { useCallback } from 'react';
+
+export const CheckboxEditableCell = <R,>({
+  value,
+  onChange,
+  onClose,
+  ref,
+}: DataGridEditableCellProps<R, boolean>) => {
+  const onBlur = useCallback(() => {
+    onClose(true);
+  }, [onClose]);
+
+  const onKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        onClose(true);
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose(false);
+      }
+    },
+    [onClose]
+  );
+
+  return (
+    <input
+      ref={ref}
+      type="checkbox"
+      checked={value}
+      onChange={(e) => onChange(e.target.checked)}
+      onBlur={onBlur}
+      onKeyDown={onKeyDown}
+    />
+  );
+};