import React, { PureComponent } from "react";
import { List, NavBar, Checkbox } from "antd-mobile";
import { Icon } from "antd";
import TouchFeedback from "rmc-feedback";
import NavContentContainer from "./NavContentContainer";
import PanelContentContainer from "./PanelContentContainer";
export default class Checkbox_ extends PureComponent {
constructor(props) {
super(props);
this.state = { select: [] };
}
componentWillReceiveProps(props) {
const { show, init } = props;
if (show) {
this.setState({ select: init || [] });
}
}
getDefaultChecked = value => {
const { init } = this.props;
const result = (init || []).filter(i => i === value);
return result.length !== 0;
};
render() {
const { show, data, title, hide, save } = this.props;
const { select } = this.state;
return (
<div
style={{
display: show ? "block" : "none",
zIndex: 1,
position: "absolute",
backgroundColor: "#fff",
overflowY: "auto",
top: 0,
bottom: 0,
left: 0,
right: 0
}}
>
<NavBar
className="global-navbar"
mode="dark"
icon={
<TouchFeedback activeClassName="primary-feedback-active">
<Icon type="left" />
</TouchFeedback>
}
onLeftClick={() => hide()}
rightContent={[
<Icon
type="check"
style={{ marginRight: "16px" }}
onClick={() => save(select)}
/>
]}
>
{title}
</NavBar>
<NavContentContainer>
<PanelContentContainer>
<List>
{data.map(i => (
<Checkbox.CheckboxItem
wrap
key={i.value}
defaultChecked={this.getDefaultChecked(i.value)}
onChange={() => {
if (select.indexOf(i.value) === -1) {
select.push(i.value);
} else {
const odd = select;
odd.splice(odd.indexOf(i.value), 1);
this.setState({
select: odd
});
}
}}
>
{i.key}
</Checkbox.CheckboxItem>
))}
</List>
</PanelContentContainer>
</NavContentContainer>
</div>
);
}
}
<Checkbox
show={showCheckbox}
data={checkboxData}
title={checkboxTitle}
id={checkboxId}
init={checkboxNum[checkboxId]}
hide={() => this.setState({ showCheckbox: false })}
save={v => {
this.setState({
showCheckbox: false,
checkboxNum: { ...checkboxNum, [checkboxId]: v }
});
}}
/>