@tolokoban/ui
Version:
React components with theme
52 lines • 5.62 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import * as React from "react";
import { Theme } from "../../theme/index.js";
import { styleSpace } from "../../theme/styles/space.js";
import { ViewLabel } from "../Label/index.js";
import { styleDimension, } from "../../theme/styles/dimension.js";
import { classnameCommon } from "../../theme/styles/common.js";
import Styles from "./InputText.module.css";
const $ = Theme.classNames;
export function ViewInputText(props) {
const { className, id, placeholder, value = "", enabled = true, label, name, autofocus = false, onChange, onEnterKeyPressed, type = "text", maxWidth, validator, } = props;
const [invalid, setInvalid] = React.useState(false);
const [text, setText] = React.useState(value);
React.useEffect(() => setText(value), [value]);
const handleKeydown = (evt) => {
if (invalid)
return;
if (evt.key === "Enter") {
evt.preventDefault();
evt.stopPropagation();
onEnterKeyPressed === null || onEnterKeyPressed === void 0 ? void 0 : onEnterKeyPressed(text);
}
};
const handleChange = (evt) => {
const value = evt.target.value;
setText(value);
if (validate(value, validator)) {
setInvalid(false);
onChange === null || onChange === void 0 ? void 0 : onChange(value);
}
else {
setInvalid(true);
}
};
const style = Object.assign(Object.assign({}, styleSpace(props)), styleDimension(props));
if (maxWidth)
style.maxWidth = maxWidth;
const input = (_jsx("input", { className: $.join(className, Styles.InputText, invalid && Styles.invalid, classnameCommon(props)), id: id, style: style, disabled: !enabled, autoFocus: autofocus, placeholder: placeholder, type: type, value: text, name: name, onChange: handleChange, onKeyDown: handleKeydown }));
return label ? (_jsx(ViewLabel, { value: label, fullwidth: props.fullwidth, children: input })) : (input);
}
function validate(value, validator) {
if (!validator)
return true;
if (validator instanceof RegExp) {
validator.lastIndex = -1;
return validator.test(value);
}
else {
return validator(value);
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSW5wdXRUZXh0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL3ZpZXcvSW5wdXRUZXh0L0lucHV0VGV4dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRTlCLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQTtBQUM1QyxPQUFPLEVBQW1CLFVBQVUsRUFBRSxNQUFNLDZCQUE2QixDQUFBO0FBQ3pFLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUU3QyxPQUFPLEVBR0gsY0FBYyxHQUNqQixNQUFNLGlDQUFpQyxDQUFBO0FBQ3hDLE9BQU8sRUFBRSxlQUFlLEVBQWUsTUFBTSw4QkFBOEIsQ0FBQTtBQUUzRSxPQUFPLE1BQU0sTUFBTSx3QkFBd0IsQ0FBQTtBQUUzQyxNQUFNLENBQUMsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUFBO0FBc0QxQixNQUFNLFVBQVUsYUFBYSxDQUFDLEtBQXlCO0lBQ25ELE1BQU0sRUFDRixTQUFTLEVBQ1QsRUFBRSxFQUNGLFdBQVcsRUFDWCxLQUFLLEdBQUcsRUFBRSxFQUNWLE9BQU8sR0FBRyxJQUFJLEVBQ2QsS0FBSyxFQUNMLElBQUksRUFDSixTQUFTLEdBQUcsS0FBSyxFQUNqQixRQUFRLEVBQ1IsaUJBQWlCLEVBQ2pCLElBQUksR0FBRyxNQUFNLEVBQ2IsUUFBUSxFQUNSLFNBQVMsR0FDWixHQUFHLEtBQUssQ0FBQTtJQUNULE1BQU0sQ0FBQyxPQUFPLEVBQUUsVUFBVSxDQUFDLEdBQUcsS0FBSyxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsQ0FBQTtJQUNuRCxNQUFNLENBQUMsSUFBSSxFQUFFLE9BQU8sQ0FBQyxHQUFHLEtBQUssQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLENBQUE7SUFDN0MsS0FBSyxDQUFDLFNBQVMsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxPQUFPLENBQUMsS0FB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