wix-style-react
Version:
209 lines (164 loc) • 10 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _CalendarPanelSt = require("./CalendarPanel.st.css");
var _DropdownLayout = _interopRequireDefault(require("../DropdownLayout"));
var _Calendar = _interopRequireDefault(require("../Calendar"));
var _DropdownLayout2 = require("../DropdownLayout/DropdownLayout");
var _wixDesignSystemsLocaleUtils = require("wix-design-systems-locale-utils");
var _excluded = ["dataHook", "presets", "footer"];
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(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; } }
var CalendarPanel = /*#__PURE__*/function (_React$Component) {
(0, _inherits2["default"])(CalendarPanel, _React$Component);
var _super = _createSuper(CalendarPanel);
function CalendarPanel() {
var _this;
(0, _classCallCheck2["default"])(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));
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onSelectPreset", function (preset) {
var onChange = _this.props.onChange;
onChange(preset.selectedDays);
});
return _this;
}
(0, _createClass2["default"])(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["default"].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 = (0, _objectWithoutProperties2["default"])(_this$props3, _excluded);
return /*#__PURE__*/_react["default"].createElement("div", {
className: _CalendarPanelSt.classes.root,
"data-hook": dataHook
}, /*#__PURE__*/_react["default"].createElement("div", {
className: _CalendarPanelSt.classes.calendarWithPresets
}, Boolean(presets && presets.length) && /*#__PURE__*/_react["default"].createElement("div", {
className: _CalendarPanelSt.classes.presets
}, /*#__PURE__*/_react["default"].createElement(_DropdownLayout["default"], {
visible: true,
inContainer: true,
onSelect: this.onSelectPreset,
dataHook: 'dropdown-layout',
options: presets,
maxHeightPixels: 342,
selectedId: this.getSelectedPresetId()
})), /*#__PURE__*/_react["default"].createElement(_Calendar["default"], (0, _extends2["default"])({}, calendarProps, {
dataHook: 'calendar',
className: _CalendarPanelSt.classes.calendar
}))), footer && /*#__PURE__*/_react["default"].createElement("div", {
className: _CalendarPanelSt.classes.footer
}, footer({
selectedDays: calendarProps.value,
submitDisabled: this.isSubmitDisabled()
})));
}
}]);
return CalendarPanel;
}(_react["default"].Component);
(0, _defineProperty2["default"])(CalendarPanel, "displayName", 'CalendarPanel');
(0, _defineProperty2["default"])(CalendarPanel, "propTypes", {
/** Applies a data-hook HTML attribute that can be used in the tests */
dataHook: _propTypes["default"].string,
/** Specifies a CSS class name to be appended to the component’s root element */
className: _propTypes["default"].string,
/** Defines a callback function which is called whenever the user selects a day or a date range in the calendar */
onChange: _propTypes["default"].func.isRequired,
/** Defines a callback function which is called whenever user press `escape` or click outside of the element */
onClose: _propTypes["default"].func,
/** Specifies whether past dates should be selectable or not */
excludePastDates: _propTypes["default"].bool,
/** Specifies dates that are selectable. Only the dates that match defined criteria will be available for a user to select. */
filterDate: _propTypes["default"].func,
/** Defines a selected date or date range */
value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].instanceOf(Date), _propTypes["default"].shape({
from: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].instanceOf(Date)]),
to: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].instanceOf(Date)])
})]),
/** Specifies if user can select a single day or a date range */
selectionMode: _propTypes["default"].oneOf(['day', 'range']),
/** Specifies whether to display a year selection dropdown inside of a calendar */
showYearDropdown: _propTypes["default"].bool,
/** Specifies whether to display a month selection dropdown inside of a calendar */
showMonthDropdown: _propTypes["default"].bool,
/** Specifies whether calendar should close on a day selection */
shouldCloseOnSelect: _propTypes["default"].bool,
/** Specifies date picker instance locale */
locale: _propTypes["default"].oneOfType([_propTypes["default"].oneOf(_wixDesignSystemsLocaleUtils.supportedWixlocales), _propTypes["default"].shape({
code: _propTypes["default"].string,
formatDistance: _propTypes["default"].func,
formatRelative: _propTypes["default"].func,
localize: _propTypes["default"].object,
formatLong: _propTypes["default"].object,
match: _propTypes["default"].object,
options: _propTypes["default"].object
})]),
/** Defines a number of months to display inside of a panel */
numOfMonths: _propTypes["default"].number,
/** Defines an array of predefined calendar presets that are displayed as select items on the left side of a panel */
presets: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].shape({
id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
value: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].string, _propTypes["default"].func]).isRequired,
disabled: _propTypes["default"].bool,
overrideStyle: _propTypes["default"].bool,
selectedDays: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].instanceOf(Date), _propTypes["default"].shape({
from: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].instanceOf(Date)]).isRequired,
to: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].instanceOf(Date)]).isRequired
})]).isRequired
}), // A divider option without an id
_propTypes["default"].shape({
value: _propTypes["default"].oneOf([_DropdownLayout2.DIVIDER_OPTION_VALUE])
})]), _propTypes["default"].shape({
selectedDays: _propTypes["default"].object,
id: _propTypes["default"].oneOf([_propTypes["default"].string, _propTypes["default"].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["default"].func
});
(0, _defineProperty2["default"])(CalendarPanel, "defaultProps", {
numOfMonths: 2
});
var _default = CalendarPanel;
exports["default"] = _default;