import React from "react"; import { Row, Col, Checkbox, Tooltip } from "antd"; type Props = { gutter: number; offset: number; label?: string; tooltip?: string | number | boolean | React.ReactNode; text?: string; valueTooltip?: string | number | boolean | React.ReactNode; value?: boolean; onChange?: ((value: boolean) => void) | undefined; tail?: boolean; }; class RowCheckbox extends React.Component<Props, {}> { static defaultProps = { gutter: 8, offset: 0, options: [], tail: false, }; render() { return ( <Row gutter={[this.props.gutter, this.props.tail ? 0 : this.props.gutter]}> <Col span={8} style={{ display: "flex", alignItems: "center", justifyContent: "center" }}> <Tooltip title={this.props.tooltip}> <span style={{ marginLeft: this.props.offset + "px" }}>{this.props.label}</span> </Tooltip> </Col> <Col span={16} style={{ display: "flex" }}> <Tooltip title={this.props.valueTooltip}> <Checkbox checked={this.props.value} onChange={(ev) => { if (this.props.onChange) { this.props.onChange(ev.target.checked); } }} > {this.props.text} </Checkbox> </Tooltip> </Col> </Row> ); } } export default RowCheckbox;