react-big-scheduler-stch
Version:
A scheduler and resource planning component built for React and made for modern browsers (A react-big-scheduler fork with additional features and fixes).
216 lines (184 loc) • 10.3 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _class, _temp;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _antd = require('antd');
var _icons = require('@ant-design/icons');
var _dayjs = require('dayjs');
var _dayjs2 = _interopRequireDefault(_dayjs);
var _ = require('.');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var RadioButton = _antd.Radio.Button;
var RadioGroup = _antd.Radio.Group;
var SchedulerHeader = (_temp = _class = function (_Component) {
_inherits(SchedulerHeader, _Component);
function SchedulerHeader(props) {
_classCallCheck(this, SchedulerHeader);
var _this = _possibleConstructorReturn(this, (SchedulerHeader.__proto__ || Object.getPrototypeOf(SchedulerHeader)).call(this, props));
_this.handleVisibleChange = function (visible) {
_this.setState({ visible: visible });
};
_this.state = {
viewSpinning: false,
dateSpinning: false,
visible: false
};
return _this;
}
_createClass(SchedulerHeader, [{
key: 'render',
value: function render() {
var _this2 = this;
var _props = this.props,
leftCustomHeader = _props.leftCustomHeader,
rightCustomHeader = _props.rightCustomHeader,
goBack = _props.goBack,
goNext = _props.goNext,
schedulerData = _props.schedulerData,
onViewChange = _props.onViewChange,
onSelectDate = _props.onSelectDate;
var viewType = schedulerData.viewType,
showAgenda = schedulerData.showAgenda,
isEventPerspective = schedulerData.isEventPerspective,
config = schedulerData.config;
var dateLabel = schedulerData.getDateLabel();
var selectDate = schedulerData.getSelectedDate();
var calendarLocale = schedulerData.getCalendarPopoverLocale() !== undefined ? schedulerData.getCalendarPopoverLocale().default.Calendar : undefined;
var defaultValue = '' + viewType + (showAgenda ? 1 : 0) + (isEventPerspective ? 1 : 0);
var popover = _react2.default.createElement(
'div',
{ className: 'popover-calendar' },
_react2.default.createElement(_antd.Calendar, { locale: calendarLocale, defaultValue: (0, _dayjs2.default)(selectDate), fullscreen: false, onSelect: function onSelect(date) {
_this2.handleVisibleChange(false);
_this2.handleEvents(onSelectDate, false, date.format(_.DATE_FORMAT));
} })
);
var radioButtonList = config.views.map(function (item) {
return _react2.default.createElement(
RadioButton,
{ key: '' + item.viewType + (item.showAgenda ? 1 : 0) + (item.isEventPerspective ? 1 : 0),
value: '' + item.viewType + (item.showAgenda ? 1 : 0) + (item.isEventPerspective ? 1 : 0) },
_react2.default.createElement(
'span',
{
style: { margin: "0px 8px" } },
item.viewName
)
);
});
return _react2.default.createElement(
_antd.Row,
{ gutter: [10, 10], type: 'flex', align: 'middle', justify: 'space-between', style: { marginBottom: '24px' } },
leftCustomHeader,
_react2.default.createElement(
_antd.Col,
null,
_react2.default.createElement(
'div',
{ className: 'header2-text' },
_react2.default.createElement(
_antd.Space,
null,
_react2.default.createElement(
'div',
null,
_react2.default.createElement(_icons.LeftOutlined, { type: 'left', style: { marginRight: "8px" }, className: 'icon-nav',
onClick: function onClick() {
_this2.handleEvents(goBack, false);
} }),
config.calendarPopoverEnabled ? _react2.default.createElement(
_antd.Popover,
{ content: popover, placement: 'bottomLeft', trigger: 'click',
open: this.state.visible,
onOpenChange: this.handleVisibleChange },
_react2.default.createElement(
'span',
{ className: 'header2-text-label', style: { cursor: 'pointer' } },
dateLabel
)
) : _react2.default.createElement(
'span',
{ className: 'header2-text-label' },
dateLabel
),
_react2.default.createElement(_icons.RightOutlined, { type: 'right', style: { marginLeft: "8px" }, className: 'icon-nav',
onClick: function onClick() {
_this2.handleEvents(goNext, false);
} })
),
_react2.default.createElement(_antd.Spin, { spinning: this.state.dateSpinning })
)
)
),
_react2.default.createElement(
_antd.Col,
null,
_react2.default.createElement(
_antd.Space,
null,
_react2.default.createElement(_antd.Spin, { spinning: this.state.viewSpinning }),
_react2.default.createElement(
RadioGroup,
{
buttonStyle: 'solid',
defaultValue: defaultValue,
size: 'default',
onChange: function onChange(event) {
_this2.handleEvents(onViewChange, true, event);
} },
radioButtonList
)
)
),
rightCustomHeader
);
}
}, {
key: 'handleEvents',
value: function handleEvents(func, isViewSpinning) {
var _this3 = this;
var funcArg = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
var schedulerData = this.props.schedulerData;
var config = schedulerData.config;
if (isViewSpinning) {
if (config.viewChangeSpinEnabled) this.setState({ viewSpinning: true });
} else {
if (config.dateChangeSpinEnabled) this.setState({ dateSpinning: true });
}
var coreFunc = function coreFunc() {
if (funcArg !== undefined) func(funcArg);else {
func();
}
if (isViewSpinning) {
if (config.viewChangeSpinEnabled) _this3.setState({ viewSpinning: false });
} else {
if (config.dateChangeSpinEnabled) _this3.setState({ dateSpinning: false });
}
};
if (config.viewChangeSpinEnabled || config.dateChangeSpinEnabled) setTimeout(function () {
coreFunc();
}, config.schedulerHeaderEventsFuncsTimeoutMs); // 100ms
else {
coreFunc();
}
}
}]);
return SchedulerHeader;
}(_react.Component), _class.propTypes = {
onViewChange: _propTypes.PropTypes.func.isRequired,
goNext: _propTypes.PropTypes.func.isRequired,
goBack: _propTypes.PropTypes.func.isRequired,
onSelectDate: _propTypes.PropTypes.func.isRequired,
schedulerData: _propTypes.PropTypes.object.isRequired,
leftCustomHeader: _propTypes.PropTypes.object,
rightCustomHeader: _propTypes.PropTypes.object
}, _temp);
exports.default = SchedulerHeader;