@king-design/react 2.0.0-beta.0

package/components/upload/ajaxUploader.js

@@ -0,0 +1,89 @@
+import { isNullOrUndefined } from 'intact-shared';
+export function request(options) {
+  var xhr = new XMLHttpRequest();
+  var formData = new FormData();
+  var data = options.data;
+
+  if (data) {
+    for (var key in data) {
+      if (!isNullOrUndefined(data[key])) {
+        formData.append(key, data[key]);
+      }
+    }
+  }
+
+  var upload = xhr.upload;
+
+  if (upload) {
+    upload.onprogress = function (e) {
+      var percent = 0;
+
+      if (e.total > 0) {
+        percent = Math.floor(e.loaded / e.total * 100);
+      }
+
+      options.onProgress(e, percent, xhr);
+    };
+  }
+
+  xhr.onerror = function (e) {
+    return options.onError(getError(options, xhr), xhr);
+  };
+
+  xhr.onload = function () {
+    if (xhr.status < 200 || xhr.status >= 300) {
+      return options.onError(getError(options, xhr), xhr);
+    }
+
+    options.onSuccess(getBody(xhr), xhr);
+  };
+
+  xhr.open('post', options.action || '', true);
+
+  if (options.withCredentials && 'withCredentials' in xhr) {
+    xhr.withCredentials = true;
+  }
+
+  var headers = options.headers;
+
+  if (headers) {
+    for (var _key in headers) {
+      var value = headers[_key];
+
+      if (!isNullOrUndefined(value)) {
+        xhr.setRequestHeader(_key, value);
+      }
+    }
+  }
+
+  xhr.send(formData);
+  return {
+    abort: function abort() {
+      xhr.abort();
+    }
+  };
+}
+
+function getError(options, xhr) {
+  var msg = "cannot post " + options.action + " " + xhr.status + "'";
+  var err = new Error(msg);
+  err.status = xhr.status;
+  err.method = 'post';
+  err.url = options.action || '';
+  err.response = getBody(xhr);
+  err.xhr = xhr;
+  return err;
+}
+
+function getBody(xhr) {
+  var text = xhr.responseText || xhr.response;
+  if (!text) return text;
+
+  try {
+    return JSON.parse(text);
+  } catch (e) {
+    return text;
+  }
+}
+
+export {normalize} from 'intact-react';

package/components/upload/index.d.ts

@@ -0,0 +1,66 @@
+import { Component, TypeDefs } from 'intact-react';
+import { UploadFileStatus } from './useUpload';
+import type { RequestError } from './ajaxUploader';
+import type { Events } from '../types';
+export type { RequestError };
+export interface UploadProps {
+    accept?: string;
+    files?: UploadFile[];
+    defaultFiles?: (Partial<UploadFile> & Pick<UploadFile, 'name' | 'url'>)[];
+    maxSize?: number;
+    limit?: number;
+    autoUpload?: boolean;
+    beforeRemove?: BeforeCallback;
+    beforeUpload?: BeforeCallback;
+    data?: DataObject | DataFunction;
+    action?: string;
+    headers?: Record<string | number, string>;
+    name?: string;
+    withCredentials?: boolean;
+    type?: 'select' | 'drag' | 'gallery';
+    directory?: boolean;
+    disabled?: boolean;
+    multiple?: boolean;
+}
+export interface UploadEvents {
+    progress: [ProgressEvent, XMLHttpRequest, UploadFile, UploadFile[]];
+    success: [any, XMLHttpRequest, UploadFile, UploadFile[]];
+    error: [Error | RequestError, File[] | File | UploadFile, UploadFile[]];
+}
+export interface UploadBlocks {
+    content: null;
+    children: null;
+    tip: null;
+}
+export declare type UploadFile = {
+    status: UploadFileStatus;
+    type?: string;
+    size?: number;
+    name: string;
+    percent: number;
+    uid: number;
+    raw: File | Partial<UploadFile>;
+    url?: string;
+    request?: any;
+};
+declare type BeforeCallback = (file: UploadFile, files: UploadFile[]) => Promise<boolean> | boolean;
+declare type DataObject = Record<string | number, any>;
+declare type DataFunction = (file: UploadFile) => DataObject;
+export declare class Upload extends Component<UploadProps, UploadEvents, UploadBlocks> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<UploadProps>>;
+    static defaults: () => Partial<UploadProps>;
+    static events: Events<UploadEvents>;
+    private inputRef;
+    private accept;
+    private upload;
+    private files;
+    private drag;
+    private showImage;
+    submit(): void;
+    private selectFile;
+    private onInputChange;
+}
+
+
+export {normalize} from 'intact-react';

package/components/upload/index.js

@@ -0,0 +1,102 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { __decorate } from "tslib";
+import { Component, createRef } from 'intact-react';
+import template from './index.vdt';
+import { useAccept } from './useAccept';
+import { useUpload, UploadFileStatus } from './useUpload';
+import { useFiles } from './useFiles';
+import { bind } from '../utils';
+import { useDrag } from './useDrag';
+import { useShowImage } from './useShowImage';
+var typeDefs = {
+  accept: String,
+  files: Array,
+  defaultFiles: Array,
+  maxSize: Number,
+  limit: Number,
+  autoUpload: Boolean,
+  beforeRemove: Function,
+  beforeUpload: Function,
+  data: Object,
+  action: String,
+  headers: Object,
+  name: String,
+  withCredentials: Boolean,
+  type: ['select', 'drag', 'gallery'],
+  directory: Boolean,
+  disabled: Boolean,
+  multiple: Boolean
+};
+
+var defaults = function defaults() {
+  return {
+    files: [],
+    type: 'select',
+    autoUpload: true
+  };
+};
+
+var events = {
+  progress: true,
+  success: true,
+  error: true
+};
+export var Upload = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Upload, _Component);
+
+  function Upload() {
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.inputRef = createRef();
+    _this.accept = useAccept();
+    _this.upload = useUpload();
+    _this.files = useFiles(_this.accept.isValidType, _this.upload);
+    _this.drag = useDrag(_this.files.addFiles);
+    _this.showImage = useShowImage();
+    return _this;
+  }
+
+  var _proto = Upload.prototype;
+
+  _proto.submit = function submit() {
+    var _this2 = this;
+
+    this.get('files').forEach(function (file) {
+      if (file.status === UploadFileStatus.NotReady) {
+        _this2.upload(file);
+      }
+    });
+  };
+
+  _proto.selectFile = function selectFile() {
+    if (!this.get('disabled')) {
+      var input = this.inputRef.value;
+      input.value = '';
+      input.click();
+    }
+  };
+
+  _proto.onInputChange = function onInputChange(e) {
+    this.files.addFiles(e.target.files);
+  };
+
+  return Upload;
+}(Component);
+Upload.template = template;
+Upload.typeDefs = typeDefs;
+Upload.defaults = defaults;
+Upload.events = events;
+
+__decorate([bind], Upload.prototype, "selectFile", null);
+
+__decorate([bind], Upload.prototype, "onInputChange", null);
+
+export {normalize} from 'intact-react';

package/components/upload/index.spec.d.ts

@@ -0,0 +1,4 @@
+export {};
+
+
+export {normalize} from 'intact-react';