pixel-react 1.9.1 → 1.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/lib/components/Excel/ExcelFile/ExcelFile.d.ts +1 -3
  2. package/lib/components/Excel/Types.d.ts +1 -1
  3. package/lib/components/TableTree/data.d.ts +0 -40
  4. package/lib/index.d.ts +3 -5
  5. package/lib/index.esm.js +234 -354
  6. package/lib/index.esm.js.map +1 -1
  7. package/lib/index.js +234 -354
  8. package/lib/index.js.map +1 -1
  9. package/lib/utils/indexDBStore/indexDB.d.ts +2 -2
  10. package/package.json +1 -2
  11. package/src/assets/icons/clear_history.svg +6 -0
  12. package/src/assets/icons/code.svg +4 -0
  13. package/src/assets/icons/code_colored.svg +4 -0
  14. package/src/assets/icons/csharp.svg +9 -0
  15. package/src/assets/icons/cypress.svg +9 -0
  16. package/src/assets/icons/delete_filled.svg +12 -0
  17. package/src/assets/icons/design_link.svg +7 -0
  18. package/src/assets/icons/disable_icon.svg +3 -0
  19. package/src/assets/icons/enable_icon.svg +3 -0
  20. package/src/assets/icons/file_colored.svg +5 -0
  21. package/src/assets/icons/java.svg +4 -0
  22. package/src/assets/icons/javascript.svg +11 -0
  23. package/src/assets/icons/jira_colored.svg +15 -0
  24. package/src/assets/icons/mic.svg +4 -0
  25. package/src/assets/icons/mic_filled.svg +28 -0
  26. package/src/assets/icons/playwright.svg +9 -0
  27. package/src/assets/icons/python.svg +19 -0
  28. package/src/assets/icons/regenerate.svg +4 -0
  29. package/src/assets/icons/right_arrow_filled_icon.svg +5 -0
  30. package/src/assets/icons/screenshot.svg +7 -0
  31. package/src/components/Button/Button.tsx +2 -0
  32. package/src/components/Excel/ExcelFile/ExcelFile.tsx +48 -42
  33. package/src/components/Excel/ExcelFile.stories.tsx +98 -96
  34. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +65 -28
  35. package/src/components/Excel/Types.ts +1 -1
  36. package/src/components/Excel/dataConversion.ts +8 -10
  37. package/src/components/Icon/iconList.ts +44 -3
  38. package/src/components/TableTree/Components/TableBody.tsx +1 -1
  39. package/src/components/TableTree/Components/TableCell.tsx +26 -12
  40. package/src/components/TableTree/TableTree.tsx +18 -15
  41. package/src/components/TableTree/data.ts +0 -31
  42. package/src/utils/indexDBStore/indexDB.ts +63 -33
@@ -4,23 +4,37 @@ import RadioButton from '../../RadioButton';
4
4
  import { TableCellProps } from '../types';
5
5
  import Arrow from '../../../assets/icons/arrows_down_icon.svg?react';
6
6
  import React from 'react';
7
+ import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
7
8
 
8
9
  const renderSpaces = (
9
10
  level: number,
10
11
  parentSiblings: boolean[],
11
12
  isLast?: boolean | undefined
12
- ) => (
13
- <div className="tree-table-space-container">
14
- {parentSiblings.reverse().map((line, i) => (
15
- <span
16
- key={i}
17
- className={`tree-table-space-block ${!line ? 'no-lines' : ''} ${
18
- isLast && i === level - 1 ? 'last-node' : ''
19
- }`}
20
- />
21
- ))}
22
- </div>
23
- );
13
+ ) => {
14
+ let siblingsArray = parentSiblings;
15
+ let isLastNode = isLast;
16
+ if (checkEmpty(parentSiblings)) {
17
+ isLastNode = false;
18
+
19
+ if (!isNaN(level)) {
20
+ siblingsArray = Array(level).fill(true);
21
+ }
22
+ }
23
+
24
+ parentSiblings;
25
+ return (
26
+ <div className="tree-table-space-container">
27
+ {siblingsArray.reverse().map((line, i) => (
28
+ <span
29
+ key={i}
30
+ className={`tree-table-space-block ${!line ? 'no-lines' : ''} ${
31
+ isLastNode && i === level - 1 ? 'last-node' : ''
32
+ }`}
33
+ />
34
+ ))}
35
+ </div>
36
+ );
37
+ };
24
38
 
25
39
  const TableCell = React.memo(
26
40
  ({
@@ -16,23 +16,26 @@ const TreeTable: React.FC<TreeTableProps> = ({
16
16
  onExpand,
17
17
  loadMore = () => {},
18
18
  }) => {
19
- useIntersectionObserver(['ff-table-tree-last-node'], {
20
- root: null,
21
- rootMargin: '0px',
22
- threshold: 0.1,
23
- onIntersect: (entry) => {
24
- if (entry.isIntersecting) {
25
- if (functionCheck(loadMore)) {
26
- let direction = 'up';
27
- if (entry.target.id === 'ff-table-tree-last-node') {
28
- direction = 'down';
19
+ useIntersectionObserver(
20
+ ['ff-table-tree-last-node', 'ff-table-tree-first-node'],
21
+ {
22
+ root: null,
23
+ rootMargin: '0px',
24
+ threshold: 0.1,
25
+ onIntersect: (entry) => {
26
+ if (entry.isIntersecting) {
27
+ if (functionCheck(loadMore)) {
28
+ let direction = 'up';
29
+ if (entry.target.id === 'ff-table-tree-last-node') {
30
+ direction = 'down';
31
+ }
32
+ loadMore(direction);
29
33
  }
30
- loadMore(direction);
34
+ console.log('Element in view:', entry.target.id);
31
35
  }
32
- console.log('Element in view:', entry.target.id);
33
- }
34
- },
35
- });
36
+ },
37
+ }
38
+ );
36
39
 
37
40
  const handleToggleExpand = useCallback(
38
41
  (node: any) => onExpand?.(true, node?.id),
@@ -31,37 +31,6 @@ const data = [
31
31
  isLast: true,
32
32
  parentSiblings: [true],
33
33
  },
34
- {
35
- node: {
36
- subModuleCount: 15,
37
- title: 'mod1',
38
- scriptCount: 0,
39
- path: '/Root',
40
- expanded: true,
41
- modifiedOn: '19-12-2023 15:32',
42
- children: false,
43
- lastExecutionOrder: 3,
44
- imported: false,
45
- modifiedBy: '--',
46
- moduleCountWithScript: 1,
47
- state: 'NEW',
48
- key: 'MOD1001',
49
- ver: 1,
50
- hierarchy: 0,
51
- assigneeCount: 0,
52
- searchKey: '/MOD1001111110000000000',
53
- modifiedByUname: '--',
54
- executionOrder: 0,
55
- createdByUname: 'Shivaprasad',
56
- folder: true,
57
- moduleLevelScriptCount: 0,
58
- name: 'Root Module',
59
- parentId: 'MOD1001', // Root has no parent
60
- id: 'MOD1002', // Unique ID
61
- },
62
- parentSiblings: [true, false],
63
- lines: 1,
64
- },
65
34
  {
66
35
  node: {
67
36
  subModuleCount: 10,
@@ -1,37 +1,67 @@
1
- import { openDB, DBSchema } from 'idb';
2
-
3
- // Define the database schema
4
- interface MyDB extends DBSchema {
5
- items: {
6
- key: string; // Key for each item
7
- value: string; // Stored value, encoded as a string
8
- };
1
+ //Encoding utility
2
+ const encode = (data: string): string => btoa(unescape(encodeURIComponent(data))); // Example: Base64 encoding
3
+ //Decoding utility
4
+ const decode = (data: string): string => decodeURIComponent(escape(atob(data)));
5
+
6
+
7
+ function openIndexedDB(): Promise<IDBDatabase> {
8
+ return new Promise((resolve, reject) => {
9
+ const request = indexedDB.open('myDatabase', 1);
10
+
11
+ request.onupgradeneeded = (event) => {
12
+ const db = (event.target as IDBOpenDBRequest).result;
13
+
14
+ // Create an object store if it doesn't already exist
15
+ if (!db.objectStoreNames.contains('keyValueStore')) {
16
+ db.createObjectStore('keyValueStore', { keyPath: 'key' });
17
+ }
18
+ };
19
+
20
+ request.onsuccess = (event) => {
21
+ const db = (event.target as IDBOpenDBRequest).result;
22
+ resolve(db);
23
+ };
24
+
25
+ request.onerror = (event) => {
26
+ reject(`Error opening IndexedDB: ${(event.target as IDBOpenDBRequest).error}`);
27
+ };
28
+ });
9
29
  }
10
30
 
11
- // Open the database
12
- const dbPromise = openDB<MyDB>('my-database', 1, {
13
- upgrade(db) {
14
- if (!db.objectStoreNames.contains('items')) {
15
- db.createObjectStore('items');
16
- }
17
- },
18
- });
31
+ export async function saveToIndexedDB(key: string, value: string): Promise<void> {
32
+ const db = await openIndexedDB();
19
33
 
20
- // Encoding utility
21
- const encode = (data: string): string => btoa(unescape(encodeURIComponent(data))); // Example: Base64 encoding
22
- // Decoding utility
23
- const decode = (data: string): string => decodeURIComponent(escape(atob(data)));
34
+ return new Promise((resolve, reject) => {
35
+ const transaction = db.transaction('keyValueStore', 'readwrite');
36
+ const store = transaction.objectStore('keyValueStore');
37
+
38
+ const encodedValue = encode(value); // Encode the data
39
+ const request = store.put({ key, value: encodedValue });
40
+
41
+ request.onsuccess = () => resolve();
42
+ request.onerror = () => reject('Failed to save data');
43
+ });
44
+ }
45
+
46
+ export async function getFromIndexedDB(key: string): Promise<string | null> {
47
+ const db = await openIndexedDB();
48
+
49
+ return new Promise((resolve, reject) => {
50
+ const transaction = db.transaction('keyValueStore', 'readonly');
51
+ const store = transaction.objectStore('keyValueStore');
52
+
53
+ const request = store.get(key);
54
+
55
+ request.onsuccess = (event) => {
56
+ const result = (event.target as IDBRequest).result;
57
+ if (result && result.value) {
58
+ resolve(decode(result.value)); // Decode the data
59
+ } else {
60
+ resolve(null);
61
+ }
62
+ };
63
+
64
+ request.onerror = () => reject('Failed to retrieve data');
65
+ });
66
+ }
24
67
 
25
- // Save data to IndexedDB
26
- export const saveToIndexedDB = async (key: string, value: string): Promise<void> => {
27
- const db = await dbPromise;
28
- const encodedValue = encode(value);
29
- await db.put('items', encodedValue, key);
30
- };
31
-
32
- // Get data from IndexedDB
33
- export const getFromIndexedDB = async (key: string): Promise<string | null> => {
34
- const db = await dbPromise;
35
- const encodedValue = await db.get('items', key);
36
- return encodedValue ? decode(encodedValue) : null;
37
- };