wix-style-react
Version:
wix-style-react
393 lines (306 loc) • 14.7 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
var _class, _temp;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _popper = require('popper.js');
var _popper2 = _interopRequireDefault(_popper);
var _DayPickerInput = require('react-day-picker/DayPickerInput');
var _DayPickerInput2 = _interopRequireDefault(_DayPickerInput);
var _is_same_day = require('date-fns/is_same_day');
var _is_same_day2 = _interopRequireDefault(_is_same_day);
var _set_year = require('date-fns/set_year');
var _set_year2 = _interopRequireDefault(_set_year);
var _set_month = require('date-fns/set_month');
var _set_month2 = _interopRequireDefault(_set_month);
var _set_date = require('date-fns/set_date');
var _set_date2 = _interopRequireDefault(_set_date);
var _WixComponent2 = require('../BaseComponents/WixComponent');
var _WixComponent3 = _interopRequireDefault(_WixComponent2);
var _Date = require('../new-icons/Date');
var _Date2 = _interopRequireDefault(_Date);
var _LocaleUtils = require('../LocaleUtils');
var _Calendar = require('../Calendar');
var _Calendar2 = _interopRequireDefault(_Calendar);
var _Input = require('../Input');
var _Input2 = _interopRequireDefault(_Input);
var _DatePicker = require('./DatePicker.scss');
var _DatePicker2 = _interopRequireDefault(_DatePicker);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
/**
* DatePicker component
*
* ### Keyboard support
* * `Left`: Move to the previous day.
* * `Right`: Move to the next day.
* * `Up`: Move to the previous week.
* * `Down`: Move to the next week.
* * `PgUp`: Move to the previous month.
* * `PgDn`: Move to the next month.
* * `Home`: Move to the previous year.
* * `End`: Move to the next year.
* * `Enter`/`Esc`/`Tab`: close the calendar. (`Enter` & `Esc` calls `preventDefault`)
*
*/
var DatePicker = (_temp = _class = function (_WixComponent) {
_inherits(DatePicker, _WixComponent);
function DatePicker(props) {
_classCallCheck(this, DatePicker);
var _this = _possibleConstructorReturn(this, (DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).call(this, props));
_this.openCalendar = function () {
if (!_this.state.isOpen) {
_this.setState({
isOpen: true,
isDateInputFocusable: false,
value: _this.props.value || new Date()
}, function () {
return _this._popper.scheduleUpdate();
});
}
};
_this.closeCalendar = function () {
_this.setState({ isOpen: false }, function () {
if (_this.props.onClose) {
_this.props.onClose();
}
});
/*
to fix case when user press tab in opened Calendar and:
1. Calendar become closed
2. Focus triggered
3. openCalendar triggered by focus
4. Calendar become visible
5. Looks like nothing happen
We need to do such steps:
1. Close calendar(with isDateInputFocusable: false)
2. After calendar is closed, on next event loop(after focus is fired) make isDateInputFocusable: focusable
to allow user to press tab in future and open Calendar
*/
setTimeout(function () {
return _this.makeInputFocusable();
});
};
_this.makeInputFocusable = function () {
return _this.setState({ isDateInputFocusable: true });
};
_this._saveNewValue = function (value) {
var modifiers = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
if (modifiers.disabled) {
return;
}
var isChanged = !(0, _is_same_day2.default)(value, _this.props.value);
if (isChanged) {
var newValue = [[value.getFullYear(), _set_year2.default], [value.getMonth(), _set_month2.default], [value.getDate(), _set_date2.default]].reduce(function (_value, _ref) {
var _ref2 = _slicedToArray(_ref, 2),
datePart = _ref2[0],
setter = _ref2[1];
return setter(_value, datePart);
}, _this.props.value);
_this.setState({ value: newValue }, function () {
return _this.props.onChange(newValue);
});
}
};
_this._handleKeyDown = function (event) {
// TODO: dirty for now
// tab key should move focus so can't preventDefault
if (event.keyCode !== 9) {
event.preventDefault();
}
if (!_this.state.isOpen) {
_this.openCalendar();
}
// keyHandler(this.state.value);
};
_this._formatDateValue = function () {
var _this$props = _this.props,
value = _this$props.value,
dateFormat = _this$props.dateFormat,
locale = _this$props.locale;
if (!value) {
return '';
}
if (typeof dateFormat === 'function') {
return dateFormat(value);
}
return (0, _LocaleUtils.formatDate)(value, dateFormat, locale);
};
_this._renderInput = function () {
var _this$props2 = _this.props,
inputDataHook = _this$props2.inputDataHook,
disabled = _this$props2.disabled,
placeholderText = _this$props2.placeholderText,
readOnly = _this$props2.readOnly,
initialValue = _this$props2.value,
error = _this$props2.error,
errorMessage = _this$props2.errorMessage,
customInput = _this$props2.customInput,
inputProps = _this$props2.inputProps;
var _inputProps = _extends({
dataHook: inputDataHook,
value: _this._formatDateValue(initialValue),
onInputClicked: _this.openCalendar,
disabled: disabled,
readOnly: readOnly,
placeholder: placeholderText,
prefix: _react2.default.createElement(
'span',
{ className: _DatePicker2.default.icon },
_react2.default.createElement(_Date2.default, null)
),
onFocus: _this.openCalendar,
onKeyDown: _this._handleKeyDown,
tabIndex: _this.state.isDateInputFocusable ? 1 : -1,
error: error,
errorMessage: errorMessage,
autoSelect: false
}, customInput ? customInput.props : {}, inputProps);
return _react2.default.cloneElement(customInput || _react2.default.createElement(_Input2.default, null), _inputProps);
};
_this._setInputRef = function (ref) {
return _this.inputRef = ref;
};
_this._setCalendarRef = function (ref) {
return _this.calendarRef = ref;
};
_this.state = {
value: props.value || new Date(),
isOpen: props.isOpen || false,
isDateInputFocusable: !props.isOpen
};
return _this;
}
_createClass(DatePicker, [{
key: 'componentDidMount',
value: function componentDidMount() {
_get(DatePicker.prototype.__proto__ || Object.getPrototypeOf(DatePicker.prototype), 'componentDidMount', this).call(this);
this._popper = new _popper2.default(this.inputRef, this.calendarRef, {
placement: 'top-start'
});
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this._popper.destroy();
_get(DatePicker.prototype.__proto__ || Object.getPrototypeOf(DatePicker.prototype), 'componentWillUnmount', this).call(this);
}
}, {
key: 'onClickOutside',
value: function onClickOutside() {
this.closeCalendar();
}
}, {
key: 'render',
value: function render() {
var _props = this.props,
showMonthDropdown = _props.showMonthDropdown,
showYearDropdown = _props.showYearDropdown,
filterDate = _props.filterDate,
excludePastDates = _props.excludePastDates,
rtl = _props.rtl,
shouldCloseOnSelect = _props.shouldCloseOnSelect,
width = _props.width,
calendarDataHook = _props.calendarDataHook,
twoMonths = _props.twoMonths,
locale = _props.locale,
zIndex = _props.zIndex;
var _state = this.state,
isOpen = _state.isOpen,
value = _state.value;
var calendarProps = {
locale: locale,
showMonthDropdown: showMonthDropdown,
showYearDropdown: showYearDropdown,
filterDate: filterDate,
excludePastDates: excludePastDates,
rtl: rtl,
onChange: this._saveNewValue,
onClose: this.closeCalendar,
value: value,
shouldCloseOnSelect: shouldCloseOnSelect,
numOfMonths: twoMonths ? 2 : 1
};
return _react2.default.createElement(
'div',
{ style: { width: width }, className: _DatePicker2.default.root },
_react2.default.createElement(
'div',
{ ref: this._setInputRef },
_react2.default.createElement(_DayPickerInput2.default, { component: this._renderInput, keepFocus: false })
),
_react2.default.createElement(
'div',
{
ref: this._setCalendarRef,
'data-hook': calendarDataHook,
style: { zIndex: zIndex }
},
isOpen && _react2.default.createElement(_Calendar2.default, _extends({
className: _DatePicker2.default.datePickerCalendar
}, calendarProps))
)
);
}
}]);
return DatePicker;
}(_WixComponent3.default), _class.displayName = 'DatePicker', _class.defaultProps = {
locale: 'en',
dateFormat: 'MM/DD/YYYY',
filterDate: function filterDate() {
return true;
},
rtl: false,
width: 150,
zIndex: 1
}, _temp);
exports.default = DatePicker;
DatePicker.propTypes = _extends({}, _Calendar2.default.propTypes, {
/** Can provide Input with your custom props. If you don't need a custom input element, and only want to pass props to the Input, then use inputProps prop. I think this is not in use outside of WSR, and can be deprecated. */
customInput: _propTypes2.default.node,
/** Properties appended to the default Input component or the custom Input component. */
inputProps: _propTypes2.default.object,
/** Custom date format, can be either:
* * `string` of tokens (see [`date-fns` docs](https://date-fns.org/v1.29.0/docs/format) for list of supported tokens)
* * `function` of signature `Date -> String`
*/
dateFormat: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
/** DatePicker instance locale */
locale: _propTypes2.default.oneOfType([_propTypes2.default.oneOf(['en', 'es', 'pt', 'fr', 'de', 'pl', 'it', 'ru', 'ja', 'ko', 'tr', 'sv', 'no', 'nl', 'da']), _propTypes2.default.shape({
distanceInWords: _propTypes2.default.object,
format: _propTypes2.default.object
})]),
/** Is the DatePicker disabled */
disabled: _propTypes2.default.bool,
/** dataHook for the DatePicker's Input */
inputDataHook: _propTypes2.default.string,
/** calendarDataHook for the DatePicker's calendar view */
calendarDataHook: _propTypes2.default.string,
/** placeholder of the Input */
placeholderText: _propTypes2.default.string,
/** RTL mode */
rtl: _propTypes2.default.bool,
/** The selected date */
value: _propTypes2.default.object,
/** controls the whether the calendar will be visible or not */
isOpen: _propTypes2.default.bool,
/** will show exclamation icon when true **/
error: _propTypes2.default.bool,
/** will display message when hovering error icon **/
errorMessage: _propTypes2.default.node,
/** set desired width of DatePicker input */
width: _propTypes2.default.number,
/** set desired z-index of DatePicker popover */
zIndex: _propTypes2.default.number
});