jobiqo-cl/lib/src/components/02-atoms/01-forms/10-toggle/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var styles = require('./styles.js');

/**
 * @file index.tsx
 *
 * @fileoverview Renders a toggle switch button.
 */
/**
 * A toggle switch is a style of checkbox that turns an on / off value.
 * Can be used inside forms but also in other settings style pages.
 */
const ToggleSwitch = ({ id = 'on-off-switch', label, onChange, textOn = 'ON', textOff = 'OFF', width = 70, height, checked, switchStyle = 'primary', disabled = false }) => {
    return (React__default.createElement(styles.ToggleGroup, { disabled: disabled, switchStyle: switchStyle, textOn: textOn, textOff: textOff, width: width, height: height, checked: checked },
        React__default.createElement(styles.ToggleInput, Object.assign({}, (checked !== undefined ? { checked } : null), { type: "checkbox", disabled: disabled, name: id, id: id, tabIndex: 1 }, (onChange && !disabled ? { onChange } : null))),
        React__default.createElement(styles.ToggleLabel, { htmlFor: id, width: width, height: height }, label),
        React__default.createElement("div", { className: "onoffswitch pull-right", "aria-hidden": "true" },
            React__default.createElement("div", { className: "onoffswitch-label" },
                React__default.createElement("div", { className: "onoffswitch-inner" }, checked ? textOn : textOff),
                React__default.createElement("div", { className: "onoffswitch-switch" })))));
};

exports.ToggleSwitch = ToggleSwitch;
exports.default = ToggleSwitch;