antd-mobile/lib/image-picker/index.js

基于 React 的移动设计规范实现

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports["default"] = undefined;

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var React = _interopRequireWildcard(_react);

var _reactNative = require('react-native');

var _style = require('./style/');

var _style2 = _interopRequireDefault(_style);

var _ImageRoll = require('./ImageRoll');

var _ImageRoll2 = _interopRequireDefault(_ImageRoll);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj["default"] = obj; return newObj; } }

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

var ImagePicker = function (_React$Component) {
    (0, _inherits3["default"])(ImagePicker, _React$Component);

    function ImagePicker(props) {
        (0, _classCallCheck3["default"])(this, ImagePicker);

        var _this = (0, _possibleConstructorReturn3["default"])(this, _React$Component.call(this, props));

        _this.onPressIn = function () {
            var styles = _this.props.styles;
            _this.plusWrap.setNativeProps({
                style: [styles.item, styles.size, styles.plusWrapHighlight]
            });
        };
        _this.onPressOut = function () {
            var styles = _this.props.styles;
            _this.plusWrap.setNativeProps({
                style: [styles.item, styles.size, styles.plusWrapNormal]
            });
        };
        // TODO 先统一采用 CameraRoll 形式，注释代码勿删
        // openPickerDialog(type) {
        //   ImagePickerIOS[type]({}, (imageUrl) => {
        //     // 由于性能问题，不能在这里转换 base64， 需要利用 native 模块;
        //     // 这里回调 assets-library, 交给业务自己实现转换 base64
        //     // https://github.com/facebook/react-native/issues/201
        //     console.log(imageUrl)
        //     this.addImage({url: imageUrl});
        //   }, error => {
        //     if (error) {
        //       console.warn(error.message || `{type} error`);
        //       return;
        //     }
        //   });
        // }
        _this.showPicker = function () {
            // if (Platform.OS === "ios") {
            //   ImagePickerIOS.canUseCamera(canUse => {
            //     if (canUse) {
            //       ActionSheetIOS.showActionSheetWithOptions({
            //         options: ['Take Photo', 'Photo Libray', 'Cancel'],
            //         cancelButtonIndex: 2,
            //       }, (btnIndex) => {
            //         if (btnIndex == 0) {
            //           this.openPickerDialog('openCameraDialog');
            //           ImagePickerIOS.openCameraDialog({})
            //         } else if (btnIndex == 1) {
            //           this.openPickerDialog('openSelectDialog');
            //         }
            //       });
            //     } else {
            //       this.openPickerDialog('openSelectDialog');
            //     }
            //   });
            // } else {
            _this.setState({
                visible: true
            });
            // }
        };
        _this.hideImageRoll = function () {
            _this.setState({
                visible: false
            });
        };
        _this.state = {
            visible: false
        };
        return _this;
    }

    ImagePicker.prototype.addImage = function addImage(imageObj) {
        if (!imageObj.url) {
            imageObj.url = imageObj.uri;
            delete imageObj.uri;
        }
        var newImages = this.props.files.concat(imageObj);
        this.props.onChange(newImages, 'add');
    };

    ImagePicker.prototype.removeImage = function removeImage(idx) {
        var newImages = [];
        this.props.files.forEach(function (image, index) {
            if (index !== idx) {
                newImages.push(image);
            }
        });
        this.props.onChange(newImages, 'remove', idx);
    };

    ImagePicker.prototype.render = function render() {
        var _this2 = this;

        var _props = this.props;
        var styles = _props.styles;
        var files = _props.files;

        return React.createElement(
            _reactNative.View,
            { style: styles.container },
            files.map(function (item, index) {
                return React.createElement(
                    _reactNative.View,
                    { key: index, style: [styles.item, styles.size] },
                    React.createElement(_reactNative.Image, { source: { uri: item.url }, style: [styles.size, styles.image] }),
                    React.createElement(
                        _reactNative.TouchableWithoutFeedback,
                        { onPress: function onPress() {
                                return _this2.removeImage(index);
                            } },
                        React.createElement(
                            _reactNative.View,
                            { style: styles.closeWrap },
                            React.createElement(
                                _reactNative.Text,
                                { style: styles.closeText },
                                '×'
                            )
                        )
                    )
                );
            }),
            React.createElement(
                _reactNative.TouchableWithoutFeedback,
                { onPress: this.showPicker, onPressIn: this.onPressIn, onPressOut: this.onPressOut },
                React.createElement(
                    _reactNative.View,
                    { ref: function ref(conponent) {
                            return _this2.plusWrap = conponent;
                        }, style: [styles.item, styles.size, styles.plusWrap, styles.plusWrapNormal] },
                    React.createElement(
                        _reactNative.Text,
                        { style: [styles.plusNormal, styles.plusText] },
                        '+'
                    )
                )
            ),
            this.state.visible ? React.createElement(_ImageRoll2["default"], { onCancel: this.hideImageRoll, onSelected: function onSelected(imgObj) {
                    return _this2.addImage(imgObj);
                } }) : null
        );
    };

    return ImagePicker;
}(React.Component);

exports["default"] = ImagePicker;

ImagePicker.defaultProps = {
    styles: _style2["default"],
    onChange: function onChange() {},

    files: []
};
module.exports = exports['default'];