sccoreui
Version:
ui-sccore
52 lines (51 loc) • 2.54 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
// import { VirtualScroller } from 'primereact/virtualscroller';
// import { OverlayPanel } from 'primereact/overlaypanel';
// import { InputText } from 'primereact/inputtext';
const button_1 = require("primereact/button");
// import { classNames } from 'primereact/utils';
const dropdown_1 = require("primereact/dropdown");
const VirtualScrollDropDown = () => {
const [items] = (0, react_1.useState)(Array.from({ length: 100000 }).map((_, i) => `Item #${i}`));
// const [totalRecords] = useState(300); // total from API
// const [searchTerm, setSearchTerm] = useState('');
const [selectedItem] = (0, react_1.useState)(null);
const op = (0, react_1.useRef)(null);
(0, react_1.useEffect)(() => {
loadData(0, 100); // Load initial 100 items
}, []);
const loadData = (offset, limit, search = '') => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
console.log(offset, limit, search, "onscroll");
// replace with your API
// const response = await fetch(`/api/items?offset=${offset}&limit=${limit}&search=${search}`);
// const data = await response.json();
// setItems(prev => offset === 0 ? data : [...prev, ...data]);
});
// const itemTemplate = (item, options) => {
// const className = classNames('flex align-items-center p-2', {
// 'surface-hover': options.odd
// });
// return (
// <div className={className} style={{ height: options.props.itemSize + 'px' }}>
// {item}
// </div>
// );
// };
// const onLazyLoad = (event) => {
// console.log(event)
// if (items.length < totalRecords) {
// loadData(items.length, 100, searchTerm);
// }
// };
// const onSearch = (e) => {
// const term = e.target.value;
// setSearchTerm(term);
// loadData(0, 100, term);
// };
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { label: selectedItem ? selectedItem.name : "Select Item", onClick: (e) => op.current.toggle(e) }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { options: items, filter: true, virtualScrollerOptions: { itemSize: 40 } })] }));
};
exports.default = VirtualScrollDropDown;