shineout 1.12.2 → 1.12.3

package/esm/Upload/Image.js

@@ -0,0 +1,184 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import React, { PureComponent } from 'react';
+import immer from 'immer';
+import classname from 'classnames';
+import { uploadClass } from './styles';
+import Upload from './Upload';
+import { ERROR } from './request';
+import { getLocale } from '../locale';
+export var Handler = function Handler(_ref) {
+  var className = _ref.className,
+      disabled = _ref.disabled,
+      urlInvalid = _ref.urlInvalid,
+      children = _ref.children,
+      style = _ref.style,
+      width = _ref.width,
+      height = _ref.height,
+      onKeyDown = _ref.onKeyDown,
+      onMouseDown = _ref.onMouseDown,
+      otherProps = _objectWithoutPropertiesLoose(_ref, ["className", "disabled", "urlInvalid", "children", "style", "width", "height", "onKeyDown", "onMouseDown"]);
+
+  var mc = classname(uploadClass('image-plus', 'image-item', disabled && 'disabled', urlInvalid && 'url-invalid-border'), className);
+  var ms = Object.assign({}, {
+    width: width,
+    height: height
+  }, style);
+  return React.createElement("div", _extends({}, otherProps, {
+    onKeyDown: onKeyDown,
+    onMouseDown: onMouseDown,
+    style: ms,
+    tabIndex: disabled ? -1 : 0,
+    className: mc
+  }), children || React.createElement("div", {
+    className: uploadClass('indicator', urlInvalid && 'url-invalid-indicator')
+  }));
+};
+Handler.defaultProps = {
+  width: 80,
+  height: 80
+};
+var ImageUploadDefaultProps = {
+  accept: 'image/*',
+  height: 80,
+  validator: {},
+  width: 80
+};
+
+var Image =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Image, _PureComponent);
+
+  function Image(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "timeout", void 0);
+
+    _this.beforeUpload = _this.beforeUpload.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleMouseDown = _this.handleMouseDown.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleKeyDown = _this.handleKeyDown.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.state = {
+      urlInvalid: false
+    };
+    _this.timeout = null;
+    return _this;
+  }
+
+  var _proto = Image.prototype;
+
+  _proto.beforeUpload = function beforeUpload(blob, validatorHandle) {
+    var _this2 = this;
+
+    return new Promise(function (resolve, reject) {
+      var _ref2 = _this2.props.validator || {},
+          imageSize = _ref2.imageSize;
+
+      var file = {};
+      var reader = new FileReader();
+
+      reader.onload = function (e) {
+        var data = e.target.result;
+        file.data = data;
+        var image = new window.Image();
+
+        image.onerror = function () {
+          _this2.setState(immer(function (draft) {
+            draft.urlInvalid = true;
+          }));
+
+          reject();
+        };
+
+        image.onload = function () {
+          if (!imageSize) {
+            resolve(file);
+            return;
+          }
+
+          var res = imageSize(image);
+
+          if (res instanceof Error) {
+            if (!validatorHandle(res, blob)) reject();
+            file.status = ERROR;
+            file.message = res.message;
+          }
+
+          resolve(file);
+        };
+
+        image.src = data;
+      };
+
+      reader.readAsDataURL(blob);
+    });
+  };
+
+  _proto.handleKeyDown = function handleKeyDown(e) {
+    this.setState({
+      urlInvalid: false
+    });
+    if (e.keyCode === 13) e.target.click();
+  };
+
+  _proto.handleMouseDown = function handleMouseDown() {
+    this.setState({
+      urlInvalid: false
+    });
+  };
+
+  _proto.render = function render() {
+    var _this3 = this;
+
+    var _this$props = this.props,
+        children = _this$props.children,
+        width = _this$props.width,
+        height = _this$props.height,
+        ignorePreview = _this$props.ignorePreview,
+        others = _objectWithoutPropertiesLoose(_this$props, ["children", "width", "height", "ignorePreview"]);
+
+    var urlInvalid = this.state.urlInvalid;
+
+    if (urlInvalid) {
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(function () {
+        _this3.setState({
+          urlInvalid: false
+        });
+      }, 3000);
+    }
+
+    var style = {
+      width: width,
+      height: height
+    };
+    return React.createElement(Upload, _extends({}, others, {
+      imageStyle: style,
+      beforeUpload: ignorePreview ? undefined : this.beforeUpload
+    }), React.createElement(Handler, {
+      disabled: this.props.disabled,
+      style: style,
+      onKeyDown: this.handleKeyDown,
+      onMouseDown: this.handleMouseDown,
+      urlInvalid: urlInvalid
+    }, children), urlInvalid && React.createElement("div", {
+      style: {
+        width: '100%',
+        position: 'relative'
+      }
+    }, React.createElement("div", {
+      className: uploadClass('url-invalid-message')
+    }, getLocale('urlInvalidMsg'))));
+  };
+
+  return Image;
+}(PureComponent);
+
+_defineProperty(Image, "defaultProps", ImageUploadDefaultProps);
+
+export default Image;

package/esm/Upload/ImageFile.d.ts

@@ -0,0 +1,8 @@
+import { PureComponent } from 'react';
+import { ImageFileProps } from './Props';
+declare class ImageFile extends PureComponent<ImageFileProps> {
+    constructor(props: ImageFileProps);
+    handleRemove(): void;
+    render(): JSX.Element;
+}
+export default ImageFile;

package/esm/Upload/ImageFile.js

@@ -0,0 +1,64 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import React, { PureComponent } from 'react';
+import Progress from '../Progress';
+import { uploadClass } from './styles';
+import Image from '../Image';
+import { ERROR } from './request';
+
+var ImageFile =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(ImageFile, _PureComponent);
+
+  function ImageFile(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+    _this.handleRemove = _this.handleRemove.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = ImageFile.prototype;
+
+  _proto.handleRemove = function handleRemove() {
+    this.props.onRemove(this.props.id);
+  };
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        process = _this$props.process,
+        status = _this$props.status,
+        style = _this$props.style,
+        data = _this$props.data,
+        message = _this$props.message;
+    var className = uploadClass('image-item', status === ERROR && 'error');
+    return React.createElement("div", {
+      style: style,
+      className: className
+    }, data && React.createElement(Image, {
+      src: data,
+      fit: "center",
+      width: "auto",
+      height: 0,
+      className: uploadClass('image-bg')
+    }), message && React.createElement("div", {
+      className: uploadClass('message')
+    }, message), React.createElement("span", {
+      className: uploadClass('delete'),
+      onClick: this.handleRemove
+    }), React.createElement("div", {
+      className: uploadClass('progress-bg')
+    }, React.createElement(Progress, {
+      className: uploadClass('progress'),
+      color: "#f2f2f2",
+      background: "rgba(0,0,0,0.5)",
+      value: process,
+      strokeWidth: 2
+    })));
+  };
+
+  return ImageFile;
+}(PureComponent);
+
+export default ImageFile;

package/esm/Upload/ImageResult.d.ts

@@ -0,0 +1,24 @@
+import React, { PureComponent } from 'react';
+import { UploadImageResultProps } from './Props';
+interface UploadImageResultState {
+    confirm: boolean;
+}
+declare class ImageResult extends PureComponent<UploadImageResultProps, UploadImageResultState> {
+    static defaultProps: {
+        renderResult: (a: any) => any;
+    };
+    image: {
+        preview: () => void;
+    };
+    constructor(props: UploadImageResultProps);
+    get showRemove(): ((res: any, value: any, index: number, values: any[]) => React.ReactNode) | undefined;
+    bindImage(image: any): void;
+    handleRemove(): void;
+    handleRecover(): void;
+    handleConfirmChange(confirm: boolean): void;
+    preview(): void;
+    handlePreview(): void;
+    renderOptions(): JSX.Element;
+    render(): JSX.Element;
+}
+export default ImageResult;

package/esm/Upload/ImageResult.js

@@ -0,0 +1,162 @@
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { PureComponent } from 'react';
+import icons from '../icons';
+import Image from '../Image';
+import RemoveConfirm from './RemoveConfirm';
+import { uploadClass } from './styles';
+var DefaultProps = {
+  renderResult: function renderResult(a) {
+    return a;
+  }
+};
+
+var ImageResult =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(ImageResult, _PureComponent);
+
+  function ImageResult(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "image", void 0);
+
+    _this.state = {
+      confirm: false
+    };
+    _this.handleRemove = _this.handleRemove.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleRecover = _this.handleRecover.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.bindImage = _this.bindImage.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handlePreview = _this.handlePreview.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleConfirmChange = _this.handleConfirmChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.preview = _this.preview.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = ImageResult.prototype;
+
+  _proto.bindImage = function bindImage(image) {
+    this.image = image;
+  };
+
+  _proto.handleRemove = function handleRemove() {
+    if (this.props.onRemove) this.props.onRemove(this.props.index);
+  };
+
+  _proto.handleRecover = function handleRecover() {
+    var _this$props = this.props,
+        onRecover = _this$props.onRecover,
+        value = _this$props.value,
+        index = _this$props.index;
+
+    if (onRecover) {
+      onRecover(index, value);
+    }
+  };
+
+  _proto.handleConfirmChange = function handleConfirmChange(confirm) {
+    this.setState({
+      confirm: confirm
+    });
+  };
+
+  _proto.preview = function preview() {
+    if (!this.image) return;
+    this.image.preview();
+  };
+
+  _proto.handlePreview = function handlePreview() {
+    var _this2 = this;
+
+    var _this$props2 = this.props,
+        onPreview = _this$props2.onPreview,
+        _this$props2$renderRe = _this$props2.renderResult,
+        renderResult = _this$props2$renderRe === void 0 ? DefaultProps.renderResult : _this$props2$renderRe,
+        value = _this$props2.value,
+        index = _this$props2.index,
+        values = _this$props2.values;
+
+    if (onPreview) {
+      var url = renderResult(value);
+      onPreview(url, value, index, values, {
+        preview: function preview() {
+          return _this2.preview();
+        }
+      });
+      return;
+    }
+
+    this.preview();
+  };
+
+  _proto.renderOptions = function renderOptions() {
+    var removeConfirm = this.props.removeConfirm;
+    var confirm = this.state.confirm;
+    return React.createElement("div", {
+      className: uploadClass('image-options', confirm && 'image-active')
+    }, React.createElement("a", {
+      className: uploadClass('options-item'),
+      onClick: this.handlePreview
+    }, icons.Preview), this.props.onRemove && React.createElement("a", {
+      className: uploadClass('options-item', 'options-remove'),
+      onClick: removeConfirm ? undefined : this.handleRemove
+    }, icons.Delete, React.createElement(RemoveConfirm, {
+      onVisibleChange: this.handleConfirmChange,
+      onRemove: this.handleRemove,
+      confirm: removeConfirm
+    })));
+  };
+
+  _proto.render = function render() {
+    var _this$props3 = this.props,
+        value = _this$props3.value,
+        _this$props3$renderRe = _this$props3.renderResult,
+        renderResult = _this$props3$renderRe === void 0 ? DefaultProps.renderResult : _this$props3$renderRe,
+        recoverAble = _this$props3.recoverAble,
+        renderContent = _this$props3.renderContent,
+        style = _this$props3.style,
+        showRecover = _this$props3.showRecover,
+        index = _this$props3.index,
+        values = _this$props3.values;
+    var className = uploadClass('image-item', 'image-result', recoverAble && 'to-be-delete');
+    var url = renderResult(value);
+    return React.createElement("div", {
+      style: style,
+      className: className
+    }, url && (renderContent ? renderContent(url, value, index, values) : React.createElement(Image, {
+      ref: this.bindImage,
+      src: url,
+      href: url,
+      fit: "center",
+      width: "auto",
+      height: 0,
+      className: uploadClass('image-bg')
+    })), showRecover && React.createElement("a", {
+      className: uploadClass('recover'),
+      onClick: this.handleRecover
+    }, icons.Recovery), this.showRemove && React.createElement("span", {
+      className: uploadClass('delete'),
+      onClick: this.handleRemove
+    }), !renderContent && this.renderOptions());
+  };
+
+  _createClass(ImageResult, [{
+    key: "showRemove",
+    get: function get() {
+      var _this$props4 = this.props,
+          onRemove = _this$props4.onRemove,
+          renderContent = _this$props4.renderContent;
+      return onRemove && renderContent;
+    }
+  }]);
+
+  return ImageResult;
+}(PureComponent);
+
+_defineProperty(ImageResult, "defaultProps", DefaultProps);
+
+export default ImageResult;

package/esm/Upload/Progress.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { PureComponent } from '../component';
+import { UploadProgressProps, XhrType } from './Props';
+interface UploadProgressState {
+    progress: number;
+}
+declare class Progress<ValueItem> extends PureComponent<UploadProgressProps<ValueItem>, UploadProgressState> {
+    static defaultProps: UploadProgressProps<any>;
+    handleStart: () => void;
+    handleOver: () => void;
+    constructor(props: UploadProgressProps<ValueItem>);
+    handleChange(p: number): void;
+    handleProgress(file: {
+        process: number;
+    }): void;
+    handleError(xhr: XhrType, file: File): any;
+    handleSuccess(value: any, ...args: any): any;
+    handleUpload(e: React.MouseEvent): void;
+    renderLoadingView(color?: string): JSX.Element;
+    render(): JSX.Element;
+}
+export default Progress;

package/esm/Upload/Progress.js

@@ -0,0 +1,152 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { isValidElement } from 'react';
+import Spin from '../Spin';
+import { PureComponent } from '../component';
+import { uploadClass } from './styles';
+import Button from '../Button';
+import Upload from './Upload';
+import { isRTL } from '../config';
+
+var SPIN = function SPIN(color) {
+  return React.createElement("span", {
+    className: uploadClass('bg-spin')
+  }, React.createElement(Spin, {
+    size: 10,
+    name: "ring",
+    color: color
+  }));
+};
+
+var handleKeyDown = function handleKeyDown(e) {
+  if (e.keyCode === 13) e.target.click();
+};
+
+var DefaultProps = {
+  type: 'primary',
+  size: 'default',
+  outline: false
+};
+
+var Progress =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Progress, _PureComponent);
+
+  function Progress(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleStart", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleOver", void 0);
+
+    _this.state = {
+      progress: -1
+    };
+    _this.handleError = _this.handleError.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleSuccess = _this.handleSuccess.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleProgress = _this.handleProgress.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleStart = _this.handleChange.bind(_assertThisInitialized(_assertThisInitialized(_this)), 0);
+    _this.handleOver = _this.handleChange.bind(_assertThisInitialized(_assertThisInitialized(_this)), -1);
+    _this.handleUpload = _this.handleUpload.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = Progress.prototype;
+
+  _proto.handleChange = function handleChange(p) {
+    this.setState({
+      progress: p
+    });
+  };
+
+  _proto.handleProgress = function handleProgress(file) {
+    this.handleChange(file.process);
+  };
+
+  _proto.handleError = function handleError(xhr, file) {
+    var onError = this.props.onError;
+    var msg;
+    if (onError) msg = onError(xhr, file);
+    this.handleOver();
+    return msg;
+  };
+
+  _proto.handleSuccess = function handleSuccess(value) {
+    var onSuccess = this.props.onSuccess;
+    var result = value;
+
+    if (onSuccess) {
+      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
+      }
+
+      // @ts-ignore
+      result = onSuccess.apply(void 0, [value].concat(args));
+    }
+
+    this.handleOver();
+    return result;
+  };
+
+  _proto.handleUpload = function handleUpload(e) {
+    var uploading = this.state.progress >= 0;
+    if (uploading) e.stopPropagation();
+  };
+
+  _proto.renderLoadingView = function renderLoadingView(color) {
+    var _this$props = this.props,
+        placeholder = _this$props.placeholder,
+        loading = _this$props.loading;
+    return isValidElement(loading) ? React.createElement("span", null, loading) : React.createElement("span", null, SPIN(color), typeof loading === 'string' ? loading : placeholder);
+  };
+
+  _proto.render = function render() {
+    var _style;
+
+    var _this$props2 = this.props,
+        placeholder = _this$props2.placeholder,
+        type = _this$props2.type,
+        size = _this$props2.size,
+        outline = _this$props2.outline,
+        others = _objectWithoutPropertiesLoose(_this$props2, ["placeholder", "type", "size", "outline"]);
+
+    var uploading = this.state.progress >= 0;
+    var style = (_style = {}, _style[isRTL() ? 'left' : 'right'] = uploading ? 100 - this.state.progress + "%" : '100%', _style);
+    return React.createElement(Upload, _extends({}, others, {
+      limit: undefined,
+      onProgress: this.handleProgress,
+      onStart: this.handleStart,
+      showUploadList: false,
+      onError: this.handleError,
+      onSuccess: this.handleSuccess
+    }), React.createElement(Button, {
+      tabIndex: others.disabled ? -1 : 0,
+      disabled: others.disabled,
+      className: uploadClass('button', uploading && 'uploading'),
+      type: type,
+      size: size,
+      outline: outline,
+      onClick: this.handleUpload,
+      onKeyDown: handleKeyDown
+    }, uploading && [React.createElement("div", {
+      key: "cover",
+      className: uploadClass('cover')
+    }), React.createElement("div", {
+      key: "bg",
+      style: style,
+      className: uploadClass('bg')
+    }, this.renderLoadingView('#fff'))], React.createElement("span", null, uploading ? this.renderLoadingView() : placeholder)));
+  };
+
+  return Progress;
+}(PureComponent);
+
+_defineProperty(Progress, "defaultProps", DefaultProps);
+
+export default Progress;