betanet-mini-ui/lib/components/BmPicture/PicturePicker.js

为 Taro 而设计的 UI Library

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _classnames = _interopRequireDefault(require("classnames"));

var _react = _interopRequireDefault(require("react"));

var _components = require("@tarojs/components");

var _taro = _interopRequireDefault(require("@tarojs/taro"));

var _index = _interopRequireDefault(require("../../index"));

var _tool = require("../../utils/tool");

// 生成 jsx 二维矩阵
var generateMatrix = function generateMatrix(files, col, showAddBtn) {
  var matrix = [];
  var length = showAddBtn ? files.length + 1 : files.length;
  var row = Math.ceil(length / col);

  for (var i = 0; i < row; i++) {
    if (i === row - 1) {
      // 最后一行数据加上添加按钮
      var lastArr = files.slice(i * col);

      if (lastArr.length < col) {
        if (showAddBtn) {
          lastArr.push({
            type: 'btn',
            uuid: (0, _tool.uuid)()
          });
        } // 填补剩下的空列


        for (var j = lastArr.length; j < col; j++) {
          lastArr.push({
            type: 'blank',
            uuid: (0, _tool.uuid)()
          });
        }
      }

      matrix.push(lastArr);
    } else {
      matrix.push(files.slice(i * col, (i + 1) * col));
    }
  }

  return matrix;
};

var PicturePicker = function PicturePicker(props) {
  var _props$className = props.className,
      className = _props$className === void 0 ? '' : _props$className,
      _props$customStyle = props.customStyle,
      customStyle = _props$customStyle === void 0 ? '' : _props$customStyle,
      _props$value = props.value,
      value = _props$value === void 0 ? [] : _props$value,
      _props$max = props.max,
      max = _props$max === void 0 ? 99 : _props$max,
      _props$mode = props.mode,
      mode = _props$mode === void 0 ? 'aspectFill' : _props$mode,
      _props$length = props.length,
      length = _props$length === void 0 ? 4 : _props$length,
      _props$showAddBtn = props.showAddBtn,
      showAddBtn = _props$showAddBtn === void 0 ? true : _props$showAddBtn,
      _props$onChange = props.onChange,
      onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
      _props$onImageClick = props.onImageClick,
      onImageClick = _props$onImageClick === void 0 ? function () {} : _props$onImageClick,
      _props$onFail = props.onFail,
      onFail = _props$onFail === void 0 ? function () {} : _props$onFail,
      _props$editable = props.editable,
      editable = _props$editable === void 0 ? true : _props$editable;

  var handleRemoveImg = function handleRemoveImg(idx, event) {
    event.stopPropagation();
    event.preventDefault();

    if (_index.default.ENV === _taro.default.ENV_TYPE.WEB) {
      window.URL.revokeObjectURL(value[idx].url);
    }

    var rFiles = [];
    var dFiles = [];
    value.forEach(function (v, i) {
      if (i !== idx) {
        rFiles.push(v);
      } else {
        dFiles.push(v);
      }
    });
    onChange(rFiles, 'remove', dFiles, idx);
  };

  var handleImageClick = function handleImageClick(idx, item) {
    _index.default.previewImage({
      current: item.url,
      urls: value.map(function (item) {
        return item.url;
      })
    });

    onImageClick && onImageClick(idx, value[idx]);
  };

  var analysisFiles = function analysisFiles(flle) {
    switch (_index.default.ENV) {
      case 'dd':
        return {
          path: flle === null || flle === void 0 ? void 0 : flle.path,
          size: flle === null || flle === void 0 ? void 0 : flle.size,
          type: flle === null || flle === void 0 ? void 0 : flle.fileType,
          name: _index.default.uuid() + '.' + (flle === null || flle === void 0 ? void 0 : flle.fileType)
        };

      default:
        var path = (flle === null || flle === void 0 ? void 0 : flle.path) || '';
        var suffix = path === null || path === void 0 ? void 0 : path.slice(path === null || path === void 0 ? void 0 : path.lastIndexOf('.'));
        var filename = _index.default.uuid() + suffix;
        return {
          path: path,
          size: flle === null || flle === void 0 ? void 0 : flle.size,
          type: suffix.slice(1),
          name: filename
        };
    }
  };

  var chooseFile = function chooseFile() {
    var multiple = props.multiple,
        sizeType = props.sizeType,
        sourceType = props.sourceType;
    var filePathName = _index.default.ENV === 'dd' ? 'files' : 'tempFiles';
    var params = {};

    if (multiple) {
      params.count = max ? max - (value === null || value === void 0 ? void 0 : value.length) : 99;
    } else {
      params.count = 1;
    }

    if (sizeType) {
      params.sizeType = sizeType;
    }

    if (sourceType) {
      params.sourceType = sourceType;
    }

    _index.default.chooseImage(params).then(function (res) {
      var targetFiles = res.tempFilePaths.map(function (path, i) {
        return {
          url: path,
          file: analysisFiles(res[filePathName][i])
        };
      });
      var newFiles = value.concat(targetFiles);
      onChange(newFiles, 'add', targetFiles);
    }).catch(onFail);
  };

  var rowLength = length <= 0 ? 1 : length; // 行数

  var matrix = generateMatrix(value, rowLength, showAddBtn);
  var rootCls = (0, _classnames.default)('bm-image-picker', className);
  return /*#__PURE__*/_react.default.createElement(_components.View, {
    className: rootCls,
    style: customStyle
  }, matrix.map(function (row, i) {
    return /*#__PURE__*/_react.default.createElement(_components.View, {
      className: "bm-image-picker__flex-box",
      key: i + 1
    }, row.map(function (item, j) {
      var _item$file, _item$file2, _item$file3;

      var errorCls = ((_item$file = item.file) === null || _item$file === void 0 ? void 0 : _item$file.status) === 'error' ? 'bm-image-picker__item-error' : '';
      return item.url ? /*#__PURE__*/_react.default.createElement(_components.View, {
        className: "bm-image-picker__flex-item",
        key: i * length + j
      }, /*#__PURE__*/_react.default.createElement(_components.View, {
        className: (0, _classnames.default)('bm-image-picker__item', errorCls)
      }, editable && /*#__PURE__*/_react.default.createElement(_components.View, {
        className: "bm-image-picker__remove-btn",
        onClick: function onClick(e) {
          return handleRemoveImg(i * length + j, e);
        }
      }), /*#__PURE__*/_react.default.createElement(_components.Image, {
        className: "bm-image-picker__preview-img",
        mode: mode,
        src: ((_item$file2 = item.file) === null || _item$file2 === void 0 ? void 0 : _item$file2.path) || item.url,
        onClick: function onClick(e) {
          return handleImageClick(i * length + j, item);
        }
      })), ((_item$file3 = item.file) === null || _item$file3 === void 0 ? void 0 : _item$file3.status) === 'uploading' && /*#__PURE__*/_react.default.createElement(_components.View, {
        className: "loading-con"
      }, /*#__PURE__*/_react.default.createElement(_components.View, {
        className: "loading-mask"
      }), /*#__PURE__*/_react.default.createElement(_components.Image, {
        className: "loading-animation",
        src: require('../../assets/images/loading.svg')
      }))) : /*#__PURE__*/_react.default.createElement(_components.View, {
        className: "bm-image-picker__flex-item",
        key: 'empty_' + i * length + j
      }, editable && item.type === 'btn' && max > (value === null || value === void 0 ? void 0 : value.length) && /*#__PURE__*/_react.default.createElement(_components.View, {
        className: "bm-image-picker__item bm-image-picker__choose-btn",
        onClick: chooseFile
      }, /*#__PURE__*/_react.default.createElement(_components.View, {
        className: "add-bar"
      }), /*#__PURE__*/_react.default.createElement(_components.View, {
        className: "add-bar"
      })));
    }));
  }));
};

var _default = PicturePicker;
exports.default = _default;