@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
86 lines • 6.28 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Selector = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const button_1 = require("../../../components/button/button");
const state_1 = require("../../../components/button/types/state");
const text_1 = require("../../../components/text/text");
const component_1 = require("../../../components/text/types/component");
const provider_1 = require("../../../provider/utils/provider");
const elementOrIcon_1 = require("../../elementOrIcon/elementOrIcon");
const calendar_1 = require("../types/calendar");
// styles
const selector_styled_1 = require("./selector.styled");
const Selector = (props) => {
const { dateHelpers, formatDate } = (0, provider_1.useUtilsProvider)();
const { leftArrowIcon, rightArrowIcon, variantSelectorButton, sizeSelectorButton } = props.configCalendar;
const onChangeCurrentDate = (newDate) => {
props.setCurrentDate(newDate);
};
const isDaySelector = props.styles?.useDaySelector;
const showCustomSelector = (props.showMonthSelector || props.showYearSelector) && !isDaySelector;
const monthWithCapitalLetter = (month) => {
return month.charAt(0).toUpperCase() + month.slice(1);
};
const iconArrowDisabled = (limitDate) => {
return (!showCustomSelector &&
limitDate.getMonth() === props.currentDate.getMonth() &&
limitDate.getFullYear() === props.currentDate.getFullYear());
};
const renderButtonSelector = (type, showSelector, ariaLabel, role) => {
const buttonState = showSelector ? state_1.ButtonStateType.DISABLED : state_1.ButtonStateType.DEFAULT;
const selectorToShow = () => {
switch (type) {
case calendar_1.CalendarElementType.DAY:
return props.currentDate.getDate();
case calendar_1.CalendarElementType.MONTH:
return monthWithCapitalLetter(formatDate(props.currentDate, { month: 'long' }));
case calendar_1.CalendarElementType.YEAR:
return props.currentDate.getFullYear();
default:
return null;
}
};
const handleClickButtonSelector = event => {
props.setShowDaySelector(type === calendar_1.CalendarElementType.DAY);
props.setShowMonthSelector(type === calendar_1.CalendarElementType.MONTH);
props.setShowYearSelector(type === calendar_1.CalendarElementType.YEAR);
if (type === calendar_1.CalendarElementType.DAY) {
props.onDaySelectorClick?.(selectorToShow()?.toString(), event);
}
else if (type === calendar_1.CalendarElementType.MONTH) {
props.onMonthSelectorClick?.(selectorToShow()?.toString(), event);
}
else {
props.onYearSelectorClick?.(selectorToShow()?.toString(), event);
}
};
return ((0, jsx_runtime_1.jsx)(button_1.Button, { "aria-label": ariaLabel, disabled: showSelector, role: role, size: sizeSelectorButton || props.styles?.selectorOptions?.sizeSelectorButton, variant: variantSelectorButton || props.styles?.selectorOptions?.variantSelectorButton, onClick: handleClickButtonSelector, children: (0, jsx_runtime_1.jsx)(text_1.Text, { component: component_1.TextComponentType.SPAN, customTypography: props.styles?.selectorOptions?.[buttonState], children: selectorToShow() }) }));
};
const onClickLeftIcon = () => {
const auxCurrentDate = new Date(props.currentDate);
!showCustomSelector
? onChangeCurrentDate(dateHelpers.getSubMonths(auxCurrentDate, 1))
: props.setShowYearSelector(false);
props.setShowMonthSelector(false);
props.setShowDaySelector(true);
};
const onClickRightIcon = () => {
const auxCurrentDate = new Date(props.currentDate);
onChangeCurrentDate(dateHelpers.getAddMonths(auxCurrentDate, 1));
};
const handleOnClickLeftIcon = event => {
onClickLeftIcon();
leftArrowIcon.onClick?.(event);
props.onLeftIconClick?.(event);
};
const handleOnClickRightIcon = event => {
onClickRightIcon();
rightArrowIcon.onClick?.(event);
props.onRightIconClick?.(event);
};
return ((0, jsx_runtime_1.jsxs)(selector_styled_1.SelectorStyled, { isDaySelector: isDaySelector, styles: props.styles, children: [(0, jsx_runtime_1.jsxs)(selector_styled_1.IconAndBackTextStyled, { "aria-label": showCustomSelector ? '' : leftArrowIcon['aria-label'], styles: props.styles, type: "button", onClick: handleOnClickLeftIcon, children: [(0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { color: iconArrowDisabled(props.minDate) ? props.styles?.colorArrowDisabled : undefined, customIconStyles: props.styles?.leftArrow, disabled: iconArrowDisabled(props.minDate), ...leftArrowIcon }), showCustomSelector && ((0, jsx_runtime_1.jsx)(text_1.Text, { component: component_1.TextComponentType.PARAGRAPH, customTypography: props.styles?.backText, children: props.customBackText }))] }), (0, jsx_runtime_1.jsxs)(selector_styled_1.OptionsStyled, { styles: props.styles, children: [isDaySelector &&
renderButtonSelector(calendar_1.CalendarElementType.DAY, props.showDaySelector, props.configAccesibility?.daySelectorAriaLabel, props.configAccesibility?.daySelectorRole), renderButtonSelector(calendar_1.CalendarElementType.MONTH, props.showMonthSelector, props.configAccesibility?.monthSelectorAriaLabel, props.configAccesibility?.monthSelectorRole), renderButtonSelector(calendar_1.CalendarElementType.YEAR, props.showYearSelector, props.configAccesibility?.yearSelectorAriaLabel, props.configAccesibility?.yearSelectorRole)] }), (0, jsx_runtime_1.jsx)(selector_styled_1.RightIconStyled, { showCustomSelector: showCustomSelector, children: (0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { color: iconArrowDisabled(props.maxDate) ? props.styles?.colorArrowDisabled : undefined, customIconStyles: props.styles?.rightArrow, disabled: iconArrowDisabled(props.maxDate), ...rightArrowIcon, onClick: handleOnClickRightIcon }) })] }));
};
exports.Selector = Selector;
//# sourceMappingURL=selector.js.map