@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
41 lines • 4.18 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { Button } from '../../components/button/button';
import { DeviceBreakpointsType } from '../../types/breakpoints/breakpoints';
import { POSITIONS } from '../../types/positions/positions';
import { ActionBottomSheetControlled as ActionBottomSheet } from '../actionBottomSheet/actionBottomSheetControlled';
import { ListOptions } from '../listOptions/listOptions';
import { ListOptionsType } from '../listOptions/types/type';
import { TabsUnControlled as Tabs } from '../tabs/tabsUnControlled';
import { TextComponentType } from '../text/types/component';
// styles
import { ActionBottomSheetContainerStyled, ButtonContainerStyled, ContentContainerStyled, TabsContainerStyled, } from './functionalitiesModule.styled';
const FunctionalitiesModuleStandAloneComponent = ({ hasTitleSection = false, dataTestId = 'functionalities-module', ...props }, ref) => {
const mergeList = () => {
return (props.sections?.reduce((prev, current) => {
const currentOptions = current.options ? current.options : [];
return [...prev, ...currentOptions];
}, []) ?? []);
};
const buildContentMergeList = () => [
_jsx(ContentContainerStyled, { "data-testid": `${dataTestId}-content-tab`, styles: props.styles, children: props.styles.listOptions?.optionVariant && props.styles.listOptions.variant && (_jsx(ListOptions, { optionVariant: props.styles.listOptions.optionVariant, options: mergeList(), selectedValue: props.selectedValue, type: ListOptionsType.NAVIGATION, variant: props.styles.listOptions.variant, onOptionClick: props.onOptionClick })) }, 0),
];
const buildContentList = () => props.sections?.map((section, index) => {
return (_jsx(ContentContainerStyled, { "data-testid": `${dataTestId}-content-tab-${index}`, styles: props.styles, children: props.styles.listOptions?.optionVariant && props.styles.listOptions.variant && (_jsx(ListOptions, { content: section.optionsContent, optionVariant: props.styles.listOptions.optionVariant, options: section.options || [], selectedValue: props.selectedValue, title: { component: TextComponentType.H6, ...section.optionsTitle }, type: ListOptionsType.NAVIGATION, variant: props.styles.listOptions.variant, onOptionClick: props.onOptionClick })) }, index));
});
const content = hasTitleSection || props.device === DeviceBreakpointsType.DESKTOP
? buildContentList()
: buildContentMergeList();
const { title: actionBottomSheetTitle, popover: actionBottomSheetPopover, ...actionBottomSheet } = props.actionBottomSheet ?? {};
return (_jsx("div", { ref: ref, children: props.device === DeviceBreakpointsType.DESKTOP ? (_jsx(TabsContainerStyled, { ref: ref, "aria-label": props.tabsContainerAriaLabel, "data-testid": `${dataTestId}-tabs`, styles: props.styles, children: _jsx(Tabs, { allowFocusTabPanel: false, content: content, tabs: props.sections?.map(({ tab }) => tab), variant: props.styles.tabsVariant, ...props.tabsConfig }) })) : (_jsxs(_Fragment, { children: [props.trigger?.content && (_jsx(ButtonContainerStyled, { styles: props.styles, children: _jsx(Button, { ...props.trigger, children: props.trigger?.content }) })), _jsx(ActionBottomSheetContainerStyled, { styles: props.styles, children: props.styles.actionBottomSheet?.variant && (_jsx(ActionBottomSheet, { open: props.open ?? false, popover: {
preventScrollOnCloseFocus: true,
blockBack: true,
...actionBottomSheetPopover,
}, title: {
align: props.styles.actionBottomSheet.alignTitle ?? POSITIONS.CENTER,
component: TextComponentType.H5,
...actionBottomSheetTitle,
}, variant: props.styles.actionBottomSheet.variant, ...actionBottomSheet, children: content })) })] })) }));
};
export const FunctionalitiesModuleStandAlone = React.forwardRef(FunctionalitiesModuleStandAloneComponent);
//# sourceMappingURL=functionalitiesModuleStandAlone.js.map