woi-react-components
Version:
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 &
33 lines (32 loc) • 4.17 kB
JavaScript
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 } from "react/jsx-runtime";
import { useState } from 'react';
import styled, { keyframes } from "styled-components";
var WOIIconButton = function (props) {
var _a = useState(false), onHover = _a[0], setHoverState = _a[1];
var size = props.size, borderRadius = props.borderRadius, backgroundColor = props.backgroundColor, hoverBackgroundColor = props.hoverBackgroundColor, borderColor = props.borderColor, borderThickness = props.borderThickness, loading = props.loading, loaderColor = props.loaderColor, openLink = props.openLink, openLinkInNewTab = props.openLinkInNewTab, clickFunction = props.clickFunction, icon = props.icon, iconColor = props.iconColor, iconsSize = props.iconsSize, isDisabled = props.isDisabled;
// Created styled button widget
var IconButtonWidget = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: 'Nunito Sans';\n box-shadow: 0px 6px 13px rgba(0, 0, 0, 0.12);\n outline: none !important;\n border-radius: ", "px;\n border-color: ", ";\n border-style: solid;\n border-width: ", ";\n cursor: pointer;\n "], ["\n display: flex;\n justify-content: center;\n align-items: center;\n font-family: 'Nunito Sans';\n box-shadow: 0px 6px 13px rgba(0, 0, 0, 0.12);\n outline: none !important;\n border-radius: ", "px;\n border-color: ", ";\n border-style: solid;\n border-width: ", ";\n cursor: pointer;\n "])), borderRadius, borderColor, borderThickness);
var buttonProperties = { backgroundColor: onHover ? hoverBackgroundColor : backgroundColor, width: size, height: size }; // Button properties
var disabledButtonProperties = { backgroundColor: '#D9D9D9', cursor: 'not-allowed', width: size, height: size }; // Disabled Button Properties
var spinner = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["0% { transform: rotate(0deg)} 100% {transform: rotate(360deg)}"], ["0% { transform: rotate(0deg)} 100% {transform: rotate(360deg)}"])));
var SpinnerWidget = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border: 3px solid #f3f3f3;\n border-top: 3px solid ", ";\n border-radius: 50%;\n width: 24px;\n height: 24px;\n animation: ", " 0.5s linear infinite;\n "], ["\n border: 3px solid #f3f3f3;\n border-top: 3px solid ", ";\n border-radius: 50%;\n width: 24px;\n height: 24px;\n animation: ", " 0.5s linear infinite;\n "])), loaderColor || '#000000', spinner);
return (_jsx(IconButtonWidget, __assign({ style: isDisabled ? __assign({}, disabledButtonProperties) : __assign({}, buttonProperties), onClick: function () { return isDisabled ? null : openLink ? window.open(openLink, openLinkInNewTab ? '_blank' : '_self') : clickFunction === null || clickFunction === void 0 ? void 0 : clickFunction(); }, onMouseEnter: function () { return setHoverState(true); }, onMouseLeave: function () { return setHoverState(false); }, disabled: isDisabled }, { children: loading ? _jsx(SpinnerWidget, {}) :
_jsx("img", { src: icon, alt: "icon", height: iconsSize, width: iconsSize, style: { opacity: isDisabled ? 0.1 : 1, fill: iconColor } }) })));
};
export default WOIIconButton;
var templateObject_1, templateObject_2, templateObject_3;