111 lines
3.1 KiB
JavaScript
111 lines
3.1 KiB
JavaScript
import React from "react";
|
|
|
|
export function TextInput(props) {
|
|
return (
|
|
<>
|
|
<div className="form-floating">
|
|
<input
|
|
disabled={props.isSubmitting || props.rescode === 200}
|
|
type={props.type}
|
|
className={`form-control ${
|
|
props.error && props.touched ? "is-invalid" : ""
|
|
} ${!props.error && props.touched ? "is-valid" : ""}`}
|
|
placeholder={props.placeholder}
|
|
onChange={props.onChange}
|
|
onBlur={props.onBlur}
|
|
value={props.value}
|
|
/>
|
|
<label>{props.label}</label>
|
|
</div>
|
|
{props.error && props.touched ? (
|
|
<div className="invalid-feedback" style={{ display: "block" }}>
|
|
{props.error}
|
|
</div>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function TextareaInput(props) {
|
|
return (
|
|
<>
|
|
<div className="form-floating">
|
|
<textarea
|
|
disabled={props.isSubmitting || props.rescode === 200}
|
|
style={{ height: "100px", resize: "none" }}
|
|
className={`form-control ${
|
|
props.error && props.touched ? "is-invalid" : ""
|
|
} ${!props.error && props.touched ? "is-valid" : ""}`}
|
|
placeholder={props.placeholder}
|
|
onChange={props.onChange}
|
|
onBlur={props.onBlur}
|
|
value={props.value}
|
|
/>
|
|
<label>{props.label}</label>
|
|
</div>
|
|
{props.error && props.touched ? (
|
|
<div className="invalid-feedback" style={{ display: "block" }}>
|
|
{props.error}
|
|
</div>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function SelectInput(props) {
|
|
return (
|
|
<>
|
|
<div className="form-floating">
|
|
<select
|
|
disabled={props.isSubmitting || props.rescode === 200}
|
|
onChange={props.onChange}
|
|
onBlur={props.onBlur}
|
|
className={`form-control ${
|
|
props.error && props.touched ? "is-invalid" : ""
|
|
} ${!props.error && props.touched ? "is-valid" : ""}`}
|
|
>
|
|
<option defaultValue></option>
|
|
{props.options.map(function (option) {
|
|
return (
|
|
<option key={option} value={option}>
|
|
{option}
|
|
</option>
|
|
);
|
|
})}
|
|
</select>
|
|
<label>{props.label}</label>
|
|
</div>
|
|
{props.error && props.touched ? (
|
|
<div className="invalid-feedback" style={{ display: "block" }}>
|
|
{props.error}
|
|
</div>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function CheckInput(props) {
|
|
return (
|
|
<>
|
|
<div className="form-check text-start">
|
|
<input
|
|
disabled={props.isSubmitting || props.rescode === 200}
|
|
type={props.type || "checkbox"}
|
|
className={`form-check-input ${
|
|
props.error && props.touched ? "is-invalid" : ""
|
|
} ${!props.error && props.touched ? "is-valid" : ""}`}
|
|
onChange={props.onChange}
|
|
onBlur={props.onBlur}
|
|
value={props.value}
|
|
/>
|
|
<label className="form-check-label">{props.label}</label>
|
|
</div>
|
|
{props.error && props.touched ? (
|
|
<div className="invalid-feedback" style={{ display: "block" }}>
|
|
{props.error}
|
|
</div>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|