@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
61 lines • 3.94 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.YearSelector = 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 getYearList_1 = require("../../utils/getYearList");
const setYear_1 = require("../../utils/setYear");
const state_1 = require("./types/state");
const yearSelector_utils_1 = require("./utils/yearSelector.utils");
// styles
const yearSelector_styled_1 = require("./yearSelector.styled");
const YearSelector = (props) => {
const { transformDate } = (0, provider_1.useUtilsProvider)();
const roveFocusProps = react_1.default.useMemo(() => ({
size: (0, getYearList_1.getYearList)(props.minDate, props.maxDate).length,
keyLeftMove: (0, yearSelector_utils_1.keyLeftMove)((0, getYearList_1.getYearList)(props.minDate, props.maxDate)),
keyRightMove: (0, yearSelector_utils_1.keyRightMove)((0, getYearList_1.getYearList)(props.minDate, props.maxDate)),
keyUpMove: (0, yearSelector_utils_1.keyUpMove)((0, getYearList_1.getYearList)(props.minDate, props.maxDate)),
keyDownMove: (0, yearSelector_utils_1.keyDownMove)((0, getYearList_1.getYearList)(props.minDate, props.maxDate)),
keyTabMove: yearSelector_utils_1.keyTabMove,
currentFocusSelected: (0, getYearList_1.getYearList)(props.minDate, props.maxDate).indexOf(props.currentDate ? props.currentDate.getFullYear() : new Date().getFullYear()),
}), [
(0, getYearList_1.getYearList)(props.minDate, props.maxDate).length,
props.currentDate,
props.minDate,
props.maxDate,
]);
const [focus, , listEl] = (0, useRoveFocus_1.useRoveFocus)(roveFocusProps);
const getState = (currentDate, year) => {
let state;
if (currentDate.getFullYear() === year) {
state = state_1.YearSelectorStateType.SELECTED;
}
else if (year === props.today.getFullYear()) {
state = state_1.YearSelectorStateType.CURRENT;
}
else {
state = state_1.YearSelectorStateType.DEFAULT;
}
return state;
};
return ((0, jsx_runtime_1.jsx)(yearSelector_styled_1.YearSelectorStyled, { ref: listEl, styles: props.styles, children: (0, getYearList_1.getYearList)(props.minDate, props.maxDate).map((year, index) => {
const state = getState(props.currentDate, year);
return ((0, jsx_runtime_1.jsx)(yearSelector_styled_1.YearListStyled, { "aria-selected": state === state_1.YearSelectorStateType.SELECTED ? true : undefined, state: state, styles: props.styles, children: (0, jsx_runtime_1.jsx)(itemRove_1.ItemRove, { ariaLabel: String(year), asElement: yearSelector_styled_1.YearElementStyled, focus: focus === index, index: index, type: type_1.ButtonType.BUTTON, onSelectItem: () => {
const auxCurrentYear = new Date(props.currentDate);
props.setCurrentDate(transformDate((0, setYear_1.setYear)(auxCurrentYear, year)));
props.onYearClick?.(year.toString());
}, children: (0, jsx_runtime_1.jsx)(text_1.Text, { component: component_1.TextComponentType.SPAN, customTypography: props.styles?.year?.[state], dataTestId: props.dataTestId, children: year }) }) }, index));
}) }));
};
exports.YearSelector = YearSelector;
//# sourceMappingURL=yearSelector.js.map