@addev-be/ui 2.5.20 → 2.6.0

package/src/components/data/SqlRequestGrid/filters/FiltersSidebar.tsx

@@ -1,108 +1,108 @@
-import * as styles from './styles';
-
-import {
-  AngleLeftIcon,
-  AngleRightIcon,
-  FilterSlashIcon,
-  XMarkIcon,
-} from '../../../../Icons';
-import { MouseEvent, useCallback, useState } from 'react';
-import { SqlRequestGridColumnWithFilter, SqlRequestGridProps } from '../types';
-
-import { DataGridContext } from '../../DataGrid/types';
-import { DataGridFilterMenu } from '../../DataGrid/DataGridFilterMenu';
-import { IconButton } from '../../../forms/IconButton';
-
-type FiltersSidebarProps<R, P extends object = {}> = {
-  props: SqlRequestGridProps<R, P>;
-  context: DataGridContext<R>;
-  onClose?: () => void;
-  onClearFilters?: () => void;
-};
-
-export const FiltersSidebar = <R, P extends object = {}>({
-  props,
-  context,
-  onClose,
-  onClearFilters,
-}: FiltersSidebarProps<R, P>) => {
-  const [columnKey, setColumnKey] = useState<string | null>(null);
-  const column = columnKey
-    ? props.fields.find(
-        (field): field is SqlRequestGridColumnWithFilter<R> =>
-          field.key === columnKey && !!field.filter
-      )
-    : null;
-  const visible = !!(columnKey && column);
-
-  const stopPropagation = useCallback((e: MouseEvent) => {
-    e.stopPropagation();
-  }, []);
-
-  const onFilterClick = useCallback((columnKey: string | null) => {
-    setColumnKey(columnKey);
-  }, []);
-
-  return (
-    <styles.Backdrop onClick={onClose}>
-      <styles.FiltersSidebarContainer onClick={stopPropagation}>
-        {visible ? (
-          <>
-            <styles.FiltersSidebarHeader>
-              <IconButton
-                rounded
-                bordered={false}
-                icon={AngleLeftIcon}
-                color="neutral"
-                onClick={() => onFilterClick(null)}
-              />
-              <h3>{column.name}</h3>
-              <IconButton
-                rounded
-                bordered={false}
-                icon={XMarkIcon}
-                color="neutral"
-                onClick={onClose}
-              />
-            </styles.FiltersSidebarHeader>
-            <DataGridFilterMenu
-              contextMenu={false}
-              column={column}
-              context={context}
-              showTotalButton={false}
-            />
-          </>
-        ) : (
-          <>
-            <styles.FiltersSidebarHeader>
-              <h3>Filtres</h3>
-              <IconButton
-                rounded
-                bordered={false}
-                icon={FilterSlashIcon}
-                color="danger"
-                onClick={onClearFilters}
-              />
-              <IconButton
-                rounded
-                bordered={false}
-                icon={XMarkIcon}
-                color="neutral"
-                onClick={onClose}
-              />
-            </styles.FiltersSidebarHeader>
-            {props.fields.map((field) => (
-              <styles.FiltersSidebarFilter
-                key={field.key}
-                onClick={() => onFilterClick(field.key)}
-              >
-                {field.name}
-                <AngleRightIcon />
-              </styles.FiltersSidebarFilter>
-            ))}
-          </>
-        )}
-      </styles.FiltersSidebarContainer>
-    </styles.Backdrop>
-  );
-};
+import * as styles from './styles';
+
+import {
+  AngleLeftIcon,
+  AngleRightIcon,
+  FilterSlashIcon,
+  XMarkIcon,
+} from '../../../../Icons';
+import { MouseEvent, useCallback, useState } from 'react';
+import { SqlRequestGridColumnWithFilter, SqlRequestGridProps } from '../types';
+
+import { DataGridContext } from '../../DataGrid/types';
+import { DataGridFilterMenu } from '../../DataGrid/DataGridFilterMenu';
+import { IconButton } from '../../../forms/IconButton';
+
+type FiltersSidebarProps<R, P extends object = {}> = {
+  props: SqlRequestGridProps<R, P>;
+  context: DataGridContext<R>;
+  onClose?: () => void;
+  onClearFilters?: () => void;
+};
+
+export const FiltersSidebar = <R, P extends object = {}>({
+  props,
+  context,
+  onClose,
+  onClearFilters,
+}: FiltersSidebarProps<R, P>) => {
+  const [columnKey, setColumnKey] = useState<string | null>(null);
+  const column = columnKey
+    ? props.fields.find(
+        (field): field is SqlRequestGridColumnWithFilter<R> =>
+          field.key === columnKey && !!field.filter
+      )
+    : null;
+  const visible = !!(columnKey && column);
+
+  const stopPropagation = useCallback((e: MouseEvent) => {
+    e.stopPropagation();
+  }, []);
+
+  const onFilterClick = useCallback((columnKey: string | null) => {
+    setColumnKey(columnKey);
+  }, []);
+
+  return (
+    <styles.Backdrop onClick={onClose}>
+      <styles.FiltersSidebarContainer onClick={stopPropagation}>
+        {visible ? (
+          <>
+            <styles.FiltersSidebarHeader>
+              <IconButton
+                rounded
+                bordered={false}
+                icon={AngleLeftIcon}
+                color="neutral"
+                onClick={() => onFilterClick(null)}
+              />
+              <h3>{column.name}</h3>
+              <IconButton
+                rounded
+                bordered={false}
+                icon={XMarkIcon}
+                color="neutral"
+                onClick={onClose}
+              />
+            </styles.FiltersSidebarHeader>
+            <DataGridFilterMenu
+              contextMenu={false}
+              column={column}
+              context={context}
+              showTotalButton={false}
+            />
+          </>
+        ) : (
+          <>
+            <styles.FiltersSidebarHeader>
+              <h3>Filtres</h3>
+              <IconButton
+                rounded
+                bordered={false}
+                icon={FilterSlashIcon}
+                color="danger"
+                onClick={onClearFilters}
+              />
+              <IconButton
+                rounded
+                bordered={false}
+                icon={XMarkIcon}
+                color="neutral"
+                onClick={onClose}
+              />
+            </styles.FiltersSidebarHeader>
+            {props.fields.map((field) => (
+              <styles.FiltersSidebarFilter
+                key={field.key}
+                onClick={() => onFilterClick(field.key)}
+              >
+                {field.name}
+                <AngleRightIcon />
+              </styles.FiltersSidebarFilter>
+            ))}
+          </>
+        )}
+      </styles.FiltersSidebarContainer>
+    </styles.Backdrop>
+  );
+};

package/src/components/data/SqlRequestGrid/filters/styles.ts

@@ -1,88 +1,88 @@
-import {
-  Divider,
-  MenuContainer,
-  MenuItemContainer,
-} from '../../../ui/ContextMenu/styles';
-
-import styled from 'styled-components';
-
-export const FiltersSidebarContainer = styled.div`
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 100%;
-  max-width: var(--space-96);
-  border-radius: var(--rounded-none);
-  padding: 0;
-  z-index: 1;
-  overflow-y: auto;
-  box-sizing: border-box;
-  background-color: var(--color-base-50);
-  border-right: 1px solid var(--color-base-300);
-  box-shadow: var(--shadow-sm);
-
-  & > ${MenuContainer} {
-    position: relative;
-    background: none;
-    padding: var(--space-2) 0;
-
-    ${MenuItemContainer} {
-      background: none;
-      /* height: var(--size-6); */
-      padding: var(--space-2) var(--space-4);
-    }
-
-    ${Divider} {
-      margin: var(--space-2) 0;
-    }
-  }
-`;
-
-export const FiltersSidebarHeader = styled.div`
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  background-color: var(--color-base-50);
-
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--space-4);
-  padding: var(--space-2);
-
-  padding-bottom: var(--space-2);
-  border-bottom: 1px solid var(--color-base-300);
-
-  h3 {
-    margin: 0;
-    margin-right: auto;
-  }
-`;
-
-export const FiltersSidebarFilter = styled.div`
-  display: flex;
-  align-items: center;
-  padding: var(--space-4) var(--space-2);
-  border-bottom: 1px solid var(--color-base-300);
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--color-base-100);
-  }
-  svg {
-    margin-left: auto;
-    width: var(--space-4);
-    height: var(--space-4);
-  }
-`;
-
-export const Backdrop = styled.div`
-  position: sticky;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  background-color: rgba(0, 0, 0, 0.5);
-`;
+import {
+  Divider,
+  MenuContainer,
+  MenuItemContainer,
+} from '../../../ui/ContextMenu/styles';
+
+import styled from 'styled-components';
+
+export const FiltersSidebarContainer = styled.div`
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  max-width: var(--space-96);
+  border-radius: var(--rounded-none);
+  padding: 0;
+  z-index: 1;
+  overflow-y: auto;
+  box-sizing: border-box;
+  background-color: var(--color-base-50);
+  border-right: 1px solid var(--color-base-300);
+  box-shadow: var(--shadow-sm);
+
+  & > ${MenuContainer} {
+    position: relative;
+    background: none;
+    padding: var(--space-2) 0;
+
+    ${MenuItemContainer} {
+      background: none;
+      /* height: var(--size-6); */
+      padding: var(--space-2) var(--space-4);
+    }
+
+    ${Divider} {
+      margin: var(--space-2) 0;
+    }
+  }
+`;
+
+export const FiltersSidebarHeader = styled.div`
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: var(--color-base-50);
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-2);
+
+  padding-bottom: var(--space-2);
+  border-bottom: 1px solid var(--color-base-300);
+
+  h3 {
+    margin: 0;
+    margin-right: auto;
+  }
+`;
+
+export const FiltersSidebarFilter = styled.div`
+  display: flex;
+  align-items: center;
+  padding: var(--space-4) var(--space-2);
+  border-bottom: 1px solid var(--color-base-300);
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--color-base-100);
+  }
+  svg {
+    margin-left: auto;
+    width: var(--space-4);
+    height: var(--space-4);
+  }
+`;
+
+export const Backdrop = styled.div`
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  background-color: rgba(0, 0, 0, 0.5);
+`;

package/src/components/data/SqlRequestGrid/helpers/index.ts

@@ -1 +1 @@
-export * from './sqlRequests';
+export * from './sqlRequests';

package/src/components/data/SqlRequestGrid/helpers/sqlRequests.ts

@@ -1,16 +1,16 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import { ConditionDTO } from '../../../../services/sqlRequests';
-import { SqlRequestDataGridFilters } from '../../SqlRequestDataGrid/types';
-import _ from 'lodash';
-
-export const convertSqlFiltersToConditions = (
-  filters: SqlRequestDataGridFilters
-): Record<string, ConditionDTO> =>
-  _.mapValues(filters, (filter, columnKey) => ({
-    field: columnKey,
-    operator: filter.operator as any,
-    value: ['inArray', 'inRange'].includes(filter.operator)
-      ? filter.values
-      : _.castArray<string | number | null>(filter.values)[0],
-  }));
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { ConditionDTO } from '../../../../services/sqlRequests';
+import { SqlRequestDataGridFilters } from '../../SqlRequestDataGrid/types';
+import _ from 'lodash';
+
+export const convertSqlFiltersToConditions = (
+  filters: SqlRequestDataGridFilters
+): Record<string, ConditionDTO> =>
+  _.mapValues(filters, (filter, columnKey) => ({
+    field: columnKey,
+    operator: filter.operator as any,
+    value: ['inArray', 'inRange'].includes(filter.operator)
+      ? filter.values
+      : _.castArray<string | number | null>(filter.values)[0],
+  }));