@hi-ui/hiui 2.15.11 → 2.15.12

package/es/upload/upload-legacy/UploadAvatar.js

@@ -0,0 +1,318 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _modal = _interopRequireDefault(require("../../modal"));
+
+var _context = _interopRequireDefault(require("../../context"));
+
+var _Upload2 = _interopRequireDefault(require("./Upload"));
+
+var _Preview = _interopRequireDefault(require("./Preview"));
+
+var _reactCropper = _interopRequireDefault(require("react-cropper"));
+
+var _icon = _interopRequireDefault(require("../../icon"));
+
+require("cropperjs/dist/cropper.css");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var UploadAvatar =
+/*#__PURE__*/
+function (_Upload) {
+  (0, _inherits2["default"])(UploadAvatar, _Upload);
+
+  function UploadAvatar(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, UploadAvatar);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(UploadAvatar).call(this, props));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "containerWidth", 550);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "containerHeight", 500);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "filename", '');
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "img", null);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "scale", 1);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "draging", false);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dragBeginXy", {
+      x: 0,
+      y: 0
+    });
+    _this.state = Object.assign({
+      showPreviewModal: false,
+      showCropperModal: false,
+      position: {
+        top: 0,
+        left: 0
+      },
+      src: ''
+    }, _this.state);
+    _this.cropperRef = _react["default"].createRef();
+    return _this;
+  }
+
+  (0, _createClass2["default"])(UploadAvatar, [{
+    key: "uploadFiles",
+    value: function uploadFiles(files) {
+      var _this2 = this;
+
+      if (files.length === 0) return;
+      this.setState({
+        uploadState: 'loading'
+      }, function () {
+        _this2.filename = files[0].name;
+
+        _this2.showCropperModal(files[0]);
+      });
+    }
+  }, {
+    key: "showCropperModal",
+    value: function showCropperModal(file) {
+      var _this3 = this;
+
+      var fr = new window.FileReader();
+
+      fr.onload = function (e) {
+        var src = e.target.result;
+
+        _this3.setState({
+          src: src
+        }, function () {
+          _this3.setState({
+            showCropperModal: true
+          });
+        });
+      };
+
+      fr.readAsDataURL(file);
+    }
+  }, {
+    key: "base2blob",
+    value: function base2blob(dataurl, filename) {
+      var arr = dataurl.split(',');
+      var mime = arr[0].match(/:(.*?);/)[1];
+      var bstr = window.atob(arr[1]);
+      var n = bstr.length;
+      var u8arr = new Uint8Array(n);
+
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+      }
+
+      return new window.File([u8arr], filename, {
+        type: mime
+      });
+    }
+  }, {
+    key: "cancel",
+    value: function cancel() {
+      this.setState({
+        showCropperModal: false
+      });
+    }
+  }, {
+    key: "formatFile",
+    value: function formatFile(file) {
+      file.fileType = 'img';
+      return file;
+    }
+  }, {
+    key: "confirm",
+    value: function confirm() {
+      var _this4 = this;
+
+      // 裁切图片
+      var cs = this.cropperRef.current.getCroppedCanvas();
+
+      if (typeof cs === 'undefined') {
+        return;
+      }
+
+      var dataUrl = cs.toDataURL();
+      var file = this.base2blob(dataUrl, this.filename);
+      file.url = dataUrl;
+      this.formatFile(file);
+      this.setState({
+        fileList: [file],
+        showCropperModal: false
+      }, function () {
+        var _this4$props = _this4.props,
+            beforeUpload = _this4$props.beforeUpload,
+            customUpload = _this4$props.customUpload;
+
+        if (!beforeUpload(file, _this4.state.fileList)) {
+          return;
+        }
+
+        if (customUpload) {
+          customUpload(file);
+        } else {
+          _this4.uploadFile(file, false);
+        }
+      });
+    }
+  }, {
+    key: "closePreviewModal",
+    value: function closePreviewModal() {
+      this.setState({
+        showPreviewModal: false
+      });
+    }
+  }, {
+    key: "previewImage",
+    value: function previewImage() {
+      this.setState({
+        showPreviewModal: true
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this5 = this;
+
+      var _this$props = this.props,
+          disabled = _this$props.disabled,
+          accept = _this$props.accept,
+          localeDatas = _this$props.localeDatas,
+          _this$props$avatarOpt = _this$props.avatarOptions,
+          avatarOptions = _this$props$avatarOpt === void 0 ? {} : _this$props$avatarOpt;
+      var _this$state = this.state,
+          fileList = _this$state.fileList,
+          showCropperModal = _this$state.showCropperModal,
+          showPreviewModal = _this$state.showPreviewModal;
+      var _avatarOptions$aspect = avatarOptions.aspectRatio,
+          aspectRatio = _avatarOptions$aspect === void 0 ? 0 : _avatarOptions$aspect,
+          _avatarOptions$dragMo = avatarOptions.dragMode,
+          dragMode = _avatarOptions$dragMo === void 0 ? 'move' : _avatarOptions$dragMo,
+          _avatarOptions$dropBo = avatarOptions.dropBoxSize,
+          dropBoxSize = _avatarOptions$dropBo === void 0 ? [] : _avatarOptions$dropBo;
+      var file = fileList[0];
+      return _react["default"].createElement("div", {
+        className: "hi-upload-legacy hi-upload-legacy--avatar"
+      }, _react["default"].createElement("ul", {
+        className: "hi-upload-legacy__list"
+      }, !!file && (file.uploadState === 'loading' ? _react["default"].createElement("li", {
+        className: "hi-upload-legacy__item"
+      }, _react["default"].createElement("img", {
+        src: file.url,
+        className: "hi-upload-legacy__thumb"
+      }), _react["default"].createElement("div", {
+        className: "hi-upload-legacy__precent"
+      }, _react["default"].createElement("p", {
+        className: "hi-upload-legacy__loading-text"
+      }, file.progressNumber ? file.progressNumber < 100 ? file.progressNumber + '%' : localeDatas.upload.uploadSuccess : 0 + '%'), _react["default"].createElement("div", {
+        className: "hi-upload-legacy__loading-bar",
+        style: {
+          width: file.progressNumber * 1.4 + 'px'
+        }
+      }))) : _react["default"].createElement("li", {
+        className: "hi-upload-legacy__item"
+      }, _react["default"].createElement("img", {
+        src: file.url,
+        className: "hi-upload-legacy__thumb ".concat(file.uploadState === 'error' && 'error'),
+        onClick: function onClick() {
+          return _this5.previewImage(file);
+        }
+      }), _react["default"].createElement(_icon["default"], {
+        name: "close-circle",
+        className: "hi-upload-legacy__photo-del",
+        onClick: function onClick() {
+          return _this5.deleteFile(file, 0);
+        }
+      }))), !file && _react["default"].createElement("li", {
+        className: "hi-upload-legacy__item hi-upload-legacy__item--upload"
+      }, _react["default"].createElement("label", {
+        style: {
+          display: 'block'
+        }
+      }, _react["default"].createElement("input", {
+        ref: function ref(node) {
+          _this5.uploadRef = node;
+        },
+        type: "file",
+        accept: accept,
+        disabled: disabled && 'disabled',
+        onChange: function onChange(e) {
+          return _this5.uploadFiles(e.target.files);
+        },
+        hidden: true
+      }), _react["default"].createElement(_icon["default"], {
+        name: "plus"
+      })))), _react["default"].createElement(_modal["default"], {
+        show: showCropperModal,
+        onConfirm: function onConfirm() {
+          _this5.confirm();
+        },
+        onCancel: function onCancel() {
+          _this5.cancel();
+        },
+        backDrop: false
+      }, _react["default"].createElement(_reactCropper["default"], {
+        src: this.state.src,
+        ready: function ready(e) {
+          if (dropBoxSize.length > 0) {
+            _this5.cropperRef.current.setCropBoxData({
+              width: dropBoxSize[0],
+              height: dropBoxSize[1] || dropBoxSize[0]
+            });
+          }
+        },
+        aspectRatio: aspectRatio,
+        guides: false,
+        dragMode: dragMode,
+        ref: this.cropperRef,
+        crop: function crop() {},
+        style: {
+          height: 400,
+          width: '100%'
+        }
+      })), showPreviewModal && file && _react["default"].createElement(_Preview["default"], {
+        src: file.url,
+        images: [file],
+        activeIndex: 0,
+        show: showPreviewModal,
+        onClose: this.closePreviewModal.bind(this)
+      }));
+    }
+  }]);
+  return UploadAvatar;
+}(_Upload2["default"]);
+
+UploadAvatar.propTypes = Object.assign({}, _objectSpread({}, _Upload2["default"].propTypes), {
+  width: _propTypes["default"].number,
+  height: _propTypes["default"].number
+});
+UploadAvatar.defaultProps = Object.assign({}, _objectSpread({}, _Upload2["default"].defaultProps), {
+  width: 200,
+  height: 200,
+  accept: 'image/jpg,image/jpeg,image/png'
+});
+
+var _default = (0, _context["default"])(UploadAvatar);
+
+exports["default"] = _default;

package/es/upload/upload-legacy/UploadClick.js

@@ -0,0 +1,121 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _context = _interopRequireDefault(require("../../context"));
+
+var _Upload2 = _interopRequireDefault(require("./Upload"));
+
+var _icon = _interopRequireDefault(require("../../icon"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var UploadClick =
+/*#__PURE__*/
+function (_Upload) {
+  (0, _inherits2["default"])(UploadClick, _Upload);
+
+  function UploadClick() {
+    (0, _classCallCheck2["default"])(this, UploadClick);
+    return (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(UploadClick).apply(this, arguments));
+  }
+
+  (0, _createClass2["default"])(UploadClick, [{
+    key: "render",
+    value: function render() {
+      var _this = this;
+
+      var _this$props = this.props,
+          buttonText = _this$props.buttonText,
+          disabled = _this$props.disabled,
+          multiple = _this$props.multiple,
+          tips = _this$props.tips,
+          showUploadList = _this$props.showUploadList,
+          onRemove = _this$props.onRemove,
+          accept = _this$props.accept,
+          localeDatas = _this$props.localeDatas;
+      var _this$state = this.state,
+          fileList = _this$state.fileList,
+          fileCountLimted = _this$state.fileCountLimted;
+      return _react["default"].createElement("div", {
+        className: "hi-upload-legacy hi-upload-legacy--normal"
+      }, _react["default"].createElement("label", null, _react["default"].createElement("input", {
+        ref: function ref(node) {
+          _this.uploadRef = node;
+        },
+        type: "file",
+        onChange: function onChange(e) {
+          return _this.uploadFiles(e.target.files);
+        },
+        multiple: multiple && 'multiple',
+        disabled: (disabled || fileCountLimted) && 'disabled',
+        accept: accept,
+        hidden: true
+      }), _react["default"].createElement("span", {
+        className: "hi-upload-legacy__button ".concat(disabled || fileCountLimted ? 'hi-upload-legacy__button--disabled' : '')
+      }, buttonText || localeDatas.upload.buttonText)), tips && _react["default"].createElement("span", {
+        className: "hi-upload-legacy__tips hi-upload-legacy__tips--single-line"
+      }, tips), showUploadList && _react["default"].createElement("ul", {
+        className: "hi-upload-legacy__list"
+      }, fileList.map(function (file, index) {
+        var fileNameCls = (0, _classnames["default"])('hi-upload-legacy__filename', file.uploadState === 'error' && 'hi-upload-legacy__filename--error');
+        return _react["default"].createElement("li", {
+          key: index,
+          className: "hi-upload-legacy__item",
+          title: file.name
+        }, _react["default"].createElement("span", {
+          className: (0, _classnames["default"])("Ficon-".concat(file.fileType))
+        }), _react["default"].createElement("div", {
+          className: "hi-upload-legacy__right-content"
+        }, _react["default"].createElement("span", {
+          className: fileNameCls,
+          title: file.name
+        }, file.name), _react["default"].createElement("span", null, onRemove && _react["default"].createElement(_icon["default"], {
+          name: file.uploadState === 'loading' ? 'close' : 'delete',
+          onClick: function onClick() {
+            return _this.deleteFile(file, index);
+          }
+        }))), file.uploadState === 'loading' && _react["default"].createElement("div", {
+          className: "hi-upload-legacy__upstatus"
+        }, _react["default"].createElement("i", {
+          className: "hi-upload-legacy__upstatus-line",
+          style: {
+            width: file.progressNumber + '%'
+          }
+        })));
+      })));
+    }
+  }]);
+  return UploadClick;
+}(_Upload2["default"]);
+
+UploadClick.defaultProps = Object.assign({}, _objectSpread({}, _Upload2["default"].defaultProps), {
+  type: 'normal'
+});
+
+var _default = (0, _context["default"])(UploadClick);
+
+exports["default"] = _default;

package/es/upload/upload-legacy/UploadDrag.js

@@ -0,0 +1,176 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _context = _interopRequireDefault(require("../../context"));
+
+var _Upload2 = _interopRequireDefault(require("./Upload"));
+
+var _icon = _interopRequireDefault(require("../../icon"));
+
+var UploadDrag =
+/*#__PURE__*/
+function (_Upload) {
+  (0, _inherits2["default"])(UploadDrag, _Upload);
+
+  function UploadDrag(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, UploadDrag);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(UploadDrag).call(this, props));
+    _this.state = Object.assign({
+      overEvent: false
+    }, _this.state);
+    return _this;
+  }
+
+  (0, _createClass2["default"])(UploadDrag, [{
+    key: "dragoverFn",
+    value: function dragoverFn(e) {
+      e.preventDefault();
+      this.setState({
+        overEvent: true
+      });
+    }
+  }, {
+    key: "dragleaveFn",
+    value: function dragleaveFn(e) {
+      e.preventDefault();
+      this.setState({
+        overEvent: false
+      });
+    }
+  }, {
+    key: "dropFn",
+    value: function dropFn(e) {
+      e.stopPropagation();
+      e.preventDefault();
+
+      if (this.props.disabled) {
+        return;
+      }
+
+      this.setState({
+        overEvent: false
+      });
+      var files = e.dataTransfer.files;
+      this.uploadFiles(files);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          multiple = _this$props.multiple,
+          accept = _this$props.accept,
+          disabled = _this$props.disabled,
+          tips = _this$props.tips,
+          localeDatas = _this$props.localeDatas;
+      var _this$state = this.state,
+          overEvent = _this$state.overEvent,
+          fileList = _this$state.fileList;
+      var dragCls = (0, _classnames["default"])('hi-upload-legacy', 'hi-upload-legacy--drag', overEvent && !disabled && 'drop-over', disabled && 'hi-upload-legacy--disabled', fileList.length > 0 && 'hi-upload-legacy--nohover');
+      return _react["default"].createElement("div", {
+        className: dragCls,
+        onDragOver: function onDragOver(e) {
+          return _this2.dragoverFn(e);
+        },
+        onDragLeave: function onDragLeave(e) {
+          return _this2.dragleaveFn(e);
+        },
+        onDrop: function onDrop(e) {
+          return _this2.dropFn(e);
+        },
+        onClick: function onClick(e) {
+          e.stopImmediatePropagation();
+
+          if (!e.target.className.includes('hi-upload-legacy__operate-icon') && !e.target.className.includes('upload-input')) {
+            _this2.uploadRef.click();
+          }
+        }
+      }, _react["default"].createElement("div", {
+        className: fileList.length === 0 ? 'show-drop-content' : 'drop-content'
+      }, _react["default"].createElement("label", {
+        className: "hi-upload-legacy-label"
+      }, _react["default"].createElement(_icon["default"], {
+        name: "upload-cloud",
+        className: "icon"
+      }), _react["default"].createElement("span", {
+        className: "drop-click"
+      }, localeDatas.upload.drag), tips && _react["default"].createElement("span", {
+        className: "hi-upload-legacy__tips hi-upload-legacy__tips--single-line"
+      }, tips), _react["default"].createElement("input", {
+        ref: function ref(node) {
+          _this2.uploadRef = node;
+        },
+        type: "file",
+        className: "upload-input",
+        onChange: function onChange(e) {
+          _this2.uploadFiles(e.target.files);
+        },
+        multiple: multiple && 'multiple',
+        disabled: disabled && 'disabled',
+        hidden: true,
+        accept: accept
+      }))), _react["default"].createElement("ul", {
+        className: fileList.length === 0 ? 'hide-upload-list' : 'hi-upload-legacy__list'
+      }, fileList.length > 0 && _react["default"].createElement("li", {
+        className: "hi-upload-legacy__item hi-upload-legacy__item-tips"
+      }, _react["default"].createElement(_icon["default"], {
+        name: "comment-circle-o"
+      }), localeDatas.upload.dragTips), fileList.map(function (file, index) {
+        var fileNameCls = (0, _classnames["default"])('file-name', 'upload-list__item-name', file.uploadState === 'error' && 'file-name--error');
+        return _react["default"].createElement("li", {
+          key: index,
+          title: file.name,
+          className: "hi-upload-legacy__item"
+        }, _react["default"].createElement("span", {
+          className: "Ficon-".concat(file.fileType)
+        }), _react["default"].createElement("div", {
+          className: "hi-upload-legacy__right-content"
+        }, _react["default"].createElement("span", {
+          className: fileNameCls
+        }, file.name), _react["default"].createElement("span", {
+          className: "hi-upload-legacy__operate-icon",
+          onClick: function onClick(e) {
+            return _this2.deleteFile(e, file, index);
+          }
+        }, file.uploadState === 'loading' ? localeDatas.upload.cancel : localeDatas.upload["delete"])), file.uploadState === 'loading' && _react["default"].createElement("div", {
+          className: "hi-upload-legacy__upstatus"
+        }, _react["default"].createElement("i", {
+          className: "hi-upload-legacy__upstatus-line",
+          style: {
+            width: file.progressNumber + '%'
+          }
+        }), _react["default"].createElement("i", {
+          className: "hi-upload-legacy__upstatus-num"
+        }, file.progressNumber || 0, "%")));
+      })));
+    }
+  }]);
+  return UploadDrag;
+}(_Upload2["default"]);
+
+var _default = (0, _context["default"])(UploadDrag);
+
+exports["default"] = _default;