common-ui-components-lib
Version:
React UI components including JsonGrid and MultiSelectDropdown
94 lines (83 loc) • 6.46 kB
JavaScript
import React, { useState } from 'react';
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z$1 = ".json-grid-container {\r\n width: 100%;\r\n overflow-x: auto;\r\n}\r\n\r\n.json-grid {\r\n width: 100%;\r\n border-collapse: collapse;\r\n border-spacing: 0;\r\n}\r\n\r\n.json-grid th,\r\n.json-grid td {\r\n padding: 8px;\r\n text-align: left;\r\n border: 1px solid #ddd;\r\n}\r\n\r\n.json-grid th {\r\n background-color: #f5f5f5;\r\n font-weight: bold;\r\n}\r\n\r\n.json-grid tr:nth-child(even) {\r\n background-color: #f9f9f9;\r\n}\r\n\r\n.json-grid tr:hover {\r\n background-color: #f5f5f5;\r\n}\r\n\r\n.json-grid-empty {\r\n padding: 20px;\r\n text-align: center;\r\n color: #666;\r\n}";
styleInject(css_248z$1);
const JsonGrid = ({ data }) => {
const dataArray = Array.isArray(data) ? data : [data];
if (dataArray.length === 0) {
return React.createElement("div", { className: "json-grid-empty" }, "No data available");
}
const headers = [...new Set(dataArray.flatMap(obj => Object.keys(obj)))];
return (React.createElement("div", { className: "json-grid-container" },
React.createElement("table", { className: "json-grid" },
React.createElement("thead", null,
React.createElement("tr", null, headers.map((header) => (React.createElement("th", { key: header }, header))))),
React.createElement("tbody", null, dataArray.map((item, rowIndex) => (React.createElement("tr", { key: rowIndex }, headers.map((header) => (React.createElement("td", { key: `${rowIndex}-${header}` }, item[header] !== undefined && item[header] !== null
? typeof item[header] === 'object'
? JSON.stringify(item[header])
: String(item[header])
: ''))))))))));
};
var css_248z = ".multi-select-dropdown {\r\n position: relative;\r\n width: 100%;\r\n max-width: 300px;\r\n}\r\n\r\n.dropdown-header {\r\n padding: 10px;\r\n border: 1px solid #ddd;\r\n border-radius: 4px;\r\n cursor: pointer;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n\r\n.dropdown-header:hover {\r\n background-color: #f5f5f5;\r\n}\r\n\r\n.arrow {\r\n transition: transform 0.2s ease;\r\n}\r\n\r\n.arrow.open {\r\n transform: rotate(180deg);\r\n}\r\n\r\n.dropdown-list {\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n right: 0;\r\n margin: 0;\r\n padding: 0;\r\n list-style: none;\r\n border: 1px solid #ddd;\r\n border-top: none;\r\n border-radius: 0 0 4px 4px;\r\n background-color: white;\r\n max-height: 200px;\r\n overflow-y: auto;\r\n z-index: 1000;\r\n}\r\n\r\n.dropdown-list li {\r\n padding: 8px 10px;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.dropdown-list li:hover {\r\n background-color: #f5f5f5;\r\n}\r\n\r\n.dropdown-list li.selected {\r\n background-color: #e6f7ff;\r\n}\r\n\r\n.selected-items {\r\n margin-top: 10px;\r\n}\r\n\r\n.selected-items h4 {\r\n margin: 0 0 8px 0;\r\n font-size: 14px;\r\n}\r\n\r\n.selected-items ul {\r\n list-style: none;\r\n padding: 0;\r\n margin: 0;\r\n}\r\n\r\n.selected-items li {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 4px 8px;\r\n background-color: #e6f7ff;\r\n border-radius: 4px;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.selected-items button {\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 0 4px;\r\n font-size: 16px;\r\n color: #666;\r\n}\r\n\r\n.selected-items button:hover {\r\n color: #ff4d4f;\r\n}";
styleInject(css_248z);
const MultiSelectDropdown = ({ data, onChange }) => {
const [isOpen, setIsOpen] = useState(false);
const [selectedItems, setSelectedItems] = useState([]);
const toggleDropdown = () => {
setIsOpen(!isOpen);
};
const handleItemClick = (item) => {
const isSelected = selectedItems.some(selected => selected.id === item.id);
let newSelectedItems;
if (isSelected) {
newSelectedItems = selectedItems.filter(selected => selected.id !== item.id);
}
else {
newSelectedItems = [...selectedItems, item];
}
setSelectedItems(newSelectedItems);
if (onChange) {
onChange(newSelectedItems);
}
};
return (React.createElement("div", { className: "multi-select-dropdown" },
React.createElement("div", { className: "dropdown-header", onClick: toggleDropdown },
selectedItems.length > 0
? `${selectedItems.length} item(s) selected`
: 'Select items',
React.createElement("span", { className: `arrow ${isOpen ? 'open' : ''}` }, "\u25BC")),
isOpen && (React.createElement("ul", { className: "dropdown-list" }, data.map(item => (React.createElement("li", { key: item.id, onClick: () => handleItemClick(item), className: selectedItems.some(selected => selected.id === item.id) ? 'selected' : '' },
React.createElement("input", { type: "checkbox", checked: selectedItems.some(selected => selected.id === item.id), readOnly: true }),
React.createElement("span", null, item.name)))))),
selectedItems.length > 0 && (React.createElement("div", { className: "selected-items" },
React.createElement("h4", null, "Selected Items:"),
React.createElement("ul", null, selectedItems.map(item => (React.createElement("li", { key: item.id },
item.name,
React.createElement("button", { onClick: (e) => {
e.stopPropagation();
handleItemClick(item);
} }, "\u00D7")))))))));
};
export { JsonGrid, MultiSelectDropdown };
//# sourceMappingURL=index.esm.js.map