@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
356 lines (355 loc) • 16.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Uploader = Uploader;
exports.default = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _taro = require("@tarojs/taro");
var _react = require("react");
var _components = require("@tarojs/components");
var _index = _interopRequireDefault(require("../loading/index"));
var _index2 = _interopRequireDefault(require("../icon/index"));
var _validator = require("../common/validator");
var _type = require("../utils/type");
var _defaultProps = require("../default-props");
var computed = _interopRequireWildcard(require("./wxs"));
var _utils = require("./utils");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["disabled", "multiple", "uploadText", "useBeforeRead", "previewSize", "name", "accept", "maxSize", "maxCount", "deletable", "showUpload", "previewImage", "previewFullImage", "imageFit", "uploadIcon", "capture", "compressed", "maxDuration", "sizeType", "camera", "onError", "onDelete", "onBeforeRead", "onAfterRead", "onOversize", "onClickPreview", "onClickUpload", "style", "className", "children"];
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
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) { (0, _defineProperty2.default)(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; }
function Uploader(props) {
var _useState = (0, _react.useState)((0, _defaultProps.get)().Uploader),
_useState2 = (0, _slicedToArray2.default)(_useState, 1),
d = _useState2[0];
var _useState3 = (0, _react.useState)({
lists: [],
isInCount: true
}),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
state = _useState4[0],
setState = _useState4[1];
var _d$props = _objectSpread(_objectSpread({}, d), props),
disabled = _d$props.disabled,
multiple = _d$props.multiple,
uploadText = _d$props.uploadText,
useBeforeRead = _d$props.useBeforeRead,
_d$props$previewSize = _d$props.previewSize,
previewSize = _d$props$previewSize === void 0 ? 160 : _d$props$previewSize,
_d$props$name = _d$props.name,
name = _d$props$name === void 0 ? '' : _d$props$name,
_d$props$accept = _d$props.accept,
accept = _d$props$accept === void 0 ? 'image' : _d$props$accept,
_d$props$maxSize = _d$props.maxSize,
maxSize = _d$props$maxSize === void 0 ? Number.MAX_VALUE : _d$props$maxSize,
_d$props$maxCount = _d$props.maxCount,
maxCount = _d$props$maxCount === void 0 ? 100 : _d$props$maxCount,
_d$props$deletable = _d$props.deletable,
deletable = _d$props$deletable === void 0 ? true : _d$props$deletable,
_d$props$showUpload = _d$props.showUpload,
showUpload = _d$props$showUpload === void 0 ? true : _d$props$showUpload,
_d$props$previewImage = _d$props.previewImage,
previewImage = _d$props$previewImage === void 0 ? true : _d$props$previewImage,
_d$props$previewFullI = _d$props.previewFullImage,
previewFullImage = _d$props$previewFullI === void 0 ? true : _d$props$previewFullI,
_d$props$imageFit = _d$props.imageFit,
imageFit = _d$props$imageFit === void 0 ? 'aspectFill' : _d$props$imageFit,
_d$props$uploadIcon = _d$props.uploadIcon,
uploadIcon = _d$props$uploadIcon === void 0 ? 'photograph' : _d$props$uploadIcon,
capture = _d$props.capture,
compressed = _d$props.compressed,
maxDuration = _d$props.maxDuration,
sizeType = _d$props.sizeType,
camera = _d$props.camera,
onError = _d$props.onError,
onDelete = _d$props.onDelete,
onBeforeRead = _d$props.onBeforeRead,
onAfterRead = _d$props.onAfterRead,
onOversize = _d$props.onOversize,
onClickPreview = _d$props.onClickPreview,
onClickUpload = _d$props.onClickUpload,
style = _d$props.style,
className = _d$props.className,
children = _d$props.children,
others = (0, _objectWithoutProperties2.default)(_d$props, _excluded);
var fileList = (0, _react.useMemo)(function () {
return (0, _type.isArray)(props.fileList) ? props.fileList : [];
}, [props.fileList]);
var formatFileList = (0, _react.useCallback)(function (fileList) {
var lists = fileList.map(function (item) {
return Object.assign(Object.assign({}, item), {
isImage: (0, _utils.isImageFile)(item),
isVideo: (0, _utils.isVideoFile)(item),
deletable: (0, _validator.isBoolean)(item.deletable) ? item.deletable : true
});
});
setState(function (state) {
return _objectSpread(_objectSpread({}, state), {}, {
lists: lists,
isInCount: lists.length < maxCount
});
});
}, [maxCount]);
var getDetail = (0, _react.useCallback)(function (index) {
return {
name: name,
index: index == null ? fileList === null || fileList === void 0 ? void 0 : fileList.length : index
};
}, [fileList === null || fileList === void 0 ? void 0 : fileList.length, name]);
var _onAfterRead = (0, _react.useCallback)(function (event) {
var file = event.detail.file;
var oversize = Array.isArray(file) ? file.some(function (item) {
return item.size > maxSize;
}) : file.size > maxSize;
if (oversize) {
event.detail = Object.assign({
file: file
}, getDetail());
onOversize === null || onOversize === void 0 ? void 0 : onOversize(event);
return;
}
event.detail = Object.assign({
file: file
}, getDetail());
onAfterRead === null || onAfterRead === void 0 ? void 0 : onAfterRead(event);
}, [getDetail, maxSize, onAfterRead, onOversize]);
var _onBeforeRead = (0, _react.useCallback)(function (event) {
var file = event.detail.file;
var res = true;
if (useBeforeRead) {
res = new Promise(function (resolve, reject) {
var params = Object.assign(Object.assign({
file: file
}, getDetail()), {
callback: function callback(ok) {
ok ? resolve() : reject();
}
});
event.detail = params;
onBeforeRead === null || onBeforeRead === void 0 ? void 0 : onBeforeRead(event);
});
}
if (!res) {
return;
}
if ((0, _validator.isPromise)(res)) {
res.then(function (data) {
event.detail = {
file: data || file
};
return _onAfterRead(event);
}).catch(function (err) {
console.log('err: ', err);
});
} else {
event.detail = {
file: file
};
_onAfterRead(event);
}
}, [_onAfterRead, getDetail, onBeforeRead, useBeforeRead]);
var startUpload = (0, _react.useCallback)(function (event) {
if (disabled) return;
onClickUpload === null || onClickUpload === void 0 ? void 0 : onClickUpload(event);
(0, _utils.chooseFile)({
accept: accept,
multiple: multiple,
capture: capture,
compressed: compressed,
maxDuration: maxDuration,
sizeType: sizeType,
camera: camera,
maxCount: maxCount - state.lists.length
}).then(function (res) {
Object.defineProperty(event, 'detail', {
value: {
file: multiple ? res : res[0]
},
writable: true
});
_onBeforeRead(event);
}).catch(function (error) {
onError === null || onError === void 0 ? void 0 : onError(error);
});
}, [_onBeforeRead, disabled, maxCount, multiple, onError, onClickUpload, state.lists.length, accept, camera, capture, compressed, maxDuration, sizeType]);
var deleteItem = (0, _react.useCallback)(function (event) {
var index = event.currentTarget.dataset.index;
var params = Object.assign(Object.assign({}, getDetail(index)), {
file: fileList === null || fileList === void 0 ? void 0 : fileList[index],
fileList: fileList && (0, _type.isArray)(fileList) ? (0, _toConsumableArray2.default)(fileList) : fileList
});
Object.defineProperty(event, 'detail', {
value: params,
writable: true
});
onDelete === null || onDelete === void 0 ? void 0 : onDelete(event);
}, [fileList, getDetail, onDelete]);
var onPreviewImage = (0, _react.useCallback)(function (event) {
if (!previewFullImage) return;
var index = event.currentTarget.dataset.index;
var item = state.lists[index];
(0, _taro.previewImage)({
urls: state.lists.filter(function (item) {
return (0, _utils.isImageFile)(item);
}).map(function (item) {
return item.url;
}),
current: item.url,
fail: function fail() {
(0, _taro.showToast)({
title: '预览图片失败',
icon: 'none'
});
}
});
}, [previewFullImage, state.lists]);
var onPreviewVideo = (0, _react.useCallback)(function () {
if (!previewFullImage) return;
// const { index } = event.currentTarget.dataset
if (process.env.TARO_ENV === 'weapp') {
// eslint-disable-next-line
// @ts-ignore
wx.previewMedia({
sources: state.lists.filter(function (item) {
return (0, _utils.isVideoFile)(item);
}).map(function (item) {
return Object.assign(Object.assign({}, item), {
type: 'video'
});
}),
// current: index,
// success() {
// Taro.showToast({ title: '预览视频成功', icon: 'none' })
// },
fail: function fail() {
(0, _taro.showToast)({
title: '预览视频失败',
icon: 'none'
});
}
});
}
}, [previewFullImage, state.lists]);
var onPreviewFile = (0, _react.useCallback)(function (event) {
var index = event.currentTarget.dataset.index;
(0, _taro.openDocument)({
filePath: state.lists[index].url,
showMenu: true
});
}, [state.lists]);
var _onClickPreview = (0, _react.useCallback)(function (event) {
var index = event.currentTarget.dataset.index;
var item = state.lists[index];
Object.defineProperty(event, 'detail', {
value: Object.assign(Object.assign({}, item), getDetail(index)),
writable: true
});
onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview(event);
}, [getDetail, onClickPreview, state.lists]);
(0, _react.useEffect)(function () {
formatFileList(fileList);
// eslint-disable-next-line
}, [fileList]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, _objectSpread(_objectSpread({
className: "van-uploader ".concat(className),
style: style
}, others), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: "van-uploader__wrapper",
children: [previewImage && state.lists.map(function (item, index) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: "van-uploader__preview",
"data-index": index,
onClick: _onClickPreview,
children: [item.isImage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Image, {
mode: imageFit,
src: item.thumb || item.url
// eslint-disable-next-line
// @ts-ignore
,
alt: item.name || '图片' + index,
className: "van-uploader__preview-image",
style: computed.sizeStyle({
previewSize: previewSize
}),
"data-index": index,
onClick: onPreviewImage
}) : item.isVideo ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Video, {
src: item.url,
title: item.name || '视频' + index,
poster: item.thumb,
autoplay: item.autoplay,
className: "van-uploader__preview-image",
style: computed.sizeStyle({
previewSize: previewSize
}),
"data-index": index,
onClick: onPreviewVideo
}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: "van-uploader__file",
style: computed.sizeStyle({
previewSize: previewSize
}),
"data-index": index,
onClick: onPreviewFile,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.default, {
name: "description",
className: "van-uploader__file-icon"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "van-uploader__file-name van-ellipsis",
children: item.name || item.url
})]
}), (item.status === 'uploading' || item.status === 'failed') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: "van-uploader__mask",
children: [item.status === 'failed' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.default, {
name: "close",
className: "van-uploader__mask-icon"
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {
className: "van-uploader__loading"
}), item.message && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
className: "van-uploader__mask-message",
children: item.message
})]
}), deletable && item.deletable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
"data-index": index,
className: "van-uploader__preview-delete",
onClick: deleteItem,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.default, {
name: "cross",
className: "van-uploader__preview-delete-icon"
})
})]
}, item.index || index);
}), state.isInCount && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "van-uploader__slot",
onClick: startUpload,
children: children
}), showUpload && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: 'van-uploader__upload ' + (disabled ? 'van-uploader__upload--disabled' : ''),
style: computed.sizeStyle({
previewSize: previewSize
}),
onClick: startUpload,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.default, {
name: uploadIcon,
className: "van-uploader__upload-icon"
}), uploadText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
className: "van-uploader__upload-text",
children: uploadText
})]
})]
})]
})
}));
}
var _default = Uploader;
exports.default = _default;