@sishuguojixuefu/react-native-form
Version:
115 lines • 5.28 kB
JavaScript
"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
/* eslint-disable react/no-access-state-in-setstate */
const react_1 = __importStar(require("react"));
const react_native_1 = require("react-native");
const react_native_image_crop_picker_1 = __importDefault(require("react-native-image-crop-picker"));
const react_native_image_zoom_viewer_1 = __importDefault(require("react-native-image-zoom-viewer"));
const antd_mobile_rn_1 = require("@sishuguojixuefu/antd-mobile-rn");
const ErrorTip_1 = __importDefault(require("./helper/ErrorTip"));
const getFieldDecorator_1 = __importDefault(require("../utils/getFieldDecorator"));
const Label_1 = __importDefault(require("./helper/Label"));
class SsImagePickerView extends react_1.Component {
constructor(props) {
super(props);
this.setModalVisible = (visible) => {
this.setState({ modalVisible: visible });
};
this._onChange = value => {
const { onChange } = this.props;
this.setState({ value });
onChange(value);
};
this._clickImgItem = (index) => {
this.setState({ curIndex: index });
this.setModalVisible(true);
};
this._onAddImageClick = async () => {
const { value } = this.state;
const { onChange } = this.props;
try {
const images = await react_native_image_crop_picker_1.default.openPicker({
multiple: true,
waitAnimationEnd: false,
includeExif: true,
forceJpg: true,
maxFiles: 9 - value.length,
compressImageQuality: 0.5,
});
let files = [];
if (Array.isArray(images)) {
files = images.map((item, index) => ({
url: item.path,
id: index,
meta: { ...item },
}));
}
else {
files = [
{
url: images.path,
id: 1,
meta: { ...images },
},
];
}
this.setState({ value: this.state.value.concat(files) });
onChange(this.state.value);
}
catch (error) {
console.log(error);
}
};
this.state = {
value: [],
modalVisible: false,
};
}
componentDidMount() {
this.setState({
value: this.props.initialValue.map(item => {
return {
url: item,
};
}),
});
}
render() {
const { value, curIndex } = this.state;
const { label, required } = this.props;
return (react_1.default.createElement(react_native_1.View, { style: { paddingVertical: 10 } },
react_1.default.createElement(Label_1.default, { required: required, label: label }),
react_1.default.createElement(antd_mobile_rn_1.WhiteSpace, null),
react_1.default.createElement(antd_mobile_rn_1.WingBlank, null,
react_1.default.createElement(antd_mobile_rn_1.ImagePicker, { files: value, onChange: this._onChange, onImageClick: index => this._clickImgItem(index), selectable: value.length < 9, onAddImageClick: this._onAddImageClick })),
react_1.default.createElement(react_native_1.Modal, { visible: this.state.modalVisible, transparent: true, onRequestClose: () => this.setModalVisible(false) },
react_1.default.createElement(react_native_image_zoom_viewer_1.default, { index: curIndex, enableSwipeDown: true, saveToLocalByLongPress: false, imageUrls: value.map(item => {
return {
url: item.url,
};
}), onSwipeDown: () => this.setModalVisible(false), onClick: () => this.setModalVisible(false) }))));
}
}
exports.SsImagePickerView = SsImagePickerView;
class SsImagePicker extends react_1.Component {
componentWillMount() {
const { form, id, initialValue, rules } = this.props;
this.fieldDecorator = getFieldDecorator_1.default(form, id, initialValue, rules);
}
render() {
const { label, required, form, id, onChange, initialValue } = this.props;
return (react_1.default.createElement(ErrorTip_1.default, { error: form.getFieldError(id) }, this.fieldDecorator(react_1.default.createElement(SsImagePickerView, { label: label, required: required, onChange: onChange, initialValue: initialValue }))));
}
}
exports.default = SsImagePicker;
//# sourceMappingURL=SsImagePicker.js.map