README
ant-effect-checkbox
an effect checkbox base on antd 2.x
example antd(2.x)
import React, { Component } from "react";
import "antd/dist/antd.css";
import "./App.css";
import { Form, Input, Button, Checkbox, DatePicker, Select, Radio } from "antd";
import EffectCheckbox from "../../lib";
const { RangePicker } = DatePicker;
const RadioGroup = Radio.Group;
const FormItem = Form.Item;
const Option = Select.Option;
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 6 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 14 }
}
};
class App extends Component {
state = {
initialInputEc: undefined
};
handleSubmit = e => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log("Received values of form: ", values);
}
});
};
onInitClick = () => {
this.setState({
initialInputEc: {
checked: true,
effect: 999
}
});
};
onSetValueClick = () => {
const { setFieldsValue } = this.props.form;
setFieldsValue({
inputEc2: {
checked: true,
effect: "init inputEc2"
}
});
};
render() {
const { getFieldDecorator } = this.props.form;
const { initialInputEc } = this.state;
return (
<Form onSubmit={this.handleSubmit}>
<FormItem {...formItemLayout} label="inputEc">
{getFieldDecorator("inputEc", {
initialValue: initialInputEc,
rules: [{ required: true, message: "please !" }]
})(
<EffectCheckbox>
<Input placeholder="placeholder for input" />
</EffectCheckbox>
)}
</FormItem>
<FormItem style={{ textAlign: "center" }}>
<Button type="primary" onClick={this.onInitClick}>
dynamic init
</Button>
</FormItem>
<FormItem {...formItemLayout} label="inputEc2">
{getFieldDecorator("inputEc2", {
initialValue: {
checked: false,
effect: "init"
}
})(
<EffectCheckbox>
<Input />
</EffectCheckbox>
)}
</FormItem>
<FormItem style={{ textAlign: "center" }}>
<Button type="primary" onClick={this.onSetValueClick}>
dynamic setValue
</Button>
</FormItem>
<FormItem {...formItemLayout} label="selectEc">
{getFieldDecorator("selectEc")(
<EffectCheckbox>
<Select>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="disabled" disabled>
Disabled
</Option>
<Option value="tim">Tim Huang</Option>
</Select>
</EffectCheckbox>
)}
</FormItem>
<FormItem {...formItemLayout} label="rangePickerEc">
{getFieldDecorator("rangePickerEc")(
<EffectCheckbox>
<RangePicker />
</EffectCheckbox>
)}
</FormItem>
<FormItem {...formItemLayout} label="radioGroupEc">
{getFieldDecorator("radioGroupEc")(
<EffectCheckbox>
<RadioGroup>
<Radio value={1}>A</Radio>
<Radio value={2}>B</Radio>
<Radio value={3}>C</Radio>
<Radio value={4}>D</Radio>
</RadioGroup>
</EffectCheckbox>
)}
</FormItem>
<FormItem {...formItemLayout} label="checkboxEc">
{getFieldDecorator("checkboxEc")(
<EffectCheckbox>
<Checkbox>Married?</Checkbox>
</EffectCheckbox>
)}
</FormItem>
<FormItem style={{ textAlign: "center" }}>
<Button type="primary" htmlType="submit">
submit
</Button>
</FormItem>
</Form>
);
}
}
export default Form.create()(App);