Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component } from 'react';
- import { Col, Row, FormGroup, Input, Label, Popover, PopoverBody } from 'reactstrap';
- import PropTypes from 'prop-types';
- class HiddenBodyCheckbox extends Component {
- constructor(props) {
- super(props);
- this.state = {
- openBody: this.props.defaultValue,
- openDescription: false
- };
- }
- toggleCheckbox = (e) => {
- if (this.props.onChange)
- this.props.onChange(this.props.id, e.target.checked);
- this.setState({ openBody: e.target.checked });
- };
- toggleDescription = () => {
- this.setState(function (prevState, props) {
- return { openDescription: !prevState.openDescription };
- });
- };
- render() {
- let popoverId = `popover_${this.props.id}`;
- return (
- <FormGroup check className="checkbox" id={this.props.id}>
- {this.props.title &&
- <Row>
- <Col>
- <Input className="form-check-input" type="checkbox" onChange={this.toggleCheckbox}
- defaultChecked={this.props.defaultValue}/>
- <Label check className="form-check-label">{this.props.title}</Label>
- {this.props.description &&
- <Label className='ml-1 icon-question link-label' id={popoverId} onClick={this.toggleDescription}>
- <Popover placement="bottom" isOpen={this.state.openDescription} target={popoverId}
- toggle={this.toggleDescription}>
- <PopoverBody>{this.props.description}</PopoverBody>
- </Popover>
- </Label>
- }
- </Col>
- </Row>
- }
- {this.state.openBody &&
- <Row>
- {this.props.children}
- </Row>
- }
- </FormGroup>
- );
- }
- }
- HiddenBodyCheckbox.propTypes = {
- id: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number
- ]),
- title: PropTypes.string,
- description: PropTypes.string,
- defaultValue: PropTypes.bool,
- onChange: PropTypes.func
- };
- HiddenBodyCheckbox.defaultProps = {
- id: null,
- description: null,
- defaultValue: false,
- onChange: null
- };
- export default HiddenBodyCheckbox;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement