@devtron-labs/devtron-fe-common-lib 0.0.45-beta-8 → 0.0.45-beta-10
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, handleBlurChange }: CustomInputProps): JSX.Element;
|
package/dist/index.js
CHANGED
|
@@ -26624,7 +26624,8 @@ 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, handleBlurChange = _a.handleBlurChange;
|
|
26628
|
+
var _u = __read(React.useState(state), 2), stateForm = _u[0], setStateForm = _u[1];
|
|
26628
26629
|
var renderLabelHelperText = function () {
|
|
26629
26630
|
return (jsxRuntime.jsx("span", { children: jsxRuntime.jsx("a", __assign({ target: "_blank", href: link, className: "cursor fs-13 onlink ml-4" }, { children: linkText })) }));
|
|
26630
26631
|
};
|
|
@@ -26637,6 +26638,19 @@ function CustomInput(_a) {
|
|
|
26637
26638
|
}
|
|
26638
26639
|
return error;
|
|
26639
26640
|
}
|
|
26641
|
+
var handleOnBlur = function (event) {
|
|
26642
|
+
if (typeof handleBlurChange === 'function') {
|
|
26643
|
+
handleBlurChange(event);
|
|
26644
|
+
}
|
|
26645
|
+
console.log('event', event);
|
|
26646
|
+
if (stateForm) {
|
|
26647
|
+
console.log('stateForm', stateForm);
|
|
26648
|
+
setStateForm(function (prevState) {
|
|
26649
|
+
var _a;
|
|
26650
|
+
return (__assign(__assign({}, prevState), (_a = {}, _a[event.target.name] = event.target.value.trim(), _a)));
|
|
26651
|
+
});
|
|
26652
|
+
}
|
|
26653
|
+
};
|
|
26640
26654
|
var renderFormError = function () {
|
|
26641
26655
|
if ((error === null || error === void 0 ? void 0 : error.length) > 0) {
|
|
26642
26656
|
if (typeof error === 'object') {
|
|
@@ -26648,7 +26662,7 @@ function CustomInput(_a) {
|
|
|
26648
26662
|
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
26663
|
e.persist();
|
|
26650
26664
|
onChange(e);
|
|
26651
|
-
}, onBlur:
|
|
26665
|
+
}, 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
26666
|
}
|
|
26653
26667
|
|
|
26654
26668
|
exports.AppStatus = AppStatus;
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
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
|
+
import { useState } from 'react'
|
|
4
5
|
|
|
5
6
|
export function CustomInput({
|
|
6
7
|
name,
|
|
@@ -24,7 +25,11 @@ export function CustomInput({
|
|
|
24
25
|
linkText = '',
|
|
25
26
|
link = '',
|
|
26
27
|
helperText = '',
|
|
28
|
+
state,
|
|
29
|
+
handleBlurChange
|
|
27
30
|
}: CustomInputProps) {
|
|
31
|
+
const [stateForm, setStateForm] = useState(state)
|
|
32
|
+
|
|
28
33
|
const renderLabelHelperText = () => {
|
|
29
34
|
return (
|
|
30
35
|
<span>
|
|
@@ -47,6 +52,22 @@ export function CustomInput({
|
|
|
47
52
|
return error
|
|
48
53
|
}
|
|
49
54
|
|
|
55
|
+
const handleOnBlur = (event) => {
|
|
56
|
+
if(typeof handleBlurChange === 'function') {
|
|
57
|
+
handleBlurChange(event)
|
|
58
|
+
}
|
|
59
|
+
console.log('event', event)
|
|
60
|
+
|
|
61
|
+
if (stateForm) {
|
|
62
|
+
console.log('stateForm', stateForm)
|
|
63
|
+
setStateForm((prevState) => ({
|
|
64
|
+
...prevState,
|
|
65
|
+
[event.target.name]: event.target.value.trim(),
|
|
66
|
+
}))
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
}
|
|
70
|
+
|
|
50
71
|
const renderFormError = () => {
|
|
51
72
|
if (error?.length > 0) {
|
|
52
73
|
if (typeof error === 'object') {
|
|
@@ -84,7 +105,7 @@ export function CustomInput({
|
|
|
84
105
|
e.persist()
|
|
85
106
|
onChange(e)
|
|
86
107
|
}}
|
|
87
|
-
onBlur={
|
|
108
|
+
onBlur={handleOnBlur}
|
|
88
109
|
onFocus={onFocus}
|
|
89
110
|
placeholder={placeholder}
|
|
90
111
|
value={value}
|