tdesign-react
Version:
TDesign Component for React
598 lines (594 loc) • 24 kB
JavaScript
/**
* tdesign v1.15.1
* (c) 2025 tdesign
* @license MIT
*/
import { _ as _toConsumableArray } from '../_chunks/dep-87d110df.js';
import { _ as _slicedToArray } from '../_chunks/dep-48805ab8.js';
import { _ as _defineProperty } from '../_chunks/dep-cb0a3966.js';
import React, { forwardRef, useState, useMemo, useCallback, useEffect } from 'react';
import dayjs from 'dayjs';
import { Button } from '../button/index.js';
import { Select } from '../select/index.js';
import { Radio } from '../radio/index.js';
import CheckTag from '../tag/CheckTag.js';
import noop from '../_util/noop.js';
import usePrefixClass from './hooks/usePrefixClass.js';
import useIsomorphicLayoutEffect from '../hooks/useLayoutEffect.js';
import { useLocaleReceiver } from '../locale/LocalReceiver.js';
import { minYear, createDateList, createMonthList, blockName } from './_util.js';
import CalendarCellComp from './CalendarCellComp.js';
import { calendarDefaultProps } from './defaultProps.js';
import useDefaultProps from '../hooks/useDefaultProps.js';
import '../_chunks/dep-026a4c6b.js';
import '../_chunks/dep-eca3a3de.js';
import '../button/Button.js';
import '../_chunks/dep-6b660ef0.js';
import 'classnames';
import '../hooks/useConfig.js';
import '../config-provider/ConfigContext.js';
import 'lodash-es';
import '../_chunks/dep-f97636ce.js';
import '../_chunks/dep-9dbbf468.js';
import '../hooks/useDomRefCallback.js';
import '../hooks/useRipple.js';
import '../_chunks/dep-c48e2ca1.js';
import '../hooks/useAnimation.js';
import '../_chunks/dep-3a09424a.js';
import '../loading/index.js';
import '../loading/Loading.js';
import '../common/Portal.js';
import 'react-dom';
import '../loading/gradient.js';
import '../_chunks/dep-6af6bc60.js';
import '../loading/defaultProps.js';
import '../loading/plugin.js';
import '../_util/react-render.js';
import '../_chunks/dep-52ff3837.js';
import '../common/PluginContainer.js';
import '../config-provider/ConfigProvider.js';
import '../button/defaultProps.js';
import '../_util/parseTNode.js';
import '../_chunks/dep-b908e1fe.js';
import '../select/base/Select.js';
import '../_util/composeRefs.js';
import '../_util/forwardRefWithStatics.js';
import 'hoist-non-react-statics';
import '../_util/helper.js';
import '../common/FakeArrow.js';
import '../hooks/useControlled.js';
import '../select-input/index.js';
import '../select-input/SelectInput.js';
import '../popup/index.js';
import '../popup/Popup.js';
import 'react-transition-group';
import '../_util/ref.js';
import 'react-is';
import '../_util/isFragment.js';
import '../hooks/useAttach.js';
import '../hooks/useMutationObserver.js';
import '../hooks/useLatest.js';
import '../hooks/usePopper.js';
import '@popperjs/core';
import 'react-fast-compare';
import '../hooks/useWindowSize.js';
import '../popup/defaultProps.js';
import '../popup/hooks/useTrigger.js';
import '../_util/listener.js';
import '../popup/utils/transition.js';
import '../popup/PopupPlugin.js';
import '../select-input/useSingle.js';
import '../input/index.js';
import '../input/Input.js';
import 'tdesign-icons-react';
import '../hooks/useGlobalIcon.js';
import '../input/InputGroup.js';
import '../input/defaultProps.js';
import '../input/useLengthLimit.js';
import '../select-input/useMultiple.js';
import '../tag-input/index.js';
import '../tag-input/TagInput.js';
import '../hooks/useDragSorter.js';
import '../hooks/useEventCallback.js';
import '../tag-input/defaultProps.js';
import '../tag-input/useHover.js';
import '../tag-input/useTagList.js';
import '../tag/index.js';
import '../tag/Tag.js';
import '../_chunks/dep-3c3d29db.js';
import '../tag/defaultProps.js';
import '../tag/CheckTagGroup.js';
import '../_chunks/dep-dbcf7b24.js';
import '../tag-input/useTagScroll.js';
import '../select-input/useOverlayInnerStyle.js';
import '../select-input/defaultProps.js';
import '../select/defaultProps.js';
import '../_chunks/dep-72472aa7.js';
import '../select/base/OptionGroup.js';
import '../select/base/Option.js';
import '../select/base/PopupContent.js';
import '../select/hooks/usePanelVirtualScroll.js';
import '../hooks/useVirtualScroll.js';
import '../_chunks/dep-7a2a9fe8.js';
import '../common/Check.js';
import '../_chunks/dep-4450afc0.js';
import '../hooks/useCommonClassName.js';
import '../radio/defaultProps.js';
import '../radio/useKeyboard.js';
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 getDefaultControllerConfigData = function getDefaultControllerConfigData() {
var visible = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
return {
visible: visible,
disabled: false,
mode: {
visible: true,
radioGroupProps: {}
},
year: {
visible: true,
selectProps: {
popupProps: {
overlayInnerStyle: {
width: "110px"
}
}
}
},
month: {
visible: true,
selectProps: {
popupProps: {
overlayInnerStyle: {
width: "90px"
}
}
}
},
weekend: {
visible: true,
showWeekendButtonProps: {},
hideWeekendButtonProps: {}
},
current: {
visible: true,
currentDayButtonProps: {},
currentMonthButtonProps: {}
}
};
};
var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
var _useDefaultProps = useDefaultProps(props, calendarDefaultProps),
className = _useDefaultProps.className,
style = _useDefaultProps.style,
modeFromProps = _useDefaultProps.mode,
valueFromProps = _useDefaultProps.value,
_useDefaultProps$firs = _useDefaultProps.firstDayOfWeek,
firstDayOfWeek = _useDefaultProps$firs === void 0 ? 1 : _useDefaultProps$firs,
format = _useDefaultProps.format,
range = _useDefaultProps.range,
head = _useDefaultProps.head,
cell = _useDefaultProps.cell,
cellAppend = _useDefaultProps.cellAppend,
week = _useDefaultProps.week,
theme = _useDefaultProps.theme,
controllerConfig = _useDefaultProps.controllerConfig,
_useDefaultProps$isSh = _useDefaultProps.isShowWeekendDefault,
isShowWeekendDefault = _useDefaultProps$isSh === void 0 ? true : _useDefaultProps$isSh,
_useDefaultProps$prev = _useDefaultProps.preventCellContextmenu,
preventCellContextmenu = _useDefaultProps$prev === void 0 ? false : _useDefaultProps$prev,
monthProps = _useDefaultProps.month,
yearProps = _useDefaultProps.year,
_useDefaultProps$onCo = _useDefaultProps.onControllerChange,
onControllerChange = _useDefaultProps$onCo === void 0 ? noop : _useDefaultProps$onCo,
_useDefaultProps$onCe = _useDefaultProps.onCellClick,
onCellClick = _useDefaultProps$onCe === void 0 ? noop : _useDefaultProps$onCe,
_useDefaultProps$onCe2 = _useDefaultProps.onCellDoubleClick,
onCellDoubleClick = _useDefaultProps$onCe2 === void 0 ? noop : _useDefaultProps$onCe2,
_useDefaultProps$onCe3 = _useDefaultProps.onCellRightClick,
onCellRightClick = _useDefaultProps$onCe3 === void 0 ? noop : _useDefaultProps$onCe3,
_useDefaultProps$onMo = _useDefaultProps.onMonthChange,
onMonthChange = _useDefaultProps$onMo === void 0 ? noop : _useDefaultProps$onMo,
fillWithZero = _useDefaultProps.fillWithZero;
var controllerConfigData = typeof controllerConfig === "boolean" ? getDefaultControllerConfigData(controllerConfig) : _objectSpread(_objectSpread({}, getDefaultControllerConfigData()), controllerConfig);
if (typeof controllerConfig !== "boolean") {
if (monthProps) {
controllerConfigData.month.visible = true;
}
if (yearProps) {
controllerConfigData.year.visible = true;
}
}
var visible = controllerConfigData.visible,
disabled = controllerConfigData.disabled,
modeFromConfig = controllerConfigData.mode,
yearFromConfig = controllerConfigData.year,
monthFromConfig = controllerConfigData.month,
weekend = controllerConfigData.weekend,
current = controllerConfigData.current;
var _modeFromConfig$visib = modeFromConfig.visible,
visibleForMode = _modeFromConfig$visib === void 0 ? true : _modeFromConfig$visib,
_modeFromConfig$radio = modeFromConfig.radioGroupProps,
radioGroupPropsForMode = _modeFromConfig$radio === void 0 ? {} : _modeFromConfig$radio;
var _yearFromConfig$visib = yearFromConfig.visible,
visibleForYear = _yearFromConfig$visib === void 0 ? true : _yearFromConfig$visib,
_yearFromConfig$selec = yearFromConfig.selectProps,
selectPropsForYear = _yearFromConfig$selec === void 0 ? {} : _yearFromConfig$selec;
var _monthFromConfig$visi = monthFromConfig.visible,
visibleForMonth = _monthFromConfig$visi === void 0 ? true : _monthFromConfig$visi,
_monthFromConfig$sele = monthFromConfig.selectProps,
selectPropsForMonth = _monthFromConfig$sele === void 0 ? {} : _monthFromConfig$sele;
var _weekend$visible = weekend.visible,
visibleForWeekendToggle = _weekend$visible === void 0 ? true : _weekend$visible,
_weekend$showWeekendB = weekend.showWeekendButtonProps,
showWeekendButtonProps = _weekend$showWeekendB === void 0 ? {} : _weekend$showWeekendB,
_weekend$hideWeekendB = weekend.hideWeekendButtonProps,
hideWeekendButtonProps = _weekend$hideWeekendB === void 0 ? {} : _weekend$hideWeekendB;
var _current$visible = current.visible,
visibleForCurrent = _current$visible === void 0 ? true : _current$visible,
_current$currentDayBu = current.currentDayButtonProps,
currentDayButtonProps = _current$currentDayBu === void 0 ? {} : _current$currentDayBu,
_current$currentMonth = current.currentMonthButtonProps,
currentMonthButtonProps = _current$currentMonth === void 0 ? {} : _current$currentMonth;
var _useState = useState("month"),
_useState2 = _slicedToArray(_useState, 2),
mode = _useState2[0],
setMode = _useState2[1];
var _useState3 = useState(function () {
return dayjs(valueFromProps || dayjs().format("YYYY-MM-DD"));
}),
_useState4 = _slicedToArray(_useState3, 2),
value = _useState4[0],
setValue = _useState4[1];
var _useState5 = useState(function () {
return yearProps ? Number(yearProps) : value.year();
}),
_useState6 = _slicedToArray(_useState5, 2),
year = _useState6[0],
setYear = _useState6[1];
var _useState7 = useState(function () {
return monthProps ? Number(monthProps) : parseInt(value.format("M"), 10);
}),
_useState8 = _slicedToArray(_useState7, 2),
month = _useState8[0],
setMonth = _useState8[1];
var _useState9 = useState(isShowWeekendDefault),
_useState0 = _slicedToArray(_useState9, 2),
isShowWeekend = _useState0[0],
setIsShowWeekend = _useState0[1];
var _useLocaleReceiver = useLocaleReceiver("calendar"),
_useLocaleReceiver2 = _slicedToArray(_useLocaleReceiver, 2),
local = _useLocaleReceiver2[0],
t = _useLocaleReceiver2[1];
var weekLabelList = t(local.week).split(",");
var colHeaderList = useMemo(function () {
if (mode === "year") return [];
var weekTextArr = Array.isArray(week) && week.length >= 7 ? week : _toConsumableArray(weekLabelList);
var list = [];
for (var i = firstDayOfWeek; i <= 7; i++) {
if (!isShowWeekend && i > 5) {
break;
}
list.push({
day: i,
text: weekTextArr[i - 1]
});
}
if (firstDayOfWeek > 1) {
for (var _i = 1; _i < firstDayOfWeek; _i++) {
if (!isShowWeekend && _i > 5) {
break;
}
list.push({
day: _i,
text: weekTextArr[_i - 1]
});
}
}
return list;
}, [mode, firstDayOfWeek, isShowWeekend, week, weekLabelList]);
var rangeFromTo = useMemo(function () {
if (!range || range.length < 2) {
return null;
}
var _range = _slicedToArray(range, 2),
v1 = _range[0],
v2 = _range[1];
if (dayjs(v1).isBefore(dayjs(v2))) {
return {
from: v1,
to: v2
};
}
return {
from: v2,
to: v1
};
}, [range]);
var controllerOptions = useMemo(function () {
var dayJsFilterDate = dayjs("".concat(year, "-").concat(month));
var re = {
filterDate: dayJsFilterDate.toDate(),
formattedFilterDate: dayJsFilterDate.format(format),
mode: mode,
isShowWeekend: isShowWeekend
};
return re;
}, [isShowWeekend, mode, year, month, format]);
var _useMemo = useMemo(function () {
var isRangeValid = rangeFromTo && rangeFromTo.from && rangeFromTo.to;
var checkMonthSelectorDisabled = function checkMonthSelectorDisabled(yearIn, monthIn) {
if (isRangeValid) {
var beginYear = dayjs(rangeFromTo.from).year();
var endYear = dayjs(rangeFromTo.to).year();
if (yearIn === beginYear) {
var beginMon = parseInt(dayjs(rangeFromTo.from).format("M"), 10);
return monthIn < beginMon;
}
if (yearIn === endYear) {
var endMon = parseInt(dayjs(rangeFromTo.to).format("M"), 10);
return monthIn > endMon;
}
}
return false;
};
var yearList = [];
var monthList2 = [];
var yearBegin = isRangeValid ? dayjs(rangeFromTo.from).year() : Math.max(minYear, year - 10);
var yearEnd = isRangeValid ? dayjs(rangeFromTo.to).year() : Math.max(minYear, year + 10);
for (var i = yearBegin; i <= yearEnd; i++) {
yearList.push({
value: i,
disabled: checkMonthSelectorDisabled(i, month)
});
}
for (var _i2 = 1; _i2 <= 12; _i2++) {
monthList2.push({
value: _i2,
disabled: checkMonthSelectorDisabled(year, _i2)
});
}
return [yearList, monthList2];
}, [rangeFromTo, year, month]),
_useMemo2 = _slicedToArray(_useMemo, 2),
yearSelectList = _useMemo2[0],
monthSelectList = _useMemo2[1];
var dateList = useMemo(function () {
return createDateList(year, month, firstDayOfWeek, value, format);
}, [year, month, firstDayOfWeek, format, value]);
var monthList = useMemo(function () {
return createMonthList(year, value, format);
}, [year, value, format]);
var createCalendarCell = useCallback(function (cellData) {
return _objectSpread(_objectSpread({}, cellData), controllerOptions);
}, [controllerOptions]);
var toCurrent = useCallback(function () {
var valueIn = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
var now = dayjs(valueIn).isValid() ? dayjs(valueIn) : dayjs(dayjs().format("YYYY-MM-DD"));
setValue(now);
setYear(now.year());
setMonth(parseInt(now.format("M"), 10));
}, []);
React.useImperativeHandle(ref, function () {
return {
toCurrent: toCurrent
};
}, [toCurrent]);
var handleMonthChange = function handleMonthChange(newMonth) {
setMonth(newMonth);
onMonthChange({
month: String(newMonth),
year: String(year)
});
};
var execCellEvent = useCallback(function (event, calendarCell, handleFunc) {
if (handleFunc && typeof handleFunc === "function") {
handleFunc({
cell: createCalendarCell(calendarCell),
e: event
});
}
}, [createCalendarCell]);
var clickCell = function clickCell(event, calendarCell) {
setValue(dayjs(calendarCell.formattedDate));
execCellEvent(event, calendarCell, onCellClick);
};
var doubleClickCell = function doubleClickCell(event, calendarCell) {
execCellEvent(event, calendarCell, onCellDoubleClick);
};
var rightClickCell = function rightClickCell(event, calendarCell) {
if (preventCellContextmenu) event.preventDefault();
execCellEvent(event, calendarCell, onCellRightClick);
};
useEffect(function () {
toCurrent(valueFromProps);
}, [valueFromProps, toCurrent]);
useEffect(function () {
if (monthProps) {
setMonth(Number(monthProps));
}
}, [monthProps]);
useEffect(function () {
if (yearProps) {
setYear(Number(yearProps));
}
}, [yearProps]);
useEffect(function () {
setMode(modeFromProps);
}, [modeFromProps]);
useEffect(function () {
setIsShowWeekend(isShowWeekendDefault);
}, [isShowWeekendDefault]);
useIsomorphicLayoutEffect(function () {
onControllerChange(controllerOptions);
}, [controllerOptions, onControllerChange]);
var prefixCls = usePrefixClass();
var currentDate = dayjs().format("YYYY-MM-DD");
var currentMonth = dayjs().format("YYYY-MM");
var controlSectionSize = theme === "card" ? "small" : "medium";
return /* @__PURE__ */React.createElement("div", {
className: prefixCls(blockName, [blockName, "", theme]).concat(" ", className),
style: style
}, visible && /* @__PURE__ */React.createElement("div", {
className: prefixCls([blockName, "control"])
}, /* @__PURE__ */React.createElement("div", {
className: prefixCls([blockName, "title"])
}, function () {
if (head && typeof head === "function") return head(controllerOptions);
if (head && typeof head !== "function") return head;
}()), /* @__PURE__ */React.createElement("div", {
className: prefixCls([blockName, "control-section"])
}, /* @__PURE__ */React.createElement("div", {
className: prefixCls([blockName, "control-section-cell"])
}, visibleForYear && /* @__PURE__ */React.createElement(Select, _objectSpread({
autoWidth: true,
size: controlSectionSize,
value: year,
disabled: disabled,
options: yearSelectList.map(function (item) {
return {
label: t(local.yearSelection, {
year: item.value
}),
value: item.value,
disabled: item.disabled
};
}),
onChange: function onChange(selectYear) {
return setYear(selectYear);
}
}, selectPropsForYear))), /* @__PURE__ */React.createElement("div", {
className: prefixCls([blockName, "control-section-cell"])
}, visibleForMonth && mode === "month" && /* @__PURE__ */React.createElement(Select, _objectSpread({
autoWidth: true,
size: controlSectionSize,
value: month,
options: monthSelectList.map(function (item) {
return {
label: t(local.monthSelection, {
month: item.value
}),
value: item.value,
disabled: item.disabled
};
}),
disabled: disabled,
onChange: handleMonthChange
}, selectPropsForMonth))), /* @__PURE__ */React.createElement("div", {
className: prefixCls([blockName, "control-section-cell"]),
style: {
height: "auto"
}
}, visibleForMode && /* @__PURE__ */React.createElement(Radio.Group, _objectSpread({
variant: "default-filled",
size: controlSectionSize,
value: mode,
disabled: disabled,
onChange: function onChange(value2) {
return setMode(value2);
}
}, radioGroupPropsForMode), /* @__PURE__ */React.createElement(Radio.Button, {
value: "month"
}, t(local.monthRadio)), /* @__PURE__ */React.createElement(Radio.Button, {
value: "year"
}, t(local.yearRadio)))), mode === "month" && theme === "full" && visibleForWeekendToggle && /* @__PURE__ */React.createElement("div", {
className: prefixCls([blockName, "control-section-cell"])
}, /* @__PURE__ */React.createElement(CheckTag, _objectSpread({
className: "t-calendar__control-tag",
checked: !isShowWeekend,
disabled: disabled,
size: controlSectionSize,
onClick: function onClick() {
setIsShowWeekend(!isShowWeekend);
}
}, isShowWeekend ? hideWeekendButtonProps : showWeekendButtonProps), "".concat(isShowWeekend ? t(local.hideWeekend) : t(local.showWeekend)))), theme === "full" && visibleForCurrent && /* @__PURE__ */React.createElement("div", {
className: prefixCls([blockName, "control-section-cell"])
}, /* @__PURE__ */React.createElement(Button, _objectSpread({
size: controlSectionSize,
disabled: disabled,
onClick: function onClick() {
toCurrent();
}
}, mode === "year" ? currentMonthButtonProps : currentDayButtonProps), mode === "year" ? t(local.thisMonth) : t(local.today))))), /* @__PURE__ */React.createElement("div", {
className: prefixCls([blockName, "panel"], [blockName, "panel--".concat(mode)])
}, /* @__PURE__ */React.createElement("table", {
className: prefixCls([blockName, "table"])
}, colHeaderList.length > 0 && /* @__PURE__ */React.createElement("thead", {
className: prefixCls([blockName, "table-head"])
}, /* @__PURE__ */React.createElement("tr", {
className: prefixCls([blockName, "table-head-row"])
}, colHeaderList.map(function (item) {
return /* @__PURE__ */React.createElement("th", {
key: item.day,
className: prefixCls([blockName, "table-head-cell"])
}, week && typeof week === "function" ? week({
day: item.day
}) : item.text);
}))), mode === "month" && /* @__PURE__ */React.createElement("tbody", {
className: prefixCls([blockName, "table-body"])
}, dateList.map(function (dateRow, dateRowIndex) {
return /* @__PURE__ */React.createElement("tr", {
key: String(dateRowIndex),
className: prefixCls([blockName, "table-body-row"])
}, dateRow.map(function (dateCell, dateCellIndex) {
if (!isShowWeekend && [6, 7].indexOf(dateCell.day) >= 0) return null;
var isNow = dateCell.formattedDate === currentDate;
return /* @__PURE__ */React.createElement(CalendarCellComp, {
key: dateCellIndex,
mode: mode,
theme: theme,
cell: cell,
cellData: dateCell,
cellAppend: cellAppend,
fillWithZero: fillWithZero,
isCurrent: dateCell.isCurrent,
isNow: isNow,
isDisabled: dateCell.belongTo !== 0,
createCalendarCell: createCalendarCell,
onCellClick: function onCellClick(event) {
return clickCell(event, dateCell);
},
onCellDoubleClick: function onCellDoubleClick(event) {
return doubleClickCell(event, dateCell);
},
onCellRightClick: function onCellRightClick(event) {
return rightClickCell(event, dateCell);
}
});
}));
})), mode === "year" && /* @__PURE__ */React.createElement("tbody", {
className: prefixCls([blockName, "table-body"])
}, monthList.map(function (monthRow, monthRowIndex) {
return /* @__PURE__ */React.createElement("tr", {
key: String(monthRowIndex),
className: prefixCls([blockName, "table-body-row"])
}, monthRow.map(function (monthCell, monthCellIndex) {
var isNow = monthCell.formattedDate.startsWith(currentMonth);
return /* @__PURE__ */React.createElement(CalendarCellComp, {
key: monthCellIndex,
mode: mode,
theme: theme,
cell: cell,
cellData: monthCell,
cellAppend: cellAppend,
fillWithZero: fillWithZero,
isCurrent: monthCell.isCurrent,
isNow: isNow,
createCalendarCell: createCalendarCell,
onCellClick: function onCellClick(event) {
return clickCell(event, monthCell);
},
onCellDoubleClick: function onCellDoubleClick(event) {
return doubleClickCell(event, monthCell);
},
onCellRightClick: function onCellRightClick(event) {
return rightClickCell(event, monthCell);
}
});
}));
})))));
});
Calendar.displayName = "Calendar";
export { Calendar as default };
//# sourceMappingURL=Calendar.js.map