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 &
89 lines (88 loc) • 9.31 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, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from "react";
import styled from "styled-components";
import { ContainerWidget, TextAreaWidget, TextFieldWidget } from "./index.style";
export var SuccessIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" fill=\"#00B87C\" />\n </svg>";
export var ErrorIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\" fill=\"#ff3333\" />\n </svg>";
var WOITextField = function (props) {
var _a = useState(''), input = _a[0], setInput = _a[1];
var _b = useState(false), isError = _b[0], setError = _b[1];
var _c = useState(false), isSuccess = _c[0], setSuccess = _c[1];
var _d = useState(false), focusState = _d[0], setFocusState = _d[1];
var type = props.type, label = props.label, labelFontSize = props.labelFontSize, labelFontWeight = props.labelFontWeight, labelFontFamily = props.labelFontFamily, labelFontDecoration = props.labelFontDecoration, labelColor = props.labelColor, placeholder = props.placeholder, leftIcon = props.leftIcon, leftIconSize = props.leftIconSize, leftIconColor = props.leftIconColor, rightIcon = props.rightIcon, rightIconSize = props.rightIconSize, rightIconColor = props.rightIconColor, isDisabled = props.isDisabled, multline = props.multline, supportingText = props.supportingText, supportingTextFontSize = props.supportingTextFontSize, supportingTextFontWeight = props.supportingTextFontWeight, supportingTextFontFamily = props.supportingTextFontFamily, supportingTextFontDecoration = props.supportingTextFontDecoration, supportingTextColor = props.supportingTextColor;
// Label
var LabelTextWidget = styled.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin: 4px 0px 12px 4px;\n font-family: ", ";\n font-size: ", ";\n font-style: normal;\n font-weight: ", ";\n line-height: normal;\n text-decoration: ", ";\n color: ", ";\n "], ["\n display: flex;\n flex-direction: column;\n margin: 4px 0px 12px 4px;\n font-family: ", ";\n font-size: ", ";\n font-style: normal;\n font-weight: ", ";\n line-height: normal;\n text-decoration: ", ";\n color: ", ";\n "])), labelFontFamily ? labelFontFamily : 'Nunito Sans', labelFontSize ? labelFontSize + 'px' : '16px', labelFontWeight ? labelFontWeight : '400', labelFontDecoration ? labelFontDecoration : 'normal', labelColor ? labelColor : '#000000');
// Left Icon Widget
var LeftIconWidget = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n left: 3%;\n top: ", ";\n transform: ", ";\n height: ", "px;\n width: ", "px;\n opacity: ", ";\n cursor: ", ";\n svg path{\n fill: ", "\n }\n "], ["\n position: absolute;\n left: 3%;\n top: ", ";\n transform: ", ";\n height: ", "px;\n width: ", "px;\n opacity: ", ";\n cursor: ", ";\n svg path{\n fill: ", "\n }\n "])), multline ? '20%' : '50%', multline ? 'translate(-20%, -50%)' : 'translate(-8%, -50%)', leftIconSize, leftIconSize, isDisabled ? 0.5 : 1, isDisabled ? 'not-allowed' : 'auto', isSuccess ? '#00B87C' : isError ? '#ff3333' : focusState ? props.borderColor : leftIconColor);
// Right Icon Widget
var RightIconWidget = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n right: 3%;\n top: ", ";\n transform: ", ";\n height: ", "px;\n width: ", "px;\n opacity: ", ";\n cursor: ", ";\n svg path{\n fill: ", "\n }\n "], ["\n position: absolute;\n right: 3%;\n top: ", ";\n transform: ", ";\n height: ", "px;\n width: ", "px;\n opacity: ", ";\n cursor: ", ";\n svg path{\n fill: ", "\n }\n "])), multline ? '20%' : '50%', multline ? 'translate(-20%, -50%)' : 'translate(-8%, -50%)', rightIconSize, rightIconSize, isDisabled ? 0.2 : 1, isDisabled ? 'not-allowed' : 'auto', isSuccess ? '#00B87C' : isError ? '#ff3333' : focusState ? props.borderColor : rightIconColor);
// Supporting Text Widget
var SupportingTextWidget = styled.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin: 12px 0px 0px 4px;\n font-family: ", ";\n font-size: ", ";\n font-style: normal;\n font-weight: ", ";\n line-height: normal;\n text-decoration: ", ";\n color: ", ";\n "], ["\n display: flex;\n flex-direction: column;\n margin: 12px 0px 0px 4px;\n font-family: ", ";\n font-size: ", ";\n font-style: normal;\n font-weight: ", ";\n line-height: normal;\n text-decoration: ", ";\n color: ", ";\n "])), supportingTextFontFamily ? supportingTextFontFamily : 'Nunito Sans', supportingTextFontSize ? supportingTextFontSize + 'px' : '12px', supportingTextFontWeight ? supportingTextFontWeight : '400', supportingTextFontDecoration ? supportingTextFontDecoration : 'normal', supportingTextColor ? supportingTextColor : '#000000');
useEffect(function () {
function handleClick(e) {
if (!isDisabled) {
// if the click is outside the input container,
// if it has input, then focus and validate
// if no input, then just go out of focus
if (containerRef.current && containerRef.current.contains(e.target) &&
inputRef.current && inputRef.current !== e.target) {
if (inputRef.current.value) {
inputValidator(inputRef.current.value);
}
else {
setFocusState(false);
}
}
else {
if (containerRef.current && containerRef.current.contains(e.target)) {
setFocusState(true);
}
else {
if (inputRef.current && !inputRef.current.value) {
setFocusState(false);
setError(false);
setSuccess(false);
}
setFocusState(false);
}
}
}
}
document.addEventListener('mousedown', handleClick);
return function () { return document.removeEventListener('mousedown', handleClick); };
}, [isDisabled]);
var containerRef = useRef(null);
var inputRef = useRef(null);
// Input validator
var inputValidator = function (value) {
setInput(value);
setFocusState(false);
if (value === '') {
setError(true);
setSuccess(false);
}
else {
setSuccess(true);
setError(false);
}
};
return (_jsxs("div", __assign({ ref: containerRef }, { children: [_jsx(LabelTextWidget, { children: label }), _jsxs(ContainerWidget, __assign({ variant: __assign(__assign({}, props), { isSuccess: isSuccess, isError: isError }) }, { children: [leftIcon ? _jsx(LeftIconWidget, { dangerouslySetInnerHTML: { __html: leftIcon } }) : null, multline ?
_jsx(TextAreaWidget, { defaultValue: input, rows: multline, ref: inputRef, disabled: isDisabled, placeholder: placeholder, variant: __assign(__assign({}, props), { isSuccess: isSuccess, isError: isError }) }) : _jsx(TextFieldWidget, { type: type || "text", defaultValue: input, ref: inputRef, disabled: isDisabled, placeholder: placeholder, variant: __assign(__assign({}, props), { isSuccess: isSuccess, isError: isError }) }), rightIcon ? _jsx(RightIconWidget, { dangerouslySetInnerHTML: { __html: isSuccess ? SuccessIcon : isError ? ErrorIcon : rightIcon } }) : null] })), _jsx(SupportingTextWidget, { children: supportingText })] })));
};
export default WOITextField;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;