@addev-be/ui 2.5.20 → 2.6.0

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

@@ -1,137 +1,137 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import * as styles from './styles';
-
-import {
-  DataGridFilter,
-  DataGridFilterOperator,
-  DataGridFilterType,
-} from '../types';
-import { useEffect, useRef } from 'react';
-
-import { Input } from '../../../forms/styles';
-import { Select } from '../../../forms/Select';
-
-// import { Select } from '../../Select';
-// import clx from 'classnames';
-
-const filterOperators: {
-  [K in DataGridFilterType]: Partial<{
-    [K2 in DataGridFilterOperator<K>]: string;
-  }>;
-} = {
-  date: {
-    after: 'Après',
-    before: 'Avant',
-    equals: 'Égal à',
-    notEquals: 'Différent de',
-    inRange: "Dans l'intervalle",
-  },
-  number: {
-    equals: 'Égal à',
-    notEquals: 'Différent de',
-    greaterThan: 'Supérieur à',
-    greaterThanOrEqual: 'Supérieur ou égal à',
-    lessThan: 'Inférieur à',
-    lessThanOrEqual: 'Inférieur ou égal à',
-    inRange: "Dans l'intervalle",
-  },
-  text: {
-    equals: 'Égal à',
-    notEquals: 'Différent de',
-    contains: 'Contient',
-    notContains: 'Ne contient pas',
-    startsWith: 'Commence par',
-    endsWith: 'Finit par',
-  },
-};
-
-type FilterModalContentProps = {
-  filter: DataGridFilter;
-  onFilterChanged: (filter: DataGridFilter) => void;
-};
-
-export const FilterModalContent = ({
-  filter,
-  onFilterChanged,
-}: FilterModalContentProps) => {
-  const value1Ref = useRef<HTMLInputElement>(null);
-  useEffect(() => {
-    setTimeout(() => value1Ref.current?.focus(), 100);
-  }, []);
-
-  if (!filter) return null;
-
-  const { operator, type, values } = filter;
-  return (
-    <styles.FilterModalContentContainer>
-      <label htmlFor="filterOperator">
-        <span>Opérateur :</span>
-        <Select
-          name="filterOperator"
-          items={Object.entries(filterOperators[filter.type])}
-          itemKey={(item) => item[0]}
-          itemLabel={(item) => item[1]}
-          value={String(operator)}
-          className="text-sm"
-          onChange={(e) =>
-            onFilterChanged({ ...filter, operator: e.target.value as any })
-          }
-        />
-      </label>
-      <label htmlFor="filterValue1">
-        <span>{operator === 'inRange' ? 'Entre' : 'Valeur'} :</span>
-        <Input
-          ref={value1Ref}
-          name="filterValue1"
-          type={filter.type}
-          value={values[0] ?? ''}
-          onChange={(e) => {
-            if (type === 'number') {
-              const newValues = [...values];
-              newValues[0] = Number(e.target.value);
-              onFilterChanged({
-                ...filter,
-                values: newValues,
-              });
-            } else {
-              const newValues = [...values];
-              newValues[0] = String(e.target.value) as any;
-              onFilterChanged({
-                ...filter,
-                values: newValues,
-              });
-            }
-          }}
-        />
-      </label>
-      {operator === 'inRange' && (
-        <label htmlFor="filterValue2">
-          <span>et</span>
-          <Input
-            name="filterValue2"
-            type={filter.type}
-            value={values[1] ?? ''}
-            onChange={(e) => {
-              if (type === 'number') {
-                const newValues = [...values];
-                newValues[1] = Number(e.target.value);
-                onFilterChanged({
-                  ...filter,
-                  values: newValues,
-                });
-              } else {
-                const newValues = [...values];
-                newValues[1] = String(e.target.value) as any;
-                onFilterChanged({
-                  ...filter,
-                  values: newValues,
-                });
-              }
-            }}
-          />
-        </label>
-      )}
-    </styles.FilterModalContentContainer>
-  );
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import * as styles from './styles';
+
+import {
+  DataGridFilter,
+  DataGridFilterOperator,
+  DataGridFilterType,
+} from '../types';
+import { useEffect, useRef } from 'react';
+
+import { Input } from '../../../forms/styles';
+import { Select } from '../../../forms/Select';
+
+// import { Select } from '../../Select';
+// import clx from 'classnames';
+
+const filterOperators: {
+  [K in DataGridFilterType]: Partial<{
+    [K2 in DataGridFilterOperator<K>]: string;
+  }>;
+} = {
+  date: {
+    after: 'Après',
+    before: 'Avant',
+    equals: 'Égal à',
+    notEquals: 'Différent de',
+    inRange: "Dans l'intervalle",
+  },
+  number: {
+    equals: 'Égal à',
+    notEquals: 'Différent de',
+    greaterThan: 'Supérieur à',
+    greaterThanOrEqual: 'Supérieur ou égal à',
+    lessThan: 'Inférieur à',
+    lessThanOrEqual: 'Inférieur ou égal à',
+    inRange: "Dans l'intervalle",
+  },
+  text: {
+    equals: 'Égal à',
+    notEquals: 'Différent de',
+    contains: 'Contient',
+    notContains: 'Ne contient pas',
+    startsWith: 'Commence par',
+    endsWith: 'Finit par',
+  },
+};
+
+type FilterModalContentProps = {
+  filter: DataGridFilter;
+  onFilterChanged: (filter: DataGridFilter) => void;
+};
+
+export const FilterModalContent = ({
+  filter,
+  onFilterChanged,
+}: FilterModalContentProps) => {
+  const value1Ref = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    setTimeout(() => value1Ref.current?.focus(), 100);
+  }, []);
+
+  if (!filter) return null;
+
+  const { operator, type, values } = filter;
+  return (
+    <styles.FilterModalContentContainer>
+      <label htmlFor="filterOperator">
+        <span>Opérateur :</span>
+        <Select
+          name="filterOperator"
+          items={Object.entries(filterOperators[filter.type])}
+          itemKey={(item) => item[0]}
+          itemLabel={(item) => item[1]}
+          value={String(operator)}
+          className="text-sm"
+          onChange={(e) =>
+            onFilterChanged({ ...filter, operator: e.target.value as any })
+          }
+        />
+      </label>
+      <label htmlFor="filterValue1">
+        <span>{operator === 'inRange' ? 'Entre' : 'Valeur'} :</span>
+        <Input
+          ref={value1Ref}
+          name="filterValue1"
+          type={filter.type}
+          value={values[0] ?? ''}
+          onChange={(e) => {
+            if (type === 'number') {
+              const newValues = [...values];
+              newValues[0] = Number(e.target.value);
+              onFilterChanged({
+                ...filter,
+                values: newValues,
+              });
+            } else {
+              const newValues = [...values];
+              newValues[0] = String(e.target.value) as any;
+              onFilterChanged({
+                ...filter,
+                values: newValues,
+              });
+            }
+          }}
+        />
+      </label>
+      {operator === 'inRange' && (
+        <label htmlFor="filterValue2">
+          <span>et</span>
+          <Input
+            name="filterValue2"
+            type={filter.type}
+            value={values[1] ?? ''}
+            onChange={(e) => {
+              if (type === 'number') {
+                const newValues = [...values];
+                newValues[1] = Number(e.target.value);
+                onFilterChanged({
+                  ...filter,
+                  values: newValues,
+                });
+              } else {
+                const newValues = [...values];
+                newValues[1] = String(e.target.value) as any;
+                onFilterChanged({
+                  ...filter,
+                  values: newValues,
+                });
+              }
+            }}
+          />
+        </label>
+      )}
+    </styles.FilterModalContentContainer>
+  );
+};

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

@@ -1,22 +1,22 @@
-import styled from 'styled-components';
-
-export const FilterModalContentContainer = styled.div.attrs({
-  className: 'FilterModalContentContainer',
-})`
-  display: flex;
-  flex-direction: column;
-  font-size: var(--text-base);
-  gap: var(--space-1);
-
-  & > label {
-    display: flex;
-    flex-direction: row;
-    gap: var(--space-1);
-    align-items: center;
-
-    & > span {
-      font-weight: bold;
-      width: var(--space-32);
-    }
-  }
-`;
+import styled from 'styled-components';
+
+export const FilterModalContentContainer = styled.div.attrs({
+  className: 'FilterModalContentContainer',
+})`
+  display: flex;
+  flex-direction: column;
+  font-size: var(--text-base);
+  gap: var(--space-1);
+
+  & > label {
+    display: flex;
+    flex-direction: row;
+    gap: var(--space-1);
+    align-items: center;
+
+    & > span {
+      font-weight: bold;
+      width: var(--space-32);
+    }
+  }
+`;

package/src/components/data/DataGrid/constants.ts

@@ -1,6 +1,6 @@
-export const TOOLBAR_HEIGHT = 40;
-export const DEFAULT_HEADER_ROW_HEIGHT = 40;
-export const DEFAULT_FOOTER_ROW_HEIGHT = 40;
-export const DEFAULT_ROW_HEIGHT = 32;
-export const SELECTION_CELL_WIDTH = 'var(--space-8)';
-export const DEFAULT_COLUMN_WIDTH = 150;
+export const TOOLBAR_HEIGHT = 40;
+export const DEFAULT_HEADER_ROW_HEIGHT = 40;
+export const DEFAULT_FOOTER_ROW_HEIGHT = 40;
+export const DEFAULT_ROW_HEIGHT = 32;
+export const SELECTION_CELL_WIDTH = 'var(--space-8)';
+export const DEFAULT_COLUMN_WIDTH = 150;