lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
157 lines • 8.31 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TypewriterInput = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const utils_1 = require("@/components/lib/utils");
const input_1 = require("./input");
const TypewriterInput = ({ value = '', onChange, placeholder = 'Type something...', name, id, enableAnimation = true, animationDuration = 200, scaleFactor = 50, animationDelay = 300, inputBackground = '#ffffff', textColor = '#000000', caretColor = '#555555', fontWeight = 'black', fontSize = 'sm', borderRadius = 'md', shadowIntensity = 'md', disabled = false, readOnly = false, width = '200px', className, inputClassName, textClassName, enableShakeAnimation = true, style, ariaLabel, onFocus, onBlur, onEnter, ...props }) => {
var [isAnimating, setIsAnimating] = (0, react_1.useState)(false);
var [showCaret, setShowCaret] = (0, react_1.useState)(true);
var [internalValue, setInternalValue] = (0, react_1.useState)(value);
var prevValueRef = (0, react_1.useRef)(value);
var timeoutRef = (0, react_1.useRef)(undefined);
// Update internal value when prop changes
(0, react_1.useEffect)(function () {
setInternalValue(value);
}, [value]);
// Handle animation when value changes
(0, react_1.useEffect)(function () {
if (!enableAnimation)
return;
var prevValue = prevValueRef.current;
var currentValue = internalValue;
if (currentValue.length > prevValue.length && currentValue.slice(-1) !== ' ') {
setShowCaret(false);
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
timeoutRef.current = setTimeout(function () {
setIsAnimating(true);
setTimeout(function () {
setIsAnimating(false);
setShowCaret(true);
}, animationDuration);
}, 50);
}
prevValueRef.current = currentValue;
}, [internalValue, enableAnimation, animationDuration]);
var handleInputChange = function (e) {
var newValue = e.target.value;
setInternalValue(newValue);
onChange?.(newValue);
};
var handleKeyDown = function (e) {
if (e.key === 'Enter') {
onEnter?.();
}
};
var characters = internalValue.split('');
var fontWeightClasses = {
normal: 'font-normal',
medium: 'font-medium',
semibold: 'font-semibold',
bold: 'font-bold',
black: 'font-black'
};
var fontSizeClasses = {
xs: 'text-xs',
sm: 'text-sm',
base: 'text-base',
lg: 'text-lg',
xl: 'text-xl'
};
var borderRadiusClasses = {
none: 'rounded-none',
sm: 'rounded-sm',
md: 'rounded-md',
lg: 'rounded-lg',
xl: 'rounded-xl',
full: 'rounded-full'
};
var shadowClasses = {
none: 'shadow-none',
sm: 'shadow-sm',
md: 'shadow-md',
lg: 'shadow-lg',
xl: 'shadow-xl'
};
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { children: "\n" +
" .typewriter-container {\n" +
" position: relative;\n" +
" width: " + width + ";\n" +
" }\n" +
" \n" +
" .typewriter-input {\n" +
" color: transparent !important;\n" +
" caret-color: " + (showCaret ? caretColor : 'transparent') + ";\n" +
" background-color: " + inputBackground + ";\n" +
" }\n" +
" \n" +
" .typewriter-input::placeholder {\n" +
" color: rgba(0, 0, 0, 0.3);\n" +
" font-weight: 700;\n" +
" }\n" +
" \n" +
" .typewriter-input:focus {\n" +
" box-shadow: rgba(0, 0, 0, 0.1) 0 5px 20px;\n" +
" border: 0.5px solid #000000;\n" +
" }\n" +
" \n" +
" .typewriter-label {\n" +
" position: absolute;\n" +
" top: 50%;\n" +
" left: 12px;\n" +
" transform: translateY(-50%);\n" +
" pointer-events: none;\n" +
" letter-spacing: 0;\n" +
" color: " + textColor + ";\n" +
" }\n" +
" \n" +
" .typewriter-char {\n" +
" display: inline-block;\n" +
" \n" +
" }\n" +
" \n" +
" .typewriter-char--animate {\n" +
" animation: typewriter-print " + animationDuration + "ms 1 ease-in-out;\n" +
" }\n" +
" \n" +
" .typewriter-container--shake {\n" +
" animation: typewriter-shake " + animationDuration + "ms 1 ease-in-out;\n" +
" }\n" +
" \n" +
" @keyframes typewriter-print {\n" +
" from {\n" +
" transform: scale(" + scaleFactor + ");\n" +
" position: absolute;\n" +
" }\n" +
" 99% {\n" +
" position: absolute;\n" +
" }\n" +
" to {\n" +
" transform: scale(1);\n" +
" position: relative;\n" +
" }\n" +
" }\n" +
" \n" +
" @keyframes typewriter-shake {\n" +
" from, to {\n" +
" transform: scale(1);\n" +
" }\n" +
" 50% {\n" +
" transform: scale(0.97);\n" +
" }\n" +
" }\n" +
" " }), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("typewriter-container", {
"typewriter-container--shake": isAnimating && enableShakeAnimation
}, className), style: style, children: [(0, jsx_runtime_1.jsx)(input_1.Input, { type: "text", value: internalValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, name: name, id: id, disabled: disabled, readOnly: readOnly, autoComplete: "off", "aria-label": ariaLabel, className: (0, utils_1.cn)("typewriter-input", fontWeightClasses[fontWeight], fontSizeClasses[fontSize], borderRadiusClasses[borderRadius], shadowClasses[shadowIntensity], inputClassName), ...props }), (0, jsx_runtime_1.jsx)("label", { htmlFor: id || "typewriter-" + name, className: (0, utils_1.cn)("typewriter-label", fontWeightClasses[fontWeight], fontSizeClasses[fontSize], textClassName), children: characters.map(function (char, index) {
return ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)("typewriter-char", {
"typewriter-char--animate": isAnimating && index === characters.length - 1
}), children: char }, char + "-" + index));
}) })] })] }));
};
exports.TypewriterInput = TypewriterInput;
exports.default = exports.TypewriterInput;
//# sourceMappingURL=typewriter-input.js.map