@devtron-labs/devtron-fe-common-lib 0.0.45-beta-6 → 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,9 +26624,9 @@ 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
|
-
return (jsxRuntime.jsx("span", { children: jsxRuntime.jsx("a", __assign({ target: "_blank", href: link, className: "cursor fs-13 onlink" }, { children: linkText })) }));
|
|
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
|
};
|
|
26631
26631
|
function handleError(error) {
|
|
26632
26632
|
if (!error) {
|
|
@@ -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') {
|
|
@@ -26645,10 +26656,10 @@ function CustomInput(_a) {
|
|
|
26645
26656
|
return (jsxRuntime.jsxs("div", __assign({ className: "form__error" }, { children: [jsxRuntime.jsx(SvgIcWarning, { className: "form__icon form__icon--error" }), error] })));
|
|
26646
26657
|
}
|
|
26647
26658
|
};
|
|
26648
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "flex column left top" }, { children: [label && (jsxRuntime.jsxs("label", __assign({ className: "form__label ".concat(labelClassName, " ").concat(isRequiredField ? 'dc__required-field' : '')
|
|
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
|
@@ -9,7 +9,7 @@ export function CustomInput({
|
|
|
9
9
|
onChange,
|
|
10
10
|
onBlur = (e) => {},
|
|
11
11
|
onFocus = (e) => {},
|
|
12
|
-
label,
|
|
12
|
+
label = '',
|
|
13
13
|
type = 'text',
|
|
14
14
|
disabled = false,
|
|
15
15
|
labelClassName = '',
|
|
@@ -24,11 +24,14 @@ 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 (
|
|
30
33
|
<span>
|
|
31
|
-
<a target="_blank" href={link} className="cursor fs-13 onlink">
|
|
34
|
+
<a target="_blank" href={link} className="cursor fs-13 onlink ml-4">
|
|
32
35
|
{linkText}
|
|
33
36
|
</a>
|
|
34
37
|
</span>
|
|
@@ -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') {
|
|
@@ -69,11 +89,9 @@ export function CustomInput({
|
|
|
69
89
|
return (
|
|
70
90
|
<div className="flex column left top">
|
|
71
91
|
{label && (
|
|
72
|
-
<label
|
|
73
|
-
className={
|
|
74
|
-
|
|
75
|
-
>
|
|
76
|
-
{label} {showLink && renderLabelHelperText()}
|
|
92
|
+
<label className={`form__label ${labelClassName}`} data-testid={`label-${dataTestid}`}>
|
|
93
|
+
<span className={`${isRequiredField ? 'dc__required-field' : ''}`}>{label}</span>
|
|
94
|
+
{showLink && renderLabelHelperText()}
|
|
77
95
|
</label>
|
|
78
96
|
)}
|
|
79
97
|
<input
|
|
@@ -86,7 +104,7 @@ export function CustomInput({
|
|
|
86
104
|
e.persist()
|
|
87
105
|
onChange(e)
|
|
88
106
|
}}
|
|
89
|
-
onBlur={
|
|
107
|
+
onBlur={handleOnBlur}
|
|
90
108
|
onFocus={onFocus}
|
|
91
109
|
placeholder={placeholder}
|
|
92
110
|
value={value}
|
|
@@ -96,14 +114,12 @@ export function CustomInput({
|
|
|
96
114
|
/>
|
|
97
115
|
|
|
98
116
|
{renderFormError()}
|
|
99
|
-
{helperText
|
|
100
|
-
|
|
101
|
-
<
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
</>
|
|
106
|
-
) : null}
|
|
117
|
+
{helperText && (
|
|
118
|
+
<div className="form__text-field-info">
|
|
119
|
+
<Info className="form__icon form__icon--info" />
|
|
120
|
+
<p className="sentence-case">{helperText}</p>
|
|
121
|
+
</div>
|
|
122
|
+
)}
|
|
107
123
|
</div>
|
|
108
124
|
)
|
|
109
125
|
}
|