@megafon/ui-core 8.12.0 → 8.13.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/Accordion/Accordion.d.ts +3 -1
- package/dist/es/components/Accordion/Accordion.js +2 -0
- package/dist/es/components/Badges/PriceBadge/PriceBadge.d.ts +1 -0
- package/dist/es/components/Badges/PriceBadge/PriceBadge.js +28 -1
- package/dist/es/components/Modal/Modal.css +1 -1
- package/dist/es/components/Modal/_ModalContent/ModalContent.js +1 -4
- package/dist/es/components/Modal/_ModalMobileBottom/ModalMobileBottom.js +3 -18
- package/dist/es/components/Pagination/Pagination.css +1 -1
- package/dist/es/components/UploadForm/UploadField/UploadField.d.ts +1 -1
- package/dist/es/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.css +1 -1
- package/dist/es/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.d.ts +1 -1
- package/dist/es/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.js +21 -3
- package/dist/es/components/UploadForm/UploadFileItem/UploadFileItem.css +1 -1
- package/dist/es/components/UploadForm/UploadFileItem/UploadFileItem.d.ts +3 -1
- package/dist/es/components/UploadForm/UploadFileItem/UploadFileItem.js +6 -2
- package/dist/lib/components/Accordion/Accordion.d.ts +3 -1
- package/dist/lib/components/Accordion/Accordion.js +2 -0
- package/dist/lib/components/Badges/PriceBadge/PriceBadge.d.ts +1 -0
- package/dist/lib/components/Badges/PriceBadge/PriceBadge.js +28 -1
- package/dist/lib/components/Modal/Modal.css +1 -1
- package/dist/lib/components/Modal/_ModalContent/ModalContent.js +1 -4
- package/dist/lib/components/Modal/_ModalMobileBottom/ModalMobileBottom.js +3 -18
- package/dist/lib/components/Pagination/Pagination.css +1 -1
- package/dist/lib/components/UploadForm/UploadField/UploadField.d.ts +1 -1
- package/dist/lib/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.css +1 -1
- package/dist/lib/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.d.ts +1 -1
- package/dist/lib/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.js +21 -3
- package/dist/lib/components/UploadForm/UploadFileItem/UploadFileItem.css +1 -1
- package/dist/lib/components/UploadForm/UploadFileItem/UploadFileItem.d.ts +3 -1
- package/dist/lib/components/UploadForm/UploadFileItem/UploadFileItem.js +6 -2
- package/package.json +3 -3
|
@@ -6,8 +6,10 @@ export interface IAccordionProps {
|
|
|
6
6
|
rootRef?: React.Ref<HTMLDivElement>;
|
|
7
7
|
/** Заголовок */
|
|
8
8
|
title: string | React.ReactNode | React.ReactNode[];
|
|
9
|
-
/**
|
|
9
|
+
/** Тег заголовка (определяет базовый тег и стили) */
|
|
10
10
|
titleTag?: IHeaderProps['as'];
|
|
11
|
+
/** Тег заголовка для семантической разметки (переопределение тега без изменения стилей) */
|
|
12
|
+
titleTagName?: IHeaderProps['tag'];
|
|
11
13
|
/** Состояние открытости */
|
|
12
14
|
isOpened?: boolean;
|
|
13
15
|
/** Включить микроразметку */
|
|
@@ -20,6 +20,7 @@ var Accordion = function Accordion(_ref) {
|
|
|
20
20
|
title = _ref.title,
|
|
21
21
|
_ref$titleTag = _ref.titleTag,
|
|
22
22
|
titleTag = _ref$titleTag === void 0 ? 'h5' : _ref$titleTag,
|
|
23
|
+
titleTagName = _ref.titleTagName,
|
|
23
24
|
_ref$isOpened = _ref.isOpened,
|
|
24
25
|
isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
|
|
25
26
|
_ref$hasMicrodata = _ref.hasMicrodata,
|
|
@@ -81,6 +82,7 @@ var Accordion = function Accordion(_ref) {
|
|
|
81
82
|
itemProp: 'name'
|
|
82
83
|
}), /*#__PURE__*/React.createElement(Header, {
|
|
83
84
|
as: titleTag,
|
|
85
|
+
tag: titleTagName,
|
|
84
86
|
dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header,
|
|
85
87
|
className: titlePropsClasses
|
|
86
88
|
}, title), /*#__PURE__*/React.createElement("div", {
|
|
@@ -23,6 +23,17 @@ var AttentionIcon = function AttentionIcon(props) {
|
|
|
23
23
|
d: "M10 2c4.4 0 8 3.6 8 8s-3.6 8-8 8-8-3.6-8-8 3.6-8 8-8zm0 13c.3 0 .5-.1.7-.3.2-.2.3-.4.3-.7s-.1-.5-.3-.7c-.2-.2-.5-.3-.7-.3s-.5.1-.7.3c-.2.2-.3.4-.3.7s.1.5.3.7.5.3.7.3zM9 5v6h2V5H9z"
|
|
24
24
|
}));
|
|
25
25
|
};
|
|
26
|
+
var BanIcon = function BanIcon(props) {
|
|
27
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
28
|
+
viewBox: "0 0 20 20"
|
|
29
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
|
30
|
+
d: "M12.172 13.056a3.75 3.75 0 01-5.229-5.228l5.229 5.228zM10 6.25a3.75 3.75 0 013.056 5.922L7.827 6.943A3.733 3.733 0 0110 6.25z"
|
|
31
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
32
|
+
fillRule: "evenodd",
|
|
33
|
+
clipRule: "evenodd",
|
|
34
|
+
d: "M10 2a8 8 0 110 16 8 8 0 010-16zm0 3a5 5 0 100 10 5 5 0 000-10z"
|
|
35
|
+
}));
|
|
36
|
+
};
|
|
26
37
|
var CheckIcon = function CheckIcon(props) {
|
|
27
38
|
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
28
39
|
viewBox: "0 0 20 20"
|
|
@@ -64,6 +75,17 @@ var AttentionIconBig = function AttentionIconBig(props) {
|
|
|
64
75
|
d: "M16 4C9.4 4 4 9.4 4 16s5.4 12 12 12 12-5.4 12-12S22.6 4 16 4zm1 18h-2v-2h2v2zm0-4h-2v-8h2v8z"
|
|
65
76
|
}));
|
|
66
77
|
};
|
|
78
|
+
var BanIconBig = function BanIconBig(props) {
|
|
79
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
80
|
+
viewBox: "0 0 32 32"
|
|
81
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
|
82
|
+
d: "M19.475 20.89a6 6 0 01-8.365-8.365l8.365 8.365zM16 10a6 6 0 014.89 9.475l-8.366-8.366A5.972 5.972 0 0116 10z"
|
|
83
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
84
|
+
fillRule: "evenodd",
|
|
85
|
+
clipRule: "evenodd",
|
|
86
|
+
d: "M16 4c6.627 0 12 5.373 12 12s-5.373 12-12 12S4 22.627 4 16 9.373 4 16 4zm0 4a8 8 0 100 16 8 8 0 000-16z"
|
|
87
|
+
}));
|
|
88
|
+
};
|
|
67
89
|
var CheckIconBig = function CheckIconBig(props) {
|
|
68
90
|
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
69
91
|
viewBox: "0 0 32 32"
|
|
@@ -113,7 +135,8 @@ export var PriceBadgeIcon = {
|
|
|
113
135
|
CHECK: 'check',
|
|
114
136
|
ATTENTION: 'attention',
|
|
115
137
|
INFO: 'info',
|
|
116
|
-
PROFILE: 'profile'
|
|
138
|
+
PROFILE: 'profile',
|
|
139
|
+
BAN: 'ban'
|
|
117
140
|
};
|
|
118
141
|
export var PriseBadgeSize = {
|
|
119
142
|
SMALL: 'small',
|
|
@@ -134,6 +157,8 @@ var getPriceBadgeIcon = function getPriceBadgeIcon(iconType, size) {
|
|
|
134
157
|
return InfoIconBig;
|
|
135
158
|
case iconType === PriceBadgeIcon.PROFILE && isBigIcon:
|
|
136
159
|
return ProfileIconBig;
|
|
160
|
+
case iconType === PriceBadgeIcon.BAN && isBigIcon:
|
|
161
|
+
return BanIconBig;
|
|
137
162
|
case iconType === PriceBadgeIcon.PRICE:
|
|
138
163
|
return PriceIcon;
|
|
139
164
|
case iconType === PriceBadgeIcon.CHECK:
|
|
@@ -144,6 +169,8 @@ var getPriceBadgeIcon = function getPriceBadgeIcon(iconType, size) {
|
|
|
144
169
|
return InfoIcon;
|
|
145
170
|
case iconType === PriceBadgeIcon.PROFILE:
|
|
146
171
|
return ProfileIcon;
|
|
172
|
+
case iconType === PriceBadgeIcon.BAN:
|
|
173
|
+
return BanIcon;
|
|
147
174
|
default:
|
|
148
175
|
return TimerIcon;
|
|
149
176
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-modal-open-body{height:100%;overflow:hidden}.mfui-modal__overlay{display:-webkit-box;display:-ms-flexbox;display:flex;left:0;position:fixed;top:0;z-index:1000;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-animation:show-popup-overlay .3s ease-out forwards;animation:show-popup-overlay .3s ease-out forwards;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;justify-content:flex-start;opacity:0;padding:72px 0;width:100%}.mfui-modal__modal-content{margin:auto;position:relative}.mfui-modal_full-view .mfui-modal__overlay{display:block;padding:0}.mfui-modal_full-view .mfui-modal__modal-content{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:100%;width:100%}.mfui-modal_bottom-view .mfui-modal__overlay{bottom:0;display:block;height:auto;overflow:hidden;padding-bottom:0
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-modal-open-body{height:100%;overflow:hidden}.mfui-modal__overlay{display:-webkit-box;display:-ms-flexbox;display:flex;left:0;position:fixed;top:0;z-index:1000;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-animation:show-popup-overlay .3s ease-out forwards;animation:show-popup-overlay .3s ease-out forwards;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;justify-content:flex-start;opacity:0;padding:72px 0;width:100%}.mfui-modal__modal-content{margin:auto;position:relative}.mfui-modal_full-view .mfui-modal__overlay{display:block;padding:0}.mfui-modal_full-view .mfui-modal__modal-content{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:100%;width:100%}.mfui-modal_bottom-view .mfui-modal__overlay{bottom:0;display:block;height:auto;overflow:hidden;padding-bottom:0}.mfui-modal_bottom-view .mfui-modal__modal-content{height:100%;margin:0;outline:none;overflow:hidden}.mfui-modal_native-scroll .mfui-modal__overlay{overflow-x:hidden;overflow-y:scroll}@media screen and (hover:hover){.mfui-modal_native-scroll .mfui-modal__overlay{width:calc(100% + 15px)}}.mfui-modal_transition-end .mfui-modal__overlay{-webkit-animation:hide-popup-overlay .2s ease-in;animation:hide-popup-overlay .2s ease-in}@-webkit-keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@-webkit-keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}@keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}
|
|
@@ -161,10 +161,7 @@ var ModalContent = function ModalContent(_ref) {
|
|
|
161
161
|
className: cn('container-inner', {
|
|
162
162
|
'native-scroll': isEnabledNativeScroll
|
|
163
163
|
}, classes === null || classes === void 0 ? void 0 : classes.containerInner),
|
|
164
|
-
ref: containerInnerRef
|
|
165
|
-
onClick: function onClick(e) {
|
|
166
|
-
return e.stopPropagation();
|
|
167
|
-
}
|
|
164
|
+
ref: containerInnerRef
|
|
168
165
|
}), isStickyHeader && renderHeader, /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.containerBody), {
|
|
169
166
|
className: cn('container-body', {
|
|
170
167
|
'native-scroll': isEnabledNativeScroll
|
|
@@ -79,6 +79,7 @@ var ModalMobileBottom = function ModalMobileBottom(_a) {
|
|
|
79
79
|
});
|
|
80
80
|
}, [containerWrapRef, scrollBarScrollableRef, initialContainerWrapHeight, initialTouchPosition, onChangeContainerWrapTransform, onChangeTransitionStep]);
|
|
81
81
|
var handleWindowTouchEnd = React.useCallback(function (e) {
|
|
82
|
+
var _a;
|
|
82
83
|
var containerWrapNode = containerWrapRef.current;
|
|
83
84
|
var scrollableNode = scrollBarScrollableRef.current;
|
|
84
85
|
var isScrollTop = ((scrollableNode === null || scrollableNode === void 0 ? void 0 : scrollableNode.scrollTop) || 0) === 0;
|
|
@@ -86,28 +87,12 @@ var ModalMobileBottom = function ModalMobileBottom(_a) {
|
|
|
86
87
|
return;
|
|
87
88
|
}
|
|
88
89
|
window.cancelAnimationFrame(animationFrameId.current);
|
|
89
|
-
if (!e.changedTouches.length) {
|
|
90
|
-
setInitialTouchPosition(null);
|
|
91
|
-
return;
|
|
92
|
-
}
|
|
93
|
-
var touchStartY = initialTouchPosition;
|
|
94
|
-
var touchEndY = e.changedTouches[0].clientY;
|
|
95
|
-
if (touchStartY === null) {
|
|
96
|
-
setInitialTouchPosition(null);
|
|
97
|
-
return;
|
|
98
|
-
}
|
|
99
|
-
var deltaY = touchStartY - touchEndY;
|
|
100
|
-
var absDeltaY = Math.abs(deltaY);
|
|
101
|
-
if (absDeltaY < 5 || touchStartY > touchEndY) {
|
|
102
|
-
setInitialTouchPosition(null);
|
|
103
|
-
return;
|
|
104
|
-
}
|
|
105
90
|
var containerCenterPosition = containerWrapNode.offsetTop + offsetHeightCenter;
|
|
106
|
-
var isMoreHalfClosed =
|
|
91
|
+
var isMoreHalfClosed = ((_a = e.changedTouches[0]) === null || _a === void 0 ? void 0 : _a.clientY) > containerCenterPosition;
|
|
107
92
|
setInitialTouchPosition(null);
|
|
108
93
|
onChangeContainerWrapTransform(isMoreHalfClosed ? 'translateY(100%)' : 'none');
|
|
109
94
|
onChangeTransitionStep(isMoreHalfClosed ? MODAL_TRANSITIONS_STEPS_ENUM.MOVE_END_STEP : MODAL_TRANSITIONS_STEPS_ENUM.INITIAL_STEP);
|
|
110
|
-
}, [containerWrapRef, scrollBarScrollableRef, isTransitionMoveStep,
|
|
95
|
+
}, [containerWrapRef, scrollBarScrollableRef, isTransitionMoveStep, offsetHeightCenter, onChangeContainerWrapTransform, onChangeTransitionStep]);
|
|
111
96
|
React.useEffect(function () {
|
|
112
97
|
if (isSwipeDisabled) {
|
|
113
98
|
return undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-pagination{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:12px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media screen and (max-width:767px){.mfui-pagination{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:16px}}.mfui-pagination__input,.mfui-pagination__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-pagination__input{gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-pagination__input-caption{min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}.mfui-pagination__input-field{width:90px}
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-pagination{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:12px;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media screen and (max-width:767px){.mfui-pagination{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:16px}}.mfui-pagination__input,.mfui-pagination__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-pagination__input{gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-pagination__input-caption{min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}.mfui-pagination__input-field{width:90px}
|
|
@@ -10,7 +10,7 @@ export interface IUploadDropField {
|
|
|
10
10
|
/** Действие при выборе файла */
|
|
11
11
|
onChange: (files: File[]) => void;
|
|
12
12
|
/** Дополнительная информация */
|
|
13
|
-
description?: string;
|
|
13
|
+
description?: string | string[];
|
|
14
14
|
/** Список допустимых типов файлов для внутреннего input */
|
|
15
15
|
accept?: string;
|
|
16
16
|
/** Дополнительные data атрибуты к внутренним элементам */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-upload-field-drop-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px dashed var(--spbSky2);border-radius:12px;padding:12px 32px 20px;width:100%}.mfui-upload-field-drop-area__upload-icon{height:40px;width:40px;fill:var(--spbSky3)}.mfui-upload-field-drop-area__content{text-align:center}.mfui-upload-field-drop-area__select-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;border-radius:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--brandGreen);cursor:pointer;display:inline-block;font-family:inherit;font-weight:500;margin-right:4px;outline:none;padding:0;text-align:center;text-decoration:none}.mfui-upload-field-drop-area__description{color:var(--spbSky3);font-size:12px;font-weight:400;line-height:18px;text-align:center}.mfui-upload-field-drop-area__select-button:focus,.mfui-upload-field-drop-area__select-button:hover{color:var(--buttonHoverGreen)}.mfui-upload-field-drop-area__mark{color:var(--fury)}.mfui-upload-field-drop-area_dragging{border-color:var(--brandGreen)}.mfui-upload-field-drop-area_dragging *{pointer-events:none}.mfui-upload-field-drop-area_disabled{background-color:var(--spbSky0);color:var(--spbSky3)}.mfui-upload-field-drop-area_disabled .mfui-upload-field-drop-area__select-button{color:var(--spbSky3);cursor:not-allowed}.mfui-upload-field-drop-area_disabled .mfui-upload-field-drop-area__mark{color:var(--spbSky3)}
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-upload-field-drop-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px dashed var(--spbSky2);border-radius:12px;padding:12px 32px 20px;width:100%}.mfui-upload-field-drop-area__upload-icon{height:40px;width:40px;fill:var(--spbSky3)}.mfui-upload-field-drop-area__content{text-align:center}.mfui-upload-field-drop-area__select-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;border-radius:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--brandGreen);cursor:pointer;display:inline-block;font-family:inherit;font-weight:500;margin-right:4px;outline:none;padding:0;text-align:center;text-decoration:none}.mfui-upload-field-drop-area__description{color:var(--spbSky3);font-size:12px;font-weight:400;line-height:18px;list-style:none;margin:0;padding:0;text-align:center}.mfui-upload-field-drop-area__description-item{margin:0;padding:0}.mfui-upload-field-drop-area__select-button:focus,.mfui-upload-field-drop-area__select-button:hover{color:var(--buttonHoverGreen)}.mfui-upload-field-drop-area__mark{color:var(--fury)}.mfui-upload-field-drop-area_dragging{border-color:var(--brandGreen)}.mfui-upload-field-drop-area_dragging *{pointer-events:none}.mfui-upload-field-drop-area_disabled{background-color:var(--spbSky0);color:var(--spbSky3)}.mfui-upload-field-drop-area_disabled .mfui-upload-field-drop-area__select-button{color:var(--spbSky3);cursor:not-allowed}.mfui-upload-field-drop-area_disabled .mfui-upload-field-drop-area__mark{color:var(--spbSky3)}
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import './UploadFieldDropArea.scss';
|
|
3
3
|
export interface IUploadFieldDropArea {
|
|
4
4
|
/** Дополнительная информация */
|
|
5
|
-
description?: string;
|
|
5
|
+
description?: string | string[];
|
|
6
6
|
/** Обязательность поля */
|
|
7
7
|
required: boolean;
|
|
8
8
|
/** Заблокированное состояние */
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import "core-js/modules/es.symbol.js";
|
|
3
3
|
import "core-js/modules/es.symbol.description.js";
|
|
4
|
+
import "core-js/modules/es.array.is-array.js";
|
|
5
|
+
import "core-js/modules/es.array.map.js";
|
|
4
6
|
import * as React from 'react';
|
|
5
7
|
import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
|
|
6
8
|
import useDragAndDrop from "../useDragAndDrop";
|
|
@@ -25,6 +27,24 @@ var UploadFieldDropArea = function UploadFieldDropArea(_ref) {
|
|
|
25
27
|
current: null
|
|
26
28
|
};
|
|
27
29
|
var isDragging = useDragAndDrop(currentDropAreaRef, onDrop);
|
|
30
|
+
var renderDescription = function renderDescription() {
|
|
31
|
+
if (!description) {
|
|
32
|
+
return null;
|
|
33
|
+
}
|
|
34
|
+
if (Array.isArray(description)) {
|
|
35
|
+
return /*#__PURE__*/React.createElement("ul", {
|
|
36
|
+
className: cn('description')
|
|
37
|
+
}, description.map(function (item, index) {
|
|
38
|
+
return /*#__PURE__*/React.createElement("li", {
|
|
39
|
+
key: index,
|
|
40
|
+
className: cn('description-item')
|
|
41
|
+
}, item);
|
|
42
|
+
}));
|
|
43
|
+
}
|
|
44
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
45
|
+
className: cn('description')
|
|
46
|
+
}, description);
|
|
47
|
+
};
|
|
28
48
|
return /*#__PURE__*/React.createElement("div", _extends({
|
|
29
49
|
className: cn({
|
|
30
50
|
disabled: disabled,
|
|
@@ -43,8 +63,6 @@ var UploadFieldDropArea = function UploadFieldDropArea(_ref) {
|
|
|
43
63
|
onClick: !disabled ? onSelectButtonClick : undefined
|
|
44
64
|
}), "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0444\u0430\u0439\u043B\u044B"), /*#__PURE__*/React.createElement("span", null, "\u0438\u043B\u0438 \u043F\u0435\u0440\u0435\u043C\u0435\u0441\u0442\u0438\u0442\u0435 \u0438\u0445 \u0441\u044E\u0434\u0430", required && /*#__PURE__*/React.createElement("span", {
|
|
45
65
|
className: cn('mark')
|
|
46
|
-
}, "*"))),
|
|
47
|
-
className: cn('description')
|
|
48
|
-
}, description));
|
|
66
|
+
}, "*"))), renderDescription());
|
|
49
67
|
};
|
|
50
68
|
export default UploadFieldDropArea;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-upload-file-item{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;border-color:var(--spbSky1);border-radius:12px;border-style:solid;border-width:1px;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:455px;padding:12px;width:100%}.mfui-upload-file-item__file-icon-box{-ms-flex-negative:0;flex-shrink:0;height:32px;margin-top:5px;width:32px}.mfui-upload-file-item__cancel-icon-box,.mfui-upload-file-item__download-icon-box{display:block;-ms-flex-negative:0;border:none;border-radius:50%;cursor:pointer;flex-shrink:0;height:32px;margin-top:5px;padding:0;width:32px}.mfui-upload-file-item__cancel-icon-box svg,.mfui-upload-file-item__download-icon-box svg{fill:var(--spbSky3)}.mfui-upload-file-item__cancel-icon-box{background-color:var(--spbSky0)}.mfui-upload-file-item__cancel-icon-box:hover{background-color:var(--spbSky1)}.mfui-upload-file-item__cancel-icon-box:active{background-color:var(--spbSky2)}.mfui-upload-file-item__download-icon-box:hover svg{fill:var(--buttonHoverGreen)}.mfui-upload-file-item__icon{height:100%;width:100%}.mfui-upload-file-item__content{display:grid;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;grid-template-columns:auto -webkit-min-content;grid-template-columns:auto min-content;grid-template-rows:auto auto}.mfui-upload-file-item__name{font-size:15px;font-weight:500;grid-column:1;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.mfui-upload-file-item__description{color:var(--spbSky3);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:12px;font-weight:400;gap:4px;grid-column:1;grid-row:2;line-height:18px}.mfui-upload-file-item__progress-bar{background-color:var(--spbSky1);border-radius:2px;grid-column:1/span 2;height:4px;margin-top:12px;width:100%}.mfui-upload-file-item__download-icon-box{grid-column:2;grid-row:1/span 2;margin-right:-4px}.mfui-upload-file-item__progress-bar-fill{background-color:var(--brandGreen);border-radius:2px;height:100%;-webkit-transition:width .3s ease;transition:width .3s ease;width:0}.mfui-upload-file-item__service-message{color:var(--content)}.mfui-upload-file-item__error-message{color:var(--fury);cursor:pointer;-webkit-text-decoration-color:var(--fury);text-decoration-color:var(--fury);-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-underline-offset:2px}.mfui-upload-file-item__error-tooltip{font-size:15px;font-weight:500;line-height:24px;max-width:260px}.mfui-upload-file-item_error{border-color:var(--fury20)}
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-upload-file-item{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;border-color:var(--spbSky1);border-radius:12px;border-style:solid;border-width:1px;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:455px;padding:12px;width:100%}.mfui-upload-file-item__file-icon-box{-ms-flex-negative:0;flex-shrink:0;height:32px;margin-top:5px;width:32px}.mfui-upload-file-item__cancel-icon-box,.mfui-upload-file-item__download-icon-box{display:block;-ms-flex-negative:0;border:none;border-radius:50%;cursor:pointer;flex-shrink:0;height:32px;margin-top:5px;padding:0;width:32px}.mfui-upload-file-item__cancel-icon-box svg,.mfui-upload-file-item__download-icon-box svg{fill:var(--spbSky3)}.mfui-upload-file-item__cancel-icon-box{background-color:var(--spbSky0)}.mfui-upload-file-item__cancel-icon-box:hover{background-color:var(--spbSky1)}.mfui-upload-file-item__cancel-icon-box:active{background-color:var(--spbSky2)}.mfui-upload-file-item__download-icon-box:hover svg{fill:var(--buttonHoverGreen)}.mfui-upload-file-item__icon{height:100%;width:100%}.mfui-upload-file-item__content{display:grid;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;grid-template-columns:auto -webkit-min-content;grid-template-columns:auto min-content;grid-template-rows:auto auto}.mfui-upload-file-item__name{font-size:15px;font-weight:500;grid-column:1;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.mfui-upload-file-item__description{color:var(--spbSky3);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:12px;font-weight:400;gap:4px;grid-column:1;grid-row:2;line-height:18px}.mfui-upload-file-item__progress-bar{background-color:var(--spbSky1);border-radius:2px;grid-column:1/span 2;height:4px;margin-top:12px;width:100%}.mfui-upload-file-item__download-icon-box{grid-column:2;grid-row:1/span 2;margin-right:-4px}.mfui-upload-file-item__progress-bar-fill{background-color:var(--brandGreen);border-radius:2px;height:100%;-webkit-transition:width .3s ease;transition:width .3s ease;width:0}.mfui-upload-file-item__service-message{color:var(--content)}.mfui-upload-file-item__error-message{color:var(--fury);cursor:pointer;-webkit-text-decoration-color:var(--fury);text-decoration-color:var(--fury);-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-underline-offset:2px}.mfui-upload-file-item__error-tooltip{font-size:15px;font-weight:500;line-height:24px;max-width:260px}.mfui-upload-file-item_error{border-color:var(--fury20)}.mfui-upload-file-item_disabled{background-color:var(--spbSky0);border-color:var(--spbSky0);color:var(--spbSky3);pointer-events:none}.mfui-upload-file-item_disabled .mfui-upload-file-item__progress-bar-fill{background-color:var(--spbSky2)}.mfui-upload-file-item_disabled .mfui-upload-file-item__error-message,.mfui-upload-file-item_disabled .mfui-upload-file-item__service-message{color:var(--spbSky3)}.mfui-upload-file-item_disabled .mfui-upload-file-item__cancel-icon-box,.mfui-upload-file-item_disabled .mfui-upload-file-item__download-icon-box,.mfui-upload-file-item_disabled .mfui-upload-file-item__file-icon-box{opacity:.4}
|
|
@@ -14,13 +14,15 @@ export interface IUploadFileItem {
|
|
|
14
14
|
/** Сообщение об ошибке */
|
|
15
15
|
errorText?: string;
|
|
16
16
|
/** Проверка файла */
|
|
17
|
-
isChecking?:
|
|
17
|
+
isChecking?: boolean;
|
|
18
18
|
/** Ссылка на файл. Если параметр задан, то появляется кнопка скачивания */
|
|
19
19
|
downloadLink?: string;
|
|
20
20
|
/** Рекомендует браузеру скачивать контент по ссылке. Может быть передано рекомендуемое название скачиваемого файла. */
|
|
21
21
|
download?: boolean | string;
|
|
22
22
|
/** Указывает, где открыть скачиваемый документ */
|
|
23
23
|
target?: React.HTMLAttributeAnchorTarget;
|
|
24
|
+
/** Заблокированное состояние */
|
|
25
|
+
disabled?: boolean;
|
|
24
26
|
/** Обработчик скачивания файла */
|
|
25
27
|
onDownload?: (e: React.SyntheticEvent<EventTarget>) => void;
|
|
26
28
|
/** Обработчик удаления файла */
|
|
@@ -40,6 +40,8 @@ var UploadFileItem = function UploadFileItem(_ref) {
|
|
|
40
40
|
downloadLink = _ref.downloadLink,
|
|
41
41
|
download = _ref.download,
|
|
42
42
|
target = _ref.target,
|
|
43
|
+
_ref$disabled = _ref.disabled,
|
|
44
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
43
45
|
onDownload = _ref.onDownload,
|
|
44
46
|
onDelete = _ref.onDelete,
|
|
45
47
|
dataAttrs = _ref.dataAttrs;
|
|
@@ -80,7 +82,8 @@ var UploadFileItem = function UploadFileItem(_ref) {
|
|
|
80
82
|
};
|
|
81
83
|
return /*#__PURE__*/React.createElement("div", _extends({
|
|
82
84
|
className: cn({
|
|
83
|
-
error: isError
|
|
85
|
+
error: isError,
|
|
86
|
+
disabled: disabled
|
|
84
87
|
}, [className])
|
|
85
88
|
}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
|
|
86
89
|
className: cn('file-icon-box')
|
|
@@ -113,7 +116,8 @@ var UploadFileItem = function UploadFileItem(_ref) {
|
|
|
113
116
|
type: "button",
|
|
114
117
|
className: cn('cancel-icon-box')
|
|
115
118
|
}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.deleteButton), {
|
|
116
|
-
onClick: onDelete
|
|
119
|
+
onClick: onDelete,
|
|
120
|
+
disabled: disabled
|
|
117
121
|
}), /*#__PURE__*/React.createElement(CancelIcon, {
|
|
118
122
|
className: cn('icon')
|
|
119
123
|
})));
|
|
@@ -6,8 +6,10 @@ export interface IAccordionProps {
|
|
|
6
6
|
rootRef?: React.Ref<HTMLDivElement>;
|
|
7
7
|
/** Заголовок */
|
|
8
8
|
title: string | React.ReactNode | React.ReactNode[];
|
|
9
|
-
/**
|
|
9
|
+
/** Тег заголовка (определяет базовый тег и стили) */
|
|
10
10
|
titleTag?: IHeaderProps['as'];
|
|
11
|
+
/** Тег заголовка для семантической разметки (переопределение тега без изменения стилей) */
|
|
12
|
+
titleTagName?: IHeaderProps['tag'];
|
|
11
13
|
/** Состояние открытости */
|
|
12
14
|
isOpened?: boolean;
|
|
13
15
|
/** Включить микроразметку */
|
|
@@ -29,6 +29,7 @@ var Accordion = function Accordion(_ref) {
|
|
|
29
29
|
title = _ref.title,
|
|
30
30
|
_ref$titleTag = _ref.titleTag,
|
|
31
31
|
titleTag = _ref$titleTag === void 0 ? 'h5' : _ref$titleTag,
|
|
32
|
+
titleTagName = _ref.titleTagName,
|
|
32
33
|
_ref$isOpened = _ref.isOpened,
|
|
33
34
|
isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
|
|
34
35
|
_ref$hasMicrodata = _ref.hasMicrodata,
|
|
@@ -90,6 +91,7 @@ var Accordion = function Accordion(_ref) {
|
|
|
90
91
|
itemProp: 'name'
|
|
91
92
|
}), /*#__PURE__*/React.createElement(_Header["default"], {
|
|
92
93
|
as: titleTag,
|
|
94
|
+
tag: titleTagName,
|
|
93
95
|
dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header,
|
|
94
96
|
className: titlePropsClasses
|
|
95
97
|
}, title), /*#__PURE__*/React.createElement("div", {
|
|
@@ -32,6 +32,17 @@ var AttentionIcon = function AttentionIcon(props) {
|
|
|
32
32
|
d: "M10 2c4.4 0 8 3.6 8 8s-3.6 8-8 8-8-3.6-8-8 3.6-8 8-8zm0 13c.3 0 .5-.1.7-.3.2-.2.3-.4.3-.7s-.1-.5-.3-.7c-.2-.2-.5-.3-.7-.3s-.5.1-.7.3c-.2.2-.3.4-.3.7s.1.5.3.7.5.3.7.3zM9 5v6h2V5H9z"
|
|
33
33
|
}));
|
|
34
34
|
};
|
|
35
|
+
var BanIcon = function BanIcon(props) {
|
|
36
|
+
return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
|
|
37
|
+
viewBox: "0 0 20 20"
|
|
38
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
|
39
|
+
d: "M12.172 13.056a3.75 3.75 0 01-5.229-5.228l5.229 5.228zM10 6.25a3.75 3.75 0 013.056 5.922L7.827 6.943A3.733 3.733 0 0110 6.25z"
|
|
40
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
41
|
+
fillRule: "evenodd",
|
|
42
|
+
clipRule: "evenodd",
|
|
43
|
+
d: "M10 2a8 8 0 110 16 8 8 0 010-16zm0 3a5 5 0 100 10 5 5 0 000-10z"
|
|
44
|
+
}));
|
|
45
|
+
};
|
|
35
46
|
var CheckIcon = function CheckIcon(props) {
|
|
36
47
|
return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
|
|
37
48
|
viewBox: "0 0 20 20"
|
|
@@ -73,6 +84,17 @@ var AttentionIconBig = function AttentionIconBig(props) {
|
|
|
73
84
|
d: "M16 4C9.4 4 4 9.4 4 16s5.4 12 12 12 12-5.4 12-12S22.6 4 16 4zm1 18h-2v-2h2v2zm0-4h-2v-8h2v8z"
|
|
74
85
|
}));
|
|
75
86
|
};
|
|
87
|
+
var BanIconBig = function BanIconBig(props) {
|
|
88
|
+
return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
|
|
89
|
+
viewBox: "0 0 32 32"
|
|
90
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
|
91
|
+
d: "M19.475 20.89a6 6 0 01-8.365-8.365l8.365 8.365zM16 10a6 6 0 014.89 9.475l-8.366-8.366A5.972 5.972 0 0116 10z"
|
|
92
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
93
|
+
fillRule: "evenodd",
|
|
94
|
+
clipRule: "evenodd",
|
|
95
|
+
d: "M16 4c6.627 0 12 5.373 12 12s-5.373 12-12 12S4 22.627 4 16 9.373 4 16 4zm0 4a8 8 0 100 16 8 8 0 000-16z"
|
|
96
|
+
}));
|
|
97
|
+
};
|
|
76
98
|
var CheckIconBig = function CheckIconBig(props) {
|
|
77
99
|
return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
|
|
78
100
|
viewBox: "0 0 32 32"
|
|
@@ -122,7 +144,8 @@ var PriceBadgeIcon = exports.PriceBadgeIcon = {
|
|
|
122
144
|
CHECK: 'check',
|
|
123
145
|
ATTENTION: 'attention',
|
|
124
146
|
INFO: 'info',
|
|
125
|
-
PROFILE: 'profile'
|
|
147
|
+
PROFILE: 'profile',
|
|
148
|
+
BAN: 'ban'
|
|
126
149
|
};
|
|
127
150
|
var PriseBadgeSize = exports.PriseBadgeSize = {
|
|
128
151
|
SMALL: 'small',
|
|
@@ -143,6 +166,8 @@ var getPriceBadgeIcon = function getPriceBadgeIcon(iconType, size) {
|
|
|
143
166
|
return InfoIconBig;
|
|
144
167
|
case iconType === PriceBadgeIcon.PROFILE && isBigIcon:
|
|
145
168
|
return ProfileIconBig;
|
|
169
|
+
case iconType === PriceBadgeIcon.BAN && isBigIcon:
|
|
170
|
+
return BanIconBig;
|
|
146
171
|
case iconType === PriceBadgeIcon.PRICE:
|
|
147
172
|
return PriceIcon;
|
|
148
173
|
case iconType === PriceBadgeIcon.CHECK:
|
|
@@ -153,6 +178,8 @@ var getPriceBadgeIcon = function getPriceBadgeIcon(iconType, size) {
|
|
|
153
178
|
return InfoIcon;
|
|
154
179
|
case iconType === PriceBadgeIcon.PROFILE:
|
|
155
180
|
return ProfileIcon;
|
|
181
|
+
case iconType === PriceBadgeIcon.BAN:
|
|
182
|
+
return BanIcon;
|
|
156
183
|
default:
|
|
157
184
|
return TimerIcon;
|
|
158
185
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-modal-open-body{height:100%;overflow:hidden}.mfui-modal__overlay{display:-webkit-box;display:-ms-flexbox;display:flex;left:0;position:fixed;top:0;z-index:1000;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-animation:show-popup-overlay .3s ease-out forwards;animation:show-popup-overlay .3s ease-out forwards;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;justify-content:flex-start;opacity:0;padding:72px 0;width:100%}.mfui-modal__modal-content{margin:auto;position:relative}.mfui-modal_full-view .mfui-modal__overlay{display:block;padding:0}.mfui-modal_full-view .mfui-modal__modal-content{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:100%;width:100%}.mfui-modal_bottom-view .mfui-modal__overlay{bottom:0;display:block;height:auto;overflow:hidden;padding-bottom:0
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-modal-open-body{height:100%;overflow:hidden}.mfui-modal__overlay{display:-webkit-box;display:-ms-flexbox;display:flex;left:0;position:fixed;top:0;z-index:1000;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-animation:show-popup-overlay .3s ease-out forwards;animation:show-popup-overlay .3s ease-out forwards;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;justify-content:flex-start;opacity:0;padding:72px 0;width:100%}.mfui-modal__modal-content{margin:auto;position:relative}.mfui-modal_full-view .mfui-modal__overlay{display:block;padding:0}.mfui-modal_full-view .mfui-modal__modal-content{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:100%;width:100%}.mfui-modal_bottom-view .mfui-modal__overlay{bottom:0;display:block;height:auto;overflow:hidden;padding-bottom:0}.mfui-modal_bottom-view .mfui-modal__modal-content{height:100%;margin:0;outline:none;overflow:hidden}.mfui-modal_native-scroll .mfui-modal__overlay{overflow-x:hidden;overflow-y:scroll}@media screen and (hover:hover){.mfui-modal_native-scroll .mfui-modal__overlay{width:calc(100% + 15px)}}.mfui-modal_transition-end .mfui-modal__overlay{-webkit-animation:hide-popup-overlay .2s ease-in;animation:hide-popup-overlay .2s ease-in}@-webkit-keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@-webkit-keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}@keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}
|
|
@@ -170,10 +170,7 @@ var ModalContent = function ModalContent(_ref) {
|
|
|
170
170
|
className: cn('container-inner', {
|
|
171
171
|
'native-scroll': isEnabledNativeScroll
|
|
172
172
|
}, classes === null || classes === void 0 ? void 0 : classes.containerInner),
|
|
173
|
-
ref: containerInnerRef
|
|
174
|
-
onClick: function onClick(e) {
|
|
175
|
-
return e.stopPropagation();
|
|
176
|
-
}
|
|
173
|
+
ref: containerInnerRef
|
|
177
174
|
}), isStickyHeader && renderHeader, /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.containerBody), {
|
|
178
175
|
className: cn('container-body', {
|
|
179
176
|
'native-scroll': isEnabledNativeScroll
|
|
@@ -88,6 +88,7 @@ var ModalMobileBottom = function ModalMobileBottom(_a) {
|
|
|
88
88
|
});
|
|
89
89
|
}, [containerWrapRef, scrollBarScrollableRef, initialContainerWrapHeight, initialTouchPosition, onChangeContainerWrapTransform, onChangeTransitionStep]);
|
|
90
90
|
var handleWindowTouchEnd = React.useCallback(function (e) {
|
|
91
|
+
var _a;
|
|
91
92
|
var containerWrapNode = containerWrapRef.current;
|
|
92
93
|
var scrollableNode = scrollBarScrollableRef.current;
|
|
93
94
|
var isScrollTop = ((scrollableNode === null || scrollableNode === void 0 ? void 0 : scrollableNode.scrollTop) || 0) === 0;
|
|
@@ -95,28 +96,12 @@ var ModalMobileBottom = function ModalMobileBottom(_a) {
|
|
|
95
96
|
return;
|
|
96
97
|
}
|
|
97
98
|
window.cancelAnimationFrame(animationFrameId.current);
|
|
98
|
-
if (!e.changedTouches.length) {
|
|
99
|
-
setInitialTouchPosition(null);
|
|
100
|
-
return;
|
|
101
|
-
}
|
|
102
|
-
var touchStartY = initialTouchPosition;
|
|
103
|
-
var touchEndY = e.changedTouches[0].clientY;
|
|
104
|
-
if (touchStartY === null) {
|
|
105
|
-
setInitialTouchPosition(null);
|
|
106
|
-
return;
|
|
107
|
-
}
|
|
108
|
-
var deltaY = touchStartY - touchEndY;
|
|
109
|
-
var absDeltaY = Math.abs(deltaY);
|
|
110
|
-
if (absDeltaY < 5 || touchStartY > touchEndY) {
|
|
111
|
-
setInitialTouchPosition(null);
|
|
112
|
-
return;
|
|
113
|
-
}
|
|
114
99
|
var containerCenterPosition = containerWrapNode.offsetTop + offsetHeightCenter;
|
|
115
|
-
var isMoreHalfClosed =
|
|
100
|
+
var isMoreHalfClosed = ((_a = e.changedTouches[0]) === null || _a === void 0 ? void 0 : _a.clientY) > containerCenterPosition;
|
|
116
101
|
setInitialTouchPosition(null);
|
|
117
102
|
onChangeContainerWrapTransform(isMoreHalfClosed ? 'translateY(100%)' : 'none');
|
|
118
103
|
onChangeTransitionStep(isMoreHalfClosed ? _Modal.MODAL_TRANSITIONS_STEPS_ENUM.MOVE_END_STEP : _Modal.MODAL_TRANSITIONS_STEPS_ENUM.INITIAL_STEP);
|
|
119
|
-
}, [containerWrapRef, scrollBarScrollableRef, isTransitionMoveStep,
|
|
104
|
+
}, [containerWrapRef, scrollBarScrollableRef, isTransitionMoveStep, offsetHeightCenter, onChangeContainerWrapTransform, onChangeTransitionStep]);
|
|
120
105
|
React.useEffect(function () {
|
|
121
106
|
if (isSwipeDisabled) {
|
|
122
107
|
return undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-pagination{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:12px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media screen and (max-width:767px){.mfui-pagination{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:16px}}.mfui-pagination__input,.mfui-pagination__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-pagination__input{gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-pagination__input-caption{min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}.mfui-pagination__input-field{width:90px}
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-pagination{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:12px;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media screen and (max-width:767px){.mfui-pagination{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:16px}}.mfui-pagination__input,.mfui-pagination__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-pagination__input{gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-pagination__input-caption{min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}.mfui-pagination__input-field{width:90px}
|
|
@@ -10,7 +10,7 @@ export interface IUploadDropField {
|
|
|
10
10
|
/** Действие при выборе файла */
|
|
11
11
|
onChange: (files: File[]) => void;
|
|
12
12
|
/** Дополнительная информация */
|
|
13
|
-
description?: string;
|
|
13
|
+
description?: string | string[];
|
|
14
14
|
/** Список допустимых типов файлов для внутреннего input */
|
|
15
15
|
accept?: string;
|
|
16
16
|
/** Дополнительные data атрибуты к внутренним элементам */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-upload-field-drop-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px dashed var(--spbSky2);border-radius:12px;padding:12px 32px 20px;width:100%}.mfui-upload-field-drop-area__upload-icon{height:40px;width:40px;fill:var(--spbSky3)}.mfui-upload-field-drop-area__content{text-align:center}.mfui-upload-field-drop-area__select-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;border-radius:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--brandGreen);cursor:pointer;display:inline-block;font-family:inherit;font-weight:500;margin-right:4px;outline:none;padding:0;text-align:center;text-decoration:none}.mfui-upload-field-drop-area__description{color:var(--spbSky3);font-size:12px;font-weight:400;line-height:18px;text-align:center}.mfui-upload-field-drop-area__select-button:focus,.mfui-upload-field-drop-area__select-button:hover{color:var(--buttonHoverGreen)}.mfui-upload-field-drop-area__mark{color:var(--fury)}.mfui-upload-field-drop-area_dragging{border-color:var(--brandGreen)}.mfui-upload-field-drop-area_dragging *{pointer-events:none}.mfui-upload-field-drop-area_disabled{background-color:var(--spbSky0);color:var(--spbSky3)}.mfui-upload-field-drop-area_disabled .mfui-upload-field-drop-area__select-button{color:var(--spbSky3);cursor:not-allowed}.mfui-upload-field-drop-area_disabled .mfui-upload-field-drop-area__mark{color:var(--spbSky3)}
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-upload-field-drop-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px dashed var(--spbSky2);border-radius:12px;padding:12px 32px 20px;width:100%}.mfui-upload-field-drop-area__upload-icon{height:40px;width:40px;fill:var(--spbSky3)}.mfui-upload-field-drop-area__content{text-align:center}.mfui-upload-field-drop-area__select-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;border-radius:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--brandGreen);cursor:pointer;display:inline-block;font-family:inherit;font-weight:500;margin-right:4px;outline:none;padding:0;text-align:center;text-decoration:none}.mfui-upload-field-drop-area__description{color:var(--spbSky3);font-size:12px;font-weight:400;line-height:18px;list-style:none;margin:0;padding:0;text-align:center}.mfui-upload-field-drop-area__description-item{margin:0;padding:0}.mfui-upload-field-drop-area__select-button:focus,.mfui-upload-field-drop-area__select-button:hover{color:var(--buttonHoverGreen)}.mfui-upload-field-drop-area__mark{color:var(--fury)}.mfui-upload-field-drop-area_dragging{border-color:var(--brandGreen)}.mfui-upload-field-drop-area_dragging *{pointer-events:none}.mfui-upload-field-drop-area_disabled{background-color:var(--spbSky0);color:var(--spbSky3)}.mfui-upload-field-drop-area_disabled .mfui-upload-field-drop-area__select-button{color:var(--spbSky3);cursor:not-allowed}.mfui-upload-field-drop-area_disabled .mfui-upload-field-drop-area__mark{color:var(--spbSky3)}
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import './UploadFieldDropArea.scss';
|
|
3
3
|
export interface IUploadFieldDropArea {
|
|
4
4
|
/** Дополнительная информация */
|
|
5
|
-
description?: string;
|
|
5
|
+
description?: string | string[];
|
|
6
6
|
/** Обязательность поля */
|
|
7
7
|
required: boolean;
|
|
8
8
|
/** Заблокированное состояние */
|
|
@@ -8,6 +8,8 @@ exports["default"] = void 0;
|
|
|
8
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
9
|
require("core-js/modules/es.symbol.js");
|
|
10
10
|
require("core-js/modules/es.symbol.description.js");
|
|
11
|
+
require("core-js/modules/es.array.is-array.js");
|
|
12
|
+
require("core-js/modules/es.array.map.js");
|
|
11
13
|
var React = _interopRequireWildcard(require("react"));
|
|
12
14
|
var _uiHelpers = require("@megafon/ui-helpers");
|
|
13
15
|
var _useDragAndDrop = _interopRequireDefault(require("../useDragAndDrop"));
|
|
@@ -34,6 +36,24 @@ var UploadFieldDropArea = function UploadFieldDropArea(_ref) {
|
|
|
34
36
|
current: null
|
|
35
37
|
};
|
|
36
38
|
var isDragging = (0, _useDragAndDrop["default"])(currentDropAreaRef, onDrop);
|
|
39
|
+
var renderDescription = function renderDescription() {
|
|
40
|
+
if (!description) {
|
|
41
|
+
return null;
|
|
42
|
+
}
|
|
43
|
+
if (Array.isArray(description)) {
|
|
44
|
+
return /*#__PURE__*/React.createElement("ul", {
|
|
45
|
+
className: cn('description')
|
|
46
|
+
}, description.map(function (item, index) {
|
|
47
|
+
return /*#__PURE__*/React.createElement("li", {
|
|
48
|
+
key: index,
|
|
49
|
+
className: cn('description-item')
|
|
50
|
+
}, item);
|
|
51
|
+
}));
|
|
52
|
+
}
|
|
53
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
54
|
+
className: cn('description')
|
|
55
|
+
}, description);
|
|
56
|
+
};
|
|
37
57
|
return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
|
|
38
58
|
className: cn({
|
|
39
59
|
disabled: disabled,
|
|
@@ -52,8 +72,6 @@ var UploadFieldDropArea = function UploadFieldDropArea(_ref) {
|
|
|
52
72
|
onClick: !disabled ? onSelectButtonClick : undefined
|
|
53
73
|
}), "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0444\u0430\u0439\u043B\u044B"), /*#__PURE__*/React.createElement("span", null, "\u0438\u043B\u0438 \u043F\u0435\u0440\u0435\u043C\u0435\u0441\u0442\u0438\u0442\u0435 \u0438\u0445 \u0441\u044E\u0434\u0430", required && /*#__PURE__*/React.createElement("span", {
|
|
54
74
|
className: cn('mark')
|
|
55
|
-
}, "*"))),
|
|
56
|
-
className: cn('description')
|
|
57
|
-
}, description));
|
|
75
|
+
}, "*"))), renderDescription());
|
|
58
76
|
};
|
|
59
77
|
var _default = exports["default"] = UploadFieldDropArea;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-upload-file-item{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;border-color:var(--spbSky1);border-radius:12px;border-style:solid;border-width:1px;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:455px;padding:12px;width:100%}.mfui-upload-file-item__file-icon-box{-ms-flex-negative:0;flex-shrink:0;height:32px;margin-top:5px;width:32px}.mfui-upload-file-item__cancel-icon-box,.mfui-upload-file-item__download-icon-box{display:block;-ms-flex-negative:0;border:none;border-radius:50%;cursor:pointer;flex-shrink:0;height:32px;margin-top:5px;padding:0;width:32px}.mfui-upload-file-item__cancel-icon-box svg,.mfui-upload-file-item__download-icon-box svg{fill:var(--spbSky3)}.mfui-upload-file-item__cancel-icon-box{background-color:var(--spbSky0)}.mfui-upload-file-item__cancel-icon-box:hover{background-color:var(--spbSky1)}.mfui-upload-file-item__cancel-icon-box:active{background-color:var(--spbSky2)}.mfui-upload-file-item__download-icon-box:hover svg{fill:var(--buttonHoverGreen)}.mfui-upload-file-item__icon{height:100%;width:100%}.mfui-upload-file-item__content{display:grid;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;grid-template-columns:auto -webkit-min-content;grid-template-columns:auto min-content;grid-template-rows:auto auto}.mfui-upload-file-item__name{font-size:15px;font-weight:500;grid-column:1;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.mfui-upload-file-item__description{color:var(--spbSky3);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:12px;font-weight:400;gap:4px;grid-column:1;grid-row:2;line-height:18px}.mfui-upload-file-item__progress-bar{background-color:var(--spbSky1);border-radius:2px;grid-column:1/span 2;height:4px;margin-top:12px;width:100%}.mfui-upload-file-item__download-icon-box{grid-column:2;grid-row:1/span 2;margin-right:-4px}.mfui-upload-file-item__progress-bar-fill{background-color:var(--brandGreen);border-radius:2px;height:100%;-webkit-transition:width .3s ease;transition:width .3s ease;width:0}.mfui-upload-file-item__service-message{color:var(--content)}.mfui-upload-file-item__error-message{color:var(--fury);cursor:pointer;-webkit-text-decoration-color:var(--fury);text-decoration-color:var(--fury);-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-underline-offset:2px}.mfui-upload-file-item__error-tooltip{font-size:15px;font-weight:500;line-height:24px;max-width:260px}.mfui-upload-file-item_error{border-color:var(--fury20)}
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-upload-file-item{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;border-color:var(--spbSky1);border-radius:12px;border-style:solid;border-width:1px;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:455px;padding:12px;width:100%}.mfui-upload-file-item__file-icon-box{-ms-flex-negative:0;flex-shrink:0;height:32px;margin-top:5px;width:32px}.mfui-upload-file-item__cancel-icon-box,.mfui-upload-file-item__download-icon-box{display:block;-ms-flex-negative:0;border:none;border-radius:50%;cursor:pointer;flex-shrink:0;height:32px;margin-top:5px;padding:0;width:32px}.mfui-upload-file-item__cancel-icon-box svg,.mfui-upload-file-item__download-icon-box svg{fill:var(--spbSky3)}.mfui-upload-file-item__cancel-icon-box{background-color:var(--spbSky0)}.mfui-upload-file-item__cancel-icon-box:hover{background-color:var(--spbSky1)}.mfui-upload-file-item__cancel-icon-box:active{background-color:var(--spbSky2)}.mfui-upload-file-item__download-icon-box:hover svg{fill:var(--buttonHoverGreen)}.mfui-upload-file-item__icon{height:100%;width:100%}.mfui-upload-file-item__content{display:grid;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;grid-template-columns:auto -webkit-min-content;grid-template-columns:auto min-content;grid-template-rows:auto auto}.mfui-upload-file-item__name{font-size:15px;font-weight:500;grid-column:1;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.mfui-upload-file-item__description{color:var(--spbSky3);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:12px;font-weight:400;gap:4px;grid-column:1;grid-row:2;line-height:18px}.mfui-upload-file-item__progress-bar{background-color:var(--spbSky1);border-radius:2px;grid-column:1/span 2;height:4px;margin-top:12px;width:100%}.mfui-upload-file-item__download-icon-box{grid-column:2;grid-row:1/span 2;margin-right:-4px}.mfui-upload-file-item__progress-bar-fill{background-color:var(--brandGreen);border-radius:2px;height:100%;-webkit-transition:width .3s ease;transition:width .3s ease;width:0}.mfui-upload-file-item__service-message{color:var(--content)}.mfui-upload-file-item__error-message{color:var(--fury);cursor:pointer;-webkit-text-decoration-color:var(--fury);text-decoration-color:var(--fury);-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-underline-offset:2px}.mfui-upload-file-item__error-tooltip{font-size:15px;font-weight:500;line-height:24px;max-width:260px}.mfui-upload-file-item_error{border-color:var(--fury20)}.mfui-upload-file-item_disabled{background-color:var(--spbSky0);border-color:var(--spbSky0);color:var(--spbSky3);pointer-events:none}.mfui-upload-file-item_disabled .mfui-upload-file-item__progress-bar-fill{background-color:var(--spbSky2)}.mfui-upload-file-item_disabled .mfui-upload-file-item__error-message,.mfui-upload-file-item_disabled .mfui-upload-file-item__service-message{color:var(--spbSky3)}.mfui-upload-file-item_disabled .mfui-upload-file-item__cancel-icon-box,.mfui-upload-file-item_disabled .mfui-upload-file-item__download-icon-box,.mfui-upload-file-item_disabled .mfui-upload-file-item__file-icon-box{opacity:.4}
|
|
@@ -14,13 +14,15 @@ export interface IUploadFileItem {
|
|
|
14
14
|
/** Сообщение об ошибке */
|
|
15
15
|
errorText?: string;
|
|
16
16
|
/** Проверка файла */
|
|
17
|
-
isChecking?:
|
|
17
|
+
isChecking?: boolean;
|
|
18
18
|
/** Ссылка на файл. Если параметр задан, то появляется кнопка скачивания */
|
|
19
19
|
downloadLink?: string;
|
|
20
20
|
/** Рекомендует браузеру скачивать контент по ссылке. Может быть передано рекомендуемое название скачиваемого файла. */
|
|
21
21
|
download?: boolean | string;
|
|
22
22
|
/** Указывает, где открыть скачиваемый документ */
|
|
23
23
|
target?: React.HTMLAttributeAnchorTarget;
|
|
24
|
+
/** Заблокированное состояние */
|
|
25
|
+
disabled?: boolean;
|
|
24
26
|
/** Обработчик скачивания файла */
|
|
25
27
|
onDownload?: (e: React.SyntheticEvent<EventTarget>) => void;
|
|
26
28
|
/** Обработчик удаления файла */
|
|
@@ -49,6 +49,8 @@ var UploadFileItem = function UploadFileItem(_ref) {
|
|
|
49
49
|
downloadLink = _ref.downloadLink,
|
|
50
50
|
download = _ref.download,
|
|
51
51
|
target = _ref.target,
|
|
52
|
+
_ref$disabled = _ref.disabled,
|
|
53
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
52
54
|
onDownload = _ref.onDownload,
|
|
53
55
|
onDelete = _ref.onDelete,
|
|
54
56
|
dataAttrs = _ref.dataAttrs;
|
|
@@ -89,7 +91,8 @@ var UploadFileItem = function UploadFileItem(_ref) {
|
|
|
89
91
|
};
|
|
90
92
|
return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
|
|
91
93
|
className: cn({
|
|
92
|
-
error: isError
|
|
94
|
+
error: isError,
|
|
95
|
+
disabled: disabled
|
|
93
96
|
}, [className])
|
|
94
97
|
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
|
|
95
98
|
className: cn('file-icon-box')
|
|
@@ -122,7 +125,8 @@ var UploadFileItem = function UploadFileItem(_ref) {
|
|
|
122
125
|
type: "button",
|
|
123
126
|
className: cn('cancel-icon-box')
|
|
124
127
|
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.deleteButton), {
|
|
125
|
-
onClick: onDelete
|
|
128
|
+
onClick: onDelete,
|
|
129
|
+
disabled: disabled
|
|
126
130
|
}), /*#__PURE__*/React.createElement(CancelIcon, {
|
|
127
131
|
className: cn('icon')
|
|
128
132
|
})));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@megafon/ui-core",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.13.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.12.
|
|
53
|
+
"@megafon/ui-icons": "^3.12.1",
|
|
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": "8956610140095dff83d364a00cea0341bcf8cc69"
|
|
108
108
|
}
|