@devtron-labs/devtron-fe-common-lib 0.0.45-beta-8 → 0.0.45-beta-9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { CustomInputProps } from './Types';
|
|
3
|
-
export declare function CustomInput({ name, value, error, onChange, onBlur, onFocus, label, type, disabled, labelClassName, placeholder, tabIndex, dataTestid, isRequiredField, autoFocus, rootClassName, autoComplete, showLink, linkText, link, helperText, }: CustomInputProps): JSX.Element;
|
|
3
|
+
export declare function CustomInput({ name, value, error, onChange, onBlur, onFocus, label, type, disabled, labelClassName, placeholder, tabIndex, dataTestid, isRequiredField, autoFocus, rootClassName, autoComplete, showLink, linkText, link, helperText, state, setState, handleBlurChange }: CustomInputProps): JSX.Element;
|
package/dist/index.js
CHANGED
|
@@ -26624,7 +26624,7 @@ function DevtronProgressing(_a) {
|
|
|
26624
26624
|
}
|
|
26625
26625
|
|
|
26626
26626
|
function CustomInput(_a) {
|
|
26627
|
-
var name = _a.name, value = _a.value, error = _a.error, onChange = _a.onChange
|
|
26627
|
+
var name = _a.name, value = _a.value, error = _a.error, onChange = _a.onChange; _a.onBlur; var _c = _a.onFocus, onFocus = _c === void 0 ? function (e) { } : _c, _d = _a.label, label = _d === void 0 ? '' : _d, _e = _a.type, type = _e === void 0 ? 'text' : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.labelClassName, labelClassName = _g === void 0 ? '' : _g, _h = _a.placeholder, placeholder = _h === void 0 ? '' : _h, _j = _a.tabIndex, tabIndex = _j === void 0 ? 1 : _j, _k = _a.dataTestid, dataTestid = _k === void 0 ? '' : _k, _l = _a.isRequiredField, isRequiredField = _l === void 0 ? false : _l, _m = _a.autoFocus, autoFocus = _m === void 0 ? true : _m, _o = _a.rootClassName, rootClassName = _o === void 0 ? '' : _o, _p = _a.autoComplete, autoComplete = _p === void 0 ? 'off' : _p, _q = _a.showLink, showLink = _q === void 0 ? false : _q, _r = _a.linkText, linkText = _r === void 0 ? '' : _r, _s = _a.link, link = _s === void 0 ? '' : _s, _t = _a.helperText, helperText = _t === void 0 ? '' : _t, state = _a.state, setState = _a.setState, handleBlurChange = _a.handleBlurChange;
|
|
26628
26628
|
var renderLabelHelperText = function () {
|
|
26629
26629
|
return (jsxRuntime.jsx("span", { children: jsxRuntime.jsx("a", __assign({ target: "_blank", href: link, className: "cursor fs-13 onlink ml-4" }, { children: linkText })) }));
|
|
26630
26630
|
};
|
|
@@ -26637,6 +26637,17 @@ function CustomInput(_a) {
|
|
|
26637
26637
|
}
|
|
26638
26638
|
return error;
|
|
26639
26639
|
}
|
|
26640
|
+
var handleOnBlur = function (event) {
|
|
26641
|
+
if (typeof handleBlurChange === 'function') {
|
|
26642
|
+
handleBlurChange();
|
|
26643
|
+
}
|
|
26644
|
+
if (state) {
|
|
26645
|
+
setState(function (prevState) {
|
|
26646
|
+
var _a;
|
|
26647
|
+
return (__assign(__assign({}, prevState), (_a = {}, _a[event.target.name] = __assign(__assign({}, prevState[event.target.name]), { value: event.target.value.trim() }), _a)));
|
|
26648
|
+
});
|
|
26649
|
+
}
|
|
26650
|
+
};
|
|
26640
26651
|
var renderFormError = function () {
|
|
26641
26652
|
if ((error === null || error === void 0 ? void 0 : error.length) > 0) {
|
|
26642
26653
|
if (typeof error === 'object') {
|
|
@@ -26648,7 +26659,7 @@ function CustomInput(_a) {
|
|
|
26648
26659
|
return (jsxRuntime.jsxs("div", __assign({ className: "flex column left top" }, { children: [label && (jsxRuntime.jsxs("label", __assign({ className: "form__label ".concat(labelClassName), "data-testid": "label-".concat(dataTestid) }, { children: [jsxRuntime.jsx("span", __assign({ className: "".concat(isRequiredField ? 'dc__required-field' : '') }, { children: label })), showLink && renderLabelHelperText()] }))), jsxRuntime.jsx("input", { "data-testid": dataTestid, type: type, name: name, autoComplete: autoComplete, className: "form__input ".concat(rootClassName), onChange: function (e) {
|
|
26649
26660
|
e.persist();
|
|
26650
26661
|
onChange(e);
|
|
26651
|
-
}, onBlur:
|
|
26662
|
+
}, onBlur: handleOnBlur, onFocus: onFocus, placeholder: placeholder, value: value, disabled: disabled, tabIndex: tabIndex, autoFocus: autoFocus }), renderFormError(), helperText && (jsxRuntime.jsxs("div", __assign({ className: "form__text-field-info" }, { children: [jsxRuntime.jsx(SvgIcInfoFilled, { className: "form__icon form__icon--info" }), jsxRuntime.jsx("p", __assign({ className: "sentence-case" }, { children: helperText }))] })))] })));
|
|
26652
26663
|
}
|
|
26653
26664
|
|
|
26654
26665
|
exports.AppStatus = AppStatus;
|
package/package.json
CHANGED
|
@@ -24,6 +24,9 @@ export function CustomInput({
|
|
|
24
24
|
linkText = '',
|
|
25
25
|
link = '',
|
|
26
26
|
helperText = '',
|
|
27
|
+
state,
|
|
28
|
+
setState,
|
|
29
|
+
handleBlurChange
|
|
27
30
|
}: CustomInputProps) {
|
|
28
31
|
const renderLabelHelperText = () => {
|
|
29
32
|
return (
|
|
@@ -47,6 +50,23 @@ export function CustomInput({
|
|
|
47
50
|
return error
|
|
48
51
|
}
|
|
49
52
|
|
|
53
|
+
const handleOnBlur = (event) => {
|
|
54
|
+
if(typeof handleBlurChange === 'function') {
|
|
55
|
+
handleBlurChange()
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
if (state) {
|
|
59
|
+
setState((prevState) => ({
|
|
60
|
+
...prevState,
|
|
61
|
+
[event.target.name]: {
|
|
62
|
+
...prevState[event.target.name],
|
|
63
|
+
value: event.target.value.trim(),
|
|
64
|
+
},
|
|
65
|
+
}))
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
}
|
|
69
|
+
|
|
50
70
|
const renderFormError = () => {
|
|
51
71
|
if (error?.length > 0) {
|
|
52
72
|
if (typeof error === 'object') {
|
|
@@ -84,7 +104,7 @@ export function CustomInput({
|
|
|
84
104
|
e.persist()
|
|
85
105
|
onChange(e)
|
|
86
106
|
}}
|
|
87
|
-
onBlur={
|
|
107
|
+
onBlur={handleOnBlur}
|
|
88
108
|
onFocus={onFocus}
|
|
89
109
|
placeholder={placeholder}
|
|
90
110
|
value={value}
|