@sishuguojixuefu/react-native-form
Version:
145 lines • 6.35 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 no-restricted-syntax */
const react_1 = __importStar(require("react"));
const react_native_1 = require("react-native");
const antd_mobile_rn_1 = require("@sishuguojixuefu/antd-mobile-rn");
const Label_1 = __importDefault(require("./helper/Label"));
const { CheckboxItem } = antd_mobile_rn_1.Checkbox;
class SSMultiSelectView extends react_1.Component {
constructor(props) {
super(props);
this.setModalVisible = (visible) => {
this.setState({ modalVisible: visible });
};
this.checkBoxChange = (event, item) => {
const { dataArr } = this.state;
if (event.target.checked) {
item.checked = true;
const tempDataArr = dataArr.slice(0);
tempDataArr.forEach(temp => {
if (temp.label === item.label) {
item.checked = true;
}
});
this.setState({ dataArr: tempDataArr }, () => { });
}
else {
item.checked = false;
const tempDataArr = dataArr.slice(0);
tempDataArr.forEach(temp => {
if (temp.label === item.label) {
item.checked = false;
}
});
this.setState({ dataArr: tempDataArr });
}
};
this.sureButtonAction = () => {
const { onChange } = this.props;
const { dataArr } = this.state;
const selectArr = dataArr.filter(temp => temp.checked === true);
this.setState({ selectedArr: selectArr }, () => {
onChange(this.state.selectedArr.map(item => item.value));
this.setModalVisible(false);
});
};
this.cancelButtonAction = () => {
const { dataArr } = this.state;
const tempDataArr = dataArr;
const tempSelectedArr = this.state.selectedArr;
for (const item of tempDataArr) {
item.checked = false;
}
for (const sItem of tempSelectedArr) {
for (const item of tempDataArr) {
if (sItem.value === item.value) {
item.checked = true;
}
}
}
this.setState({ dataArr: tempDataArr });
this.setModalVisible(false);
};
this.renderItem = ({ item, index }) => {
return (react_1.default.createElement(CheckboxItem, { key: index, onChange: event => this.checkBoxChange(event, item), defaultChecked: item.checked, last: true, wrap: true }, item.label));
};
this.state = {
modalVisible: false,
selectedArr: [],
dataArr: [],
};
}
componentDidMount() {
this.setState({
dataArr: this.props.options.map(item => {
return {
label: item,
value: item,
checked: !!this.props.initialValue.find(iItem => item === iItem),
};
}),
selectedArr: this.props.initialValue.map(item => {
return { label: item, value: item, checked: true };
}) || [],
});
}
render() {
const { label, required, placeholder } = this.props;
const { dataArr, selectedArr, modalVisible } = this.state;
return (react_1.default.createElement(react_native_1.View, null,
react_1.default.createElement(antd_mobile_rn_1.List.Item, { wrap: true, arrow: "horizontal", style: { paddingLeft: 0 }, last: true, extra: (selectedArr && selectedArr.map(item => item.label).toString()) || placeholder, onPress: () => this.setModalVisible(true) },
react_1.default.createElement(Label_1.default, { required: required, label: label })),
react_1.default.createElement(antd_mobile_rn_1.Modal, { popup: true, visible: modalVisible, maskClosable: true, animationType: "slide-up", onClose: () => this.setModalVisible(false) },
react_1.default.createElement(react_native_1.View, { style: styles.ModalView },
react_1.default.createElement(react_native_1.View, { style: styles.ModalTopButtonView },
react_1.default.createElement(react_native_1.TouchableOpacity, { activeOpacity: 0.5, style: styles.ButtonStyle, onPress: this.cancelButtonAction },
react_1.default.createElement(react_native_1.Text, { style: styles.leftText }, "\u53D6\u6D88")),
react_1.default.createElement(react_native_1.TouchableOpacity, { activeOpacity: 0.5, style: styles.ButtonRightStyle, onPress: this.sureButtonAction },
react_1.default.createElement(react_native_1.Text, { style: styles.rightText }, "\u786E\u5B9A"))),
dataArr && dataArr.length ? (react_1.default.createElement(antd_mobile_rn_1.List, null, dataArr.map((item, index) => this.renderItem({ item, index })))) : null))));
}
}
exports.default = SSMultiSelectView;
const styles = react_native_1.StyleSheet.create({
ButtonRightStyle: {
borderColor: '#fff',
flex: 1,
},
ButtonStyle: {
borderColor: '#fff',
flex: 1,
},
ModalTopButtonView: {
color: 'gray',
flexDirection: 'row',
height: 50,
paddingHorizontal: 40,
paddingVertical: 12,
},
ModalView: {
color: '#dddddd',
flexDirection: 'column',
},
leftText: {
color: '#1DA1EB',
fontSize: 18,
textAlign: 'left',
},
rightText: {
color: '#1DA1EB',
fontSize: 18,
textAlign: 'right',
},
});
//# sourceMappingURL=SSMultiSelectView.js.map