@megha-ui/react 1.2.217 → 1.2.219
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.
|
@@ -7,6 +7,7 @@ interface DropdownOption {
|
|
|
7
7
|
isDelete?: boolean;
|
|
8
8
|
isAdd?: boolean;
|
|
9
9
|
onDelete?: () => void;
|
|
10
|
+
group?: string;
|
|
10
11
|
}
|
|
11
12
|
interface DropdownProps {
|
|
12
13
|
options: DropdownOption[];
|
|
@@ -55,6 +56,7 @@ interface DropdownProps {
|
|
|
55
56
|
withTooltip?: boolean;
|
|
56
57
|
isCreatable?: boolean;
|
|
57
58
|
onCreate?: (value: string) => void;
|
|
59
|
+
isGrouping?: boolean;
|
|
58
60
|
}
|
|
59
61
|
declare const Dropdown: React.FC<DropdownProps>;
|
|
60
62
|
export default Dropdown;
|
|
@@ -7,12 +7,13 @@ import Block from "../block";
|
|
|
7
7
|
import Text from "../text";
|
|
8
8
|
import Button from "../button";
|
|
9
9
|
import { HiChevronDown } from "react-icons/hi";
|
|
10
|
-
const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select...", isMultiple = false, isSelectAll = false, className, style, labelFontSize, labelFontWeight, labelMarginBottom, asteriskColor, label, disabled = false, width, searchEnabled = true, dropdownListWidth, marginBottom, marginTop, marginRight, marginLeft, required, dropdownListBG, searchBorderColor = "#2377ba", maxDropdownHeight = "12rem", border = "1px solid #dbdfe9", selectedCharLength = 0, menuFrom = "left", Tooltip, DropDownIcon, onMenuClose, isClear, ClearIcon, clearId, selectedDisplay, checkboxWrapper, isSort = true, onSelectChange, isLoading = false, onApplyChange, withTooltip = false, isCreatable = false, onCreate = () => { }, autoPosition = false, compactDisplay = false, ultraCompactDisplay = false, }) => {
|
|
10
|
+
const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select...", isMultiple = false, isSelectAll = false, className, style, labelFontSize, labelFontWeight, labelMarginBottom, asteriskColor, label, disabled = false, width, searchEnabled = true, dropdownListWidth, marginBottom, marginTop, marginRight, marginLeft, required, dropdownListBG, searchBorderColor = "#2377ba", maxDropdownHeight = "12rem", border = "1px solid #dbdfe9", selectedCharLength = 0, menuFrom = "left", Tooltip, DropDownIcon, onMenuClose, isClear, ClearIcon, clearId, selectedDisplay, checkboxWrapper, isSort = true, onSelectChange, isLoading = false, onApplyChange, withTooltip = false, isCreatable = false, onCreate = () => { }, autoPosition = false, compactDisplay = false, ultraCompactDisplay = false, isGrouping = false, }) => {
|
|
11
11
|
var _a, _b;
|
|
12
12
|
const { density } = useDensity();
|
|
13
13
|
const [isOpen, setIsOpen] = useState(false);
|
|
14
14
|
const [searchTerm, setSearchTerm] = useState("");
|
|
15
15
|
const [filteredOptions, setFilteredOptions] = useState(options);
|
|
16
|
+
const [groupedOptions, setGroupedOptions] = useState([]);
|
|
16
17
|
const wrapperRef = useRef(null);
|
|
17
18
|
const clearIconRef = useRef(null);
|
|
18
19
|
const searchInputRef = useRef(null);
|
|
@@ -145,8 +146,27 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
|
|
|
145
146
|
.sort((a, b) => (a.label > b.label ? 1 : -1))
|
|
146
147
|
.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()))
|
|
147
148
|
: options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
|
|
148
|
-
|
|
149
|
-
|
|
149
|
+
const grouped = [];
|
|
150
|
+
if (isGrouping) {
|
|
151
|
+
const groups = options.map((opt) => opt.group);
|
|
152
|
+
if (groups.length > 0) {
|
|
153
|
+
groups.forEach((group) => {
|
|
154
|
+
if (group) {
|
|
155
|
+
const filteredOptions = options.filter((item) => item.group === group);
|
|
156
|
+
grouped.push({ groupedValue: group, options: filteredOptions });
|
|
157
|
+
}
|
|
158
|
+
});
|
|
159
|
+
}
|
|
160
|
+
else {
|
|
161
|
+
grouped.push({
|
|
162
|
+
groupedValue: "",
|
|
163
|
+
options: [..._options],
|
|
164
|
+
});
|
|
165
|
+
}
|
|
166
|
+
setGroupedOptions(grouped);
|
|
167
|
+
}
|
|
168
|
+
setFilteredOptions(options);
|
|
169
|
+
}, [searchTerm, options, isSort, isGrouping]);
|
|
150
170
|
const handleSelect = (value, isDisabled) => {
|
|
151
171
|
if (isDisabled)
|
|
152
172
|
return;
|
|
@@ -314,7 +334,10 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
|
|
|
314
334
|
: placeholder }), _jsxs("div", { style: {
|
|
315
335
|
display: "flex",
|
|
316
336
|
alignItems: "center",
|
|
317
|
-
}, children: [isClear && (displayValue || selectedDisplay) && (_jsx("div", { style: { marginRight: "0.5rem" }, onClick: handleClear, id: clearId, title: "Click to clear the value", children: ClearIcon ? (ClearIcon) : (_jsx("span", { style: {
|
|
337
|
+
}, children: [isClear && (displayValue || selectedDisplay) && (_jsx("div", { style: { marginRight: "0.5rem" }, onClick: handleClear, id: clearId, title: "Click to clear the value", children: ClearIcon ? (ClearIcon) : (_jsx("span", { style: {
|
|
338
|
+
color: "var(--form-border-color, #dbdfe9)",
|
|
339
|
+
fontSize: "1rem",
|
|
340
|
+
}, children: "X" })) })), disabled ? (Tooltip && Tooltip) : DropDownIcon ? (DropDownIcon) : (_jsx(HiChevronDown, { fontSize: "1rem" })), withTooltip && Tooltip && Tooltip] })] }), _jsxs("ul", { style: Object.assign(Object.assign({ width: dropdownListWidth || "100%", position: "absolute", backgroundColor: dropdownListBG || "var(--dropdown-bg)", boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", border: "1px solid var(--divider, #f5f5f5)", zIndex: 10, marginTop: 4, borderRadius: 4, overflow: "hidden" }, clickStyle), { display: !isOpen ? "none" : "" }), children: [searchEnabled && (_jsx("li", { style: { padding: "0.5rem" }, children: _jsx("input", { ref: searchInputRef, type: "text", placeholder: "Search...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), disabled: disabled, style: {
|
|
318
341
|
width: "100%",
|
|
319
342
|
padding: "0.5rem",
|
|
320
343
|
boxSizing: "border-box",
|
|
@@ -337,7 +360,26 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
|
|
|
337
360
|
display: "flex",
|
|
338
361
|
alignItems: "start",
|
|
339
362
|
width: "100%",
|
|
340
|
-
}, children: _jsxs("span", { style: { marginLeft: "0.5rem" }, children: ["+ Create ", searchTerm] }) })] }, String(searchTerm))) : (
|
|
363
|
+
}, children: _jsxs("span", { style: { marginLeft: "0.5rem" }, children: ["+ Create ", searchTerm] }) })] }, String(searchTerm))) : groupedOptions.length > 0 ? (groupedOptions.map((groupOption, gIndex) => (_jsxs("div", { children: [_jsx("div", { children: groupOption.groupedValue }), groupOption.options.map((option, index) => (_jsxs("li", { ref: (el) => {
|
|
364
|
+
const refIndex = gIndex > 0 ? index : groupedOptions[gIndex - 1].options.length + index;
|
|
365
|
+
optionRefs.current[refIndex] = el;
|
|
366
|
+
}, onClick: (e) => onSelectChange
|
|
367
|
+
? handleItemSelect(option, option.disabled || false)
|
|
368
|
+
: handleSelect(option.value, option.disabled || false), style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, listItemStyle), { display: "flex", alignItems: "center" }), (index === highlightIndex ? listItemHoverStyle : {})), (option.disabled ? listItemDisabledStyle : {})), (index !== highlightIndex &&
|
|
369
|
+
!isMultiple &&
|
|
370
|
+
intermediateValues.includes(option.value)
|
|
371
|
+
? selectedItemStyle
|
|
372
|
+
: {})), { borderBottom: index === filteredOptions.length - 1
|
|
373
|
+
? "none"
|
|
374
|
+
: "1px solid var(--divider-strong, #dddddd)", wordWrap: "break-word", textWrap: "wrap", justifyContent: "space-between" }), onMouseEnter: (e) => {
|
|
375
|
+
if (!option.disabled) {
|
|
376
|
+
setHighlightIndex(index);
|
|
377
|
+
}
|
|
378
|
+
}, children: [isMultiple && (_jsx("div", { style: { marginRight: "0.5rem" }, children: _jsx(Checkbox, { selected: intermediateValues.includes(option.value), onChange: () => { }, style: { pointerEvents: "none" }, noLabel: true, wrapperClass: checkboxWrapper }) })), _jsxs("div", { style: {
|
|
379
|
+
display: "flex",
|
|
380
|
+
alignItems: "start",
|
|
381
|
+
width: "100%",
|
|
382
|
+
}, children: [option.icon && option.isDelete && !option.isDelete && (_jsx("span", { style: { margin: "0 0.5rem" }, children: option.icon })), _jsx("span", { children: option.label })] }), option.icon && option.isDelete && option.icon] }, String(option.value))))] })))) : (filteredOptions.map((option, index) => (_jsxs("li", { ref: (el) => {
|
|
341
383
|
optionRefs.current[index] = el;
|
|
342
384
|
}, onClick: (e) => onSelectChange
|
|
343
385
|
? handleItemSelect(option, option.disabled || false)
|
|
@@ -24,9 +24,9 @@ import { TbCopy, TbCopyOff } from "react-icons/tb";
|
|
|
24
24
|
import { formatValue } from "../../services/commonService";
|
|
25
25
|
const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable = true, paginate, rowsPerPageOptions = [10, 20, 50, 100], defaultRowsPerPage = 100, widthMode = "custom", bulkSelect = false, cellBorder = false, rowHeight = 38, onRowClick, rowCount = false, rowBorder = true, showMenu = false, search = false, defaultSearchOperation = "contains", gridBorder = false, isLoading = false, rowTopBorder, rowBottomBorder, rowLeftBorder, rowRightBorder, headerBackground = "var(--row-header-bg)", headerTopBorder = "none", headerBottomBorder = "none", SettingIcon, ExportIcon, ignoredExportItems = ["action", "actions"], borderColor = "#dbdfe9", updateColumns, showHideAvailable = false, columnSearchOutside = false, multiSorting = false, exportAvailable = false, exportableFileName = "", groupBy, updateGroupBy, rowKey = "id", hlBorderColor = "black", selectedRow, selectedRowStyle = {
|
|
26
26
|
borderLeft: "0.5rem solid #d9d9d9",
|
|
27
|
-
}, defaultSort, noKeyEvents = true, customOperation, hasCustomOperation, globalSearch, headerDropdownIndex, draggable = false, resizable = false, updateGridData, widthUnits, checkboxWrapper, ignoreHugContent = false, setRendered, isSummarise = true, fullScreenAvailable = true, defaultGroupOpen, alternateRowColor = true, activeCalculateColor = "#2377BA", calculatetextColor = "#fff", actionsKey = "actions", saveAsNewView = false, handleSaveAsView, saveAsViewIcon, filterData, chipColor = "#ccc", withAscii = false, propSummariseKeys, SummariseIcon, summarizeColor = "black", isExpandable = false, expandedRow, extraRow, selectedCheckBox, setSelectedCheckbox, ignoreRowSelect, setOpenedRows, openedRows, getLoadingState, globalSearchOpen = false, updateFixedFilterValues = (fixedFilterValues) => {
|
|
27
|
+
}, defaultSort, noKeyEvents = true, customOperation, hasCustomOperation, globalSearch, headerDropdownIndex, draggable = false, resizable = false, updateGridData, widthUnits, checkboxWrapper, ignoreHugContent = false, setRendered, isSummarise = true, isHideDups = false, fullScreenAvailable = true, defaultGroupOpen, alternateRowColor = true, activeCalculateColor = "#2377BA", calculatetextColor = "#fff", actionsKey = "actions", saveAsNewView = false, handleSaveAsView, saveAsViewIcon, filterData, chipColor = "#ccc", withAscii = false, propSummariseKeys, SummariseIcon, summarizeColor = "black", isExpandable = false, expandedRow, extraRow, selectedCheckBox, setSelectedCheckbox, ignoreRowSelect, setOpenedRows, openedRows, getLoadingState, globalSearchOpen = false, updateFixedFilterValues = (fixedFilterValues) => {
|
|
28
28
|
console.log("Update fixed filter values not implemented", fixedFilterValues);
|
|
29
|
-
}, locale, formatOptions, exportOptions }) => {
|
|
29
|
+
}, locale, formatOptions, exportOptions, }) => {
|
|
30
30
|
var _a, _b, _c, _d;
|
|
31
31
|
const [searchQueries, setSearchQueries] = useState({});
|
|
32
32
|
const [chips, setChips] = useState([]);
|
|
@@ -63,7 +63,6 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
|
|
|
63
63
|
const [summariseAvailable, setSummariseAvailable] = useState(false);
|
|
64
64
|
const [groupedKeys, setGroupedKeys] = useState([]);
|
|
65
65
|
// const [changed, setChanged] = useState<string[]>([]);
|
|
66
|
-
const prevData = useRef(data);
|
|
67
66
|
const [isFullScreen, setIsFullScreen] = useState(false);
|
|
68
67
|
const [fullScreen, setFullScreen] = useState(false);
|
|
69
68
|
const [hideDuplicates, setHideDuplicates] = useState(false);
|
|
@@ -79,6 +78,9 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
|
|
|
79
78
|
useEffect(() => {
|
|
80
79
|
setSummariseAvailable(isSummarise);
|
|
81
80
|
}, [isSummarise]);
|
|
81
|
+
useEffect(() => {
|
|
82
|
+
setHideDuplicates(isHideDups);
|
|
83
|
+
}, [isHideDups]);
|
|
82
84
|
useEffect(() => {
|
|
83
85
|
setFullScreen(fullScreenAvailable);
|
|
84
86
|
}, [fullScreenAvailable]);
|
|
@@ -1271,7 +1273,7 @@ const Grid = ({ columns, wrapperClass, updateGridColumns, data, height, sortable
|
|
|
1271
1273
|
}, children: _jsx(TbCalculatorOff, {}) }))] }), _jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [isSummarise && (_jsx("div", { onClick: () => setSummariseAvailable((prev) => !prev), style: {
|
|
1272
1274
|
cursor: "pointer",
|
|
1273
1275
|
marginLeft: 10,
|
|
1274
|
-
}, children: SummariseIcon ? (SummariseIcon) : summariseAvailable ? (_jsx(TbCalculatorFilled, { color: summarizeColor, size: 18 })) : (_jsx(TbCalculator, { size: 18 })) })), showHideAvailable && (_jsx("div", { onClick: openSetting, style: { cursor: "pointer", marginLeft: 10 }, children: SettingIcon ? SettingIcon : _jsx(FiEye, { size: 18 }) })), exportAvailable && (_jsx("div", { onClick: handleExport, style: { cursor: "pointer", marginLeft: 10 }, children: ExportIcon ? ExportIcon : _jsx(FiShare, { size: 16 }) })), _jsx("div", { onClick: () => setHideDuplicates((prev) => !prev), style: { cursor: "pointer", marginLeft: 10 }, title: hideDuplicates ? "Show Duplicates" : "Hide Duplicates", children: hideDuplicates ? (_jsx(TbCopyOff, { size: 18 })) : (_jsx(TbCopy, { size: 18 })) }), fullScreen && (_jsx("div", { onClick: toggleFullScreen, style: { cursor: "pointer", marginLeft: 10 }, children: isFullScreen ? (_jsx(MdFullscreenExit, { size: 20 })) : (_jsx(MdFullscreen, { size: 20 })) })), freezeColumnsAvailable && (_jsx("div", { onClick: toggleCollapse, style: { cursor: "pointer", marginLeft: 10 }, children: isCollapsed ? (_jsx(FiChevronsRight, { size: 20 })) : (_jsx(FiChevronsLeft, { size: 20 })) })), (filterDetails.filtersUpdated ||
|
|
1276
|
+
}, children: SummariseIcon ? (SummariseIcon) : summariseAvailable ? (_jsx(TbCalculatorFilled, { color: summarizeColor, size: 18 })) : (_jsx(TbCalculator, { size: 18 })) })), showHideAvailable && (_jsx("div", { onClick: openSetting, style: { cursor: "pointer", marginLeft: 10 }, children: SettingIcon ? SettingIcon : _jsx(FiEye, { size: 18 }) })), exportAvailable && (_jsx("div", { onClick: handleExport, style: { cursor: "pointer", marginLeft: 10 }, children: ExportIcon ? ExportIcon : _jsx(FiShare, { size: 16 }) })), isHideDups && (_jsx("div", { onClick: () => setHideDuplicates((prev) => !prev), style: { cursor: "pointer", marginLeft: 10 }, title: hideDuplicates ? "Show Duplicates" : "Hide Duplicates", children: hideDuplicates ? (_jsx(TbCopyOff, { size: 18 })) : (_jsx(TbCopy, { size: 18 })) })), fullScreen && (_jsx("div", { onClick: toggleFullScreen, style: { cursor: "pointer", marginLeft: 10 }, children: isFullScreen ? (_jsx(MdFullscreenExit, { size: 20 })) : (_jsx(MdFullscreen, { size: 20 })) })), freezeColumnsAvailable && (_jsx("div", { onClick: toggleCollapse, style: { cursor: "pointer", marginLeft: 10 }, children: isCollapsed ? (_jsx(FiChevronsRight, { size: 20 })) : (_jsx(FiChevronsLeft, { size: 20 })) })), (filterDetails.filtersUpdated ||
|
|
1275
1277
|
sortDetails.sortUpdated ||
|
|
1276
1278
|
summarise.summariseUpdated ||
|
|
1277
1279
|
gridGroupBy !== (groupBy || "")) &&
|
package/package.json
CHANGED