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.
- package/lib/components/Excel/ExcelFile/ExcelFile.d.ts +1 -3
- package/lib/components/Excel/Types.d.ts +1 -1
- package/lib/components/TableTree/data.d.ts +0 -40
- package/lib/index.d.ts +3 -5
- package/lib/index.esm.js +234 -354
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +234 -354
- package/lib/index.js.map +1 -1
- package/lib/utils/indexDBStore/indexDB.d.ts +2 -2
- package/package.json +1 -2
- package/src/assets/icons/clear_history.svg +6 -0
- package/src/assets/icons/code.svg +4 -0
- package/src/assets/icons/code_colored.svg +4 -0
- package/src/assets/icons/csharp.svg +9 -0
- package/src/assets/icons/cypress.svg +9 -0
- package/src/assets/icons/delete_filled.svg +12 -0
- package/src/assets/icons/design_link.svg +7 -0
- package/src/assets/icons/disable_icon.svg +3 -0
- package/src/assets/icons/enable_icon.svg +3 -0
- package/src/assets/icons/file_colored.svg +5 -0
- package/src/assets/icons/java.svg +4 -0
- package/src/assets/icons/javascript.svg +11 -0
- package/src/assets/icons/jira_colored.svg +15 -0
- package/src/assets/icons/mic.svg +4 -0
- package/src/assets/icons/mic_filled.svg +28 -0
- package/src/assets/icons/playwright.svg +9 -0
- package/src/assets/icons/python.svg +19 -0
- package/src/assets/icons/regenerate.svg +4 -0
- package/src/assets/icons/right_arrow_filled_icon.svg +5 -0
- package/src/assets/icons/screenshot.svg +7 -0
- package/src/components/Button/Button.tsx +2 -0
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +48 -42
- package/src/components/Excel/ExcelFile.stories.tsx +98 -96
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +65 -28
- package/src/components/Excel/Types.ts +1 -1
- package/src/components/Excel/dataConversion.ts +8 -10
- package/src/components/Icon/iconList.ts +44 -3
- package/src/components/TableTree/Components/TableBody.tsx +1 -1
- package/src/components/TableTree/Components/TableCell.tsx +26 -12
- package/src/components/TableTree/TableTree.tsx +18 -15
- package/src/components/TableTree/data.ts +0 -31
- 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
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
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(
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
if (
|
28
|
-
direction = '
|
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
|
-
|
34
|
+
console.log('Element in view:', entry.target.id);
|
31
35
|
}
|
32
|
-
|
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
|
-
|
2
|
-
|
3
|
-
//
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
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
|
-
|
12
|
-
const
|
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
|
-
|
21
|
-
const
|
22
|
-
|
23
|
-
|
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
|
-
};
|