woi-react-components/dist/components/WOISwitchButton/index.js

This project requires NodeJS (version 18 or later) and NPM. [Node](http://nodejs.org/) and [NPM](https://npmjs.org/) are really easy to install. To make sure you have them available on your machine, try running the following command. ```sh $ npm -v &

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import styled from "styled-components";
var WOISwitchButton = function (props) {
    var trackWidth = props.trackWidth, trackHeight = props.trackHeight, padding = props.padding, trackBorderRadius = props.trackBorderRadius, trackBorderColor = props.trackBorderColor, trackBorderWidth = props.trackBorderWidth, trackActiveColor = props.trackActiveColor, trackInActiveColor = props.trackInActiveColor, thumbSize = props.thumbSize, thumbBorderRadius = props.thumbBorderRadius, thumbBorderColor = props.thumbBorderColor, thumbBorderWidth = props.thumbBorderWidth, thumbActiveColor = props.thumbActiveColor, thumbInActiveColor = props.thumbInActiveColor, isActive = props.isActive, thumbIconSize = props.thumbIconSize, thumbActiveIcon = props.thumbActiveIcon, thumbInActiveIcon = props.thumbInActiveIcon;
    var _a = useState(false), toggled = _a[0], setToggled = _a[1];
    useEffect(function () {
        setToggled(isActive);
    }, [isActive]);
    // add animation to the slider
    var TrackWidget = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        width: ", "px;\n        height: ", "px;\n        background-color: ", ";\n        border-radius: ", "px;\n        position: relative;\n        padding: ", "px;\n        border-color: ", ";\n        border-style: solid;\n        border-width: ", "px;\n        cursor: pointer;\n        transition: background-color 1s ease;\n    "], ["\n        width: ", "px;\n        height: ", "px;\n        background-color: ", ";\n        border-radius: ", "px;\n        position: relative;\n        padding: ", "px;\n        border-color: ", ";\n        border-style: solid;\n        border-width: ", "px;\n        cursor: pointer;\n        transition: background-color 1s ease;\n    "])), trackWidth, trackHeight, toggled ? trackActiveColor : trackInActiveColor, trackBorderRadius, padding, trackBorderColor, trackBorderWidth);
    var handleToggle = function () { return setToggled(!toggled); };
    var ThumbWidget = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        width: ", "px;\n        height: ", "px;\n        background-color: ", ";\n        border-radius: ", "%;\n        border-color: ", ";\n        border-style: solid;\n        border-width: ", "px;\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%) translateX(", ");\n        transition: 1s;\n    "], ["\n        width: ", "px;\n        height: ", "px;\n        background-color: ", ";\n        border-radius: ", "%;\n        border-color: ", ";\n        border-style: solid;\n        border-width: ", "px;\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%) translateX(", ");\n        transition: 1s;\n    "])), thumbSize, thumbSize, toggled ? thumbActiveColor : thumbInActiveColor, thumbBorderRadius, thumbBorderColor, thumbBorderWidth, toggled ? (trackWidth - thumbSize - 2) + 'px' : '-2px');
    return (_jsx(TrackWidget, __assign({ onClick: handleToggle }, { children: _jsxs(ThumbWidget, { children: [(!toggled && thumbInActiveIcon) && _jsx("img", { src: thumbInActiveIcon, alt: 'inactive thumb icon', height: thumbIconSize, width: thumbIconSize, style: { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' } }), (toggled && thumbActiveIcon) && _jsx("img", { src: thumbActiveIcon, alt: 'active thumb icon', height: thumbIconSize, width: thumbIconSize, style: { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' } })] }) })));
};
export default WOISwitchButton;
var templateObject_1, templateObject_2;