stark-form-builder-next
Version:
Package to create form using JSON schema
90 lines (88 loc) • 4.44 kB
JavaScript
;
require("core-js/modules/es.weak-map.js");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = InputComponent;
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireWildcard(require("react"));
var _reactBootstrap = require("react-bootstrap");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/* eslint no-unneeded-ternary: "error" */
function InputComponent(props) {
const {
label,
placeholder,
id,
value,
onChange: _onChange,
name,
inputClass,
inputIcon,
type,
containerClass,
inputVarible,
errorMessage,
disabled,
showAsterisk,
maxLength,
minLength,
tooltip,
tooltipIcon,
tooltipText,
tooltipClass
} = props;
const [inputValue, setInputValue] = (0, _react.useState)("");
(0, _react.useEffect)(() => {
setInputValue(value);
}, [value]);
const renderInput = () => {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
id: id,
value: inputValue
// onChange={(e) => {
// setInputValue(e.target.value);
// if (onChange) onChange(e.target.value);
// }}
,
onChange: e => {
var _e$target;
const newValue = e === null || e === void 0 || (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value;
if (maxLength) {
if ((newValue === null || newValue === void 0 ? void 0 : newValue.length) <= maxLength) {
setInputValue(newValue);
if (_onChange) _onChange(newValue); // Optional check to enforce maxLength in the onChange handler
}
} else {
setInputValue(newValue);
if (_onChange) _onChange(newValue);
}
},
name: name,
type: type,
placeholder: placeholder,
className: inputClass,
maxLength: maxLength,
disabled: disabled,
minLength: minLength
}));
};
const renderTooltip = props => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Tooltip, props, tooltip ? tooltip : "");
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Group, {
className: containerClass
}, tooltip && label ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Label, null, " ", label, showAsterisk && /*#__PURE__*/_react.default.createElement("sup", {
className: "text-danger stark-label-astrisk"
}, "*"), " ", /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
placement: "top",
overlay: renderTooltip
}, /*#__PURE__*/_react.default.createElement("i", {
className: tooltipIcon
}, /*#__PURE__*/_react.default.createElement("span", {
className: tooltipClass
}, tooltipText)))) : label && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Label, null, " ", label, showAsterisk && /*#__PURE__*/_react.default.createElement("sup", {
className: "text-danger stark-label-astrisk"
}, "*"), " "), inputIcon && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, inputIcon), inputVarible ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, inputVarible), renderInput()) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderInput()), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Text, {
className: "text-danger"
}, errorMessage)));
}