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

React components that implement Google's Material Design.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@krowdy-ui/styles';
import { Typography, Switch } from '@krowdy-ui/core';
export var styles = function styles(theme) {
  return {
    toggleContainer: {
      display: 'flex',
      justifyContent: 'space-between',
      marginBottom: theme.spacing(2),
      width: '100%'
    },
    toggleLeft: {
      flex: 1,
      marginRight: theme.spacing(4)
    }
  };
};

function ToggleRole(props) {
  var title = props.title,
      subtitle = props.subtitle,
      onChange = props.onChange,
      value = props.value,
      checked = props.checked,
      name = props.name,
      disabled = props.disabled,
      classes = props.classes;

  var _React$useState = React.useState(checked),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      active = _React$useState2[0],
      setActive = _React$useState2[1];

  React.useEffect(function () {
    setActive(checked);
  }, [checked]);

  var _handleChange = function _handleChange() {
    setActive(function (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);