pixel-react-excel-sheet 1.0.32 → 1.0.33

package/src/components/TableTree/TableTree.scss

@@ -1,6 +1,73 @@
 .tree-table-space-block {
   display: inline-block;
   width: 20px;
+  height: 16px;
+  text-align: center;
+  line-height: 16px;
+  vertical-align: top;
+  font-size: 19px;
+  position: relative;
+  box-sizing: border-box;
+  // margin-top: 7px;
+  border-radius: 50%;
+
+  &.btn-toggle {
+    position: relative;
+    cursor: pointer;
+    width: 22px;
+    height: 18px;
+    z-index: 12;
+
+    &::before {
+      display: none;
+    }
+  }
+
+  &.last-block::after,
+  &.no-folder::after {
+    position: absolute;
+    content: '';
+    height: 1px;
+    background: var(--tree-connecting-lines-color);
+    top: 50%;
+    margin-top: -1px;
+  }
+
+  &.last-block::after {
+    width: 12px;
+    left: -10px;
+  }
+
+  &.no-folder {
+    width: 8px;
+
+    &::after {
+      width: 18px;
+      left: -10px;
+    }
+  }
+
+  &:not(.last-block, .no-lines, .last-node)::before {
+    position: absolute;
+    content: '';
+    width: 1px;
+    height: 40px;
+    background: var(--tree-connecting-lines-color);
+    left: 50%;
+    top: -4px;
+    z-index: 99;
+  }
+
+  &.last-node::before {
+    position: absolute;
+    content: '';
+    width: 1px;
+    height: 12px;
+    background: var(--tree-connecting-lines-color);
+    left: 50%;
+    top: -4px;
+    z-index: -1;
+  }
 }
 
 .hidden {
@@ -9,12 +76,11 @@
 
 .show {
   display: table-row;
+  visibility: visible;
 }
 
 .btn-toggle {
-  &.expand {
-    cursor: pointer;
-  }
+  cursor: pointer;
 
   &.is-close {
     background: #f1f1f1;
@@ -22,10 +88,7 @@
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   }
 
-  &::before {
-    display: none;
-  }
-
+  &::before,
   &::after {
     display: none;
   }
@@ -34,12 +97,8 @@
 .tree-table-wrap {
   width: 100%;
 }
-thead{
-  position: sticky;
-  top: 12px;
-}
 
-tbody{
+.ff-table-tree-body {
   overflow: scroll;
 }
 
@@ -49,29 +108,49 @@ tbody{
   width: 100%;
   border-collapse: collapse;
   overflow: scroll;
+
   tr {
     .table-tree-row-action {
       display: none;
     }
+
     &:hover {
       background-color: var(--hover-color);
+      td {
+        &:first-child {
+          background-color: var(--hover-color);
+        }
+      }
+
       .table-tree-row-action {
         display: inline-flex;
         align-items: center;
       }
     }
+
+    &::after {
+      content: '';
+      display: block;
+      visibility: hidden;
+      clear: both;
+    }
+  }
+
+  th,
+  td {
+    text-align: left;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
 
   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;
     }
@@ -80,126 +159,59 @@ tbody{
   td {
     font-size: 14px;
     color: var(--brand-color);
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    text-align: left;
-    height: 32px;
+    height: 18px;
 
     &: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;
+  padding-left: 8px;
   font-size: 12px;
-  font-family: 'Poppins';
+  font-family: 'Poppins', sans-serif;
 }
 
-.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-row-collapsed svg {
+  transform: rotate(-90deg);
+  transition: transform 0.3s ease;
+}
+
+tr:after {
+  content: ' ';
+  display: block;
+  visibility: hidden;
+  clear: both;
+}
+
+.tree-table-space-container {
+  display: inline-flex;
+  // flex-direction: row-reverse;
+}
+
+.tree-title-container {
+  display: inline-flex;
+  align-items: center;
 }

package/src/components/TableTree/data.ts

@@ -28,6 +28,8 @@ const data = [
       id: 'MOD1001', // Unique ID
     },
     level: 0,
+    isLast: true,
+    parentSiblings: [true],
   },
   {
     node: {
@@ -57,7 +59,8 @@ const data = [
       parentId: 'MOD1001', // Root has no parent
       id: 'MOD1002', // Unique ID
     },
-    level: 1,
+    parentSiblings: [true, false],
+    lines: 1,
   },
   {
     node: {
@@ -73,6 +76,7 @@ const data = [
       id: 'MOD1003', // Unique ID
     },
     level: 1,
+    parentSiblings: [true, false],
   },
   {
     node: {
@@ -104,6 +108,7 @@ const data = [
       id: 'MOD1004', // Unique ID
     },
     level: 2,
+    parentSiblings: [true, true, false],
   },
   {
     node: {
@@ -134,6 +139,7 @@ const data = [
       id: 'MOD1101', // Unique ID
     },
     level: 3,
+    parentSiblings: [true, true, true, false],
   },
   {
     node: {
@@ -164,6 +170,7 @@ const data = [
       id: 'MOD1102', // Unique ID
     },
     level: 3,
+    parentSiblings: [true, true, true, false],
   },
   {
     node: {
@@ -194,6 +201,8 @@ const data = [
       id: 'MOD1103', // Unique ID
     },
     level: 3,
+    parentSiblings: [true, true, true, false],
+    isLast: true,
   },
   {
     node: {
@@ -225,6 +234,8 @@ const data = [
       id: 'MOD1005', // Unique ID
     },
     level: 2,
+    parentSiblings: [true, true, false],
+    isLast: true,
   },
   {
     node: {
@@ -255,6 +266,7 @@ const data = [
       id: 'MOD1201', // Unique ID
     },
     level: 3,
+    parentSiblings: [true, false, true, false],
   },
   {
     node: {
@@ -285,6 +297,7 @@ const data = [
       id: 'MOD1202', // Unique ID
     },
     level: 3,
+    parentSiblings: [true, false, true, false],
   },
   {
     node: {
@@ -315,8 +328,41 @@ const data = [
       id: 'MOD1203', // Unique ID
     },
     level: 3,
+    parentSiblings: [true, false, true, false],
+    isLast: true,
+  },
+  {
+    node: {
+      subModuleCount: 15,
+      title: 'mod3',
+      scriptCount: 0,
+      path: '/Root',
+      expanded: true,
+      modifiedOn: '19-12-2023 15:32',
+      children: false,
+      lastExecutionOrder: 3,
+      imported: false,
+      modifiedBy: '--',
+      moduleCountWithScript: 1,
+      state: 'NEW',
+      key: 'MOD1001',
+      ver: 1,
+      hierarchy: 0,
+      assigneeCount: 0,
+      searchKey: '/MOD1001111110000000000',
+      modifiedByUname: '--',
+      executionOrder: 0,
+      createdByUname: 'Shivaprasad',
+      folder: true,
+      moduleLevelScriptCount: 0,
+      name: 'Root Module111',
+      parentId: 'MOD1001', // Root has no parent
+      id: 'MOD100222', // Unique ID
+    },
+    level: 1,
+    parentSiblings: [true, false],
+    isLast: true,
   },
 ];
 
-
 export default data;

package/src/components/TableTree/types.ts

@@ -17,6 +17,8 @@ export interface TableCellProps {
   select: string | null;
   onCheckBoxChange: (type: string, node: any) => void;
   onToggleExpand: (node: any) => void;
+  parentSiblings: boolean[];
+  isLast: boolean | undefined;
 }
 
 export interface TableHeadProps {
@@ -42,6 +44,8 @@ export interface TableRowProps {
   onRowClick: (e: any, node: any) => void;
   onToggleExpand: (node: any) => void;
   onCheckBoxChange: (type: string, node: any) => void;
+  parentSiblings: boolean[];
+  isLast: boolean | undefined;
 }
 
 export interface Column {

package/src/index.ts

@@ -71,6 +71,8 @@ import FieldSet from './components/FieldSet';
 import CreateVariableSlider from './components/CreateVariable/CreateVariableSlider';
 import TableWithAccordion from './components/TableWithAccordion/TableWithAccordion';
 import ProgressBar from './components/ProgressBar';
+import ChooseFile from './components/ChooseFile/ChooseFile';
+import ScriptSwitchButton from './components/ScriptSwitchButton';
 
 // Utils imports
 import { checkEmpty } from './utils/checkEmpty/checkEmpty';
@@ -100,6 +102,53 @@ import FormatString from './utils/FormatString/FormatString';
 import ConditionalDropdown from './components/ConditionalDropdown/ConditionalDropdown';
 import { hasDuplicateFile } from './utils/checkDuplicates/checkDuplicates';
 import PhoneInputField from './components/PhoneInput';
+import {
+  EMAIL_REGEX,
+  URL_REGEX,
+  PHONE_REGEX,
+  POSTAL_CODE_REGEX,
+  IPV4_REGEX,
+  IPV6_REGEX,
+  HEX_COLOR_REGEX,
+  PASSWORD_SIMPLE_REGEX,
+  PASSWORD_COMPLEX_REGEX,
+  ALPHABET_ONLY_REGEX,
+  NUMBERS_ONLY_REGEX,
+  ALPHANUMERIC_REGEX,
+  DATE_REGEX,
+  TIME_REGEX,
+  FILE_EXTENSION_REGEX,
+  MAC_ADDRESS_REGEX,
+  CREDIT_CARD_REGEX,
+  SSN_REGEX,
+  UUID_REGEX,
+  HTML_TAG_REGEX,
+  WHITESPACE_REGEX,
+  US_ZIP_CODE_REGEX,
+  USERNAME_REGEX,
+  INDIAN_PHONE_REGEX,
+  INDIAN_PIN_CODE_REGEX,
+  GSTIN_REGEX,
+  PAN_CARD_REGEX,
+  AADHAAR_REGEX,
+  VEHICLE_REGISTRATION_REGEX,
+  INDIAN_CURRENCY_REGEX,
+  INTERNATIONAL_PHONE_REGEX,
+  INDIAN_PASSPORT_REGEX,
+  DRIVING_LICENSE_REGEX,
+  USERNAME_SPECIAL_REGEX,
+  DECIMAL_NUMBER_REGEX,
+  HTML_ATTRIBUTE_REGEX,
+  RGB_COLOR_REGEX,
+  HSL_COLOR_REGEX,
+  BASE64_REGEX,
+  BINARY_NUMBER_REGEX,
+  HEXADECIMAL_NUMBER_REGEX,
+  ROMAN_NUMERALS_REGEX,
+  CURRENCY_GENERIC_REGEX,
+  LINKEDIN_PROFILE_REGEX,
+  TWITTER_HANDLE_REGEX,
+} from './validations/regex';
 
 export {
   Button,
@@ -184,6 +233,9 @@ export {
   PhoneInputField,
   TableWithAccordion,
   ProgressBar,
+  ChooseFile,
+  ScriptSwitchButton,
+
   // utils exports
   checkEmpty,
   getExtension,
@@ -202,4 +254,49 @@ export {
   useFileDropzone,
   FormatString,
   hasDuplicateFile,
+  EMAIL_REGEX,
+  URL_REGEX,
+  PHONE_REGEX,
+  POSTAL_CODE_REGEX,
+  IPV4_REGEX,
+  IPV6_REGEX,
+  HEX_COLOR_REGEX,
+  PASSWORD_SIMPLE_REGEX,
+  PASSWORD_COMPLEX_REGEX,
+  ALPHABET_ONLY_REGEX,
+  NUMBERS_ONLY_REGEX,
+  ALPHANUMERIC_REGEX,
+  DATE_REGEX,
+  TIME_REGEX,
+  FILE_EXTENSION_REGEX,
+  MAC_ADDRESS_REGEX,
+  CREDIT_CARD_REGEX,
+  SSN_REGEX,
+  UUID_REGEX,
+  HTML_TAG_REGEX,
+  WHITESPACE_REGEX,
+  US_ZIP_CODE_REGEX,
+  USERNAME_REGEX,
+  INDIAN_PHONE_REGEX,
+  INDIAN_PIN_CODE_REGEX,
+  GSTIN_REGEX,
+  PAN_CARD_REGEX,
+  AADHAAR_REGEX,
+  VEHICLE_REGISTRATION_REGEX,
+  INDIAN_CURRENCY_REGEX,
+  INTERNATIONAL_PHONE_REGEX,
+  INDIAN_PASSPORT_REGEX,
+  DRIVING_LICENSE_REGEX,
+  USERNAME_SPECIAL_REGEX,
+  DECIMAL_NUMBER_REGEX,
+  HTML_ATTRIBUTE_REGEX,
+  RGB_COLOR_REGEX,
+  HSL_COLOR_REGEX,
+  BASE64_REGEX,
+  BINARY_NUMBER_REGEX,
+  HEXADECIMAL_NUMBER_REGEX,
+  ROMAN_NUMERALS_REGEX,
+  CURRENCY_GENERIC_REGEX,
+  LINKEDIN_PROFILE_REGEX,
+  TWITTER_HANDLE_REGEX,
 };