@topconsultnpm/sdkui-react-beta 6.6.1 → 6.6.3

package/lib/components/base/TMListView.js

@@ -1,321 +1,284 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
-import { Colors, FontSize } from '../../utils/theme';
-import { getColor } from '../../helper/helpers';
-import { IconCloseCircle, IconDown, IconInsertAbove, IconInsertBelow, IconSearch, IconUp } from '../../helper';
-const StyledContainer = styled.div `
-    z-index: -1;
-    border: 1px solid;
-    border-color: ${props => getColor(props.$color)} ;
-    overflow: auto;
-    max-height: ${props => props.$maxHight};
-`;
-const StyledListViewWrapper = styled.div `
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    font-size: ${props => props.$fontSize} ;
-`;
-const StyledListItemContainer = styled.div `
-    display: flex;
-    width: 100%;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    padding: 5px;
-    background-color: ${props => !props.$isSelected ? props.$index % 2 === 0 ? 'white' : Colors.colore_sul_primary : Colors.secondary};
-    font-size: ${props => props.$fontSize};
-    color: ${props => !props.$isSelected ? Colors.primary : 'white'};
-    z-index: 1;
-`;
-const StyledLsitItemCheck = styled.input `
-    margin-right: 5px;
-    cursor: pointer;
-`;
-const StyledListItem = styled.li `
-    padding: 3px;
-    list-style: none;
-    text-decoration: none;
-    color: ${props => props.$color};
-`;
-const StyledListViewItemDetails = styled.div `
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    padding: 5px;
-    background-color: ${Colors.contenitore_su_colore_primary};
-    color: white;
-    width: 100%;
-`;
-const StyledDetailsToggleButton = styled.button `
-    border: none;
-    background-color: transparent;
-    cursor: pointer;
-    color: ${props => props.$isSelected ? 'white' : Colors.primary};
-`;
-const StyledListViewSearchContainer = styled.div `
-    position: sticky;
-    padding: 5px;
-    top: 0px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    padding-bottom: 5px;
-    border-bottom: 1px solid ${props => getColor(props.$color)};
-    background-color: ${props => getColor(props.$color)};
-    z-index: 100;
-`;
-const StyledSelectOptionCheckBox = styled.input `
-    margin-right: 5px;
-    margin-left: 2px;
-    cursor: pointer;
-    width: 20px;
-    height: 20px;
-`;
-const StyledListViewSearchInput = styled.input `
-    width: 100%;
-    padding: 3px 10px;
-    border-radius: 5px;
-    border-width: 1px ;
-    border-color: ${props => getColor(props.$color)};
-    border-style: solid;
-    color: ${props => getColor(props.$color)};
-    &::placeholder{
-        color: ${props => getColor(props.$color)};
-    }
-    &:focus{
-        outline: none;
-        background-color: #fbf5ca;      
-    }
-`;
-const StyledListViewSearchIcon = styled.button `
-    background-color: transparent;
-    border: none;
-    cursor: ${props => props.$isSearch ? 'pointer' : 'default'};
-    color: ${props => getColor(props.$color)};
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    &:focus{
-        outline: ${props => !props.$isSearch && 'none'};     
-    }
-`;
-const StyledListViewFooter = styled.div `
-    z-index: 100;
-    position: sticky;
-    bottom: 0px;
-    width: 100%;
-    padding: 5px;
-    background-color: ${props => getColor(props.$color)};
-    color: white;
-    font-size: 1rem;
-`;
-const StyledShowHideDetailsButton = styled.button `
-    background-color: transparent;
-    border: none;
-    margin-right: 10px;
-    /* color: ${props => getColor(props.$color)}; */
-    color: white;
-    cursor: pointer;
-    transform: translateY(1.5px);
-`;
-const TMListView = ({ maxHeight = '100%', selectedValues = [], color = 'primary', footer = false, header = false, customItemDetails, customListViewItem, hasItemDetails = false, detailsFields, dataSource, displayField, searchable, elementStyle, selectedListItems, multipleSelect = false, fontSize = FontSize.defaultFontSize }) => {
-    const [focusedItem, setFocusedItem] = useState(undefined);
-    const [selectedItems, setSelectedItems] = useState([]);
-    const [detailRequestItems, setDetailRequestItems] = useState([]);
-    const [currentDetailsFields, setCurrentDetailsField] = useState(detailsFields);
+import { ObjectClasses } from '@topconsultnpm/sdk-ts-beta';
+import TMContextMenu, { useTMContextMenu } from './TMContextMenu';
+import { IconApply, IconCloseCircle, IconColumns, IconDown, IconHide, IconShow, IconUp, IconVisible } from '../../helper/TMIcons';
+import { TMSearchBar } from '../sidebar/TMHeader';
+import TMTooltip from './TMTooltip';
+const StyledListItem = styled.div ` width: 100%; height: max-content; border-bottom: 1px solid #e5e5e5; background-color: ${props => props.$isSelected ? props.$color ? `${props.$color}99` : '#00000030' : 'transparent'} ; color: ${props => props.$isSelected ? props.$color ? 'white' : '#000000' : '#000000'} ; &:hover{ background-color: ${props => props.$color ? props.$isSelected ? `${props.$color}99` : `${props.$color}40` : props.$isSelected ? '#00000030' : '#00000010'};} `;
+const StyledListViewContainer = styled.div ` position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; height: 100%; `;
+const StyledSearchContainer = styled.div ` width: 100%; height: max-content; padding: 5px; border-bottom: 1px solid #e5e5e5; display: flex; align-items: center; gap: 10px; `;
+const StyledListViewFooter = styled.div ` background-color: ${props => props.$bgColor}; width: 100%; height: 25px; padding: 5px 15px; border-top: 1px solid #e5e5e5; display: flex; align-items: center; gap: 10px; `;
+const TMListView = ({ grouping = '', orderBy, id, onScrollChange, scroll, searchKeys = [], searchable = false, itemTemplate, customColor, dataSource = [], exprKey = 'id', onSelectionChanged, onItemClick, onItemDblClick, selectedItem }) => {
+    const listRef = useRef(null);
+    const contRef = useRef(null);
+    const orderRef = useRef(null);
+    const [showId, setShowId] = useState(false);
+    const [showSearch, setShowSearch] = useState(searchable);
     const [searchValue, setSearchValue] = useState('');
-    const [currentDataSource, setCurrentDataSource] = useState([]);
-    const [usedFields, setUsedFields] = useState([]);
-    useEffect(() => {
-        if (!selectedValues.fieldName) {
-            setSelectedItems(selectedValues);
-        }
-        else {
-            let data = [];
-            for (let value of selectedValues.fieldValues) {
-                for (let d of currentDataSource) {
-                    if (value === d[selectedValues.fieldName]) {
-                        data.push(d);
-                    }
-                }
+    const [currentDataSource, setCurrentDataSource] = useState(dataSource);
+    const [keys, setKeys] = useState(searchKeys);
+    const [orderedBy, setOrderedBy] = useState(orderBy || '');
+    const [orderDir, setOrderDir] = useState(true);
+    const [isFocused, setIsFocused] = useState(false);
+    const [showOrderMenu, setShowOrderMenu] = useState(false);
+    const [showOrderOptions, setShowOrderOptions] = useState(false);
+    useEffect(() => { setCurrentDataSource(dataSource); }, [dataSource]);
+    const openContextMenu = (e) => { setIsFocused(true); };
+    let [coords, show] = useTMContextMenu(contRef);
+    useEffect(() => { if (orderBy) {
+        setOrderedBy(orderBy);
+    } }, [orderBy]);
+    // is list item selected
+    const isSelected = (item) => {
+        if (selectedItem) {
+            if (item[exprKey] === selectedItem[exprKey]) {
+                return true;
             }
-            setSelectedItems(data);
+            else
+                return false;
         }
-    }, [currentDataSource]);
-    useEffect(() => { selectedListItems && selectedListItems(selectedItems); }, [selectedItems]);
-    useEffect(() => {
-        const selectByKey = (e) => { if (e.code === 'Space' && focusedItem) {
-            onListItemClick();
-        } };
-        window.addEventListener('keyup', selectByKey);
-        return () => window.removeEventListener('keyup', selectByKey);
-    }, [focusedItem, selectedItems]);
-    useEffect(() => {
-        let arr = [];
-        if (customListViewItem) {
-            for (let key of Object.keys(customListViewItem.props)) {
-                arr.push(customListViewItem.props[key]);
-            }
-        }
-        else {
-            arr.push(displayField);
-        }
-        if (customItemDetails) {
-            for (let key of Object.keys(customItemDetails.props)) {
-                arr.push(customItemDetails.props[key]);
-            }
-        }
-        else if (currentDetailsFields) {
-            for (let field of currentDetailsFields) {
-                arr.push(field);
-            }
-        }
-        setUsedFields(arr);
-    }, [customItemDetails, customListViewItem, displayField, detailsFields]);
-    useEffect(() => {
-        if (hasItemDetails) {
-            let keys = Object.keys(dataSource[0]);
-            if (!displayField) {
-                let detailsKeys = keys.filter(key => key !== displayField);
-                if (!detailsFields) {
-                    setCurrentDetailsField(detailsKeys);
-                }
-                else {
-                    setCurrentDetailsField(detailsFields);
-                }
+        else
+            return false;
+    };
+    // order by key
+    const orderByKey = (array) => {
+        let arr = [...array];
+        if (arr.length > 0 && arr[0][orderedBy]) {
+            if (typeof arr[0][orderedBy] === 'string') {
+                arr.sort((a, b) => { if (a[orderedBy].toLowerCase() < b[orderedBy].toLowerCase()) {
+                    return -1;
+                } if (a[orderedBy].toLowerCase() > b[orderedBy].toLowerCase()) {
+                    return 1;
+                } return 0; });
             }
             else {
-                if (!detailsFields) {
-                    setCurrentDetailsField(keys);
-                }
-                else {
-                    setCurrentDetailsField(detailsFields);
-                }
+                arr.sort((a, b) => { if (a[orderedBy] < b[orderedBy]) {
+                    return -1;
+                } if (a[orderedBy] > b[orderedBy]) {
+                    return 1;
+                } return 0; });
             }
         }
-    }, [hasItemDetails, detailsFields, displayField]);
+        return orderDir ? arr : arr.reverse();
+    };
+    // search keys
     useEffect(() => {
-        if (searchable) {
-            if (searchValue.length > 0) {
-                filter(dataSource, searchValue);
+        if (currentDataSource && currentDataSource.length > 0) {
+            if (searchKeys.length === 0) {
+                setKeys(Object.keys(currentDataSource[0]));
             }
             else {
-                setCurrentDataSource(dataSource);
+                setKeys(searchKeys);
             }
         }
-        else {
-            setCurrentDataSource(dataSource);
-        }
-    }, [dataSource, searchValue, searchable]);
-    const showHideDetails = () => {
-        if (detailRequestItems.length > 0) {
-            setDetailRequestItems([]);
-        }
-        else {
-            setDetailRequestItems(currentDataSource);
-        }
-    };
-    const filter = (dataSource, value) => {
+    }, []);
+    // search logic
+    useEffect(() => {
         let arr = [];
-        for (let data of dataSource) {
-            if (typeof data === 'string') {
-                setCurrentDataSource(dataSource.filter(item => item.toString().toLowerCase().includes(value.toLowerCase())));
-            }
-            else {
-                for (let key of usedFields) {
-                    if (data[key].toString().toLowerCase().includes(value.toLowerCase())) {
-                        if (!arr.includes(data)) {
-                            arr.push(data);
+        if (searchValue.length > 0) {
+            for (let data of dataSource) {
+                for (let key of keys) {
+                    if (typeof data[key] === 'string' || typeof data[key] === 'number') {
+                        if (data[key].toString().toLowerCase().includes(searchValue.toLowerCase())) {
+                            if (!arr.includes(data)) {
+                                arr.push(data);
+                            }
                         }
                     }
                 }
-                ;
+            }
+            if (orderedBy.length === 0) {
                 setCurrentDataSource(arr);
             }
+            else {
+                setCurrentDataSource(orderByKey(arr));
+            }
         }
-    };
-    const onListItemClick = () => {
-        if (multipleSelect) {
-            if (!hasItem(selectedItems, focusedItem)) {
-                setSelectedItems(prev => [...prev, focusedItem]);
+        else {
+            if (orderedBy.length === 0) {
+                setCurrentDataSource(dataSource);
             }
             else {
-                (setSelectedItems(selectedItems.filter(item => JSON.stringify(item) !== JSON.stringify(focusedItem))));
+                setCurrentDataSource(orderByKey(dataSource));
             }
         }
-        else {
-            setSelectedItems([]);
-            setSelectedItems(prev => [...prev, focusedItem]);
+    }, [searchValue, keys, orderedBy, dataSource]);
+    useEffect(() => { if (!showSearch) {
+        setSearchValue('');
+    } }, [showSearch]);
+    // order logic
+    useEffect(() => { if (orderedBy.length > 0) {
+        setCurrentDataSource(orderByKey(currentDataSource));
+    } }, [orderedBy, orderDir]);
+    // change items by arrow keys logic
+    useEffect(() => {
+        let selectedItemIndex = currentDataSource.indexOf(selectedItem);
+        const canNext = selectedItem !== currentDataSource[currentDataSource.length - 1];
+        const canPrev = selectedItem !== currentDataSource[0];
+        let cont = listRef.current;
+        let next = currentDataSource.indexOf(selectedItem) + 1;
+        let before = currentDataSource.indexOf(selectedItem) - 1;
+        const changeIndex = (e) => {
+            if (isFocused) {
+                if (e.key === 'ArrowDown') {
+                    e.preventDefault();
+                    if (canNext) {
+                        onSelectionChanged && onSelectionChanged(currentDataSource[selectedItemIndex + 1]);
+                        if (selectedItem && cont) {
+                            let diff = cont.scrollTop;
+                            let xNext = cont.children.item(next);
+                            if (xNext) {
+                                if (xNext.getBoundingClientRect().bottom > (cont.getBoundingClientRect().height + cont.getBoundingClientRect().top)) {
+                                    diff += xNext.getBoundingClientRect().bottom - (cont.getBoundingClientRect().height + cont.getBoundingClientRect().top);
+                                }
+                            }
+                            cont.scrollTo(0, diff);
+                        }
+                    }
+                }
+                if (e.key === 'ArrowUp') {
+                    e.preventDefault();
+                    if (canPrev) {
+                        onSelectionChanged && onSelectionChanged(currentDataSource[selectedItemIndex - 1]);
+                        if (selectedItem && cont) {
+                            let diff = cont.scrollTop;
+                            let xBefore = cont.children.item(before);
+                            if (xBefore) {
+                                if (xBefore.getBoundingClientRect().top < (cont.getBoundingClientRect().top)) {
+                                    diff -= cont.getBoundingClientRect().top - xBefore.getBoundingClientRect().top;
+                                }
+                            }
+                            cont.scrollTo(0, diff);
+                        }
+                    }
+                }
+                if (e.key === 'ArrowLeft') {
+                    e.preventDefault();
+                    if (cont) {
+                        cont.scrollBy(-20, 0);
+                    }
+                }
+                if (e.key === 'ArrowRight') {
+                    e.preventDefault();
+                    if (cont) {
+                        cont.scrollBy(20, 0);
+                    }
+                }
+            }
+        };
+        if (selectedItem) {
+            document.addEventListener('keydown', changeIndex);
         }
-    };
-    const onCheckClick = () => { if (hasItem(selectedItems, focusedItem)) {
-        setSelectedItems(selectedItems.filter(item => JSON.stringify(item) !== JSON.stringify(focusedItem)));
-    } };
-    const detailsToggle = (e) => {
-        if (detailRequestItems.includes(focusedItem)) {
-            setDetailRequestItems(detailRequestItems.filter(item => item !== focusedItem));
+        return () => { document?.removeEventListener('keydown', changeIndex); };
+    }, [selectedItem, isFocused]);
+    // deselect an onBlur listview logic
+    useEffect(() => {
+        const list = listRef.current;
+        const deSelectAll = (e) => { if (list && !list.contains(e.target)) {
+            setIsFocused(false);
+        } };
+        window.addEventListener('click', deSelectAll);
+        window.addEventListener('contextmenu', deSelectAll);
+        return () => { window.removeEventListener('click', deSelectAll); window.removeEventListener('contextmenu', deSelectAll); };
+    }, []);
+    // scroll logic
+    useEffect(() => {
+        let cont = listRef.current;
+        if (cont && scroll) {
+            cont.addEventListener('scroll', () => onScrollChange && onScrollChange({ x: cont?.scrollLeft, y: cont?.scrollTop }));
         }
-        else {
-            setDetailRequestItems(prev => [...prev, focusedItem]);
+        return () => cont?.removeEventListener('scroll', () => onScrollChange && onScrollChange({ x: cont?.scrollLeft, y: cont?.scrollTop }));
+    }, [listRef.current]);
+    useEffect(() => { let cont = listRef.current; if (cont && scroll) {
+        cont.scrollTo(scroll.x, scroll.y);
+    } ; }, [scroll, listRef.current]);
+    //order options
+    const orderMenuItems = () => {
+        let arr = [];
+        if (searchKeys.length > 0) {
+            for (let key of searchKeys) {
+                arr.push({
+                    disabled: !showId && key === exprKey,
+                    isSelected: key === orderedBy,
+                    onItemClick: () => { setOrderedBy(key); setShowOrderOptions(false); },
+                    icon: _jsx(IconColumns, { fontSize: 16 }),
+                    text: _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 10 }, children: [key, " ", key === orderedBy && _jsx(IconApply, { fontSize: 14, color: 'gray' })] })
+                });
+            }
         }
+        return arr;
     };
-    const obj = (data, type) => {
-        let object = {};
-        switch (type) {
-            case 'item':
-                for (let key of Object.keys(customListViewItem?.props)) {
-                    object[key] = data[customListViewItem?.props[key]];
-                }
-                break;
-            case 'details':
-                for (let key of Object.keys(customItemDetails?.props)) {
-                    object[key] = data[customItemDetails?.props[key]];
+    // grouping loginc
+    const groupKeys = Object.keys(groupByKey(currentDataSource, grouping));
+    const [openList, setOpenList] = useState([true, false, false]);
+    function groupByKey(array, key) {
+        return array
+            .reduce((hash, obj) => {
+            if (obj[key] === undefined)
+                return hash;
+            return Object.assign(hash, { [obj[key]]: (hash[obj[key]] || []).concat(obj) });
+        }, {});
+    }
+    // map memo
+    const memoList = useMemo(() => currentDataSource.map((data, index) => {
+        return (_jsx(StyledListItem, { "$isSelected": isSelected(data), "$color": customColor, onClick: () => { onSelectionChanged && onSelectionChanged(data); onItemClick && onItemClick(data); }, onDoubleClick: () => onItemDblClick && onItemDblClick(data), children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start', gap: 5, padding: '5px 5px' }, children: [showId && _jsxs("p", { style: { color: isSelected(data) ? 'white' : 'black', backgroundColor: `${customColor}20`, width: '100%', padding: '2px 5px', borderRadius: '5px', height: 'max-content', textAlign: 'left' }, children: [" ", exprKey + ' : ' + data[exprKey], " "] }), _jsxs("div", { style: { width: '100%', height: '100%' }, children: [" ", itemTemplate ? itemTemplate(data) : _jsx("div", {})] })] }) }, index));
+    }), [currentDataSource, selectedItem, showId, customColor]);
+    const groupedMemoList = useMemo(() => groupKeys.map((key, index) => {
+        const groupingText = () => {
+            if (grouping === 'objectClass') {
+                if (key === ObjectClasses.Dossier) {
+                    return 'Pratiche';
                 }
-                break;
-        }
-        return object;
-    };
-    const hasItem = (arr, el) => {
-        let bool = false;
-        for (let item of arr) {
-            if (typeof item === 'string') {
-                if (item === el) {
-                    bool = true;
-                    break;
+                else if (key === ObjectClasses.WorkingGroup) {
+                    return 'Gruppi di lavoro';
                 }
-                else {
-                    bool = false;
+                else if (key === ObjectClasses.SavedQuery) {
+                    return 'Ricerche rapide';
                 }
+                else
+                    return '';
             }
             else {
-                if (JSON.stringify(item) == JSON.stringify(el)) {
-                    bool = true;
-                    break;
-                }
-                else {
-                    bool = false;
-                }
+                return key;
+            }
+        };
+        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', width: '100%', height: 'max-content' }, children: [_jsx("div", { style: { borderBottom: `1px solid ${customColor}20`, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '5px', width: '100%', backgroundColor: `${customColor}30` }, children: _jsxs("div", { style: { width: '100%', height: 'max-content', display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 10 }, children: [_jsx("p", { children: groupingText() }), _jsx("div", { style: { width: '16px', height: '16px', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: customColor, color: 'white', boxShadow: '1px 1px 2px #00000020', borderRadius: '30px', fontWeight: 'bold' }, children: groupByKey(currentDataSource, grouping)[key].length })] }), _jsxs("div", { style: { cursor: 'pointer' }, onClick: () => { let arr = [...openList]; arr[index] = !arr[index]; setOpenList(arr); }, children: [" ", openList[index] ? _jsx(IconUp, { fontSize: 12 }) : _jsx(IconDown, { fontSize: 12 }), " "] })] }) }), openList[index] && _jsx("div", { style: { width: '100%', height: '100%' }, children: groupByKey(currentDataSource, grouping)[key].map((data, index2) => (_jsx(StyledListItem, { "$isSelected": data === selectedItem, "$color": customColor, onClick: () => { onSelectionChanged && onSelectionChanged(data); onItemClick && onItemClick(data); }, onDoubleClick: () => { onItemDblClick && onItemDblClick(data); }, children: _jsxs("div", { style: { width: '100%', height: 'max-content', display: 'flex', flexDirection: 'column', padding: '5px 5px' }, children: [showId && _jsxs("p", { style: { color: data === selectedItem ? 'white' : 'black', backgroundColor: `${customColor}20`, width: '100%', padding: '2px 5px', borderRadius: '5px', height: 'max-content', textAlign: 'left' }, children: [" ", 'ID: ' + data.id, " "] }), _jsxs("div", { style: { width: '100%', height: '100%' }, children: [" ", itemTemplate ? itemTemplate(data) : _jsx("div", {})] })] }) }, index2))) })] }, index));
+    }), [currentDataSource, selectedItem, showId, customColor, openList, grouping]);
+    // List height
+    const listHeight = () => {
+        if (showSearch) {
+            if (showOrderMenu || searchValue.length > 0) {
+                return 'calc(100% - 55px)';
+            }
+            else {
+                return 'calc(100% - 30px)';
             }
         }
-        return bool;
-    };
-    const selectDeselectAll = () => { if (selectedItems.length > 0) {
-        setSelectedItems([]);
-    }
-    else {
-        setSelectedItems(currentDataSource);
-    } };
-    const renderedList = () => {
-        return (currentDataSource?.map((d, index) => (_jsxs(StyledListViewWrapper, { "$fontSize": fontSize, children: [_jsxs(StyledListItemContainer, { "$isFocused": focusedItem === d, "$isSelected": hasItem(selectedItems, d), "$fontSize": fontSize, tabIndex: 0, "$index": index, onFocus: () => setFocusedItem(d), children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', width: '100%' }, onClick: onListItemClick, children: [multipleSelect && _jsx(StyledLsitItemCheck, { checked: hasItem(selectedItems, d), onChange: onCheckClick, tabIndex: -1, type: "checkbox" }), !customListViewItem ? _jsx(StyledListItem, { "$color": color, children: displayField ? d[displayField] : d }) : React.cloneElement(customListViewItem, obj(d, 'item'))] }), hasItemDetails && _jsx(StyledDetailsToggleButton, { "$isSelected": hasItem(selectedItems, d), onClick: (e) => detailsToggle(e), children: detailRequestItems.includes(d) ? _jsx(IconUp, {}) : _jsx(IconDown, {}) })] }), detailRequestItems.includes(d) && _jsxs(StyledListViewItemDetails, { children: [" ", !customItemDetails ? currentDetailsFields.map((detail, index) => (_jsxs("div", { children: [detail, ": ", d[detail]] }, index))) : React.cloneElement(customItemDetails, obj(d, 'details')), " "] })] }, index))));
-    };
-    const renderedHeader = () => {
-        return (_jsxs(StyledListViewSearchContainer, { "$color": color, children: [multipleSelect && _jsx(StyledSelectOptionCheckBox, { "$color": color, "$fontsize": fontSize, type: 'checkbox', checked: selectedItems.length > 0, onChange: selectDeselectAll }), hasItemDetails && _jsx(StyledShowHideDetailsButton, { "$color": color, onClick: showHideDetails, children: detailRequestItems.length > 0 ? _jsx(IconInsertBelow, {}) : _jsx(IconInsertAbove, {}) }), searchable && _jsx(StyledListViewSearchInput, { "$color": color, value: searchValue, onChange: (e) => setSearchValue(e.target.value), placeholder: 'search' }), searchable && _jsx(StyledListViewSearchIcon, { onClick: () => searchValue.length > 0 && setSearchValue(''), "$isSearch": searchValue.length > 0, "$color": color, children: searchValue.length > 0 ? _jsx(IconCloseCircle, {}) : _jsx(IconSearch, {}) })] }));
+        else if (showOrderMenu || searchValue.length > 0) {
+            return 'calc(100% - 25px)';
+        }
+        else
+            return '100%';
     };
-    return (_jsx("div", { style: elementStyle, children: _jsxs(StyledContainer, { "$maxHight": maxHeight, "$color": color, children: [" ", (searchable || multipleSelect) && renderedHeader(), " ", _jsx("ul", { children: renderedList() }), " ", multipleSelect && footer && _jsxs(StyledListViewFooter, { "$color": color, children: ["Selected items: ", selectedItems.length, " | Visible items: ", currentDataSource.length] })] }) }));
+    return (_jsxs(StyledListViewContainer, { ref: contRef, onContextMenu: openContextMenu, children: [show &&
+                _jsx(TMContextMenu, { coords: coords, items: grouping.length === 0 ?
+                        [
+                            { icon: showSearch ? _jsx(IconHide, { fontSize: 16 }) : _jsx(IconShow, { fontSize: 16 }), onItemClick: () => { setShowSearch(!showSearch); }, text: showSearch ? 'Nascondi ricerca' : 'Mostra ricerca' },
+                            { icon: showId ? _jsx(IconHide, { fontSize: 16 }) : _jsx(IconShow, { fontSize: 16 }), onItemClick: () => { setShowId(!showId); }, text: showId ? 'Nascondi ' + exprKey : 'Mostra ' + exprKey },
+                            { icon: showOrderMenu ? _jsx(IconHide, { fontSize: 16 }) : _jsx(IconShow, { fontSize: 16 }), disabled: searchKeys.length === 0, onItemClick: () => { setShowOrderMenu(!showOrderMenu); }, text: showOrderMenu ? 'Nascondi menu di ordinamento' : 'Mostra menu di ordinamento' },
+                        ] :
+                        [
+                            { icon: showSearch ? _jsx(IconHide, { fontSize: 16 }) : _jsx(IconShow, { fontSize: 16 }), onItemClick: () => { setShowSearch(!showSearch); }, text: showSearch ? 'Nascondi ricerca' : 'Mostra ricerca' },
+                            { icon: showId ? _jsx(IconHide, { fontSize: 16 }) : _jsx(IconShow, { fontSize: 16 }), onItemClick: () => { setShowId(!showId); }, text: showId ? 'Nascondi ' + exprKey : 'Mostra ' + exprKey },
+                        ] }), showOrderOptions &&
+                _jsx(TMContextMenu, { items: orderMenuItems(), coords: { x: orderRef.current?.getBoundingClientRect().left, y: orderRef.current?.getBoundingClientRect().top - (searchKeys.length * 30) - 10 } }), showSearch &&
+                _jsx(StyledSearchContainer, { children: _jsxs(StyledSearchContainer, { children: [_jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '300px', searchValue: searchValue, onSearchValueChanged: (e) => setSearchValue(e) }), _jsx(TMTooltip, { content: 'Nascondi ricerca', children: _jsx(IconCloseCircle, { style: { cursor: 'pointer' }, color: 'red', fontSize: 14, onClick: () => { setSearchValue(''); setShowSearch(false); } }) })] }) }), _jsx("div", { ref: listRef, onClick: () => setIsFocused(true), style: { width: '100%', overflow: 'auto', height: listHeight() }, children: currentDataSource.length > 0 ?
+                    grouping.length === 0 ? memoList : groupedMemoList :
+                    searchValue.length > 0 ? _jsx("div", { style: { width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "No data found" }) :
+                        _jsx("div", { style: { width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "No data" }) }), (searchValue.length > 0 || showOrderMenu) &&
+                _jsxs(StyledListViewFooter, { "$bgColor": `${customColor}20`, children: [showOrderMenu &&
+                            _jsxs("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: 5 }, children: [_jsx("div", { style: { width: 'max-content' }, children: "Ordinato per" }), _jsx("div", { ref: orderRef, onClick: () => { setShowOrderOptions(!showOrderOptions); }, style: { cursor: 'pointer', fontWeight: 'bold' }, children: orderedBy.length > 0 ? orderedBy : 'Nulla' }), orderedBy.length > 0 && _jsxs(TMTooltip, { content: orderDir ? 'ASC' : 'DESC', children: [" ", orderDir ? _jsx(IconUp, { style: { cursor: 'pointer' }, onClick: () => setOrderDir(false), fontSize: 14 }) : _jsx(IconDown, { style: { cursor: 'pointer' }, onClick: () => setOrderDir(true), fontSize: 14 }), " "] }), _jsx(TMTooltip, { content: 'Annulla ordinamento', children: _jsx(IconCloseCircle, { style: { cursor: 'pointer' }, color: 'red', fontSize: 14, onClick: () => { setOrderedBy(''); setShowOrderMenu(false); setShowOrderOptions(false); } }) })] }), searchValue.length > 0 && _jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'flex-end', gap: 5 }, children: [_jsx(TMTooltip, { content: 'Visibili', children: _jsx(IconVisible, { fontSize: 14 }) }), currentDataSource.length] })] })] }));
 };
 export default TMListView;

package/lib/components/base/TMListViewOLD.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ITMEditorBase, Colors as C } from './TMEditorBase';
+type SelectedValueType = {
+    fieldName: string;
+    fieldValues: any[];
+};
+interface ITMListView extends ITMEditorBase {
+    dataSource?: any[];
+    multipleSelect?: boolean;
+    searchable?: boolean;
+    header?: boolean;
+    footer?: boolean;
+    selectedListItems?: (e: any[]) => void;
+    displayField?: string;
+    customListViewItem?: JSX.Element;
+    customItemDetails?: JSX.Element;
+    hasItemDetails?: boolean;
+    detailsFields?: string[];
+    color?: C;
+    selectedValues?: any[] | SelectedValueType;
+    maxHeight?: string;
+}
+declare const TMListViewOLD: React.FC<ITMListView>;
+export default TMListViewOLD;