@devtron-labs/devtron-fe-common-lib 0.0.45-beta-4 → 0.0.45-beta-6
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
|
-
import { CustomInputProps } from
|
|
2
|
+
import { CustomInputProps } from './Types';
|
|
3
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;
|
package/dist/index.js
CHANGED
|
@@ -26637,10 +26637,18 @@ function CustomInput(_a) {
|
|
|
26637
26637
|
}
|
|
26638
26638
|
return error;
|
|
26639
26639
|
}
|
|
26640
|
+
var renderFormError = function () {
|
|
26641
|
+
if ((error === null || error === void 0 ? void 0 : error.length) > 0) {
|
|
26642
|
+
if (typeof error === 'object') {
|
|
26643
|
+
return handleError(error).map(function (err) { return (jsxRuntime.jsxs("div", __assign({ className: "form__error" }, { children: [jsxRuntime.jsx(SvgIcWarning, { className: "form__icon form__icon--error" }), err] }), err)); });
|
|
26644
|
+
}
|
|
26645
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "form__error" }, { children: [jsxRuntime.jsx(SvgIcWarning, { className: "form__icon form__icon--error" }), error] })));
|
|
26646
|
+
}
|
|
26647
|
+
};
|
|
26640
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' : ''), "data-testid": "label-".concat(dataTestid) }, { children: [label, " ", showLink && renderLabelHelperText()] }))), jsxRuntime.jsx("input", { "data-testid": dataTestid, type: type, name: name, autoComplete: autoComplete, className: "form__input ".concat(rootClassName), onChange: function (e) {
|
|
26641
26649
|
e.persist();
|
|
26642
26650
|
onChange(e);
|
|
26643
|
-
}, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, value: value, disabled: disabled, tabIndex: tabIndex, autoFocus: autoFocus }),
|
|
26651
|
+
}, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, value: value, disabled: disabled, tabIndex: tabIndex, autoFocus: autoFocus }), renderFormError(), helperText ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: 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 }))] })) })) : null] })));
|
|
26644
26652
|
}
|
|
26645
26653
|
|
|
26646
26654
|
exports.AppStatus = AppStatus;
|
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CustomInputProps } from
|
|
1
|
+
import { CustomInputProps } from './Types'
|
|
2
2
|
import { ReactComponent as Info } from '../../Assets/Icon/ic-info-filled.svg'
|
|
3
3
|
import { ReactComponent as FormError } from '../../Assets/Icon/ic-warning.svg'
|
|
4
4
|
|
|
@@ -20,12 +20,11 @@ export function CustomInput({
|
|
|
20
20
|
autoFocus = true,
|
|
21
21
|
rootClassName = '',
|
|
22
22
|
autoComplete = 'off',
|
|
23
|
-
showLink= false,
|
|
24
|
-
linkText= '',
|
|
25
|
-
link= '',
|
|
26
|
-
helperText= '',
|
|
23
|
+
showLink = false,
|
|
24
|
+
linkText = '',
|
|
25
|
+
link = '',
|
|
26
|
+
helperText = '',
|
|
27
27
|
}: CustomInputProps) {
|
|
28
|
-
|
|
29
28
|
const renderLabelHelperText = () => {
|
|
30
29
|
return (
|
|
31
30
|
<span>
|
|
@@ -40,18 +39,40 @@ export function CustomInput({
|
|
|
40
39
|
if (!error) {
|
|
41
40
|
return []
|
|
42
41
|
}
|
|
43
|
-
|
|
42
|
+
|
|
44
43
|
if (!Array.isArray(error)) {
|
|
45
44
|
return [error]
|
|
46
45
|
}
|
|
47
|
-
|
|
46
|
+
|
|
48
47
|
return error
|
|
49
48
|
}
|
|
50
49
|
|
|
50
|
+
const renderFormError = () => {
|
|
51
|
+
if (error?.length > 0) {
|
|
52
|
+
if (typeof error === 'object') {
|
|
53
|
+
return handleError(error).map((err: string) => (
|
|
54
|
+
<div className="form__error" key={err}>
|
|
55
|
+
<FormError className="form__icon form__icon--error" />
|
|
56
|
+
{err}
|
|
57
|
+
</div>
|
|
58
|
+
))
|
|
59
|
+
}
|
|
60
|
+
return (
|
|
61
|
+
<div className="form__error">
|
|
62
|
+
<FormError className="form__icon form__icon--error" />
|
|
63
|
+
{error}
|
|
64
|
+
</div>
|
|
65
|
+
)
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
51
69
|
return (
|
|
52
70
|
<div className="flex column left top">
|
|
53
71
|
{label && (
|
|
54
|
-
<label
|
|
72
|
+
<label
|
|
73
|
+
className={`form__label ${labelClassName} ${isRequiredField ? 'dc__required-field' : ''}`}
|
|
74
|
+
data-testid={`label-${dataTestid}`}
|
|
75
|
+
>
|
|
55
76
|
{label} {showLink && renderLabelHelperText()}
|
|
56
77
|
</label>
|
|
57
78
|
)}
|
|
@@ -73,20 +94,16 @@ export function CustomInput({
|
|
|
73
94
|
tabIndex={tabIndex}
|
|
74
95
|
autoFocus={autoFocus}
|
|
75
96
|
/>
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
<p className="sentence-case">{helperText}</p>
|
|
87
|
-
</div>
|
|
88
|
-
</>
|
|
89
|
-
) : null}
|
|
97
|
+
|
|
98
|
+
{renderFormError()}
|
|
99
|
+
{helperText ? (
|
|
100
|
+
<>
|
|
101
|
+
<div className="form__text-field-info">
|
|
102
|
+
<Info className="form__icon form__icon--info" />
|
|
103
|
+
<p className="sentence-case">{helperText}</p>
|
|
104
|
+
</div>
|
|
105
|
+
</>
|
|
106
|
+
) : null}
|
|
90
107
|
</div>
|
|
91
108
|
)
|
|
92
109
|
}
|