@attivio/suit
Version:
Attivio SUIT, the Search UI Toolkit, is a library for creating search clients for searching the Attivio platform.
270 lines (235 loc) • 8.62 kB
JavaScript
'use strict';
exports.__esModule = true;
exports.default = undefined;
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;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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; }
/**
* 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 _react2.default.createElement(
'div',
{
className: container.className,
style: container.style,
onClick: this.onClick,
role: 'button',
tabIndex: 0,
'data-test': dataTest
},
_react2.default.createElement('div', {
className: slider.className,
style: slider.style
}),
_react2.default.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 _react2.default.createElement(
'div',
{
className: container.className,
style: container.style,
'data-test': dataTest
},
_react2.default.createElement(
'div',
{
className: offClassName,
onClick: this.onClick,
role: 'button',
tabIndex: 0,
ref: function ref(c) {
_this2.labeledOffButton = c;
}
},
offLabel
),
_react2.default.createElement(
'div',
{
className: onClassName,
onClick: this.onClick,
role: 'button',
tabIndex: 0,
ref: function ref(c) {
_this2.labeledOnButton = c;
}
},
onLabel
)
);
}
return _react2.default.createElement(
'div',
{
className: container.className,
style: container.style,
'data-test': dataTest
},
_react2.default.createElement(
'div',
{ className: offClassName },
offLabel
),
_react2.default.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;
}(_react2.default.Component), _class.defaultProps = {
onLabel: 'On',
offLabel: 'Off',
disabled: false,
noLabel: false,
style: {},
className: '',
dataTest: null
}, _class.displayName = 'ToggleSwitch', _temp2);
exports.default = ToggleSwitch;
module.exports = exports['default'];