wix-style-react
Version:
wix-style-react
179 lines (178 loc) • 7.94 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
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"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/CalendarPanel/CalendarPanel.js";
class CalendarPanel extends _react.default.Component {
constructor() {
super(...arguments);
this.onSelectPreset = preset => {
var {
onChange
} = this.props;
onChange(preset.selectedDays);
};
}
getSelectedPresetId() {
var {
presets = [],
value
} = this.props;
var selectedPreset = presets.find(preset => _Calendar.default.areValuesEqual(preset.selectedDays, value));
return selectedPreset ? selectedPreset.id : -1;
}
isSubmitDisabled() {
var {
selectionMode,
value
} = this.props;
if (selectionMode === 'range') {
return !Boolean(value) || !Boolean(value.from) || !Boolean(value.to);
}
return !Boolean(value);
}
render() {
var _this$props = this.props,
{
dataHook,
presets,
footer
} = _this$props,
calendarProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
return /*#__PURE__*/_react.default.createElement("div", {
className: _CalendarPanelSt.classes.root,
"data-hook": dataHook,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 146,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: _CalendarPanelSt.classes.calendarWithPresets,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 147,
columnNumber: 9
}
}, Boolean(presets && presets.length) && /*#__PURE__*/_react.default.createElement("div", {
className: _CalendarPanelSt.classes.presets,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 149,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement(_DropdownLayout.default, {
visible: true,
inContainer: true,
onSelect: this.onSelectPreset,
dataHook: "dropdown-layout",
options: presets,
maxHeightPixels: 342,
selectedId: this.getSelectedPresetId(),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 150,
columnNumber: 15
}
})), /*#__PURE__*/_react.default.createElement(_Calendar.default, (0, _extends2.default)({}, calendarProps, {
dataHook: "calendar",
className: _CalendarPanelSt.classes.calendar,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 161,
columnNumber: 11
}
}))), footer && /*#__PURE__*/_react.default.createElement("div", {
className: _CalendarPanelSt.classes.footer,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 168,
columnNumber: 11
}
}, footer({
selectedDays: calendarProps.value,
submitDisabled: this.isSubmitDisabled()
})));
}
}
CalendarPanel.displayName = 'CalendarPanel';
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
};
CalendarPanel.defaultProps = {
numOfMonths: 2
};
var _default = exports.default = CalendarPanel;
//# sourceMappingURL=CalendarPanel.js.map