@wix/design-system
Version:
@wix/design-system
272 lines (271 loc) • 9.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _readOnlyError2 = _interopRequireDefault(require("@babel/runtime/helpers/readOnlyError"));
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 _react2 = require("@storybook/react");
var _ = _interopRequireDefault(require(".."));
var _DatePickerHead = require("../DatePickerHead/DatePickerHead");
var _visual = require("../../utils/test-utils/visual");
var _excluded = ["componentDidMount"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Calendar/test/Calendar.visual.jsx",
_this = void 0;
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 dataHook = 'calendar';
var nextMonthButtonDataHook = 'datepicker-right-arrow';
var previousMonthButtonDataHook = 'datepicker-left-arrow';
var CalendarWrapper = /*#__PURE__*/function (_React$PureComponent) {
function CalendarWrapper() {
(0, _classCallCheck2["default"])(this, CalendarWrapper);
return _callSuper(this, CalendarWrapper, arguments);
}
(0, _inherits2["default"])(CalendarWrapper, _React$PureComponent);
return (0, _createClass2["default"])(CalendarWrapper, [{
key: "componentDidMount",
value: function componentDidMount() {
var componentDidMount = this.props.componentDidMount;
componentDidMount && componentDidMount();
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
componentDidMount = _this$props.componentDidMount,
props = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);
return /*#__PURE__*/_react["default"].createElement(_["default"], (0, _extends2["default"])({
dataHook: dataHook,
onChange: function onChange() {
return undefined;
}
}, props, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 22,
columnNumber: 7
}
}));
}
}]);
}(_react["default"].PureComponent);
var commonTests = [{
it: 'should correctly render when selectedDays is a single date',
props: {
value: new Date('2017/05/01')
}
}, {
it: 'should correctly render when selectedDays is a date range',
props: {
value: {
from: new Date('2017/05/02'),
to: new Date('2017/05/06')
}
}
}, {
it: 'should correctly render two months',
props: {
value: {
from: new Date('2017/05/02'),
to: new Date('2017/05/06')
},
numOfMonths: 2
}
}, {
it: 'should correctly render when selectedDays is a date range with boundaries outside the current month',
props: {
value: {
from: new Date('2017/04/01'),
to: new Date('2017/07/01')
}
},
componentDidMount: function componentDidMount() {
(0, _visual.clickElement)(nextMonthButtonDataHook);
(0, _visual.focusElement)(nextMonthButtonDataHook);
}
}, {
it: 'should correctly render when selectedDays is an infinite date range starting in the current month',
props: {
value: {
from: new Date('2017/05/02')
}
}
}, {
it: 'should correctly render when selectedDays is a range of one day',
props: {
value: {
from: new Date('2017/05/02'),
to: new Date('2017/05/02')
}
}
}, {
it: 'should correctly render when previous month button is clicked',
props: {
value: new Date('2017/06/05')
},
componentDidMount: function componentDidMount() {
(0, _visual.clickElement)(previousMonthButtonDataHook);
(0, _visual.focusElement)(previousMonthButtonDataHook);
}
}, {
it: 'FilterDate - Prior for today dates (includes today)',
props: {
placeholderText: 'Select Date',
value: new Date('2020/10/10'),
filterDate: function filterDate(date) {
return date <= new Date('2020/10/10');
}
}
}, {
it: 'FilterDate - feature dates only (includes today)',
props: {
placeholderText: 'Select Date',
value: new Date('2020/10/10'),
filterDate: function filterDate(date) {
return date >= new Date('2020/10/10');
}
}
}, {
it: 'Months dropdown',
props: {
placeholderText: 'Select Date',
value: new Date('2020/10/10'),
showMonthDropdown: true
}
}, {
it: 'Years dropdown',
props: {
placeholderText: 'Select Date',
value: new Date('2020/10/10'),
showYearDropdown: true
}
}, {
it: 'Months and years dropdown',
props: {
placeholderText: 'Select Date',
value: new Date('2020/10/10'),
showMonthDropdown: true,
showYearDropdown: true
}
}].concat((0, _toConsumableArray2["default"])(_DatePickerHead.REVERSE_MONTH_YEAR_LANGUAGES.map(function (locale) {
return {
it: "Flips months and years dropdowns in ".concat(locale),
props: {
placeholderText: 'Select Date',
value: new Date('2020/10/10'),
showMonthDropdown: true,
showYearDropdown: true,
locale: locale
}
};
})), [{
it: 'Date Indication',
props: {
placeholderText: 'Select Date',
value: new Date('2020/10/8'),
showMonthDropdown: true,
showYearDropdown: true,
dateIndication: function dateIndication(_ref) {
var date = _ref.date,
isSelected = _ref.isSelected;
return date <= new Date('2020/10/10') ? /*#__PURE__*/_react["default"].createElement("div", {
className: "Indications",
style: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 153,
columnNumber: 11
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "indication",
style: {
borderRadius: '50%',
width: '4px',
height: '4px',
backgroundColor: 'black'
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 162,
columnNumber: 13
}
})) : null;
}
}
}, {
it: 'Should indicate custom today',
props: {
value: new Date('2020/10/10'),
today: new Date('2020/10/12')
}
}]);
var tests = [{
describe: 'Calendar',
size: 'medium',
its: commonTests
}, {
describe: 'Calendar-small',
size: 'small',
its: commonTests
}];
tests.forEach(function (_ref2) {
var describe = _ref2.describe,
its = _ref2.its,
size = _ref2.size;
its.forEach(function (_ref3) {
var it = _ref3.it,
props = _ref3.props,
componentDidMount = _ref3.componentDidMount;
(0, _react2.storiesOf)(describe, module).add(it, function () {
return /*#__PURE__*/_react["default"].createElement(CalendarWrapper, (0, _extends2["default"])({}, props, {
size: size,
componentDidMount: componentDidMount,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 201,
columnNumber: 7
}
}));
});
});
});
(0, _react2.storiesOf)("Calendar/semantic classes", module).add('styles', function () {
return /*#__PURE__*/_react["default"].createElement("div", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 211,
columnNumber: 3
}
}, /*#__PURE__*/_react["default"].createElement("style", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 212,
columnNumber: 5
}
}, "\n .date-picker-head__left-arrow {\n background-color: pink !important;\n }\n .date-picker-head__right-arrow {\n background-color: yellow !important;\n }\n "), /*#__PURE__*/_react["default"].createElement(CalendarWrapper, {
value: new Date('2024/04/15'),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 222,
columnNumber: 5
}
}));
});