@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
70 lines • 4.28 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MonthSelector = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const text_1 = require("../../../../components/text/text");
const component_1 = require("../../../../components/text/types/component");
const useRoveFocus_1 = require("../../../../hooks/useRoveFocus/useRoveFocus");
const provider_1 = require("../../../../provider/utils/provider");
const type_1 = require("../../../button/types/type");
const itemRove_1 = require("../../../itemRove/itemRove");
const setMonth_1 = require("../../utils/setMonth");
// styles
const monthSelector_styled_1 = require("./monthSelector.styled");
const state_1 = require("./types/state");
const monthSelector_utils_1 = require("./utils/monthSelector.utils");
const MonthSelector = (props) => {
const { dateHelpers, transformDate } = (0, provider_1.useUtilsProvider)();
const handleKeyMoveConfig = {
currentDate: props.currentDate,
maxDate: props.maxDate,
minDate: props.minDate,
};
const roveFocusProps = react_1.default.useMemo(() => ({
size: dateHelpers.getAllMonthName('long').length,
keyLeftMove: (0, monthSelector_utils_1.keyLeftMove)(handleKeyMoveConfig),
keyRightMove: (0, monthSelector_utils_1.keyRightMove)(handleKeyMoveConfig),
keyUpMove: (0, monthSelector_utils_1.keyUpMove)(handleKeyMoveConfig),
keyDownMove: (0, monthSelector_utils_1.keyDownMove)(handleKeyMoveConfig),
keyTabMove: monthSelector_utils_1.keyTabMove,
currentFocusSelected: props.currentDate
? props.currentDate.getMonth()
: new Date().getMonth(),
}), [dateHelpers.getAllMonthName('long').length, props.currentDate]);
const [focus, , listEl] = (0, useRoveFocus_1.useRoveFocus)(roveFocusProps);
const getState = (currentDate, index, isDisabled) => {
let state;
if (currentDate.getMonth() === index) {
state = state_1.MonthSelectorStateType.SELECTED;
}
else if (index === props.today.getMonth()) {
state = state_1.MonthSelectorStateType.CURRENT;
}
else if (isDisabled) {
state = state_1.MonthSelectorStateType.DISABLED;
}
else {
state = state_1.MonthSelectorStateType.DEFAULT;
}
return state;
};
const setDisabledMonths = index => {
const year = props.currentDate?.getFullYear();
return ((props.minDate?.getFullYear() === year && props.minDate?.getMonth() > index) ||
(props.maxDate?.getFullYear() === year && props.maxDate?.getMonth() < index));
};
return ((0, jsx_runtime_1.jsx)(monthSelector_styled_1.MonthSelectorStyled, { ref: listEl, styles: props.styles, children: dateHelpers.getAllMonthName('long').map((month, index) => {
const state = getState(props.currentDate, index, setDisabledMonths(index));
return ((0, jsx_runtime_1.jsx)(monthSelector_styled_1.MonthListStyled, { "$disabled": setDisabledMonths(index), "aria-selected": state === state_1.MonthSelectorStateType.SELECTED ? true : undefined, state: state, styles: props.styles, children: (0, jsx_runtime_1.jsx)(itemRove_1.ItemRove, { ariaDisabled: setDisabledMonths(index), ariaLabel: month.charAt(0).toUpperCase() + month.slice(1), asElement: monthSelector_styled_1.MonthElementStyled, focus: focus === index, index: index, type: type_1.ButtonType.BUTTON, onSelectItem: () => {
const auxCurrentYear = new Date(props.currentDate);
props.setCurrentDate(transformDate((0, setMonth_1.setMonth)(auxCurrentYear, index)));
props.onMonthClick?.(month);
}, children: (0, jsx_runtime_1.jsx)(text_1.Text, { component: component_1.TextComponentType.SPAN, customTypography: props.styles?.month?.[state], dataTestId: props.dataTestId, children: month.charAt(0).toUpperCase() + month.slice(1) }) }) }, index));
}) }));
};
exports.MonthSelector = MonthSelector;
//# sourceMappingURL=monthSelector.js.map