@txdfe/at
Version:
一个设计体系组件库
313 lines (310 loc) • 14.5 kB
JavaScript
var _excluded = ["prefix", "rtl", "className", "shape", "showOtherMonth", "format", "locale", "dateCellRender", "monthCellRender", "yearCellRender", "disabledDate", "yearRange"];
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import classnames from 'classnames';
import nextLocale from '../locale/zh-cn';
import { func, obj } from '../util';
import CardHeader from './head/card-header';
import DatePanelHeader from './head/date-panel-header';
import MonthPanelHeader from './head/month-panel-header';
import YearPanelHeader from './head/year-panel-header';
import DateTable from './table/date-table';
import MonthTable from './table/month-table';
import YearTable from './table/year-table';
import { checkMomentObj, formatDateValue, getVisibleMonth, isSameYearMonth, CALENDAR_MODES, CALENDAR_MODE_DATE, CALENDAR_MODE_MONTH, CALENDAR_MODE_YEAR, getLocaleData } from './utils';
/** Calendar */
var Calendar = /*#__PURE__*/function (_Component) {
function Calendar(props, context) {
var _this;
_classCallCheck(this, Calendar);
_this = _callSuper(this, Calendar, [props, context]);
_defineProperty(_this, "onSelectCell", function (date, nextMode) {
var shape = _this.props.shape;
_this.changeVisibleMonth(date, 'cellClick');
// 当用户所在的面板为初始化面板时，则选择动作为触发 onSelect 回调
if (_this.state.mode === _this.MODES[0]) {
_this.props.onSelect(date);
}
if (shape === 'panel') {
_this.changeMode(nextMode);
}
});
_defineProperty(_this, "changeMode", function (nextMode) {
if (nextMode && _this.MODES.indexOf(nextMode) > -1 && nextMode !== _this.state.mode) {
_this.setState({
mode: nextMode
});
_this.props.onModeChange(nextMode);
}
});
_defineProperty(_this, "changeVisibleMonth", function (date, reason) {
if (!isSameYearMonth(date, _this.state.visibleMonth)) {
_this.setState({
visibleMonth: date
});
_this.props.onVisibleMonthChange(date, reason);
}
});
_defineProperty(_this, "goPrevDecade", function () {
_this.changeVisibleMonthByOffset(-12, 'years');
});
_defineProperty(_this, "goNextDecade", function () {
_this.changeVisibleMonthByOffset(12, 'years');
});
_defineProperty(_this, "goPrevYear", function () {
_this.changeVisibleMonthByOffset(-1, 'years');
});
_defineProperty(_this, "goNextYear", function () {
_this.changeVisibleMonthByOffset(1, 'years');
});
_defineProperty(_this, "goPrevMonth", function () {
_this.changeVisibleMonthByOffset(-1, 'months');
});
_defineProperty(_this, "goNextMonth", function () {
_this.changeVisibleMonthByOffset(1, 'months');
});
var value = formatDateValue(props.value || props.defaultValue);
var visibleMonth = getVisibleMonth(props.defaultVisibleMonth, value);
_this.MODES = props.modes;
_this.today = moment();
_this.state = {
value: value,
mode: props.mode || _this.MODES[0],
visibleMonth: visibleMonth
};
return _this;
}
_inherits(Calendar, _Component);
return _createClass(Calendar, [{
key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(nextProps) {
if ('value' in nextProps && nextProps.value !== this.props.value) {
var value = formatDateValue(nextProps.value);
this.setState({
value: value
});
if (value) {
this.setState({
visibleMonth: value
});
}
}
if (nextProps.mode && this.MODES.indexOf(nextProps.mode) > -1) {
this.setState({
mode: nextProps.mode
});
}
}
}, {
key: "changeVisibleMonthByOffset",
value:
/**
* 根据日期偏移量设置当前展示的月份
* @param {Number} offset 日期偏移的数量
* @param {String} type 日期偏移的类型 days, months, years
*/
function changeVisibleMonthByOffset(offset, type) {
var cloneValue = this.state.visibleMonth.clone();
cloneValue.add(offset, type);
this.changeVisibleMonth(cloneValue, 'buttonClick');
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
prefix = _this$props.prefix,
rtl = _this$props.rtl,
className = _this$props.className,
shape = _this$props.shape,
showOtherMonth = _this$props.showOtherMonth,
format = _this$props.format,
locale = _this$props.locale,
dateCellRender = _this$props.dateCellRender,
monthCellRender = _this$props.monthCellRender,
yearCellRender = _this$props.yearCellRender,
disabledDate = _this$props.disabledDate,
yearRange = _this$props.yearRange,
others = _objectWithoutProperties(_this$props, _excluded);
var state = this.state;
var classNames = classnames(_defineProperty(_defineProperty({}, "".concat(prefix, "calendar"), true), "".concat(prefix, "calendar-").concat(shape), shape), className);
if (rtl) {
others.dir = 'rtl';
}
var visibleMonth = state.visibleMonth;
// reset moment locale
if (locale.momentLocale) {
state.value && state.value.locale(locale.momentLocale);
visibleMonth.locale(locale.momentLocale);
}
var localeData = getLocaleData(locale.format || {}, visibleMonth.localeData());
var headerProps = {
prefix: prefix,
lang: locale.momentLocale,
value: state.value,
mode: state.mode,
modes: this.MODES,
locale: locale,
rtl: rtl,
visibleMonth: visibleMonth,
momentLocale: localeData,
changeMode: this.changeMode,
changeVisibleMonth: this.changeVisibleMonth,
goNextDecade: this.goNextDecade,
goNextYear: this.goNextYear,
goNextMonth: this.goNextMonth,
goPrevDecade: this.goPrevDecade,
goPrevYear: this.goPrevYear,
goPrevMonth: this.goPrevMonth
};
var tableProps = {
prefix: prefix,
visibleMonth: visibleMonth,
showOtherMonth: showOtherMonth,
value: state.value,
mode: state.mode,
locale: locale,
dateCellRender: dateCellRender,
monthCellRender: monthCellRender,
yearCellRender: yearCellRender,
disabledDate: disabledDate,
momentLocale: localeData,
today: this.today,
goPrevDecade: this.goPrevDecade,
goNextDecade: this.goNextDecade
};
var tables = _defineProperty(_defineProperty(_defineProperty({}, CALENDAR_MODE_DATE, /*#__PURE__*/React.createElement(DateTable, _extends({
format: format
}, tableProps, {
onSelectDate: this.onSelectCell
}))), CALENDAR_MODE_MONTH, /*#__PURE__*/React.createElement(MonthTable, _extends({}, tableProps, {
onSelectMonth: this.onSelectCell
}))), CALENDAR_MODE_YEAR, /*#__PURE__*/React.createElement(YearTable, _extends({}, tableProps, {
rtl: rtl,
onSelectYear: this.onSelectCell
})));
var panelHeaders = _defineProperty(_defineProperty(_defineProperty({}, CALENDAR_MODE_DATE, /*#__PURE__*/React.createElement(DatePanelHeader, headerProps)), CALENDAR_MODE_MONTH, /*#__PURE__*/React.createElement(MonthPanelHeader, headerProps)), CALENDAR_MODE_YEAR, /*#__PURE__*/React.createElement(YearPanelHeader, headerProps));
return /*#__PURE__*/React.createElement("div", _extends({}, obj.pickOthers(Calendar.propTypes, others), {
className: classNames
}), shape === 'panel' ? panelHeaders[state.mode] : /*#__PURE__*/React.createElement(CardHeader, _extends({}, headerProps, {
yearRange: yearRange
})), tables[state.mode]);
}
}]);
}(Component);
_defineProperty(Calendar, "displayName", 'Calendar');
_defineProperty(Calendar, "propTypes", {
prefix: PropTypes.string,
rtl: PropTypes.bool,
/**
* 默认选中的日期（moment 对象）
*/
defaultValue: checkMomentObj,
/**
* 选中的日期值 (moment 对象)
*/
value: checkMomentObj,
/**
* 面板模式
*/
mode: PropTypes.oneOf(CALENDAR_MODES),
// 生成 API 文档需要手动改回 ['date', 'month', 'year']
// 面板可变化的模式列表，仅初始化时接收一次
modes: PropTypes.array,
// 日期值的格式（用于日期title显示的格式）
format: PropTypes.string,
/**
* 是否展示非本月的日期
*/
showOtherMonth: PropTypes.bool,
/**
* 默认展示的月份
*/
defaultVisibleMonth: PropTypes.func,
/**
* 展现形态
*/
shape: PropTypes.oneOf(['card', 'fullscreen', 'panel']),
/**
* 选择日期单元格时的回调
* @param {Object} value 对应的日期值 (moment 对象)
*/
onSelect: PropTypes.func,
/**
* 面板模式变化时的回调
* @param {String} mode 对应面板模式 date month year
*/
onModeChange: PropTypes.func,
/**
* 展现的月份变化时的回调
* @param {Object} value 显示的月份 (moment 对象)
* @param {String} reason 触发月份改变原因
*/
onVisibleMonthChange: PropTypes.func,
/**
* 自定义样式类
*/
className: PropTypes.string,
/**
* 自定义日期渲染函数
* @param {Object} value 日期值（moment对象）
* @returns {ReactNode}
*/
dateCellRender: PropTypes.func,
/**
* 自定义月份渲染函数
* @param {Object} calendarDate 对应 Calendar 返回的自定义日期对象
* @returns {ReactNode}
*/
monthCellRender: PropTypes.func,
yearCellRender: PropTypes.func,
// 兼容 0.x yearCellRender
/**
* 年份范围，[START_YEAR, END_YEAR] (只在shape 为 ‘card’, 'fullscreen' 下生效)
*/
yearRange: PropTypes.arrayOf(PropTypes.number),
/**
* 不可选择的日期
* @param {Object} calendarDate 对应 Calendar 返回的自定义日期对象
* @param {String} view 当前视图类型，year: 年， month: 月, date: 日
* @returns {Boolean}
*/
disabledDate: PropTypes.func,
/**
* 国际化配置
*/
locale: PropTypes.object
});
_defineProperty(Calendar, "defaultProps", {
prefix: 'next-',
rtl: false,
shape: 'fullscreen',
modes: CALENDAR_MODES,
format: 'YYYY-MM-DD',
onSelect: func.noop,
onVisibleMonthChange: func.noop,
onModeChange: func.noop,
dateCellRender: function dateCellRender(value) {
return value.date() < 10 ? "0".concat(value.date()) : value.date();
},
locale: nextLocale.Calendar,
showOtherMonth: true
});
export default Calendar;