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 &
31 lines (30 loc) • 2.78 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 { useEffect, useState } from 'react';
import styled from 'styled-components';
var WOICheckBox = function (props) {
var size = props.size, borderRadius = props.borderRadius, borderWidth = props.borderWidth, activeBorderColor = props.activeBorderColor, inActiveBorderColor = props.inActiveBorderColor, activeBackgroundColor = props.activeBackgroundColor, inActiveBackgroundColor = props.inActiveBackgroundColor, icon = props.icon, iconSize = props.iconSize, isChecked = props.isChecked, clickFunction = props.clickFunction;
var _a = useState(false), toggled = _a[0], setToggled = _a[1];
useEffect(function () {
setToggled(isChecked);
}, [isChecked]);
var CheckboxWidget = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 4px;\n height: ", "px;\n width: ", "px;\n cursor: pointer;\n border-style: solid;\n border-width: ", "px;\n border-radius: ", "px;\n border-color: ", ";\n background-color: ", ";\n "], ["\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 4px;\n height: ", "px;\n width: ", "px;\n cursor: pointer;\n border-style: solid;\n border-width: ", "px;\n border-radius: ", "px;\n border-color: ", ";\n background-color: ", ";\n "])), size, size, borderWidth, borderRadius, toggled ? activeBorderColor ? activeBorderColor : (inActiveBorderColor || 'transparent') : inActiveBorderColor ? inActiveBorderColor : 'transparent', toggled ? activeBackgroundColor : inActiveBackgroundColor);
var handleToggle = function () { clickFunction ? clickFunction() : console.log('clicked'); setToggled(!toggled); };
return (_jsx(CheckboxWidget, __assign({ onClick: handleToggle }, { children: (toggled && icon) && _jsx("img", { src: icon, alt: 'icon', height: iconSize, width: iconSize }) })));
};
export default WOICheckBox;
var templateObject_1;