Skip to content

Commit f2628bf

Browse files
ThayalanGRThayalanGR
authored
version(patch): Merge pull request #76 from sathish151198/cross-highlight
feat(rfk): cross highlighting implementation
2 parents 59cd496 + 30c5926 commit f2628bf

7 files changed

Lines changed: 481 additions & 125 deletions

‎src/Examples/Example34_Highlight_Across_Buckets.tsx‎

Lines changed: 0 additions & 66 deletions
This file was deleted.

‎src/Examples/Example34_Highlight_Between_Buckets.tsx‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
import {
2+
FieldsKeeperProvider,
3+
FieldsKeeperBucket,
4+
FieldsKeeperRootBucket,
5+
IFieldsKeeperItem,
6+
IFieldsKeeperBucket,
7+
} from '..';
8+
9+
export default function Example34() {
10+
// compute
11+
const allItems: IFieldsKeeperItem[] = [
12+
{ id: 'a', label: 'a', folders: ['folder_1'] },
13+
{ id: 'b', label: 'b', folders: ['folder_1'] },
14+
{ id: 'c', label: 'c', folders: ['folder_2'] },
15+
{ id: 'd', label: 'd', folders: ['folder_2'] },
16+
{
17+
id: 'date.quarter',
18+
label: 'Quarter',
19+
folders: ['folder_2'],
20+
group: 'dateHierarchy',
21+
groupLabel: 'Date Hierarchy',
22+
groupIcon: 'hierarchy-icon',
23+
groupOrder: 1,
24+
flatGroup: 'date',
25+
flatGroupLabel: 'Date',
26+
flatGroupIcon: 'contact-card',
27+
},
28+
{
29+
id: 'date.year',
30+
label: 'Year',
31+
folders: ['folder_2'],
32+
group: 'dateHierarchy',
33+
groupLabel: 'Date Hierarchy',
34+
groupIcon: 'hierarchy-icon',
35+
groupOrder: 0,
36+
flatGroup: 'date',
37+
flatGroupLabel: 'Date',
38+
flatGroupIcon: 'contact-card',
39+
},
40+
{
41+
id: 'date.month',
42+
label: 'Month',
43+
folders: ['folder_2'],
44+
group: 'dateHierarchy',
45+
groupLabel: 'Date Hierarchy',
46+
groupIcon: 'hierarchy-icon',
47+
groupOrder: 2,
48+
flatGroup: 'date',
49+
flatGroupLabel: 'Date',
50+
flatGroupIcon: 'contact-card',
51+
},
52+
{
53+
id: 'date.day',
54+
label: 'Day',
55+
folders: ['folder_2'],
56+
group: 'dateHierarchy',
57+
groupLabel: 'Date Hierarchy',
58+
groupIcon: 'hierarchy-icon',
59+
groupOrder: 3,
60+
flatGroup: 'date',
61+
flatGroupLabel: 'Date',
62+
flatGroupIcon: 'contact-card',
63+
},
64+
{
65+
id: 'date.time',
66+
label: 'time',
67+
folders: ['folder_2'],
68+
group: 'dateHierarchy',
69+
groupLabel: 'Date Hierarchy',
70+
groupIcon: 'hierarchy-icon',
71+
groupOrder: 4,
72+
flatGroup: 'date',
73+
flatGroupLabel: 'Date',
74+
flatGroupIcon: 'contact-card',
75+
},
76+
{
77+
id: 'date.seconds',
78+
label: 'seconds',
79+
folders: ['folder_2'],
80+
group: 'dateHierarchy',
81+
groupLabel: 'Date Hierarchy',
82+
groupIcon: 'hierarchy-icon',
83+
groupOrder: 5,
84+
flatGroup: 'date',
85+
flatGroupLabel: 'Date',
86+
flatGroupIcon: 'contact-card',
87+
},
88+
];
89+
90+
const buckets: IFieldsKeeperBucket[] = [
91+
{ id: 'bucket1', items: [allItems[0]] },
92+
{
93+
id: 'bucket2',
94+
items: [allItems[1], allItems[2]],
95+
},
96+
{ id: 'bucket3', items: [] },
97+
];
98+
99+
// paint
100+
return (
101+
<div className="example-container">
102+
<div className="example-container-title">
103+
34. Highlight Between Buckets
104+
</div>
105+
<FieldsKeeperProvider
106+
allItems={allItems}
107+
buckets={buckets}
108+
onUpdate={(state) => {
109+
console.log(state);
110+
}}
111+
foldersMeta={{
112+
folder_1: {
113+
id: 'folder_1',
114+
label: 'Folder 1',
115+
prefixNodeIcon: 'folder-icon',
116+
},
117+
folder_2: {
118+
id: 'folder_2',
119+
label: 'Folder 2',
120+
prefixNodeIcon: 'folder-icon',
121+
},
122+
}}
123+
highlightAcrossBuckets={{enabled: true, highlightColor: 'red', highlightDuration: 1000}}
124+
>
125+
<div className="keeper-container">
126+
<div className="buckets-container">
127+
<FieldsKeeperBucket
128+
id="bucket1"
129+
label="Bucket 1"
130+
allowRemoveFields
131+
/>
132+
<FieldsKeeperBucket
133+
id="bucket2"
134+
label="Bucket 2"
135+
allowRemoveFields
136+
/>
137+
<FieldsKeeperBucket
138+
id="bucket3"
139+
label="Bucket 3"
140+
allowRemoveFields
141+
/>
142+
</div>
143+
<div className="root-bucket-container">
144+
<FieldsKeeperRootBucket label="Root Bucket" />
145+
</div>
146+
</div>
147+
</FieldsKeeperProvider>
148+
</div>
149+
);
150+
}

‎src/Examples/Example35_Cross_Highlight_Across_Buckets.tsx‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
import { useState } from 'react';
2+
import {
3+
FieldsKeeperProvider,
4+
FieldsKeeperBucket,
5+
FieldsKeeperRootBucket,
6+
IFieldsKeeperItem,
7+
IFieldsKeeperBucket,
8+
} from '..';
9+
10+
export default function Example35() {
11+
const [crossHighlightConfig, setCrossHighlightConfig] = useState({enabled: true, highlightColor: 'red', crossHighlightIds: ['folder_1', 'folder_2']});
12+
// compute
13+
const allItems: IFieldsKeeperItem[] = [
14+
{ id: 'a', label: 'a', folders: ['folder_1'] },
15+
{ id: 'b', label: 'b', folders: ['folder_1'] },
16+
{ id: 'c', label: 'c', folders: ['folder_2'] },
17+
{ id: 'd', label: 'd', folders: ['folder_2'] },
18+
{
19+
id: 'date.quarter',
20+
label: 'Quarter',
21+
folders: ['folder_2'],
22+
group: 'dateHierarchy',
23+
groupLabel: 'Date Hierarchy',
24+
groupIcon: 'hierarchy-icon',
25+
groupOrder: 1,
26+
flatGroup: 'date',
27+
flatGroupLabel: 'Date',
28+
flatGroupIcon: 'contact-card',
29+
},
30+
{
31+
id: 'date.year',
32+
label: 'Year',
33+
folders: ['folder_2'],
34+
group: 'dateHierarchy',
35+
groupLabel: 'Date Hierarchy',
36+
groupIcon: 'hierarchy-icon',
37+
groupOrder: 0,
38+
flatGroup: 'date',
39+
flatGroupLabel: 'Date',
40+
flatGroupIcon: 'contact-card',
41+
},
42+
{
43+
id: 'date.month',
44+
label: 'Month',
45+
folders: ['folder_2'],
46+
group: 'dateHierarchy',
47+
groupLabel: 'Date Hierarchy',
48+
groupIcon: 'hierarchy-icon',
49+
groupOrder: 2,
50+
flatGroup: 'date',
51+
flatGroupLabel: 'Date',
52+
flatGroupIcon: 'contact-card',
53+
},
54+
{
55+
id: 'date.day',
56+
label: 'Day',
57+
folders: ['folder_2'],
58+
group: 'dateHierarchy',
59+
groupLabel: 'Date Hierarchy',
60+
groupIcon: 'hierarchy-icon',
61+
groupOrder: 3,
62+
flatGroup: 'date',
63+
flatGroupLabel: 'Date',
64+
flatGroupIcon: 'contact-card',
65+
},
66+
{
67+
id: 'date.time',
68+
label: 'time',
69+
folders: ['folder_2'],
70+
group: 'dateHierarchy',
71+
groupLabel: 'Date Hierarchy',
72+
groupIcon: 'hierarchy-icon',
73+
groupOrder: 4,
74+
flatGroup: 'date',
75+
flatGroupLabel: 'Date',
76+
flatGroupIcon: 'contact-card',
77+
},
78+
{
79+
id: 'date.seconds',
80+
label: 'seconds',
81+
folders: ['folder_2'],
82+
group: 'dateHierarchy',
83+
groupLabel: 'Date Hierarchy',
84+
groupIcon: 'hierarchy-icon',
85+
groupOrder: 5,
86+
flatGroup: 'date',
87+
flatGroupLabel: 'Date',
88+
flatGroupIcon: 'contact-card',
89+
},
90+
];
91+
92+
const buckets: IFieldsKeeperBucket[] = [
93+
{ id: 'bucket1', items: [allItems[0]] },
94+
{
95+
id: 'bucket2',
96+
items: [allItems[1], allItems[2]],
97+
},
98+
{ id: 'bucket3', items: [] },
99+
];
100+
101+
// paint
102+
return (
103+
<div className="example-container">
104+
<div className="example-container-title">
105+
35. Cross Highlight Across Buckets
106+
</div>
107+
<FieldsKeeperProvider
108+
allItems={allItems}
109+
buckets={buckets}
110+
onUpdate={(state) => {
111+
console.log(state);
112+
}}
113+
foldersMeta={{
114+
folder_1: {
115+
id: 'folder_1',
116+
label: 'Folder 1',
117+
prefixNodeIcon: 'folder-icon',
118+
},
119+
folder_2: {
120+
id: 'folder_2',
121+
label: 'Folder 2',
122+
prefixNodeIcon: 'folder-icon',
123+
},
124+
}}
125+
>
126+
<div className="keeper-container">
127+
<div className="buckets-container">
128+
<FieldsKeeperBucket
129+
id="bucket1"
130+
label="Bucket 1"
131+
allowRemoveFields
132+
/>
133+
<FieldsKeeperBucket
134+
id="bucket2"
135+
label="Bucket 2"
136+
allowRemoveFields
137+
/>
138+
<FieldsKeeperBucket
139+
id="bucket3"
140+
label="Bucket 3"
141+
allowRemoveFields
142+
/>
143+
</div>
144+
<div className="root-bucket-container">
145+
<FieldsKeeperRootBucket label="Root Bucket"
146+
crossHighlightAcrossBucket={crossHighlightConfig}
147+
onFieldItemClick={(fieldItem) => {
148+
setCrossHighlightConfig((prevState) => ({
149+
...prevState,
150+
crossHighlightIds: [fieldItem.id]
151+
}))
152+
}}
153+
/>
154+
</div>
155+
</div>
156+
</FieldsKeeperProvider>
157+
</div>
158+
);
159+
}

‎src/Examples/index.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@ import Example30_flat_group from './Example30_flat_group';
3131
import Example31_Custom_Styling_ClassName from './Example31_CustomStyling';
3232
import Example32_context_menu from './Example32_context_menu';
3333
import Example33_add_to_bucket from './Example33_add_to_bucket';
34-
import Example34_Highlight_Across_Buckets from './Example34_Highlight_Across_Buckets';
34+
import Example34_Highlight_Between_Buckets from './Example34_Highlight_Between_Buckets';
35+
import Example35_Cross_Highlight_Across_Buckets from './Example35_Cross_Highlight_Across_Buckets';
3536

3637
export const examples = {
3738
Example1_sample_use_case,
@@ -67,5 +68,6 @@ export const examples = {
6768
Example31_Custom_Styling_ClassName,
6869
Example32_context_menu,
6970
Example33_add_to_bucket,
70-
Example34_Highlight_Across_Buckets
71+
Example34_Highlight_Between_Buckets,
72+
Example35_Cross_Highlight_Across_Buckets
7173
};

0 commit comments

Comments
 (0)