import React, { useEffect } from 'react';
import './App.css';
import { ContextualMenu, DetailsList, DirectionalHint, IColumn, IContextualMenuItem } from '@fluentui/react';
interface IFruit {
[key:string]: string;
name: string;
color: string;
}
export const App: React.FunctionComponent = () => {
const [menuDomTarget, setMenuDomTarget] = React.useState<HTMLElement | undefined>(undefined);
const [menuItems, setMenuItems] = React.useState<IContextualMenuItem[]>([]);
const [clickedColumn, setClickedColumn] = React.useState<IColumn | undefined>(undefined);
const [listItems, setListItems] = React.useState<IFruit[]>([
{ name: "Strawberry", color: "Red" },
{ name: "Pear", color: "Green" },
{ name: "Apple", color: "Red" },
{ name: "Banana", color: "Yellow" },
{ name: "Grapes", color: "Green" },
{ name: "Pineapple", color: "Yellow" },
{ name: "Watermelon", color: "Green" },
]);
const onColumnClick = (ev?: React.MouseEvent<HTMLElement>, column?: IColumn): void => {
setMenuDomTarget(ev?.currentTarget);
setClickedColumn(column);
};
const [columns, setColumns] = React.useState<IColumn[]>([
{ key: 'name', name: "Name", fieldName: 'name', minWidth: 100, isRowHeader: true },
{ key: 'color', name: "Color", fieldName: 'color', minWidth: 100, }
]);
const sortItems = (columnKey: string, sortDescending: boolean): void => {
// Update columns to show sort order icon
const newColumns: IColumn[] = columns.slice();
const currColumn: IColumn = newColumns.filter(currCol => columnKey === currCol.key)[0];
newColumns.forEach((newCol: IColumn) => {
if (newCol === currColumn) {
currColumn.isSortedDescending = sortDescending;
currColumn.isSorted = true;
} else {
newCol.isSorted = false;
newCol.isSortedDescending = true;
}
});
setColumns(newColumns);
// Sort the items accordingly
const newItems = [...listItems];
newItems.sort((a: IFruit, b: IFruit) => {
if(sortDescending)
return b[columnKey].localeCompare(a[columnKey])
else
return a[columnKey].localeCompare(b[columnKey])
});
setListItems(newItems);
};
useEffect(() => {
if(clickedColumn) {
// Dynamically generate the menu items based on the clicked column.
const items: IContextualMenuItem[] = [
{
key: "sortAsc",
text: "A to Z",
iconProps: { iconName: "Ascending"},
onClick: () => {sortItems(clickedColumn.key, false)},
},
{
key: "sortDesc",
text: "Z to A",
iconProps: { iconName: "Descending"},
onClick: () => {sortItems(clickedColumn.key, true)},
}
];
setMenuItems(items);
}
}, [clickedColumn, sortItems]);
return (
<div className="container">
<DetailsList
items={listItems}
columns={columns}
isHeaderVisible={true}
onColumnHeaderClick={onColumnClick}
className="details-list"
/>
{menuDomTarget !== undefined &&
<ContextualMenu
items={menuItems}
hidden={menuDomTarget === undefined}
target={menuDomTarget}
onItemClick={() => setMenuDomTarget(undefined)}
onDismiss={() => setMenuDomTarget(undefined)}
directionalHint={DirectionalHint.bottomLeftEdge}
/>
}
</div>
);
};
