@wix/design-system
Version:
@wix/design-system
269 lines • 8.37 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _readOnlyError from "@babel/runtime/helpers/readOnlyError";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
var _excluded = ["componentDidMount"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/Calendar/test/Calendar.visual.jsx",
_this = this;
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
import React from 'react';
import { storiesOf } from '@storybook/react';
import Calendar from '..';
import { REVERSE_MONTH_YEAR_LANGUAGES } from '../DatePickerHead/DatePickerHead';
import { clickElement, focusElement } from '../../utils/test-utils/visual';
var dataHook = 'calendar';
var nextMonthButtonDataHook = 'datepicker-right-arrow';
var previousMonthButtonDataHook = 'datepicker-left-arrow';
var CalendarWrapper = /*#__PURE__*/function (_React$PureComponent) {
function CalendarWrapper() {
_classCallCheck(this, CalendarWrapper);
return _callSuper(this, CalendarWrapper, arguments);
}
_inherits(CalendarWrapper, _React$PureComponent);
return _createClass(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 = _objectWithoutProperties(_this$props, _excluded);
return /*#__PURE__*/React.createElement(Calendar, _extends({
dataHook: dataHook,
onChange: function onChange() {
return undefined;
}
}, props, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 22,
columnNumber: 7
}
}));
}
}]);
}(React.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() {
clickElement(nextMonthButtonDataHook);
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() {
clickElement(previousMonthButtonDataHook);
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(_toConsumableArray(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.createElement("div", {
className: "Indications",
style: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 153,
columnNumber: 11
}
}, /*#__PURE__*/React.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;
storiesOf(describe, module).add(it, function () {
return /*#__PURE__*/React.createElement(CalendarWrapper, _extends({}, props, {
size: size,
componentDidMount: componentDidMount,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 201,
columnNumber: 7
}
}));
});
});
});
storiesOf("Calendar/semantic classes", module).add('styles', function () {
return /*#__PURE__*/React.createElement("div", {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 211,
columnNumber: 3
}
}, /*#__PURE__*/React.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.createElement(CalendarWrapper, {
value: new Date('2024/04/15'),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 222,
columnNumber: 5
}
}));
});