pixel-react 1.5.9 → 1.6.0

package/src/components/TableTree/TableTree.scss

@@ -1,171 +1,202 @@
-@use '../../assets/styles/fonts';
+html,
+* {
+  font-family: 'Open Sans';
+}
 
-.ff-tree-container {
-  width: 100%;
-  font-size: 12px;
-  color: var(--brand-color);
-  transition: all 0.3s ease;
-  @extend .fontSm;
+.tree-table-space-block {
+  display: inline-block;
+  width: 20px;
+}
 
-  table {
-    border-collapse: collapse;
-    width: 100%;
-    text-align: left;
-    position: relative; /* Ensure the table has a relative position for z-index to work */
-  }
+.hidden {
+  display: none;
+}
 
-  .ff-toggle-arrow-icon {
-    height: 12px;
-    width: 12px;
-    margin-left: 8px;
-    display: grid;
-    place-items: center;
-    transform: rotate(0deg);
-
-    svg {
-      path {
-        fill: var(--brand-color);
-      }
-    }
+.show {
+  display: table-row;
+}
 
-    &.ff-expanded {
-      transform: rotate(0deg);
-    }
+.btn-toggle {
+  &.expand {
+    cursor: pointer;
+  }
 
-    &.ff-collapsed {
-      transform: rotate(-90deg);
-    }
+  &.is-close {
+    background: #f1f1f1;
+    border: 1px solid transparent;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   }
 
-  th {
-    vertical-align: middle;
-    height: 32px;
-    background-color: var(--slider-table-color);
-    color: var(--text-color);
-    font-weight: 600;
-    text-transform: uppercase;
+  &::before {
+    display: none;
   }
 
+  &::after {
+    display: none;
+  }
+}
+
+.tree-table-wrap {
+  width: 100%;
+}
+
+.tree-table {
+  border: 1px solid #f1f1f1;
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+  overflow: scroll;
   tr {
-    .ff-action-section {
+    .table-tree-row-action {
       display: none;
     }
-
     &:hover {
       background-color: var(--hover-color);
-
-      .ff-title-action-container {
-        display: flex;
+      .table-tree-row-action {
+        display: inline-flex;
+        align-items: center;
       }
     }
   }
 
-  .ff-title-container {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-
-    .ff-toggle-folder {
-      display: flex;
-      cursor: pointer;
-    }
-
-    &.ff-folder {
-      font-weight: 600;
-    }
-
-    &.ff-file {
-      font-weight: 400;
+  th {
+    color: var(--brand-color);
+    text-align: center;
+    padding: 10px 0;
+    background: var(--slider-table-color);
+    font-size: 13px;
+    width: 400px;
+    text-align: left;
+    &:first-child {
+      width: 400px;
+      position: sticky;
+      left: 0;
     }
+  }
 
-    .ff-title {
-      display: flex;
-      gap: 4px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      font-weight: 400;
-      cursor: pointer;
-
-      .ff-title-label {
-        display: flex;
-        align-items: center;
-      }
+  td {
+    font-size: 14px;
+    color: var(--brand-color);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    text-align: left;
+    height: 32px;
 
-      .ff-hover-icon {
-        display: none;
-        position: absolute;
-        right: 10px;
+    &:first-child {
+      overflow: initial;
+      width: 400px;
+      position: sticky;
+      left: 0;
+      background-color: white;
+      &:hover {
+        background-color: var(--hover-color);
       }
     }
-  }
 
-  .ff-node-li {
-    --indent-size: 18px;
-    --total-children-height: var(--node-height);
+    .tree-table-space-block {
+      border: 1px solid transparent;
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      line-height: 16px;
+      text-align: center;
+      vertical-align: top;
+      font-size: 19px;
+      position: relative;
+      box-sizing: border-box;
+      margin-top: 7px;
+      border-radius: 50%;
 
-    td {
-      padding: 0 8px;
-      white-space: nowrap;
-      text-overflow: ellipsis;
       &:first-child {
-        padding-left: calc(var(--level) * var(--indent-size));
-        height: 32px;
-        z-index: 0;
+        margin-left: 7px;
       }
 
-      .first-div {
-        background-color: white;
-        display: flex;
-        width: 100%;
-        height: 32px;
+      &.btn-toggle {
+        // border: 1px solid var(--brand-color);
+        position: relative;
+        cursor: pointer;
+        width: 22px;
+        height: 22px;
+        z-index: 12;
 
-        &:hover {
-          background-color: var(--hover-color);
+        &::before {
+          display: none;
         }
+      }
+
+      &.last-block {
         &::before {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: calc(var(--level) * var(--indent-size) - 4px);
-          width: 1px;
-          height: calc(var(--total-children-height));
-          background-color: var(--tree-connecting-lines-color);
-          z-index: 9999;
+          display: none;
         }
 
-        // Horizontal line connecting child node to parent
         &::after {
-          content: '';
           position: absolute;
-          top: 50%;
-          left: calc(var(--level) * var(--indent-size) - 4px);
+          content: '';
           width: 12px;
           height: 1px;
-          background-color: var(--tree-connecting-lines-color);
-          z-index: 10; /* Ensure it stays above the content */
+          background: var(--tree-connecting-lines-color);
+          top: 50%;
+          margin-top: -1px;
+          left: -10px;
         }
-
-        &.ff-is-last::before {
-          height: calc(var(--node-height) / 2);
+      }
+      &.no-folder {
+        width: 8px;
+        &::after {
+          position: absolute;
+          content: '';
+          width: 18px;
+          height: 1px;
+          background: var(--tree-connecting-lines-color);
+          top: 50%;
+          margin-top: -1px;
+          left: -10px;
         }
       }
-    }
 
-    // Remove the lines for root level
-    &[style*='--level: 0']::before,
-    &[style*='--level: 0']::after {
-      content: none;
+      &:not(.last-block)::before {
+        position: absolute;
+        content: '';
+        width: 1px;
+        height: 40px;
+        background: var(--tree-connecting-lines-color);
+        left: 50%;
+        top: -12px;
+        z-index: -1;
+      }
     }
   }
 }
 
-.ff-title-action-container {
-  display: none;
+.tree-table-td-content {
+  display: inline-flex;
   align-items: center;
+  padding: 7px;
+  font-size: 12px;
+  font-family: 'Poppins';
+}
+
+.hidden {
+  display: none;
+}
+
+.show {
+  visibility: visible;
 }
-th:first-child,
-td:first-child {
-  position: sticky;
-  left: 0;
+.tree-row-expanded,
+.tree-row-collapsed {
+  svg {
+    height: 12px;
+    width: 12px;
+    path {
+      fill: var(--brand-color);
+    }
+  }
+}
+.tree-row-collapsed {
+  svg {
+    transform: rotate(-90deg);
+    transition: all;
+  }
 }

package/src/components/TableTree/TableTree.stories.tsx

@@ -23,14 +23,16 @@ export const Default: Story = {
     onPagination: (node) => {
       console.log(node);
     },
+    expandedNodes: ['/MOD100111111','/MOD1001/MOD1024'],
+    onExpand: (isExpand, node) => {
+      console.log(isExpand, node);
+    },
     select: 'radio',
     onChange: (e: any, node: any) => {
       e.preventDefault();
       e.stopPropagation();
-
-      console.log(node, '------------', e.target.value);
     },
-    selected: ['MOD1003'],
+    selected: ['/MOD1001/MOD1002/MOD10031111'],
     treeData,
     columnsData: [
       {
@@ -47,15 +49,18 @@ export const Default: Story = {
             <Icon hoverEffect name="more" />,
           ];
         },
+        isTree: true,
+        defaultValue: 'Project name',
+        defaultActions: () => [],
       },
 
       {
         name: 'Module Path',
-        accessor: 'path',
+        accessor: 'searchKey',
         width: '200px',
         isClickable: true,
       },
-      
+
       {
         name: 'Module Path',
         accessor: 'path',