@razorpay/blade
Version:
The Design System that powers Razorpay
202 lines (199 loc) • 8.45 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import dayjs from 'dayjs';
import React__default from 'react';
import { useDatesContext, DatePicker } from '@mantine/dates';
import { CalendarHeader } from './CalendarHeader.web.js';
import { CalendarStyles, CalendarGradientStyles } from './CalendarStyles.web.js';
import { useUncontrolledDates } from './useControlledDates.js';
import { pickerToLevel, levelToPicker, classes } from './constants.js';
import { shiftTimezone } from './shiftTimezone.js';
import { useControllableState } from '../../utils/useControllable.js';
import { useIsMobile } from '../../utils/useIsMobile.js';
import '../../utils/logger/index.js';
import '../../utils/metaAttribute/index.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { throwBladeError } from '../../utils/logger/logger.js';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
var _excluded = ["firstDayOfWeek", "selectionType", "allowSingleDateInRange", "defaultPicker", "picker", "onPickerChange", "date", "defaultDate", "onDateChange", "onNext", "onPrevious", "presets", "showLevelChangeLink", "selectedValue"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Calendar = function Calendar(_ref) {
var _ref$firstDayOfWeek = _ref.firstDayOfWeek,
firstDayOfWeek = _ref$firstDayOfWeek === void 0 ? 0 : _ref$firstDayOfWeek,
selectionType = _ref.selectionType,
allowSingleDateInRange = _ref.allowSingleDateInRange,
_ref$defaultPicker = _ref.defaultPicker,
defaultPicker = _ref$defaultPicker === void 0 ? 'day' : _ref$defaultPicker,
picker = _ref.picker,
onPickerChange = _ref.onPickerChange,
date = _ref.date,
defaultDate = _ref.defaultDate,
onDateChange = _ref.onDateChange,
onNext = _ref.onNext,
onPrevious = _ref.onPrevious,
presets = _ref.presets,
showLevelChangeLink = _ref.showLevelChangeLink,
selectedValue = _ref.selectedValue,
props = _objectWithoutProperties(_ref, _excluded);
var isRange = selectionType === 'range';
var _useControllableState = useControllableState({
defaultValue: pickerToLevel[defaultPicker],
value: pickerToLevel[picker],
onChange: function onChange(level) {
onPickerChange === null || onPickerChange === void 0 ? void 0 : onPickerChange(levelToPicker[level]);
}
}),
_useControllableState2 = _slicedToArray(_useControllableState, 2),
level = _useControllableState2[0],
setLevel = _useControllableState2[1];
if (true) {
if (isRange && level !== 'month') {
throwBladeError({
message: "Cannot use range DatePicker with pickerType: ".concat(levelToPicker[level], ", Only \"day\" is supported"),
moduleName: 'DatePicker'
});
}
}
var _useUncontrolledDates = useUncontrolledDates({
type: 'default',
value: date,
defaultValue: defaultDate,
onChange: onDateChange
}),
_useUncontrolledDates2 = _slicedToArray(_useUncontrolledDates, 2),
_date = _useUncontrolledDates2[0],
setDate = _useUncontrolledDates2[1];
var dateContext = useDatesContext();
var isMobile = useIsMobile();
var currentDate = React__default.useMemo(function () {
if (_date) {
return _date;
}
var isRangeSelection = Array.isArray(selectedValue);
if (isRangeSelection && selectedValue[0]) {
return selectedValue[0];
}
if (!isRangeSelection && selectedValue) {
return selectedValue;
}
return shiftTimezone('add', new Date());
}, [_date, selectedValue]);
var numberOfColumns = isMobile || !isRange ? 1 : 2;
var columnsToScroll = numberOfColumns;
var handleNextMonth = function handleNextMonth() {
var nextDate = dayjs(currentDate).add(columnsToScroll, 'month').toDate();
onNext === null || onNext === void 0 ? void 0 : onNext({
date: nextDate,
type: 'month'
});
setDate(nextDate);
};
var handlePreviousMonth = function handlePreviousMonth() {
var nextDate = dayjs(currentDate).subtract(columnsToScroll, 'month').toDate();
onPrevious === null || onPrevious === void 0 ? void 0 : onPrevious({
date: nextDate,
type: 'month'
});
setDate(nextDate);
};
var handleNextYear = function handleNextYear() {
var nextDate = dayjs(currentDate).add(columnsToScroll, 'year').toDate();
onNext === null || onNext === void 0 ? void 0 : onNext({
date: nextDate,
type: 'year'
});
setDate(nextDate);
};
var handlePreviousYear = function handlePreviousYear() {
var nextDate = dayjs(currentDate).subtract(columnsToScroll, 'year').toDate();
onPrevious === null || onPrevious === void 0 ? void 0 : onPrevious({
date: nextDate,
type: 'year'
});
setDate(nextDate);
};
var handleNextDecade = function handleNextDecade() {
var nextDate = dayjs(currentDate).add(10 * columnsToScroll, 'year').toDate();
onNext === null || onNext === void 0 ? void 0 : onNext({
date: nextDate,
type: 'decade'
});
setDate(nextDate);
};
var handlePreviousDecade = function handlePreviousDecade() {
var nextDate = dayjs(currentDate).subtract(10 * columnsToScroll, 'year').toDate();
onPrevious === null || onPrevious === void 0 ? void 0 : onPrevious({
date: nextDate,
type: 'decade'
});
setDate(nextDate);
};
return /*#__PURE__*/jsxs(CalendarStyles, _objectSpread(_objectSpread({
display: "flex",
flexDirection: "column",
gap: "spacing.7",
pickerType: levelToPicker[level]
}, metaAttribute({
name: MetaConstants.Calendar
})), {}, {
children: [/*#__PURE__*/jsx(CalendarHeader, {
isRange: isRange,
date: currentDate,
onLevelChange: function onLevelChange(level) {
return setLevel(function () {
return level;
});
},
pickerType: levelToPicker[level],
onNextMonth: handleNextMonth,
onPreviousMonth: handlePreviousMonth,
onNextDecade: handleNextDecade,
onPreviousDecade: handlePreviousDecade,
onNextYear: handleNextYear,
onPreviousYear: handlePreviousYear,
showLevelChangeLink: showLevelChangeLink
}), /*#__PURE__*/jsx(CalendarGradientStyles, {
isRange: isRange,
date: currentDate,
children: /*#__PURE__*/jsx(DatePicker, _objectSpread({
withCellSpacing: false,
type: isRange ? 'range' : 'default',
date: currentDate,
locale: dateContext.locale,
level: level,
onDateChange: setDate,
onLevelChange: function onLevelChange(level) {
return setLevel(function () {
return level;
});
},
numberOfColumns: numberOfColumns,
weekdayFormat: "ddd",
firstDayOfWeek: firstDayOfWeek
// @ts-expect-error unable to narrow props based on `type`
,
allowSingleDateInRange: allowSingleDateInRange,
classNames: {
monthLevelGroup: classes.levelsGroup,
yearLevelGroup: classes.levelsGroup,
decadeLevelGroup: classes.levelsGroup,
day: classes.dayCell,
monthsListCell: classes.yearsListControl,
yearsListCell: classes.monthsListControl,
monthCell: classes.dayCell,
calendarHeader: classes.calendarHeader,
monthRow: classes.row,
yearsListRow: classes.row,
monthsListRow: classes.row,
weekdaysRow: classes.row,
weekday: classes.weekday
}
}, props))
})]
}));
};
export { Calendar };
//# sourceMappingURL=Calendar.web.js.map