@addev-be/ui 0.2.2 → 0.2.6

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-neutral-200);
-  margin: 0;
-  background-color: var(--color-neutral-50);
-
-  & > li:not(:last-child) {
-    border-bottom: 1px solid var(--color-neutral-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-neutral-200);
-    border: none;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &:hover {
-    background-color: var(--color-neutral-100);
-    button {
-      display: flex;
-      background-color: var(--color-neutral-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-neutral-200);
+  margin: 0;
+  background-color: var(--color-neutral-50);
+
+  & > li:not(:last-child) {
+    border-bottom: 1px solid var(--color-neutral-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-neutral-200);
+    border: none;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &:hover {
+    background-color: var(--color-neutral-100);
+    button {
+      display: flex;
+      background-color: var(--color-neutral-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.tsx

@@ -1,54 +1,43 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
-
-import { useCallback, useState } from 'react';
-
-import { DataGridCellProps } from './types';
-import { join } from 'lodash';
-import { useDataGridContext } from './hooks';
-
-export const DataGridEditableCell = <R,>({
-  row,
-  columnKey,
-  column,
-  context,
-}: DataGridCellProps<R>) => {
-  const { onCellEdited, setEditingCell } = useDataGridContext(context);
-  const [value, setValue] = useState(
-    column.getter
-      ? column.getter(row)
-      : column.propertyName
-      ? String(row[column.propertyName])
-      : ''
-  );
-
-  const onClose = useCallback(() => {
-    onCellEdited?.(row, columnKey, value);
-    setEditingCell([-1, -1]);
-  }, [columnKey, onCellEdited, row, setEditingCell, value]);
-
-  return (
-    <td
-      key={columnKey}
-      className={join(
-        [
-          // 'whitespace-nowrap py-1 text-sm',
-          column.className,
-          column.bodyClassName,
-        ],
-        ' '
-      )}
-    >
-      <input
-        type="text"
-        // className="relative  z-10 block text-normal w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6"
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-      />
-      <div
-        // className="fixed inset-0 bg-black bg-opacity-10"
-        onClick={onClose}
-      />
-    </td>
-  );
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+
+import { useCallback, useState } from 'react';
+
+import { DataGridCellProps } from './types';
+import { useDataGridContext } from './hooks';
+
+export const DataGridEditableCell = <R,>({
+  row,
+  columnKey,
+  column,
+  context,
+}: DataGridCellProps<R>) => {
+  const { onCellEdited, setEditingCell } = useDataGridContext(context);
+  const [value, setValue] = useState(
+    column.getter
+      ? column.getter(row)
+      : column.propertyName
+      ? String(row[column.propertyName])
+      : ''
+  );
+
+  const onClose = useCallback(() => {
+    onCellEdited?.(row, columnKey, value);
+    setEditingCell([-1, -1]);
+  }, [columnKey, onCellEdited, row, setEditingCell, value]);
+
+  return (
+    <td key={columnKey}>
+      <input
+        type="text"
+        // className="relative  z-10 block text-normal w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6"
+        value={String(value)}
+        onChange={(e) => setValue(e.target.value)}
+      />
+      <div
+        // className="fixed inset-0 bg-black bg-opacity-10"
+        onClick={onClose}
+      />
+    </td>
+  );
+};

package/src/components/data/DataGrid/DataGridFilterMenu/hooks.tsx

@@ -1,75 +1,75 @@
-import { DataGridContext, DataGridFilter } from '../types';
-import { FilterIcon, FilterSlashIcon } from '../../../../Icons';
-import { useCallback, useState } from 'react';
-
-import { Button } from '../../../forms';
-import { FilterModalContent } from '../FilterModalContent';
-import { Modal } from '../../../layout/Modal';
-import { useDataGridContext } from '../hooks';
-
-export const useFilterModal = <R,>({
-  columnKey,
-  context,
-}: {
-  columnKey: string;
-  context: DataGridContext<R>;
-}) => {
-  const [isVisible, setIsVisible] = useState(false);
-  const { filters = {}, columns, setFilters } = useDataGridContext<R>(context);
-  const column = columns[columnKey];
-  const [currentFilter, setCurrentFilter] = useState<DataGridFilter>(
-    filters[columnKey] ?? column?.filter
-  );
-
-  const openModal = useCallback(() => {
-    setIsVisible(true);
-  }, []);
-  const closeModal = useCallback(() => {
-    setIsVisible(false);
-  }, []);
-
-  const onClearClicked = useCallback(() => {
-    const newFilters = { ...filters };
-    delete newFilters[columnKey];
-    setFilters(newFilters);
-    closeModal();
-  }, [closeModal, columnKey, filters, setFilters]);
-
-  const onApplyClicked = useCallback(() => {
-    setFilters({ ...filters, [columnKey]: currentFilter });
-    closeModal();
-  }, [closeModal, columnKey, currentFilter, filters, setFilters]);
-
-  const onCancelClicked = useCallback(() => {
-    closeModal();
-  }, [closeModal]);
-
-  const modal = isVisible ? (
-    <Modal>
-      <Modal.Header>Filtrer "{column.name}"</Modal.Header>
-      <Modal.ContentWithIcon>
-        <FilterIcon fill="var(--color-primary-400)" />
-        <FilterModalContent
-          filter={currentFilter}
-          onFilterChanged={setCurrentFilter}
-        />
-      </Modal.ContentWithIcon>
-      <Modal.Buttons>
-        <Button color="danger" icon={FilterSlashIcon} onClick={onClearClicked}>
-          Supprimer
-        </Button>
-        <Button
-          style={{ marginLeft: 'auto' }}
-          color="primary"
-          icon={FilterIcon}
-          onClick={onApplyClicked}
-        >
-          Filtrer
-        </Button>
-        <Button onClick={onCancelClicked}>Annuler</Button>
-      </Modal.Buttons>
-    </Modal>
-  ) : null;
-
-  return { openModal, closeModal, modal };
-};
+import { DataGridContext, DataGridFilter } from '../types';
+import { FilterIcon, FilterSlashIcon } from '../../../../Icons';
+import { useCallback, useState } from 'react';
+
+import { Button } from '../../../forms';
+import { FilterModalContent } from '../FilterModalContent';
+import { Modal } from '../../../layout/Modal';
+import { useDataGridContext } from '../hooks';
+
+export const useFilterModal = <R,>({
+  columnKey,
+  context,
+}: {
+  columnKey: string;
+  context: DataGridContext<R>;
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const { filters = {}, columns, setFilters } = useDataGridContext<R>(context);
+  const column = columns[columnKey];
+  const [currentFilter, setCurrentFilter] = useState<DataGridFilter>(
+    filters[columnKey] ?? column?.filter
+  );
+
+  const openModal = useCallback(() => {
+    setIsVisible(true);
+  }, []);
+  const closeModal = useCallback(() => {
+    setIsVisible(false);
+  }, []);
+
+  const onClearClicked = useCallback(() => {
+    const newFilters = { ...filters };
+    delete newFilters[columnKey];
+    setFilters(newFilters);
+    closeModal();
+  }, [closeModal, columnKey, filters, setFilters]);
+
+  const onApplyClicked = useCallback(() => {
+    setFilters({ ...filters, [columnKey]: currentFilter });
+    closeModal();
+  }, [closeModal, columnKey, currentFilter, filters, setFilters]);
+
+  const onCancelClicked = useCallback(() => {
+    closeModal();
+  }, [closeModal]);
+
+  const modal = isVisible ? (
+    <Modal>
+      <Modal.Header>Filtrer "{column.name}"</Modal.Header>
+      <Modal.ContentWithIcon>
+        <FilterIcon fill="var(--color-primary-400)" />
+        <FilterModalContent
+          filter={currentFilter}
+          onFilterChanged={setCurrentFilter}
+        />
+      </Modal.ContentWithIcon>
+      <Modal.Buttons>
+        <Button color="danger" icon={FilterSlashIcon} onClick={onClearClicked}>
+          Supprimer
+        </Button>
+        <Button
+          style={{ marginLeft: 'auto' }}
+          color="primary"
+          icon={FilterIcon}
+          onClick={onApplyClicked}
+        >
+          Filtrer
+        </Button>
+        <Button onClick={onCancelClicked}>Annuler</Button>
+      </Modal.Buttons>
+    </Modal>
+  ) : null;
+
+  return { openModal, closeModal, modal };
+};