zhongrj
2025-11-25 b89962006164a462404b79a738bee8cbb6d7fe7e
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import React from 'react';
import PropTypes from 'prop-types';
import '../css/Toggle.scss';
 
class Toggle extends React.Component {
  static defaultProps = {
    className: ""
  };
  static propTypes = {
    bind: PropTypes.array.isRequired, // two element array, 
                                    // with first element being the parent element 
                                    // and the second the boolean property to determine visibility
                                    // ex. [this, 'visible']
    trueIcon: PropTypes.string,
    falseIcon: PropTypes.string,
    className: PropTypes.string,
  }
 
  constructor(props){
    super(props);
  }
 
  handleClick = () => {
    const [parent, prop] = this.props.bind;
    parent.setState({[prop]: !parent.state[prop]});
  }
 
  render(){
    const [parent, prop] = this.props.bind;
    const icon = parent.state[prop] ? this.props.trueIcon: this.props.falseIcon;
    return (<a className={"toggle " + this.props.className} href="javascript:void(0);" onClick={this.handleClick}><i className={icon}></i></a>);
  }
}
 
class Checkbox extends Toggle{
    static defaultProps = {
        trueIcon: "far fa-check-square",
        falseIcon: "far fa-square",
        className: ""
    }
}
 
class ExpandButton extends Toggle{
    static defaultProps = {
        trueIcon: "fa fa-caret-down",
        falseIcon: "fa fa-caret-right",
        className: ""
    }
}
 
export {
    Toggle,
    Checkbox,
    ExpandButton
}