@cosva-lab/form-builder/esm/inputsTypes/Input/index.mjs

React form builder.

import { isEmpty } from "../../utils/isEmpty.mjs";
import { TransformLabel } from "../../utils/TransformLabel.mjs";
import { RenderErrorsDefault } from "../../RenderErrorsDefault.mjs";
import Input_module_default from "./Input.module.mjs";
import { hasErrors } from "../../utils/hasErrors.mjs";
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.mjs";
import React from "react";
import { observer } from "mobx-react";
import clsx from "clsx";
import { intercept } from "mobx";
import TextField from "@mui/material/TextField";
import FormControl from "@mui/material/FormControl";
import FormHelperText from "@mui/material/FormHelperText";

//#region src/inputsTypes/Input/index.tsx
let Input = class Input extends React.Component {
	constructor(props) {
		super(props);
		this.animation = true;
		this.getProps = (props) => ({ ...props.field });
		this.getLastProps = () => this.getProps(this.props);
		this.state = { type: props.type };
	}
	componentDidMount() {
		const { field } = this.props;
		intercept(field, "errors", (change) => {
			this.animation = true;
			return change;
		});
	}
	render() {
		const { onChangeField, field } = this.props;
		const { ns, label, name, disabled, fullWidth = true, errors, autoComplete, InputProps, textFieldProps, value } = field;
		const { type } = this.state;
		const errorsNode = hasErrors(errors) && /* @__PURE__ */ React.createElement(RenderErrorsDefault, {
			errors,
			field
		});
		return /* @__PURE__ */ React.createElement(FormControl, {
			fullWidth,
			className: Input_module_default.formControl,
			variant: "outlined"
		}, /* @__PURE__ */ React.createElement(TextField, {
			label: /* @__PURE__ */ React.createElement(TransformLabel, {
				label,
				ns,
				name
			}),
			inputRef: (element) => field.inputRef = element,
			error: !isEmpty(errors),
			InputProps: typeof InputProps === "function" ? InputProps({
				type,
				field,
				changeType: (type, callback) => {
					if (type !== this.state.type) this.setState({ type }, callback);
				}
			}) : InputProps,
			InputLabelProps: {
				shrink: type === "date" ? true : void 0,
				classes: { root: clsx(Input_module_default.InputLabelProps, Input_module_default.widthNormal) }
			},
			onChange: (e) => {
				const onChange = field.onChange || onChangeField;
				const value = e.target.value;
				if (onChange) onChange({
					name: field.name,
					value,
					field
				}, e);
				else field.setValue(value);
			},
			onBlur: () => {
				const { field } = this.props;
				field && field.markAsTouched();
			},
			name: name.toString(),
			...textFieldProps,
			type,
			value,
			disabled,
			autoComplete
		}), errorsNode && /* @__PURE__ */ React.createElement(FormHelperText, {
			component: "div",
			error: true,
			className: Input_module_default.formHelperTextPropsRoot
		}, errorsNode));
	}
};
Input = __decorate([observer], Input);

//#endregion
export { Input };