@krowdy-ui/views/es/ToggleRole/ToggleRole.js

React components that implement Google's Material Design.

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@krowdy-ui/styles';
import { Typography, Switch } from '@krowdy-ui/core';
export const styles = theme => ({
  toggleContainer: {
    display: 'flex',
    justifyContent: 'space-between',
    marginBottom: theme.spacing(2),
    width: '100%'
  },
  toggleLeft: {
    flex: 1,
    marginRight: theme.spacing(4)
  }
});

function ToggleRole(props) {
  const {
    title,
    subtitle,
    onChange,
    value,
    checked,
    name,
    disabled,
    classes
  } = props;
  const [active, setActive] = React.useState(checked);
  React.useEffect(() => {
    setActive(checked);
  }, [checked]);

  const _handleChange = () => {
    setActive(prevState => {
      onChange(!prevState);
      return !prevState;
    });
  };

  return /*#__PURE__*/React.createElement("div", {
    className: classes.toggleContainer
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.toggleLeft
  }, /*#__PURE__*/React.createElement(Typography, {
    color: "body",
    gutterBottom: true,
    variant: "h6"
  }, title), /*#__PURE__*/React.createElement(Typography, {
    color: "body",
    gutterBottom: true,
    variant: "body1"
  }, subtitle)), /*#__PURE__*/React.createElement("div", {
    className: classes.toggleRight
  }, /*#__PURE__*/React.createElement(Switch, {
    checked: active,
    color: "primary",
    disabled: disabled,
    name: name,
    onChange: _handleChange,
    value: value
  })));
}

process.env.NODE_ENV !== "production" ? ToggleRole.propTypes = {
  checked: PropTypes.bool.isRequired,
  classes: PropTypes.object,
  disabled: PropTypes.bool,
  name: PropTypes.string.isRequired,
  onchange: PropTypes.func.isRequired,
  subtitle: PropTypes.string,
  title: PropTypes.string,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
} : void 0;
ToggleRole.muiName = 'ToggleRole';
export default withStyles(styles, {
  name: 'ToggleRole'
})(ToggleRole);