ffr-components/es/toggle/Toggle.js

Fiori styled UI components

import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import classnames from 'classnames';
import React from 'react';
import { KeyCode } from '../utils';
import "./style.css";
import "../theme/theme.css";
export var TOGGLE_SIZES = ['s', 'm', 'l'];

var Toggle =
/*#__PURE__*/
function (_React$Component) {
  _inherits(Toggle, _React$Component);

  function Toggle(props) {
    var _this;

    _classCallCheck(this, Toggle);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Toggle).call(this, props));

    _this.handleChange = function (e) {
      _this.setState({
        checked: !_this.state.checked
      }, function () {
        _this.props.onChange(e);
      });
    };

    _this.handleKeyDown = function (e) {
      var keyCode = e.keyCode;

      if (keyCode === KeyCode.ENTER || keyCode === KeyCode.SPACE) {
        _this.handleChange(e);
      }
    };

    _this.state = {
      checked: !!props.checked
    };
    return _this;
  }

  _createClass(Toggle, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          _this$props$size = _this$props.size,
          size = _this$props$size === void 0 ? 'm' : _this$props$size,
          id = _this$props.id,
          checked = _this$props.checked,
          disabled = _this$props.disabled,
          children = _this$props.children,
          className = _this$props.className,
          labelProps = _this$props.labelProps,
          inputProps = _this$props.inputProps,
          onChange = _this$props.onChange,
          rest = _objectWithoutProperties(_this$props, ["size", "id", "checked", "disabled", "children", "className", "labelProps", "inputProps", "onChange"]);

      var toggleClasses = classnames('fd-form-item', 'ffr-toggle', className);
      var spanClasses = classnames('fd-toggle', _defineProperty({}, "fd-toggle--".concat(size), !!size && size !== 'm'), _defineProperty({}, "ffr-toggle--".concat(size), !!size), 'ffr-toggle-control');
      return React.createElement("div", _extends({}, rest, {
        className: toggleClasses
      }), React.createElement("label", _extends({}, labelProps, {
        className: "fd-form-label ffr-toogle-label",
        htmlFor: id
      }), React.createElement("span", {
        className: spanClasses
      }, React.createElement("input", _extends({}, inputProps, {
        checked: this.state.checked,
        disabled: disabled,
        id: id,
        onChange: this.handleChange,
        className: "fd-toggle__input",
        type: "checkbox",
        onKeyDown: this.handleKeyDown
      })), React.createElement("span", {
        className: "fd-toggle__switch",
        role: "presentation"
      }, React.createElement("span", {
        className: "ffr-toggle-on"
      }, "ON"), React.createElement("span", {
        className: "ffr-toggle-off"
      }, "OFF"))), children));
    }
  }]);

  return Toggle;
}(React.Component); // Toggle.propDescriptions = {
//   checked: 'Set to true for component to be checked on render.'
// };


Toggle.displayName = 'Toggle';
Toggle.defaultProps = {
  onChange: function onChange() {}
};
export default Toggle;