seti-ramesesv1/dist/components/common/Datalist/DataListToolbar.js

Reusable components and context for Next.js apps

import { jsxs, jsx } from 'react/jsx-runtime';
import 'react';
import '../../ui/Button/Button.module.css.js';
import '../../../styles/Checkbox.module.css.js';
import '../../../styles/Text.module.css.js';
import '../../../styles/Modal.module.css.js';
import '../../../styles/Panel.module.css.js';
import '../../../styles/Radio.module.css.js';
import '../RadioGroup.js';
import '../../ui/Select/Select.module.css.js';
import Tooltip from '../../ui/Tooltip.js';
import ColumnMenu from './ColumnMenu.js';
import Funnel from '../../../node_modules/lucide-react/dist/esm/icons/funnel.js';
import RefreshCcw from '../../../node_modules/lucide-react/dist/esm/icons/refresh-ccw.js';
import Search from '../../../node_modules/lucide-react/dist/esm/icons/search.js';

const DataListToolbar = ({ addToolbar, select, sortedToolbarActions, allCols, visibleCols, setVisibleCols, allowSearch, searchText, setSearchText, searchMode, onSearch, onRefresh, }) => {
    return (jsxs("div", { className: "flex justify-between items-center gap-4 px-2.5 pb-2.5", children: [jsx("div", { children: addToolbar }), jsxs("div", { className: "flex items-center gap-4 relative", children: [sortedToolbarActions?.map((action) => (jsx(Tooltip, { content: action.name, position: "top", children: jsx("button", { type: "button", className: "p-1 rounded hover:bg-gray-100", onClick: () => action.onClick?.({}), children: action.icon ?? action.name }) }, action.name))), select && (jsxs("select", { className: "border border-gray-300 rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400", defaultValue: select.defaultValue ?? "", onChange: (e) => select.onChange?.(e.target.value), children: [!select.defaultValue && jsx("option", { value: "", children: "Select..." }), Object.entries(select.options).map(([key, label]) => (jsx("option", { value: key, children: label }, key)))] })), jsx(Tooltip, { content: "Filter", position: "top", children: jsx("button", { className: "rounded hover:bg-gray-100", children: jsx(Funnel, { size: 17 }) }) }), jsx(ColumnMenu, { columns: allCols, visibleCols: visibleCols, setVisibleCols: setVisibleCols }), jsx(Tooltip, { content: "Refresh", position: "top", children: jsx("button", { className: "rounded hover:bg-gray-100", onClick: onRefresh, children: jsx(RefreshCcw, { size: 17 }) }) }), allowSearch && setSearchText && (jsxs("div", { className: "relative inline-flex items-center", children: [jsx("input", { type: "text", value: searchText, onChange: (e) => setSearchText(e.target.value), onKeyDown: (e) => {
                                    if (searchMode === "manual" && e.key === "Enter") {
                                        e.preventDefault();
                                        onSearch?.();
                                    }
                                }, placeholder: "Search...", className: "border border-gray-300 rounded-md py-1 px-3 pr-8 text-sm outline-none focus:ring-1 focus:ring-blue-400 h-10" }), searchMode === "manual" && (jsx("button", { type: "button", onClick: onSearch, className: "absolute right-2.5 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-800 flex items-center justify-center p-0", children: jsx(Search, { size: 16 }) }))] }))] })] }));
};

export { DataListToolbar as default };
//# sourceMappingURL=DataListToolbar.js.map