@tarojsx/ui
Version:
We reinvents the UI for Taro3+
89 lines • 4.29 kB
JavaScript
import React, { useMemo, useCallback } from 'react';
import Taro from '@tarojs/taro';
import classNames from 'classnames';
import { View, Image } from '@tarojs/components';
import { uuid } from './utils';
import '../style/ImagePicker.scss';
export const ImagePicker = (props) => {
const { className, style = {}, files = [], mode = 'aspectFill', showAddBtn = true, multiple = false, length = 4, count, limit = Number.MAX_SAFE_INTEGER, sizeType, sourceType, onChange, onImageClick, onFail, } = props;
const matrix = useMemo(() => {
const matrix = [];
const showAdd = showAddBtn && files.length < limit;
const col = length <= 0 ? 1 : length;
const row = Math.ceil((showAdd ? files.length + 1 : files.length) / col);
for (let i = 0; i < row; i++) {
if (i === row - 1) {
// 最后一行数据加上添加按钮
const lastArr = files.slice(i * col);
if (lastArr.length < col) {
if (showAdd) {
lastArr.push({ type: 'btn', uuid: uuid() });
}
// 填补剩下的空列
for (let j = lastArr.length; j < col; j++) {
lastArr.push({ type: 'blank', uuid: uuid() });
}
}
matrix.push(lastArr);
}
else {
matrix.push(files.slice(i * col, (i + 1) * col));
}
}
return matrix;
}, [files, length, limit, showAddBtn]);
const chooseFile = useCallback(async () => {
const filePathName = process.env.TARO_ENV === 'alipay' ? 'apFilePaths' : 'tempFiles';
const params = {};
if (multiple) {
params.count = 99;
}
if (count) {
params.count = count;
}
if (limit) {
params.count = limit - files.length;
}
if (sizeType) {
params.sizeType = sizeType;
}
if (sourceType) {
params.sourceType = sourceType;
}
try {
const res = await Taro.chooseImage(params);
const targetFiles = res.tempFilePaths.map((path, index) => ({
url: path,
file: res[filePathName][index],
}));
const newFiles = files.concat(targetFiles);
onChange(newFiles, 'add');
}
catch (err) {
onFail && onFail(err);
}
}, [files, multiple, count, limit, sizeType, sourceType]);
const handleImageClick = useCallback((index) => {
onImageClick && onImageClick(index, files[index]);
}, [onImageClick, files]);
const handleImageRemove = useCallback((index) => {
if (process.env.TARO_ENV === 'h5') {
window.URL.revokeObjectURL(files[index].url);
}
const newFiles = files.filter((_, i) => i !== index);
onChange && onChange(newFiles, 'remove', index);
}, [onChange, files]);
return (React.createElement(View, { className: classNames('at-image-picker', className), style: style }, matrix.map((row, i) => (React.createElement(View, { className: "at-image-picker__flex-box", key: i + 1 }, row.map((item, j) => item.url ? (React.createElement(View, { className: "at-image-picker__flex-item", key: i * length + j },
React.createElement(View, { className: "at-image-picker__item" },
React.createElement(View, { className: "at-image-picker__remove-btn", onClick: (e) => {
e.stopPropagation();
handleImageRemove(i * length + j);
} }),
React.createElement(Image, { className: "at-image-picker__preview-img", mode: mode, src: item.url, onClick: () => handleImageClick(i * length + j) })))) : (React.createElement(View, { className: "at-image-picker__flex-item", key: i * length + j }, item.type === 'btn' && (React.createElement(View, { className: "at-image-picker__item at-image-picker__choose-btn", onClick: (e) => {
e.stopPropagation();
chooseFile();
} },
React.createElement(View, { className: "add-bar" }),
React.createElement(View, { className: "add-bar" })))))))))));
};
//# sourceMappingURL=ImagePicker.js.map