@megafon/ui-core 7.4.0 → 7.5.0
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.
- package/dist/es/components/Calendar/Calendar.js +6 -26
- package/dist/es/components/Calendar/components/_Month/Month.d.ts +4 -4
- package/dist/es/components/Calendar/components/_Month/Month.js +33 -4
- package/dist/es/components/TextField/TextField.js +26 -3
- package/dist/es/components/UploadForm/UploadFileItem/UploadFileItem.js +2 -1
- package/dist/lib/components/Calendar/Calendar.js +5 -25
- package/dist/lib/components/Calendar/components/_Month/Month.d.ts +4 -4
- package/dist/lib/components/Calendar/components/_Month/Month.js +33 -4
- package/dist/lib/components/TextField/TextField.js +26 -3
- package/dist/lib/components/UploadForm/UploadFileItem/UploadFileItem.js +2 -1
- package/package.json +3 -3
|
@@ -19,7 +19,7 @@ var __rest = this && this.__rest || function (s, e) {
|
|
|
19
19
|
return t;
|
|
20
20
|
};
|
|
21
21
|
import * as React from 'react';
|
|
22
|
-
import { START_DATE, END_DATE, useDatepicker
|
|
22
|
+
import { START_DATE, END_DATE, useDatepicker } from '@datepicker-react/hooks';
|
|
23
23
|
import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
|
|
24
24
|
import { addMonths, subMonths } from 'date-fns';
|
|
25
25
|
import differenceInDays from 'date-fns/differenceInDays';
|
|
@@ -47,15 +47,6 @@ export var CalendarDirectionTypes = {
|
|
|
47
47
|
FUTURE: 'future',
|
|
48
48
|
BOTH: 'both'
|
|
49
49
|
};
|
|
50
|
-
var weekdayLabelFormat = function weekdayLabelFormat(date) {
|
|
51
|
-
return formatDate(date, 'EEEEEE');
|
|
52
|
-
};
|
|
53
|
-
var dayLabelFormat = function dayLabelFormat(date) {
|
|
54
|
-
return formatDate(date, 'd');
|
|
55
|
-
};
|
|
56
|
-
var monthLabelFormat = function monthLabelFormat(date) {
|
|
57
|
-
return formatDate(date, 'LLLL');
|
|
58
|
-
};
|
|
59
50
|
var generateMonthsData = function generateMonthsData(pastMonthsCount, futureMonthsCount, direction) {
|
|
60
51
|
var months = [];
|
|
61
52
|
var currentDate = new Date();
|
|
@@ -303,18 +294,6 @@ var Calendar = function Calendar(_ref) {
|
|
|
303
294
|
return monthsArray.map(function (_ref2) {
|
|
304
295
|
var month = _ref2.month,
|
|
305
296
|
year = _ref2.year;
|
|
306
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
307
|
-
var _useMonth = useMonth({
|
|
308
|
-
year: year,
|
|
309
|
-
month: month,
|
|
310
|
-
firstDayOfWeek: firstDayOfWeek,
|
|
311
|
-
dayLabelFormat: dayLabelFormat,
|
|
312
|
-
weekdayLabelFormat: weekdayLabelFormat,
|
|
313
|
-
monthLabelFormat: monthLabelFormat
|
|
314
|
-
}),
|
|
315
|
-
days = _useMonth.days,
|
|
316
|
-
weekdayLabels = _useMonth.weekdayLabels,
|
|
317
|
-
monthLabel = _useMonth.monthLabel;
|
|
318
297
|
var isPrevMonthDisabled = !!minBookingDate && isSameMonth(new Date(year, month, 1), minBookingDate);
|
|
319
298
|
var isNextMonthDisabled = !!maxBookingDate && isSameMonth(new Date(year, month, 1), maxBookingDate);
|
|
320
299
|
var isCurrentMonth = new Date().getFullYear() === year && new Date().getMonth() === month;
|
|
@@ -328,14 +307,15 @@ var Calendar = function Calendar(_ref) {
|
|
|
328
307
|
arrowRight: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowRight
|
|
329
308
|
},
|
|
330
309
|
year: year,
|
|
331
|
-
|
|
332
|
-
|
|
310
|
+
month: month,
|
|
311
|
+
firstDayOfWeek: firstDayOfWeek,
|
|
333
312
|
isPrevMonthDisabled: isModernType || isPrevMonthDisabled,
|
|
334
313
|
isNextMonthDisabled: isModernType || isNextMonthDisabled,
|
|
335
314
|
goToPreviousMonth: goToPreviousMonths,
|
|
336
315
|
goToNextMonth: goToNextMonths,
|
|
337
|
-
isModern: isModernType
|
|
338
|
-
|
|
316
|
+
isModern: isModernType,
|
|
317
|
+
renderDays: renderDays
|
|
318
|
+
}));
|
|
339
319
|
});
|
|
340
320
|
};
|
|
341
321
|
return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { FirstDayOfWeek, MonthType } from '@datepicker-react/hooks';
|
|
2
|
+
import { FirstDayOfWeek, MonthType, UseMonthResult } from '@datepicker-react/hooks';
|
|
3
3
|
import './Month.scss';
|
|
4
4
|
export interface IMonthPickerProps {
|
|
5
5
|
firstDayOfWeek: FirstDayOfWeek;
|
|
@@ -16,12 +16,12 @@ export interface IMonthProps {
|
|
|
16
16
|
isPrevMonthDisabled: boolean;
|
|
17
17
|
isNextMonthDisabled: boolean;
|
|
18
18
|
year: number;
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
month: number;
|
|
20
|
+
firstDayOfWeek?: FirstDayOfWeek;
|
|
21
21
|
goToPreviousMonth: () => void;
|
|
22
22
|
goToNextMonth: () => void;
|
|
23
23
|
isModern?: boolean;
|
|
24
|
-
|
|
24
|
+
renderDays: (days: UseMonthResult['days']) => React.ReactNode;
|
|
25
25
|
}
|
|
26
26
|
declare const Month: React.FC<IMonthProps>;
|
|
27
27
|
export default Month;
|
|
@@ -2,7 +2,10 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
2
2
|
import "core-js/modules/es.array.concat.js";
|
|
3
3
|
import "core-js/modules/es.array.map.js";
|
|
4
4
|
import * as React from 'react';
|
|
5
|
+
import { useMonth } from '@datepicker-react/hooks';
|
|
5
6
|
import { checkEventIsClickOrEnterPress, cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
|
|
7
|
+
import format from 'date-fns/format';
|
|
8
|
+
import ruLocale from 'date-fns/locale/ru';
|
|
6
9
|
import "./Month.css";
|
|
7
10
|
var ArrowLeft = function ArrowLeft(props) {
|
|
8
11
|
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
@@ -22,19 +25,45 @@ var ArrowRight = function ArrowRight(props) {
|
|
|
22
25
|
clipRule: "evenodd"
|
|
23
26
|
}));
|
|
24
27
|
};
|
|
28
|
+
var formatDate = function formatDate(date, pattern) {
|
|
29
|
+
var locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ruLocale;
|
|
30
|
+
return format(date, pattern, {
|
|
31
|
+
locale: locale
|
|
32
|
+
});
|
|
33
|
+
};
|
|
34
|
+
var weekdayLabelFormat = function weekdayLabelFormat(date) {
|
|
35
|
+
return formatDate(date, 'EEEEEE');
|
|
36
|
+
};
|
|
37
|
+
var dayLabelFormat = function dayLabelFormat(date) {
|
|
38
|
+
return formatDate(date, 'd');
|
|
39
|
+
};
|
|
40
|
+
var monthLabelFormat = function monthLabelFormat(date) {
|
|
41
|
+
return formatDate(date, 'LLLL');
|
|
42
|
+
};
|
|
25
43
|
var cn = cnCreate('mfui-month');
|
|
26
44
|
var Month = function Month(_ref) {
|
|
27
45
|
var dataAttrs = _ref.dataAttrs,
|
|
28
46
|
isPrevMonthDisabled = _ref.isPrevMonthDisabled,
|
|
29
47
|
isNextMonthDisabled = _ref.isNextMonthDisabled,
|
|
30
48
|
year = _ref.year,
|
|
31
|
-
|
|
32
|
-
|
|
49
|
+
month = _ref.month,
|
|
50
|
+
firstDayOfWeek = _ref.firstDayOfWeek,
|
|
33
51
|
goToPreviousMonth = _ref.goToPreviousMonth,
|
|
34
52
|
goToNextMonth = _ref.goToNextMonth,
|
|
35
53
|
_ref$isModern = _ref.isModern,
|
|
36
54
|
isModern = _ref$isModern === void 0 ? false : _ref$isModern,
|
|
37
|
-
|
|
55
|
+
renderDays = _ref.renderDays;
|
|
56
|
+
var _useMonth = useMonth({
|
|
57
|
+
year: year,
|
|
58
|
+
month: month,
|
|
59
|
+
firstDayOfWeek: firstDayOfWeek,
|
|
60
|
+
dayLabelFormat: dayLabelFormat,
|
|
61
|
+
weekdayLabelFormat: weekdayLabelFormat,
|
|
62
|
+
monthLabelFormat: monthLabelFormat
|
|
63
|
+
}),
|
|
64
|
+
days = _useMonth.days,
|
|
65
|
+
weekdayLabels = _useMonth.weekdayLabels,
|
|
66
|
+
monthLabel = _useMonth.monthLabel;
|
|
38
67
|
var handleArrowLeftClick = function handleArrowLeftClick(e) {
|
|
39
68
|
if (checkEventIsClickOrEnterPress(e)) {
|
|
40
69
|
!isPrevMonthDisabled && goToPreviousMonth();
|
|
@@ -83,6 +112,6 @@ var Month = function Month(_ref) {
|
|
|
83
112
|
}, dayLabel);
|
|
84
113
|
})), /*#__PURE__*/React.createElement("div", {
|
|
85
114
|
className: cn('days')
|
|
86
|
-
},
|
|
115
|
+
}, renderDays(days)));
|
|
87
116
|
};
|
|
88
117
|
export default Month;
|
|
@@ -6,6 +6,7 @@ import "core-js/modules/es.object.get-own-property-descriptor.js";
|
|
|
6
6
|
import "core-js/modules/es.parse-float.js";
|
|
7
7
|
import "core-js/modules/es.regexp.exec.js";
|
|
8
8
|
import "core-js/modules/es.string.replace.js";
|
|
9
|
+
import "core-js/modules/web.timers.js";
|
|
9
10
|
/* eslint-disable react/no-multi-comp */
|
|
10
11
|
import * as React from 'react';
|
|
11
12
|
import { useCallback, useEffect, useState, useRef, useMemo } from 'react';
|
|
@@ -54,6 +55,9 @@ var ResizeIcon = function ResizeIcon(props) {
|
|
|
54
55
|
d: "M1 11L11 1M7 11l4-4"
|
|
55
56
|
}));
|
|
56
57
|
};
|
|
58
|
+
var isElement = function isElement(target) {
|
|
59
|
+
return target instanceof HTMLElement || target instanceof SVGElement || target instanceof SVGPathElement;
|
|
60
|
+
};
|
|
57
61
|
var TEXTAREA_MAX_HEIGHT = 144;
|
|
58
62
|
var DEFAULT_LABEL_TOP_POSITION = 16;
|
|
59
63
|
var DEFAULT_ROW_COUNT = 3;
|
|
@@ -154,6 +158,10 @@ var TextField = function TextField(_ref) {
|
|
|
154
158
|
_useState14 = _slicedToArray(_useState13, 2),
|
|
155
159
|
isTextareaResized = _useState14[0],
|
|
156
160
|
setIsTextareaResized = _useState14[1];
|
|
161
|
+
var _useState15 = useState(null),
|
|
162
|
+
_useState16 = _slicedToArray(_useState15, 2),
|
|
163
|
+
clickedElement = _useState16[0],
|
|
164
|
+
setClickedElement = _useState16[1];
|
|
157
165
|
var fieldNode = useRef();
|
|
158
166
|
var labelRef = useRef(null);
|
|
159
167
|
var resizerRef = useRef(null);
|
|
@@ -244,6 +252,13 @@ var TextField = function TextField(_ref) {
|
|
|
244
252
|
checkSymbolMaxLimit(e.target.value);
|
|
245
253
|
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
|
246
254
|
};
|
|
255
|
+
var handleMouseDown = function handleMouseDown(e) {
|
|
256
|
+
if (isElement(e.target)) {
|
|
257
|
+
setClickedElement(e.target);
|
|
258
|
+
return;
|
|
259
|
+
}
|
|
260
|
+
setClickedElement(null);
|
|
261
|
+
};
|
|
247
262
|
var handleNoticeTransitionEnd = useCallback(function () {
|
|
248
263
|
!noticeText && setCurrentNoticeText(noticeText);
|
|
249
264
|
}, [noticeText]);
|
|
@@ -272,7 +287,9 @@ var TextField = function TextField(_ref) {
|
|
|
272
287
|
});
|
|
273
288
|
(_a = nativeInputValue === null || nativeInputValue === void 0 ? void 0 : nativeInputValue.set) === null || _a === void 0 ? void 0 : _a.call(field, '');
|
|
274
289
|
field === null || field === void 0 ? void 0 : field.dispatchEvent(inputEvent);
|
|
275
|
-
|
|
290
|
+
setTimeout(function () {
|
|
291
|
+
return field === null || field === void 0 ? void 0 : field.focus();
|
|
292
|
+
});
|
|
276
293
|
}
|
|
277
294
|
onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick(e);
|
|
278
295
|
}, [isPasswordType, togglePasswordHiding, onIconClick, customIcon, hasClearIcon]);
|
|
@@ -280,8 +297,13 @@ var TextField = function TextField(_ref) {
|
|
|
280
297
|
onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
|
|
281
298
|
}, [onFocus]);
|
|
282
299
|
var handleBlur = useCallback(function (e) {
|
|
300
|
+
var _a;
|
|
301
|
+
setClickedElement(null);
|
|
302
|
+
if ((_a = clickedElement === null || clickedElement === void 0 ? void 0 : clickedElement.closest('div')) === null || _a === void 0 ? void 0 : _a.classList.contains(cn('icon-box'))) {
|
|
303
|
+
return;
|
|
304
|
+
}
|
|
283
305
|
onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
|
|
284
|
-
}, [onBlur]);
|
|
306
|
+
}, [onBlur, clickedElement]);
|
|
285
307
|
var handleBeforeMaskChange = useCallback(function (_ref2) {
|
|
286
308
|
var previousState = _ref2.previousState,
|
|
287
309
|
nextState = _ref2.nextState;
|
|
@@ -416,7 +438,8 @@ var TextField = function TextField(_ref) {
|
|
|
416
438
|
}), /*#__PURE__*/React.createElement("div", {
|
|
417
439
|
className: cn('field-wrapper', {
|
|
418
440
|
textarea: textarea && textareaType
|
|
419
|
-
})
|
|
441
|
+
}),
|
|
442
|
+
onMouseDown: handleMouseDown
|
|
420
443
|
}, renderField(), textareaType === TextareaTypes.FLEXIBLE && !hideResizeButton && /*#__PURE__*/React.createElement("div", _extends({
|
|
421
444
|
className: cn('resizer'),
|
|
422
445
|
ref: resizerRef
|
|
@@ -55,7 +55,8 @@ var UploadFileItem = function UploadFileItem(_ref) {
|
|
|
55
55
|
className: cn('error-tooltip'),
|
|
56
56
|
triggerElement: tooltipTriggerElement,
|
|
57
57
|
colorTheme: "blue",
|
|
58
|
-
placement: "bottom"
|
|
58
|
+
placement: "bottom",
|
|
59
|
+
offset: "small"
|
|
59
60
|
}, errorText));
|
|
60
61
|
}
|
|
61
62
|
return /*#__PURE__*/React.createElement("span", {
|
|
@@ -56,15 +56,6 @@ var CalendarDirectionTypes = exports.CalendarDirectionTypes = {
|
|
|
56
56
|
FUTURE: 'future',
|
|
57
57
|
BOTH: 'both'
|
|
58
58
|
};
|
|
59
|
-
var weekdayLabelFormat = function weekdayLabelFormat(date) {
|
|
60
|
-
return formatDate(date, 'EEEEEE');
|
|
61
|
-
};
|
|
62
|
-
var dayLabelFormat = function dayLabelFormat(date) {
|
|
63
|
-
return formatDate(date, 'd');
|
|
64
|
-
};
|
|
65
|
-
var monthLabelFormat = function monthLabelFormat(date) {
|
|
66
|
-
return formatDate(date, 'LLLL');
|
|
67
|
-
};
|
|
68
59
|
var generateMonthsData = function generateMonthsData(pastMonthsCount, futureMonthsCount, direction) {
|
|
69
60
|
var months = [];
|
|
70
61
|
var currentDate = new Date();
|
|
@@ -312,18 +303,6 @@ var Calendar = function Calendar(_ref) {
|
|
|
312
303
|
return monthsArray.map(function (_ref2) {
|
|
313
304
|
var month = _ref2.month,
|
|
314
305
|
year = _ref2.year;
|
|
315
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
316
|
-
var _useMonth = (0, _hooks.useMonth)({
|
|
317
|
-
year: year,
|
|
318
|
-
month: month,
|
|
319
|
-
firstDayOfWeek: firstDayOfWeek,
|
|
320
|
-
dayLabelFormat: dayLabelFormat,
|
|
321
|
-
weekdayLabelFormat: weekdayLabelFormat,
|
|
322
|
-
monthLabelFormat: monthLabelFormat
|
|
323
|
-
}),
|
|
324
|
-
days = _useMonth.days,
|
|
325
|
-
weekdayLabels = _useMonth.weekdayLabels,
|
|
326
|
-
monthLabel = _useMonth.monthLabel;
|
|
327
306
|
var isPrevMonthDisabled = !!minBookingDate && (0, _isSameMonth["default"])(new Date(year, month, 1), minBookingDate);
|
|
328
307
|
var isNextMonthDisabled = !!maxBookingDate && (0, _isSameMonth["default"])(new Date(year, month, 1), maxBookingDate);
|
|
329
308
|
var isCurrentMonth = new Date().getFullYear() === year && new Date().getMonth() === month;
|
|
@@ -337,14 +316,15 @@ var Calendar = function Calendar(_ref) {
|
|
|
337
316
|
arrowRight: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowRight
|
|
338
317
|
},
|
|
339
318
|
year: year,
|
|
340
|
-
|
|
341
|
-
|
|
319
|
+
month: month,
|
|
320
|
+
firstDayOfWeek: firstDayOfWeek,
|
|
342
321
|
isPrevMonthDisabled: isModernType || isPrevMonthDisabled,
|
|
343
322
|
isNextMonthDisabled: isModernType || isNextMonthDisabled,
|
|
344
323
|
goToPreviousMonth: goToPreviousMonths,
|
|
345
324
|
goToNextMonth: goToNextMonths,
|
|
346
|
-
isModern: isModernType
|
|
347
|
-
|
|
325
|
+
isModern: isModernType,
|
|
326
|
+
renderDays: renderDays
|
|
327
|
+
}));
|
|
348
328
|
});
|
|
349
329
|
};
|
|
350
330
|
return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { FirstDayOfWeek, MonthType } from '@datepicker-react/hooks';
|
|
2
|
+
import { FirstDayOfWeek, MonthType, UseMonthResult } from '@datepicker-react/hooks';
|
|
3
3
|
import './Month.scss';
|
|
4
4
|
export interface IMonthPickerProps {
|
|
5
5
|
firstDayOfWeek: FirstDayOfWeek;
|
|
@@ -16,12 +16,12 @@ export interface IMonthProps {
|
|
|
16
16
|
isPrevMonthDisabled: boolean;
|
|
17
17
|
isNextMonthDisabled: boolean;
|
|
18
18
|
year: number;
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
month: number;
|
|
20
|
+
firstDayOfWeek?: FirstDayOfWeek;
|
|
21
21
|
goToPreviousMonth: () => void;
|
|
22
22
|
goToNextMonth: () => void;
|
|
23
23
|
isModern?: boolean;
|
|
24
|
-
|
|
24
|
+
renderDays: (days: UseMonthResult['days']) => React.ReactNode;
|
|
25
25
|
}
|
|
26
26
|
declare const Month: React.FC<IMonthProps>;
|
|
27
27
|
export default Month;
|
|
@@ -9,7 +9,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
9
9
|
require("core-js/modules/es.array.concat.js");
|
|
10
10
|
require("core-js/modules/es.array.map.js");
|
|
11
11
|
var React = _interopRequireWildcard(require("react"));
|
|
12
|
+
var _hooks = require("@datepicker-react/hooks");
|
|
12
13
|
var _uiHelpers = require("@megafon/ui-helpers");
|
|
14
|
+
var _format = _interopRequireDefault(require("date-fns/format"));
|
|
15
|
+
var _ru = _interopRequireDefault(require("date-fns/locale/ru"));
|
|
13
16
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
14
17
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
15
18
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
@@ -31,19 +34,45 @@ var ArrowRight = function ArrowRight(props) {
|
|
|
31
34
|
clipRule: "evenodd"
|
|
32
35
|
}));
|
|
33
36
|
};
|
|
37
|
+
var formatDate = function formatDate(date, pattern) {
|
|
38
|
+
var locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _ru["default"];
|
|
39
|
+
return (0, _format["default"])(date, pattern, {
|
|
40
|
+
locale: locale
|
|
41
|
+
});
|
|
42
|
+
};
|
|
43
|
+
var weekdayLabelFormat = function weekdayLabelFormat(date) {
|
|
44
|
+
return formatDate(date, 'EEEEEE');
|
|
45
|
+
};
|
|
46
|
+
var dayLabelFormat = function dayLabelFormat(date) {
|
|
47
|
+
return formatDate(date, 'd');
|
|
48
|
+
};
|
|
49
|
+
var monthLabelFormat = function monthLabelFormat(date) {
|
|
50
|
+
return formatDate(date, 'LLLL');
|
|
51
|
+
};
|
|
34
52
|
var cn = (0, _uiHelpers.cnCreate)('mfui-month');
|
|
35
53
|
var Month = function Month(_ref) {
|
|
36
54
|
var dataAttrs = _ref.dataAttrs,
|
|
37
55
|
isPrevMonthDisabled = _ref.isPrevMonthDisabled,
|
|
38
56
|
isNextMonthDisabled = _ref.isNextMonthDisabled,
|
|
39
57
|
year = _ref.year,
|
|
40
|
-
|
|
41
|
-
|
|
58
|
+
month = _ref.month,
|
|
59
|
+
firstDayOfWeek = _ref.firstDayOfWeek,
|
|
42
60
|
goToPreviousMonth = _ref.goToPreviousMonth,
|
|
43
61
|
goToNextMonth = _ref.goToNextMonth,
|
|
44
62
|
_ref$isModern = _ref.isModern,
|
|
45
63
|
isModern = _ref$isModern === void 0 ? false : _ref$isModern,
|
|
46
|
-
|
|
64
|
+
renderDays = _ref.renderDays;
|
|
65
|
+
var _useMonth = (0, _hooks.useMonth)({
|
|
66
|
+
year: year,
|
|
67
|
+
month: month,
|
|
68
|
+
firstDayOfWeek: firstDayOfWeek,
|
|
69
|
+
dayLabelFormat: dayLabelFormat,
|
|
70
|
+
weekdayLabelFormat: weekdayLabelFormat,
|
|
71
|
+
monthLabelFormat: monthLabelFormat
|
|
72
|
+
}),
|
|
73
|
+
days = _useMonth.days,
|
|
74
|
+
weekdayLabels = _useMonth.weekdayLabels,
|
|
75
|
+
monthLabel = _useMonth.monthLabel;
|
|
47
76
|
var handleArrowLeftClick = function handleArrowLeftClick(e) {
|
|
48
77
|
if ((0, _uiHelpers.checkEventIsClickOrEnterPress)(e)) {
|
|
49
78
|
!isPrevMonthDisabled && goToPreviousMonth();
|
|
@@ -92,6 +121,6 @@ var Month = function Month(_ref) {
|
|
|
92
121
|
}, dayLabel);
|
|
93
122
|
})), /*#__PURE__*/React.createElement("div", {
|
|
94
123
|
className: cn('days')
|
|
95
|
-
},
|
|
124
|
+
}, renderDays(days)));
|
|
96
125
|
};
|
|
97
126
|
var _default = exports["default"] = Month;
|
|
@@ -13,6 +13,7 @@ require("core-js/modules/es.object.get-own-property-descriptor.js");
|
|
|
13
13
|
require("core-js/modules/es.parse-float.js");
|
|
14
14
|
require("core-js/modules/es.regexp.exec.js");
|
|
15
15
|
require("core-js/modules/es.string.replace.js");
|
|
16
|
+
require("core-js/modules/web.timers.js");
|
|
16
17
|
var _react = _interopRequireWildcard(require("react"));
|
|
17
18
|
var React = _react;
|
|
18
19
|
var _uiHelpers = require("@megafon/ui-helpers");
|
|
@@ -64,6 +65,9 @@ var ResizeIcon = function ResizeIcon(props) {
|
|
|
64
65
|
d: "M1 11L11 1M7 11l4-4"
|
|
65
66
|
}));
|
|
66
67
|
};
|
|
68
|
+
var isElement = function isElement(target) {
|
|
69
|
+
return target instanceof HTMLElement || target instanceof SVGElement || target instanceof SVGPathElement;
|
|
70
|
+
};
|
|
67
71
|
var TEXTAREA_MAX_HEIGHT = 144;
|
|
68
72
|
var DEFAULT_LABEL_TOP_POSITION = 16;
|
|
69
73
|
var DEFAULT_ROW_COUNT = 3;
|
|
@@ -164,6 +168,10 @@ var TextField = function TextField(_ref) {
|
|
|
164
168
|
_useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
|
|
165
169
|
isTextareaResized = _useState14[0],
|
|
166
170
|
setIsTextareaResized = _useState14[1];
|
|
171
|
+
var _useState15 = (0, _react.useState)(null),
|
|
172
|
+
_useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
|
|
173
|
+
clickedElement = _useState16[0],
|
|
174
|
+
setClickedElement = _useState16[1];
|
|
167
175
|
var fieldNode = (0, _react.useRef)();
|
|
168
176
|
var labelRef = (0, _react.useRef)(null);
|
|
169
177
|
var resizerRef = (0, _react.useRef)(null);
|
|
@@ -254,6 +262,13 @@ var TextField = function TextField(_ref) {
|
|
|
254
262
|
checkSymbolMaxLimit(e.target.value);
|
|
255
263
|
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
|
256
264
|
};
|
|
265
|
+
var handleMouseDown = function handleMouseDown(e) {
|
|
266
|
+
if (isElement(e.target)) {
|
|
267
|
+
setClickedElement(e.target);
|
|
268
|
+
return;
|
|
269
|
+
}
|
|
270
|
+
setClickedElement(null);
|
|
271
|
+
};
|
|
257
272
|
var handleNoticeTransitionEnd = (0, _react.useCallback)(function () {
|
|
258
273
|
!noticeText && setCurrentNoticeText(noticeText);
|
|
259
274
|
}, [noticeText]);
|
|
@@ -282,7 +297,9 @@ var TextField = function TextField(_ref) {
|
|
|
282
297
|
});
|
|
283
298
|
(_a = nativeInputValue === null || nativeInputValue === void 0 ? void 0 : nativeInputValue.set) === null || _a === void 0 ? void 0 : _a.call(field, '');
|
|
284
299
|
field === null || field === void 0 ? void 0 : field.dispatchEvent(inputEvent);
|
|
285
|
-
|
|
300
|
+
setTimeout(function () {
|
|
301
|
+
return field === null || field === void 0 ? void 0 : field.focus();
|
|
302
|
+
});
|
|
286
303
|
}
|
|
287
304
|
onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick(e);
|
|
288
305
|
}, [isPasswordType, togglePasswordHiding, onIconClick, customIcon, hasClearIcon]);
|
|
@@ -290,8 +307,13 @@ var TextField = function TextField(_ref) {
|
|
|
290
307
|
onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
|
|
291
308
|
}, [onFocus]);
|
|
292
309
|
var handleBlur = (0, _react.useCallback)(function (e) {
|
|
310
|
+
var _a;
|
|
311
|
+
setClickedElement(null);
|
|
312
|
+
if ((_a = clickedElement === null || clickedElement === void 0 ? void 0 : clickedElement.closest('div')) === null || _a === void 0 ? void 0 : _a.classList.contains(cn('icon-box'))) {
|
|
313
|
+
return;
|
|
314
|
+
}
|
|
293
315
|
onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
|
|
294
|
-
}, [onBlur]);
|
|
316
|
+
}, [onBlur, clickedElement]);
|
|
295
317
|
var handleBeforeMaskChange = (0, _react.useCallback)(function (_ref2) {
|
|
296
318
|
var previousState = _ref2.previousState,
|
|
297
319
|
nextState = _ref2.nextState;
|
|
@@ -426,7 +448,8 @@ var TextField = function TextField(_ref) {
|
|
|
426
448
|
}), /*#__PURE__*/React.createElement("div", {
|
|
427
449
|
className: cn('field-wrapper', {
|
|
428
450
|
textarea: textarea && textareaType
|
|
429
|
-
})
|
|
451
|
+
}),
|
|
452
|
+
onMouseDown: handleMouseDown
|
|
430
453
|
}, renderField(), textareaType === TextareaTypes.FLEXIBLE && !hideResizeButton && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
|
|
431
454
|
className: cn('resizer'),
|
|
432
455
|
ref: resizerRef
|
|
@@ -64,7 +64,8 @@ var UploadFileItem = function UploadFileItem(_ref) {
|
|
|
64
64
|
className: cn('error-tooltip'),
|
|
65
65
|
triggerElement: tooltipTriggerElement,
|
|
66
66
|
colorTheme: "blue",
|
|
67
|
-
placement: "bottom"
|
|
67
|
+
placement: "bottom",
|
|
68
|
+
offset: "small"
|
|
68
69
|
}, errorText));
|
|
69
70
|
}
|
|
70
71
|
return /*#__PURE__*/React.createElement("span", {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@megafon/ui-core",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.5.0",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist",
|
|
6
6
|
"styles"
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"@babel/preset-env": "^7.8.6",
|
|
51
51
|
"@babel/preset-react": "^7.8.3",
|
|
52
52
|
"@babel/preset-typescript": "^7.8.3",
|
|
53
|
-
"@megafon/ui-icons": "^3.
|
|
53
|
+
"@megafon/ui-icons": "^3.4.0",
|
|
54
54
|
"@svgr/core": "^2.4.1",
|
|
55
55
|
"@testing-library/jest-dom": "^6.5.0",
|
|
56
56
|
"@testing-library/react": "^16.0.1",
|
|
@@ -104,5 +104,5 @@
|
|
|
104
104
|
"simplebar-react": "^3.2.5",
|
|
105
105
|
"swiper": "^11.1.1"
|
|
106
106
|
},
|
|
107
|
-
"gitHead": "
|
|
107
|
+
"gitHead": "2254ae9321758f64bbf0756457946865b494cedb"
|
|
108
108
|
}
|