@qiwi/pijma-desktop-extra 0.1.2 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/lib/dts/main/date-picker/locale.d.ts +5 -3
  2. package/lib/dts/main/date-range-picker/index.d.ts +0 -4
  3. package/lib/es5/main/date-picker/index.js +17 -12
  4. package/lib/es5/main/date-picker/locale.js +8 -52
  5. package/lib/es5/main/date-range-picker/index.js +41 -52
  6. package/lib/es5/test/header.js +73 -61
  7. package/lib/es6/main/date-picker/index.js +62 -11
  8. package/lib/es6/main/date-picker/locale.js +5 -32
  9. package/lib/es6/main/date-range-picker/index.js +109 -56
  10. package/lib/es6/test/header.js +74 -62
  11. package/package.json +2 -2
package/lib/dts/main/date-picker/locale.d.ts CHANGED
@@ -1,3 +1,5 @@
1
- export declare const getMonths: (t: (str: string) => string) => string[];
2
- export declare const getWeekDaysLong: (t: (str: string) => string) => string[];
3
- export declare const getWeekDaysShort: (t: (str: string) => string) => string[];
1
+ export declare const locales: {
2
+ en: Locale;
3
+ ru: Locale;
4
+ };
5
+ export declare type TLanguage = keyof typeof locales;
package/lib/dts/main/date-range-picker/index.d.ts CHANGED
@@ -5,10 +5,6 @@ export declare const PickerDropdown: import("@emotion/styled").StyledComponent<{
5
5
  theme?: import("@emotion/react").Theme | undefined;
6
6
  as?: React.ElementType<any> | undefined;
7
7
  }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
8
- export declare const PickerCellContainer: import("@emotion/styled").StyledComponent<{
9
- theme?: import("@emotion/react").Theme | undefined;
10
- as?: React.ElementType<any> | undefined;
11
- }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
12
8
  declare const DateRangePicker: React.ComponentType<Omit<Pick<import("react-i18next").Subtract<DateRangerPickerProps & WithTranslation<"translation", undefined>, import("react-i18next").WithTranslationProps>, "title" | "onChange" | "t" | "tReady" | "dateFrom" | "dateTo" | "inputValue" | "minDate" | "maxDate" | "dayPickerProps"> & {
13
9
  numberOfMonths?: number | undefined;
14
10
  } & {}, keyof WithTranslation<N, undefined>> & import("react-i18next").WithTranslationProps>;
package/lib/es5/main/date-picker/index.js CHANGED
@@ -18,7 +18,7 @@ var _pijmaCore = require("@qiwi/pijma-core");
18
18
  var _pijmaDesktop = require("@qiwi/pijma-desktop");
19
19
  var _dateFns = require("date-fns");
20
20
  var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
21
- var _reactDayPicker = /*#__PURE__*/ _interopRequireDefault(require("react-day-picker"));
21
+ var _reactDayPicker = require("react-day-picker");
22
22
  var _reactI18Next = require("react-i18next");
23
23
  var _theme = require("../theme/index.js");
24
24
  var _locale = require("./locale.js");
@@ -26,7 +26,7 @@ var _wrap = /*#__PURE__*/ _interopRequireDefault(require("./wrap.js"));
26
26
  function _templateObject() {
27
27
  var data = _taggedTemplateLiteralLoose([
28
28
  "\n position: absolute;\n background: #fff;\n z-index: 10;\n box-shadow: ",
29
- ";\n border-radius: 8px;\n"
29
+ ";\n border-radius: 8px;\n\n .Selectable {\n .my-selected {\n padding: 0px;\n width: 40px;\n height: 40px;\n color: black;\n background-color: rgba(255, 140, 0);\n border-radius: 50%;\n }\n\n .my-head-cell {\n width: 40px;\n height: 40px;\n padding: 4px;\n }\n\n .my-month {\n margin: 1rem;\n }\n\n .my-caption {\n margin-bottom: 10px;\n margin-left: 8px;\n display: flex;\n justify-content: space-between;\n }\n\n .my-day {\n width: 40px;\n height: 40px;\n padding: 4px;\n }\n\n .my-today {\n color: rgb(208, 2, 27);\n }\n\n .my-today {\n color: rgb(208, 2, 27);\n }\n\n .my-caption-label {\n font-size: 20px;\n }\n }\n"
30
30
  ]);
31
31
  _templateObject = function _templateObject() {
32
32
  return data;
@@ -125,10 +125,7 @@ var _DatePicker = /*#__PURE__*/ function(Component) {
125
125
  };
126
126
  _proto.render = function render() {
127
127
  var _this = this;
128
- var t = this.props.t;
129
- var MONTHS = (0, _locale.getMonths)(t);
130
- var WEEKDAYS_LONG = (0, _locale.getWeekDaysLong)(t);
131
- var WEEKDAYS_SHORT = (0, _locale.getWeekDaysShort)(t);
128
+ var _props = this.props, t = _props.t, i18n = _props.i18n;
132
129
  return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_wrap.default, {
133
130
  onFocus: this.onFocus.bind(this),
134
131
  onBlur: this.onBlur.bind(this),
@@ -157,14 +154,22 @@ var _DatePicker = /*#__PURE__*/ function(Component) {
157
154
  children: function() {
158
155
  return /*#__PURE__*/ (0, _jsxRuntime.jsx)(PickerDropdown, {
159
156
  onFocus: _this.onFocus.bind(_this),
160
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactDayPicker.default, {
161
- months: MONTHS,
162
- weekdaysLong: WEEKDAYS_LONG,
163
- weekdaysShort: WEEKDAYS_SHORT,
157
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactDayPicker.DayPicker, {
158
+ className: "Selectable",
164
159
  onDayClick: _this.handleDayClick.bind(_this),
165
- selectedDays: _this.state.date,
160
+ selected: _this.state.date,
166
161
  month: _this.state.date,
167
- firstDayOfWeek: 1
162
+ locale: _locale.locales[i18n.language],
163
+ modifiersClassNames: {
164
+ selected: "my-selected",
165
+ today: "my-today"
166
+ },
167
+ classNames: {
168
+ day: "my-day",
169
+ head_cell: "my-head-cell",
170
+ caption: "my-caption",
171
+ month: "my-month"
172
+ }
168
173
  })
169
174
  });
170
175
  }
package/lib/es5/main/date-picker/locale.js CHANGED
@@ -2,58 +2,14 @@
2
2
  Object.defineProperty(exports, "__esModule", {
3
3
  value: true
4
4
  });
5
- function _export(target, all) {
6
- for(var name in all)Object.defineProperty(target, name, {
7
- enumerable: true,
8
- get: all[name]
9
- });
10
- }
11
- _export(exports, {
12
- getMonths: function() {
13
- return getMonths;
14
- },
15
- getWeekDaysLong: function() {
16
- return getWeekDaysLong;
17
- },
18
- getWeekDaysShort: function() {
19
- return getWeekDaysShort;
5
+ Object.defineProperty(exports, "locales", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return locales;
20
9
  }
21
10
  });
22
- var getMonths = function(t) {
23
- return [
24
- t("datePicker:jan"),
25
- t("datePicker:feb"),
26
- t("datePicker:mar"),
27
- t("datePicker:apr"),
28
- t("datePicker:may"),
29
- t("datePicker:jun"),
30
- t("datePicker:jul"),
31
- t("datePicker:aug"),
32
- t("datePicker:sep"),
33
- t("datePicker:oct"),
34
- t("datePicker:nov"),
35
- t("datePicker:dec"),
36
- ];
37
- };
38
- var getWeekDaysLong = function(t) {
39
- return [
40
- t("datePicker:sun"),
41
- t("datePicker:mon"),
42
- t("datePicker:tue"),
43
- t("datePicker:wen"),
44
- t("datePicker:thu"),
45
- t("datePicker:fri"),
46
- t("datePicker:sat"),
47
- ];
48
- };
49
- var getWeekDaysShort = function(t) {
50
- return [
51
- t("datePicker:sn"),
52
- t("datePicker:mn"),
53
- t("datePicker:tu"),
54
- t("datePicker:wn"),
55
- t("datePicker:th"),
56
- t("datePicker:fr"),
57
- t("datePicker:st"),
58
- ];
11
+ var _locale = require("date-fns/locale");
12
+ var locales = {
13
+ en: _locale.enUS,
14
+ ru: _locale.ru
59
15
  };
package/lib/es5/main/date-range-picker/index.js CHANGED
@@ -12,9 +12,6 @@ _export(exports, {
12
12
  PickerDropdown: function() {
13
13
  return PickerDropdown;
14
14
  },
15
- PickerCellContainer: function() {
16
- return PickerCellContainer;
17
- },
18
15
  DateRangePicker: function() {
19
16
  return DateRangePicker;
20
17
  }
@@ -29,15 +26,15 @@ var _pijmaCore = require("@qiwi/pijma-core");
29
26
  var _pijmaDesktop = require("@qiwi/pijma-desktop");
30
27
  var _dateFns = require("date-fns");
31
28
  var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
32
- var _reactDayPicker = /*#__PURE__*/ _interopRequireDefault(require("react-day-picker"));
29
+ var _reactDayPicker = require("react-day-picker");
33
30
  var _reactI18Next = require("react-i18next");
34
- var _locale = require("../date-picker/locale.js");
35
31
  var _wrap = /*#__PURE__*/ _interopRequireDefault(require("../date-picker/wrap.js"));
36
32
  var _theme = require("../theme/index.js");
33
+ var _locale = require("../date-picker/locale.js");
37
34
  function _templateObject() {
38
35
  var data = _taggedTemplateLiteralLoose([
39
- "\n position: absolute;\n background: #fff;\n z-index: 10;\n width: 596px;\n border-radius: 8px;\n box-shadow: ",
40
- ";\n\n .Selectable .DayPicker-Day {\n border-radius: 0 !important;\n }\n .Selectable .DayPicker-Day--start {\n border-top-left-radius: 50% !important;\n border-bottom-left-radius: 50% !important;\n }\n .Selectable .DayPicker-Day--end {\n border-top-right-radius: 50% !important;\n border-bottom-right-radius: 50% !important;\n }\n .Selectable\n .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {\n background-color: #ff8c0066 !important;\n color: #000000;\n }\n .DayPicker-NavButton {\n margin: 0 0;\n right: 1.5rem;\n }\n .DayPicker-NavButton--prev {\n margin-right: 2rem;\n }\n"
36
+ "\n position: absolute;\n background: #fff;\n z-index: 10;\n border-radius: 8px;\n box-shadow: ",
37
+ ";\n\n .Selectable {\n .my-selected {\n padding: 0px;\n width: 40px;\n height: 40px;\n color: black;\n background-color: rgba(255, 140, 0, 0.4);\n border-radius: unset;\n }\n\n .my-range-start {\n background-color: rgb(255, 140, 0);\n border-radius: 50% 0px 0px 50%;\n }\n\n .my-range-middle {\n }\n\n .my-range-end {\n background-color: rgb(255, 140, 0);\n border-radius: 0px 50% 50% 0px;\n }\n\n .my-head-cell {\n width: 40px;\n height: 40px;\n padding: 4px;\n }\n\n .my-caption {\n margin-bottom: 10px;\n margin-left: 8px;\n }\n\n .my-month {\n margin: 1rem;\n }\n\n .my-months {\n margin: 0 12px;\n display: flex;\n position: relative;\n }\n\n .my-day {\n width: 40px;\n height: 40px;\n padding: 4px;\n }\n\n .my-nav {\n position: absolute;\n translateY(-50%);\n top: 50%;\n }\n\n .my-caption-start {\n .my-nav {\n left: -6px;\n }\n }\n\n .my-caption-end {\n .my-nav {\n right: -6px;\n }\n }\n\n .my-day.my-selected.my-range-end.my-range-start {\n border-radius: 50%;\n }\n\n .my-today {\n color: rgb(208, 2, 27);\n }\n\n .my-caption-label {\n font-size: 20px;\n }\n }\n"
41
38
  ]);
42
39
  _templateObject = function _templateObject() {
43
40
  return data;
@@ -46,7 +43,7 @@ function _templateObject() {
46
43
  }
47
44
  function _templateObject1() {
48
45
  var data = _taggedTemplateLiteralLoose([
49
- "\n width: 30px;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n"
46
+ "\n position: relative;\n width: 100%;\n"
50
47
  ]);
51
48
  _templateObject1 = function _templateObject1() {
52
49
  return data;
@@ -54,38 +51,28 @@ function _templateObject1() {
54
51
  return data;
55
52
  }
56
53
  function _templateObject2() {
57
- var data = _taggedTemplateLiteralLoose([
58
- "\n position: relative;\n width: 100%;\n"
59
- ]);
60
- _templateObject2 = function _templateObject2() {
61
- return data;
62
- };
63
- return data;
64
- }
65
- function _templateObject3() {
66
54
  var data = _taggedTemplateLiteralLoose([
67
55
  "\n color: ",
68
56
  ";\n"
69
57
  ]);
70
- _templateObject3 = function _templateObject3() {
58
+ _templateObject2 = function _templateObject2() {
71
59
  return data;
72
60
  };
73
61
  return data;
74
62
  }
75
- function _templateObject4() {
63
+ function _templateObject3() {
76
64
  var data = _taggedTemplateLiteralLoose([
77
65
  "\n input {\n color: transparent;\n text-shadow: 0 0 0 #000;\n }\n"
78
66
  ]);
79
- _templateObject4 = function _templateObject4() {
67
+ _templateObject3 = function _templateObject3() {
80
68
  return data;
81
69
  };
82
70
  return data;
83
71
  }
84
72
  var PickerDropdown = (0, _pijmaCore.styled)("div")(_templateObject(), _theme.COLOR.SHADOW.Z3);
85
- var PickerCellContainer = (0, _pijmaCore.styled)("div")(_templateObject1());
86
- var Container = (0, _pijmaCore.styled)("div")(_templateObject2());
87
- var RedHelpText = (0, _pijmaCore.styled)("div")(_templateObject3(), _theme.COLOR.TEXT.Error);
88
- var InputWrapper = (0, _pijmaCore.styled)("div")(_templateObject4());
73
+ var Container = (0, _pijmaCore.styled)("div")(_templateObject1());
74
+ var RedHelpText = (0, _pijmaCore.styled)("div")(_templateObject2(), _theme.COLOR.TEXT.Error);
75
+ var InputWrapper = (0, _pijmaCore.styled)("div")(_templateObject3());
89
76
  var DisabledInputDateRangePicker = /*#__PURE__*/ function(Component) {
90
77
  "use strict";
91
78
  _inherits(DisabledInputDateRangePicker, Component);
@@ -110,7 +97,7 @@ var DisabledInputDateRangePicker = /*#__PURE__*/ function(Component) {
110
97
  from: _this.props.dateFrom,
111
98
  to: _this.props.dateTo || _this.props.dateFrom
112
99
  };
113
- var range = _reactDayPicker.default.addToRange(date, normalizeDate);
100
+ var range = (0, _reactDayPicker.addToRange)(date, normalizeDate);
114
101
  var ref = range || normalizeDate, dateFrom = ref.from, dateTo = ref.to;
115
102
  if ((dateFrom || dateTo) && _this.props.onChange) {
116
103
  _this.props.onChange({
@@ -148,24 +135,18 @@ var DisabledInputDateRangePicker = /*#__PURE__*/ function(Component) {
148
135
  var _proto = DisabledInputDateRangePicker.prototype;
149
136
  _proto.render = function render() {
150
137
  var _this = this;
151
- var t = this.props.t;
152
- var MONTHS = (0, _locale.getMonths)(t);
153
- var WEEKDAYS_LONG = (0, _locale.getWeekDaysLong)(t);
154
- var WEEKDAYS_SHORT = (0, _locale.getWeekDaysShort)(t);
138
+ var _props = this.props, t = _props.t, i18n = _props.i18n;
155
139
  var _state = this.state, errorDate = _state.errorDate, helpText = _state.helpText, showPicker = _state.showPicker;
156
- var _props = this.props, minDate = _props.minDate, maxDate = _props.maxDate, dayPickerProps = _props.dayPickerProps, title = _props.title, numberOfMonths = _props.numberOfMonths, dateTo = _props.dateTo, dateFrom = _props.dateFrom, inputValue = _props.inputValue;
140
+ var _props1 = this.props, minDate = _props1.minDate, maxDate = _props1.maxDate, dayPickerProps = _props1.dayPickerProps, title = _props1.title, numberOfMonths = _props1.numberOfMonths, dateTo = _props1.dateTo, dateFrom = _props1.dateFrom, inputValue = _props1.inputValue;
157
141
  var modifiers = {
158
142
  start: dateFrom,
159
143
  end: dateTo
160
144
  };
161
145
  var disabled = {};
162
- var selectedDays = [
163
- dateFrom,
164
- {
165
- from: dateFrom,
166
- to: dateTo
167
- }
168
- ];
146
+ var selectedDays = {
147
+ from: dateFrom,
148
+ to: dateTo
149
+ };
169
150
  var value = inputValue || this.formatPeriod(dateFrom, dateTo);
170
151
  if (minDate) {
171
152
  disabled.before = minDate;
@@ -209,25 +190,33 @@ var DisabledInputDateRangePicker = /*#__PURE__*/ function(Component) {
209
190
  children: function() {
210
191
  return /*#__PURE__*/ (0, _jsxRuntime.jsx)(PickerDropdown, {
211
192
  onFocus: _this.onFocus,
212
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactDayPicker.default, _extends({
193
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactDayPicker.DayPicker, _extends({
194
+ mode: "range",
213
195
  className: "Selectable",
214
- disabledDays: disabled,
215
- months: MONTHS,
216
- weekdaysLong: WEEKDAYS_LONG,
217
- weekdaysShort: WEEKDAYS_SHORT,
218
- // @ts-ignore
219
- renderDay: function(day) {
220
- return /*#__PURE__*/ (0, _jsxRuntime.jsx)(PickerCellContainer, {
221
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
222
- children: day.getDate()
223
- })
224
- });
225
- },
196
+ disabled: disabled,
197
+ locale: _locale.locales[i18n.language],
226
198
  numberOfMonths: numberOfMonths,
227
- selectedDays: selectedDays,
199
+ selected: selectedDays,
228
200
  modifiers: modifiers,
229
201
  onDayClick: _this.handleDayClick,
230
- firstDayOfWeek: 1
202
+ modifiersClassNames: {
203
+ selected: "my-selected",
204
+ today: "my-today",
205
+ range_start: "my-range-start",
206
+ range_middle: "my-range-middle",
207
+ range_end: "my-range-end"
208
+ },
209
+ classNames: {
210
+ day: "my-day",
211
+ head_cell: "my-head-cell",
212
+ caption: "my-caption",
213
+ month: "my-month",
214
+ months: "my-months",
215
+ caption_start: "my-caption-start",
216
+ caption_end: "my-caption-end",
217
+ nav: "my-nav",
218
+ caption_label: "my-caption-label"
219
+ }
231
220
  }, dayPickerProps))
232
221
  });
233
222
  }
package/lib/es5/test/header.js CHANGED
@@ -33,85 +33,97 @@ describe("Header", function() {
33
33
  });
34
34
  it("renders correctly", function() {
35
35
  var header = _reactTestRenderer.default.create(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactRouter.MemoryRouter, {
36
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_main.Header, {
37
- isLoading: false,
38
- title: "Выплаты",
39
- userName: "best_test@test.ru",
40
- selectorData: {
41
- items: [
42
- "Test_Agent"
43
- ],
44
- currentItem: "Test_Agent"
45
- },
46
- // @ts-ignore
47
- link: _reactRouterDom.NavLink,
48
- navItems: navItems,
49
- navActiveItem: {
50
- pathname: "/docs"
51
- },
52
- onItemChange: function() {
53
- /* noop */ },
54
- onLogout: function() {
55
- /* noop */ }
36
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_main.ThemeProvider, {
37
+ theme: _main.themes.orange,
38
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_main.Header, {
39
+ isLoading: false,
40
+ title: "Выплаты",
41
+ userName: "best_test@test.ru",
42
+ selectorData: {
43
+ items: [
44
+ "Test_Agent"
45
+ ],
46
+ currentItem: "Test_Agent"
47
+ },
48
+ // @ts-ignore
49
+ link: _reactRouterDom.NavLink,
50
+ navItems: navItems,
51
+ navActiveItem: {
52
+ pathname: "/docs"
53
+ },
54
+ onItemChange: function() {
55
+ /* noop */ },
56
+ onLogout: function() {
57
+ /* noop */ }
58
+ })
56
59
  })
57
60
  })).toJSON();
58
61
  expect(header).toMatchSnapshot();
59
62
  });
60
63
  it("renders correctly", function() {
61
64
  var header = _reactTestRenderer.default.create(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactRouter.MemoryRouter, {
62
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_main.Header, {
63
- isLoading: false,
64
- title: "Выплаты",
65
- userName: "best_test@test.ru",
66
- selectorData: {
67
- items: [],
68
- currentItem: ""
69
- },
70
- // @ts-ignore
71
- link: _reactRouterDom.NavLink,
72
- navItems: navItems,
73
- onItemChange: function() {
74
- /* noop */ },
75
- onLogout: function() {
76
- /* noop */ }
65
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_main.ThemeProvider, {
66
+ theme: _main.themes.orange,
67
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_main.Header, {
68
+ isLoading: false,
69
+ title: "Выплаты",
70
+ userName: "best_test@test.ru",
71
+ selectorData: {
72
+ items: [],
73
+ currentItem: ""
74
+ },
75
+ // @ts-ignore
76
+ link: _reactRouterDom.NavLink,
77
+ navItems: navItems,
78
+ onItemChange: function() {
79
+ /* noop */ },
80
+ onLogout: function() {
81
+ /* noop */ }
82
+ })
77
83
  })
78
84
  })).toJSON();
79
85
  expect(header).toMatchSnapshot();
80
86
  });
81
87
  it("renders correctly", function() {
82
88
  var header = _reactTestRenderer.default.create(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactRouter.MemoryRouter, {
83
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_main.Header, {
84
- isLoading: false,
85
- title: "Выплаты",
86
- userName: "best_test@test.ru",
87
- selectorData: {
88
- items: [],
89
- currentItem: ""
90
- },
91
- // @ts-ignore
92
- link: _reactRouterDom.NavLink,
93
- navItems: [],
94
- onItemChange: function() {
95
- /* noop */ },
96
- onLogout: function() {
97
- /* noop */ }
89
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_main.ThemeProvider, {
90
+ theme: _main.themes.orange,
91
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_main.Header, {
92
+ isLoading: false,
93
+ title: "Выплаты",
94
+ userName: "best_test@test.ru",
95
+ selectorData: {
96
+ items: [],
97
+ currentItem: ""
98
+ },
99
+ // @ts-ignore
100
+ link: _reactRouterDom.NavLink,
101
+ navItems: [],
102
+ onItemChange: function() {
103
+ /* noop */ },
104
+ onLogout: function() {
105
+ /* noop */ }
106
+ })
98
107
  })
99
108
  })).toJSON();
100
109
  expect(header).toMatchSnapshot();
101
110
  });
102
111
  it("renders correctly", function() {
103
112
  var header = _reactTestRenderer.default.create(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactRouter.MemoryRouter, {
104
- children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_main.Header, {
105
- isLoading: true,
106
- title: "Выплаты",
107
- userName: "",
108
- selectorData: {
109
- items: [],
110
- currentItem: ""
111
- },
112
- // @ts-ignore
113
- link: _reactRouterDom.NavLink,
114
- navItems: navItems
113
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_main.ThemeProvider, {
114
+ theme: _main.themes.orange,
115
+ children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_main.Header, {
116
+ isLoading: true,
117
+ title: "Выплаты",
118
+ userName: "",
119
+ selectorData: {
120
+ items: [],
121
+ currentItem: ""
122
+ },
123
+ // @ts-ignore
124
+ link: _reactRouterDom.NavLink,
125
+ navItems: navItems
126
+ })
115
127
  })
116
128
  })).toJSON();
117
129
  expect(header).toMatchSnapshot();
package/lib/es6/main/date-picker/index.js CHANGED
@@ -3,10 +3,10 @@ import { Icon, Overlay, styled } from '@qiwi/pijma-core';
3
3
  import { MaskTextField } from '@qiwi/pijma-desktop';
4
4
  import { format } from 'date-fns';
5
5
  import React, { Component } from 'react';
6
- import DayPicker from 'react-day-picker';
6
+ import { DayPicker } from 'react-day-picker';
7
7
  import { withTranslation } from 'react-i18next';
8
8
  import { COLOR } from '../theme/index.js';
9
- import { getMonths, getWeekDaysLong, getWeekDaysShort } from './locale.js';
9
+ import { locales } from './locale.js';
10
10
  import Wrap from './wrap.js';
11
11
  const PickerDropdown = styled('div')`
12
12
  position: absolute;
@@ -14,6 +14,52 @@ const PickerDropdown = styled('div')`
14
14
  z-index: 10;
15
15
  box-shadow: ${COLOR.SHADOW.Z3};
16
16
  border-radius: 8px;
17
+
18
+ .Selectable {
19
+ .my-selected {
20
+ padding: 0px;
21
+ width: 40px;
22
+ height: 40px;
23
+ color: black;
24
+ background-color: rgba(255, 140, 0);
25
+ border-radius: 50%;
26
+ }
27
+
28
+ .my-head-cell {
29
+ width: 40px;
30
+ height: 40px;
31
+ padding: 4px;
32
+ }
33
+
34
+ .my-month {
35
+ margin: 1rem;
36
+ }
37
+
38
+ .my-caption {
39
+ margin-bottom: 10px;
40
+ margin-left: 8px;
41
+ display: flex;
42
+ justify-content: space-between;
43
+ }
44
+
45
+ .my-day {
46
+ width: 40px;
47
+ height: 40px;
48
+ padding: 4px;
49
+ }
50
+
51
+ .my-today {
52
+ color: rgb(208, 2, 27);
53
+ }
54
+
55
+ .my-today {
56
+ color: rgb(208, 2, 27);
57
+ }
58
+
59
+ .my-caption-label {
60
+ font-size: 20px;
61
+ }
62
+ }
17
63
  `;
18
64
  const Container = styled('div')`
19
65
  position: relative;
@@ -69,10 +115,7 @@ class _DatePicker extends Component {
69
115
  }
70
116
  }
71
117
  render() {
72
- const { t } = this.props;
73
- const MONTHS = getMonths(t);
74
- const WEEKDAYS_LONG = getWeekDaysLong(t);
75
- const WEEKDAYS_SHORT = getWeekDaysShort(t);
118
+ const { t , i18n } = this.props;
76
119
  return /*#__PURE__*/ _jsxs(Wrap, {
77
120
  onFocus: this.onFocus.bind(this),
78
121
  onBlur: this.onBlur.bind(this),
@@ -101,13 +144,21 @@ class _DatePicker extends Component {
101
144
  children: ()=>/*#__PURE__*/ _jsx(PickerDropdown, {
102
145
  onFocus: this.onFocus.bind(this),
103
146
  children: /*#__PURE__*/ _jsx(DayPicker, {
104
- months: MONTHS,
105
- weekdaysLong: WEEKDAYS_LONG,
106
- weekdaysShort: WEEKDAYS_SHORT,
147
+ className: "Selectable",
107
148
  onDayClick: this.handleDayClick.bind(this),
108
- selectedDays: this.state.date,
149
+ selected: this.state.date,
109
150
  month: this.state.date,
110
- firstDayOfWeek: 1
151
+ locale: locales[i18n.language],
152
+ modifiersClassNames: {
153
+ selected: 'my-selected',
154
+ today: 'my-today'
155
+ },
156
+ classNames: {
157
+ day: 'my-day',
158
+ head_cell: 'my-head-cell',
159
+ caption: 'my-caption',
160
+ month: 'my-month'
161
+ }
111
162
  })
112
163
  })
113
164
  })
package/lib/es6/main/date-picker/locale.js CHANGED
@@ -1,32 +1,5 @@
1
- export const getMonths = (t)=>[
2
- t('datePicker:jan'),
3
- t('datePicker:feb'),
4
- t('datePicker:mar'),
5
- t('datePicker:apr'),
6
- t('datePicker:may'),
7
- t('datePicker:jun'),
8
- t('datePicker:jul'),
9
- t('datePicker:aug'),
10
- t('datePicker:sep'),
11
- t('datePicker:oct'),
12
- t('datePicker:nov'),
13
- t('datePicker:dec'),
14
- ];
15
- export const getWeekDaysLong = (t)=>[
16
- t('datePicker:sun'),
17
- t('datePicker:mon'),
18
- t('datePicker:tue'),
19
- t('datePicker:wen'),
20
- t('datePicker:thu'),
21
- t('datePicker:fri'),
22
- t('datePicker:sat'),
23
- ];
24
- export const getWeekDaysShort = (t)=>[
25
- t('datePicker:sn'),
26
- t('datePicker:mn'),
27
- t('datePicker:tu'),
28
- t('datePicker:wn'),
29
- t('datePicker:th'),
30
- t('datePicker:fr'),
31
- t('datePicker:st'),
32
- ];
1
+ import { enUS, ru } from 'date-fns/locale';
2
+ export const locales = {
3
+ en: enUS,
4
+ ru
5
+ };
package/lib/es6/main/date-range-picker/index.js CHANGED
@@ -3,50 +3,99 @@ import { Icon, Overlay, styled } from '@qiwi/pijma-core';
3
3
  import { TextField } from '@qiwi/pijma-desktop';
4
4
  import { format } from 'date-fns';
5
5
  import React, { Component } from 'react';
6
- import DayPicker from 'react-day-picker';
6
+ import { DayPicker, addToRange } from 'react-day-picker';
7
7
  import { withTranslation } from 'react-i18next';
8
- import { getMonths, getWeekDaysLong, getWeekDaysShort } from '../date-picker/locale.js';
9
8
  import Wrap from '../date-picker/wrap.js';
10
9
  import { COLOR } from '../theme/index.js';
10
+ import { locales } from '../date-picker/locale.js';
11
11
  export const PickerDropdown = styled('div')`
12
12
  position: absolute;
13
13
  background: #fff;
14
14
  z-index: 10;
15
- width: 596px;
16
15
  border-radius: 8px;
17
16
  box-shadow: ${COLOR.SHADOW.Z3};
18
17
 
19
- .Selectable .DayPicker-Day {
20
- border-radius: 0 !important;
21
- }
22
- .Selectable .DayPicker-Day--start {
23
- border-top-left-radius: 50% !important;
24
- border-bottom-left-radius: 50% !important;
25
- }
26
- .Selectable .DayPicker-Day--end {
27
- border-top-right-radius: 50% !important;
28
- border-bottom-right-radius: 50% !important;
29
- }
30
- .Selectable
31
- .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
32
- background-color: #ff8c0066 !important;
33
- color: #000000;
34
- }
35
- .DayPicker-NavButton {
36
- margin: 0 0;
37
- right: 1.5rem;
38
- }
39
- .DayPicker-NavButton--prev {
40
- margin-right: 2rem;
18
+ .Selectable {
19
+ .my-selected {
20
+ padding: 0px;
21
+ width: 40px;
22
+ height: 40px;
23
+ color: black;
24
+ background-color: rgba(255, 140, 0, 0.4);
25
+ border-radius: unset;
26
+ }
27
+
28
+ .my-range-start {
29
+ background-color: rgb(255, 140, 0);
30
+ border-radius: 50% 0px 0px 50%;
31
+ }
32
+
33
+ .my-range-middle {
34
+ }
35
+
36
+ .my-range-end {
37
+ background-color: rgb(255, 140, 0);
38
+ border-radius: 0px 50% 50% 0px;
39
+ }
40
+
41
+ .my-head-cell {
42
+ width: 40px;
43
+ height: 40px;
44
+ padding: 4px;
45
+ }
46
+
47
+ .my-caption {
48
+ margin-bottom: 10px;
49
+ margin-left: 8px;
50
+ }
51
+
52
+ .my-month {
53
+ margin: 1rem;
54
+ }
55
+
56
+ .my-months {
57
+ margin: 0 12px;
58
+ display: flex;
59
+ position: relative;
60
+ }
61
+
62
+ .my-day {
63
+ width: 40px;
64
+ height: 40px;
65
+ padding: 4px;
66
+ }
67
+
68
+ .my-nav {
69
+ position: absolute;
70
+ translateY(-50%);
71
+ top: 50%;
72
+ }
73
+
74
+ .my-caption-start {
75
+ .my-nav {
76
+ left: -6px;
77
+ }
78
+ }
79
+
80
+ .my-caption-end {
81
+ .my-nav {
82
+ right: -6px;
83
+ }
84
+ }
85
+
86
+ .my-day.my-selected.my-range-end.my-range-start {
87
+ border-radius: 50%;
88
+ }
89
+
90
+ .my-today {
91
+ color: rgb(208, 2, 27);
92
+ }
93
+
94
+ .my-caption-label {
95
+ font-size: 20px;
96
+ }
41
97
  }
42
98
  `;
43
- export const PickerCellContainer = styled('div')`
44
- width: 30px;
45
- height: 30px;
46
- display: flex;
47
- align-items: center;
48
- justify-content: center;
49
- `;
50
99
  const Container = styled('div')`
51
100
  position: relative;
52
101
  width: 100%;
@@ -62,10 +111,7 @@ const InputWrapper = styled('div')`
62
111
  `;
63
112
  class DisabledInputDateRangePicker extends Component {
64
113
  render() {
65
- const { t } = this.props;
66
- const MONTHS = getMonths(t);
67
- const WEEKDAYS_LONG = getWeekDaysLong(t);
68
- const WEEKDAYS_SHORT = getWeekDaysShort(t);
114
+ const { t , i18n } = this.props;
69
115
  const { errorDate , helpText , showPicker } = this.state;
70
116
  const { minDate , maxDate , dayPickerProps , title , numberOfMonths , dateTo , dateFrom , inputValue , } = this.props;
71
117
  const modifiers = {
@@ -73,13 +119,10 @@ class DisabledInputDateRangePicker extends Component {
73
119
  end: dateTo
74
120
  };
75
121
  const disabled = {};
76
- const selectedDays = [
77
- dateFrom,
78
- {
79
- from: dateFrom,
80
- to: dateTo
81
- }
82
- ];
122
+ const selectedDays = {
123
+ from: dateFrom,
124
+ to: dateTo
125
+ };
83
126
  const value = inputValue || this.formatPeriod(dateFrom, dateTo);
84
127
  if (minDate) {
85
128
  disabled.before = minDate;
@@ -123,22 +166,32 @@ class DisabledInputDateRangePicker extends Component {
123
166
  children: ()=>/*#__PURE__*/ _jsx(PickerDropdown, {
124
167
  onFocus: this.onFocus,
125
168
  children: /*#__PURE__*/ _jsx(DayPicker, {
169
+ mode: 'range',
126
170
  className: "Selectable",
127
- disabledDays: disabled,
128
- months: MONTHS,
129
- weekdaysLong: WEEKDAYS_LONG,
130
- weekdaysShort: WEEKDAYS_SHORT,
131
- // @ts-ignore
132
- renderDay: (day)=>/*#__PURE__*/ _jsx(PickerCellContainer, {
133
- children: /*#__PURE__*/ _jsx("div", {
134
- children: day.getDate()
135
- })
136
- }),
171
+ disabled: disabled,
172
+ locale: locales[i18n.language],
137
173
  numberOfMonths: numberOfMonths,
138
- selectedDays: selectedDays,
174
+ selected: selectedDays,
139
175
  modifiers: modifiers,
140
176
  onDayClick: this.handleDayClick,
141
- firstDayOfWeek: 1,
177
+ modifiersClassNames: {
178
+ selected: 'my-selected',
179
+ today: 'my-today',
180
+ range_start: 'my-range-start',
181
+ range_middle: 'my-range-middle',
182
+ range_end: 'my-range-end'
183
+ },
184
+ classNames: {
185
+ day: 'my-day',
186
+ head_cell: 'my-head-cell',
187
+ caption: 'my-caption',
188
+ month: 'my-month',
189
+ months: 'my-months',
190
+ caption_start: 'my-caption-start',
191
+ caption_end: 'my-caption-end',
192
+ nav: 'my-nav',
193
+ caption_label: 'my-caption-label'
194
+ },
142
195
  ...dayPickerProps
143
196
  })
144
197
  })
@@ -165,7 +218,7 @@ class DisabledInputDateRangePicker extends Component {
165
218
  from: this.props.dateFrom,
166
219
  to: this.props.dateTo || this.props.dateFrom
167
220
  };
168
- const range = DayPicker.addToRange(date, normalizeDate);
221
+ const range = addToRange(date, normalizeDate);
169
222
  const { from: dateFrom , to: dateTo } = range || normalizeDate;
170
223
  if ((dateFrom || dateTo) && this.props.onChange) {
171
224
  this.props.onChange({
package/lib/es6/test/header.js CHANGED
@@ -3,7 +3,7 @@ import React from 'react';
3
3
  import { MemoryRouter } from 'react-router';
4
4
  import { NavLink } from 'react-router-dom';
5
5
  import renderer from 'react-test-renderer';
6
- import { Header } from '../main/index.js';
6
+ import { Header, ThemeProvider, themes } from '../main/index.js';
7
7
  const navItems = [
8
8
  {
9
9
  name: 'Транзакции',
@@ -28,85 +28,97 @@ describe('Header', ()=>{
28
28
  });
29
29
  it('renders correctly', ()=>{
30
30
  const header = renderer.create(/*#__PURE__*/ _jsx(MemoryRouter, {
31
- children: /*#__PURE__*/ _jsx(Header, {
32
- isLoading: false,
33
- title: 'Выплаты',
34
- userName: 'best_test@test.ru',
35
- selectorData: {
36
- items: [
37
- 'Test_Agent'
38
- ],
39
- currentItem: 'Test_Agent'
40
- },
41
- // @ts-ignore
42
- link: NavLink,
43
- navItems: navItems,
44
- navActiveItem: {
45
- pathname: '/docs'
46
- },
47
- onItemChange: ()=>{
48
- /* noop */ },
49
- onLogout: ()=>{
50
- /* noop */ }
31
+ children: /*#__PURE__*/ _jsx(ThemeProvider, {
32
+ theme: themes.orange,
33
+ children: /*#__PURE__*/ _jsx(Header, {
34
+ isLoading: false,
35
+ title: 'Выплаты',
36
+ userName: 'best_test@test.ru',
37
+ selectorData: {
38
+ items: [
39
+ 'Test_Agent'
40
+ ],
41
+ currentItem: 'Test_Agent'
42
+ },
43
+ // @ts-ignore
44
+ link: NavLink,
45
+ navItems: navItems,
46
+ navActiveItem: {
47
+ pathname: '/docs'
48
+ },
49
+ onItemChange: ()=>{
50
+ /* noop */ },
51
+ onLogout: ()=>{
52
+ /* noop */ }
53
+ })
51
54
  })
52
55
  })).toJSON();
53
56
  expect(header).toMatchSnapshot();
54
57
  });
55
58
  it('renders correctly', ()=>{
56
59
  const header = renderer.create(/*#__PURE__*/ _jsx(MemoryRouter, {
57
- children: /*#__PURE__*/ _jsx(Header, {
58
- isLoading: false,
59
- title: 'Выплаты',
60
- userName: 'best_test@test.ru',
61
- selectorData: {
62
- items: [],
63
- currentItem: ''
64
- },
65
- // @ts-ignore
66
- link: NavLink,
67
- navItems: navItems,
68
- onItemChange: ()=>{
69
- /* noop */ },
70
- onLogout: ()=>{
71
- /* noop */ }
60
+ children: /*#__PURE__*/ _jsx(ThemeProvider, {
61
+ theme: themes.orange,
62
+ children: /*#__PURE__*/ _jsx(Header, {
63
+ isLoading: false,
64
+ title: 'Выплаты',
65
+ userName: 'best_test@test.ru',
66
+ selectorData: {
67
+ items: [],
68
+ currentItem: ''
69
+ },
70
+ // @ts-ignore
71
+ link: NavLink,
72
+ navItems: navItems,
73
+ onItemChange: ()=>{
74
+ /* noop */ },
75
+ onLogout: ()=>{
76
+ /* noop */ }
77
+ })
72
78
  })
73
79
  })).toJSON();
74
80
  expect(header).toMatchSnapshot();
75
81
  });
76
82
  it('renders correctly', ()=>{
77
83
  const header = renderer.create(/*#__PURE__*/ _jsx(MemoryRouter, {
78
- children: /*#__PURE__*/ _jsx(Header, {
79
- isLoading: false,
80
- title: 'Выплаты',
81
- userName: 'best_test@test.ru',
82
- selectorData: {
83
- items: [],
84
- currentItem: ''
85
- },
86
- // @ts-ignore
87
- link: NavLink,
88
- navItems: [],
89
- onItemChange: ()=>{
90
- /* noop */ },
91
- onLogout: ()=>{
92
- /* noop */ }
84
+ children: /*#__PURE__*/ _jsx(ThemeProvider, {
85
+ theme: themes.orange,
86
+ children: /*#__PURE__*/ _jsx(Header, {
87
+ isLoading: false,
88
+ title: 'Выплаты',
89
+ userName: 'best_test@test.ru',
90
+ selectorData: {
91
+ items: [],
92
+ currentItem: ''
93
+ },
94
+ // @ts-ignore
95
+ link: NavLink,
96
+ navItems: [],
97
+ onItemChange: ()=>{
98
+ /* noop */ },
99
+ onLogout: ()=>{
100
+ /* noop */ }
101
+ })
93
102
  })
94
103
  })).toJSON();
95
104
  expect(header).toMatchSnapshot();
96
105
  });
97
106
  it('renders correctly', ()=>{
98
107
  const header = renderer.create(/*#__PURE__*/ _jsx(MemoryRouter, {
99
- children: /*#__PURE__*/ _jsx(Header, {
100
- isLoading: true,
101
- title: 'Выплаты',
102
- userName: '',
103
- selectorData: {
104
- items: [],
105
- currentItem: ''
106
- },
107
- // @ts-ignore
108
- link: NavLink,
109
- navItems: navItems
108
+ children: /*#__PURE__*/ _jsx(ThemeProvider, {
109
+ theme: themes.orange,
110
+ children: /*#__PURE__*/ _jsx(Header, {
111
+ isLoading: true,
112
+ title: 'Выплаты',
113
+ userName: '',
114
+ selectorData: {
115
+ items: [],
116
+ currentItem: ''
117
+ },
118
+ // @ts-ignore
119
+ link: NavLink,
120
+ navItems: navItems
121
+ })
110
122
  })
111
123
  })).toJSON();
112
124
  expect(header).toMatchSnapshot();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@qiwi/pijma-desktop-extra",
3
- "version": "0.1.2",
3
+ "version": "0.1.3",
4
4
  "type": "module",
5
5
  "main": "./lib/es5/index.js",
6
6
  "module": "./lib/es6/index.js",
@@ -26,7 +26,7 @@
26
26
  "build:es5": "swc src -d lib/es5 --config-file swc.es5.json && tsc-esm-fix --target=lib/es5 --fillBlank",
27
27
  "build:es6": "swc src -d lib/es6 --config-file swc.es6.json && tsc-esm-fix --target=lib/es6 --fillBlank",
28
28
  "build:dts": "tsc --project tsconfig.dts.json",
29
- "test:start": "jest",
29
+ "test": "jest",
30
30
  "lint": "eslint --fix src && prettier --loglevel silent --write src"
31
31
  },
32
32
  "files": [