@attivio/suit/es/components/ToggleSwitch.js

Attivio SUIT, the Search UI Toolkit, is a library for creating search clients for searching the Attivio platform.

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _class, _temp2;

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

import React from 'react';

/**
 * This is a simple “sliding” toggle switch with customizable labels.
 */
var ToggleSwitch = (_temp2 = _class = function (_React$Component) {
  _inherits(ToggleSwitch, _React$Component);

  function ToggleSwitch() {
    var _temp, _this, _ret;

    _classCallCheck(this, ToggleSwitch);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.onClick = function () {
      var _this$props = _this.props,
          noLabel = _this$props.noLabel,
          on = _this$props.on,
          disabled = _this$props.disabled,
          onChange = _this$props.onChange;

      if (!on && !disabled) {
        // Off now, turn it on
        onChange(true);
        if (!noLabel && _this.labeledOnButton) {
          _this.labeledOnButton.blur();
        }
      } else if (on && !disabled) {
        // On now, turn it off
        onChange(false);
        if (!noLabel && _this.labeledOffButton) {
          _this.labeledOffButton.blur();
        }
      }
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  ToggleSwitch.prototype.getStyles = function getStyles() {
    var _props = this.props,
        disabled = _props.disabled,
        noLabel = _props.noLabel,
        on = _props.on,
        _props$className = _props.className,
        className = _props$className === undefined ? '' : _props$className,
        style = _props.style;


    var disabledClass = disabled ? 'disabled' : '';

    var onClassName = 'toggle-switch toggle-switch-on ' + (on ? 'selected' : '') + ' ' + (noLabel ? '' : disabledClass);
    var offClassName = 'toggle-switch toggle-switch-off ' + (on ? '' : 'selected') + ' ' + disabledClass;

    var buttonStyle = { right: '32px', backgroundColor: '#ffffff' };
    var buttonClassName = offClassName;

    var containerStyle = style;
    var containerClassName = 'toggle-switch-container ' + className + ' ' + disabledClass;

    var sliderClassName = 'toggle-switch-off';
    var sliderStyle = {
      width: '28px',
      height: '12px',
      borderRadius: '10px',
      opacity: '0.7'
    };

    if (noLabel) {
      containerStyle = {
        width: '100%',
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        cursor: disabled ? 'default' : 'cursor'
      };
      sliderStyle = _extends({}, sliderStyle, { opacity: 0.5 });
      if (on) {
        buttonStyle = { right: '12px' };
        buttonClassName = 'attivio-primary-background ' + onClassName;
        containerClassName = 'toggle-switch-container ' + className;
        sliderClassName = 'attivio-primary-background';
        if (disabled) {
          buttonClassName = 'toggle-switch-on-disabled ';
          sliderClassName = 'toggle-switch-on-disabled';
          sliderStyle = _extends({}, sliderStyle, { opacity: 0.4 });
        }
      } else {
        sliderClassName = 'toggle-slider-off-no-label';
        containerClassName = 'toggle-switch-container';
        if (disabled) {
          buttonClassName = 'toggle-switch-off-no-label';
          sliderStyle = _extends({}, sliderStyle, { opacity: 0.4 });
        }
      }
      buttonStyle = _extends({
        boxShadow: '0px 2px 2px rgba(0, 0, 0, 0.24), 0px 0px 2px rgba(0, 0, 0, 0.12)',
        height: '17px',
        width: '17px',
        borderRadius: '100%',
        position: 'relative',
        transitionDuration: '100ms',
        zIndex: '1',
        cursor: disabled ? 'default' : 'pointer',
        outline: 'none',
        border: 'none',
        transition: 'right 300ms cubic-bezier(0.26, 0.86, 0.44, 0.98)'
      }, buttonStyle);
    }

    return {
      button: {
        className: buttonClassName,
        style: buttonStyle
      },
      slider: {
        className: sliderClassName,
        style: sliderStyle
      },
      container: {
        className: containerClassName,
        style: containerStyle
      },
      onClassName: onClassName,
      offClassName: offClassName
    };
  };

  ToggleSwitch.prototype.renderNoLabel = function renderNoLabel() {
    var _getStyles = this.getStyles(),
        container = _getStyles.container,
        slider = _getStyles.slider,
        button = _getStyles.button;

    var dataTest = this.props.dataTest;

    return React.createElement(
      'div',
      {
        className: container.className,
        style: container.style,
        onClick: this.onClick,
        role: 'button',
        tabIndex: 0,
        'data-test': dataTest
      },
      React.createElement('div', {
        className: slider.className,
        style: slider.style
      }),
      React.createElement('div', {
        className: button.className,
        style: button.style
      })
    );
  };

  ToggleSwitch.prototype.renderWithLabel = function renderWithLabel() {
    var _this2 = this;

    var _props2 = this.props,
        disabled = _props2.disabled,
        offLabel = _props2.offLabel,
        onLabel = _props2.onLabel,
        dataTest = _props2.dataTest;

    var _getStyles2 = this.getStyles(),
        container = _getStyles2.container,
        onClassName = _getStyles2.onClassName,
        offClassName = _getStyles2.offClassName;

    if (!disabled) {
      return React.createElement(
        'div',
        {
          className: container.className,
          style: container.style,
          'data-test': dataTest
        },
        React.createElement(
          'div',
          {
            className: offClassName,
            onClick: this.onClick,
            role: 'button',
            tabIndex: 0,
            ref: function ref(c) {
              _this2.labeledOffButton = c;
            }
          },
          offLabel
        ),
        React.createElement(
          'div',
          {
            className: onClassName,
            onClick: this.onClick,
            role: 'button',
            tabIndex: 0,
            ref: function ref(c) {
              _this2.labeledOnButton = c;
            }
          },
          onLabel
        )
      );
    }
    return React.createElement(
      'div',
      {
        className: container.className,
        style: container.style,
        'data-test': dataTest
      },
      React.createElement(
        'div',
        { className: offClassName },
        offLabel
      ),
      React.createElement(
        'div',
        { className: onClassName },
        onLabel
      )
    );
  };

  ToggleSwitch.prototype.render = function render() {
    var noLabel = this.props.noLabel;


    if (noLabel) {
      return this.renderNoLabel();
    }
    return this.renderWithLabel();
  };

  return ToggleSwitch;
}(React.Component), _class.defaultProps = {
  onLabel: 'On',
  offLabel: 'Off',
  disabled: false,
  noLabel: false,
  style: {},
  className: '',
  dataTest: null
}, _class.displayName = 'ToggleSwitch', _temp2);
export { ToggleSwitch as default };