amis-rpc-design/node_modules/antd/es/calendar/Header.js

162 lines
4.7 KiB
JavaScript
Raw Normal View History

2023-10-07 19:42:30 +08:00
"use client";
import * as React from 'react';
import { useContext, useMemo } from 'react';
import { FormItemInputContext } from '../form/context';
import { Button, Group } from '../radio';
import Select from '../select';
const YearSelectOffset = 10;
const YearSelectTotal = 20;
function YearSelect(props) {
const {
fullscreen,
validRange,
generateConfig,
locale,
prefixCls,
value,
onChange,
divRef
} = props;
const year = generateConfig.getYear(value || generateConfig.getNow());
let start = year - YearSelectOffset;
let end = start + YearSelectTotal;
if (validRange) {
start = generateConfig.getYear(validRange[0]);
end = generateConfig.getYear(validRange[1]) + 1;
}
const suffix = locale && locale.year === '年' ? '年' : '';
const options = [];
for (let index = start; index < end; index++) {
options.push({
label: `${index}${suffix}`,
value: index
});
}
return /*#__PURE__*/React.createElement(Select, {
size: fullscreen ? undefined : 'small',
options: options,
value: year,
className: `${prefixCls}-year-select`,
onChange: numYear => {
let newDate = generateConfig.setYear(value, numYear);
if (validRange) {
const [startDate, endDate] = validRange;
const newYear = generateConfig.getYear(newDate);
const newMonth = generateConfig.getMonth(newDate);
if (newYear === generateConfig.getYear(endDate) && newMonth > generateConfig.getMonth(endDate)) {
newDate = generateConfig.setMonth(newDate, generateConfig.getMonth(endDate));
}
if (newYear === generateConfig.getYear(startDate) && newMonth < generateConfig.getMonth(startDate)) {
newDate = generateConfig.setMonth(newDate, generateConfig.getMonth(startDate));
}
}
onChange(newDate);
},
getPopupContainer: () => divRef.current
});
}
function MonthSelect(props) {
const {
prefixCls,
fullscreen,
validRange,
value,
generateConfig,
locale,
onChange,
divRef
} = props;
const month = generateConfig.getMonth(value || generateConfig.getNow());
let start = 0;
let end = 11;
if (validRange) {
const [rangeStart, rangeEnd] = validRange;
const currentYear = generateConfig.getYear(value);
if (generateConfig.getYear(rangeEnd) === currentYear) {
end = generateConfig.getMonth(rangeEnd);
}
if (generateConfig.getYear(rangeStart) === currentYear) {
start = generateConfig.getMonth(rangeStart);
}
}
const months = locale.shortMonths || generateConfig.locale.getShortMonths(locale.locale);
const options = [];
for (let index = start; index <= end; index += 1) {
options.push({
label: months[index],
value: index
});
}
return /*#__PURE__*/React.createElement(Select, {
size: fullscreen ? undefined : 'small',
className: `${prefixCls}-month-select`,
value: month,
options: options,
onChange: newMonth => {
onChange(generateConfig.setMonth(value, newMonth));
},
getPopupContainer: () => divRef.current
});
}
function ModeSwitch(props) {
const {
prefixCls,
locale,
mode,
fullscreen,
onModeChange
} = props;
return /*#__PURE__*/React.createElement(Group, {
onChange: _ref => {
let {
target: {
value
}
} = _ref;
onModeChange(value);
},
value: mode,
size: fullscreen ? undefined : 'small',
className: `${prefixCls}-mode-switch`
}, /*#__PURE__*/React.createElement(Button, {
value: "month"
}, locale.month), /*#__PURE__*/React.createElement(Button, {
value: "year"
}, locale.year));
}
function CalendarHeader(props) {
const {
prefixCls,
fullscreen,
mode,
onChange,
onModeChange
} = props;
const divRef = React.useRef(null);
const formItemInputContext = useContext(FormItemInputContext);
const mergedFormItemInputContext = useMemo(() => Object.assign(Object.assign({}, formItemInputContext), {
isFormItemInput: false
}), [formItemInputContext]);
const sharedProps = Object.assign(Object.assign({}, props), {
fullscreen,
divRef
});
return /*#__PURE__*/React.createElement("div", {
className: `${prefixCls}-header`,
ref: divRef
}, /*#__PURE__*/React.createElement(FormItemInputContext.Provider, {
value: mergedFormItemInputContext
}, /*#__PURE__*/React.createElement(YearSelect, Object.assign({}, sharedProps, {
onChange: v => {
onChange(v, 'year');
}
})), mode === 'month' && /*#__PURE__*/React.createElement(MonthSelect, Object.assign({}, sharedProps, {
onChange: v => {
onChange(v, 'month');
}
}))), /*#__PURE__*/React.createElement(ModeSwitch, Object.assign({}, sharedProps, {
onModeChange: onModeChange
})));
}
export default CalendarHeader;