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

React components that implement Google's Material Design.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.styles = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styles = require("@krowdy-ui/styles");

var _core = require("@krowdy-ui/core");

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)
    }
  };
};

exports.styles = styles;

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["default"].useState(checked),
      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
      active = _React$useState2[0],
      setActive = _React$useState2[1];

  _react["default"].useEffect(function () {
    setActive(checked);
  }, [checked]);

  var _handleChange = function _handleChange() {
    setActive(function (prevState) {
      onChange(!prevState);
      return !prevState;
    });
  };

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

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

var _default = (0, _styles.withStyles)(styles, {
  name: 'ToggleRole'
})(ToggleRole);

exports["default"] = _default;