@wix/design-system
Version:
@wix/design-system
466 lines (465 loc) • 18.6 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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _isSameDay = _interopRequireDefault(require("date-fns/isSameDay"));
var _setYear = _interopRequireDefault(require("date-fns/setYear"));
var _setMonth = _interopRequireDefault(require("date-fns/setMonth"));
var _setDate = _interopRequireDefault(require("date-fns/setDate"));
var _PopoverNext = _interopRequireDefault(require("../PopoverNext"));
var _Calendar = _interopRequireDefault(require("../Calendar"));
var _DateInput = _interopRequireDefault(require("./DateInput"));
var _Divider = _interopRequireDefault(require("../Divider"));
var _DatePickerSt = require("./DatePicker.st.css.js");
var _constants = require("./constants");
var _context = require("../WixStyleReactEnvironmentProvider/context");
var _designSystemsLocaleUtils = require("@wix/design-systems-locale-utils");
var _ZIndex = require("../common/ZIndex");
var _generateId = require("../utils/generateId");
var _mergeRefs = require("../utils/mergeRefs");
var _excluded = ["onFocus"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/DatePicker/DatePicker.jsx";
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var DatePicker = exports["default"] = /*#__PURE__*/function (_React$PureComponent) {
function DatePicker(props) {
var _this;
(0, _classCallCheck2["default"])(this, DatePicker);
_this = _callSuper(this, DatePicker, [props]);
_this.componentDidUpdate = function (prevProps) {
if (prevProps.inputRef !== _this.props.inputRef) {
(0, _mergeRefs.assignRef)(prevProps.inputRef, null);
(0, _mergeRefs.assignRef)(_this.props.inputRef, _this.state.inputRef);
}
var prevValue = prevProps.value;
var newValue = _this.props.value;
if (newValue !== prevValue) {
if (newValue) {
if (newValue !== _this.state.value) {
_this.setState({
inputValue: newValue
});
}
_this._saveNewValue(newValue);
return;
}
var value = _this._transformDate(new Date(), prevValue);
return _this.setState({
inputValue: null,
value: value
});
}
};
_this._openCalendar = function () {
if (!_this.state.isOpen && !_this.props.readOnly && !_this.props.disabled && _this.state.shouldOpenCalendar) {
return _this.setState({
isOpen: true,
value: _this.props.value || new Date()
}, function () {
_this.props.onOpen == null || _this.props.onOpen();
});
}
if (!_this.state.shouldOpenCalendar) {
return _this.setState({
shouldOpenCalendar: true
});
}
};
_this.openCalendar = _this._openCalendar;
_this._closeCalendar = function () {
var shouldOpenCalendar = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
var shouldFocusInput = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
_this.setState({
isOpen: false,
autoFocus: false,
shouldOpenCalendar: shouldOpenCalendar
}, function () {
_this.props.onClose == null || _this.props.onClose();
if (shouldFocusInput) {
var _this$state$inputRef;
(_this$state$inputRef = _this.state.inputRef) == null || _this$state$inputRef.focus();
}
});
};
_this._handleInputChange = function (_ref) {
var dateVal = _ref.dateVal;
_this._saveNewValue(dateVal);
};
_this._transformDate = function (value, oldValue) {
return [[value.getFullYear(), _setYear["default"]], [value.getMonth(), _setMonth["default"]], [value.getDate(), _setDate["default"]]].reduce(function (_value, _ref2) {
var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
datePart = _ref3[0],
setter = _ref3[1];
return setter(_value, datePart);
}, oldValue);
};
_this._saveNewValue = function (value) {
var modifiers = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
if (modifiers.disabled) {
return;
}
var oldValue = _this.props.value || new Date(new Date().setHours(0, 0, 0, 0));
var newValue = _this._transformDate(value, oldValue);
if (!(0, _isSameDay["default"])(value, _this.props.value)) {
_this.setState({
value: newValue
}, function () {
return _this.props.onChange(newValue);
});
}
};
_this._filterDate = function (date) {
return date < _constants.MAX_DATE && _this.props.filterDate(date);
};
_this._handleKeyDown = function (event, newDate) {
if (!_this.state.isOpen) {
_this._openCalendar();
}
switch (event.key) {
case 'Tab':
case 'Escape':
{
_this._closeCalendar();
return;
}
case 'Enter':
{
event.preventDefault();
if (newDate) {
var transformedDate = _this._transformDate(newDate, new Date(new Date().setHours(0, 0, 0, 0)));
_this.setState({
value: transformedDate,
inputValue: transformedDate
}, function () {
return _this.props.onChange(transformedDate);
});
}
_this._closeCalendar();
return;
}
case 'ArrowUp':
case 'ArrowDown':
{
event.preventDefault();
_this.setState({
autoFocus: true
});
return;
}
default:
return;
}
};
_this._handleCalendarKeyDown = function (event) {
switch (event.key) {
case 'Escape':
{
event.stopPropagation();
_this._closeCalendar(false, true);
return;
}
default:
return;
}
};
_this._handleChange = function (value, modifiers) {
_this.setState({
inputValue: value,
isOpen: !_this.props.shouldCloseOnSelect || false,
shouldOpenCalendar: !_this.props.shouldCloseOnSelect || false
});
_this._saveNewValue(value, modifiers);
};
_this._handleRef = function (ref) {
_this.setState({
inputRef: ref
});
(0, _mergeRefs.assignRef)(_this.props.inputRef, ref);
};
_this._handleInputFocus = function (event) {
if (!event.isTrusted) {
return;
}
_this._openCalendar();
_this.setState({
autoFocus: false
}, function () {
var _this$state$inputRef2, _this$props$inputProp;
(_this$state$inputRef2 = _this.state.inputRef) == null || _this$state$inputRef2.focus();
(_this$props$inputProp = _this.props.inputProps) == null || _this$props$inputProp.onFocus == null || _this$props$inputProp.onFocus(event);
});
};
_this._renderInput = function () {
var _this$props = _this.props,
inputDataHook = _this$props.inputDataHook,
disabled = _this$props.disabled,
placeholderText = _this$props.placeholderText,
readOnly = _this$props.readOnly,
status = _this$props.status,
statusMessage = _this$props.statusMessage,
customInput = _this$props.customInput,
_this$props$inputProp2 = _this$props.inputProps,
inputProps = _this$props$inputProp2 === void 0 ? {} : _this$props$inputProp2,
size = _this$props.size,
clearButton = _this$props.clearButton,
onClear = _this$props.onClear,
disableKeyboardType = _this$props.disableKeyboardType,
dateStyle = _this$props.dateStyle,
validate = _this$props.validate,
onValidate = _this$props.onValidate,
excludePastDates = _this$props.excludePastDates,
clearButtonTooltipContent = _this$props.clearButtonTooltipContent,
clearButtonTooltipProps = _this$props.clearButtonTooltipProps,
clearButtonAriaLabel = _this$props.clearButtonAriaLabel;
var onFocus = inputProps.onFocus,
inputPropsRest = (0, _objectWithoutProperties2["default"])(inputProps, _excluded);
return /*#__PURE__*/_react["default"].createElement(_DateInput["default"], (0, _extends2["default"])({
dataHook: inputDataHook,
className: _DatePickerSt.classes.input,
value: _this.state.inputValue,
onInputClicked: _this._openCalendar,
disabled: disabled,
readOnly: readOnly,
placeholder: placeholderText,
onFocus: _this._handleInputFocus,
onKeyDown: _this._handleKeyDown,
tabIndex: 0,
status: status,
statusMessage: statusMessage,
autoSelect: false,
customInput: customInput,
locale: _this._getLocale(),
dateStyle: dateStyle,
size: size,
clearButton: clearButton,
onClear: onClear,
onChange: _this._handleInputChange,
disableEditing: disableKeyboardType,
validate: validate,
onValidate: onValidate,
excludePastDates: excludePastDates,
clearButtonTooltipContent: clearButtonTooltipContent,
clearButtonTooltipProps: clearButtonTooltipProps,
clearButtonAriaLabel: clearButtonAriaLabel,
inputRef: _this._handleRef,
focusOnClearClick: true
}, customInput ? customInput.props : {}, inputPropsRest, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 254,
columnNumber: 7
}
}));
};
_this._combineDataHooks = function (start, end) {
return end ? "".concat(start, "-").concat(end) : start;
};
_this.rootId = (0, _generateId.generateID)();
_this.state = {
value: props.value || new Date(),
isOpen: props.initialOpen && !props.disabled,
inputValue: props.value,
autoFocus: false,
shouldOpenCalendar: true
};
return _this;
}
(0, _inherits2["default"])(DatePicker, _React$PureComponent);
return (0, _createClass2["default"])(DatePicker, [{
key: "_getLocale",
value: function _getLocale() {
return this.props.locale || this.context.locale || 'en';
}
}, {
key: "render",
value: function render() {
var _this2 = this,
_this$props$calendarP;
var _this$props2 = this.props,
className = _this$props2.className,
showMonthDropdown = _this$props2.showMonthDropdown,
showYearDropdown = _this$props2.showYearDropdown,
excludePastDates = _this$props2.excludePastDates,
rtl = _this$props2.rtl,
shouldCloseOnSelect = _this$props2.shouldCloseOnSelect,
width = _this$props2.width,
calendarDataHook = _this$props2.calendarDataHook,
twoMonths = _this$props2.twoMonths,
zIndex = _this$props2.zIndex,
dataHook = _this$props2.dataHook,
popoverProps = _this$props2.popoverProps,
firstDayOfWeek = _this$props2.firstDayOfWeek,
leftArrowAriaLabel = _this$props2.leftArrowAriaLabel,
leftArrowAriaLabelledBy = _this$props2.leftArrowAriaLabelledBy,
rightArrowAriaLabel = _this$props2.rightArrowAriaLabel,
rightArrowAriaLabelledBy = _this$props2.rightArrowAriaLabelledBy,
monthDropdownAriaLabel = _this$props2.monthDropdownAriaLabel,
monthDropdownAriaLabelledBy = _this$props2.monthDropdownAriaLabelledBy,
yearDropdownAriaLabel = _this$props2.yearDropdownAriaLabel,
yearDropdownAriaLabelledBy = _this$props2.yearDropdownAriaLabelledBy,
disableKeyboardType = _this$props2.disableKeyboardType,
dateIndication = _this$props2.dateIndication,
disabled = _this$props2.disabled,
renderFooter = _this$props2.renderFooter;
var _this$state = this.state,
isOpen = _this$state.isOpen,
value = _this$state.value;
var calendarProps = {
dataHook: this._combineDataHooks(_constants.dataHooks.datePickerCalendar, this.props.dataHook),
className: _DatePickerSt.classes.calendar,
locale: this._getLocale(),
showMonthDropdown: showMonthDropdown,
showYearDropdown: showYearDropdown,
filterDate: this._filterDate,
excludePastDates: excludePastDates,
rtl: rtl,
onChange: this._handleChange,
onClose: function onClose() {
return _this2._closeCalendar(false);
},
value: value,
shouldCloseOnSelect: shouldCloseOnSelect,
numOfMonths: twoMonths ? 2 : 1,
firstDayOfWeek: firstDayOfWeek,
leftArrowAriaLabel: leftArrowAriaLabel,
leftArrowAriaLabelledBy: leftArrowAriaLabelledBy,
rightArrowAriaLabel: rightArrowAriaLabel,
rightArrowAriaLabelledBy: rightArrowAriaLabelledBy,
monthDropdownAriaLabel: monthDropdownAriaLabel,
monthDropdownAriaLabelledBy: monthDropdownAriaLabelledBy,
yearDropdownAriaLabel: yearDropdownAriaLabel,
yearDropdownAriaLabelledBy: yearDropdownAriaLabelledBy,
dateIndication: dateIndication,
autoFocus: this.state.autoFocus || false,
containFocus: true,
onKeyDown: this._handleCalendarKeyDown,
size: (_this$props$calendarP = this.props.calendarProps) == null ? void 0 : _this$props$calendarP.size
};
return /*#__PURE__*/_react["default"].createElement("div", {
"data-date-picker-id": this.rootId,
className: (0, _DatePickerSt.st)(_DatePickerSt.classes.root, {
disableKeyboardType: disableKeyboardType,
disabled: disabled
}, className),
"data-hook": dataHook,
style: {
width: width
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 359,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement(_PopoverNext["default"], (0, _extends2["default"])({
className: _DatePickerSt.classes.popover,
dataHook: _constants.dataHooks.datePickerPopover,
onOpenChange: function onOpenChange(open, reason) {
if (!open && (reason === 'outside-press' || reason === 'escape-key')) {
_this2._closeCalendar(false);
}
},
appendTo: "parent",
open: isOpen,
zIndex: zIndex,
tabIndex: -1,
focusManagerEnabled: false,
placement: rtl ? 'top-end' : 'top-start',
autoUpdateOptions: {
animationFrame: true
}
}, popoverProps, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 369,
columnNumber: 9
}
}), /*#__PURE__*/_react["default"].createElement(_PopoverNext["default"].Trigger, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 389,
columnNumber: 11
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: _DatePickerSt.classes.inputContainer,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 390,
columnNumber: 13
}
}, this._renderInput())), /*#__PURE__*/_react["default"].createElement(_PopoverNext["default"].Content, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 392,
columnNumber: 11
}
}, /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": calendarDataHook,
"data-calendar-id": this.rootId,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 393,
columnNumber: 13
}
}, /*#__PURE__*/_react["default"].createElement(_Calendar["default"], (0, _extends2["default"])({}, calendarProps, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 394,
columnNumber: 15
}
})), renderFooter && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Divider["default"], {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 397,
columnNumber: 19
}
}), /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": _constants.dataHooks.datePickerFooter,
className: _DatePickerSt.classes.footer,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 398,
columnNumber: 19
}
}, renderFooter()))))));
}
}]);
}(_react["default"].PureComponent);
DatePicker.displayName = 'DatePicker';
DatePicker.rootId = void 0;
DatePicker.defaultProps = {
filterDate: function filterDate() {
return true;
},
rtl: false,
width: '150px',
zIndex: _ZIndex.ZIndex.datePicker,
disabled: false,
inputDataHook: _constants.dataHooks.datePickerInput,
popoverProps: {
zIndex: _ZIndex.ZIndex.datePickerPopover
},
disableKeyboardType: false,
onChange: function onChange() {},
dateStyle: 'short',
shouldCloseOnSelect: true
};
DatePicker.contextType = _context.WixStyleReactEnvironmentContext;