@nutui/nutui-react-taro 1.2.2-beta.0

package/dist/esm/uploader.taro-5fab7e14.js

@@ -0,0 +1,558 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["children", "uploadIcon", "uploadIconSize", "name", "accept", "defaultFileList", "listType", "disabled", "multiple", "url", "defaultImg", "headers", "timeout", "method", "xhrState", "withCredentials", "data", "isPreview", "isDeletable", "maximum", "capture", "maximize", "className", "autoUpload", "clearInput", "start", "removeImage", "change", "fileItemClick", "progress", "success", "update", "failure", "oversize", "beforeUpload", "beforeDelete"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React__default, { useState, useEffect, useImperativeHandle } from 'react';
+import classNames from 'classnames';
+import { I as Icon } from './icon-62bd7379.js';
+import { c as cn } from './bem-893ad28d.js';
+import { u as useConfig } from './configprovider-18657611.js';
+
+var UploadOptions = /*#__PURE__*/_createClass(function UploadOptions() {
+  _classCallCheck(this, UploadOptions);
+
+  _defineProperty(this, "url", '');
+
+  _defineProperty(this, "name", 'file');
+
+  _defineProperty(this, "formData", void 0);
+
+  _defineProperty(this, "method", 'post');
+
+  _defineProperty(this, "xhrState", 200);
+
+  _defineProperty(this, "timeout", 30 * 1000);
+
+  _defineProperty(this, "headers", {});
+
+  _defineProperty(this, "withCredentials", false);
+
+  _defineProperty(this, "onStart", void 0);
+
+  _defineProperty(this, "taroFilePath", void 0);
+
+  _defineProperty(this, "onProgress", void 0);
+
+  _defineProperty(this, "onSuccess", void 0);
+
+  _defineProperty(this, "onFailure", void 0);
+});
+
+var Upload = /*#__PURE__*/function () {
+  function Upload(options) {
+    _classCallCheck(this, Upload);
+
+    _defineProperty(this, "options", void 0);
+
+    this.options = options;
+  }
+
+  _createClass(Upload, [{
+    key: "upload",
+    value: function upload() {
+      var options = this.options;
+      var xhr = new XMLHttpRequest();
+      xhr.timeout = options.timeout;
+
+      if (xhr.upload) {
+        var _options$onStart;
+
+        xhr.upload.addEventListener('progress', function (e) {
+          var _options$onProgress;
+
+          (_options$onProgress = options.onProgress) === null || _options$onProgress === void 0 ? void 0 : _options$onProgress.call(options, e, options);
+        }, false);
+
+        xhr.onreadystatechange = function () {
+          if (xhr.readyState === 4) {
+            if (xhr.status === options.xhrState) {
+              var _options$onSuccess;
+
+              (_options$onSuccess = options.onSuccess) === null || _options$onSuccess === void 0 ? void 0 : _options$onSuccess.call(options, xhr.responseText, options);
+            } else {
+              var _options$onFailure;
+
+              (_options$onFailure = options.onFailure) === null || _options$onFailure === void 0 ? void 0 : _options$onFailure.call(options, xhr.responseText, options);
+            }
+          }
+        };
+
+        xhr.withCredentials = options.withCredentials;
+        xhr.open(options.method, options.url, true); // headers
+
+        for (var _i = 0, _Object$entries = Object.entries(options.headers); _i < _Object$entries.length; _i++) {
+          var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+              key = _Object$entries$_i[0],
+              value = _Object$entries$_i[1];
+
+          xhr.setRequestHeader(key, value);
+        }
+
+        (_options$onStart = options.onStart) === null || _options$onStart === void 0 ? void 0 : _options$onStart.call(options, options);
+        xhr.send(options.formData);
+      } else {
+        console.warn('浏览器不支持 XMLHttpRequest');
+      }
+    }
+  }]);
+
+  return Upload;
+}();
+
+var defaultProps = {
+  url: '',
+  maximum: 1,
+  uploadIcon: 'photograph',
+  uploadIconSize: '',
+  listType: 'picture',
+  name: 'file',
+  accept: '*',
+  disabled: false,
+  autoUpload: true,
+  multiple: false,
+  maximize: Number.MAX_VALUE,
+  data: {},
+  headers: {},
+  method: 'post',
+  defaultImg: '',
+  xhrState: 200,
+  timeout: 1000 * 30,
+  withCredentials: false,
+  clearInput: false,
+  isPreview: true,
+  isDeletable: true,
+  capture: false,
+  beforeDelete: function beforeDelete(file, files) {
+    return true;
+  }
+};
+
+var FileItem = /*#__PURE__*/_createClass(function FileItem() {
+  _classCallCheck(this, FileItem);
+
+  _defineProperty(this, "status", 'ready');
+
+  _defineProperty(this, "message", '准备中..');
+
+  _defineProperty(this, "uid", new Date().getTime().toString());
+
+  _defineProperty(this, "name", void 0);
+
+  _defineProperty(this, "url", void 0);
+
+  _defineProperty(this, "type", void 0);
+
+  _defineProperty(this, "formData", new FormData());
+});
+
+var InternalUploader = function InternalUploader(props, ref) {
+  var _useConfig = useConfig(),
+      locale = _useConfig.locale;
+
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      children = _defaultProps$props.children,
+      uploadIcon = _defaultProps$props.uploadIcon,
+      uploadIconSize = _defaultProps$props.uploadIconSize,
+      name = _defaultProps$props.name,
+      accept = _defaultProps$props.accept,
+      defaultFileList = _defaultProps$props.defaultFileList,
+      listType = _defaultProps$props.listType,
+      disabled = _defaultProps$props.disabled,
+      multiple = _defaultProps$props.multiple,
+      url = _defaultProps$props.url,
+      defaultImg = _defaultProps$props.defaultImg,
+      headers = _defaultProps$props.headers,
+      timeout = _defaultProps$props.timeout,
+      method = _defaultProps$props.method,
+      xhrState = _defaultProps$props.xhrState,
+      withCredentials = _defaultProps$props.withCredentials,
+      data = _defaultProps$props.data,
+      isPreview = _defaultProps$props.isPreview,
+      isDeletable = _defaultProps$props.isDeletable,
+      maximum = _defaultProps$props.maximum,
+      capture = _defaultProps$props.capture,
+      maximize = _defaultProps$props.maximize,
+      className = _defaultProps$props.className,
+      autoUpload = _defaultProps$props.autoUpload,
+      clearInput = _defaultProps$props.clearInput,
+      start = _defaultProps$props.start,
+      removeImage = _defaultProps$props.removeImage,
+      change = _defaultProps$props.change,
+      fileItemClick = _defaultProps$props.fileItemClick,
+      progress = _defaultProps$props.progress,
+      success = _defaultProps$props.success,
+      update = _defaultProps$props.update,
+      failure = _defaultProps$props.failure,
+      oversize = _defaultProps$props.oversize,
+      beforeUpload = _defaultProps$props.beforeUpload,
+      beforeDelete = _defaultProps$props.beforeDelete,
+      restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      fileList = _useState2[0],
+      setFileList = _useState2[1];
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      uploadQueue = _useState4[0],
+      setUploadQueue = _useState4[1];
+
+  useEffect(function () {
+    console.log('defaultFileList', defaultFileList);
+
+    if (defaultFileList) {
+      setFileList(defaultFileList);
+    }
+  }, [defaultFileList]);
+  var b = cn('uploader');
+  var classes = classNames(className, b(''));
+  useImperativeHandle(ref, function () {
+    return {
+      submit: function submit() {
+        Promise.all(uploadQueue).then(function (res) {
+          res.forEach(function (i) {
+            return i.upload();
+          });
+        });
+      }
+    };
+  });
+
+  var clearUploadQueue = function clearUploadQueue() {
+    var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
+
+    if (index > -1) {
+      uploadQueue.splice(index, 1);
+      setUploadQueue(uploadQueue);
+    } else {
+      setUploadQueue([]);
+    }
+  };
+
+  var clearInputValue = function clearInputValue(el) {
+    el.value = '';
+  };
+
+  var executeUpload = function executeUpload(fileItem, index) {
+    var uploadOption = new UploadOptions();
+    uploadOption.url = url;
+
+    for (var _i2 = 0, _Object$entries2 = Object.entries(data); _i2 < _Object$entries2.length; _i2++) {
+      var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2),
+          key = _Object$entries2$_i[0],
+          value = _Object$entries2$_i[1];
+
+      fileItem.formData.append(key, value);
+    }
+
+    uploadOption.formData = fileItem.formData;
+    uploadOption.timeout = timeout * 1;
+    uploadOption.method = method;
+    uploadOption.xhrState = xhrState;
+    uploadOption.headers = headers;
+    uploadOption.withCredentials = withCredentials;
+
+    uploadOption.onStart = function (option) {
+      clearUploadQueue(index);
+      setFileList(function (fileList) {
+        fileList.map(function (item) {
+          if (item.uid === fileItem.uid) {
+            item.status = 'ready';
+            item.message = locale.uploader.readyUpload;
+          }
+        });
+        return _toConsumableArray(fileList);
+      });
+      start && start(option);
+    };
+
+    uploadOption.onProgress = function (e, option) {
+      setFileList(function (fileList) {
+        fileList.map(function (item) {
+          if (item.uid === fileItem.uid) {
+            item.status = 'uploading';
+            item.message = locale.uploader.uploading;
+          }
+        });
+        return _toConsumableArray(fileList);
+      });
+      progress && progress({
+        e: e,
+        option: option
+      });
+    };
+
+    uploadOption.onSuccess = function (responseText, option) {
+      setFileList(function (fileList) {
+        update && update(fileList);
+        fileList.map(function (item) {
+          if (item.uid === fileItem.uid) {
+            item.status = 'success';
+            item.message = locale.uploader.success;
+          }
+        });
+        return _toConsumableArray(fileList);
+      });
+      success && success({
+        responseText: responseText,
+        option: option
+      });
+    };
+
+    uploadOption.onFailure = function (responseText, option) {
+      setFileList(function (fileList) {
+        fileList.map(function (item) {
+          if (item.uid === fileItem.uid) {
+            item.status = 'error';
+            item.message = locale.uploader.error;
+          }
+        });
+        return _toConsumableArray(fileList);
+      });
+      failure && failure({
+        responseText: responseText,
+        option: option
+      });
+    };
+
+    var task = new Upload(uploadOption);
+
+    if (props.autoUpload) {
+      task.upload();
+    } else {
+      uploadQueue.push(new Promise(function (resolve, reject) {
+        resolve(task);
+      }));
+      setUploadQueue(uploadQueue);
+    }
+  };
+
+  var readFile = function readFile(files) {
+    files.forEach(function (file, index) {
+      var formData = new FormData();
+      formData.append(name, file);
+      var fileItem = new FileItem();
+      fileItem.name = file.name;
+      fileItem.status = 'ready';
+      fileItem.type = file.type;
+      fileItem.formData = formData;
+      fileItem.uid = file.lastModified + fileItem.uid;
+      fileItem.message = locale.uploader.readyUpload;
+      executeUpload(fileItem, index);
+
+      if (isPreview && file.type.includes('image')) {
+        var reader = new FileReader();
+
+        reader.onload = function (event) {
+          fileItem.url = event.target.result;
+          fileList.push(fileItem);
+          setFileList(_toConsumableArray(fileList));
+        };
+
+        reader.readAsDataURL(file);
+      } else {
+        fileList.push(fileItem);
+        setFileList(_toConsumableArray(fileList));
+      }
+    });
+  };
+
+  var filterFiles = function filterFiles(files) {
+    var maximum = props.maximum * 1;
+    var oversizes = new Array();
+    var filterFile = files.filter(function (file) {
+      if (file.size > maximize) {
+        oversizes.push(file);
+        return false;
+      }
+
+      return true;
+    });
+
+    if (oversizes.length) {
+      oversize && oversize(files);
+    }
+
+    if (filterFile.length > maximum) {
+      filterFile.splice(maximum, filterFile.length - maximum);
+    }
+
+    if (fileList.length !== 0) {
+      var index = maximum - fileList.length;
+      filterFile.splice(index, filterFile.length - index);
+    }
+
+    return filterFile;
+  };
+
+  var onDelete = function onDelete(file, index) {
+    clearUploadQueue(index);
+
+    if (beforeDelete && beforeDelete(file, fileList)) {
+      fileList.splice(index, 1);
+      removeImage && removeImage(file, fileList);
+      setFileList(_toConsumableArray(fileList));
+    } else {
+      console.log(locale.uploader.deleteWord);
+    }
+  };
+
+  var fileChange = function fileChange(event) {
+    if (disabled) {
+      return;
+    }
+
+    var $el = event.target;
+    var files = $el.files;
+
+    if (beforeUpload) {
+      beforeUpload(new Array().slice.call(files)).then(function (f) {
+        var _files = filterFiles(new Array().slice.call(f));
+
+        readFile(_files);
+      });
+    } else {
+      var _files = filterFiles(new Array().slice.call(files));
+
+      readFile(_files);
+    }
+
+    props.change && props.change({
+      fileList: fileList,
+      event: event
+    });
+
+    if (clearInput) {
+      clearInputValue($el);
+    }
+  };
+
+  var handleItemClick = function handleItemClick(file) {
+    fileItemClick && fileItemClick(file);
+  };
+
+  return React__default.createElement("div", _objectSpread({
+    className: classes
+  }, restProps), children && React__default.createElement("div", {
+    className: "nut-uploader__slot"
+  }, React__default.createElement(React__default.Fragment, null, children, maximum > fileList.length && React__default.createElement(React__default.Fragment, null, capture ? React__default.createElement("input", {
+    className: "nut-uploader__input",
+    type: "file",
+    capture: "user",
+    name: name,
+    accept: accept,
+    disabled: disabled,
+    multiple: multiple,
+    onChange: fileChange
+  }) : React__default.createElement("input", {
+    className: "nut-uploader__input",
+    type: "file",
+    name: name,
+    accept: accept,
+    disabled: disabled,
+    multiple: multiple,
+    onChange: fileChange
+  })))), fileList.length !== 0 && fileList.map(function (item, index) {
+    return React__default.createElement("div", {
+      className: "nut-uploader__preview ".concat(listType),
+      key: item.uid
+    }, listType == 'picture' && !children && React__default.createElement("div", {
+      className: "nut-uploader__preview-img"
+    }, item.status === 'ready' ? React__default.createElement("div", {
+      className: "nut-uploader__preview__progress"
+    }, React__default.createElement("div", {
+      className: "nut-uploader__preview__progress__msg"
+    }, item.message)) : item.status !== 'success' && React__default.createElement("div", {
+      className: "nut-uploader__preview__progress"
+    }, React__default.createElement(Icon, {
+      color: "#fff",
+      name: "".concat(item.status == 'error' ? 'failure' : 'loading')
+    }), React__default.createElement("div", {
+      className: "nut-uploader__preview__progress__msg"
+    }, item.message)), isDeletable && React__default.createElement(Icon, {
+      color: "rgba(0,0,0,0.6)",
+      className: "close",
+      name: "failure",
+      click: function click() {
+        return onDelete(item, index);
+      }
+    }), item.type.includes('image') ? React__default.createElement(React__default.Fragment, null, item.url && React__default.createElement("img", {
+      className: "nut-uploader__preview-img__c",
+      src: item.url,
+      onClick: function onClick() {
+        return handleItemClick(item);
+      }
+    })) : React__default.createElement(React__default.Fragment, null, defaultImg ? React__default.createElement("img", {
+      className: "nut-uploader__preview-img__c",
+      src: defaultImg,
+      onClick: function onClick() {
+        return handleItemClick(item);
+      }
+    }) : React__default.createElement("div", {
+      className: "nut-uploader__preview-img__file"
+    }, React__default.createElement("div", {
+      onClick: function onClick() {
+        return handleItemClick(item);
+      },
+      className: "nut-uploader__preview-img__file__name"
+    }, React__default.createElement(Icon, {
+      color: "#808080",
+      name: "link"
+    }), "\xA0", item.name))), React__default.createElement("div", {
+      className: "tips"
+    }, item.name)), listType == 'list' && React__default.createElement("div", {
+      className: "nut-uploader__preview-list"
+    }, React__default.createElement("div", {
+      className: "nut-uploader__preview-img__file__name ".concat(item.status),
+      onClick: function onClick() {
+        return handleItemClick(item);
+      }
+    }, React__default.createElement(Icon, {
+      name: "link"
+    }), "\xA0", item.name), React__default.createElement(Icon, {
+      color: "#808080",
+      className: "nut-uploader__preview-img__file__del",
+      name: "del",
+      click: function click() {
+        return onDelete(item, index);
+      }
+    })));
+  }), maximum > fileList.length && listType == 'picture' && !children && React__default.createElement("div", {
+    className: "nut-uploader__upload ".concat(listType)
+  }, React__default.createElement(Icon, {
+    size: uploadIconSize,
+    color: "#808080",
+    name: uploadIcon
+  }), capture ? React__default.createElement("input", {
+    className: "nut-uploader__input",
+    type: "file",
+    capture: "user",
+    name: name,
+    accept: accept,
+    disabled: disabled,
+    multiple: multiple,
+    onChange: fileChange
+  }) : React__default.createElement("input", {
+    className: "nut-uploader__input",
+    type: "file",
+    name: name,
+    accept: accept,
+    disabled: disabled,
+    multiple: multiple,
+    onChange: fileChange
+  })));
+};
+
+var Uploader = React__default.forwardRef(InternalUploader);
+Uploader.defaultProps = defaultProps;
+Uploader.displayName = 'NutUploader';
+export { Uploader as U };

package/dist/esm/video-c1090c92.js

@@ -0,0 +1,96 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "source", "options", "className", "play", "pause", "playend"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React__default, { useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import { c as cn } from './bem-893ad28d.js';
+var defaultProps = {
+  source: {
+    type: {},
+    src: ''
+  },
+  options: {
+    controls: true,
+    muted: false,
+    autoplay: false,
+    poster: '',
+    playsinline: false,
+    loop: false
+  }
+};
+
+var Video = function Video(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      children = _defaultProps$props.children,
+      source = _defaultProps$props.source,
+      options = _defaultProps$props.options,
+      className = _defaultProps$props.className,
+      play = _defaultProps$props.play,
+      pause = _defaultProps$props.pause,
+      playend = _defaultProps$props.playend,
+      restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
+
+  var rootRef = useRef(null);
+  var b = cn('video');
+  var classes = classNames(className, b(''));
+  useEffect(function () {
+    init();
+  }, []);
+
+  var init = function init() {
+    if (rootRef.current) {
+      var videoRef = rootRef.current;
+
+      if (options.autoplay) {
+        setTimeout(function () {
+          videoRef.play();
+        }, 200);
+      }
+
+      if (options.playsinline) {
+        videoRef.setAttribute('playsinline', String(options.playsinline));
+        videoRef.setAttribute('webkit-playsinline', String(options.playsinline));
+        videoRef.setAttribute('x5-video-player-type', 'h5-page');
+        videoRef.setAttribute('x5-video-player-fullscreen', 'false');
+      }
+
+      videoRef.addEventListener('play', function () {
+        play && play(videoRef);
+      });
+      videoRef.addEventListener('pause', function () {
+        pause && pause(videoRef);
+      });
+      videoRef.addEventListener('ended', function () {
+        videoRef.currentTime = 0;
+        playend && playend(videoRef);
+      });
+    }
+  };
+
+  return React__default.createElement("div", _objectSpread({
+    className: classes
+  }, restProps), React__default.createElement("video", {
+    className: "nut-video-player",
+    muted: options.muted,
+    autoPlay: options.autoplay,
+    loop: options.loop,
+    poster: options.poster,
+    controls: options.controls,
+    ref: rootRef,
+    src: source.src
+  }, React__default.createElement("source", {
+    src: source.src,
+    type: source.type
+  }), React__default.createElement("track", {
+    kind: "captions"
+  })));
+};
+
+Video.defaultProps = defaultProps;
+Video.displayName = 'NutVideo';
+export { Video as V };