@cosva-lab/form-builder
Version:
React form builder.
103 lines (101 loc) • 3.82 kB
JavaScript
const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
const require_utils_isEmpty = require('../../utils/isEmpty.cjs');
const require_TransformLabel = require('../../utils/TransformLabel.cjs');
const require_RenderErrorsDefault = require('../../RenderErrorsDefault.cjs');
const require_Input_module = require('./Input.module.cjs');
const require_utils_hasErrors = require('../../utils/hasErrors.cjs');
const require_decorate = require('../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.cjs');
let react = require("react");
react = require_runtime.__toESM(react);
let mobx_react = require("mobx-react");
let clsx = require("clsx");
clsx = require_runtime.__toESM(clsx);
let mobx = require("mobx");
let _mui_material_TextField = require("@mui/material/TextField");
_mui_material_TextField = require_runtime.__toESM(_mui_material_TextField);
let _mui_material_FormControl = require("@mui/material/FormControl");
_mui_material_FormControl = require_runtime.__toESM(_mui_material_FormControl);
let _mui_material_FormHelperText = require("@mui/material/FormHelperText");
_mui_material_FormHelperText = require_runtime.__toESM(_mui_material_FormHelperText);
//#region src/inputsTypes/Input/index.tsx
let Input = class Input extends react.default.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;
(0, mobx.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 = require_utils_hasErrors.hasErrors(errors) && /* @__PURE__ */ react.default.createElement(require_RenderErrorsDefault.RenderErrorsDefault, {
errors,
field
});
return /* @__PURE__ */ react.default.createElement(_mui_material_FormControl.default, {
fullWidth,
className: require_Input_module.default.formControl,
variant: "outlined"
}, /* @__PURE__ */ react.default.createElement(_mui_material_TextField.default, {
label: /* @__PURE__ */ react.default.createElement(require_TransformLabel.TransformLabel, {
label,
ns,
name
}),
inputRef: (element) => field.inputRef = element,
error: !require_utils_isEmpty.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: (0, clsx.default)(require_Input_module.default.InputLabelProps, require_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.default.createElement(_mui_material_FormHelperText.default, {
component: "div",
error: true,
className: require_Input_module.default.formHelperTextPropsRoot
}, errorsNode));
}
};
Input = require_decorate.__decorate([mobx_react.observer], Input);
//#endregion
Object.defineProperty(exports, 'Input', {
enumerable: true,
get: function () {
return Input;
}
});