@kadconsulting/dry
Version:
KAD Reusable Component Library
36 lines • 2.21 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useImperativeHandle, forwardRef } from 'react';
import classnames from 'classnames';
import './FolderSelector.scss';
import DropdownSelect from '../DropdownSelect/DropdownSelect';
const FolderSelector = forwardRef(({ onTabChange, id, className, passProps, tabs = [], vertical, defaultTab, ...props }, ref) => {
const [activeTab, setActiveTab] = useState(defaultTab ? defaultTab : tabs[0].id);
const [activeTabName, setActiveTabName] = useState(defaultTab
? tabs.find((tab) => tab.id === defaultTab)?.title || ''
: tabs[0].title);
// Expose any methods or values to the parent component using the ref
useImperativeHandle(ref, () => ({
setActiveTab,
}));
const dropdownOptions = tabs.map((tab) => ({
label: tab.title,
value: tab.id,
}));
return (_jsxs("div", { id: id, ref: ref, className: classnames(className, 'dry-folderselector'), ...props, children: [!vertical ? (_jsx("div", { className: 'dry-folderselector__tabs', children: tabs.map((tab) => (_jsx("button", { className: classnames({
active: activeTab === tab.id,
folderSelectorTab: true,
}), onClick: () => {
onTabChange && onTabChange(tab?.id);
setActiveTab(tab.id);
}, children: tab.title }, tab.id))) })) : (_jsx(DropdownSelect, { name: 'rows per page', value: activeTab, options: dropdownOptions, onChange: (e) => {
const selectedId = e.target.value;
const selectedTab = tabs.find((tab) => tab.id === selectedId);
if (selectedTab) {
onTabChange && onTabChange(selectedId);
setActiveTab(selectedId);
setActiveTabName(selectedTab.title);
}
} })), _jsx("div", { className: 'dry-folderselector__tabContent', children: tabs.map((tab) => tab.id === activeTab && _jsx("div", { children: tab.content }, tab.id)) })] }));
});
export default FolderSelector;
//# sourceMappingURL=FolderSelector.js.map