sccoreui 4.7.6 → 4.7.8
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.
|
@@ -10,37 +10,56 @@ const multiselect_1 = require("primereact/multiselect");
|
|
|
10
10
|
const inputtextarea_1 = require("primereact/inputtextarea");
|
|
11
11
|
const max_1 = tslib_1.__importStar(require("react-phone-number-input/max"));
|
|
12
12
|
const inputnumber_1 = require("primereact/inputnumber");
|
|
13
|
+
const sccoreui_1 = require("sccoreui");
|
|
13
14
|
const InputTextField = (props) => {
|
|
14
|
-
const { errors, touched, name, length, label, placeholder, optional, maxLength, className, validate, disabled } = props;
|
|
15
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [
|
|
15
|
+
const { errors, touched, name, length, label, placeholder, optional, maxLength, className, validate, disabled, isLoading } = props;
|
|
16
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [!isLoading ?
|
|
17
|
+
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, Object.assign({ maxLength: maxLength, autoComplete: "off", disabled: disabled, placeholder: placeholder }, field, { className: `${className} full_form_field ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? '' : 'form_field'}`, id: name }))) }))] })
|
|
18
|
+
:
|
|
19
|
+
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(sccoreui_1.Skeleton, { height: "20px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)(sccoreui_1.Skeleton, { height: "40px", className: `${className}` })] }), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm', style: { height: '16px' } }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm', style: { height: '16px' } }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })));
|
|
16
20
|
};
|
|
17
21
|
const InputNumberField = (props) => {
|
|
18
|
-
const { errors, touched, name, length, label, placeholder, optional, setFieldValue, min, max, maxLength, className, validate, disabled } = props;
|
|
19
|
-
return ((0, jsx_runtime_1.
|
|
22
|
+
const { errors, touched, name, length, label, placeholder, optional, setFieldValue, min, max, maxLength, className, validate, disabled, isLoading } = props;
|
|
23
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column" }, { children: !isLoading ?
|
|
24
|
+
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, errors: errors, touched: touched, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ min: min, max: max, disabled: disabled, pt: { input: { root: { autoComplete: 'off' } } }, maxLength: maxLength, maxFractionDigits: 0, placeholder: placeholder }, field, { onChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), className: `full_form_field ${className} ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? '' : 'form_field'}`, id: name }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm', style: { height: '16px' } }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm', style: { height: '16px' } }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })
|
|
25
|
+
:
|
|
26
|
+
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(sccoreui_1.Skeleton, { height: "20px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)(sccoreui_1.Skeleton, { height: "40px", className: `${className}` })] }) })));
|
|
20
27
|
};
|
|
21
28
|
const InputCurrencyField = (props) => {
|
|
22
|
-
const { errors, touched, name, length, label, placeholder, optional, setFieldValue, min, max, maxLength, className, validate, disabled } = props;
|
|
23
|
-
return ((0, jsx_runtime_1.
|
|
29
|
+
const { errors, touched, name, length, label, placeholder, optional, setFieldValue, min, max, maxLength, className, validate, disabled, isLoading } = props;
|
|
30
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column" }, { children: !isLoading ?
|
|
31
|
+
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, errors: errors, touched: touched, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-input-icon-left form_field" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix text-lg text-gray-600 font-normal" }, { children: "$" })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ "aria-autocomplete": "none", minFractionDigits: 2, disabled: disabled, min: min, max: max, maxLength: maxLength }, field, { onChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), maxFractionDigits: 2, placeholder: placeholder, className: `full_form_field ${className} customNumberField ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? '' : 'form_field'}`, id: name }))] }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm', style: { height: '16px' } }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm', style: { height: '16px' } }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })
|
|
32
|
+
:
|
|
33
|
+
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(sccoreui_1.Skeleton, { height: "20px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)(sccoreui_1.Skeleton, { height: "40px", className: `${className}` })] }) })));
|
|
24
34
|
};
|
|
25
35
|
const InputTextAreaField = (props) => {
|
|
26
36
|
const [charCount, setCharCount] = (0, react_1.useState)(0);
|
|
27
|
-
const { errors, touched, name, length, label, placeholder, optional, values, className, maxLength, validate } = props;
|
|
37
|
+
const { errors, touched, name, length, label, placeholder, optional, values, className, maxLength, validate, isLoading } = props;
|
|
28
38
|
(0, react_1.useEffect)(() => {
|
|
29
39
|
setCharCount(values[name].length);
|
|
30
40
|
}, [values[name]]);
|
|
31
41
|
(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }));
|
|
32
|
-
return ((0, jsx_runtime_1.
|
|
42
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column relative" }, { children: !isLoading ?
|
|
43
|
+
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, type: "textarea", validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, Object.assign({ autoComplete: "off", placeholder: placeholder, style: { height: '154px', resize: 'none', overflowY: 'scroll' } }, field, { maxLength: maxLength, className: `pt-2 full_form_field ${className} ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? '' : 'form_field'}`, id: name })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "absolute text-base font-normal text-gray-600", style: { bottom: '20px', right: '12px' } }, { children: [charCount, "/", maxLength] }))] })) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm', style: { height: '16px' } }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm', style: { height: '16px' } }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })
|
|
44
|
+
:
|
|
45
|
+
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(sccoreui_1.Skeleton, { height: "20px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)(sccoreui_1.Skeleton, { height: "40px", className: `${className}` })] }) })));
|
|
33
46
|
};
|
|
34
47
|
const DropDownField = (props) => {
|
|
35
|
-
const { errors, touched, name, length, label, placeholder, options, optional, customSelectedTemplate, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled, filter, panelStyle } = props;
|
|
36
|
-
return ((0, jsx_runtime_1.
|
|
48
|
+
const { errors, touched, name, length, label, placeholder, options, optional, customSelectedTemplate, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled, filter, panelStyle, isLoading } = props;
|
|
49
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column" }, { children: !isLoading ?
|
|
50
|
+
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({ panelStyle: panelStyle || '', filter: filter || false, disabled: disabled, placeholder: placeholder }, field, { options: options, itemTemplate: customFieldsTemplate, valueTemplate: customSelectedTemplate, optionDisabled: optionDisabled, optionLabel: optionLabel, className: `full_form_field ${className} ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? '' : 'form_field'}`, id: name }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm', style: { height: '16px' } }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm', style: { height: '16px' } }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })
|
|
51
|
+
:
|
|
52
|
+
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(sccoreui_1.Skeleton, { height: "20px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)(sccoreui_1.Skeleton, { height: "40px", className: `${className}` })] }) })));
|
|
37
53
|
};
|
|
38
54
|
const MultiSelectField = (props) => {
|
|
39
|
-
const { errors, touched, name, length, label, placeholder, options, optional, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled } = props;
|
|
40
|
-
return ((0, jsx_runtime_1.
|
|
55
|
+
const { errors, touched, name, length, label, placeholder, options, optional, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled, isLoading } = props;
|
|
56
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column" }, { children: !isLoading ?
|
|
57
|
+
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, Object.assign({ disabled: disabled, placeholder: placeholder }, field, { options: options, itemTemplate: customFieldsTemplate, optionDisabled: optionDisabled, optionLabel: optionLabel, className: `full_form_field ${className} ${errors[name] && touched[name] ? 'p-invalid' : ''} ${length === 'full' ? '' : 'form_field'}`, id: name }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm', style: { height: '16px' } }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm', style: { height: '16px' } }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })
|
|
58
|
+
:
|
|
59
|
+
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(sccoreui_1.Skeleton, { height: "20px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)(sccoreui_1.Skeleton, { height: "40px", className: `${className}` })] }) })));
|
|
41
60
|
};
|
|
42
61
|
const PhoneNumberField = (props) => {
|
|
43
|
-
const { errors, touched, name, length, values, label, placeholder, optional, position, setFieldValue } = props;
|
|
62
|
+
const { errors, touched, name, length, values, label, placeholder, optional, position, setFieldValue, isLoading } = props;
|
|
44
63
|
const customCountry = (props) => {
|
|
45
64
|
const customCountryTemplate = (options) => {
|
|
46
65
|
let callCode = (0, max_1.getCountryCallingCode)(options.value);
|
|
@@ -56,7 +75,10 @@ const PhoneNumberField = (props) => {
|
|
|
56
75
|
setFieldValue('countryCode', e.value);
|
|
57
76
|
} }))) })) })));
|
|
58
77
|
};
|
|
59
|
-
return ((0, jsx_runtime_1.
|
|
78
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column gap-1" }, { children: !isLoading ?
|
|
79
|
+
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] })), !optional && (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "font-medium text-base mb-1", htmlFor: name }, { children: label })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(max_1.default, Object.assign({ international: true, countryCallingCodeEditable: false, withCountryCallingCode: false, countrySelectComponent: customCountry, usenationalformatfordefaultcountryvalue: "true", defaultCountry: values[name], limitMaxLength: true, className: `full_form_field flex align-items-center ${errors[name] ? 'p-invalid' : ''} ${length === 'full' ? 'form_field' : 'form_field'}` }, field, { onChange: (e) => setFieldValue(name, e) }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm', style: { height: '16px' } }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'errorField flex align-items-center text-sm', style: { height: '16px' } }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })
|
|
80
|
+
:
|
|
81
|
+
(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(sccoreui_1.Skeleton, { height: "20px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)(sccoreui_1.Skeleton, { height: "40px", className: `full_form_field` })] }) })));
|
|
60
82
|
};
|
|
61
83
|
// const InputGroupField = (props: any) => {
|
|
62
84
|
// const { errors, touched, name, length, label, placeholder, optional, position, setFieldValue, validate } = props;
|
|
@@ -84,6 +84,7 @@ export interface TextFieldProps {
|
|
|
84
84
|
className?: string;
|
|
85
85
|
validate?: any;
|
|
86
86
|
disabled?: boolean;
|
|
87
|
+
isLoading?: boolean;
|
|
87
88
|
}
|
|
88
89
|
export interface NumberFieldProps {
|
|
89
90
|
errors: any;
|
|
@@ -100,6 +101,7 @@ export interface NumberFieldProps {
|
|
|
100
101
|
className?: string;
|
|
101
102
|
validate?: any;
|
|
102
103
|
disabled?: boolean;
|
|
104
|
+
isLoading?: boolean;
|
|
103
105
|
}
|
|
104
106
|
export interface TextAreaFieldProps {
|
|
105
107
|
errors: any;
|
|
@@ -113,6 +115,7 @@ export interface TextAreaFieldProps {
|
|
|
113
115
|
className?: string;
|
|
114
116
|
maxLength?: number;
|
|
115
117
|
validate?: any;
|
|
118
|
+
isLoading?: boolean;
|
|
116
119
|
}
|
|
117
120
|
export interface DropDownFieldProps {
|
|
118
121
|
errors: any;
|
|
@@ -132,6 +135,7 @@ export interface DropDownFieldProps {
|
|
|
132
135
|
disabled?: boolean;
|
|
133
136
|
filter?: boolean;
|
|
134
137
|
panelStyle?: any;
|
|
138
|
+
isLoading?: boolean;
|
|
135
139
|
}
|
|
136
140
|
export interface MultiSelectProps {
|
|
137
141
|
errors: any;
|
|
@@ -148,17 +152,20 @@ export interface MultiSelectProps {
|
|
|
148
152
|
className?: string;
|
|
149
153
|
validate?: any;
|
|
150
154
|
disabled?: boolean;
|
|
155
|
+
isLoading?: boolean;
|
|
151
156
|
}
|
|
152
157
|
export interface TreeDropdownSelectTypes {
|
|
153
158
|
clickOnNode?: any;
|
|
154
159
|
treeData: any;
|
|
155
160
|
expandedKeys: any;
|
|
156
161
|
classNames?: any;
|
|
162
|
+
isLoading?: boolean;
|
|
157
163
|
}
|
|
158
164
|
export interface CustomColorPickerTypes {
|
|
159
165
|
onChange?: any;
|
|
160
166
|
defaultValue: string;
|
|
161
167
|
className?: string;
|
|
168
|
+
isLoading?: boolean;
|
|
162
169
|
}
|
|
163
170
|
export interface FroalaTextEditorTypes {
|
|
164
171
|
onChange?: any;
|
|
@@ -166,6 +173,7 @@ export interface FroalaTextEditorTypes {
|
|
|
166
173
|
placeholderText: string;
|
|
167
174
|
id: string;
|
|
168
175
|
className?: string;
|
|
176
|
+
isLoading?: boolean;
|
|
169
177
|
}
|
|
170
178
|
export interface ListBoxDropdownTypes {
|
|
171
179
|
values: any;
|
|
@@ -187,4 +195,5 @@ export interface ListBoxDropdownTypes {
|
|
|
187
195
|
menuClassName?: any;
|
|
188
196
|
listBoxParentClassName?: any;
|
|
189
197
|
link?: any;
|
|
198
|
+
isLoading?: boolean;
|
|
190
199
|
}
|