@geneui/components
Version:
The Gene UI components library designed for BI tools
1,107 lines (1,083 loc) • 54.1 kB
JavaScript
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default, { createContext, useState, useCallback, useContext, useMemo, forwardRef, useEffect } from 'react';
import { c as classnames } from '../index-031ff73c.js';
import PropTypes from 'prop-types';
import { a as dayjs, i as isBetween, d as dayjsWithPlugins } from '../dateValidation-67caec66.js';
import { q as chunk, n as noop } from '../index-a0e4e333.js';
import { g as guid } from '../guid-8ddf77b3.js';
import Button from '../Button/index.js';
import Icon from '../Icon/index.js';
import '../_commonjsHelpers-24198af3.js';
import 'react-dom';
import '../tslib.es6-f211516f.js';
var css_248z = "[data-gene-ui-version=\"2.16.5\"] .datepicker-holder{background:var(--background);display:inline-grid;font-weight:600;grid-template-areas:\"date-box-1\" \"date-actions\";grid-template-columns:auto;grid-template-rows:auto auto;min-width:20.8rem;padding:1rem 2rem 2rem;vertical-align:top}[data-gene-ui-version=\"2.16.5\"] .datepicker-holder .not-clickable{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.16.5\"] .datepicker-holder:not(.range-mode){padding-bottom:0}[data-gene-ui-version=\"2.16.5\"] .datepicker-holder.range-mode{grid-template-areas:\"date-box-1 date-box-2 date-actions\";grid-template-columns:auto auto auto;grid-template-rows:auto}[data-gene-ui-version=\"2.16.5\"] .datepicker-holder.range-mode:not(.simple-range-mode)>li+li{margin:0 0 0 3rem}html[dir=rtl] .datepicker-holder.range-mode:not(.simple-range-mode)>li+li{margin:0 3rem 0 0}[data-gene-ui-version=\"2.16.5\"] .datepicker-holder.range-mode .date-box{display:grid;grid-template-rows:auto 1fr auto}[data-gene-ui-version=\"2.16.5\"] .datepicker-holder.range-mode.simple-range-mode{grid-template-areas:\"date-box-1 date-box-2\" \"date-actions date-actions\";grid-template-columns:auto auto;grid-template-rows:auto auto}[data-gene-ui-version=\"2.16.5\"] .datepicker-holder.range-mode.simple-range-mode .date-box-2{margin:0 0 0 3rem}html[dir=rtl] .datepicker-holder.range-mode.simple-range-mode .date-box-2{margin:0 3rem 0 0}[data-gene-ui-version=\"2.16.5\"] .datepicker-holder.range-mode.simple-range-mode .date-actions{margin:.5rem 0 0}[data-gene-ui-version=\"2.16.5\"] .datepicker-holder .date-box-1{grid-area:date-box-1}[data-gene-ui-version=\"2.16.5\"] .datepicker-holder .date-box-2{grid-area:date-box-2}[data-gene-ui-version=\"2.16.5\"] .datepicker-holder .date-actions{grid-area:date-actions}[data-gene-ui-version=\"2.16.5\"] .calendar-days>ul{display:flex;margin:0 0 .5rem}[data-gene-ui-version=\"2.16.5\"] .calendar-days>ul+ul{margin:2px 0 0}[data-gene-ui-version=\"2.16.5\"] .calendar-days>ul>li{align-items:center;border:1px solid #0000;border-radius:100%;color:rgba(var(--background-sc-rgb),.8);cursor:pointer;display:flex;height:3.6rem;justify-content:center;position:relative;text-align:center;transition:color .3s,border-color .3s,background .3s;width:3.6rem}[data-gene-ui-version=\"2.16.5\"] .calendar-days>ul>li+li{margin:0 0 0 2px}html[dir=rtl] .calendar-days>ul>li+li{margin:0 2px 0 0}[data-gene-ui-version=\"2.16.5\"] .calendar-days>ul>li>span{display:block;z-index:0}[data-gene-ui-version=\"2.16.5\"] .calendar-days>ul>li>span:before{bottom:-1px;content:\"\";display:block;left:-2px;pointer-events:none;position:absolute;right:-2px;top:-1px;transition:background .3s;z-index:-1}[data-gene-ui-version=\"2.16.5\"] .calendar-days>ul>li.heading{color:rgba(var(--background-sc-rgb),32);font-weight:700;pointer-events:none}[data-gene-ui-version=\"2.16.5\"] .calendar-days>ul>li.heading>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}[data-gene-ui-version=\"2.16.5\"] .calendar-days>ul>li.disabled{color:rgba(var(--background-sc-rgb),.3);font-weight:600;pointer-events:none}[data-gene-ui-version=\"2.16.5\"] .calendar-days>ul>li.current{border-color:var(--hero);color:var(--hero)}[data-gene-ui-version=\"2.16.5\"] .calendar-days>ul>li.will-be-current{background:rgba(var(--hero-rgb),.15)}[data-gene-ui-version=\"2.16.5\"] .calendar-days>ul>li:hover{background:rgba(var(--background-sc-rgb),.03)}[data-gene-ui-version=\"2.16.5\"] .calendar-days>ul>li.selected{background:var(--hero)!important;color:var(--hero-sc)!important}[data-gene-ui-version=\"2.16.5\"] .calendar-days>ul>li.selected:hover{background:var(--hero-hover)!important}[data-gene-ui-version=\"2.16.5\"] .range-mode .calendar-days>ul>li:hover{background:rgba(var(--hero-rgb),.15)}html:not([dir=rtl]) .calendar-days>ul>li.range-start>span:before,html:not([dir=rtl]) .calendar-days>ul>li:first-child>span:before{border-top-left-radius:3.8rem}html[dir=rtl] .calendar-days>ul>li.range-start>span:before,html[dir=rtl] .calendar-days>ul>li:first-child>span:before{border-top-right-radius:3.8rem}html:not([dir=rtl]) .calendar-days>ul>li.range-start>span:before,html:not([dir=rtl]) .calendar-days>ul>li:first-child>span:before{border-bottom-left-radius:3.8rem}html[dir=rtl] .calendar-days>ul>li.range-start>span:before,html[dir=rtl] .calendar-days>ul>li:first-child>span:before{border-bottom-right-radius:3.8rem}html:not([dir=rtl]) .calendar-days>ul>li.range-end>span:before,html:not([dir=rtl]) .calendar-days>ul>li:last-child>span:before{border-top-right-radius:3.8rem}html[dir=rtl] .calendar-days>ul>li.range-end>span:before,html[dir=rtl] .calendar-days>ul>li:last-child>span:before{border-top-left-radius:3.8rem}html:not([dir=rtl]) .calendar-days>ul>li.range-end>span:before,html:not([dir=rtl]) .calendar-days>ul>li:last-child>span:before{border-bottom-right-radius:3.8rem}html[dir=rtl] .calendar-days>ul>li.range-end>span:before,html[dir=rtl] .calendar-days>ul>li:last-child>span:before{border-bottom-left-radius:3.8rem}[data-gene-ui-version=\"2.16.5\"] .calendar-days>ul.hover-row:hover>li>span:before,[data-gene-ui-version=\"2.16.5\"] .calendar-days>ul>li.ranged>span:before{background:rgba(var(--hero-rgb),.15)}[data-gene-ui-version=\"2.16.5\"] .date-actions ul{display:flex;flex-direction:column}[data-gene-ui-version=\"2.16.5\"] .date-actions.horizontal li:only-child{border-top:1px solid rgba(var(--background-sc-rgb),.1);display:flex;justify-content:center;margin:.5rem 0 0;padding:.8rem 0}[data-gene-ui-version=\"2.16.5\"] .date-actions.horizontal li:only-child .btn{font-weight:700}[data-gene-ui-version=\"2.16.5\"] .date-actions.vertical .btn:not(.a-outline){margin:0 0 1.2rem}[data-gene-ui-version=\"2.16.5\"] .date-actions.vertical .btn.a-outline{margin:.8rem 0 0}[data-gene-ui-version=\"2.16.5\"] .simple-range-mode .date-actions ul{flex-direction:row}[data-gene-ui-version=\"2.16.5\"] .simple-range-mode .date-actions ul li{flex-shrink:0}[data-gene-ui-version=\"2.16.5\"] .simple-range-mode .date-actions ul li:first-child{flex:auto}[data-gene-ui-version=\"2.16.5\"] .date-heading{align-items:center;display:flex;font:700 1.6rem var(--font-family);margin:0 0 1.8rem;text-align:center}[data-gene-ui-version=\"2.16.5\"] .date-heading>li{flex-shrink:0}[data-gene-ui-version=\"2.16.5\"] .date-heading>li:not(.title){align-items:center;display:flex;flex:auto;justify-content:flex-start;width:50%}[data-gene-ui-version=\"2.16.5\"] .date-heading>li:not(.title)>*+*{margin:0 0 0 .4rem}html[dir=rtl] .date-heading>li:not(.title)>*+*{margin:0 .4rem 0 0}[data-gene-ui-version=\"2.16.5\"] .date-heading>li:not(.title):last-child{justify-content:flex-end}[data-gene-ui-version=\"2.16.5\"] .date-heading>li.title{opacity:unset;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-gene-ui-version=\"2.16.5\"] .date-heading .clickable{cursor:pointer;transition:color .3s}[data-gene-ui-version=\"2.16.5\"] .date-heading .clickable.active,[data-gene-ui-version=\"2.16.5\"] .date-heading .clickable:hover{color:var(--hero)}[data-gene-ui-version=\"2.16.5\"] .date-heading .icon{align-items:center;border-radius:100%;cursor:pointer;display:flex;height:3rem;justify-content:center;transition:background .3s;width:3rem}[data-gene-ui-version=\"2.16.5\"] .date-heading .icon:hover{background:rgba(var(--background-sc-rgb),.03)}[data-gene-ui-version=\"2.16.5\"] .month-years-select{min-height:22.9rem;width:26.4rem}[data-gene-ui-version=\"2.16.5\"] .month-years-select li{display:flex}[data-gene-ui-version=\"2.16.5\"] .month-years-select li+li{margin:3.6rem 0 0}[data-gene-ui-version=\"2.16.5\"] .month-years-select button{border-radius:3rem;cursor:pointer;display:block;font:600 1.6rem var(--font-family);height:3rem;overflow:hidden;text-overflow:ellipsis;transition:color .3s,background .3s;-webkit-user-select:none;user-select:none;white-space:nowrap;width:calc(33.33333% - 1.46667rem)}[data-gene-ui-version=\"2.16.5\"] .month-years-select button:nth-child(2){margin:0 2.2rem}[data-gene-ui-version=\"2.16.5\"] .month-years-select button:hover{background:rgba(var(--background-sc-rgb),.03)}[data-gene-ui-version=\"2.16.5\"] .month-years-select button.disabled{color:rgba(var(--background-sc-rgb),.3);pointer-events:none}[data-gene-ui-version=\"2.16.5\"] .month-years-select button.selected{background:var(--hero);color:var(--hero-sc)}[data-gene-ui-version=\"2.16.5\"] .month-years-select .disable{color:rgba(var(--background-sc-rgb),.3);pointer-events:none;-webkit-user-select:none;user-select:none}[data-gene-ui-version=\"2.16.5\"] .month-years-select-button{max-height:3rem;min-height:3rem}[data-gene-ui-version=\"2.16.5\"] .month-years-select-button.selected:hover{background:var(--hero)!important}[data-gene-ui-version=\"2.16.5\"] .month-years-select-button:active{background:none}[data-gene-ui-version=\"2.16.5\"] .time-inputs-str{align-items:center;display:flex;font:600 1.6rem var(--font-family);justify-content:center;margin:1.2rem 0 0}[data-gene-ui-version=\"2.16.5\"] .time-inputs-str li{align-items:center;display:flex;flex-direction:column;justify-content:center}[data-gene-ui-version=\"2.16.5\"] .time-inputs-str li>:first-child{order:0}[data-gene-ui-version=\"2.16.5\"] .time-inputs-str li>:nth-child(2){order:2}[data-gene-ui-version=\"2.16.5\"] .time-inputs-str li>:nth-child(3){order:1}[data-gene-ui-version=\"2.16.5\"] .time-inputs-str li>*+*{margin:.2rem 0 0}[data-gene-ui-version=\"2.16.5\"] .time-inputs-str li+li{margin:0 0 0 1rem}html[dir=rtl] .time-inputs-str li+li{margin:0 1rem 0 0}[data-gene-ui-version=\"2.16.5\"] .time-input-el{align-items:center;background:rgba(var(--background-sc-rgb),.03);border:1px solid rgba(var(--hero-rgb),0);border-radius:.3rem;cursor:default;display:flex;height:3.6rem;justify-content:center;text-align:center;transition:border-color .4s,background .4s;width:5.8rem}[data-gene-ui-version=\"2.16.5\"] button:active~.time-input-el{background:#0000;border-color:var(--hero)}[data-gene-ui-version=\"2.16.5\"] .week-picker:hover{background:rgba(var(--background-sc-rgb),.03)}";
styleInject(css_248z);
function getRange(rangeStart, rangeEnd, selected) {
return !rangeStart || rangeEnd ? [selected, null] : selected.isBefore(rangeStart) ? [selected, rangeStart] : [rangeStart, selected];
}
const addTime = (date, _ref) => {
let [hour, minute, second] = _ref;
return date.hour(hour).minute(minute).second(second);
};
const DAYS_TO_SHOW = 6 * 7;
function getCalendarDays(startOfMonth) {
const firstWeekDay = startOfMonth.day();
// Because of using Monday as week start
const startDiff = firstWeekDay === 0 ? 6 : firstWeekDay - 1;
const first = startOfMonth.subtract(startDiff, 'days');
const days = Array(DAYS_TO_SHOW).fill().map((_, i) => first.add(i, 'd'));
return days;
}
function getCalendarMonths(startOfYear) {
const end = startOfYear.endOf('y');
let pointer = startOfYear;
const months = [];
while (pointer.isBefore(end)) {
months.push(pointer);
pointer = pointer.add(1, 'M');
}
return months;
}
const getCalendarYears = startYear => Array(12).fill(startYear - 1).map((item, i) => item + i);
const getStartOfDecade = year => Math.floor(year / 10) * 10;
const nextDecade = date => date.set('y', getStartOfDecade(date.year()) + 10).startOf('y');
const prevDecade = date => date.set('y', getStartOfDecade(date.year()) - 10).startOf('y');
const nextMonthAvailable = (date, max) => !max || date.add(1, 'M').isBefore(max, 'M');
const prevMonthAvailable = (date, min) => !min || date.subtract(1, 'M').isAfter(min, 'M');
const configs = {
weekdays: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
weekdaysSlice: 1,
monthsSlice: 3,
weekStart: 1,
buttons: {
today: 'Today',
apply: 'Apply',
thisMonth: 'This Month',
thisWeek: 'This Week'
},
actions: {
today: 'Today',
yesterday: 'Yesterday',
last7Days: 'Last 7 days',
last30Days: 'Last 30 days',
thisMonth: 'This Month',
custom: 'Custom'
}
};
const Context = /*#__PURE__*/createContext([configs]);
function Provider(_ref) {
let {
children
} = _ref;
const [state, setState] = useState(configs);
const setter = useCallback(next => {
setState({
...configs,
...next
});
}, []);
return /*#__PURE__*/React__default.createElement(Context.Provider, {
value: [state, setter]
}, children);
}
const useDatePickerContext = () => {
const [configs, setConfigs] = useContext(Context);
return [configs, setConfigs];
};
function Day(_ref) {
let {
value,
disabled,
isCurrent,
isSelected,
isRanged,
onClick,
onHover,
rangeStart,
isHoveredBefore,
startDate,
endDate,
isHovered,
rangeEnd,
hide,
max,
min
} = _ref;
const handleClick = useCallback(() => {
const checkedValue = disabled ? value.isBefore(min) ? min : max : value;
onClick && onClick(checkedValue);
}, [value, onClick, max, min, disabled]);
const handleMouseEnter = useCallback(() => onHover && onHover(value), [value, onHover]);
return /*#__PURE__*/React__default.createElement("li", {
className: classnames({
disabled,
selected: !disabled && isSelected,
current: isCurrent,
ranged: !disabled && isRanged,
'range-start': endDate && value.isSame(startDate) || isHoveredBefore && isHovered || rangeStart && !isHoveredBefore,
'range-end': endDate && value.isSame(startDate) ? false : rangeStart && isHoveredBefore || !isHoveredBefore && isHovered || rangeEnd
}),
onClick: handleClick,
onMouseEnter: handleMouseEnter
}, !hide && /*#__PURE__*/React__default.createElement("span", null, value.date()));
}
Day.propTypes = {
value: PropTypes.instanceOf(dayjs).isRequired,
startDate: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
endDate: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
max: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
min: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
isHovered: PropTypes.bool,
disabled: PropTypes.bool,
isCurrent: PropTypes.bool,
isSelected: PropTypes.bool,
isRanged: PropTypes.bool,
isHoveredBefore: PropTypes.bool,
onClick: PropTypes.func
};
Day.defaultProps = {
disabled: false,
isCurrent: false,
isSelected: false,
isRanged: false
};
dayjs.extend(isBetween);
dayjs.Ls.en.weekStart = 1;
function Days(_ref) {
let {
preview,
selected,
rangePicker,
weekPicker,
rangeStart,
rangeEnd,
onRangeChange,
onChange,
onPreviewChange,
hovered,
onHover,
maxPreview,
minPreview,
max,
min,
frozenDateRange,
markedDate
} = _ref;
const [contextConfigs] = useDatePickerContext();
const days = useMemo(() => chunk(getCalendarDays(preview.startOf('M')), 7), [preview]);
const handleRangeClick = useCallback(day => {
const range = getRange(rangeStart, rangeEnd, day);
onRangeChange && onRangeChange(range);
}, [rangeStart, rangeEnd, onRangeChange]);
const handleWeekClick = useCallback(day => {
const start = day.startOf('w');
const end = day.endOf('w');
onRangeChange && onRangeChange([start, end]);
}, [onRangeChange]);
const handleDiffMonthClick = useCallback(day => {
if (day.isBefore(preview) && !prevMonthAvailable(preview, minPreview)) return;
if (day.isAfter(preview) && !nextMonthAvailable(preview, maxPreview)) return;
onPreviewChange && onPreviewChange(day);
}, [preview, minPreview, maxPreview, onPreviewChange]);
const handleClick = useCallback(day => {
if (!day.isSame(preview, 'M')) {
handleDiffMonthClick(day);
// return; // TODO ::: check if this correct
}
rangePicker && handleRangeClick(day);
weekPicker && handleWeekClick(day);
!rangePicker && !weekPicker && onChange && onChange(day);
}, [handleRangeClick, handleWeekClick, handleDiffMonthClick, preview, rangePicker, weekPicker, onChange]);
const checkDayFrozenState = useCallback(item => {
const format = 'YYYY/MM/DD';
const formattedItem = dayjs(item.format(format));
return Array.isArray(frozenDateRange) && frozenDateRange.length && !!frozenDateRange.find(_ref2 => {
let {
from,
to
} = _ref2;
return from && to && formattedItem.isBetween(dayjs(from).format(format), dayjs(to).format(format), 'day', '[]');
});
}, [frozenDateRange]);
const checkDayDisabledState = useCallback(item => !item.isSame(preview, 'M') || min && item.endOf('day').isBefore(min) || max && item.isAfter(max), [min, max, preview]);
const checkDayHideState = useCallback(item => !item.isSame(preview, 'M'), [preview]);
const isHovered = useCallback(item => hovered && hovered.isSame(item) && !dayjs(hovered).isBetween(rangeStart, rangeEnd), [hovered, rangeStart, rangeEnd]);
const isSelected = useCallback(item => rangePicker || weekPicker ? item.isSame(rangeStart, 'd') || item.isSame(rangeEnd, 'd') : selected && selected.isSame(item, 'd') || false, [rangePicker, weekPicker, rangeStart, rangeEnd, selected]);
const isRanged = useCallback(item => Boolean((rangePicker || weekPicker) && rangeStart && dayjs(item).isBetween(rangeStart, rangeEnd || hovered, 'd', '[]')), [rangePicker, weekPicker, rangeStart, rangeEnd, hovered]);
return /*#__PURE__*/React__default.createElement("div", {
className: "calendar-days"
}, /*#__PURE__*/React__default.createElement("ul", null, contextConfigs.weekdays && contextConfigs.weekdays.map((item, i) => /*#__PURE__*/React__default.createElement("li", {
key: i,
className: "heading"
}, /*#__PURE__*/React__default.createElement("span", null, item.slice(0, contextConfigs.weekdaysSlice))))), days.map(items => /*#__PURE__*/React__default.createElement("ul", {
key: guid(),
className: classnames({
'hover-row': weekPicker
})
}, items.map(item => /*#__PURE__*/React__default.createElement(Day, {
isCurrent: !checkDayDisabledState(item) && item.isSame(markedDate || dayjs(), 'd'),
rangeStart: rangePicker && rangeStart && item.isSame(rangeStart, 'd'),
disabled: checkDayDisabledState(item) || checkDayFrozenState(item),
rangeEnd: rangePicker && rangeEnd && item.isSame(rangeEnd, 'd'),
isHoveredBefore: !!(rangeStart && rangeStart.isAfter(hovered)),
hide: checkDayHideState(item),
isSelected: isSelected(item),
isHovered: isHovered(item),
isRanged: isRanged(item),
startDate: rangeStart,
onClick: handleClick,
endDate: rangeEnd,
onHover: onHover,
value: item,
key: guid(),
max: max,
min: min
})))));
}
Days.defaultProps = {
preview: dayjs().startOf('M'),
rangeStart: null,
rangeEnd: null
};
function Months(_ref) {
let {
year,
selected,
onChange,
max,
min
} = _ref;
const [contextConfigs] = useDatePickerContext();
const months = useMemo(() => chunk(getCalendarMonths(year.startOf('y')), 3), [year]);
const monthName = useCallback(date => {
const month = contextConfigs.months[date.get('month')];
return month ? month.slice(0, contextConfigs.monthsSlice) : date.format('MMM');
}, [contextConfigs]);
const isMonthMaxOrMinChecker = useCallback(month => {
if (month && (max || min)) {
return max && dayjs(month).isAfter(dayjs(max), 'month') || min && dayjs(month).isBefore(dayjs(min), 'month');
}
}, [max, min]);
return /*#__PURE__*/React__default.createElement("ul", {
className: "month-years-select"
}, months.map(row => /*#__PURE__*/React__default.createElement("li", {
key: guid()
}, row.map(month => /*#__PURE__*/React__default.createElement(Button, {
key: guid(),
className: classnames('month-years-select-button', {
selected: selected && selected.isSame(month, 'M'),
disable: isMonthMaxOrMinChecker(month)
}),
onClick: () => onChange && onChange(month),
color: isMonthMaxOrMinChecker(month) ? 'default' : 'default',
flexibility: "content-size",
appearance: "minimal"
}, monthName(month))))));
}
Months.defaultProps = {
year: dayjs().startOf('y')
};
function Years(_ref) {
let {
previewYear,
selected,
onChange,
onPreviewChange,
max,
min
} = _ref;
const startOfDecade = useMemo(() => getStartOfDecade(previewYear), [previewYear]);
const years = useMemo(() => chunk(getCalendarYears(startOfDecade), 3), [startOfDecade]);
const isFromDecade = useCallback(year => year > startOfDecade - 1 && year < startOfDecade + 10, [startOfDecade]);
const checkYearEnableState = useCallback(year => {
if (!year) return false;
if (min && !max) return year >= dayjs(min).year();
if (!min && max) return year <= dayjs(max).year();
if (min && max) return max && year <= dayjs(max).year() && min && year >= dayjs(min).year();
return true;
}, [max, min]);
const handleClick = useCallback(year => {
isFromDecade(year) ? onChange && onChange(year) : onPreviewChange && onPreviewChange(year);
}, [isFromDecade, onPreviewChange, onChange]);
return /*#__PURE__*/React__default.createElement("ul", {
className: "month-years-select"
}, years.map(row => /*#__PURE__*/React__default.createElement("li", {
key: row[0]
}, row.map(year => /*#__PURE__*/React__default.createElement(Button, {
key: year,
className: classnames({
selected: selected && selected === year,
disabled: !isFromDecade(year) || !checkYearEnableState(year)
}),
onClick: () => handleClick(year),
color: "default",
flexibility: "content-size",
appearance: "minimal"
}, year)))));
}
Years.defaultProps = {
date: dayjs().year()
};
function Body(_ref) {
let {
view,
onViewChange,
preview,
onPreviewChange,
selected,
onChange,
weekPicker,
rangeStart,
rangeEnd,
onRangeChange,
monthPicker,
rangePicker,
hovered,
onHover,
maxPreview,
minPreview,
max,
min,
markedDate,
frozenDateRange
} = _ref;
const isRange = weekPicker || monthPicker || rangePicker;
const handleMonthChange = useCallback(month => {
if (!monthPicker) {
onPreviewChange(month);
onViewChange('days');
} else {
const start = month.startOf('M');
const end = month.endOf('M');
onPreviewChange(month);
onRangeChange([start, end]);
}
}, [monthPicker, onPreviewChange, onViewChange, onRangeChange]);
const handleYearChange = useCallback(year => {
onPreviewChange(preview.set('y', year));
onViewChange('months');
}, [preview, onPreviewChange, onViewChange]);
const handleFooterPreviewChange = useCallback(year => onPreviewChange(preview.set('y', year)), [preview, onPreviewChange]);
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, view === 'days' && /*#__PURE__*/React__default.createElement(Days, {
weekPicker: weekPicker,
preview: preview,
selected: selected,
onChange: onChange,
onPreviewChange: onPreviewChange,
rangeStart: rangeStart,
rangeEnd: rangeEnd,
onRangeChange: onRangeChange,
rangePicker: rangePicker,
hovered: hovered,
onHover: onHover,
maxPreview: maxPreview,
minPreview: minPreview,
max: max,
min: min,
markedDate: markedDate,
frozenDateRange: frozenDateRange
}), view === 'months' && /*#__PURE__*/React__default.createElement(Months, {
selected: isRange ? rangeStart : selected,
onChange: handleMonthChange,
year: preview.startOf('y'),
max: max,
min: min
}), view === 'years' && /*#__PURE__*/React__default.createElement(Years, {
selected: isRange ? rangeStart && rangeStart.year() : selected && selected.year(),
onChange: handleYearChange,
previewYear: preview.year(),
onPreviewChange: handleFooterPreviewChange,
max: max,
min: min
}));
}
function Header(_ref) {
let {
view,
months,
onViewChange,
preview,
onPreviewChange,
monthPicker,
rangePicker,
maxPreview,
minPreview
} = _ref;
const startOfDecade = useMemo(() => getStartOfDecade(preview.year()), [preview]);
const years = useMemo(() => "".concat(startOfDecade, " - ").concat(startOfDecade + 9), [startOfDecade]);
const month = useMemo(() => preview.get('month'), [preview]);
const prevYearVisible = !minPreview || preview.subtract(1, 'y').isAfter(minPreview, 'M');
const nextYearVisible = !maxPreview || preview.add(1, 'y').isBefore(maxPreview, 'M');
const prevMonthVisible = view === 'days' && prevMonthAvailable(preview, minPreview);
const nextMonthVisible = view === 'days' && nextMonthAvailable(preview, maxPreview);
const headerMonthsVisible = view === 'days';
const headerYearVisible = view !== 'years';
const headerYearsVisible = view === 'years';
const backButtonVisible = monthPicker ? view === 'years' : view !== 'days';
const handlePrevMonth = () => onPreviewChange(preview.subtract(1, 'M'));
const handleHeaderMonth = () => !rangePicker && onViewChange('months');
const handleHeaderYear = () => !rangePicker && onViewChange('years');
const handleNextMonth = () => onPreviewChange(preview.add(1, 'M'));
const handleBack = () => onViewChange(view === 'years' ? 'months' : 'days');
const handlePrevYear = useCallback(() => view !== 'years' ? onPreviewChange(preview.subtract(1, 'y')) : onPreviewChange(prevDecade(preview)), [view, onPreviewChange, preview]);
const handleNextYear = useCallback(() => view !== 'years' ? onPreviewChange(preview.add(1, 'y')) : onPreviewChange(nextDecade(preview)), [view, onPreviewChange, preview]);
return /*#__PURE__*/React__default.createElement("ul", {
className: "date-heading"
}, /*#__PURE__*/React__default.createElement("li", null, backButtonVisible && /*#__PURE__*/React__default.createElement(Icon, {
onClick: handleBack,
type: "bc-icon-arrow-back"
}), prevYearVisible && /*#__PURE__*/React__default.createElement(Icon, {
onClick: handlePrevYear,
type: "bc-icon-left-outline"
}), prevMonthVisible && /*#__PURE__*/React__default.createElement(Icon, {
onClick: handlePrevMonth,
type: "bc-icon-arrow-left-nav"
})), /*#__PURE__*/React__default.createElement("li", {
className: "title"
}, headerMonthsVisible && /*#__PURE__*/React__default.createElement("span", {
onClick: handleHeaderMonth,
className: classnames({
clickable: !rangePicker
})
}, months && months[month] || preview.format('MMMM'), "\xA0 \xA0"), headerYearVisible && /*#__PURE__*/React__default.createElement("span", {
onClick: handleHeaderYear,
className: classnames({
clickable: !rangePicker
})
}, preview.format('YYYY')), headerYearsVisible && /*#__PURE__*/React__default.createElement("span", null, years)), /*#__PURE__*/React__default.createElement("li", null, nextMonthVisible && /*#__PURE__*/React__default.createElement(Icon, {
onClick: handleNextMonth,
type: "bc-icon-arrow-right-nav"
}), nextYearVisible && /*#__PURE__*/React__default.createElement(Icon, {
onClick: handleNextYear,
type: "bc-icon-right-outline"
})));
}
function Footer(_ref) {
let {
onPreviewChange,
onSelect,
weekPicker,
monthPicker,
onRangeChange,
rangePicker,
todayText,
thisWeekText,
thisMonthText,
customOption,
isThisDateAllowed
} = _ref;
const handleClick = useCallback(() => {
const today = customOption ? dayjs.isDayjs(customOption === null || customOption === void 0 ? void 0 : customOption.date) ? customOption === null || customOption === void 0 ? void 0 : customOption.date : dayjs(customOption === null || customOption === void 0 ? void 0 : customOption.date) : dayjs().startOf('d');
onPreviewChange && onPreviewChange(today);
if (!weekPicker && !monthPicker) {
onSelect && onSelect(today);
} else {
const unit = weekPicker ? 'w' : 'M';
onRangeChange && onRangeChange([today.startOf(unit), today.endOf(unit)]);
}
}, [weekPicker, monthPicker, onPreviewChange, onSelect, onRangeChange, customOption]);
return /*#__PURE__*/React__default.createElement("li", {
className: "date-actions horizontal"
}, !rangePicker && /*#__PURE__*/React__default.createElement("ul", null, /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(Button, {
color: "default",
appearance: "minimal",
flexibility: "default",
onClick: handleClick,
disabled: !isThisDateAllowed
}, customOption ? customOption.label : weekPicker ? thisWeekText : monthPicker ? thisMonthText : todayText))));
}
Footer.defaultProps = {
todayText: 'Today',
thisWeekText: 'This Week',
thisMonthText: 'This Month'
};
const format = value => "".concat(String(value).length === 1 ? '0' : '').concat(value);
function TimeInput(_ref) {
let {
value,
onChange
} = _ref;
const handleChange = useCallback((val, unit) => {
if (val || val === 0) {
onChange && onChange(value.set(unit, value.get(unit) + val));
}
}, [value, onChange]);
return /*#__PURE__*/React__default.createElement("ul", {
className: "time-inputs-str"
}, /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(Button, {
onClick: () => handleChange(1, 'h'),
color: "default",
appearance: "minimal",
icon: "bc-icon-arrow-up"
}), /*#__PURE__*/React__default.createElement(Button, {
onClick: () => handleChange(-1, 'h'),
color: "default",
appearance: "minimal",
icon: "bc-icon-arrow-down"
}), /*#__PURE__*/React__default.createElement("div", {
className: "time-input-el"
}, format(value.get('h')))), /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement("span", null, ":")), /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(Button, {
onClick: () => handleChange(1, 'm'),
color: "default",
appearance: "minimal",
icon: "bc-icon-arrow-up"
}), /*#__PURE__*/React__default.createElement(Button, {
onClick: () => handleChange(-1, 'm'),
color: "default",
appearance: "minimal",
icon: "bc-icon-arrow-down"
}), /*#__PURE__*/React__default.createElement("div", {
className: "time-input-el"
}, format(value.get('m')))), /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement("span", null, ":")), /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(Button, {
onClick: () => handleChange(1, 's'),
color: "default",
appearance: "minimal",
icon: "bc-icon-arrow-up"
}), /*#__PURE__*/React__default.createElement(Button, {
onClick: () => handleChange(-1, 's'),
color: "default",
appearance: "minimal",
icon: "bc-icon-arrow-down"
}), /*#__PURE__*/React__default.createElement("div", {
className: "time-input-el"
}, format(value.get('s')))));
}
const Calendar = /*#__PURE__*/forwardRef((props, ref) => {
const {
onChange,
defaultValue,
weekPicker,
monthPicker,
className,
rangePicker,
defaultPreview,
rangeStart,
rangeEnd,
onRangeChange,
defaultTimeValues,
hovered,
onHover,
onPreviewChange,
maxPreview,
minPreview,
max,
min,
withTime,
time,
onTimeChange,
todayText,
thisWeekText,
thisMonthText,
value,
markedDate,
customOption,
frozenDateRange
} = props;
const [contextConfigs] = useDatePickerContext();
const defaultView = monthPicker ? 'months' : 'days';
const [view, setView] = useState(defaultView);
const [isThisDateAllowed, setIsThisDateAllowed] = useState(true);
const [previewState, setPreviewState] = useState(() => defaultPreview || dayjs());
const [selected, setSelected] = useState(defaultValue);
const isControlled = ('preview' in props);
const preview = isControlled ? props.preview : previewState;
const handleSelect = useCallback(value => {
setSelected(value);
onChange && onChange(value);
}, [onChange]);
const handlePreviewChange = useCallback(preview => {
!isControlled && setPreviewState(preview);
onPreviewChange && onPreviewChange(preview);
}, [onPreviewChange, isControlled]);
const handleRangeChange = useCallback(_ref => {
let [start, end] = _ref;
const formattedStart = start ? addTime(start.startOf('d'), defaultTimeValues[0]) : start;
const formattedEnd = end ? addTime(end.startOf('d'), defaultTimeValues[1]) : end;
onRangeChange([formattedStart, formattedEnd]);
}, [withTime, defaultTimeValues, onRangeChange]);
useEffect(() => {
const date = dayjsWithPlugins(value);
if (date.isValid()) {
setSelected(date);
setPreviewState(date);
}
}, [value]);
useEffect(() => {
if (min && !max) setIsThisDateAllowed(dayjs(min).isSameOrBefore(dayjs(), 'date'));
if (!min && max) setIsThisDateAllowed(dayjs(max).isSameOrAfter(dayjs(), 'date'));
if (min && max) setIsThisDateAllowed(dayjs(min).isSameOrBefore(dayjs(), 'date') && dayjs(max).isSameOrAfter(dayjs(), 'date'));
}, [max, min]);
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("li", {
className: classnames('date-box', className),
ref: ref
}, /*#__PURE__*/React__default.createElement(Header, {
rangePicker: rangePicker,
view: view,
onViewChange: setView,
preview: preview,
onPreviewChange: handlePreviewChange,
monthPicker: monthPicker,
maxPreview: maxPreview,
minPreview: minPreview,
months: contextConfigs.months
}), /*#__PURE__*/React__default.createElement(Body, {
view: view,
rangePicker: rangePicker,
onViewChange: setView,
preview: preview,
onPreviewChange: handlePreviewChange,
selected: selected,
onChange: handleSelect,
weekPicker: weekPicker,
monthPicker: monthPicker,
rangeStart: rangeStart,
rangeEnd: rangeEnd,
onRangeChange: handleRangeChange,
hovered: hovered,
onHover: onHover,
maxPreview: maxPreview,
minPreview: minPreview,
max: max,
min: min,
markedDate: markedDate,
frozenDateRange: frozenDateRange
}), withTime && time && /*#__PURE__*/React__default.createElement(TimeInput, {
value: time,
onChange: onTimeChange
})), /*#__PURE__*/React__default.createElement(Footer, {
onSelect: handleSelect,
onPreviewChange: handlePreviewChange,
weekPicker: weekPicker,
monthPicker: monthPicker,
onRangeChange: handleRangeChange,
rangePicker: rangePicker,
todayText: todayText || contextConfigs.buttons.today,
thisWeekText: thisWeekText || contextConfigs.buttons.thisWeek,
thisMonthText: thisMonthText || contextConfigs.buttons.thisMonth,
customOption: customOption,
isThisDateAllowed: isThisDateAllowed
}));
});
const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
let {
defaultValue,
onChange,
className,
todayText,
defaultPreview,
value,
min,
max,
format,
withTime,
onTimeChange,
markedDate,
customOption,
frozenDateRange,
...restProps
} = _ref;
const date = useMemo(() => value && dayjs(value), [value]);
return /*#__PURE__*/React__default.createElement("ul", _extends({
ref: ref,
className: classnames(className, 'datepicker-holder')
}, restProps), /*#__PURE__*/React__default.createElement(Calendar, {
max: max,
min: min,
frozenDateRange: frozenDateRange,
defaultValue: defaultValue && dayjs(defaultValue),
defaultPreview: defaultPreview && dayjs(defaultPreview),
onChange: date => onChange(date.toDate()),
time: date,
value: date,
format: format,
withTime: withTime,
todayText: todayText,
onTimeChange: onTimeChange,
markedDate: markedDate,
customOption: customOption
}));
});
DatePicker.propTypes = {
/**
* Initial datepicker value.
*/
defaultValue: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
/**
* Initial value for datepicker preview
*/
defaultPreview: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
/**
* Max specifies the maximum value allowed for datepicker
*/
max: PropTypes.instanceOf(dayjs),
/**
* Min specifies the minimum value allowed for datepicker
*/
min: PropTypes.instanceOf(dayjs),
/**
* Fires event when user changes date[icker value
* (date: Date) => void
*/
onChange: PropTypes.func,
/**
* Additional classname which will apply to datepicker holder ul element
*/
className: PropTypes.string,
/**
* Custom text for today button inside footer.
* Default value is `Today`
*/
todayText: PropTypes.string,
/**
* MarkedDate specifies the default mark date
*/
markedDate: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
/**
* CustomOption is an object that is used to add a custom button to set a custom date.
*/
customOption: PropTypes.shape({
/**
* Label of custom button
*/
label: PropTypes.string,
/**
* Date of custom button
*/
date: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number])
})
};
function WeekPicker(_ref) {
let {
onChange,
rangeStartDefault,
rangeEndDefault,
className,
thisWeekText,
defaultTimeValues,
...restProps
} = _ref;
const [rangeStart, setRangeStart] = useState(rangeStartDefault && dayjs(rangeStartDefault));
const [rangeEnd, setRangeEnd] = useState(rangeEndDefault && dayjs(rangeEndDefault));
const handleRangeChange = useCallback(_ref2 => {
let [start, end] = _ref2;
setRangeStart(start);
setRangeEnd(end);
onChange && onChange([start.toDate(), end.toDate()]);
}, [onChange]);
return /*#__PURE__*/React__default.createElement("ul", _extends({
className: classnames(className, 'datepicker-holder')
}, restProps), /*#__PURE__*/React__default.createElement(Calendar, {
weekPicker: true,
rangeStart: rangeStart,
rangeEnd: rangeEnd,
onRangeChange: handleRangeChange,
thisWeekText: thisWeekText,
defaultTimeValues: defaultTimeValues
}));
}
WeekPicker.propTypes = {
/**
* Fires event when user changes datepicker value
* ([startDate: Date, endDate: Date]) => void
*/
onChange: PropTypes.func,
/**
* Setting default time value when date range changed
*/
defaultTimeValues: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))),
/**
* Initial value for start date
*/
rangeStartDefault: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
/**
* Initial value for end date
*/
rangeEndDefault: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
/**
* Additional classname which will apply to datepicker holder ul element
*/
className: PropTypes.string,
/**
* Custom text for this week button inside footer.
* Default value is `This Week`
*/
thisWeekText: PropTypes.string
};
WeekPicker.defaultProps = {
defaultTimeValues: [['00', '00', '00'], ['23', '59', '59']],
onChange: noop
};
function MonthPicker(_ref) {
let {
onChange,
rangeStartDefault,
rangeEndDefault,
className,
thisMonthText,
defaultTimeValues,
max,
min,
...restProps
} = _ref;
const [rangeStart, setRangeStart] = useState(rangeStartDefault && dayjs(rangeStartDefault));
const [rangeEnd, setRangeEnd] = useState(rangeEndDefault && dayjs(rangeEndDefault));
const handleRangeChange = useCallback(_ref2 => {
let [start, end] = _ref2;
setRangeStart(start);
setRangeEnd(end);
onChange && onChange([start.toDate(), end.toDate()]);
}, [onChange]);
return /*#__PURE__*/React__default.createElement("ul", _extends({
className: classnames(className, 'datepicker-holder')
}, restProps), /*#__PURE__*/React__default.createElement(Calendar, {
max: max,
min: min,
monthPicker: true,
rangeStart: rangeStart,
rangeEnd: rangeEnd,
onRangeChange: handleRangeChange,
thisMonthText: thisMonthText,
defaultTimeValues: defaultTimeValues
}));
}
MonthPicker.propTypes = {
/**
* Fires event when user changes datepicker value
* ([startDate: date endDate: date]) => void
*/
onChange: PropTypes.func,
/**
* Setting default time value when date range changed
*/
defaultTimeValues: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))),
/**
* Initial value for start date
*/
rangeStartDefault: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
/**
* Initial value for end date
*/
rangeEndDefault: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
/**
* Max specifies the maximum value allowed for monthPicker
*/
max: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
/**
* Min specifies the minimum value allowed for monthPicker
*/
min: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
/**
* Additional classname which will apply to datepicker holder ul element
*/
className: PropTypes.string,
/**
* Custom text for this month button inside footer.
* Default value is `This Month`
*/
thisMonthText: PropTypes.string
};
MonthPicker.defaultProps = {
defaultTimeValues: [['00', '00', '00'], ['23', '59', '59']],
onChange: noop
};
const getDefaultOptions = function (_ref) {
let [startTime, endTime] = _ref;
let actionsTextes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
return [{
name: actionsTextes.today,
start: addTime(dayjs().startOf('d'), startTime),
end: addTime(dayjs().add(1, 'd').startOf('d'), endTime)
}, {
name: actionsTextes.yesterday,
start: addTime(dayjs().subtract(1, 'd').startOf('d'), startTime),
end: addTime(dayjs().startOf('d'), endTime)
}, {
name: actionsTextes.last7Days,
start: addTime(dayjs().subtract(6, 'd').startOf('d'), startTime),
end: addTime(dayjs().endOf('d'), endTime)
}, {
name: actionsTextes.last30Days,
start: addTime(dayjs().subtract(29, 'd').startOf('d'), startTime),
end: addTime(dayjs().startOf('d'), endTime)
}, {
name: actionsTextes.thisMonth,
start: addTime(dayjs().startOf('M').startOf('d'), startTime),
end: addTime(dayjs().endOf('M').startOf('d'), endTime)
}];
};
const getOptionIndex = (rangeStart, rangeEnd, options) => options.findIndex(_ref2 => {
let {
start,
end
} = _ref2;
return rangeStart && rangeEnd && start.isSame(rangeStart, 'd') && end.isSame(rangeEnd, 'd');
});
function RangeOption(_ref) {
let {
start,
end,
selected,
children,
onClick,
...restProps
} = _ref;
const handleClick = useCallback(() => onClick && onClick([start, end]), [onClick, start, end]);
return /*#__PURE__*/React__default.createElement(Button, _extends({
appearance: selected ? 'default' : 'minimal',
color: "default",
flexibility: "full-width",
onClick: handleClick
}, restProps), children);
}
function RangeOptions(_ref2) {
let {
rangeStart,
rangeEnd,
onClick,
customOptions,
defaultTimeValues,
customText
} = _ref2;
const [contextConfigs] = useDatePickerContext();
const options = useMemo(() => customOptions ? customOptions.map(_ref3 => {
let {
start,
end,
...props
} = _ref3;
return {
...props,
start: dayjs.isDayjs(start) ? start : dayjs(start),
end: dayjs.isDayjs(end) ? end : dayjs(end)
};
}) : getDefaultOptions(defaultTimeValues, contextConfigs.actions), [customOptions, contextConfigs]);
const selectedIndex = useMemo(() => getOptionIndex(rangeStart, rangeEnd, options), [rangeStart, rangeEnd, options]);
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, options.map((_ref4, i) => {
let {
start,
end,
name
} = _ref4;
return /*#__PURE__*/React__default.createElement(RangeOption, {
key: i,
start: start,
end: end,
selected: i === selectedIndex,
onClick: onClick
}, name);
}), /*#__PURE__*/React__default.createElement(RangeOption, {
className: "pointer-events-none",
selected: rangeStart && rangeEnd && selectedIndex === -1
}, customText || contextConfigs.actions.custom));
}
const RangePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
let {
onChange,
onApply,
rangeStartDefault,
rangeEndDefault,
withRangeOptions,
withTime,
defaultTimeValues,
className,
todayText,
applyText,
customText,
rangeOptions,
max,
min,
value,
withApply,
markedDate,
frozenDateRange,
...restProps
} = _ref;
const [contextConfigs] = useDatePickerContext();
const [hovered, setHovered] = useState();
const [rangeStart, setRangeStart] = useState(() => rangeStartDefault && dayjs(rangeStartDefault));
const [rangeEnd, setRangeEnd] = useState(() => rangeEndDefault && dayjs(rangeEndDefault));
const [firstPreview, setFirstPreview] = useState(() => rangeStart || dayjs());
const [secondPreview, setSecondPreview] = useState(() => rangeEnd ? rangeEnd.isSame(rangeStart, 'M') ? rangeEnd.add(1, 'M') : rangeEnd : dayjs().add(1, 'M'));
const setPreviews = useCallback((start, end) => {
setFirstPreview(start);
setSecondPreview(start.isSame(end, 'M') ? end.add(1, 'M') : end);
}, []);
const handleRangeChange = useCallback(_ref2 => {
let [startDate, endDate] = _ref2;
const start = withTime ? startDate : startDate && startDate.startOf('d');
const end = withTime ? endDate : endDate && endDate.endOf('d');
setRangeStart(start);
setRangeEnd(end);
start && end && setPreviews(start, end);
onChange([start, end]);
}, [onChange, setPreviews, withTime]);
const handleToday = useCallback(() => {
const today = dayjs();
handleRangeChange([today.startOf('d'), today.endOf('d')]);
}, [handleRangeChange]);
const handleApply = useCallback(() => {
const diff = dayjsWithPlugins(rangeStart).diff(rangeEnd, 's');
const endDate = diff > 0 ? rangeEnd.add(diff, 's') : rangeEnd;
onApply && onApply([rangeStart.toDate(), endDate.toDate()]);
}, [onApply, rangeStart, rangeEnd]);
const handleFirstPreviewChange = useCallback(preview => {
setFirstPreview(preview);
if (!rangeEnd) {
// We must check this after, maybe this will mote cover all cases.
setSecondPreview(rangeStart && rangeStart.isAfter(preview) ? rangeStart : preview.add(1, 'M'));
}
}, [rangeStart, rangeEnd]);
const handleSecondPreviewChange = useCallback(preview => {
setSecondPreview(preview);
if (!rangeEnd) {
setFirstPreview(rangeStart || preview.subtract(1, 'M'));
}
}, [rangeStart, rangeEnd]);
useEffect(() => {
const startDate = dayjsWithPlugins(value && value[0] || null);
const endDate = dayjsWithPlugins(value && value[1] || null);
if (startDate.isValid() && endDate.isValid()) {
setRangeStart(startDate);
setRangeEnd(endDate);
setFirstPreview(startDate);
setSecondPreview(endDate.isSame(startDate, 'M') ? endDate.add(1, 'M') : endDate);
}
}, [value]);
return /*#__PURE__*/React__default.createElement("ul", _extends({
className: classnames('datepicker-holder', 'range-mode', {
'simple-range-mode': !withRangeOptions
}),
ref: ref
}, restProps), /*#__PURE__*/React__default.createElement(Calendar, {
onRangeChange: handleRangeChange,
defaultTimeValues: defaultTimeValues,
className: "date-box-1",
rangePicker: true,
rangeStart: rangeStart,
rangeEnd: rangeEnd,
hovered: hovered,
onHover: rangeStart ? setHovered : null,
onPreviewChange: handleFirstPreviewChange,
preview: firstPreview,
maxPreview: secondPreview,
withTime: withTime,
time: rangeStart || dayjs().startOf('d'),
onTimeChange: start => handleRangeChange([start, rangeEnd]),
max: max,
min: min,
value: value && value[0],
markedDate: markedDate,
frozenDateRange: frozenDateRange
}), /*#__PURE__*/React__default.createElement(Calendar, {
onRangeChange: handleRangeChange,
defaultTimeValues: defaultTimeValues,
className: "date-box-2",
rangePicker: true,
rangeStart: rangeStart,
rangeEnd: rangeEnd,
hovered: hovered,
onHover: rangeStart ? setHovered : null,
preview: secondPreview,
onPreviewChange: handleSecond