@skbkontur/react-ui 4.0.0-beta.3 → 4.0.0-beta.4
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/cjs/components/FileUploader/FileUploader.d.ts +14 -3
- package/cjs/components/FileUploader/FileUploader.js +28 -11
- package/cjs/components/FileUploader/FileUploader.js.map +1 -1
- package/cjs/components/FileUploader/FileUploader.styles.d.ts +1 -0
- package/cjs/components/FileUploader/FileUploader.styles.js +7 -1
- package/cjs/components/FileUploader/FileUploader.styles.js.map +1 -1
- package/cjs/internal/FileUploaderControl/FileUploaderControlProvider.js +2 -2
- package/cjs/internal/FileUploaderControl/FileUploaderControlProvider.js.map +1 -1
- package/cjs/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.d.ts +2 -0
- package/cjs/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.js +14 -9
- package/cjs/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.js.map +1 -1
- package/cjs/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.d.ts +7 -1
- package/cjs/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.js +8 -2
- package/cjs/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.js.map +1 -1
- package/cjs/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.styles.d.ts +1 -0
- package/cjs/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.styles.js +7 -2
- package/cjs/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.styles.js.map +1 -1
- package/components/FileUploader/FileUploader/FileUploader.js +25 -12
- package/components/FileUploader/FileUploader/FileUploader.js.map +1 -1
- package/components/FileUploader/FileUploader.d.ts +14 -3
- package/components/FileUploader/FileUploader.styles/FileUploader.styles.js +4 -1
- package/components/FileUploader/FileUploader.styles/FileUploader.styles.js.map +1 -1
- package/components/FileUploader/FileUploader.styles.d.ts +1 -0
- package/internal/FileUploaderControl/FileUploaderControlProvider/FileUploaderControlProvider.js +1 -1
- package/internal/FileUploaderControl/FileUploaderControlProvider/FileUploaderControlProvider.js.map +1 -1
- package/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile/FileUploaderFile.js +12 -10
- package/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile/FileUploaderFile.js.map +1 -1
- package/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.d.ts +2 -0
- package/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList/FileUploaderFileList.js +7 -3
- package/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList/FileUploaderFileList.js.map +1 -1
- package/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.d.ts +7 -1
- package/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.styles/FileUploaderFileList.styles.js +5 -2
- package/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.styles/FileUploaderFileList.styles.js.map +1 -1
- package/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.styles.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { FileUploaderAttachedFile } from '../../internal/FileUploaderControl/fileUtils';
|
|
3
|
-
import { Nullable } from '../../typings/utility-types';
|
|
4
3
|
import { FileUploaderControlProviderProps } from '../../internal/FileUploaderControl/FileUploaderControlProvider';
|
|
5
4
|
import { CommonProps } from '../../internal/CommonWrapper';
|
|
5
|
+
import { Nullable } from '../../typings/utility-types';
|
|
6
6
|
interface _FileUploaderProps extends CommonProps, React.InputHTMLAttributes<HTMLInputElement> {
|
|
7
7
|
/** Состояние ошибки всего контрола */
|
|
8
8
|
error?: boolean;
|
|
@@ -10,14 +10,25 @@ interface _FileUploaderProps extends CommonProps, React.InputHTMLAttributes<HTML
|
|
|
10
10
|
warning?: boolean;
|
|
11
11
|
/** Свойство ширины. */
|
|
12
12
|
width?: React.CSSProperties['width'];
|
|
13
|
+
/** Свойство, скрывающее отображение файлов. */
|
|
14
|
+
hideFiles?: boolean;
|
|
13
15
|
/** Функция, через которую отправляем файлы. Используется для отслеживания статуса загрузки файла. */
|
|
14
16
|
request?: (file: FileUploaderAttachedFile) => Promise<void>;
|
|
15
17
|
/** Срабатывает при удачной попытке отправки через request */
|
|
16
18
|
onRequestSuccess?: (fileId: string) => void;
|
|
17
19
|
/** Срабатывает при неудачной попытке отправки через request */
|
|
18
20
|
onRequestError?: (fileId: string) => void;
|
|
19
|
-
/**
|
|
20
|
-
|
|
21
|
+
/**
|
|
22
|
+
* Функция валидации каждого файла.
|
|
23
|
+
* Срабатывает после выбора файлов и перед попыткой отправить в request.
|
|
24
|
+
* Чтобы вывести валидацию ошибки, промис должен вернуть строку.
|
|
25
|
+
* */
|
|
26
|
+
validateBeforeUpload?: (file: FileUploaderAttachedFile) => Promise<Nullable<string>>;
|
|
27
|
+
/**
|
|
28
|
+
* Функция, позволяющая кастомизировать файлы.
|
|
29
|
+
* Через нее можно вешать кастомные валидации на каждый файл.
|
|
30
|
+
* */
|
|
31
|
+
renderFile?: (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => React.ReactNode;
|
|
21
32
|
}
|
|
22
33
|
export interface FileUploaderRef {
|
|
23
34
|
focus: () => void;
|
|
@@ -4,11 +4,9 @@ var _fileUtils = require("../../internal/FileUploaderControl/fileUtils");
|
|
|
4
4
|
var _Emotion = require("../../lib/theming/Emotion");
|
|
5
5
|
var _useMemoObject = require("../../hooks/useMemoObject");
|
|
6
6
|
var _FileUploaderControlContext = require("../../internal/FileUploaderControl/FileUploaderControlContext");
|
|
7
|
-
var _FileUploaderFileValidationResult = require("../../internal/FileUploaderControl/FileUploaderFileValidationResult");
|
|
8
7
|
var _useControlLocale = require("../../internal/FileUploaderControl/hooks/useControlLocale");
|
|
9
8
|
var _useUpload = require("../../internal/FileUploaderControl/hooks/useUpload");
|
|
10
9
|
var _useDrop3 = require("../../hooks/useDrop");
|
|
11
|
-
|
|
12
10
|
var _ThemeContext = require("../../lib/theming/ThemeContext");
|
|
13
11
|
var _px = require("../../internal/icons/16px");
|
|
14
12
|
|
|
@@ -19,7 +17,9 @@ var _FileUploaderFileList = require("../../internal/FileUploaderControl/FileUplo
|
|
|
19
17
|
var _client = require("../../lib/client");
|
|
20
18
|
var _CommonWrapper = require("../../internal/CommonWrapper");
|
|
21
19
|
|
|
22
|
-
var
|
|
20
|
+
var _FileUploaderFileValidationResult = require("../../internal/FileUploaderControl/FileUploaderFileValidationResult");
|
|
21
|
+
|
|
22
|
+
var _FileUploader2 = require("./FileUploader.styles");var _excluded = ["disabled", "error", "warning", "multiple", "width", "hideFiles", "onBlur", "onFocus", "onChange", "request", "validateBeforeUpload", "onRequestSuccess", "onRequestError", "renderFile"];function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
|
|
23
23
|
|
|
24
24
|
var stopPropagation = function stopPropagation(e) {return e.stopPropagation();};
|
|
25
25
|
|
|
@@ -49,6 +49,19 @@ var stopPropagation = function stopPropagation(e) {return e.stopPropagation();};
|
|
|
49
49
|
|
|
50
50
|
|
|
51
51
|
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
var defaultRenderFile = function defaultRenderFile(file, fileNode) {return fileNode;};
|
|
52
65
|
|
|
53
66
|
var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {var _cx, _cx2, _cx3, _cx4;
|
|
54
67
|
var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
|
|
@@ -67,9 +80,11 @@ var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
|
|
|
67
80
|
|
|
68
81
|
|
|
69
82
|
|
|
70
|
-
props.disabled,error = props.error,warning = props.warning,_props$multiple = props.multiple,multiple = _props$multiple === void 0 ? false : _props$multiple,_props$width = props.width,width = _props$width === void 0 ? theme.fileUploaderWidth : _props$width,onBlur = props.onBlur,onFocus = props.onFocus,onChange = props.onChange,request = props.request,getFileValidationText = props.getFileValidationText,onRequestSuccess = props.onRequestSuccess,onRequestError = props.onRequestError,inputProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
|
|
71
83
|
|
|
72
|
-
|
|
84
|
+
|
|
85
|
+
props.disabled,error = props.error,warning = props.warning,_props$multiple = props.multiple,multiple = _props$multiple === void 0 ? false : _props$multiple,_props$width = props.width,width = _props$width === void 0 ? theme.fileUploaderWidth : _props$width,_props$hideFiles = props.hideFiles,hideFiles = _props$hideFiles === void 0 ? false : _props$hideFiles,onBlur = props.onBlur,onFocus = props.onFocus,onChange = props.onChange,request = props.request,validateBeforeUpload = props.validateBeforeUpload,onRequestSuccess = props.onRequestSuccess,onRequestError = props.onRequestError,_props$renderFile = props.renderFile,renderFile = _props$renderFile === void 0 ? defaultRenderFile : _props$renderFile,inputProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
|
|
86
|
+
|
|
87
|
+
var _useContext = (0, _react.useContext)(_FileUploaderControlContext.FileUploaderControlContext),files = _useContext.files,setFiles = _useContext.setFiles,removeFile = _useContext.removeFile,reset = _useContext.reset,setFileValidationResult = _useContext.setFileValidationResult;
|
|
73
88
|
|
|
74
89
|
var locale = (0, _useControlLocale.useControlLocale)();
|
|
75
90
|
|
|
@@ -83,7 +98,7 @@ var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
|
|
|
83
98
|
var tryValidateAndUpload = (0, _react.useCallback)(
|
|
84
99
|
function (files) {
|
|
85
100
|
files.forEach( /*#__PURE__*/function () {var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(file) {var validationMessage;return _regenerator.default.wrap(function _callee$(_context) {while (1) {switch (_context.prev = _context.next) {case 0:_context.t0 =
|
|
86
|
-
|
|
101
|
+
validateBeforeUpload;if (!_context.t0) {_context.next = 5;break;}_context.next = 4;return validateBeforeUpload(file);case 4:_context.t0 = _context.sent;case 5:validationMessage = _context.t0;
|
|
87
102
|
|
|
88
103
|
if (!validationMessage) {
|
|
89
104
|
isAsync && upload(file);
|
|
@@ -92,7 +107,7 @@ var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
|
|
|
92
107
|
}case 7:case "end":return _context.stop();}}}, _callee);}));return function (_x) {return _ref.apply(this, arguments);};}());
|
|
93
108
|
|
|
94
109
|
},
|
|
95
|
-
[upload,
|
|
110
|
+
[upload, validateBeforeUpload, isAsync]);
|
|
96
111
|
|
|
97
112
|
|
|
98
113
|
/** common part **/
|
|
@@ -198,7 +213,7 @@ var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
|
|
|
198
213
|
|
|
199
214
|
|
|
200
215
|
var hasOneFile = files.length === 1;
|
|
201
|
-
var hasOneFileForSingle = isSingleMode && hasOneFile;
|
|
216
|
+
var hasOneFileForSingle = isSingleMode && hasOneFile && !hideFiles;
|
|
202
217
|
|
|
203
218
|
var _useState2 = (0, _react.useState)(false),hovered = _useState2[0],setHovered = _useState2[1];
|
|
204
219
|
|
|
@@ -210,7 +225,7 @@ var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
|
|
|
210
225
|
return /*#__PURE__*/(
|
|
211
226
|
_react.default.createElement(_CommonWrapper.CommonWrapper, props, /*#__PURE__*/
|
|
212
227
|
_react.default.createElement("div", { className: _FileUploader2.jsStyles.root(theme), style: (0, _useMemoObject.useMemoObject)({ width: width }) },
|
|
213
|
-
!isSingleMode && !!files.length && /*#__PURE__*/_react.default.createElement(_FileUploaderFileList.FileUploaderFileList,
|
|
228
|
+
!hideFiles && !isSingleMode && !!files.length && /*#__PURE__*/_react.default.createElement(_FileUploaderFileList.FileUploaderFileList, { renderFile: renderFile }), /*#__PURE__*/
|
|
214
229
|
_react.default.createElement("div", { className: uploadButtonWrapperClassNames }, /*#__PURE__*/
|
|
215
230
|
_react.default.createElement("label", {
|
|
216
231
|
onMouseEnter: function onMouseEnter() {return setHovered(true);},
|
|
@@ -218,14 +233,16 @@ var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
|
|
|
218
233
|
ref: labelRef,
|
|
219
234
|
className: uploadButtonClassNames }, /*#__PURE__*/
|
|
220
235
|
|
|
221
|
-
_react.default.createElement("div", { className: _FileUploader2.jsStyles.content() }, /*#__PURE__*/
|
|
236
|
+
_react.default.createElement("div", { "data-tid": 'FileUploader__content', className: _FileUploader2.jsStyles.content() }, /*#__PURE__*/
|
|
222
237
|
_react.default.createElement("span", { "data-tid": 'FileUploader__link', className: linkClassNames },
|
|
223
238
|
hasOneFileForSingle ? locale.choosedFile : locale.chooseFile), "\xA0", /*#__PURE__*/
|
|
224
239
|
|
|
225
240
|
|
|
226
241
|
_react.default.createElement("div", { className: _FileUploader2.jsStyles.afterLinkText() },
|
|
227
242
|
hasOneFileForSingle ? /*#__PURE__*/
|
|
228
|
-
_react.default.createElement(
|
|
243
|
+
_react.default.createElement("div", { className: _FileUploader2.jsStyles.singleFile() },
|
|
244
|
+
renderFile(files[0], /*#__PURE__*/_react.default.createElement(_FileUploaderFile.FileUploaderFile, { file: files[0] }))) : /*#__PURE__*/
|
|
245
|
+
|
|
229
246
|
|
|
230
247
|
_react.default.createElement(_react.default.Fragment, null,
|
|
231
248
|
locale.orDragHere, "\xA0", /*#__PURE__*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["FileUploader.tsx"],"names":["stopPropagation","e","_FileUploader","React","forwardRef","props","ref","theme","ThemeContext","disabled","error","warning","multiple","width","fileUploaderWidth","onBlur","onFocus","onChange","request","getFileValidationText","onRequestSuccess","onRequestError","inputProps","FileUploaderControlContext","files","setFiles","removeFile","setFileValidationResult","reset","locale","inputRef","isAsync","isSingleMode","upload","tryValidateAndUpload","forEach","file","validationMessage","id","FileUploaderFileValidationResult","handleChange","newFiles","filesArray","Array","from","attachedFiles","map","getAttachedFile","length","handleDrop","event","dataTransfer","clearData","onDrop","isDraggable","labelRef","isWindowDraggable","windowRef","isBrowser","current","window","document","focus","keyListener","isTabPressed","blur","focusedByTab","setFocusedByTab","handleInputChange","target","handleFocus","requestAnimationFrame","handleBlur","uploadButtonClassNames","jsStyles","uploadButton","uploadButtonFocus","dragOver","uploadButtonWrapperClassNames","windowDragOver","uploadButtonIconClassNames","icon","iconDisabled","hasOneFile","hasOneFileForSingle","hovered","setHovered","linkClassNames","link","linkHovered","linkDisabled","root","content","choosedFile","chooseFile","afterLinkText","orDragHere","fileInput","FileUploader","memo","displayName"],"mappings":"6hBAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA,sD;;AAEA,IAAMA,eAAwC,GAAG,SAA3CA,eAA2C,CAACC,CAAD,UAAOA,CAAC,CAACD,eAAF,EAAP,EAAjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,IAAME,aAAa,gBAAGC,eAAMC,UAAN,CAAsD,UAACC,KAAD,EAA4BC,GAA5B,EAAoC;AAC9G,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;;AAEA;AACEC,EAAAA,QADF;;;;;;;;;;;;;AAcIJ,EAAAA,KAdJ,CACEI,QADF,CAEEC,KAFF,GAcIL,KAdJ,CAEEK,KAFF,CAGEC,OAHF,GAcIN,KAdJ,CAGEM,OAHF,mBAcIN,KAdJ,CAIEO,QAJF,CAIEA,QAJF,gCAIa,KAJb,kCAcIP,KAdJ,CAKEQ,KALF,CAKEA,KALF,6BAKUN,KAAK,CAACO,iBALhB,gBAMEC,MANF,GAcIV,KAdJ,CAMEU,MANF,CAOEC,OAPF,GAcIX,KAdJ,CAOEW,OAPF,CAQEC,QARF,GAcIZ,KAdJ,CAQEY,QARF,CASEC,OATF,GAcIb,KAdJ,CASEa,OATF,CAUEC,qBAVF,GAcId,KAdJ,CAUEc,qBAVF,CAWEC,gBAXF,GAcIf,KAdJ,CAWEe,gBAXF,CAYEC,cAZF,GAcIhB,KAdJ,CAYEgB,cAZF,CAaKC,UAbL,+CAcIjB,KAdJ;;AAgBA,oBAAwE,uBAAWkB,sDAAX,CAAxE,CAAQC,KAAR,eAAQA,KAAR,CAAeC,QAAf,eAAeA,QAAf,CAAyBC,UAAzB,eAAyBA,UAAzB,CAAqCC,uBAArC,eAAqCA,uBAArC,CAA8DC,KAA9D,eAA8DA,KAA9D;;AAEA,MAAMC,MAAM,GAAG,yCAAf;;AAEA,MAAMC,QAAQ,GAAG,mBAAyB,IAAzB,CAAjB;;AAEA,MAAMC,OAAO,GAAG,CAAC,CAACb,OAAlB;AACA,MAAMc,YAAY,GAAG,CAACpB,QAAtB;;AAEA,MAAMqB,MAAM,GAAG,0BAAUf,OAAV,EAAmBE,gBAAnB,EAAqCC,cAArC,CAAf;;AAEA,MAAMa,oBAAoB,GAAG;AAC3B,YAACV,KAAD,EAAuC;AACrCA,IAAAA,KAAK,CAACW,OAAN,+GAAc,iBAAOC,IAAP;AACcjB,gBAAAA,qBADd,sEAC8CA,qBAAqB,CAACiB,IAAD,CADnE,2CACNC,iBADM;;AAGZ,oBAAI,CAACA,iBAAL,EAAwB;AACtBN,kBAAAA,OAAO,IAAIE,MAAM,CAACG,IAAD,CAAjB;AACD,iBAFD,MAEO;AACLT,kBAAAA,uBAAuB,CAACS,IAAI,CAACE,EAAN,EAAUC,mEAAiC7B,KAAjC,CAAuC2B,iBAAvC,CAAV,CAAvB;AACD,iBAPW,wDAAd;;AASD,GAX0B;AAY3B,GAACJ,MAAD,EAASvB,KAAT,EAAgBS,qBAAhB,EAAuCY,OAAvC,CAZ2B,CAA7B;;;AAeA;AACA,MAAMS,YAAY,GAAG;AACnB,YAACC,QAAD,EAA+B;AAC7B,QAAI,CAACA,QAAL,EAAe;;AAEf,QAAIC,UAAU,GAAGC,KAAK,CAACC,IAAN,CAAWH,QAAX,CAAjB;;AAEA,QAAIT,YAAJ,EAAkB;AAChBU,MAAAA,UAAU,GAAG,CAACA,UAAU,CAAC,CAAD,CAAX,CAAb;AACD;;AAED,QAAMG,aAAa,GAAGH,UAAU,CAACI,GAAX,CAAeC,0BAAf,CAAtB;;AAEA,QAAIf,YAAY,IAAIa,aAAa,CAACG,MAA9B,IAAwCxB,KAAK,CAACwB,MAAlD,EAA0D;AACxDtB,MAAAA,UAAU,CAACF,KAAK,CAAC,CAAD,CAAL,CAASc,EAAV,CAAV;AACD;;AAED,QAAIO,aAAa,CAACG,MAAlB,EAA0B;AACxBvB,MAAAA,QAAQ,CAACoB,aAAD,CAAR;AACAX,MAAAA,oBAAoB,CAACW,aAAD,CAApB;AACD;AACF,GApBkB;AAqBnB,GAACX,oBAAD,EAAuBT,QAAvB,EAAiCO,YAAjC,EAA+CR,KAA/C,EAAsDE,UAAtD,CArBmB,CAArB;;;AAwBA,MAAMuB,UAAU,GAAG;AACjB,YAACC,KAAD,EAAW;AACT,QAAIzC,QAAJ,EAAc;AACZ;AACD;;AAED,QAAQ0C,YAAR,GAAyBD,KAAzB,CAAQC,YAAR;AACA,QAAQ3B,KAAR,GAAkB2B,YAAlB,CAAQ3B,KAAR;;AAEA,QAAI,CAAAA,KAAK,QAAL,YAAAA,KAAK,CAAEwB,MAAP,IAAgB,CAApB,EAAuB;AACrBR,MAAAA,YAAY,CAAChB,KAAD,CAAZ;AACA2B,MAAAA,YAAY,CAACC,SAAb;AACD;AACF,GAbgB;AAcjB,GAACZ,YAAD,EAAe/B,QAAf,CAdiB,CAAnB;;;AAiBA,iBAAuC,uBAA0B,EAAE4C,MAAM,EAAEJ,UAAV,EAA1B,CAAvC,CAAQK,WAAR,YAAQA,WAAR,CAA0BC,QAA1B,YAAqBjD,GAArB;AACA,kBAA2D,wBAA3D,CAAqBkD,iBAArB,aAAQF,WAAR,CAA6CG,SAA7C,aAAwCnD,GAAxC;;AAEA,MAAIoD,iBAAJ,EAAe;AACbD,IAAAA,SAAS,CAACE,OAAV,GAAoBC,MAAM,CAACC,QAA3B;AACD;;AAED,MAAMC,KAAK,GAAG,wBAAY,YAAM;AAC9BC,6BAAYC,YAAZ,GAA2B,IAA3B;AACA,yBAAAlC,QAAQ,CAAC6B,OAAT,uCAAkBG,KAAlB;AACD,GAHa,EAGX,EAHW,CAAd;;AAKA,MAAMG,IAAI,GAAG,wBAAY,YAAM;AAC7B,0BAAAnC,QAAQ,CAAC6B,OAAT,wCAAkBM,IAAlB;AACD,GAFY,EAEV,EAFU,CAAb;;AAIA,kCAAoB3D,GAApB,EAAyB,oBAAO,EAAEwD,KAAK,EAALA,KAAF,EAASG,IAAI,EAAJA,IAAT,EAAerC,KAAK,EAALA,KAAf,EAAP,EAAzB,EAAyD,CAACtB,GAAD,CAAzD;;AAEA,kBAAwC,qBAAS,KAAT,CAAxC,CAAO4D,YAAP,gBAAqBC,eAArB;AACA,MAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAAClB,KAAD,EAAgD;AACxEjC,IAAAA,QAAQ,QAAR,YAAAA,QAAQ,CAAGiC,KAAH,CAAR;AACAV,IAAAA,YAAY,CAACU,KAAK,CAACmB,MAAN,CAAa7C,KAAd,CAAZ;AACD,GAHD;;AAKA,MAAM8C,WAAW,GAAG,SAAdA,WAAc,CAACrE,CAAD,EAA2C;AAC7D,QAAI,CAACQ,QAAL,EAAe;AACb;AACA;AACA8D,MAAAA,qBAAqB,CAAC,YAAM;AAC1B,YAAIR,yBAAYC,YAAhB,EAA8B;AAC5BG,UAAAA,eAAe,CAAC,IAAD,CAAf;AACD;AACF,OAJoB,CAArB;AAKAnD,MAAAA,OAAO,QAAP,YAAAA,OAAO,CAAGf,CAAH,CAAP;AACD;AACF,GAXD;;AAaA,MAAMuE,UAAU,GAAG,SAAbA,UAAa,CAACvE,CAAD,EAA2C;AAC5DkE,IAAAA,eAAe,CAAC,KAAD,CAAf;AACA,QAAI,CAAC1D,QAAL,EAAe;AACbM,MAAAA,MAAM,QAAN,YAAAA,MAAM,CAAGd,CAAH,CAAN;AACD;AACF,GALD;;AAOA,MAAMwE,sBAAsB,GAAG,iBAAGC,wBAASC,YAAT,CAAsBpE,KAAtB,CAAH;AAC5BmE,0BAASE,iBAAT,CAA2BrE,KAA3B,CAD4B,IACQ2D,YADR;AAE5BQ,0BAASjE,QAAT,CAAkBF,KAAlB,CAF4B,IAEDE,QAFC;AAG5BiE,0BAAS/D,OAAT,CAAiBJ,KAAjB,CAH4B,IAGF,CAAC,CAACI,OAHA;AAI5B+D,0BAAShE,KAAT,CAAeH,KAAf,CAJ4B,IAIJ,CAAC,CAACG,KAJE;AAK5BgE,0BAASG,QAAT,EAL4B,IAKNvB,WAAW,IAAI,CAAC7C,QALV,OAA/B;;;AAQA,MAAMqE,6BAA6B,GAAG;AACnCJ,0BAASK,cAAT,EADmC,IACPvB,iBAAiB,IAAI,CAAC/C,QADf,QAAtC;;;AAIA,MAAMuE,0BAA0B,GAAG,iBAAGN,wBAASO,IAAT,CAAc1E,KAAd,CAAH;AAChCmE,0BAASQ,YAAT,CAAsB3E,KAAtB,CADgC,IACDE,QADC,QAAnC;;;AAIA,MAAM0E,UAAU,GAAG3D,KAAK,CAACwB,MAAN,KAAiB,CAApC;AACA,MAAMoC,mBAAmB,GAAGpD,YAAY,IAAImD,UAA5C;;AAEA,mBAA8B,qBAAS,KAAT,CAA9B,CAAOE,OAAP,iBAAgBC,UAAhB;;AAEA,MAAMC,cAAc,GAAG,iBAAGb,wBAASc,IAAT,CAAcjF,KAAd,CAAH;AACpBmE,0BAASe,WAAT,CAAqBlF,KAArB,CADoB,IACU,CAACE,QAAD,IAAa4E,OADvB;AAEpBX,0BAASgB,YAAT,CAAsBnF,KAAtB,CAFoB,IAEWE,QAFX,QAAvB;;;AAKA;AACE,iCAAC,4BAAD,EAAmBJ,KAAnB;AACE,0CAAK,SAAS,EAAEqE,wBAASiB,IAAT,CAAcpF,KAAd,CAAhB,EAAsC,KAAK,EAAE,kCAAc,EAAEM,KAAK,EAALA,KAAF,EAAd,CAA7C;AACG,KAACmB,YAAD,IAAiB,CAAC,CAACR,KAAK,CAACwB,MAAzB,iBAAmC,6BAAC,0CAAD,OADtC;AAEE,0CAAK,SAAS,EAAE8B,6BAAhB;AACE;AACE,MAAA,YAAY,EAAE,gCAAMQ,UAAU,CAAC,IAAD,CAAhB,EADhB;AAEE,MAAA,YAAY,EAAE,gCAAMA,UAAU,CAAC,KAAD,CAAhB,EAFhB;AAGE,MAAA,GAAG,EAAE/B,QAHP;AAIE,MAAA,SAAS,EAAEkB,sBAJb;;AAME,0CAAK,SAAS,EAAEC,wBAASkB,OAAT,EAAhB;AACE,2CAAM,YAAU,oBAAhB,EAAsC,SAAS,EAAEL,cAAjD;AACGH,IAAAA,mBAAmB,GAAGvD,MAAM,CAACgE,WAAV,GAAwBhE,MAAM,CAACiE,UADrD,CADF;;;AAKE,0CAAK,SAAS,EAAEpB,wBAASqB,aAAT,EAAhB;AACGX,IAAAA,mBAAmB;AAClB,iCAAC,kCAAD,IAAkB,IAAI,EAAE5D,KAAK,CAAC,CAAD,CAA7B,GADkB;;AAGlB;AACGK,IAAAA,MAAM,CAACmE,UADV;AAEE,0CAAK,SAAS,EAAEhB,0BAAhB;AACE,iCAAC,cAAD,OADF,CAFF,CAJJ,CALF,CANF;;;;;;AAwBE;AACM1D,IAAAA,UADN;AAEE,MAAA,GAAG,EAAEQ,QAFP;AAGE,MAAA,QAAQ,EAAErB,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAH5B;AAIE,MAAA,IAAI,EAAC,MAJP;AAKE,MAAA,QAAQ,EAAEA,QALZ;AAME,MAAA,QAAQ,EAAEG,QANZ;AAOE,MAAA,SAAS,EAAE8D,wBAASuB,SAAT,EAPb;AAQE,MAAA,OAAO,EAAEjG,eARX;AASE,MAAA,QAAQ,EAAEoE,iBATZ;AAUE,MAAA,OAAO,EAAEE,WAVX;AAWE,MAAA,MAAM,EAAEE;AACR;AAZF,QAaE,KAAK,EAAE,EAbT,IAxBF,CADF,CAFF,CADF,CADF;;;;;;;AAiDD,CA9MqB,CAAtB;;;;AAkNO,IAAM0B,YAAY,GAAG;AAC1B/F,eAAMgG,IAAN,CAAWjG,aAAX,CAD0B,CAArB,C;;AAGPgG,YAAY,CAACE,WAAb,GAA2B,cAA3B","sourcesContent":["import React, { useCallback, useContext, useImperativeHandle, useRef, useState } from 'react';\n\nimport { FileUploaderAttachedFile, getAttachedFile } from '../../internal/FileUploaderControl/fileUtils';\nimport { cx } from '../../lib/theming/Emotion';\nimport { useMemoObject } from '../../hooks/useMemoObject';\nimport { FileUploaderControlContext } from '../../internal/FileUploaderControl/FileUploaderControlContext';\nimport { FileUploaderFileValidationResult } from '../../internal/FileUploaderControl/FileUploaderFileValidationResult';\nimport { useControlLocale } from '../../internal/FileUploaderControl/hooks/useControlLocale';\nimport { useUpload } from '../../internal/FileUploaderControl/hooks/useUpload';\nimport { useDrop } from '../../hooks/useDrop';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { UploadIcon } from '../../internal/icons/16px';\nimport { FileUploaderControlProviderProps } from '../../internal/FileUploaderControl/FileUploaderControlProvider';\nimport { withFileUploaderControlProvider } from '../../internal/FileUploaderControl/withFileUploaderControlProvider';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { FileUploaderFile } from '../../internal/FileUploaderControl/FileUploaderFile/FileUploaderFile';\nimport { FileUploaderFileList } from '../../internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList';\nimport { isBrowser } from '../../lib/client';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\n\nimport { jsStyles } from './FileUploader.styles';\n\nconst stopPropagation: React.ReactEventHandler = (e) => e.stopPropagation();\n\ninterface _FileUploaderProps extends CommonProps, React.InputHTMLAttributes<HTMLInputElement> {\n /** Состояние ошибки всего контрола */\n error?: boolean;\n /** Состояние предупреждения всего контрола */\n warning?: boolean;\n\n /** Свойство ширины. */\n width?: React.CSSProperties['width'];\n\n /** Функция, через которую отправляем файлы. Используется для отслеживания статуса загрузки файла. */\n request?: (file: FileUploaderAttachedFile) => Promise<void>;\n /** Срабатывает при удачной попытке отправки через request */\n onRequestSuccess?: (fileId: string) => void;\n /** Срабатывает при неудачной попытке отправки через request */\n onRequestError?: (fileId: string) => void;\n\n /** Функция валидации каждого файла. Срабатывает после выбора файлов и перед попыткой отправить в request. */\n getFileValidationText?: (file: FileUploaderAttachedFile) => Promise<Nullable<string>>;\n}\n\nexport interface FileUploaderRef {\n focus: () => void;\n blur: () => void;\n /** Сбрасывает выбранные файлы */\n reset: () => void;\n}\n\nconst _FileUploader = React.forwardRef<FileUploaderRef, _FileUploaderProps>((props: _FileUploaderProps, ref) => {\n const theme = useContext(ThemeContext);\n\n const {\n disabled,\n error,\n warning,\n multiple = false,\n width = theme.fileUploaderWidth,\n onBlur,\n onFocus,\n onChange,\n request,\n getFileValidationText,\n onRequestSuccess,\n onRequestError,\n ...inputProps\n } = props;\n\n const { files, setFiles, removeFile, setFileValidationResult, reset } = useContext(FileUploaderControlContext);\n\n const locale = useControlLocale();\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n const isAsync = !!request;\n const isSingleMode = !multiple;\n\n const upload = useUpload(request, onRequestSuccess, onRequestError);\n\n const tryValidateAndUpload = useCallback(\n (files: FileUploaderAttachedFile[]) => {\n files.forEach(async (file) => {\n const validationMessage = getFileValidationText && (await getFileValidationText(file));\n\n if (!validationMessage) {\n isAsync && upload(file);\n } else {\n setFileValidationResult(file.id, FileUploaderFileValidationResult.error(validationMessage));\n }\n });\n },\n [upload, error, getFileValidationText, isAsync],\n );\n\n /** common part **/\n const handleChange = useCallback(\n (newFiles: FileList | null) => {\n if (!newFiles) return;\n\n let filesArray = Array.from(newFiles);\n\n if (isSingleMode) {\n filesArray = [filesArray[0]];\n }\n\n const attachedFiles = filesArray.map(getAttachedFile);\n\n if (isSingleMode && attachedFiles.length && files.length) {\n removeFile(files[0].id);\n }\n\n if (attachedFiles.length) {\n setFiles(attachedFiles);\n tryValidateAndUpload(attachedFiles);\n }\n },\n [tryValidateAndUpload, setFiles, isSingleMode, files, removeFile],\n );\n\n const handleDrop = useCallback(\n (event) => {\n if (disabled) {\n return;\n }\n\n const { dataTransfer } = event;\n const { files } = dataTransfer;\n\n if (files?.length > 0) {\n handleChange(files);\n dataTransfer.clearData();\n }\n },\n [handleChange, disabled],\n );\n\n const { isDraggable, ref: labelRef } = useDrop<HTMLLabelElement>({ onDrop: handleDrop });\n const { isDraggable: isWindowDraggable, ref: windowRef } = useDrop<Document>();\n\n if (isBrowser) {\n windowRef.current = window.document;\n }\n\n const focus = useCallback(() => {\n keyListener.isTabPressed = true;\n inputRef.current?.focus();\n }, []);\n\n const blur = useCallback(() => {\n inputRef.current?.blur();\n }, []);\n\n useImperativeHandle(ref, () => ({ focus, blur, reset }), [ref]);\n\n const [focusedByTab, setFocusedByTab] = useState(false);\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(event);\n handleChange(event.target.files);\n };\n\n const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n if (!disabled) {\n // focus event fires before keyDown eventlistener\n // so we should check tabPressed in async way\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed) {\n setFocusedByTab(true);\n }\n });\n onFocus?.(e);\n }\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n setFocusedByTab(false);\n if (!disabled) {\n onBlur?.(e);\n }\n };\n\n const uploadButtonClassNames = cx(jsStyles.uploadButton(theme), {\n [jsStyles.uploadButtonFocus(theme)]: focusedByTab,\n [jsStyles.disabled(theme)]: disabled,\n [jsStyles.warning(theme)]: !!warning,\n [jsStyles.error(theme)]: !!error,\n [jsStyles.dragOver()]: isDraggable && !disabled,\n });\n\n const uploadButtonWrapperClassNames = cx({\n [jsStyles.windowDragOver()]: isWindowDraggable && !disabled,\n });\n\n const uploadButtonIconClassNames = cx(jsStyles.icon(theme), {\n [jsStyles.iconDisabled(theme)]: disabled,\n });\n\n const hasOneFile = files.length === 1;\n const hasOneFileForSingle = isSingleMode && hasOneFile;\n\n const [hovered, setHovered] = useState(false);\n\n const linkClassNames = cx(jsStyles.link(theme), {\n [jsStyles.linkHovered(theme)]: !disabled && hovered,\n [jsStyles.linkDisabled(theme)]: disabled,\n });\n\n return (\n <CommonWrapper {...props}>\n <div className={jsStyles.root(theme)} style={useMemoObject({ width })}>\n {!isSingleMode && !!files.length && <FileUploaderFileList />}\n <div className={uploadButtonWrapperClassNames}>\n <label\n onMouseEnter={() => setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n ref={labelRef}\n className={uploadButtonClassNames}\n >\n <div className={jsStyles.content()}>\n <span data-tid={'FileUploader__link'} className={linkClassNames}>\n {hasOneFileForSingle ? locale.choosedFile : locale.chooseFile}\n </span>\n \n <div className={jsStyles.afterLinkText()}>\n {hasOneFileForSingle ? (\n <FileUploaderFile file={files[0]} />\n ) : (\n <>\n {locale.orDragHere} \n <div className={uploadButtonIconClassNames}>\n <UploadIcon />\n </div>\n </>\n )}\n </div>\n </div>\n <input\n {...inputProps}\n ref={inputRef}\n tabIndex={disabled ? -1 : 0}\n type=\"file\"\n disabled={disabled}\n multiple={multiple}\n className={jsStyles.fileInput()}\n onClick={stopPropagation}\n onChange={handleInputChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n // для того, чтобы срабатывало событие change при выборе одного и того же файла подряд\n value={''}\n />\n </label>\n </div>\n </div>\n </CommonWrapper>\n );\n});\n\nexport interface FileUploaderProps extends _FileUploaderProps, FileUploaderControlProviderProps {}\n\nexport const FileUploader = withFileUploaderControlProvider<FileUploaderProps, FileUploaderRef>(\n React.memo(_FileUploader),\n);\nFileUploader.displayName = 'FileUploader';\n"]}
|
|
1
|
+
{"version":3,"sources":["FileUploader.tsx"],"names":["stopPropagation","e","defaultRenderFile","file","fileNode","_FileUploader","React","forwardRef","props","ref","theme","ThemeContext","disabled","error","warning","multiple","width","fileUploaderWidth","hideFiles","onBlur","onFocus","onChange","request","validateBeforeUpload","onRequestSuccess","onRequestError","renderFile","inputProps","FileUploaderControlContext","files","setFiles","removeFile","reset","setFileValidationResult","locale","inputRef","isAsync","isSingleMode","upload","tryValidateAndUpload","forEach","validationMessage","id","FileUploaderFileValidationResult","handleChange","newFiles","filesArray","Array","from","attachedFiles","map","getAttachedFile","length","handleDrop","event","dataTransfer","clearData","onDrop","isDraggable","labelRef","isWindowDraggable","windowRef","isBrowser","current","window","document","focus","keyListener","isTabPressed","blur","focusedByTab","setFocusedByTab","handleInputChange","target","handleFocus","requestAnimationFrame","handleBlur","uploadButtonClassNames","jsStyles","uploadButton","uploadButtonFocus","dragOver","uploadButtonWrapperClassNames","windowDragOver","uploadButtonIconClassNames","icon","iconDisabled","hasOneFile","hasOneFileForSingle","hovered","setHovered","linkClassNames","link","linkHovered","linkDisabled","root","content","choosedFile","chooseFile","afterLinkText","singleFile","orDragHere","fileInput","FileUploader","memo","displayName"],"mappings":"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","sourcesContent":["import React, { useCallback, useContext, useImperativeHandle, useRef, useState } from 'react';\n\nimport { FileUploaderAttachedFile, getAttachedFile } from '../../internal/FileUploaderControl/fileUtils';\nimport { cx } from '../../lib/theming/Emotion';\nimport { useMemoObject } from '../../hooks/useMemoObject';\nimport { FileUploaderControlContext } from '../../internal/FileUploaderControl/FileUploaderControlContext';\nimport { useControlLocale } from '../../internal/FileUploaderControl/hooks/useControlLocale';\nimport { useUpload } from '../../internal/FileUploaderControl/hooks/useUpload';\nimport { useDrop } from '../../hooks/useDrop';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { UploadIcon } from '../../internal/icons/16px';\nimport { FileUploaderControlProviderProps } from '../../internal/FileUploaderControl/FileUploaderControlProvider';\nimport { withFileUploaderControlProvider } from '../../internal/FileUploaderControl/withFileUploaderControlProvider';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { FileUploaderFile } from '../../internal/FileUploaderControl/FileUploaderFile/FileUploaderFile';\nimport { FileUploaderFileList } from '../../internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList';\nimport { isBrowser } from '../../lib/client';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { Nullable } from '../../typings/utility-types';\nimport { FileUploaderFileValidationResult } from '../../internal/FileUploaderControl/FileUploaderFileValidationResult';\n\nimport { jsStyles } from './FileUploader.styles';\n\nconst stopPropagation: React.ReactEventHandler = (e) => e.stopPropagation();\n\ninterface _FileUploaderProps extends CommonProps, React.InputHTMLAttributes<HTMLInputElement> {\n /** Состояние ошибки всего контрола */\n error?: boolean;\n /** Состояние предупреждения всего контрола */\n warning?: boolean;\n /** Свойство ширины. */\n width?: React.CSSProperties['width'];\n /** Свойство, скрывающее отображение файлов. */\n hideFiles?: boolean;\n\n /** Функция, через которую отправляем файлы. Используется для отслеживания статуса загрузки файла. */\n request?: (file: FileUploaderAttachedFile) => Promise<void>;\n /** Срабатывает при удачной попытке отправки через request */\n onRequestSuccess?: (fileId: string) => void;\n /** Срабатывает при неудачной попытке отправки через request */\n onRequestError?: (fileId: string) => void;\n\n /**\n * Функция валидации каждого файла.\n * Срабатывает после выбора файлов и перед попыткой отправить в request.\n * Чтобы вывести валидацию ошибки, промис должен вернуть строку.\n * */\n validateBeforeUpload?: (file: FileUploaderAttachedFile) => Promise<Nullable<string>>;\n\n /**\n * Функция, позволяющая кастомизировать файлы.\n * Через нее можно вешать кастомные валидации на каждый файл.\n * */\n renderFile?: (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => React.ReactNode;\n}\n\nexport interface FileUploaderRef {\n focus: () => void;\n blur: () => void;\n /** Сбрасывает выбранные файлы */\n reset: () => void;\n}\n\nconst defaultRenderFile = (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => fileNode;\n\nconst _FileUploader = React.forwardRef<FileUploaderRef, _FileUploaderProps>((props: _FileUploaderProps, ref) => {\n const theme = useContext(ThemeContext);\n\n const {\n disabled,\n error,\n warning,\n multiple = false,\n width = theme.fileUploaderWidth,\n hideFiles = false,\n onBlur,\n onFocus,\n onChange,\n request,\n validateBeforeUpload,\n onRequestSuccess,\n onRequestError,\n renderFile = defaultRenderFile,\n ...inputProps\n } = props;\n\n const { files, setFiles, removeFile, reset, setFileValidationResult } = useContext(FileUploaderControlContext);\n\n const locale = useControlLocale();\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n const isAsync = !!request;\n const isSingleMode = !multiple;\n\n const upload = useUpload(request, onRequestSuccess, onRequestError);\n\n const tryValidateAndUpload = useCallback(\n (files: FileUploaderAttachedFile[]) => {\n files.forEach(async (file) => {\n const validationMessage = validateBeforeUpload && (await validateBeforeUpload(file));\n\n if (!validationMessage) {\n isAsync && upload(file);\n } else {\n setFileValidationResult(file.id, FileUploaderFileValidationResult.error(validationMessage));\n }\n });\n },\n [upload, validateBeforeUpload, isAsync],\n );\n\n /** common part **/\n const handleChange = useCallback(\n (newFiles: FileList | null) => {\n if (!newFiles) return;\n\n let filesArray = Array.from(newFiles);\n\n if (isSingleMode) {\n filesArray = [filesArray[0]];\n }\n\n const attachedFiles = filesArray.map(getAttachedFile);\n\n if (isSingleMode && attachedFiles.length && files.length) {\n removeFile(files[0].id);\n }\n\n if (attachedFiles.length) {\n setFiles(attachedFiles);\n tryValidateAndUpload(attachedFiles);\n }\n },\n [tryValidateAndUpload, setFiles, isSingleMode, files, removeFile],\n );\n\n const handleDrop = useCallback(\n (event) => {\n if (disabled) {\n return;\n }\n\n const { dataTransfer } = event;\n const { files } = dataTransfer;\n\n if (files?.length > 0) {\n handleChange(files);\n dataTransfer.clearData();\n }\n },\n [handleChange, disabled],\n );\n\n const { isDraggable, ref: labelRef } = useDrop<HTMLLabelElement>({ onDrop: handleDrop });\n const { isDraggable: isWindowDraggable, ref: windowRef } = useDrop<Document>();\n\n if (isBrowser) {\n windowRef.current = window.document;\n }\n\n const focus = useCallback(() => {\n keyListener.isTabPressed = true;\n inputRef.current?.focus();\n }, []);\n\n const blur = useCallback(() => {\n inputRef.current?.blur();\n }, []);\n\n useImperativeHandle(ref, () => ({ focus, blur, reset }), [ref]);\n\n const [focusedByTab, setFocusedByTab] = useState(false);\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(event);\n handleChange(event.target.files);\n };\n\n const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n if (!disabled) {\n // focus event fires before keyDown eventlistener\n // so we should check tabPressed in async way\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed) {\n setFocusedByTab(true);\n }\n });\n onFocus?.(e);\n }\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n setFocusedByTab(false);\n if (!disabled) {\n onBlur?.(e);\n }\n };\n\n const uploadButtonClassNames = cx(jsStyles.uploadButton(theme), {\n [jsStyles.uploadButtonFocus(theme)]: focusedByTab,\n [jsStyles.disabled(theme)]: disabled,\n [jsStyles.warning(theme)]: !!warning,\n [jsStyles.error(theme)]: !!error,\n [jsStyles.dragOver()]: isDraggable && !disabled,\n });\n\n const uploadButtonWrapperClassNames = cx({\n [jsStyles.windowDragOver()]: isWindowDraggable && !disabled,\n });\n\n const uploadButtonIconClassNames = cx(jsStyles.icon(theme), {\n [jsStyles.iconDisabled(theme)]: disabled,\n });\n\n const hasOneFile = files.length === 1;\n const hasOneFileForSingle = isSingleMode && hasOneFile && !hideFiles;\n\n const [hovered, setHovered] = useState(false);\n\n const linkClassNames = cx(jsStyles.link(theme), {\n [jsStyles.linkHovered(theme)]: !disabled && hovered,\n [jsStyles.linkDisabled(theme)]: disabled,\n });\n\n return (\n <CommonWrapper {...props}>\n <div className={jsStyles.root(theme)} style={useMemoObject({ width })}>\n {!hideFiles && !isSingleMode && !!files.length && <FileUploaderFileList renderFile={renderFile} />}\n <div className={uploadButtonWrapperClassNames}>\n <label\n onMouseEnter={() => setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n ref={labelRef}\n className={uploadButtonClassNames}\n >\n <div data-tid={'FileUploader__content'} className={jsStyles.content()}>\n <span data-tid={'FileUploader__link'} className={linkClassNames}>\n {hasOneFileForSingle ? locale.choosedFile : locale.chooseFile}\n </span>\n \n <div className={jsStyles.afterLinkText()}>\n {hasOneFileForSingle ? (\n <div className={jsStyles.singleFile()}>\n {renderFile(files[0], <FileUploaderFile file={files[0]} />)}\n </div>\n ) : (\n <>\n {locale.orDragHere} \n <div className={uploadButtonIconClassNames}>\n <UploadIcon />\n </div>\n </>\n )}\n </div>\n </div>\n <input\n {...inputProps}\n ref={inputRef}\n tabIndex={disabled ? -1 : 0}\n type=\"file\"\n disabled={disabled}\n multiple={multiple}\n className={jsStyles.fileInput()}\n onClick={stopPropagation}\n onChange={handleInputChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n // для того, чтобы срабатывало событие change при выборе одного и того же файла подряд\n value={''}\n />\n </label>\n </div>\n </div>\n </CommonWrapper>\n );\n});\n\nexport interface FileUploaderProps extends _FileUploaderProps, FileUploaderControlProviderProps {}\n\nexport const FileUploader = withFileUploaderControlProvider<FileUploaderProps, FileUploaderRef>(\n React.memo(_FileUploader),\n);\nFileUploader.displayName = 'FileUploader';\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
|
|
1
|
+
"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
var styles = {
|
|
@@ -155,6 +155,12 @@ var styles = {
|
|
|
155
155
|
|
|
156
156
|
|
|
157
157
|
|
|
158
|
+
},
|
|
159
|
+
|
|
160
|
+
singleFile: function singleFile() {
|
|
161
|
+
return (0, _Emotion.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteralLoose2.default)(["\n width: 100%;\n "])));
|
|
162
|
+
|
|
163
|
+
|
|
158
164
|
} };
|
|
159
165
|
|
|
160
166
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["FileUploader.styles.ts"],"names":["styles","pulse","keyframes","root","t","css","fileUploaderBg","fileUploaderLineHeight","fileUploaderFontSize","fileUploaderTextColorDefault","uploadButton","fileUploaderBorderWidth","fileUploaderBorderStyle","fileUploaderBorderColor","fileUploaderBorderRadius","fileUploaderPaddingY","fileUploaderPaddingX","uploadButtonFocus","fileUploaderBorderColorFocus","dragOver","windowDragOver","content","fileInput","afterLinkText","warning","fileUploaderBorderColorWarning","error","fileUploaderBorderColorError","disabled","fileUploaderDisabledBg","fileUploaderDisabledBorderColor","fileUploaderDisabledTextColor","icon","fileUploaderIconSize","fileUploaderIconColor","iconDisabled","fileUploaderDisabledIconColor","link","fileUploaderLinkColor","linkHovered","linkHoverTextDecoration","linkDisabled","fileUploaderDisabledLinkColor","jsStyles"],"mappings":"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
|
|
1
|
+
{"version":3,"sources":["FileUploader.styles.ts"],"names":["styles","pulse","keyframes","root","t","css","fileUploaderBg","fileUploaderLineHeight","fileUploaderFontSize","fileUploaderTextColorDefault","uploadButton","fileUploaderBorderWidth","fileUploaderBorderStyle","fileUploaderBorderColor","fileUploaderBorderRadius","fileUploaderPaddingY","fileUploaderPaddingX","uploadButtonFocus","fileUploaderBorderColorFocus","dragOver","windowDragOver","content","fileInput","afterLinkText","warning","fileUploaderBorderColorWarning","error","fileUploaderBorderColorError","disabled","fileUploaderDisabledBg","fileUploaderDisabledBorderColor","fileUploaderDisabledTextColor","icon","fileUploaderIconSize","fileUploaderIconColor","iconDisabled","fileUploaderDisabledIconColor","link","fileUploaderLinkColor","linkHovered","linkHoverTextDecoration","linkDisabled","fileUploaderDisabledLinkColor","singleFile","jsStyles"],"mappings":"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","sourcesContent":["import { css, keyframes, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nconst styles = {\n pulse() {\n return keyframes`\n 0% {\n box-shadow:\n 0px 0px 0px 0px #2DA4F9,\n 0px 0px 0px 1px rgba(45,164,249,0.7);\n }\n 95% {\n box-shadow:\n 0px 0px 0px 0px #2DA4F9,\n 0px 0px 0px 10px rgba(45,164,249,0);\n }\n 100% {\n box-shadow:\n 0px 0px 0px 0px #2DA4F9,\n 0px 0px 0px 1px rgba(45,164,249,0);\n }\n `;\n },\n\n root(t: Theme) {\n return css`\n display: inline-block;\n min-width: 285px;\n position: relative;\n background-color: ${t.fileUploaderBg};\n line-height: ${t.fileUploaderLineHeight};\n font-size: ${t.fileUploaderFontSize};\n color: ${t.fileUploaderTextColorDefault};\n `;\n },\n\n uploadButton(t: Theme) {\n return css`\n width: 100%;\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n border: ${t.fileUploaderBorderWidth} ${t.fileUploaderBorderStyle} ${t.fileUploaderBorderColor};\n box-sizing: border-box;\n border-radius: ${t.fileUploaderBorderRadius};\n outline: none;\n cursor: pointer;\n padding: ${t.fileUploaderPaddingY} ${t.fileUploaderPaddingX};\n transition: box-shadow 0.3s ease;\n `;\n },\n\n uploadButtonFocus(t: Theme) {\n return css`\n border: ${t.fileUploaderBorderWidth} solid ${t.fileUploaderBorderColorFocus};\n box-shadow: 0px 0px 0px 1px ${t.fileUploaderBorderColorFocus};\n `;\n },\n\n dragOver() {\n return css`\n border: 1px solid #2da4f9;\n border-radius: 2px;\n box-shadow: 0px 0px 0px 3px #2da4f9, 0px 0px 0px 8px rgba(45, 164, 249, 0.35);\n `;\n },\n\n windowDragOver() {\n return css`\n border-radius: 2px;\n animation: ${styles.pulse()} 1.5s infinite;\n `;\n },\n\n content() {\n return css`\n display: flex;\n width: 100%;\n align-items: center;\n height: 100%;\n `;\n },\n\n fileInput() {\n return css`\n width: 0;\n height: 0;\n `;\n },\n\n afterLinkText() {\n return css`\n display: flex;\n justify-content: space-between;\n flex: 1 1 auto;\n `;\n },\n\n warning(t: Theme) {\n return css`\n border: ${t.fileUploaderBorderWidth} solid ${t.fileUploaderBorderColorWarning};\n box-shadow: 0px 0px 0px 1px ${t.fileUploaderBorderColorWarning};\n `;\n },\n\n error(t: Theme) {\n return css`\n border: ${t.fileUploaderBorderWidth} solid ${t.fileUploaderBorderColorError};\n box-shadow: 0px 0px 0px 1px ${t.fileUploaderBorderColorError};\n `;\n },\n\n disabled(t: Theme) {\n return css`\n cursor: default;\n background: ${t.fileUploaderDisabledBg};\n border: ${t.fileUploaderBorderWidth} solid ${t.fileUploaderDisabledBorderColor};\n color: ${t.fileUploaderDisabledTextColor};\n box-shadow: none;\n `;\n },\n\n icon(t: Theme) {\n return css`\n display: inline-block;\n font-size: ${t.fileUploaderIconSize};\n color: ${t.fileUploaderIconColor};\n `;\n },\n\n iconDisabled(t: Theme) {\n return css`\n color: ${t.fileUploaderDisabledIconColor};\n `;\n },\n\n link(t: Theme) {\n return css`\n outline: none;\n text-decoration: none;\n color: ${t.fileUploaderLinkColor};\n `;\n },\n\n linkHovered(t: Theme) {\n return css`\n text-decoration: ${t.linkHoverTextDecoration};\n `;\n },\n\n linkDisabled(t: Theme) {\n return css`\n color: ${t.fileUploaderDisabledLinkColor};\n &:hover {\n text-decoration: none;\n }\n `;\n },\n\n singleFile() {\n return css`\n width: 100%;\n `;\n },\n};\n\nexport const jsStyles = memoizeStyle(styles);\n"]}
|
|
@@ -5,8 +5,8 @@ var _useEffectWithoutInitCall = require("../../hooks/useEffectWithoutInitCall");
|
|
|
5
5
|
|
|
6
6
|
var _fileUtils = require("./fileUtils");
|
|
7
7
|
var _FileUploaderControlContext = require("./FileUploaderControlContext");
|
|
8
|
-
var
|
|
9
|
-
var
|
|
8
|
+
var _useControlLocale = require("./hooks/useControlLocale");
|
|
9
|
+
var _FileUploaderFileValidationResult = require("./FileUploaderFileValidationResult");function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["FileUploaderControlProvider.tsx"],"names":["updateFile","files","fileId","getFileUpdatedProps","fileIndex","findIndex","file","id","newFiles","updatedProps","FileUploaderControlProvider","props","children","onValueChange","onRemove","onAttach","setFiles","locale","setFileStatus","status","validationResult","FileUploaderFileStatus","Error","FileUploaderFileValidationResult","error","requestErrorText","handleExternalSetFiles","state","removeFile","filter","setFileValidationResult","reset","React","useCallback","displayName"],"mappings":"2PAAA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,
|
|
1
|
+
{"version":3,"sources":["FileUploaderControlProvider.tsx"],"names":["updateFile","files","fileId","getFileUpdatedProps","fileIndex","findIndex","file","id","newFiles","updatedProps","FileUploaderControlProvider","props","children","onValueChange","onRemove","onAttach","setFiles","locale","setFileStatus","status","validationResult","FileUploaderFileStatus","Error","FileUploaderFileValidationResult","error","requestErrorText","handleExternalSetFiles","state","removeFile","filter","setFileValidationResult","reset","React","useCallback","displayName"],"mappings":"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","sourcesContent":["import React, { PropsWithChildren, useCallback, useState } from 'react';\n\nimport { useMemoObject } from '../../hooks/useMemoObject';\nimport { useEffectWithoutInitCall } from '../../hooks/useEffectWithoutInitCall';\n\nimport { FileUploaderAttachedFile, FileUploaderFileStatus } from './fileUtils';\nimport { FileUploaderControlContext } from './FileUploaderControlContext';\nimport { useControlLocale } from './hooks/useControlLocale';\nimport { FileUploaderFileValidationResult } from './FileUploaderFileValidationResult';\n\nexport interface FileUploaderControlProviderProps {\n /** Срабатывает при выборе файлов */\n onAttach?: (files: FileUploaderAttachedFile[]) => void;\n /** Срабатывает при удалении файла из контрола */\n onRemove?: (fileId: string) => void;\n /** Срабатывает при onAttach, onRemove и других изменениях файлов. В files передает текущее состояние всего списка файлов */\n onValueChange?: (files: FileUploaderAttachedFile[]) => void;\n}\n\nconst updateFile = (\n files: FileUploaderAttachedFile[],\n fileId: string,\n getFileUpdatedProps: (file: FileUploaderAttachedFile) => Partial<FileUploaderAttachedFile>,\n): FileUploaderAttachedFile[] => {\n const fileIndex = files.findIndex((file) => file.id === fileId);\n if (fileIndex === -1) return files;\n\n const newFiles = [...files];\n const file = files[fileIndex];\n\n const updatedProps = getFileUpdatedProps(file);\n\n newFiles[fileIndex] = {\n ...file,\n ...updatedProps,\n };\n\n return newFiles;\n};\n\nexport const FileUploaderControlProvider = (props: PropsWithChildren<FileUploaderControlProviderProps>) => {\n const { children, onValueChange, onRemove, onAttach } = props;\n\n const [files, setFiles] = useState<FileUploaderAttachedFile[]>([]);\n const locale = useControlLocale();\n\n useEffectWithoutInitCall(() => {\n onValueChange?.(files);\n }, [files]);\n\n const setFileStatus = useCallback(\n (fileId: string, status: FileUploaderFileStatus) => {\n setFiles((files) =>\n updateFile(files, fileId, (file) => ({\n status,\n validationResult:\n status === FileUploaderFileStatus.Error\n ? FileUploaderFileValidationResult.error(locale.requestErrorText)\n : file.validationResult,\n })),\n );\n },\n [locale],\n );\n\n const handleExternalSetFiles = useCallback(\n (files: FileUploaderAttachedFile[]) => {\n onAttach?.(files);\n setFiles((state) => [...state, ...files]);\n },\n [onAttach],\n );\n\n const removeFile = useCallback(\n (fileId: string) => {\n onRemove?.(fileId);\n setFiles((state) => state.filter((file) => file.id !== fileId));\n },\n [onRemove],\n );\n\n const setFileValidationResult = useCallback((fileId: string, validationResult: FileUploaderFileValidationResult) => {\n setFiles((files) => updateFile(files, fileId, () => ({ validationResult })));\n }, []);\n\n const reset = React.useCallback(() => {\n setFiles(() => [] as FileUploaderAttachedFile[]);\n }, []);\n\n return (\n <FileUploaderControlContext.Provider\n value={useMemoObject({\n setFileStatus,\n files,\n setFiles: handleExternalSetFiles,\n removeFile,\n setFileValidationResult,\n reset,\n })}\n >\n {children}\n </FileUploaderControlContext.Provider>\n );\n};\n\nFileUploaderControlProvider.displayName = 'FileUploaderControlProvider';\n"]}
|
|
@@ -2,6 +2,8 @@ import { FileUploaderAttachedFile } from '../fileUtils';
|
|
|
2
2
|
interface FileUploaderFileProps {
|
|
3
3
|
file: FileUploaderAttachedFile;
|
|
4
4
|
showSize?: boolean;
|
|
5
|
+
/** Состояние ошибки контрола файла */
|
|
6
|
+
error?: boolean;
|
|
5
7
|
}
|
|
6
8
|
export declare const FileUploaderFile: {
|
|
7
9
|
(props: FileUploaderFileProps): JSX.Element;
|
|
@@ -6,7 +6,6 @@ var _TextWidthHelper = require("../../../internal/TextWidthHelper/TextWidthHelpe
|
|
|
6
6
|
var _stringUtils = require("../../../lib/stringUtils");
|
|
7
7
|
var _Spinner = require("../../../components/Spinner");
|
|
8
8
|
var _FileUploaderControlContext = require("../FileUploaderControlContext");
|
|
9
|
-
var _Tooltip = require("../../../components/Tooltip");
|
|
10
9
|
var _Emotion = require("../../../lib/theming/Emotion");
|
|
11
10
|
var _ThemeContext = require("../../../lib/theming/ThemeContext");
|
|
12
11
|
var _px = require("../../icons/16px");
|
|
@@ -14,6 +13,7 @@ var _keyListener = require("../../../lib/events/keyListener");
|
|
|
14
13
|
var _identifiers = require("../../../lib/events/keyboard/identifiers");
|
|
15
14
|
|
|
16
15
|
var _Hint = require("../../../components/Hint");
|
|
16
|
+
var _Tooltip = require("../../../components/Tooltip");
|
|
17
17
|
|
|
18
18
|
var _FileUploaderFile = require("./FileUploaderFile.styles");function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
|
|
19
19
|
|
|
@@ -22,6 +22,8 @@ var _FileUploaderFile = require("./FileUploaderFile.styles");function _getRequir
|
|
|
22
22
|
|
|
23
23
|
|
|
24
24
|
|
|
25
|
+
|
|
26
|
+
|
|
25
27
|
var getTruncatedName = function getTruncatedName(fileNameWidth, fileNameElementWidth, name) {
|
|
26
28
|
if (!fileNameWidth && !fileNameElementWidth) {
|
|
27
29
|
return null;
|
|
@@ -38,7 +40,7 @@ var getTruncatedName = function getTruncatedName(fileNameWidth, fileNameElementW
|
|
|
38
40
|
};
|
|
39
41
|
|
|
40
42
|
var FileUploaderFile = function FileUploaderFile(props) {var _cx, _cx2;
|
|
41
|
-
var file = props.file,showSize = props.showSize;
|
|
43
|
+
var file = props.file,showSize = props.showSize,error = props.error;
|
|
42
44
|
var id = file.id,originalFile = file.originalFile,status = file.status,validationResult = file.validationResult;
|
|
43
45
|
var name = originalFile.name,size = originalFile.size;
|
|
44
46
|
|
|
@@ -78,6 +80,8 @@ var FileUploaderFile = function FileUploaderFile(props) {var _cx, _cx2;
|
|
|
78
80
|
|
|
79
81
|
var isValid = validationResult.isValid,message = validationResult.message;
|
|
80
82
|
|
|
83
|
+
var isInvalid = error || !isValid;
|
|
84
|
+
|
|
81
85
|
var icon = (0, _react.useMemo)(function () {
|
|
82
86
|
var deleteIcon = /*#__PURE__*/_react.default.createElement(_px.DeleteIcon, { className: _FileUploaderFile.jsStyles.deleteIcon(theme) });
|
|
83
87
|
|
|
@@ -85,25 +89,26 @@ var FileUploaderFile = function FileUploaderFile(props) {var _cx, _cx2;
|
|
|
85
89
|
return deleteIcon;
|
|
86
90
|
}
|
|
87
91
|
|
|
92
|
+
if (isInvalid) {
|
|
93
|
+
return /*#__PURE__*/_react.default.createElement(_px.ErrorIcon, null);
|
|
94
|
+
}
|
|
95
|
+
|
|
88
96
|
switch (status) {
|
|
89
97
|
case _fileUtils.FileUploaderFileStatus.Loading:
|
|
90
98
|
return /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, { type: "mini", dimmed: true, caption: "" });
|
|
91
99
|
case _fileUtils.FileUploaderFileStatus.Uploaded:
|
|
92
100
|
return /*#__PURE__*/_react.default.createElement(_px.OkIcon, { color: theme.fileUploaderIconColor });
|
|
93
101
|
default:
|
|
94
|
-
if (!isValid) {
|
|
95
|
-
return /*#__PURE__*/_react.default.createElement(_px.ErrorIcon, null);
|
|
96
|
-
}
|
|
97
102
|
return deleteIcon;}
|
|
98
103
|
|
|
99
|
-
}, [hovered, status,
|
|
104
|
+
}, [hovered, status, isInvalid, theme, focusedByTab]);
|
|
100
105
|
|
|
101
106
|
var renderTooltipContent = (0, _react.useCallback)(function () {
|
|
102
|
-
return isValid ?
|
|
103
|
-
}, [isValid, message]);
|
|
107
|
+
return !isValid && !error && message ? message : null;
|
|
108
|
+
}, [isValid, error, message]);
|
|
104
109
|
|
|
105
110
|
var contentClassNames = (0, _Emotion.cx)(_FileUploaderFile.jsStyles.content(), (_cx = {}, _cx[
|
|
106
|
-
_FileUploaderFile.jsStyles.error(theme)] =
|
|
111
|
+
_FileUploaderFile.jsStyles.error(theme)] = isInvalid, _cx));
|
|
107
112
|
|
|
108
113
|
|
|
109
114
|
var handleMouseEnter = (0, _react.useCallback)(function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["FileUploaderFile.tsx"],"names":["getTruncatedName","fileNameWidth","fileNameElementWidth","name","charWidth","Math","ceil","length","maxCharsCountInSpan","FileUploaderFile","props","file","showSize","id","originalFile","status","validationResult","size","hovered","setHovered","focusedByTab","setFocusedByTab","truncatedFileName","setTruncatedFileName","textHelperRef","fileNameElementRef","FileUploaderControlContext","removeFile","theme","ThemeContext","formattedSize","current","getTextWidth","getBoundingClientRect","width","truncatedName","removeUploadFile","handleRemove","event","preventDefault","stopPropagation","isValid","message","icon","deleteIcon","jsStyles","FileUploaderFileStatus","Loading","Uploaded","fileUploaderIconColor","renderTooltipContent","contentClassNames","content","error","handleMouseEnter","handleMouseLeave","handleFocus","requestAnimationFrame","keyListener","isTabPressed","handleBlur","handleIconKeyDown","e","iconClassNames","focusedIcon","isTruncated","root","displayName"],"mappings":"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","sourcesContent":["import React, { ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { FileUploaderAttachedFile, FileUploaderFileStatus } from '../fileUtils';\nimport { formatBytes } from '../../../lib/utils';\nimport { TextWidthHelper } from '../../../internal/TextWidthHelper/TextWidthHelper';\nimport { truncate } from '../../../lib/stringUtils';\nimport { Spinner } from '../../../components/Spinner';\nimport { FileUploaderControlContext } from '../FileUploaderControlContext';\nimport { Tooltip } from '../../../components/Tooltip';\nimport { cx } from '../../../lib/theming/Emotion';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\nimport { DeleteIcon, ErrorIcon, OkIcon } from '../../icons/16px';\nimport { keyListener } from '../../../lib/events/keyListener';\nimport { isKeyEnter } from '../../../lib/events/keyboard/identifiers';\nimport { Nullable } from '../../../typings/utility-types';\nimport { Hint } from '../../../components/Hint';\n\nimport { jsStyles } from './FileUploaderFile.styles';\n\ninterface FileUploaderFileProps {\n file: FileUploaderAttachedFile;\n showSize?: boolean;\n}\n\nconst getTruncatedName = (fileNameWidth: number, fileNameElementWidth: number, name: string) => {\n if (!fileNameWidth && !fileNameElementWidth) {\n return null;\n }\n\n if (fileNameWidth <= fileNameElementWidth) {\n return name;\n }\n\n const charWidth = Math.ceil(fileNameWidth / name.length);\n const maxCharsCountInSpan = Math.ceil(fileNameElementWidth / charWidth);\n\n return truncate(name, maxCharsCountInSpan);\n};\n\nexport const FileUploaderFile = (props: FileUploaderFileProps) => {\n const { file, showSize } = props;\n const { id, originalFile, status, validationResult } = file;\n const { name, size } = originalFile;\n\n const [hovered, setHovered] = useState<boolean>(false);\n const [focusedByTab, setFocusedByTab] = useState(false);\n const [truncatedFileName, setTruncatedFileName] = useState<Nullable<string>>(null);\n\n const textHelperRef = useRef<TextWidthHelper>(null);\n const fileNameElementRef = useRef<HTMLSpanElement>(null);\n\n const { removeFile } = useContext(FileUploaderControlContext);\n const theme = useContext(ThemeContext);\n\n const formattedSize = useMemo(() => formatBytes(size, 1), [size]);\n\n // важно запустить после рендера, чтобы успели проставиться рефы\n useEffect(() => {\n const fileNameWidth = textHelperRef.current?.getTextWidth() || 0;\n const fileNameElementWidth = fileNameElementRef.current?.getBoundingClientRect().width || 0;\n const truncatedName = getTruncatedName(fileNameWidth, fileNameElementWidth, name);\n\n setTruncatedFileName(truncatedName);\n }, [name]);\n\n const removeUploadFile = useCallback(() => {\n removeFile(id);\n }, [removeFile, id]);\n\n const handleRemove = useCallback(\n (event: React.MouseEvent<HTMLElement>) => {\n event.preventDefault();\n event.stopPropagation();\n removeUploadFile();\n },\n [removeUploadFile],\n );\n\n const { isValid, message } = validationResult;\n\n const icon: ReactNode = useMemo(() => {\n const deleteIcon = <DeleteIcon className={jsStyles.deleteIcon(theme)} />;\n\n if (hovered || focusedByTab) {\n return deleteIcon;\n }\n\n switch (status) {\n case FileUploaderFileStatus.Loading:\n return <Spinner type=\"mini\" dimmed caption=\"\" />;\n case FileUploaderFileStatus.Uploaded:\n return <OkIcon color={theme.fileUploaderIconColor} />;\n default:\n if (!isValid) {\n return <ErrorIcon />;\n }\n return deleteIcon;\n }\n }, [hovered, status, isValid, theme, focusedByTab]);\n\n const renderTooltipContent = useCallback((): ReactNode => {\n return isValid ? null : message;\n }, [isValid, message]);\n\n const contentClassNames = cx(jsStyles.content(), {\n [jsStyles.error(theme)]: !isValid,\n });\n\n const handleMouseEnter = useCallback(() => {\n setHovered(true);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setHovered(false);\n }, []);\n\n const handleFocus = useCallback(() => {\n // focus event fires before keyDown eventlistener\n // so we should check tabPressed in async way\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed) {\n setFocusedByTab(true);\n }\n });\n }, []);\n\n const handleBlur = useCallback(() => {\n setFocusedByTab(false);\n }, []);\n\n const handleIconKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLElement>) => {\n if (isKeyEnter(e)) {\n removeUploadFile();\n }\n },\n [removeUploadFile],\n );\n\n const iconClassNames = cx(jsStyles.icon(theme), {\n [jsStyles.focusedIcon(theme)]: focusedByTab,\n });\n\n const isTruncated = truncatedFileName !== name;\n\n return (\n <div\n data-tid=\"FileUploader__file\"\n className={jsStyles.root()}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n <Tooltip data-tid=\"FileUploader__fileTooltip\" pos=\"right middle\" render={renderTooltipContent}>\n <div className={contentClassNames}>\n <TextWidthHelper ref={textHelperRef} text={name} />\n <Hint maxWidth={'100%'} text={isTruncated ? name : null}>\n <span data-tid=\"FileUploader__fileName\" ref={fileNameElementRef} className={jsStyles.name()}>\n {truncatedFileName}\n </span>\n </Hint>\n {!!showSize && formattedSize && (\n <span data-tid=\"FileUploader__fileSize\" className={jsStyles.size()}>\n {formattedSize}\n </span>\n )}\n <div\n className={iconClassNames}\n data-tid=\"FileUploader__fileIcon\"\n tabIndex={0}\n onClick={handleRemove}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleIconKeyDown}\n >\n {icon}\n </div>\n </div>\n </Tooltip>\n </div>\n );\n};\n\nFileUploaderFile.displayName = 'FileUploaderFile';\n"]}
|
|
1
|
+
{"version":3,"sources":["FileUploaderFile.tsx"],"names":["getTruncatedName","fileNameWidth","fileNameElementWidth","name","charWidth","Math","ceil","length","maxCharsCountInSpan","FileUploaderFile","props","file","showSize","error","id","originalFile","status","validationResult","size","hovered","setHovered","focusedByTab","setFocusedByTab","truncatedFileName","setTruncatedFileName","textHelperRef","fileNameElementRef","FileUploaderControlContext","removeFile","theme","ThemeContext","formattedSize","current","getTextWidth","getBoundingClientRect","width","truncatedName","removeUploadFile","handleRemove","event","preventDefault","stopPropagation","isValid","message","isInvalid","icon","deleteIcon","jsStyles","FileUploaderFileStatus","Loading","Uploaded","fileUploaderIconColor","renderTooltipContent","contentClassNames","content","handleMouseEnter","handleMouseLeave","handleFocus","requestAnimationFrame","keyListener","isTabPressed","handleBlur","handleIconKeyDown","e","iconClassNames","focusedIcon","isTruncated","root","displayName"],"mappings":"yEAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA,6D;;;;;;;;;AASA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,aAAD,EAAwBC,oBAAxB,EAAsDC,IAAtD,EAAuE;AAC9F,MAAI,CAACF,aAAD,IAAkB,CAACC,oBAAvB,EAA6C;AAC3C,WAAO,IAAP;AACD;;AAED,MAAID,aAAa,IAAIC,oBAArB,EAA2C;AACzC,WAAOC,IAAP;AACD;;AAED,MAAMC,SAAS,GAAGC,IAAI,CAACC,IAAL,CAAUL,aAAa,GAAGE,IAAI,CAACI,MAA/B,CAAlB;AACA,MAAMC,mBAAmB,GAAGH,IAAI,CAACC,IAAL,CAAUJ,oBAAoB,GAAGE,SAAjC,CAA5B;;AAEA,SAAO,2BAASD,IAAT,EAAeK,mBAAf,CAAP;AACD,CAbD;;AAeO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD,EAAkC;AAChE,MAAQC,IAAR,GAAkCD,KAAlC,CAAQC,IAAR,CAAcC,QAAd,GAAkCF,KAAlC,CAAcE,QAAd,CAAwBC,KAAxB,GAAkCH,KAAlC,CAAwBG,KAAxB;AACA,MAAQC,EAAR,GAAuDH,IAAvD,CAAQG,EAAR,CAAYC,YAAZ,GAAuDJ,IAAvD,CAAYI,YAAZ,CAA0BC,MAA1B,GAAuDL,IAAvD,CAA0BK,MAA1B,CAAkCC,gBAAlC,GAAuDN,IAAvD,CAAkCM,gBAAlC;AACA,MAAQd,IAAR,GAAuBY,YAAvB,CAAQZ,IAAR,CAAce,IAAd,GAAuBH,YAAvB,CAAcG,IAAd;;AAEA,kBAA8B,qBAAkB,KAAlB,CAA9B,CAAOC,OAAP,gBAAgBC,UAAhB;AACA,mBAAwC,qBAAS,KAAT,CAAxC,CAAOC,YAAP,iBAAqBC,eAArB;AACA,mBAAkD,qBAA2B,IAA3B,CAAlD,CAAOC,iBAAP,iBAA0BC,oBAA1B;;AAEA,MAAMC,aAAa,GAAG,mBAAwB,IAAxB,CAAtB;AACA,MAAMC,kBAAkB,GAAG,mBAAwB,IAAxB,CAA3B;;AAEA,oBAAuB,uBAAWC,sDAAX,CAAvB,CAAQC,UAAR,eAAQA,UAAR;AACA,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;;AAEA,MAAMC,aAAa,GAAG,oBAAQ,oBAAM,wBAAYb,IAAZ,EAAkB,CAAlB,CAAN,EAAR,EAAoC,CAACA,IAAD,CAApC,CAAtB;;AAEA;AACA,wBAAU,YAAM;AACd,QAAMjB,aAAa,GAAG,0BAAAwB,aAAa,CAACO,OAAd,2CAAuBC,YAAvB,OAAyC,CAA/D;AACA,QAAM/B,oBAAoB,GAAG,0BAAAwB,kBAAkB,CAACM,OAAnB,2CAA4BE,qBAA5B,GAAoDC,KAApD,KAA6D,CAA1F;AACA,QAAMC,aAAa,GAAGpC,gBAAgB,CAACC,aAAD,EAAgBC,oBAAhB,EAAsCC,IAAtC,CAAtC;;AAEAqB,IAAAA,oBAAoB,CAACY,aAAD,CAApB;AACD,GAND,EAMG,CAACjC,IAAD,CANH;;AAQA,MAAMkC,gBAAgB,GAAG,wBAAY,YAAM;AACzCT,IAAAA,UAAU,CAACd,EAAD,CAAV;AACD,GAFwB,EAEtB,CAACc,UAAD,EAAad,EAAb,CAFsB,CAAzB;;AAIA,MAAMwB,YAAY,GAAG;AACnB,YAACC,KAAD,EAA0C;AACxCA,IAAAA,KAAK,CAACC,cAAN;AACAD,IAAAA,KAAK,CAACE,eAAN;AACAJ,IAAAA,gBAAgB;AACjB,GALkB;AAMnB,GAACA,gBAAD,CANmB,CAArB;;;AASA,MAAQK,OAAR,GAA6BzB,gBAA7B,CAAQyB,OAAR,CAAiBC,OAAjB,GAA6B1B,gBAA7B,CAAiB0B,OAAjB;;AAEA,MAAMC,SAAS,GAAG/B,KAAK,IAAI,CAAC6B,OAA5B;;AAEA,MAAMG,IAAe,GAAG,oBAAQ,YAAM;AACpC,QAAMC,UAAU,gBAAG,6BAAC,cAAD,IAAY,SAAS,EAAEC,2BAASD,UAAT,CAAoBjB,KAApB,CAAvB,GAAnB;;AAEA,QAAIV,OAAO,IAAIE,YAAf,EAA6B;AAC3B,aAAOyB,UAAP;AACD;;AAED,QAAIF,SAAJ,EAAe;AACb,0BAAO,6BAAC,aAAD,OAAP;AACD;;AAED,YAAQ5B,MAAR;AACE,WAAKgC,kCAAuBC,OAA5B;AACE,4BAAO,6BAAC,gBAAD,IAAS,IAAI,EAAC,MAAd,EAAqB,MAAM,MAA3B,EAA4B,OAAO,EAAC,EAApC,GAAP;AACF,WAAKD,kCAAuBE,QAA5B;AACE,4BAAO,6BAAC,UAAD,IAAQ,KAAK,EAAErB,KAAK,CAACsB,qBAArB,GAAP;AACF;AACE,eAAOL,UAAP,CANJ;;AAQD,GAnBuB,EAmBrB,CAAC3B,OAAD,EAAUH,MAAV,EAAkB4B,SAAlB,EAA6Bf,KAA7B,EAAoCR,YAApC,CAnBqB,CAAxB;;AAqBA,MAAM+B,oBAAoB,GAAG,wBAAY,YAAiB;AACxD,WAAO,CAACV,OAAD,IAAY,CAAC7B,KAAb,IAAsB8B,OAAtB,GAAgCA,OAAhC,GAA0C,IAAjD;AACD,GAF4B,EAE1B,CAACD,OAAD,EAAU7B,KAAV,EAAiB8B,OAAjB,CAF0B,CAA7B;;AAIA,MAAMU,iBAAiB,GAAG,iBAAGN,2BAASO,OAAT,EAAH;AACvBP,6BAASlC,KAAT,CAAegB,KAAf,CADuB,IACCe,SADD,OAA1B;;;AAIA,MAAMW,gBAAgB,GAAG,wBAAY,YAAM;AACzCnC,IAAAA,UAAU,CAAC,IAAD,CAAV;AACD,GAFwB,EAEtB,EAFsB,CAAzB;;AAIA,MAAMoC,gBAAgB,GAAG,wBAAY,YAAM;AACzCpC,IAAAA,UAAU,CAAC,KAAD,CAAV;AACD,GAFwB,EAEtB,EAFsB,CAAzB;;AAIA,MAAMqC,WAAW,GAAG,wBAAY,YAAM;AACpC;AACA;AACAC,IAAAA,qBAAqB,CAAC,YAAM;AAC1B,UAAIC,yBAAYC,YAAhB,EAA8B;AAC5BtC,QAAAA,eAAe,CAAC,IAAD,CAAf;AACD;AACF,KAJoB,CAArB;AAKD,GARmB,EAQjB,EARiB,CAApB;;AAUA,MAAMuC,UAAU,GAAG,wBAAY,YAAM;AACnCvC,IAAAA,eAAe,CAAC,KAAD,CAAf;AACD,GAFkB,EAEhB,EAFgB,CAAnB;;AAIA,MAAMwC,iBAAiB,GAAG;AACxB,YAACC,CAAD,EAAyC;AACvC,QAAI,6BAAWA,CAAX,CAAJ,EAAmB;AACjB1B,MAAAA,gBAAgB;AACjB;AACF,GALuB;AAMxB,GAACA,gBAAD,CANwB,CAA1B;;;AASA,MAAM2B,cAAc,GAAG,iBAAGjB,2BAASF,IAAT,CAAchB,KAAd,CAAH;AACpBkB,6BAASkB,WAAT,CAAqBpC,KAArB,CADoB,IACUR,YADV,QAAvB;;;AAIA,MAAM6C,WAAW,GAAG3C,iBAAiB,KAAKpB,IAA1C;;AAEA;AACE;AACE,kBAAS,oBADX;AAEE,MAAA,SAAS,EAAE4C,2BAASoB,IAAT,EAFb;AAGE,MAAA,YAAY,EAAEZ,gBAHhB;AAIE,MAAA,YAAY,EAAEC,gBAJhB;;AAME,iCAAC,gBAAD,IAAS,YAAS,2BAAlB,EAA8C,GAAG,EAAC,cAAlD,EAAiE,MAAM,EAAEJ,oBAAzE;AACE,0CAAK,SAAS,EAAEC,iBAAhB;AACE,iCAAC,gCAAD,IAAiB,GAAG,EAAE5B,aAAtB,EAAqC,IAAI,EAAEtB,IAA3C,GADF;AAEE,iCAAC,UAAD,IAAM,QAAQ,EAAE,MAAhB,EAAwB,IAAI,EAAE+D,WAAW,GAAG/D,IAAH,GAAU,IAAnD;AACE,2CAAM,YAAS,wBAAf,EAAwC,GAAG,EAAEuB,kBAA7C,EAAiE,SAAS,EAAEqB,2BAAS5C,IAAT,EAA5E;AACGoB,IAAAA,iBADH,CADF,CAFF;;;AAOG,KAAC,CAACX,QAAF,IAAcmB,aAAd;AACC,2CAAM,YAAS,wBAAf,EAAwC,SAAS,EAAEgB,2BAAS7B,IAAT,EAAnD;AACGa,IAAAA,aADH,CARJ;;;AAYE;AACE,MAAA,SAAS,EAAEiC,cADb;AAEE,kBAAS,wBAFX;AAGE,MAAA,QAAQ,EAAE,CAHZ;AAIE,MAAA,OAAO,EAAE1B,YAJX;AAKE,MAAA,OAAO,EAAEmB,WALX;AAME,MAAA,MAAM,EAAEI,UANV;AAOE,MAAA,SAAS,EAAEC,iBAPb;;AASGjB,IAAAA,IATH,CAZF,CADF,CANF,CADF;;;;;;AAmCD,CAhJM,C;;AAkJPpC,gBAAgB,CAAC2D,WAAjB,GAA+B,kBAA/B","sourcesContent":["import React, { ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { FileUploaderAttachedFile, FileUploaderFileStatus } from '../fileUtils';\nimport { formatBytes } from '../../../lib/utils';\nimport { TextWidthHelper } from '../../../internal/TextWidthHelper/TextWidthHelper';\nimport { truncate } from '../../../lib/stringUtils';\nimport { Spinner } from '../../../components/Spinner';\nimport { FileUploaderControlContext } from '../FileUploaderControlContext';\nimport { cx } from '../../../lib/theming/Emotion';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\nimport { DeleteIcon, ErrorIcon, OkIcon } from '../../icons/16px';\nimport { keyListener } from '../../../lib/events/keyListener';\nimport { isKeyEnter } from '../../../lib/events/keyboard/identifiers';\nimport { Nullable } from '../../../typings/utility-types';\nimport { Hint } from '../../../components/Hint';\nimport { Tooltip } from '../../../components/Tooltip';\n\nimport { jsStyles } from './FileUploaderFile.styles';\n\ninterface FileUploaderFileProps {\n file: FileUploaderAttachedFile;\n showSize?: boolean;\n /** Состояние ошибки контрола файла */\n error?: boolean;\n}\n\nconst getTruncatedName = (fileNameWidth: number, fileNameElementWidth: number, name: string) => {\n if (!fileNameWidth && !fileNameElementWidth) {\n return null;\n }\n\n if (fileNameWidth <= fileNameElementWidth) {\n return name;\n }\n\n const charWidth = Math.ceil(fileNameWidth / name.length);\n const maxCharsCountInSpan = Math.ceil(fileNameElementWidth / charWidth);\n\n return truncate(name, maxCharsCountInSpan);\n};\n\nexport const FileUploaderFile = (props: FileUploaderFileProps) => {\n const { file, showSize, error } = props;\n const { id, originalFile, status, validationResult } = file;\n const { name, size } = originalFile;\n\n const [hovered, setHovered] = useState<boolean>(false);\n const [focusedByTab, setFocusedByTab] = useState(false);\n const [truncatedFileName, setTruncatedFileName] = useState<Nullable<string>>(null);\n\n const textHelperRef = useRef<TextWidthHelper>(null);\n const fileNameElementRef = useRef<HTMLSpanElement>(null);\n\n const { removeFile } = useContext(FileUploaderControlContext);\n const theme = useContext(ThemeContext);\n\n const formattedSize = useMemo(() => formatBytes(size, 1), [size]);\n\n // важно запустить после рендера, чтобы успели проставиться рефы\n useEffect(() => {\n const fileNameWidth = textHelperRef.current?.getTextWidth() || 0;\n const fileNameElementWidth = fileNameElementRef.current?.getBoundingClientRect().width || 0;\n const truncatedName = getTruncatedName(fileNameWidth, fileNameElementWidth, name);\n\n setTruncatedFileName(truncatedName);\n }, [name]);\n\n const removeUploadFile = useCallback(() => {\n removeFile(id);\n }, [removeFile, id]);\n\n const handleRemove = useCallback(\n (event: React.MouseEvent<HTMLElement>) => {\n event.preventDefault();\n event.stopPropagation();\n removeUploadFile();\n },\n [removeUploadFile],\n );\n\n const { isValid, message } = validationResult;\n\n const isInvalid = error || !isValid;\n\n const icon: ReactNode = useMemo(() => {\n const deleteIcon = <DeleteIcon className={jsStyles.deleteIcon(theme)} />;\n\n if (hovered || focusedByTab) {\n return deleteIcon;\n }\n\n if (isInvalid) {\n return <ErrorIcon />;\n }\n\n switch (status) {\n case FileUploaderFileStatus.Loading:\n return <Spinner type=\"mini\" dimmed caption=\"\" />;\n case FileUploaderFileStatus.Uploaded:\n return <OkIcon color={theme.fileUploaderIconColor} />;\n default:\n return deleteIcon;\n }\n }, [hovered, status, isInvalid, theme, focusedByTab]);\n\n const renderTooltipContent = useCallback((): ReactNode => {\n return !isValid && !error && message ? message : null;\n }, [isValid, error, message]);\n\n const contentClassNames = cx(jsStyles.content(), {\n [jsStyles.error(theme)]: isInvalid,\n });\n\n const handleMouseEnter = useCallback(() => {\n setHovered(true);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setHovered(false);\n }, []);\n\n const handleFocus = useCallback(() => {\n // focus event fires before keyDown eventlistener\n // so we should check tabPressed in async way\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed) {\n setFocusedByTab(true);\n }\n });\n }, []);\n\n const handleBlur = useCallback(() => {\n setFocusedByTab(false);\n }, []);\n\n const handleIconKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLElement>) => {\n if (isKeyEnter(e)) {\n removeUploadFile();\n }\n },\n [removeUploadFile],\n );\n\n const iconClassNames = cx(jsStyles.icon(theme), {\n [jsStyles.focusedIcon(theme)]: focusedByTab,\n });\n\n const isTruncated = truncatedFileName !== name;\n\n return (\n <div\n data-tid=\"FileUploader__file\"\n className={jsStyles.root()}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n <Tooltip data-tid=\"FileUploader__fileTooltip\" pos=\"right middle\" render={renderTooltipContent}>\n <div className={contentClassNames}>\n <TextWidthHelper ref={textHelperRef} text={name} />\n <Hint maxWidth={'100%'} text={isTruncated ? name : null}>\n <span data-tid=\"FileUploader__fileName\" ref={fileNameElementRef} className={jsStyles.name()}>\n {truncatedFileName}\n </span>\n </Hint>\n {!!showSize && formattedSize && (\n <span data-tid=\"FileUploader__fileSize\" className={jsStyles.size()}>\n {formattedSize}\n </span>\n )}\n <div\n className={iconClassNames}\n data-tid=\"FileUploader__fileIcon\"\n tabIndex={0}\n onClick={handleRemove}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleIconKeyDown}\n >\n {icon}\n </div>\n </div>\n </Tooltip>\n </div>\n );\n};\n\nFileUploaderFile.displayName = 'FileUploaderFile';\n"]}
|
|
@@ -1,4 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { FileUploaderAttachedFile } from '../fileUtils';
|
|
3
|
+
interface FileUploaderFileListProps {
|
|
4
|
+
renderFile: (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => React.ReactNode;
|
|
5
|
+
}
|
|
1
6
|
export declare const FileUploaderFileList: {
|
|
2
|
-
(): JSX.Element;
|
|
7
|
+
(props: FileUploaderFileListProps): JSX.Element;
|
|
3
8
|
displayName: string;
|
|
4
9
|
};
|
|
10
|
+
export {};
|
|
@@ -4,9 +4,15 @@ var _FileUploaderControlContext = require("../FileUploaderControlContext");
|
|
|
4
4
|
var _ThemeContext = require("../../../lib/theming/ThemeContext");
|
|
5
5
|
var _FileUploaderFile = require("../FileUploaderFile/FileUploaderFile");
|
|
6
6
|
|
|
7
|
+
|
|
7
8
|
var _FileUploaderFileList = require("./FileUploaderFileList.styles");function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
|
|
8
9
|
|
|
9
|
-
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
var FileUploaderFileList = function FileUploaderFileList(props) {
|
|
15
|
+
var renderFile = props.renderFile;
|
|
10
16
|
var _useContext = (0, _react.useContext)(_FileUploaderControlContext.FileUploaderControlContext),files = _useContext.files;
|
|
11
17
|
var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
|
|
12
18
|
|
|
@@ -14,7 +20,7 @@ var FileUploaderFileList = function FileUploaderFileList() {
|
|
|
14
20
|
_react.default.createElement("div", { "data-tid": "FileUploader__fileList" },
|
|
15
21
|
files.map(function (file) {return /*#__PURE__*/(
|
|
16
22
|
_react.default.createElement("div", { key: file.id, className: _FileUploaderFileList.jsStyles.fileWrapper(theme) }, /*#__PURE__*/
|
|
17
|
-
_react.default.createElement(_FileUploaderFile.FileUploaderFile, { file: file, showSize: true })));})));
|
|
23
|
+
_react.default.createElement("div", { className: _FileUploaderFileList.jsStyles.file() }, renderFile(file, /*#__PURE__*/_react.default.createElement(_FileUploaderFile.FileUploaderFile, { file: file, showSize: true })))));})));
|
|
18
24
|
|
|
19
25
|
|
|
20
26
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["FileUploaderFileList.tsx"],"names":["FileUploaderFileList","FileUploaderControlContext","files","theme","ThemeContext","map","file","id","jsStyles","fileWrapper","displayName"],"mappings":"6EAAA;;AAEA;AACA;AACA
|
|
1
|
+
{"version":3,"sources":["FileUploaderFileList.tsx"],"names":["FileUploaderFileList","props","renderFile","FileUploaderControlContext","files","theme","ThemeContext","map","file","id","jsStyles","fileWrapper","displayName"],"mappings":"6EAAA;;AAEA;AACA;AACA;;;AAGA,qE;;;;;;AAMO,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,KAAD,EAAsC;AACxE,MAAQC,UAAR,GAAuBD,KAAvB,CAAQC,UAAR;AACA,oBAAkB,uBAAWC,sDAAX,CAAlB,CAAQC,KAAR,eAAQA,KAAR;AACA,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;;AAEA;AACE,0CAAK,YAAS,wBAAd;AACGF,IAAAA,KAAK,CAACG,GAAN,CAAU,UAACC,IAAD;AACT,8CAAK,GAAG,EAAEA,IAAI,CAACC,EAAf,EAAmB,SAAS,EAAEC,+BAASC,WAAT,CAAqBN,KAArB,CAA9B;AACE,8CAAK,SAAS,EAAEK,+BAASF,IAAT,EAAhB,IAAkCN,UAAU,CAACM,IAAD,eAAO,6BAAC,kCAAD,IAAkB,IAAI,EAAEA,IAAxB,EAA8B,QAAQ,MAAtC,GAAP,CAA5C,CADF,CADS,GAAV,CADH,CADF;;;;;AASD,CAdM,C;;AAgBPR,oBAAoB,CAACY,WAArB,GAAmC,sBAAnC","sourcesContent":["import React, { useContext } from 'react';\n\nimport { FileUploaderControlContext } from '../FileUploaderControlContext';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\nimport { FileUploaderFile } from '../FileUploaderFile/FileUploaderFile';\nimport { FileUploaderAttachedFile } from '../fileUtils';\n\nimport { jsStyles } from './FileUploaderFileList.styles';\n\ninterface FileUploaderFileListProps {\n renderFile: (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => React.ReactNode;\n}\n\nexport const FileUploaderFileList = (props: FileUploaderFileListProps) => {\n const { renderFile } = props;\n const { files } = useContext(FileUploaderControlContext);\n const theme = useContext(ThemeContext);\n\n return (\n <div data-tid=\"FileUploader__fileList\">\n {files.map((file) => (\n <div key={file.id} className={jsStyles.fileWrapper(theme)}>\n <div className={jsStyles.file()}>{renderFile(file, <FileUploaderFile file={file} showSize />)}</div>\n </div>\n ))}\n </div>\n );\n};\n\nFileUploaderFileList.displayName = 'FileUploaderFileList';\n"]}
|
package/cjs/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.styles.js
CHANGED
|
@@ -1,9 +1,14 @@
|
|
|
1
|
-
"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../../lib/theming/Emotion");var _templateObject;
|
|
1
|
+
"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../../lib/theming/Emotion");var _templateObject, _templateObject2;
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
var styles = {
|
|
5
|
+
file: function file() {
|
|
6
|
+
return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n width: 100%;\n "])));
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
},
|
|
5
10
|
fileWrapper: function fileWrapper(t) {
|
|
6
|
-
return (0, _Emotion.css)(
|
|
11
|
+
return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n width: 100%;\n height: 32px;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n padding: ", " ", ";\n "])),
|
|
7
12
|
|
|
8
13
|
|
|
9
14
|
|