@6thquake/react-material/es/Table/TreeTable/ExSwitch.js

React components that implement Google's Material Design.

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import AddIcon from '@material-ui/icons/Add';
import RemoveIcon from '@material-ui/icons/Remove';
import { withStyles } from '../../styles';

const styles = theme => ({
  // root: {},
  root: {
    border: `1px solid ${theme.palette.divider}`,
    width: 13,
    height: 13,
    display: 'flex',
    // marginLeft: theme.spacing(1) ,
    marginRight: theme.spacing(1),
    justifyContent: 'center',
    alignItems: 'center',
    cursor: 'pointer',
    fontSize: '0.8125rem'
  },
  exIcon: {
    // margin: 5,
    fontSize: '0.8125rem'
  }
});
/**
 * @ignore - internal component.
 */


class ExSwitch extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      close: true
    };

    this.handleClick = e => {
      const {
        onChange,
        data
      } = this.props; // const { close }

      e.stopPropagation();
      this.setState({
        close: !this.state.close
      }, () => {
        onChange && onChange({
          close: this.state.close,
          data
        });
      });
    };
  }

  render() {
    const {
      classes
    } = this.props;
    const {
      close
    } = this.state;
    return React.createElement("span", {
      className: classes.root,
      onClick: this.handleClick
    }, close ? React.createElement(AddIcon, {
      className: classes.exIcon
    }) : React.createElement(RemoveIcon, {
      className: classes.exIcon
    }));
  }

}

export default withStyles(styles)(ExSwitch);