SHARE
TWEET

Untitled

a guest Nov 6th, 2018 94 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import { Col, Row, FormGroup, Input, Label, Popover, PopoverBody } from 'reactstrap';
  3. import PropTypes from 'prop-types';
  4.  
  5.  
  6. class HiddenBodyCheckbox extends Component {
  7.   constructor(props) {
  8.     super(props);
  9.     this.state = {
  10.       openBody: this.props.defaultValue,
  11.       openDescription: false
  12.     };
  13.   }
  14.  
  15.   toggleCheckbox = (e) => {
  16.     if (this.props.onChange)
  17.       this.props.onChange(this.props.id, e.target.checked);
  18.     this.setState({ openBody: e.target.checked });
  19.   };
  20.  
  21.   toggleDescription = () => {
  22.     this.setState(function (prevState, props) {
  23.       return { openDescription: !prevState.openDescription };
  24.     });
  25.   };
  26.  
  27.   render() {
  28.     let popoverId = `popover_${this.props.id}`;
  29.  
  30.     return (
  31.       <FormGroup check className="checkbox" id={this.props.id}>
  32.         {this.props.title &&
  33.           <Row>
  34.             <Col>
  35.               <Input className="form-check-input" type="checkbox" onChange={this.toggleCheckbox}
  36.                      defaultChecked={this.props.defaultValue}/>
  37.               <Label check className="form-check-label">{this.props.title}</Label>
  38.               {this.props.description &&
  39.                 <Label className='ml-1 icon-question link-label' id={popoverId} onClick={this.toggleDescription}>
  40.                   <Popover placement="bottom" isOpen={this.state.openDescription} target={popoverId}
  41.                            toggle={this.toggleDescription}>
  42.                     <PopoverBody>{this.props.description}</PopoverBody>
  43.                   </Popover>
  44.                 </Label>
  45.               }
  46.             </Col>
  47.           </Row>
  48.         }
  49.         {this.state.openBody &&
  50.           <Row>
  51.             {this.props.children}
  52.           </Row>
  53.         }
  54.       </FormGroup>
  55.     );
  56.   }
  57. }
  58.  
  59. HiddenBodyCheckbox.propTypes = {
  60.   id: PropTypes.oneOfType([
  61.     PropTypes.string,
  62.     PropTypes.number
  63.   ]),
  64.   title: PropTypes.string,
  65.   description: PropTypes.string,
  66.   defaultValue: PropTypes.bool,
  67.   onChange: PropTypes.func
  68. };
  69.  
  70. HiddenBodyCheckbox.defaultProps = {
  71.   id: null,
  72.   description: null,
  73.   defaultValue: false,
  74.   onChange: null
  75. };
  76.  
  77. export default HiddenBodyCheckbox;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top