wix-style-react
Version:
191 lines (157 loc) • 8.2 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _excluded = ["dataHook", "presets", "footer"];
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 _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
import React from 'react';
import PropTypes from 'prop-types';
import { classes } from './CalendarPanel.st.css';
import DropdownLayout from '../DropdownLayout';
import Calendar from '../Calendar';
import { DIVIDER_OPTION_VALUE } from '../DropdownLayout/DropdownLayout';
import { supportedWixlocales } from 'wix-design-systems-locale-utils';
var CalendarPanel = /*#__PURE__*/function (_React$Component) {
_inherits(CalendarPanel, _React$Component);
var _super = _createSuper(CalendarPanel);
function CalendarPanel() {
var _this;
_classCallCheck(this, CalendarPanel);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _super.call.apply(_super, [this].concat(args));
_defineProperty(_assertThisInitialized(_this), "onSelectPreset", function (preset) {
var onChange = _this.props.onChange;
onChange(preset.selectedDays);
});
return _this;
}
_createClass(CalendarPanel, [{
key: "getSelectedPresetId",
value: function getSelectedPresetId() {
var _this$props = this.props,
_this$props$presets = _this$props.presets,
presets = _this$props$presets === void 0 ? [] : _this$props$presets,
value = _this$props.value;
var selectedPreset = presets.find(function (preset) {
return Calendar.areValuesEqual(preset.selectedDays, value);
});
return selectedPreset ? selectedPreset.id : -1;
}
}, {
key: "isSubmitDisabled",
value: function isSubmitDisabled() {
var _this$props2 = this.props,
selectionMode = _this$props2.selectionMode,
value = _this$props2.value;
if (selectionMode === 'range') {
return !Boolean(value) || !Boolean(value.from) || !Boolean(value.to);
}
return !Boolean(value);
}
}, {
key: "render",
value: function render() {
var _this$props3 = this.props,
dataHook = _this$props3.dataHook,
presets = _this$props3.presets,
footer = _this$props3.footer,
calendarProps = _objectWithoutProperties(_this$props3, _excluded);
return /*#__PURE__*/React.createElement("div", {
className: classes.root,
"data-hook": dataHook
}, /*#__PURE__*/React.createElement("div", {
className: classes.calendarWithPresets
}, Boolean(presets && presets.length) && /*#__PURE__*/React.createElement("div", {
className: classes.presets
}, /*#__PURE__*/React.createElement(DropdownLayout, {
visible: true,
inContainer: true,
onSelect: this.onSelectPreset,
dataHook: 'dropdown-layout',
options: presets,
maxHeightPixels: 342,
selectedId: this.getSelectedPresetId()
})), /*#__PURE__*/React.createElement(Calendar, _extends({}, calendarProps, {
dataHook: 'calendar',
className: classes.calendar
}))), footer && /*#__PURE__*/React.createElement("div", {
className: classes.footer
}, footer({
selectedDays: calendarProps.value,
submitDisabled: this.isSubmitDisabled()
})));
}
}]);
return CalendarPanel;
}(React.Component);
_defineProperty(CalendarPanel, "displayName", 'CalendarPanel');
_defineProperty(CalendarPanel, "propTypes", {
/** Applies a data-hook HTML attribute that can be used in the tests */
dataHook: PropTypes.string,
/** Specifies a CSS class name to be appended to the component’s root element */
className: PropTypes.string,
/** Defines a callback function which is called whenever the user selects a day or a date range in the calendar */
onChange: PropTypes.func.isRequired,
/** Defines a callback function which is called whenever user press `escape` or click outside of the element */
onClose: PropTypes.func,
/** Specifies whether past dates should be selectable or not */
excludePastDates: PropTypes.bool,
/** Specifies dates that are selectable. Only the dates that match defined criteria will be available for a user to select. */
filterDate: PropTypes.func,
/** Defines a selected date or date range */
value: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date), PropTypes.shape({
from: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
to: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)])
})]),
/** Specifies if user can select a single day or a date range */
selectionMode: PropTypes.oneOf(['day', 'range']),
/** Specifies whether to display a year selection dropdown inside of a calendar */
showYearDropdown: PropTypes.bool,
/** Specifies whether to display a month selection dropdown inside of a calendar */
showMonthDropdown: PropTypes.bool,
/** Specifies whether calendar should close on a day selection */
shouldCloseOnSelect: PropTypes.bool,
/** Specifies date picker instance locale */
locale: PropTypes.oneOfType([PropTypes.oneOf(supportedWixlocales), PropTypes.shape({
code: PropTypes.string,
formatDistance: PropTypes.func,
formatRelative: PropTypes.func,
localize: PropTypes.object,
formatLong: PropTypes.object,
match: PropTypes.object,
options: PropTypes.object
})]),
/** Defines a number of months to display inside of a panel */
numOfMonths: PropTypes.number,
/** Defines an array of predefined calendar presets that are displayed as select items on the left side of a panel */
presets: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
value: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.func]).isRequired,
disabled: PropTypes.bool,
overrideStyle: PropTypes.bool,
selectedDays: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date), PropTypes.shape({
from: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]).isRequired,
to: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]).isRequired
})]).isRequired
}), // A divider option without an id
PropTypes.shape({
value: PropTypes.oneOf([DIVIDER_OPTION_VALUE])
})]), PropTypes.shape({
selectedDays: PropTypes.object,
id: PropTypes.oneOf([PropTypes.string, PropTypes.number])
})),
/** Renders a panel footer. Pass `<CalendarPanelFooter/>` in all common cases. `({selectedDays, submitDisabled}) => void` - `selectedDays` is the same as the CalendarPanel's `value` prop. `submitDisabled` is true when the current selectedDays is not valida for submission. */
footer: PropTypes.func
});
_defineProperty(CalendarPanel, "defaultProps", {
numOfMonths: 2
});
export default CalendarPanel;