react-cm-ui
Version:
React UI for Healthy Church
314 lines (275 loc) • 15.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _lodash = _interopRequireDefault(require("lodash"));
var _classnames = _interopRequireDefault(require("classnames"));
var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactOnclickoutside = _interopRequireDefault(require("react-onclickoutside"));
var _react = _interopRequireDefault(require("react"));
var _button = _interopRequireDefault(require("../button"));
var _datePickerDropdownMonth = _interopRequireDefault(require("../datePickerCalendar/datePickerDropdownMonth"));
var _datePickerDropdownYear = _interopRequireDefault(require("../datePickerCalendar/datePickerDropdownYear"));
var _datePickerDeprecatedMonth = _interopRequireDefault(require("./datePickerDeprecatedMonth"));
var _datePickerUtils = _interopRequireDefault(require("../../utils/datePickerUtils"));
var _grid = _interopRequireDefault(require("../../layout/grid"));
var _icon = _interopRequireDefault(require("../../dataDisplay/icon"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
var propTypes = {
buttonClear: _propTypes["default"].bool,
date: _propTypes["default"].shape({}),
// Single date moment object. Coverted from timestamp in parent component.
dateEnd: _propTypes["default"].shape({}),
// Range end date moment object. Coverted from timestamp in parent component.
dateSecondaryEnd: _propTypes["default"].shape({}),
// Range start date moment object. Coverted from timestamp in parent component.
dateSecondaryStart: _propTypes["default"].shape({}),
// Range start date moment object. Coverted from timestamp in parent component.
dateStart: _propTypes["default"].shape({}),
// Range start date moment object. Coverted from timestamp in parent component.
events: _propTypes["default"].array,
excludeDates: _propTypes["default"].array,
filterDate: _propTypes["default"].func,
includeDates: _propTypes["default"].array,
locale: _propTypes["default"].string,
maxDate: _propTypes["default"].shape({}),
minDate: _propTypes["default"].shape({}),
onApplyClick: _propTypes["default"].func,
onClearClick: _propTypes["default"].func,
onClose: _propTypes["default"].func,
onMonthChange: _propTypes["default"].func,
onSelect: _propTypes["default"].func.isRequired,
type: _propTypes["default"].string,
uxMode: _propTypes["default"].string
};
var DatePickerCalendar = /*#__PURE__*/function (_React$Component) {
_inherits(DatePickerCalendar, _React$Component);
var _super = _createSuper(DatePickerCalendar);
function DatePickerCalendar(props) {
var _this;
_classCallCheck(this, DatePickerCalendar);
_this = _super.call(this, props);
_this.state = {
dateInView: _this.localizeMoment(_this.getDateInView(props.date, props.dateStart, props.dateSecondaryStart, props.maxDate, props.minDate)),
showDropdownMonth: false,
showDropdownYear: false
};
return _this;
}
_createClass(DatePickerCalendar, [{
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
if (!_datePickerUtils["default"].isSameDay(prevProps.date, this.props.date) || !_datePickerUtils["default"].isSameDay(prevProps.dateStart, this.props.dateStart)) {
this.setState({
dateInView: this.localizeMoment(this.getDateInView(this.props.date, this.props.dateStart, this.props.dateSecondaryStart, this.props.maxDate, this.props.minDate))
});
}
}
}, {
key: "componentWillUpdate",
value: function componentWillUpdate(nextProps, nextState) {
// issue onMonthChange() call when month changes due to a user selection of the date
// (as opposed to via the month dropdown)
if (this.state.dateInView && nextState.dateInView && nextState.dateInView.month() !== this.state.dateInView.month() && typeof this.props.onMonthChange === 'function') {
this.props.onMonthChange(nextState.dateInView.month(), nextState.dateInView.year());
}
}
}, {
key: "getDateInView",
value: function getDateInView(date, dateStart, dateSecondaryStart, maxDate, minDate) {
var today = (0, _momentTimezone["default"])();
if (date) {
return date;
} else if (dateStart
/*&& (_.isNull(dateSecondaryStart) || dateSecondaryStart)*/
) {
// I'm 99.9% certain that portion is useless ... it should ALWAYS be either NULL OR truthy, right...?
return dateStart;
} else if (!dateStart && dateSecondaryStart) {
return dateSecondaryStart;
}
if (minDate && minDate.isAfter(today)) {
return minDate;
} else if (maxDate && maxDate.isBefore(today)) {
return maxDate;
} else {
return today;
}
}
}, {
key: "handleClickOutside",
value: function handleClickOutside() {
this.props.onClose();
}
}, {
key: "headerDays",
value: function headerDays() {
var startOfWeek = this.state.dateInView.clone().startOf('week');
return [0, 1, 2, 3, 4, 5, 6].map(function (offset) {
var day = startOfWeek.clone().add(offset, 'days');
return /*#__PURE__*/_react["default"].createElement("div", {
className: "ui date-picker-deprecated-day",
key: offset
}, day.localeData().weekdaysMin(day));
});
}
}, {
key: "localizeMoment",
value: function localizeMoment(date) {
return date.clone().locale(this.props.locale || _momentTimezone["default"].locale());
}
}, {
key: "onApplyClick",
value: function onApplyClick() {
if (_lodash["default"].isFunction(this.props.onApplyClick)) {
this.props.onApplyClick();
}
}
}, {
key: "onChangeMonth",
value: function onChangeMonth(month) {
if (typeof this.props.onMonthChange === 'function') this.props.onMonthChange(month, this.state.dateInView.year());
this.setState({
dateInView: this.state.dateInView.clone().set('month', month),
showDropdownMonth: false
});
}
}, {
key: "onChangeYear",
value: function onChangeYear(year) {
this.setState({
dateInView: this.state.dateInView.clone().set('year', year),
showDropdownYear: false
});
}
}, {
key: "onClearClick",
value: function onClearClick() {
this.props.onClearClick();
}
}, {
key: "onDayClick",
value: function onDayClick(day) {
if (_lodash["default"].isFunction(this.props.onSelect)) {
this.props.onSelect(day);
}
}
}, {
key: "onDropdownMonthClick",
value: function onDropdownMonthClick() {
this.setState({
showDropdownMonth: !this.state.showDropdownMonth
});
}
}, {
key: "onDropdownYearClick",
value: function onDropdownYearClick() {
this.setState({
showDropdownYear: !this.state.showDropdownYear
});
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
buttonClear = _this$props.buttonClear,
date = _this$props.date,
dateEnd = _this$props.dateEnd,
dateStart = _this$props.dateStart,
dateSecondaryEnd = _this$props.dateSecondaryEnd,
dateSecondaryStart = _this$props.dateSecondaryStart,
onApplyClick = _this$props.onApplyClick,
type = _this$props.type,
uxMode = _this$props.uxMode;
var dateInView = this.state.dateInView;
var containerClasses = (0, _classnames["default"])('ui', 'date-picker-deprecated-calendar', {
'date-picker-deprecated-calendar-uxmode-input': uxMode === 'input',
'date-picker-deprecated-calendar-uxmode-calendar': uxMode === 'calendar',
'date-picker-deprecated-calendar-date-range': type === 'dateRange',
'date-picker-deprecated-calendar-service-period': type === 'servicePeriod',
'date-picker-deprecated-calendar-service-period-range': type === 'servicePeriodRange' || type === 'servicePeriodRangeEnd' || type === 'servicePeriodRangeStart',
'date-picker-deprecated-calendar-single-date': type === 'singleDate'
});
return /*#__PURE__*/_react["default"].createElement("div", {
className: containerClasses
}, uxMode === 'input' ? /*#__PURE__*/_react["default"].createElement("div", {
className: "date-picker-pointer"
}) : null, /*#__PURE__*/_react["default"].createElement("div", {
className: "date-picker-selected-month-year"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "date-picker-selected-month",
onClick: this.onDropdownMonthClick.bind(this)
}, /*#__PURE__*/_react["default"].createElement("span", null, dateInView.format('MMMM'), /*#__PURE__*/_react["default"].createElement(_icon["default"], {
align: "right",
size: "xxsmall",
type: "caret-down"
})), this.state.showDropdownMonth ? /*#__PURE__*/_react["default"].createElement(_datePickerDropdownMonth["default"], {
month: dateInView.month(),
onChange: this.onChangeMonth.bind(this),
onClose: this.onDropdownMonthClick.bind(this)
}) : null), /*#__PURE__*/_react["default"].createElement("div", {
className: "date-picker-selected-year",
onClick: this.onDropdownYearClick.bind(this)
}, /*#__PURE__*/_react["default"].createElement("span", null, dateInView.format('YYYY'), /*#__PURE__*/_react["default"].createElement(_icon["default"], {
align: "right",
size: "xxsmall",
type: "caret-down"
})), this.state.showDropdownYear ? /*#__PURE__*/_react["default"].createElement(_datePickerDropdownYear["default"], {
onChange: this.onChangeYear.bind(this),
onClose: this.onDropdownYearClick.bind(this),
year: dateInView.year()
}) : null)), /*#__PURE__*/_react["default"].createElement("div", {
className: "date-picker-month-container"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "ui date-picker-header-days"
}, this.headerDays()), /*#__PURE__*/_react["default"].createElement(_datePickerDeprecatedMonth["default"], {
dateInView: dateInView,
date: date,
dateEnd: dateEnd,
dateSecondaryEnd: dateSecondaryEnd,
dateSecondaryStart: dateSecondaryStart,
dateStart: dateStart,
events: this.props.events,
excludeDates: this.props.excludeDates,
filterDates: this.props.filterDates,
includeDates: this.props.includeDates,
key: "datepicker-month",
maxDate: this.props.maxDate,
minDate: this.props.minDate,
onDayClick: this.onDayClick.bind(this),
type: this.props.type,
uxMode: this.props.uxMode
})), buttonClear === true || _lodash["default"].isFunction(onApplyClick) ? /*#__PURE__*/_react["default"].createElement(_grid["default"], {
alignItems: "center",
justifyContent: "space-between",
spacing: 2,
style: {
marginTop: 11
}
}, /*#__PURE__*/_react["default"].createElement(_grid["default"].Column, null, buttonClear === true && (dateStart || dateSecondaryStart) ? /*#__PURE__*/_react["default"].createElement("a", {
className: "font-size-xsmall color-alert",
onClick: this.onClearClick.bind(this)
}, "Clear") : null), _lodash["default"].isFunction(onApplyClick) ? /*#__PURE__*/_react["default"].createElement(_grid["default"].Column, null, /*#__PURE__*/_react["default"].createElement(_button["default"], {
color: type === 'singleDate' && date || (type === 'dateRange' || type === 'servicePeriod') && dateStart && dateEnd || type === 'servicePeriodRange' && dateStart && dateEnd && dateSecondaryStart && dateSecondaryEnd ? 'primary' : 'disable',
onClick: date || dateStart && dateEnd || dateSecondaryStart && dateSecondaryEnd ? this.onApplyClick.bind(this) : null
}, type === 'singleDate' && date || (type === 'dateRange' || type === 'servicePeriod') && dateStart && dateEnd || type === 'servicePeriodRange' && dateStart && dateEnd && dateSecondaryStart && dateSecondaryEnd ? 'Apply' : 'Select')) : null) : null);
}
}]);
return DatePickerCalendar;
}(_react["default"].Component);
DatePickerCalendar.propTypes = propTypes;
var _default = (0, _reactOnclickoutside["default"])(DatePickerCalendar);
exports["default"] = _default;