kelt-ui-kit-react 1.2.4 → 1.2.6

package/src/expands/Expands.view.tsx

@@ -1,90 +1,90 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Button } from "../button/Button";
-import { Search } from "../search/Search";
-import { ExpandInterface } from "./expand/expand.interface";
-import { Expands } from "./Expands";
-
-export const ExpandsView = (): JSX.Element => {
-  const searchRef = useRef<{
-    clearInput: (name: string) => void;
-    resetForm: () => void;
-    focusInitialElement: () => void;
-  }>(null);
-  const [currentId, setCurrentId] = useState<number>(2);
-
-  const handleRefocus = () => {
-    searchRef.current?.focusInitialElement();
-  };
-  const mockItems: ExpandInterface[] = useMemo(
-    () => [
-      {
-        id: 1,
-        title: "Client",
-        description: "Description 1",
-        headerContent: currentId === 1 && (
-          <Search ref={searchRef} focus={true} />
-        ),
-        footer: <button>Valider</button>,
-      },
-      {
-        id: 2,
-        title: "Produits",
-        description: "Description 2",
-        headerContent: currentId === 2 && (
-          <Search ref={searchRef} focus={true} />
-        ),
-        content: (
-          <Button title={"Go to produits"} onClick={() => setCurrentId(3)} />
-        ),
-      },
-      {
-        id: 3,
-        title: "Total",
-        description: "Description 3",
-      },
-    ],
-    [currentId]
-  );
-  const [currentItem, setCurrentItem] = useState<ExpandInterface>(mockItems[0]);
-  useEffect(() => {
-    setTimeout(() => {
-      searchRef.current?.focusInitialElement();
-    }, 0);
-  }, [searchRef, currentItem]);
-  useEffect(() => {
-    const item = mockItems.find((item) => item.id === currentId);
-    if (item) {
-      setCurrentItem(item);
-    }
-  }, [currentId, setCurrentItem]);
-
-  const goToProduits = useCallback(() => {
-    setCurrentItem(mockItems[2]);
-  }, [setCurrentItem]);
-
-  const onChange = useCallback(
-    (item: ExpandInterface) => {
-      if (item.id) {
-        setCurrentId(item.id);
-      }
-    },
-    [setCurrentId]
-  );
-  return (
-    <div className="d-flex flex-column" style={{ height: "100%" }}>
-      <div className="mb-2">
-        <Button title={"Go to produits"} onClick={goToProduits} />
-
-        <Button onClick={handleRefocus} title="Re-focus" />
-      </div>
-      <div className="flex-1">
-        <Expands
-          onChange={onChange}
-          currentItem={currentItem}
-          items={mockItems}
-        />
-        ;
-      </div>
-    </div>
-  );
-};
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "../button/Button";
+import { Search } from "../search/Search";
+import { ExpandInterface } from "./expand/expand.interface";
+import { Expands } from "./Expands";
+
+export const ExpandsView = (): JSX.Element => {
+  const searchRef = useRef<{
+    clearInput: (name: string) => void;
+    resetForm: () => void;
+    focusInitialElement: () => void;
+  }>(null);
+  const [currentId, setCurrentId] = useState<number>(2);
+
+  const handleRefocus = () => {
+    searchRef.current?.focusInitialElement();
+  };
+  const mockItems: ExpandInterface[] = useMemo(
+    () => [
+      {
+        id: 1,
+        title: "Client",
+        description: "Description 1",
+        headerContent: currentId === 1 && (
+          <Search ref={searchRef} focus={true} />
+        ),
+        footer: <button>Valider</button>,
+      },
+      {
+        id: 2,
+        title: "Produits",
+        description: "Description 2",
+        headerContent: currentId === 2 && (
+          <Search ref={searchRef} focus={true} />
+        ),
+        content: (
+          <Button title={"Go to produits"} onClick={() => setCurrentId(3)} />
+        ),
+      },
+      {
+        id: 3,
+        title: "Total",
+        description: "Description 3",
+      },
+    ],
+    [currentId]
+  );
+  const [currentItem, setCurrentItem] = useState<ExpandInterface>(mockItems[0]);
+  useEffect(() => {
+    setTimeout(() => {
+      searchRef.current?.focusInitialElement();
+    }, 0);
+  }, [searchRef, currentItem]);
+  useEffect(() => {
+    const item = mockItems.find((item) => item.id === currentId);
+    if (item) {
+      setCurrentItem(item);
+    }
+  }, [currentId, setCurrentItem]);
+
+  const goToProduits = useCallback(() => {
+    setCurrentItem(mockItems[2]);
+  }, [setCurrentItem]);
+
+  const onChange = useCallback(
+    (item: ExpandInterface) => {
+      if (item.id) {
+        setCurrentId(item.id);
+      }
+    },
+    [setCurrentId]
+  );
+  return (
+    <div className="d-flex flex-column" style={{ height: "100%" }}>
+      <div className="mb-2">
+        <Button title={"Go to produits"} onClick={goToProduits} />
+
+        <Button onClick={handleRefocus} title="Re-focus" />
+      </div>
+      <div className="flex-1">
+        <Expands
+          onChange={onChange}
+          currentItem={currentItem}
+          items={mockItems}
+        />
+        ;
+      </div>
+    </div>
+  );
+};

package/src/expands/expand/expand.interface.tsx

@@ -1,8 +1,8 @@
-export interface ExpandInterface {
-  id?: number;
-  title: string | React.ReactNode;
-  description?: string | React.ReactNode;
-  content?: React.ReactNode;
-  headerContent?: React.ReactNode;
-  footer?: JSX.Element;
-}
+export interface ExpandInterface {
+  id?: number;
+  title: string | React.ReactNode;
+  description?: string | React.ReactNode;
+  content?: React.ReactNode;
+  headerContent?: React.ReactNode;
+  footer?: JSX.Element;
+}

package/src/expands/expand/expand.tsx

@@ -1,75 +1,75 @@
-import { useCallback, useEffect, useState } from "react";
-import { Icon } from "../../icon/Icon";
-import { ExpandInterface } from "./expand.interface";
-
-export type ExpandProps = {
-  currentExpand?: ExpandInterface;
-  item: ExpandInterface;
-  className?: string;
-  showArrow?: boolean;
-  onChange: (item: ExpandInterface) => void;
-};
-export const Expand = ({
-  currentExpand,
-  item,
-  className,
-  showArrow = true,
-  onChange,
-}: ExpandProps): JSX.Element => {
-  const [active, setActive] = useState<boolean>(false);
-  useEffect(() => {
-    if (item && currentExpand) {
-      if (currentExpand.id === item.id) {
-        if (!active) {
-          setActive(true);
-        }
-      } else {
-        setActive(false);
-      }
-    } else {
-      setActive(false);
-    }
-  }, [currentExpand, setActive, item]);
-
-  const handleChange = useCallback(
-    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-      e.stopPropagation();
-      if (onChange) {
-        onChange(item);
-      }
-    },
-    [onChange, item]
-  );
-  return (
-    <div
-      onClick={handleChange}
-      className={`expand ${active ? "expand--active" : ""} ${className ?? ""}`}
-    >
-      <div className={`expand-header`}>
-        <div className="expand-header-content">
-          <div className="expand-header-content-default">
-            {active && showArrow && (
-              <Icon classIcon="bi bi-chevron-down mr-2"></Icon>
-            )}
-            {!active && showArrow && (
-              <Icon classIcon="bi bi-chevron-right mr-2"></Icon>
-            )}
-            <span className="flex-1 expand-header-title-left">
-              {item.title}
-            </span>
-            {item.description && (
-              <span className="expand-header-title-right">
-                {item.description}
-              </span>
-            )}
-          </div>
-        </div>
-      </div>
-      <div className="expand-body">
-        <div>{item.headerContent}</div>
-        {item.content}
-      </div>
-      {item.footer && <div className="expand-footer">{item.footer}</div>}
-    </div>
-  );
-};
+import { useCallback, useEffect, useState } from "react";
+import { Icon } from "../../icon/Icon";
+import { ExpandInterface } from "./expand.interface";
+
+export type ExpandProps = {
+  currentExpand?: ExpandInterface;
+  item: ExpandInterface;
+  className?: string;
+  showArrow?: boolean;
+  onChange: (item: ExpandInterface) => void;
+};
+export const Expand = ({
+  currentExpand,
+  item,
+  className,
+  showArrow = true,
+  onChange,
+}: ExpandProps): JSX.Element => {
+  const [active, setActive] = useState<boolean>(false);
+  useEffect(() => {
+    if (item && currentExpand) {
+      if (currentExpand.id === item.id) {
+        if (!active) {
+          setActive(true);
+        }
+      } else {
+        setActive(false);
+      }
+    } else {
+      setActive(false);
+    }
+  }, [currentExpand, setActive, item]);
+
+  const handleChange = useCallback(
+    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+      e.stopPropagation();
+      if (onChange) {
+        onChange(item);
+      }
+    },
+    [onChange, item]
+  );
+  return (
+    <div
+      onClick={handleChange}
+      className={`expand ${active ? "expand--active" : ""} ${className ?? ""}`}
+    >
+      <div className={`expand-header`}>
+        <div className="expand-header-content">
+          <div className="expand-header-content-default">
+            {active && showArrow && (
+              <Icon classIcon="bi bi-chevron-down mr-2"></Icon>
+            )}
+            {!active && showArrow && (
+              <Icon classIcon="bi bi-chevron-right mr-2"></Icon>
+            )}
+            <span className="flex-1 expand-header-title-left">
+              {item.title}
+            </span>
+            {item.description && (
+              <span className="expand-header-title-right">
+                {item.description}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="expand-body">
+        <div>{item.headerContent}</div>
+        {item.content}
+      </div>
+      {item.footer && <div className="expand-footer">{item.footer}</div>}
+    </div>
+  );
+};

package/src/expands/expands.css

@@ -1,97 +1,97 @@
-.expands {
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-
-  .expand {
-    border: 1px solid #cfbdbd;
-    overflow: hidden;
-    margin-bottom: 1rem;
-    border-radius: 4px;
-    display: flex;
-    flex-direction: column;
-    background-color: #fff;
-    cursor: pointer;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    .expand-header-content {
-      display: flex;
-      width: 100%;
-      align-items: center;
-
-      .expand-header-content-default {
-        display: flex;
-        width: 100%;
-        align-items: center;
-      }
-    }
-
-    .expand-header-custom {
-      .expand-header--children {
-        display: none;
-      }
-    }
-
-    &.expand--active {
-      height: 300px;
-      flex: 1;
-      min-height: 200px;
-      .expand-header {
-        background-color: #1d3758;
-        color: #fff;
-      }
-      .expand-header-custom {
-        .expand-header--children {
-          display: flex;
-        }
-
-        .expand-header--values {
-          display: none;
-        }
-      }
-
-      & .expand-body {
-        display: flex;
-      }
-    }
-
-    & .expand-header {
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      padding: 15px;
-      color: #333;
-      background-color: #fff;
-      &.expand-header-custom {
-        margin-bottom: 1rem;
-      }
-
-      .expand-header-title-right {
-        font-size: 0.85rem;
-        font-weight: 600;
-      }
-
-      .expand-header-title-left {
-        margin-right: 0.5rem;
-        text-transform: uppercase;
-        font-size: 14px;
-        font-weight: 500;
-      }
-    }
-    & .expand-footer {
-      padding: 15px;
-    }
-    & .expand-body {
-      display: none;
-      flex: 1;
-      width: 100%;
-      padding-top: 1rem;
-      padding: 15px;
-      overflow: auto;
-      flex-direction: column;
-    }
-  }
-}
+.expands {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+
+  .expand {
+    border: 1px solid #cfbdbd;
+    overflow: hidden;
+    margin-bottom: 1rem;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    background-color: #fff;
+    cursor: pointer;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .expand-header-content {
+      display: flex;
+      width: 100%;
+      align-items: center;
+
+      .expand-header-content-default {
+        display: flex;
+        width: 100%;
+        align-items: center;
+      }
+    }
+
+    .expand-header-custom {
+      .expand-header--children {
+        display: none;
+      }
+    }
+
+    &.expand--active {
+      height: 300px;
+      flex: 1;
+      min-height: 200px;
+      .expand-header {
+        background-color: #1d3758;
+        color: #fff;
+      }
+      .expand-header-custom {
+        .expand-header--children {
+          display: flex;
+        }
+
+        .expand-header--values {
+          display: none;
+        }
+      }
+
+      & .expand-body {
+        display: flex;
+      }
+    }
+
+    & .expand-header {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      padding: 15px;
+      color: #333;
+      background-color: #fff;
+      &.expand-header-custom {
+        margin-bottom: 1rem;
+      }
+
+      .expand-header-title-right {
+        font-size: 0.85rem;
+        font-weight: 600;
+      }
+
+      .expand-header-title-left {
+        margin-right: 0.5rem;
+        text-transform: uppercase;
+        font-size: 14px;
+        font-weight: 500;
+      }
+    }
+    & .expand-footer {
+      padding: 15px;
+    }
+    & .expand-body {
+      display: none;
+      flex: 1;
+      width: 100%;
+      padding-top: 1rem;
+      padding: 15px;
+      overflow: auto;
+      flex-direction: column;
+    }
+  }
+}

package/src/filAriane/FilAriane.tsx

@@ -1,57 +1,57 @@
-import { useCallback } from "react";
-import "./filAriane.css";
-import { FilArianeInterface } from "./filAriane.interface";
-type FilArianeProps = {
-  filArianes?: FilArianeInterface[];
-  currentFil?: number;
-  title?: string;
-  onClick?: (fil?: FilArianeInterface) => void;
-};
-export const FilAriane = ({
-  filArianes,
-  onClick,
-  currentFil,
-  title,
-}: FilArianeProps) => {
-  const handleClick = useCallback(
-    (e: React.MouseEvent<HTMLAnchorElement>, fil?: FilArianeInterface) => {
-      if (!fil?.url) {
-        e.preventDefault();
-      }
-      if (onClick) {
-        onClick(fil);
-      }
-    },
-    [onClick]
-  );
-  return (
-    <div className="filArianes">
-      {title && (
-        <small className="filAriane font-weight-bold text-uppercase">
-          {title} <i className="filAriane-chevron bi bi-caret-right-fill"></i>
-        </small>
-      )}
-      {filArianes?.map((filAriane, index) => {
-        return (
-          <div
-            key={index}
-            className={`filAriane ${
-              filAriane.id === currentFil && "filAriane--active"
-            }`}
-          >
-            <a
-              href={filAriane.url || "#"}
-              onClick={(e) => handleClick(e, filAriane)}
-            >
-              {filAriane.title}
-            </a>
-
-            {!filAriane.isLast && (
-              <i className="filAriane-chevron bi bi-caret-right-fill"></i>
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-};
+import { useCallback } from "react";
+import "./filAriane.css";
+import { FilArianeInterface } from "./filAriane.interface";
+type FilArianeProps = {
+  filArianes?: FilArianeInterface[];
+  currentFil?: number;
+  title?: string;
+  onClick?: (fil?: FilArianeInterface) => void;
+};
+export const FilAriane = ({
+  filArianes,
+  onClick,
+  currentFil,
+  title,
+}: FilArianeProps) => {
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLAnchorElement>, fil?: FilArianeInterface) => {
+      if (!fil?.url) {
+        e.preventDefault();
+      }
+      if (onClick) {
+        onClick(fil);
+      }
+    },
+    [onClick]
+  );
+  return (
+    <div className="filArianes">
+      {title && (
+        <small className="filAriane font-weight-bold text-uppercase">
+          {title} <i className="filAriane-chevron bi bi-caret-right-fill"></i>
+        </small>
+      )}
+      {filArianes?.map((filAriane, index) => {
+        return (
+          <div
+            key={index}
+            className={`filAriane ${
+              filAriane.id === currentFil && "filAriane--active"
+            }`}
+          >
+            <a
+              href={filAriane.url || "#"}
+              onClick={(e) => handleClick(e, filAriane)}
+            >
+              {filAriane.title}
+            </a>
+
+            {!filAriane.isLast && (
+              <i className="filAriane-chevron bi bi-caret-right-fill"></i>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};