@king-design/react 2.0.0-beta.0

package/components/upload/index.vdt.js

@@ -0,0 +1,182 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, noop as _$no, createUnknownComponentVNode as _$cc, createElementVNode as _$ce, className as _$cn, map as _$ma } from 'intact-react';
+import { Button } from '../button';
+import { Progress } from '../progress';
+import { Dialog } from '../dialog';
+import { expandAnimationCallbacks, getRestProps } from '../utils';
+import { makeStyles, makeUploadDialogStyles } from './styles';
+import { TransitionGroup, Transition, linkEvent } from 'intact';
+import { _$ } from '../../i18n';
+import { Icon } from '../icon';
+import { UploadFileStatus } from './useUpload';
+var _$tmp0 = {
+  'className': 'ion-upload'
+};
+var _$tmp1 = {
+  'className': 'k-upload-picture-card k-upload-add ion-ios-plus-empty'
+};
+var _$tmp2 = {
+  'className': 'k-upload-zoom ion-ios-eye-outline'
+};
+var _$tmp3 = {
+  'className': 'k-upload-file-icon ion-document'
+};
+var _$tmp4 = {
+  'className': 'k-upload-status-icon ion-ios-checkmark-outline'
+};
+var _$tmp5 = {
+  'className': 'k-upload-status-icon ion-ios-close-outline'
+};
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj, _$cn2;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+  var _$blocks = {};
+  var __$blocks = {};
+
+  var _this$get = this.get(),
+      className = _this$get.className,
+      accept = _this$get.accept,
+      multiple = _this$get.multiple,
+      limit = _this$get.limit,
+      files = _this$get.files,
+      children = _this$get.children,
+      type = _this$get.type,
+      directory = _this$get.directory;
+
+  var drag = this.drag;
+  var classNameObj = (_classNameObj = {
+    'k-upload': true
+  }, _classNameObj[className] = className, _classNameObj['k-drag'] = type === 'drag', _classNameObj['k-dragover'] = drag.dragOver.value, _classNameObj['k-gallery'] = type === 'gallery', _classNameObj[makeStyles()] = true, _classNameObj);
+  var events = {
+    'ev-click': this.selectFile
+  };
+
+  if (type === 'drag') {
+    events['ev-dragover'] = drag.stopEvent;
+    events['ev-dragenter'] = drag.onDragEnter;
+    events['ev-dragleave'] = drag.onDragLeave;
+    events['ev-drop'] = drag.onDrop;
+  }
+
+  var handle = _$cv('div', _extends({
+    'className': 'k-upload-handle'
+  }, events), (_$blocks['content'] = function ($super) {
+    return children ? (_$blocks['children'] = function ($super) {
+      return children;
+    }, __$blocks['children'] = function ($super, data) {
+      var block = $blocks['children'];
+
+      var callBlock = function callBlock() {
+        return _$blocks['children'].call($this, $super, data);
+      };
+
+      return block ? block.call($this, callBlock, data) : callBlock();
+    }, __$blocks['children'](_$no)) : type !== 'gallery' ? type === 'select' ? _$cc(Button, {
+      'type': 'primary',
+      'children': _$('点击上传')
+    }) : _$ce(2, 'div', [_$cc(Icon, _$tmp0), _$ce(2, 'div', _$('将文件拖到此处，或点击上传'), 0)], 4, 'k-upload-area') : _$cc(Icon, _$tmp1);
+  }, __$blocks['content'] = function ($super, data) {
+    var block = $blocks['content'];
+
+    var callBlock = function callBlock() {
+      return _$blocks['content'].call($this, $super, data);
+    };
+
+    return block ? block.call($this, callBlock, data) : callBlock();
+  }, __$blocks['content'](_$no)));
+
+  var removeFile = this.files.removeFile;
+
+  var closeBtn = function closeBtn(value, index, icon) {
+    return _$cc(Button, {
+      'type': 'none',
+      'icon': true,
+      'size': 'mini',
+      'className': 'k-upload-close',
+      'ev-click': function evClick() {
+        return removeFile(value, index);
+      },
+      'children': _$cc(Icon, {
+        'className': _$cn(icon)
+      })
+    });
+  };
+
+  var _this$showImage = this.showImage,
+      show = _this$showImage.show,
+      close = _this$showImage.close,
+      image = _this$showImage.image,
+      isShow = _this$showImage.isShow;
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this)), [_$ce(64, 'input', null, 1, 'c-hidden', {
+    'type': 'file',
+    'accept': accept,
+    'ev-change': this.onInputChange,
+    'multiple': multiple,
+    'directory': directory ? '' : undefined,
+    'webkitdirectory': directory ? '' : undefined
+  }, null, this.inputRef), type === 'gallery' ? _$ce(2, 'div', _$cc(TransitionGroup, {
+    'name': 'k-dropdown',
+    'children': [_$ma(files, function ($value, $key) {
+      return _$ce(2, 'div', [_$ce(2, 'img', null, 1, 'k-upload-img', {
+        'src': $value.url
+      }), _$cc(Transition, {
+        'name': 'k-fade',
+        'children': $value.status === UploadFileStatus.Ready || $value.status === UploadFileStatus.Uploading ? _$ce(2, 'div', _$cc(Progress, {
+          'percent': $value.percent,
+          'size': 'mini',
+          'className': 'k-upload-progress'
+        }), 2, 'k-upload-overlap', null, 'overlap') : _$ce(2, 'div', _$cc(Icon, _$tmp2), 2, 'k-upload-overlap k-upload-icons', {
+          'ev-click': linkEvent($value, show)
+        })
+      }), closeBtn($value, $key, 'ion-ios-close')], 0, _$cn({
+        "k-upload-picture k-upload-picture-card": true,
+        'k-error': $value.status === UploadFileStatus.Error
+      }), null, $value.uid);
+    }, $this), !limit || files.length < limit ? _$ce(2, 'div', handle, 0, 'c-middle', null, 'handle') : undefined]
+  }), 2, 'k-upload-pictures') : handle, $blocks.tip ? _$ce(2, 'div', (_$blocks['tip'] = function ($super) {
+    return null;
+  }, __$blocks['tip'] = function ($super, data) {
+    var block = $blocks['tip'];
+
+    var callBlock = function callBlock() {
+      return _$blocks['tip'].call($this, $super, data);
+    };
+
+    return block ? block.call($this, callBlock, data) : callBlock();
+  }, __$blocks['tip'](_$no)), 0, 'k-upload-tip') : undefined, type !== 'gallery' ? _$ce(2, 'div', _$cc(TransitionGroup, _extends({}, expandAnimationCallbacks, {
+    'children': _$ma(files, function ($value, $key) {
+      return _$ce(2, 'div', [_$ce(2, 'div', [_$cc(Icon, _$tmp3), _$ce(2, 'span', $value.name, 0, 'k-upload-file-name'), closeBtn($value, $key, 'ion-ios-close-empty'), $value.status === UploadFileStatus.Done ? _$cc(Icon, _$tmp4) : $value.status === UploadFileStatus.Error ? _$cc(Icon, _$tmp5) : undefined], 0, 'k-upload-name c-ellipsis'), _$cc(Transition, _extends({}, expandAnimationCallbacks, {
+        'children': $value.status === UploadFileStatus.Ready || $value.status === UploadFileStatus.Uploading ? _$cc(Progress, {
+          'percent': $value.percent,
+          'size': 'mini',
+          'className': 'k-upload-progress'
+        }) : undefined
+      }))], 4, _$cn({
+        "k-upload-file": true,
+        'k-error': $value.status === UploadFileStatus.Error
+      }), null, $value.uid);
+    }, $this)
+  })), 2, 'k-upload-files') : undefined, _$cc(Dialog, {
+    'title': _$("查看图片"),
+    'key': 'dialog',
+    'value': isShow.value,
+    'ev-close': close,
+    'className': _$cn((_$cn2 = {
+      "k-upload-dialog": true
+    }, _$cn2[makeUploadDialogStyles()] = true, _$cn2)),
+    'children': image.value ? _$ce(2, 'a', _$ce(2, 'img', null, 1, null, {
+      'src': image.value.url
+    }), 2, null, {
+      'href': image.value.url,
+      'target': '_blank'
+    }) : undefined
+  }, 'dialog')]);
+}
+;
+
+export {normalize} from 'intact-react';

package/components/upload/styles.d.ts

@@ -0,0 +1,6 @@
+import '../../styles/global';
+export declare function makeStyles(): string;
+export declare function makeUploadDialogStyles(): string;
+
+
+export {normalize} from 'intact-react';

package/components/upload/styles.js

@@ -0,0 +1,156 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+var defaults = {
+  fontSize: '12px',
+  tip: {
+    gap: '16px',
+
+    get color() {
+      return theme.color.lightBlack;
+    }
+
+  },
+  closeFontSize: '24px',
+  // files list
+  filesGap: '16px',
+  file: {
+    margin: '4px 0',
+
+    get borderRadius() {
+      return theme.borderRadius;
+    },
+
+    get bgColor() {
+      return theme.color.bg;
+    },
+
+    padding: '0 4px',
+
+    get height() {
+      return theme.default.height;
+    },
+
+    fileIconGap: '8px',
+    status: {
+      // width: '16px',
+      get color() {
+        return theme.color.success;
+      },
+
+      gap: '8px',
+
+      get errorColor() {
+        return theme.color.danger;
+      }
+
+    },
+
+    get errorColor() {
+      return theme.color.danger;
+    }
+
+  },
+  // drag
+  drag: {
+    get color() {
+      return theme.color.lightBlack;
+    },
+
+    get border() {
+      return "1px dashed " + theme.color.border;
+    },
+
+    get borderRadius() {
+      return theme.borderRadius;
+    },
+
+    get hoverBorderColor() {
+      return theme.color.primary;
+    },
+
+    padding: "20px 0 40px 0",
+    icon: {
+      fontSize: '80px',
+
+      get color() {
+        return theme.color.placeholder;
+      }
+
+    },
+
+    get overBorderColor() {
+      return theme.color.primary;
+    }
+
+  },
+  // gallery
+  gallery: {
+    width: '100px',
+    height: '100px',
+
+    get borderRadius() {
+      return theme.borderRadius;
+    },
+
+    get border() {
+      return "1px solid " + theme.color.border;
+    },
+
+    margin: '0px 8px 8px 0',
+    padding: '8px',
+    bgColor: '#fff',
+
+    get errorBorderColor() {
+      return theme.color.danger;
+    },
+
+    close: {
+      top: '-8px',
+      right: '-8px',
+      fontSize: '18px'
+    },
+    add: {
+      get border() {
+        return "1px dashed " + theme.color.border;
+      },
+
+      fontSize: '44px',
+
+      get hoverBorderColor() {
+        return theme.color.primary;
+      }
+
+    }
+  },
+  // overlap
+  overlap: {
+    bgColor: 'rgba(0, 0, 0, .35)',
+    color: '#fff',
+    zoomFontSize: '24px'
+  }
+};
+var upload;
+setDefault(function () {
+  upload = deepDefaults(theme, {
+    upload: defaults
+  }).upload;
+});
+export function makeStyles() {
+  return /*#__PURE__*/css("font-size:", upload.fontSize, ";position:relative;.k-upload-handle,.k-upload-tip{display:inline-block;vertical-align:middle;}.k-upload-tip{margin-left:", upload.tip.gap, ";color:", upload.tip.color, ";}.k-upload-files{margin-top:", upload.filesGap, ";}.k-upload-file{margin:", upload.file.margin, ";padding:", upload.file.padding, ";border-radius:", upload.file.borderRadius, ";&:hover{background:", upload.file.bgColor, ";.k-upload-close{display:inline-flex;}}}.k-upload-name{display:flex;align-items:center;height:", upload.file.height, ";}.k-upload-file-icon{margin-right:", upload.file.fileIconGap, ";}.k-upload-file-name{flex:1;}.k-upload-status-icon{color:", upload.file.status.color, ";margin-left:", upload.file.status.gap, ";}.k-upload-close{display:none;.k-icon{font-size:", upload.closeFontSize, ";}}.k-upload-file.k-error{color:", upload.file.errorColor, ";.k-upload-status-icon{color:", upload.file.status.errorColor, ";}}.k-upload-progress{.k-progress-text{width:auto!important;}}&.k-drag{.k-upload-handle{color:", upload.drag.color, ";display:block;border:", upload.drag.border, ";border-radius:", upload.drag.borderRadius, ";cursor:pointer;text-align:center;transition:border-color ", theme.transition, ";&:hover{border-color:", upload.drag.hoverBorderColor, ";}}.k-upload-area{padding:", upload.drag.padding, ";.k-icon{font-size:", upload.drag.icon.fontSize, ";color:", upload.drag.icon.color, ";line-height:1;}}&.k-dragover{.k-upload-handle{border-color:", upload.drag.overBorderColor, ";}}}.k-upload-pictures{display:inline-block;vertical-align:middle;}.k-upload-picture{padding:", upload.gallery.padding, ";position:relative;vertical-align:middle;&.k-error{border-color:", upload.gallery.errorBorderColor, ";}&:hover{.k-upload-close{opacity:1;pointer-events:all;}}.k-upload-img{display:inline-block;width:100%;height:100%;}.k-upload-close{position:absolute;top:", upload.gallery.close.top, ";right:", upload.gallery.close.right, ";display:inline-block;opacity:0;transition:opacity ", theme.transition, ";pointer-events:none;.k-icon{font-size:", upload.gallery.close.fontSize, ";}}.k-upload-icons{opacity:0;transition:opacity ", theme.transition, ";}&:hover{.k-upload-icons{opacity:1;}}}.k-upload-picture-card{display:inline-block;width:", upload.gallery.width, ";height:", upload.gallery.height, ";border-radius:", upload.gallery.borderRadius, ";border:", upload.gallery.border, ";text-align:center;cursor:pointer;margin:", upload.gallery.margin, ";background:", upload.gallery.bgColor, ";}.k-upload-add{border:", upload.gallery.add.border, ";font-size:", upload.gallery.add.fontSize, ";line-height:calc(", upload.gallery.height, " - 2px);&:hover{border-color:", upload.gallery.add.hoverBorderColor, ";}}.k-upload-overlap{position:absolute;width:100%;height:100%;left:0;top:0;color:", upload.overlap.color, ";background:", upload.overlap.bgColor, ";.k-upload-progress{position:absolute;width:100%;top:50%;padding:", upload.gallery.padding, ";transform:translateY(-50%);}}.k-upload-zoom{display:inline-block;position:relative;top:50%;transform:translateY(-50%);font-size:", upload.overlap.zoomFontSize, ";}");
+}
+export function makeUploadDialogStyles() {
+  return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+    name: "18e4bfd",
+    styles: "img{width:100%;}"
+  } : {
+    name: "18e4bfd",
+    styles: "img{width:100%;}",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  });
+}
+
+export {normalize} from 'intact-react';

package/components/upload/useAccept.d.ts

@@ -0,0 +1,6 @@
+export declare function useAccept(): {
+    isValidType: (type: string, name: string) => boolean;
+};
+
+
+export {normalize} from 'intact-react';

package/components/upload/useAccept.js

@@ -0,0 +1,55 @@
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
+import { useInstance } from 'intact-react';
+export function useAccept() {
+  var instance = useInstance();
+  var extensions = [];
+  var mimeTypes = [];
+  var groupTypes = [];
+  instance.on('$receive:accept', parseAccept);
+
+  function parseAccept(accept) {
+    extensions = [];
+    mimeTypes = [];
+    groupTypes = [];
+
+    if (accept) {
+      accept.split(',').forEach(function (item) {
+        item = _trimInstanceProperty(item).call(item).toLowerCase();
+
+        if (item[0] === '.') {
+          extensions.push(item.substring(1));
+        } else {
+          var _item$split = item.split('/'),
+              type = _item$split[0],
+              extension = _item$split[1];
+
+          if (extension === '*') {
+            groupTypes.push(type);
+          } else {
+            mimeTypes.push(item);
+          }
+        }
+      });
+    }
+  }
+
+  function isValidType(type, name) {
+    if (_includesInstanceProperty(mimeTypes).call(mimeTypes, type)) return true;
+    var index = name.lastIndexOf('.');
+    type = type.split('/')[0];
+
+    if (index > -1) {
+      var extension = name.substring(index + 1).toLowerCase();
+      if (_includesInstanceProperty(extensions).call(extensions, extension)) return true;
+    }
+
+    return _includesInstanceProperty(groupTypes).call(groupTypes, type);
+  }
+
+  return {
+    isValidType: isValidType
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/upload/useDrag.d.ts

@@ -0,0 +1,10 @@
+export declare function useDrag(addFiles: (fileList: FileList) => void): {
+    onDragEnter: (e: Event) => void;
+    onDragLeave: (e: Event) => void;
+    onDrop: (e: DragEvent) => void;
+    stopEvent: (e: Event) => void;
+    dragOver: import("../../hooks/useState").State<boolean>;
+};
+
+
+export {normalize} from 'intact-react';

package/components/upload/useDrag.js

@@ -0,0 +1,47 @@
+import { useInstance } from 'intact-react';
+import { useState } from '../../hooks/useState';
+export function useDrag(addFiles) {
+  var instance = useInstance();
+  var dragOver = useState(false);
+  var counter = 0;
+
+  function onDragEnter(e) {
+    e.preventDefault();
+    counter++;
+    if (dragOver.value || instance.get('disabled')) return;
+    dragOver.set(true);
+  }
+
+  function onDragLeave(e) {
+    counter--;
+
+    if (!counter) {
+      dragOver.set(false);
+    }
+  }
+
+  function onDrop(e) {
+    stopEvent(e);
+    counter = 0;
+
+    if (!instance.get('disabled')) {
+      dragOver.set(false);
+      addFiles(e.dataTransfer.files);
+    }
+  }
+
+  function stopEvent(e) {
+    e.stopPropagation();
+    e.preventDefault();
+  }
+
+  return {
+    onDragEnter: onDragEnter,
+    onDragLeave: onDragLeave,
+    onDrop: onDrop,
+    stopEvent: stopEvent,
+    dragOver: dragOver
+  };
+}
+
+export {normalize} from 'intact-react';

package/components/upload/useFiles.d.ts

@@ -0,0 +1,8 @@
+import { UploadFile } from './';
+export declare function useFiles(isValidType: (type: string, name: string) => boolean, upload: (file: UploadFile) => Promise<boolean>): {
+    addFiles: (fileList: FileList) => Promise<void>;
+    removeFile: (file: UploadFile, index: number) => Promise<void>;
+};
+
+
+export {normalize} from 'intact-react';

package/components/upload/useFiles.js

@@ -0,0 +1,210 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
+import _URL from "@babel/runtime-corejs3/core-js/url";
+import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
+import { useInstance } from 'intact-react';
+import { _$ } from '../../i18n';
+import { UploadFileStatus } from './useUpload';
+var uid = 0;
+export function useFiles(isValidType, upload) {
+  var instance = useInstance();
+  initFiles();
+
+  function initFiles() {
+    var _instance$get = instance.get(),
+        files = _instance$get.files,
+        defaultFiles = _instance$get.defaultFiles;
+
+    var _files = _sliceInstanceProperty(files).call(files, 0);
+
+    if (defaultFiles) {
+      defaultFiles.forEach(function (file) {
+        _files.push({
+          status: UploadFileStatus.Done,
+          name: file.name,
+          percent: 100,
+          uid: uid++,
+          raw: file,
+          url: file.url
+        });
+      });
+      instance.set('files', _files);
+    }
+  }
+
+  function addFiles(_x) {
+    return _addFiles.apply(this, arguments);
+  }
+
+  function _addFiles() {
+    _addFiles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(fileList) {
+      var _context;
+
+      var files, newFiles, _instance$get2, maxSize, limit, autoUpload, accept, error, status, i, file, _error, _error2, obj;
+
+      return _regeneratorRuntime.wrap(function _callee$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              files = _sliceInstanceProperty(_context = instance.get('files')).call(_context, 0);
+              newFiles = _Array$from(fileList);
+              _instance$get2 = instance.get(), maxSize = _instance$get2.maxSize, limit = _instance$get2.limit, autoUpload = _instance$get2.autoUpload, accept = _instance$get2.accept;
+
+              if (!(limit && files.length + newFiles.length > limit)) {
+                _context2.next = 6;
+                break;
+              }
+
+              error = new Error(_$('超出文件数量最大限制：{limit}', {
+                limit: limit
+              }));
+              return _context2.abrupt("return", instance.trigger('error', error, newFiles, files));
+
+            case 6:
+              status = autoUpload ? UploadFileStatus.Ready : UploadFileStatus.NotReady;
+              i = 0;
+
+            case 8:
+              if (!(i < newFiles.length)) {
+                _context2.next = 30;
+                break;
+              }
+
+              file = newFiles[i];
+
+              if (!(maxSize && file.size > maxSize * 1024)) {
+                _context2.next = 14;
+                break;
+              }
+
+              _error = new Error(_$('"{name}" 超出文件最大限制：{maxSize}kb', {
+                name: file.name,
+                maxSize: maxSize
+              }));
+              instance.trigger('error', _error, file, files);
+              return _context2.abrupt("continue", 27);
+
+            case 14:
+              if (!(accept && file.type && !isValidType(file.type, file.name))) {
+                _context2.next = 18;
+                break;
+              }
+
+              _error2 = new Error(_$('"{name}" 文件类型不合法', {
+                name: file.name
+              }));
+              instance.trigger('error', _error2, file, files);
+              return _context2.abrupt("continue", 27);
+
+            case 18:
+              obj = {
+                status: status,
+                name: file.name,
+                type: file.type,
+                size: file.size,
+                percent: 0,
+                uid: uid++,
+                raw: file
+              };
+
+              if (_URL && _URL.createObjectURL) {
+                obj.url = _URL.createObjectURL(file);
+              }
+
+              _context2.t0 = !autoUpload;
+
+              if (_context2.t0) {
+                _context2.next = 25;
+                break;
+              }
+
+              _context2.next = 24;
+              return upload(obj);
+
+            case 24:
+              _context2.t0 = _context2.sent;
+
+            case 25:
+              if (!_context2.t0) {
+                _context2.next = 27;
+                break;
+              }
+
+              files.push(obj);
+
+            case 27:
+              i++;
+              _context2.next = 8;
+              break;
+
+            case 30:
+              instance.set('files', files);
+
+            case 31:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee);
+    }));
+    return _addFiles.apply(this, arguments);
+  }
+
+  function removeFile(_x2, _x3) {
+    return _removeFile.apply(this, arguments);
+  }
+
+  function _removeFile() {
+    _removeFile = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(file, index) {
+      var _context3;
+
+      var beforeRemove, files, shouldRemove;
+      return _regeneratorRuntime.wrap(function _callee2$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              beforeRemove = instance.get('beforeRemove');
+              files = _sliceInstanceProperty(_context3 = instance.get('files')).call(_context3, 0);
+              shouldRemove = true;
+
+              if (!beforeRemove) {
+                _context4.next = 7;
+                break;
+              }
+
+              _context4.next = 6;
+              return beforeRemove(file, files);
+
+            case 6:
+              shouldRemove = _context4.sent;
+
+            case 7:
+              if (shouldRemove) {
+                _spliceInstanceProperty(files).call(files, index, 1);
+
+                if (file.status === UploadFileStatus.Uploading) {
+                  file.request.abort();
+                }
+
+                instance.set('files', files);
+              }
+
+            case 8:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee2);
+    }));
+    return _removeFile.apply(this, arguments);
+  }
+
+  return {
+    addFiles: addFiles,
+    removeFile: removeFile
+  };
+}
+
+export {normalize} from 'intact-react';