react-base-guide/lib/components/input/index.js

react ui components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Field_1 = __importDefault(require("./styled/Field"));
const Message_1 = __importDefault(require("./styled/Message"));
const StyledIcons_1 = require("./styled/StyledIcons");
const change_handler_1 = __importDefault(require("./change-handler"));
const label_1 = __importDefault(require("../label"));
const onClear = (e, props) => {
    e.preventDefault();
    props.onClear ? props.onClear() : (props.onChange && props.onChange({ target: { value: "" } }));
};
const inputProps = (props) => {
    let newProps = Object.assign({}, props);
    delete newProps.label;
    delete newProps.message;
    delete newProps.clear;
    delete newProps.onClear;
    delete newProps.styled;
    return newProps;
};
const Input = (props, ref) => {
    const { value, onChange } = (0, change_handler_1.default)(props);
    const [showPass, setShowPass] = (0, react_1.useState)(false);
    const [focus, setFocus] = (0, react_1.useState)(props.autoFocus || false);
    return ((0, jsx_runtime_1.jsxs)(label_1.default, Object.assign({ label: props.label, focus: focus, tabIndex: props.tabIndex || 0, variant: "outlined", error: props.error, warning: props.warning, success: props.success, styled: props.styled }, { children: [props.type === "password" && (0, jsx_runtime_1.jsx)(StyledIcons_1.StyledPassword, { styled: { width: "14px", height: "38px" }, fill: showPass ? "active" : "secondary", onClick: () => setShowPass(!showPass) }), (props.clear === true && props.value != "" && !props.disabled && props.type !== "password") && (0, jsx_runtime_1.jsx)(StyledIcons_1.StyledClose, { styled: { width: "10px", height: "38px" }, onClick: (e) => onClear(e, props) }), props.message &&
                (0, jsx_runtime_1.jsx)(Message_1.default, Object.assign({ "$error": props.error, "$success": props.success, "$warning": props.warning }, { children: props.message })), (0, jsx_runtime_1.jsx)(Field_1.default, Object.assign({}, inputProps(props), { ref: ref, type: showPass ? "text" : props.type, placeholder: props.type === "tel" ? "+X XXX XXX-XX-XX" : props.placeholder, maxLength: props.type === "tel" ? 16 : props.maxLength, value: value, onChange: onChange, onFocus: e => {
                    setFocus(true);
                    props.onFocus && props.onFocus(e);
                }, onBlur: e => {
                    setFocus(false);
                    props.onBlur && props.onBlur(e);
                } }))] })));
};
exports.default = (0, react_1.forwardRef)(Input);
//# sourceMappingURL=index.js.map