Merge pull request #225 from kakahuy113/199

#199: more view
aesirxio · Feb 22, 2023 · 88169d2 · 88169d2
2 parents 573189e + 5097355
commit 88169d2
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 36 deletions.
diff --git a/src/SVG/Dot.jsx b/src/SVG/Dot.jsx
@@ -1,14 +1,14 @@
 import React from 'react';
 
-const Dot = () => {
+const Dot = (props) => {
   return (
     <svg
-      className="text-body"
       width="24px"
       height="24px"
       viewBox="0 0 24 24"
       focusable="false"
       fill="currentColor"
+      {...props}
     >
       <path d="M0 0h24v24H0z" fill="none"></path>
       <path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path>

diff --git a/src/components/Breadcrumbs/index.jsx b/src/components/Breadcrumbs/index.jsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons/faAngleRight';
 import styles from './index.module.scss';
 import { useTranslation } from 'react-i18next';
@@ -8,9 +8,31 @@ import { faFolder } from '@fortawesome/free-solid-svg-icons/faFolder';
 
 const BreadCrumbs = ({ data = [], handleLink }) => {
   const { t } = useTranslation('common');
+  const [show, setShow] = useState(false);
   if (!data) {
     return;
   }
+  const handleClickOutside = useCallback(
+    (e) => {
+      const checkBreadCrumbClick = e.target.closest('.breadcrumb_item');
+      if (!checkBreadCrumbClick && show) {
+        setShow(false);
+      }
+    },
+    [show]
+  );
+
+  useEffect(() => {
+    if (show) {
+      document.addEventListener('mousedown', handleClickOutside);
+    } else {
+      document.removeEventListener('mousedown', handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [show]);
+
   return (
     <div className={`text-gray-900 fs-2 mb-0 fw-bold d-flex flex-wrap align-items-center`}>
       <span className="text-body mb-0 cursor-pointer" onClick={() => handleLink('/root')}>
@@ -25,7 +47,9 @@ const BreadCrumbs = ({ data = [], handleLink }) => {
                   <FontAwesomeIcon size={'2xs'} className="text-green px-3" icon={faAngleRight} />
                   <span
                     className="text-body cursor-pointer"
-                    onClick={() => handleLink(_breadcrumb?.id)}
+                    onClick={() => {
+                      handleLink(_breadcrumb?.id);
+                    }}
                   >
                     {_breadcrumb.name}
                   </span>
@@ -39,37 +63,56 @@ const BreadCrumbs = ({ data = [], handleLink }) => {
         <>
           <span>
             <FontAwesomeIcon size={'2xs'} className="text-green px-3" icon={faAngleRight} />
-            <span className="text-body" onClick={() => handleLink(data[0]?.id)}>
+            <span className="text-body cursor-pointer" onClick={() => handleLink(data[0]?.id)}>
               {data[0].name}
             </span>
             <FontAwesomeIcon size={'2xs'} className="text-green px-3" icon={faAngleRight} />
           </span>
-          <div className={`text-body fs-5 d-flex align-items-center cursor-pointer ${styles.dot}`}>
-            <Dot />
-            <div
-              className={`w-max position-absolute start-0 shadow-sm top-100 bg-white rounded-3 border zindex-5 ${styles.list}`}
+          <div className={`position-relative  cursor-pointer `}>
+            <span
+              className={`fs-5 d-flex breadcrumb_item align-items-center rounded-circle ${
+                styles.dot
+              } ${show && styles.active} ${
+                show ? 'bg-success text-white' : 'bg-transparent text-body'
+              }`}
+              onClick={() => {
+                setShow((prevState) => !prevState);
+              }}
             >
-              {data.map((_breadcrumb, index) => {
-                if (index === 0 || index === data.length - 1) {
-                  return;
-                } else {
-                  return (
-                    _breadcrumb?.name && (
-                      <span
-                        key={index}
-                        className="text-body py-1 m-0 btn border-bottom px-2 d-flex align-items-center cursor-pointer"
-                        onClick={() => handleLink(_breadcrumb?.id)}
-                      >
-                        <>
-                          <FontAwesomeIcon className="text-body px-3" icon={faFolder} />
-                          {_breadcrumb.name}
-                        </>
-                      </span>
-                    )
-                  );
-                }
-              })}
-            </div>
+              <Dot className={`pe-none`} />
+            </span>
+
+            {show ? (
+              <div
+                className={`pt-3 w-max position-absolute start-0 top-100 zindex-5 ${styles.list}`}
+              >
+                <div className={`w-max mt-2 start-0 shadow-sm bg-white rounded-3 border zindex-5`}>
+                  {data.map((_breadcrumb, index) => {
+                    if (index === 0 || index === data.length - 1) {
+                      return;
+                    } else {
+                      return (
+                        _breadcrumb?.name && (
+                          <span
+                            key={index}
+                            className={`text-body py-1 m-0 btn border-bottom px-2 d-flex align-items-center cursor-pointer breadcrumb_item ${styles.h_40}`}
+                            onClick={() => {
+                              handleLink(_breadcrumb?.id);
+                              setShow(false);
+                            }}
+                          >
+                            <>
+                              <FontAwesomeIcon className="text-body px-3 pe-none" icon={faFolder} />
+                              <span className="text-body">{_breadcrumb.name}</span>
+                            </>
+                          </span>
+                        )
+                      );
+                    }
+                  })}
+                </div>
+              </div>
+            ) : null}
           </div>
           <span>
             <FontAwesomeIcon size={'2xs'} className="text-green px-3" icon={faAngleRight} />

diff --git a/src/components/Breadcrumbs/index.module.scss b/src/components/Breadcrumbs/index.module.scss
@@ -1,7 +1,10 @@
+@import '../../scss/utils/bootstrap.scss';
+
 .dot {
   position: relative;
   width: 24px;
   height: 24px;
+  transition: all 0.2s ease-in-out;
   &::after {
     content: '';
     width: 100%;
@@ -10,20 +13,23 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    box-shadow: 0 3px 6px rgba($color: #000000, $alpha: 0.5);
+    box-shadow: 0 3px 6px rgba($color: $gray-800, $alpha: 0.5);
     border-radius: 50%;
     opacity: 0;
     transition: 0.5s all ease-in-out;
+    pointer-events: none;
   }
 
   .list {
+    top: 2rem;
     max-height: 200px;
     overflow-y: auto;
-    opacity: 0;
-    pointer-events: none;
-    user-select: none;
-    transition: 0.5s all ease-in-out;
+    // opacity: 0;
+    // pointer-events: none;
+    // user-select: none;
+    // transition: 0.5s all ease-in-out;
   }
+  &.active,
   &:hover {
     &::after {
       opacity: 1;
@@ -37,3 +43,8 @@
     }
   }
 }
+
+.h_40 {
+  height: 40px;
+  min-width: 200px;
+}
diff --git a/src/components/Table/Thumb.jsx b/src/components/Table/Thumb.jsx
@@ -31,7 +31,7 @@ const FakeThumb = observer(({ id, index, isList }) => {
   return (
     <span
       className={`position-absolute top-0 start-0 w-100 h-100 pe-none user-select-none ${
-        isSelect ? 'border border-success bg-gray-dark' : ''
+        isSelect ? 'border border-success' : ''
       } ${checkBorderBottom ? 'border-bottom-0' : ''} ${checkBorderTop ? 'border-top-0' : ''} ${
         isList && isSelect ? 'bg-success-05' : ''
       }`}