yylib-quick-mobile/source/yylib/image-picker/YYFilePicker.js

yylib-quick-mobile

'use strict';

var _imagePicker = require('antd-mobile/lib/image-picker');

var _imagePicker2 = _interopRequireDefault(_imagePicker);

var _toast = require('antd-mobile/lib/toast');

var _toast2 = _interopRequireDefault(_toast);

var _modal = require('antd-mobile/lib/modal');

var _modal2 = _interopRequireDefault(_modal);

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

require('antd-mobile/lib/image-picker/style/css');

require('antd-mobile/lib/toast/style/css');

require('antd-mobile/lib/modal/style/css');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _FunctionUtil = require('../../utils/FunctionUtil');

var _UploadFileUtils = require('../../utils/UploadFileUtils');

var _UploadFileUtils2 = _interopRequireDefault(_UploadFileUtils);

var _AuthToken = require('../../utils/AuthToken');

var _AuthToken2 = _interopRequireDefault(_AuthToken);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

require('./YYFilePicker.css');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var alert = _modal2.default.alert;

var YYFilePicker = function (_Component) {
    _inherits(YYFilePicker, _Component);

    function YYFilePicker() {
        var _ref;

        var _temp, _this, _ret;

        _classCallCheck(this, YYFilePicker);

        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
            args[_key] = arguments[_key];
        }

        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = YYFilePicker.__proto__ || Object.getPrototypeOf(YYFilePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
            files: _this.props.files
        }, _this.onChange = function (files, type, index) {
            if (type == 'add') {} else if (type == 'remove') {
                _this.deleteFile(index);
            } else {
                console.log('上传错误！');
            }
        }, _this.deleteFile = function (index) {
            var that = _this;
            var alertInstance = alert('删除', '删除后不可恢复!', [{
                text: '取消', onPress: function onPress() {
                    alertInstance.close();
                }, style: 'default'
            }, {
                text: '确定', onPress: function onPress() {
                    if (_this.props.source.sourceType) {
                        var params = {
                            id: _this.props.source.sourceId,
                            billType: _this.props.source.billType,
                            sourceType: _this.props.source.sourceType,
                            attachIds: _this.state.files[index].gid
                        };
                        _UploadFileUtils2.default.delAttach(params, function () {
                            that.setState({
                                files: that.state.files.filter(function (e, i) {
                                    return i != index;
                                })
                            }, function () {
                                if ((0, _FunctionUtil.isFunction)(that.props.onChange)) {
                                    that.props.onChange(_this.state.files);
                                }
                            });
                        });
                    } else {
                        _this.setState({
                            files: that.state.files.filter(function (e, i) {
                                return i != index;
                            })
                        }, function () {
                            if ((0, _FunctionUtil.isFunction)(that.props.onChange)) {
                                that.props.onChange(_this.state.files);
                            }
                        });
                    }
                }
            }]);
        }, _this.onAddImageClick = function (e) {
            var _this$props = _this.props,
                orderQuality = _this$props.orderQuality,
                orderWidth = _this$props.orderWidth;

            var that = _this;
            e.preventDefault();
            var params = {
                billType: _this.props.source.billType,
                sourceType: _this.props.source.sourceType,
                sourceId: _this.props.source.sourceId,
                userId: _AuthToken2.default.getUserId(),
                userName: _AuthToken2.default.getUserName()
            };
            if (orderQuality) {
                params.orderQuality = orderQuality;
            }
            if (orderWidth) {
                params.orderWidth = orderWidth;
            }
            var file = {};
            if (window.YYPlugin) {
                window.YYPlugin.call("CommonPlugin", "postFile", params, function success(result) {
                    file.gid = result.gid;
                    file.name = result.fileName;
                    file.url = result.filePath;
                    file.backData = result;
                    that.setState({
                        files: that.state.files.concat(file)
                    }, function () {
                        if ((0, _FunctionUtil.isFunction)(that.props.onChange)) {
                            that.props.onChange(that.state.files);
                        }
                    });
                });
            } else {
                _toast2.default.info('请在手机上进行调试或检查yyplus的引入！');
            }
        }, _temp), _possibleConstructorReturn(_this, _ret);
    }

    _createClass(YYFilePicker, [{
        key: 'componentDidMount',
        value: function componentDidMount() {
            if (this.props.source) {
                this.loadAttachList(this.props.source);
            }
        }
    }, {
        key: 'componentWillReceiveProps',
        value: function componentWillReceiveProps(nextProps) {
            if (this.props.source && this.props.source.sourceId != nextProps.source.sourceId) {
                this.loadAttachList(this.props.source);
            }
            if (JSON.stringify(nextProps.files) !== JSON.stringify(this.props.files)) {
                this.setState({
                    files: nextProps.files
                });
            }
        }
    }, {
        key: 'loadAttachList',
        value: function loadAttachList(source) {
            var params = {
                id: source.sourceId,
                billType: source.billType,
                type: source.sourceType
            };
            var that = this;
            if (source.sourceId && source.sourceType && source.billType) {
                _UploadFileUtils2.default.loadAttachList(params, function (data) {
                    if (data.length > 0) {
                        that.setState({
                            files: data
                        });
                    }
                });
            }
        }
    }, {
        key: 'render',
        value: function render() {
            var _props = this.props,
                disabled = _props.disabled,
                maxSize = _props.maxSize,
                label = _props.label,
                className = _props.className,
                orderQuality = _props.orderQuality,
                orderWidth = _props.orderWidth,
                source = _props.source,
                files = _props.files,
                visible = _props.visible,
                restProps = _objectWithoutProperties(_props, ['disabled', 'maxSize', 'label', 'className', 'orderQuality', 'orderWidth', 'source', 'files', 'visible']);

            var wrapClz = (0, _classnames2.default)('yy-file-picker', !visible && 'hidden', className);
            return _react2.default.createElement(
                'div',
                _extends({}, restProps, { className: wrapClz }),
                label && _react2.default.createElement(
                    'div',
                    { className: 'label' },
                    label
                ),
                _react2.default.createElement(_imagePicker2.default, {
                    files: this.state.files,
                    onChange: disabled ? null : this.onChange,
                    onImageClick: this.onImageClick,
                    selectable: !disabled && this.state.files.length < maxSize,
                    onAddImageClick: this.onAddImageClick
                })
            );
        }
    }]);

    return YYFilePicker;
}(_react.Component);

YYFilePicker.defaultProps = {
    label: '上传文件',
    maxSize: 5,
    disabled: false,
    source: {
        sourceId: '',
        billType: '',
        sourceType: ''
    },
    files: [],
    orderQuality: null,
    orderWidth: null,
    visible: true
};
module.exports = YYFilePicker;