version(minor): Merge pull request #89 from sathish151198/rfk-sync

feat(rfk): rename root bucket label

Author: ThayalanGR

src/Examples/Example38_root_bucket_label_editing.tsx

@@ -0,0 +1,178 @@
+import { useState } from 'react';
+import {
+    FieldsKeeperProvider,
+    FieldsKeeperBucket,
+    FieldsKeeperRootBucket,
+    IFieldsKeeperItem,
+    IFieldsKeeperBucket,
+    IRootBucketFieldItemLabelChangeProps,
+} from '..';
+
+export default function Example38() {
+    // compute
+    const allItems: IFieldsKeeperItem[] = [
+        {
+            id: 'a',
+            label: 'a',
+            folders: ['folder_1'],
+        },
+        {
+            id: 'b',
+            label: 'b',
+            folders: ['folder_1'],
+        },
+        {
+            id: 'c',
+            label: 'c',
+            folders: ['folder_2'],
+        },
+        {
+            id: 'd',
+            label: 'd',
+            folders: ['folder_2'],
+        },
+        {
+            id: 'date.quarter',
+            label: 'Quarter',
+            folders: ['folder_2'],
+            group: 'date',
+            groupLabel: 'Date',
+            groupOrder: 1,
+        },
+        {
+            id: 'date.year',
+            label: 'Year',
+            folders: ['folder_2'],
+            group: 'date',
+            groupLabel: 'Date',
+            groupOrder: 0,
+        },
+        {
+            id: 'date.month',
+            label: 'Month',
+            folders: ['folder_2'],
+            group: 'date',
+            groupLabel: 'Date',
+            groupOrder: 2,
+        },
+        {
+            id: 'date.day',
+            label: 'Day',
+            folders: ['folder_2'],
+            group: 'date',
+            groupLabel: 'Date',
+            groupOrder: 3,
+        },
+    ];
+
+    const [buckets, setBuckets] = useState<IFieldsKeeperBucket[]>([
+        { id: 'bucket1', items: [allItems[0]] },
+        {
+            id: 'bucket2',
+            items: [allItems[1], allItems[2]],
+        },
+        { id: 'bucket3', items: [] },
+    ]);
+
+
+    const [rootItems, setRootItems] = useState<IFieldsKeeperItem[]>(allItems);
+
+    const updateRootFieldLabel = (
+        fieldItemLabelClickProps: IRootBucketFieldItemLabelChangeProps,
+    ) => {
+        const {
+            fieldItem,
+            newValue,
+        } = fieldItemLabelClickProps;
+        
+        console.log(`Updating root field label: ${fieldItem.label} -> ${newValue}`);
+        
+        // Update root items
+        const updatedRootItems = rootItems.map((item) => {
+            if (item.group === fieldItem.id) {
+                return { ...item, groupLabel: newValue };
+            }
+            if (item.id === fieldItem.id) {
+                return { ...item, label: newValue };
+            }
+            return item;
+        });
+        
+        setRootItems(updatedRootItems);
+        
+        // Also update any items that might be in buckets to keep them in sync
+        const updatedBuckets = buckets.map((bucket) => ({
+            ...bucket,
+            items: bucket.items.map((item) => {
+                if (item.group === fieldItem.id) {
+                    return { ...item, groupLabel: newValue };
+                }
+                if (item.id === fieldItem.id) {
+                    return { ...item, label: newValue };
+                }
+                return item;
+            }),
+        }));
+        
+        setBuckets(updatedBuckets);
+    };
+
+    // paint
+    return (
+        <div className="example-container">
+            <div className="example-container-title">38. Edit Root Field Label</div>
+            <FieldsKeeperProvider
+                allItems={rootItems}
+                buckets={buckets}
+                onUpdate={(state) => {
+                    console.log(state);
+                }}
+                accentColor={'#117865'}
+                foldersMeta={{
+                    folder_1: {
+                        id: 'folder_1',
+                        label: 'Folder 1',
+                        prefixNodeIcon: 'folder-icon',
+                    },
+                    folder_2: {
+                        id: 'folder_2',
+                        label: 'Folder 2',
+                        prefixNodeIcon: 'folder-icon',
+                    },
+                }}
+            >
+                <div className="keeper-container">
+                    <div className="buckets-container">
+                        <FieldsKeeperBucket
+                            id="bucket1"
+                            label="Bucket 1"
+                            allowRemoveFields
+                        />
+                        <FieldsKeeperBucket
+                            id="bucket2"
+                            label="Bucket 2"
+                            allowRemoveFields
+                        />
+                        <FieldsKeeperBucket
+                            id="bucket3"
+                            label="Bucket 3"
+                            allowRemoveFields
+                        />
+                    </div>
+                    <div className="root-bucket-container">
+                        <FieldsKeeperRootBucket
+                            label="Root Bucket"
+                            collapseFoldersOnMount={false}
+                            prefixNode={{ allow: true, reserveSpace: true }}
+                            onFieldItemLabelChange={(
+                                fieldItemLabelClickProps: IRootBucketFieldItemLabelChangeProps,
+                            ) => {
+                                updateRootFieldLabel(fieldItemLabelClickProps);
+                            }}
+                        />
+                    </div>
+                </div>
+            </FieldsKeeperProvider>
+        </div>
+    );
+}

src/Examples/index.tsx

@@ -35,6 +35,7 @@ import Example34_Highlight_Between_Buckets from './Example34_Highlight_Between_B
 import Example35_Cross_Highlight_Across_Buckets from './Example35_Cross_Highlight_Across_Buckets';
 import Example36_bucketLabelSuffixRenderer from './Example36_bucketLabelSuffixRenderer';
 import Example37_bucket_move_suffix from './Example37_bucket_move_suffix';
+import Example38_root_bucket_label_editing from './Example38_root_bucket_label_editing';
 
 export const examples = {
     Example1_sample_use_case,
@@ -73,5 +74,6 @@ export const examples = {
     Example34_Highlight_Between_Buckets,
     Example35_Cross_Highlight_Across_Buckets,
     Example36_bucketLabelSuffixRenderer,
-    Example37_bucket_move_suffix
+    Example37_bucket_move_suffix,
+    Example38_root_bucket_label_editing
 };

src/FieldsKeeper/FieldsKeeper.types.ts

@@ -385,6 +385,11 @@ export interface IFieldsKeeperRootBucketProps {
         event: React.MouseEvent<HTMLDivElement, MouseEvent>,
     ) => void;
 
+    /** Callback triggered when a field item label is changed */
+    onFieldItemLabelChange?: (
+        fieldItemClickProps: IRootBucketFieldItemLabelChangeProps,
+    ) => void;
+
     /**
      * Callback fired when a field item is rigth clicked (context menu).
      *
@@ -661,6 +666,25 @@ export interface IFieldItemLabelChangeProps {
     fieldIndex?: number;
 }
 
+/**
+ * Properties for field item label change in root bucket (excludes bucketId)
+ */
+export interface IRootBucketFieldItemLabelChangeProps {
+    /** The clicked field item object */
+    fieldItem: IFieldsKeeperItem;
+
+    /** Previous value of the field item */
+    oldValue: string;
+
+    /** Updated value of the field item */
+    newValue: string;
+
+    /**
+     * Index of the field item to which the label is updated.
+     */
+    fieldIndex?: number;
+}
+
 /**
  * Custom renderer properties for suffix items within a bucket.
  */