pixel-react 1.6.6 → 1.6.7

package/src/components/TableTree/Components/TableCell.tsx

@@ -1,59 +1,59 @@
-import { prepareData } from '../../../utils/TableCell/TableCell';
-import Checkbox from '../../Checkbox';
-import RadioButton from '../../RadioButton';
-import { TableCellProps } from '../types';
-import Arrow from '../../../assets/icons/arrows_down_icon.svg?react';
-import React from 'react';
-
-const renderSpaces = (level: number) =>
-  Array.from({ length: level }).map((_, i) => (
-    <span key={i} className="tree-table-space-block" />
-  ));
-
-const TableCell = React.memo(
-  ({
-    col,
-    node,
-    level,
-    selected,
-    select,
-    onCheckBoxChange,
-    onToggleExpand,
-  }: TableCellProps) => (
-    <td>
-      {col.isTree && renderSpaces(level + 1)}
-      {col.isTree && (
-        <span
-          className={`tree-table-space-block last-block  ${
-            node.isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'
-          } ${node.folder ? '' : 'no-folder'}`}
-          onClick={() => onToggleExpand(node)}
-        >
-          {node.folder && <Arrow />}
-        </span>
-      )}
-      <span className="tree-table-td-content">
-        {col.isTree && select === 'checkbox' && (
-          <Checkbox
-            checked={selected.includes(node.id)}
-            onChange={() => onCheckBoxChange('checkbox', node)}
-          />
-        )}
-        {col.isTree && select === 'radio' && (
-          <RadioButton
-            name={node.title}
-            checked={selected.includes(node.id)}
-            value={node.id}
-            onChange={() => onCheckBoxChange('radio', node)}
-          />
-        )}
-        {prepareData(node, col)}
-      </span>
-      {col.actions && (
-        <div className="table-tree-row-action">{col.actions(node)}</div>
-      )}
-    </td>
-  )
-);
-
-export default TableCell;
+import { prepareData } from '../../../utils/TableCell/TableCell';
+import Checkbox from '../../Checkbox';
+import RadioButton from '../../RadioButton';
+import { TableCellProps } from '../types';
+import Arrow from '../../../assets/icons/arrows_down_icon.svg?react';
+import React from 'react';
+
+const renderSpaces = (level: number) =>
+  Array.from({ length: level }).map((_, i) => (
+    <span key={i} className="tree-table-space-block" />
+  ));
+
+const TableCell = React.memo(
+  ({
+    col,
+    node,
+    level,
+    selected,
+    select,
+    onCheckBoxChange,
+    onToggleExpand,
+  }: TableCellProps) => (
+    <td>
+      {col.isTree && renderSpaces(level + 1)}
+      {col.isTree && (
+        <span
+          className={`tree-table-space-block last-block  ${
+            node.isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'
+          } ${node.folder ? '' : 'no-folder'}`}
+          onClick={() => onToggleExpand(node)}
+        >
+          {node.folder && <Arrow />}
+        </span>
+      )}
+      <span className="tree-table-td-content">
+        {col.isTree && select === 'checkbox' && (
+          <Checkbox
+            checked={selected.includes(node.id)}
+            onChange={() => onCheckBoxChange('checkbox', node)}
+          />
+        )}
+        {col.isTree && select === 'radio' && (
+          <RadioButton
+            name={node.title}
+            checked={selected.includes(node.id)}
+            value={node.id}
+            onChange={() => onCheckBoxChange('radio', node)}
+          />
+        )}
+        {prepareData(node, col)}
+      </span>
+      {col.actions && (
+        <div className="table-tree-row-action">{col.actions(node)}</div>
+      )}
+    </td>
+  )
+);
+
+export default TableCell;

package/src/components/TableTree/Components/TableHead.tsx

@@ -1,39 +1,39 @@
-import React, { useMemo } from 'react';
-import { TableHeadProps } from '../types';
-
-const TableHead = React.memo(({ columnsData }: TableHeadProps) => {
-  const hasDefaultValues = useMemo(
-    () => columnsData.some(({ defaultValue }) => !!defaultValue),
-    [columnsData]
-  );
-
-  return (
-    <thead>
-      <tr>
-        {columnsData.map(({ name }) => (
-          <th key={name}>{name}</th>
-        ))}
-      </tr>
-      {hasDefaultValues && (
-        <tr>
-          {columnsData.map(({ defaultValue, defaultActions }, index) => (
-            <td key={index}>
-              {defaultValue && (
-                <span className="">
-                  {defaultValue}
-                  {defaultActions && (
-                    <div className="table-tree-row-action">
-                      {defaultActions()}
-                    </div>
-                  )}
-                </span>
-              )}
-            </td>
-          ))}
-        </tr>
-      )}
-    </thead>
-  );
-});
-
-export default TableHead;
+import React, { useMemo } from 'react';
+import { TableHeadProps } from '../types';
+
+const TableHead = React.memo(({ columnsData }: TableHeadProps) => {
+  const hasDefaultValues = useMemo(
+    () => columnsData.some(({ defaultValue }) => !!defaultValue),
+    [columnsData]
+  );
+
+  return (
+    <thead>
+      <tr>
+        {columnsData.map(({ name }) => (
+          <th key={name}>{name}</th>
+        ))}
+      </tr>
+      {hasDefaultValues && (
+        <tr>
+          {columnsData.map(({ defaultValue, defaultActions }, index) => (
+            <td key={index}>
+              {defaultValue && (
+                <span className="">
+                  {defaultValue}
+                  {defaultActions && (
+                    <div className="table-tree-row-action">
+                      {defaultActions()}
+                    </div>
+                  )}
+                </span>
+              )}
+            </td>
+          ))}
+        </tr>
+      )}
+    </thead>
+  );
+});
+
+export default TableHead;

package/src/components/TableTree/Components/TableRow.tsx

@@ -1,37 +1,37 @@
-import React from 'react';
-import { TableRowProps } from '../types';
-import TableCell from './TableCell';
-
-const TableRow = React.memo(
-  ({
-    node,
-    level,
-    columnsData,
-    selected,
-    select,
-    onRowClick,
-    onToggleExpand,
-    onCheckBoxChange,
-  }: TableRowProps) => (
-    <tr
-      data-level={level}
-      className="show"
-      onClick={(e) => onRowClick(e, node)}
-    >
-      {columnsData.map((col) => (
-        <TableCell
-          key={col.name}
-          col={col}
-          node={node}
-          level={level}
-          selected={selected}
-          select={select}
-          onCheckBoxChange={onCheckBoxChange}
-          onToggleExpand={onToggleExpand}
-        />
-      ))}
-    </tr>
-  )
-);
-
-export default TableRow;
+import React from 'react';
+import { TableRowProps } from '../types';
+import TableCell from './TableCell';
+
+const TableRow = React.memo(
+  ({
+    node,
+    level,
+    columnsData,
+    selected,
+    select,
+    onRowClick,
+    onToggleExpand,
+    onCheckBoxChange,
+  }: TableRowProps) => (
+    <tr
+      data-level={level}
+      className="show"
+      onClick={(e) => onRowClick(e, node)}
+    >
+      {columnsData.map((col) => (
+        <TableCell
+          key={col.name}
+          col={col}
+          node={node}
+          level={level}
+          selected={selected}
+          select={select}
+          onCheckBoxChange={onCheckBoxChange}
+          onToggleExpand={onToggleExpand}
+        />
+      ))}
+    </tr>
+  )
+);
+
+export default TableRow;

package/src/components/TableTree/TableTree.scss

@@ -1,205 +1,205 @@
-.tree-table-space-block {
-  display: inline-block;
-  width: 20px;
-}
-
-.hidden {
-  display: none;
-}
-
-.show {
-  display: table-row;
-}
-
-.btn-toggle {
-  &.expand {
-    cursor: pointer;
-  }
-
-  &.is-close {
-    background: #f1f1f1;
-    border: 1px solid transparent;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-  }
-
-  &::before {
-    display: none;
-  }
-
-  &::after {
-    display: none;
-  }
-}
-
-.tree-table-wrap {
-  width: 100%;
-}
-thead{
-  position: sticky;
-  top: 12px;
-}
-
-tbody{
-  overflow: scroll;
-}
-
-.tree-table {
-  border: 1px solid #f1f1f1;
-  table-layout: fixed;
-  width: 100%;
-  border-collapse: collapse;
-  overflow: scroll;
-  tr {
-    .table-tree-row-action {
-      display: none;
-    }
-    &:hover {
-      background-color: var(--hover-color);
-      .table-tree-row-action {
-        display: inline-flex;
-        align-items: center;
-      }
-    }
-  }
-
-  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;
-    }
-  }
-
-  td {
-    font-size: 14px;
-    color: var(--brand-color);
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    text-align: left;
-    height: 32px;
-
-    &:first-child {
-      overflow: initial;
-      width: 400px;
-      position: sticky;
-      left: 0;
-      background-color: white;
-      &:hover {
-        background-color: var(--hover-color);
-      }
-    }
-
-    .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%;
-
-      &:first-child {
-        margin-left: 7px;
-      }
-
-      &.btn-toggle {
-        // border: 1px solid var(--brand-color);
-        position: relative;
-        cursor: pointer;
-        width: 22px;
-        height: 22px;
-        z-index: 12;
-
-        &::before {
-          display: none;
-        }
-      }
-
-      &.last-block {
-        &::before {
-          display: none;
-        }
-
-        &::after {
-          position: absolute;
-          content: '';
-          width: 12px;
-          height: 1px;
-          background: var(--tree-connecting-lines-color);
-          top: 50%;
-          margin-top: -1px;
-          left: -10px;
-        }
-      }
-      &.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;
-        }
-      }
-
-      &:not(.last-block)::before {
-        position: absolute;
-        content: '';
-        width: 1px;
-        height: 40px;
-        background: var(--tree-connecting-lines-color);
-        left: 50%;
-        top: -12px;
-        z-index: -1;
-      }
-    }
-  }
-}
-
-.tree-table-td-content {
-  display: inline-flex;
-  align-items: center;
-  padding: 7px;
-  font-size: 12px;
-  font-family: 'Poppins';
-}
-
-.hidden {
-  display: none;
-}
-
-.show {
-  visibility: visible;
-}
-.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;
-  }
-}
+.tree-table-space-block {
+  display: inline-block;
+  width: 20px;
+}
+
+.hidden {
+  display: none;
+}
+
+.show {
+  display: table-row;
+}
+
+.btn-toggle {
+  &.expand {
+    cursor: pointer;
+  }
+
+  &.is-close {
+    background: #f1f1f1;
+    border: 1px solid transparent;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  }
+
+  &::before {
+    display: none;
+  }
+
+  &::after {
+    display: none;
+  }
+}
+
+.tree-table-wrap {
+  width: 100%;
+}
+thead{
+  position: sticky;
+  top: 12px;
+}
+
+tbody{
+  overflow: scroll;
+}
+
+.tree-table {
+  border: 1px solid #f1f1f1;
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+  overflow: scroll;
+  tr {
+    .table-tree-row-action {
+      display: none;
+    }
+    &:hover {
+      background-color: var(--hover-color);
+      .table-tree-row-action {
+        display: inline-flex;
+        align-items: center;
+      }
+    }
+  }
+
+  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;
+    }
+  }
+
+  td {
+    font-size: 14px;
+    color: var(--brand-color);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    text-align: left;
+    height: 32px;
+
+    &:first-child {
+      overflow: initial;
+      width: 400px;
+      position: sticky;
+      left: 0;
+      background-color: white;
+      &:hover {
+        background-color: var(--hover-color);
+      }
+    }
+
+    .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%;
+
+      &:first-child {
+        margin-left: 7px;
+      }
+
+      &.btn-toggle {
+        // border: 1px solid var(--brand-color);
+        position: relative;
+        cursor: pointer;
+        width: 22px;
+        height: 22px;
+        z-index: 12;
+
+        &::before {
+          display: none;
+        }
+      }
+
+      &.last-block {
+        &::before {
+          display: none;
+        }
+
+        &::after {
+          position: absolute;
+          content: '';
+          width: 12px;
+          height: 1px;
+          background: var(--tree-connecting-lines-color);
+          top: 50%;
+          margin-top: -1px;
+          left: -10px;
+        }
+      }
+      &.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;
+        }
+      }
+
+      &:not(.last-block)::before {
+        position: absolute;
+        content: '';
+        width: 1px;
+        height: 40px;
+        background: var(--tree-connecting-lines-color);
+        left: 50%;
+        top: -12px;
+        z-index: -1;
+      }
+    }
+  }
+}
+
+.tree-table-td-content {
+  display: inline-flex;
+  align-items: center;
+  padding: 7px;
+  font-size: 12px;
+  font-family: 'Poppins';
+}
+
+.hidden {
+  display: none;
+}
+
+.show {
+  visibility: visible;
+}
+.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;
+  }
+}