@progress/kendo-react-dateinputs
Version:
React DateInput is a perfect input component for handling quick and efficient date values. KendoReact Date Inputs package
120 lines (119 loc) • 5.26 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as n from "react";
import r from "prop-types";
import { cloneDate as T, isEqual as V } from "@progress/kendo-date-math";
import { CalendarNavigationItem as H } from "./CalendarNavigationItem.mjs";
import { dateInRange as v } from "../../utils.mjs";
import { Virtualization as S } from "../../virtualization/Virtualization.mjs";
import { classNames as d, uCalendar as u } from "@progress/kendo-react-common";
const I = 30, p = class p extends n.Component {
constructor(o) {
super(o), this.virtualization = null, this.list = null, this.itemHeight = 0, this.topOffset = 0, this.maxViewHeight = 0, this.bottomOffset = 0, this.handleVirtualizationMount = (t) => {
if (this.virtualization = t, this.virtualization && this.list) {
this.list.style.transform = `translateY(${this.topOffset}px)`;
const i = v(this.props.focusedDate, this.props.min, this.props.max), s = this.props.service.skip(i, this.props.min);
this.virtualization.scrollToIndex(s);
}
}, this.buildNavigationItem = (t) => {
const i = this.props.service.navigationTitle(t), s = this.props.service.isRangeStart(t), a = `kendo-react-calendar-nav-item-${t.getTime()}`, h = {
text: i,
value: t,
isRangeStart: s,
view: this.props.activeView,
onClick: this.handleDateChange
};
return this.props.navigationItem ? /* @__PURE__ */ n.createElement(this.props.navigationItem, { ...h, key: a }, i) : /* @__PURE__ */ n.createElement(H, { ...h, key: a }, i);
}, this.calculateHeights = () => {
const t = this.props.dom.calendarHeight;
this.itemHeight = this.props.dom.navigationItemHeight || 1, this.maxViewHeight = this.props.dom.monthViewHeight, this.topOffset = (t - this.itemHeight) / 2, this.bottomOffset = t - this.itemHeight;
}, this.handleDateChange = (t, i) => {
const { onChange: s } = this.props;
if (s && i) {
const a = {
value: T(t),
target: this,
nativeEvent: i && i.nativeEvent,
syntheticEvent: i
};
s.call(void 0, a);
}
}, this.handleScrollAction = ({ scrollAction: t, pageAction: i }) => {
const s = i ? i.skip : this.state.skip;
if (this.state.skip !== s && this.setState({ skip: s }), this.list && t) {
const a = `translateY(${t.offset}px)`;
this.list.style.transform = a;
}
}, this.lastView = this.props.activeView, this.lastFocus = this.props.focusedDate;
const e = this.props.service.skip(this.props.focusedDate, this.props.min), c = this.props.service.total(this.props.min, this.props.max);
this.state = {
skip: e - this.getTake(e, c) > 0 ? e : 0
};
}
get take() {
return this.props.take !== void 0 ? this.props.take : p.defaultProps.take;
}
/**
* @hidden
*/
componentDidUpdate(o, e) {
this.indexToScroll !== void 0 && this.virtualization && this.virtualization.scrollToIndex(this.indexToScroll), this.lastView = this.props.activeView, this.lastFocus = this.props.focusedDate, this.indexToScroll = void 0;
}
render() {
const { activeView: o, min: e, max: c, service: t, unstyled: i } = this.props;
this.calculateHeights();
const s = i && i.uCalendar, a = this.lastView !== o, h = v(this.props.focusedDate, e, c), m = a ? t.skip(h, e) : this.state.skip, f = t.total(e, c), k = this.getTake(m, f), x = t.addToDate(e, m), D = t.datesList(x, k);
(o !== this.lastView || !V(h, this.lastFocus)) && (this.indexToScroll = t.skip(h, e));
const w = /* @__PURE__ */ n.createElement(
S,
{
skip: m,
take: this.take,
total: f,
itemHeight: this.itemHeight,
topOffset: this.topOffset,
bottomOffset: this.bottomOffset,
onScroll: this.props.onScroll,
maxScrollDifference: this.maxViewHeight,
onScrollAction: this.handleScrollAction,
onMount: (l) => !this.virtualization && this.handleVirtualizationMount(l),
tabIndex: this.props.tabIndex,
unstyled: i
},
/* @__PURE__ */ n.createElement(
"ul",
{
ref: (l) => {
this.list = l;
},
className: d(u.ul({ c: s }))
},
D.map((l) => this.buildNavigationItem(l))
)
);
return /* @__PURE__ */ n.createElement("div", { className: d(u.navigation({ c: s })) }, /* @__PURE__ */ n.createElement("span", { className: d(u.navigationHighlight({ c: s })) }), this.props.dom.didCalculate ? w : null);
}
getTake(o, e) {
return Math.min(e - o, this.take);
}
};
p.propTypes = {
activeView: r.number.isRequired,
focusedDate: r.instanceOf(Date).isRequired,
max: r.instanceOf(Date).isRequired,
min: r.instanceOf(Date).isRequired,
onChange: r.func,
take: r.number,
tabIndex: r.number
}, p.defaultProps = {
take: I
};
let g = p;
export {
g as Navigation
};