@arquimedes.co/eureka-forms 0.2.38-test → 0.2.40
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.
- package/dist/@Types/Form.d.ts +0 -1
- package/dist/@Types/FormStep.d.ts +1 -9
- package/dist/App.js +9 -4
- package/dist/App.module.css +8 -0
- package/dist/FormComponents/Form/ConfirmationDialog/ConfirmationDialog.js +1 -0
- package/dist/FormComponents/Form/ConfirmationDialog/ConfirmationDialog.module.css +9 -0
- package/dist/FormComponents/Form/Form.d.ts +0 -1
- package/dist/FormComponents/Form/Form.js +6 -5
- package/dist/FormComponents/Step/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.js +2 -2
- package/dist/FormComponents/Step/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.js +1 -1
- package/dist/FormComponents/Step/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.module.css +1 -1
- package/dist/FormComponents/Step/Step.js +0 -4
- package/dist/FormComponents/Step/TextAreaStep/MaterialTextAreaStep/DraftEditor.css +50 -2
- package/dist/FormComponents/Step/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.js +44 -32
- package/dist/FormComponents/Step/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.module.css +0 -1
- package/dist/FormComponents/Step/TitleStep/MaterialTitleStep/MaterialTitleStep.module.css +2 -0
- package/dist/FormComponents/Term/MaterialTerm/MaterialTerm.module.css +10 -0
- package/dist/constants/FormStepTypes.d.ts +0 -1
- package/dist/constants/FormStepTypes.js +0 -1
- package/dist/constants/InternalFormStyle.js +0 -1
- package/dist/shared/RoundedButton/RoundedButton.js +1 -1
- package/dist/shared/RoundedDatePicker/RoundedDatePicker.js +1 -3
- package/dist/shared/RoundedSelect/RoundedSelect.js +5 -0
- package/package.json +9 -3
- package/dist/FormComponents/Step/CheckBoxStep/CheckBoxStep.d.ts +0 -9
- package/dist/FormComponents/Step/CheckBoxStep/CheckBoxStep.js +0 -37
- package/dist/FormComponents/Step/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.d.ts +0 -4
- package/dist/FormComponents/Step/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.js +0 -40
- package/dist/FormComponents/Step/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.module.css +0 -34
package/dist/@Types/Form.d.ts
CHANGED
|
@@ -1,19 +1,11 @@
|
|
|
1
1
|
import Types, { ClassifierOptionTypes, ClientInfoTypes, OptionTypes } from '../constants/FormStepTypes';
|
|
2
|
-
export declare type FormStep = Title |
|
|
2
|
+
export declare type FormStep = Title | TextArea | TextInput | DatePicker | FileUpload | Separator | FormSelector | ClassifierSelector;
|
|
3
3
|
export interface Title {
|
|
4
4
|
id: string;
|
|
5
5
|
type: Types.TITLE;
|
|
6
6
|
title: string;
|
|
7
7
|
description: string | null;
|
|
8
8
|
}
|
|
9
|
-
export interface CheckBox {
|
|
10
|
-
label: string;
|
|
11
|
-
description: string | null;
|
|
12
|
-
id: string;
|
|
13
|
-
type: Types.CHECKBOX;
|
|
14
|
-
required: boolean;
|
|
15
|
-
size: 1 | 2 | 3 | 4;
|
|
16
|
-
}
|
|
17
9
|
export interface FileUpload {
|
|
18
10
|
id: string;
|
|
19
11
|
type: Types.FILEUPLOAD;
|
package/dist/App.js
CHANGED
|
@@ -74,7 +74,7 @@ function App(_a) {
|
|
|
74
74
|
//
|
|
75
75
|
function fetchOrgData(domain) {
|
|
76
76
|
return __awaiter(this, void 0, void 0, function () {
|
|
77
|
-
var response, _a, currentOrg
|
|
77
|
+
var response, _a, currentOrg;
|
|
78
78
|
return __generator(this, function (_b) {
|
|
79
79
|
switch (_b.label) {
|
|
80
80
|
case 0:
|
|
@@ -91,8 +91,11 @@ function App(_a) {
|
|
|
91
91
|
response = _a;
|
|
92
92
|
if (response === null || response === void 0 ? void 0 : response.data) {
|
|
93
93
|
currentOrg = response.data;
|
|
94
|
-
|
|
95
|
-
favicon
|
|
94
|
+
// document.title = currentOrg.name;
|
|
95
|
+
// const favicon: any = document.getElementById('favicon');
|
|
96
|
+
// if (favicon !== undefined) {
|
|
97
|
+
// favicon.href = currentOrg.partialLogoUrl;
|
|
98
|
+
// }
|
|
96
99
|
return [2 /*return*/, currentOrg];
|
|
97
100
|
}
|
|
98
101
|
return [2 /*return*/];
|
|
@@ -109,7 +112,6 @@ function App(_a) {
|
|
|
109
112
|
case 1:
|
|
110
113
|
response = _a.sent();
|
|
111
114
|
if (response.data) {
|
|
112
|
-
console.log('ORGANIZATON', response);
|
|
113
115
|
setOrganizationInfo(response.data);
|
|
114
116
|
setForm(migrateFormData(formData));
|
|
115
117
|
}
|
|
@@ -140,6 +142,7 @@ function App(_a) {
|
|
|
140
142
|
loadInfo(apiKey, domain);
|
|
141
143
|
}
|
|
142
144
|
else {
|
|
145
|
+
console.log('ERROREMBED');
|
|
143
146
|
//Error in embed
|
|
144
147
|
setForm(null);
|
|
145
148
|
setOrganizationInfo(null);
|
|
@@ -190,7 +193,9 @@ function App(_a) {
|
|
|
190
193
|
return (_jsx("div", __assign({ className: styles.curtain }, { children: _jsx(Loader, { size: 50 }, void 0) }), void 0));
|
|
191
194
|
}
|
|
192
195
|
else if (form === null) {
|
|
196
|
+
console.log('FORM IS NULL');
|
|
193
197
|
if (organizationInfo === null) {
|
|
198
|
+
console.log('ORG IS NULL');
|
|
194
199
|
if (isWidget) {
|
|
195
200
|
return (_jsx("div", __assign({ className: styles.widgetContainer }, { children: _jsx("div", __assign({ className: styles.curtain }, { children: "Error" }), void 0) }), void 0));
|
|
196
201
|
}
|
package/dist/App.module.css
CHANGED
|
@@ -7,6 +7,15 @@
|
|
|
7
7
|
position: relative;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
+
.confirmationContainer,
|
|
11
|
+
.confirmationContainer *,
|
|
12
|
+
.confirmationContainer *::after,
|
|
13
|
+
.confirmationContainer *::before {
|
|
14
|
+
-webkit-box-sizing: content-box;
|
|
15
|
+
-moz-box-sizing: content-box;
|
|
16
|
+
box-sizing: content-box;
|
|
17
|
+
}
|
|
18
|
+
|
|
10
19
|
.checkContainer {
|
|
11
20
|
margin-left: auto;
|
|
12
21
|
margin-right: auto;
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
import { Organization } from '../../@Types/@Types';
|
|
3
3
|
import { Form, FormStyle } from '../../@Types/Form';
|
|
4
4
|
import { CustomStep } from '../../App';
|
|
5
|
-
export declare const getLocale: () => any;
|
|
6
5
|
export interface WidthStats {
|
|
7
6
|
currentBreakPoint: number;
|
|
8
7
|
isMobile: boolean;
|
|
@@ -39,13 +39,13 @@ var localeMap = {
|
|
|
39
39
|
'en-US': enLocale,
|
|
40
40
|
es: esLocale,
|
|
41
41
|
};
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
return ((_a = localeMap[navigator.languages && navigator.languages.length
|
|
42
|
+
var getNavigatorLanguage = function () {
|
|
43
|
+
return navigator.languages && navigator.languages.length
|
|
45
44
|
? navigator.languages[0]
|
|
46
45
|
: navigator.userLanguage ||
|
|
47
46
|
navigator.language ||
|
|
48
|
-
navigator.browserLanguage
|
|
47
|
+
navigator.browserLanguage ||
|
|
48
|
+
'es';
|
|
49
49
|
};
|
|
50
50
|
var blockSize = 210;
|
|
51
51
|
var spacingSize = 20;
|
|
@@ -108,6 +108,7 @@ var generateClassName = createGenerateClassName({
|
|
|
108
108
|
productionPrefix: 'efjss',
|
|
109
109
|
});
|
|
110
110
|
function FormTypeComponent(_a) {
|
|
111
|
+
var _b;
|
|
111
112
|
var props = __rest(_a, []);
|
|
112
113
|
var renderTypes = function () {
|
|
113
114
|
switch (props.form.type) {
|
|
@@ -124,7 +125,7 @@ function FormTypeComponent(_a) {
|
|
|
124
125
|
};
|
|
125
126
|
switch (props.formStyle.type) {
|
|
126
127
|
case FormStyleTypes.MATERIAL:
|
|
127
|
-
return (_jsx(StylesProvider, __assign({ generateClassName: generateClassName }, { children: _jsx(ThemeProvider, __assign({ theme: muiTheme }, { children: _jsx(MuiPickersUtilsProvider, __assign({ utils: DateFnsUtils, locale:
|
|
128
|
+
return (_jsx(StylesProvider, __assign({ generateClassName: generateClassName }, { children: _jsx(ThemeProvider, __assign({ theme: muiTheme }, { children: _jsx(MuiPickersUtilsProvider, __assign({ utils: DateFnsUtils, locale: (_b = localeMap[getNavigatorLanguage()]) !== null && _b !== void 0 ? _b : localeMap.es }, { children: renderTypes() }), void 0) }), void 0) }), void 0));
|
|
128
129
|
default:
|
|
129
130
|
return renderTypes();
|
|
130
131
|
}
|
|
@@ -58,13 +58,13 @@ function ClassifierSelector(_a) {
|
|
|
58
58
|
sizeChange();
|
|
59
59
|
}, inputRef: inputRef, helperText: errors[step.id]
|
|
60
60
|
? errors[step.id].message
|
|
61
|
-
: step.description, error: !!errors[step.id] }, { children: [_jsx(MenuItem, __assign({ value: '' }, { children: _jsx("em", { children: "Sin Seleccionar" }, void 0) }), 'EMPTY'), classifier.children
|
|
61
|
+
: step.description, error: !!errors[step.id] }, { children: [_jsx(MenuItem, __assign({ value: '', style: { whiteSpace: 'normal' } }, { children: _jsx("em", { children: "Sin Seleccionar" }, void 0) }), 'EMPTY'), classifier.children
|
|
62
62
|
.filter(function (classifier) {
|
|
63
63
|
var _a;
|
|
64
64
|
return ((_a = step.options[classifier._id]) === null || _a === void 0 ? void 0 : _a.type) !==
|
|
65
65
|
ClassifierOptionTypes.HIDE;
|
|
66
66
|
})
|
|
67
|
-
.map(function (classifier) { return (_jsx(MenuItem, __assign({ value: classifier._id }, { children: classifier.name }), classifier._id)); })] }), void 0) }), void 0));
|
|
67
|
+
.map(function (classifier) { return (_jsx(MenuItem, __assign({ value: classifier._id, style: { whiteSpace: 'normal' } }, { children: classifier.name }), classifier._id)); })] }), void 0) }), void 0));
|
|
68
68
|
};
|
|
69
69
|
var mapNestedOption = function () {
|
|
70
70
|
if (value) {
|
|
@@ -51,7 +51,7 @@ function Selector(_a) {
|
|
|
51
51
|
sizeChange();
|
|
52
52
|
}, helperText: errors[step.id]
|
|
53
53
|
? errors[step.id].message
|
|
54
|
-
: step.description, error: !!errors[step.id] }, { children: [_jsx(MenuItem, __assign({ value: '' }, { children: _jsx("em", { children: "Sin Seleccionar" }, void 0) }), 'EMPTY'), step.options.map(function (option) { return (_jsx(MenuItem, __assign({ value: option.value }, { children: option.label }), option.value)); })] }), void 0) }), void 0));
|
|
54
|
+
: step.description, error: !!errors[step.id] }, { children: [_jsx(MenuItem, __assign({ value: '', style: { whiteSpace: 'normal' } }, { children: _jsx("em", { children: "Sin Seleccionar" }, void 0) }), 'EMPTY'), step.options.map(function (option) { return (_jsx(MenuItem, __assign({ value: option.value, style: { whiteSpace: 'normal' } }, { children: option.label }), option.value)); })] }), void 0) }), void 0));
|
|
55
55
|
};
|
|
56
56
|
var mapNestedOption = function () {
|
|
57
57
|
var currentOptionIndex = null;
|
|
@@ -30,7 +30,6 @@ import ClassifierSelectorStep from './ClassifierSelectorStep/ClassifierSelectorS
|
|
|
30
30
|
import TextAreaStep from './TextAreaStep/TextAreaStep';
|
|
31
31
|
import DatePickerStep from './DatePickerStep/DatePickerStep';
|
|
32
32
|
import FileUploadStep from './FileUploadStep/FileUploadStep';
|
|
33
|
-
import CheckBoxStep from './CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep';
|
|
34
33
|
function StepComponent(_a) {
|
|
35
34
|
var step = _a.step, props = __rest(_a, ["step"]);
|
|
36
35
|
switch (step.type) {
|
|
@@ -40,9 +39,6 @@ function StepComponent(_a) {
|
|
|
40
39
|
case Types.SELECTOR: {
|
|
41
40
|
return _jsx(SelectorStep, __assign({ step: step }, props), void 0);
|
|
42
41
|
}
|
|
43
|
-
case Types.CHECKBOX: {
|
|
44
|
-
return _jsx(CheckBoxStep, __assign({ step: step }, props), void 0);
|
|
45
|
-
}
|
|
46
42
|
case Types.CLASSIFIER_SELECTOR: {
|
|
47
43
|
return (_jsx(ClassifierSelectorStep, __assign({ step: step }, props), void 0));
|
|
48
44
|
}
|
|
@@ -10,7 +10,9 @@
|
|
|
10
10
|
.EF-DraftContainer .rdw-option-wrapper {
|
|
11
11
|
border-radius: 7px;
|
|
12
12
|
border: 1px solid var(--eureka-outline);
|
|
13
|
+
background-color: transparent;
|
|
13
14
|
}
|
|
15
|
+
|
|
14
16
|
.EF-DraftContainer .rdw-option-wrapper:active {
|
|
15
17
|
border: 1px solid var(--eureka-primary);
|
|
16
18
|
}
|
|
@@ -28,15 +30,61 @@
|
|
|
28
30
|
border-radius: 15px 15px 0 0;
|
|
29
31
|
border: none;
|
|
30
32
|
border-bottom: 1px solid var(--eureka-outline);
|
|
33
|
+
background-color: transparent;
|
|
31
34
|
}
|
|
32
35
|
|
|
33
36
|
.EF-DraftContainer .rdw-editor-main {
|
|
34
37
|
cursor: text;
|
|
35
|
-
padding-top:
|
|
36
|
-
padding-bottom:
|
|
38
|
+
padding-top: 12px;
|
|
39
|
+
padding-bottom: 12px;
|
|
37
40
|
margin-right: 0px;
|
|
38
41
|
}
|
|
39
42
|
|
|
40
43
|
.EF-DraftContainer .public-DraftStyleDefault-block {
|
|
41
44
|
margin: 0px 0;
|
|
45
|
+
max-width: 100%;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.EF-DraftContainer .rdw-image-imagewrapper {
|
|
49
|
+
max-width: 100%;
|
|
50
|
+
/* cursor: pointer; */
|
|
51
|
+
position: relative;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.EF-DraftContainer .rdw-image-alignment-editor {
|
|
55
|
+
padding-right: 10px;
|
|
56
|
+
padding-left: 5px;
|
|
57
|
+
margin-left: -5px;
|
|
58
|
+
}
|
|
59
|
+
.EF-DraftContainer .rdw-editing-image {
|
|
60
|
+
border: 1px solid var(--secondary);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.EF-DraftContainer .DraftEditor-root figure {
|
|
64
|
+
margin: 0px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.EF-DraftContainer .rdw-image-alignment-option {
|
|
68
|
+
font-size: 16px !important;
|
|
69
|
+
width: 20px;
|
|
70
|
+
height: 20px;
|
|
71
|
+
margin-left: 2px;
|
|
72
|
+
border-radius: 2px;
|
|
73
|
+
|
|
74
|
+
display: flex;
|
|
75
|
+
align-items: center;
|
|
76
|
+
justify-content: center;
|
|
77
|
+
border: 1px solid var(--light-grey);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.EF-DraftContainer .rdw-image-alignment-options-popup {
|
|
81
|
+
width: fit-content;
|
|
82
|
+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Hides empty placeholder */
|
|
86
|
+
.EF-DraftContainer
|
|
87
|
+
.RichEditor-hidePlaceholder
|
|
88
|
+
.public-DraftEditorPlaceholder-root {
|
|
89
|
+
display: none;
|
|
42
90
|
}
|
|
@@ -36,10 +36,7 @@ function TextAreaStep(_a) {
|
|
|
36
36
|
return { border: '1px solid ' + formStyle.primaryColor };
|
|
37
37
|
}
|
|
38
38
|
else {
|
|
39
|
-
return {
|
|
40
|
-
border: '1px solid ' + formStyle.outlineColor,
|
|
41
|
-
pointerEvents: postview ? 'none' : 'all',
|
|
42
|
-
};
|
|
39
|
+
return { border: '1px solid ' + formStyle.outlineColor };
|
|
43
40
|
}
|
|
44
41
|
};
|
|
45
42
|
if (step.hasTextEditor) {
|
|
@@ -54,7 +51,7 @@ function TextAreaStep(_a) {
|
|
|
54
51
|
if (!postview) {
|
|
55
52
|
setFocus(false);
|
|
56
53
|
}
|
|
57
|
-
} }, { children:
|
|
54
|
+
} }, { children: _jsxs("div", __assign({ className: styles.textContainer + ' EF-DraftContainer', style: calcStyle(), onMouseEnter: function () {
|
|
58
55
|
if (!postview) {
|
|
59
56
|
setHovering(true);
|
|
60
57
|
}
|
|
@@ -66,36 +63,51 @@ function TextAreaStep(_a) {
|
|
|
66
63
|
if (!postview) {
|
|
67
64
|
setFocus(true);
|
|
68
65
|
}
|
|
69
|
-
} }, { children: _jsx(Controller, { name: step.id, control: control, defaultValue: originalValues[step.id]
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
66
|
+
} }, { children: [postview && (_jsx("div", { className: styles.disabledCurtain }, void 0)), _jsx(Controller, { name: step.id, control: control, defaultValue: originalValues[step.id]
|
|
67
|
+
? EditorState.createWithContent(convertFromRaw(getRawText(originalValues[step.id].draft, originalValues[step.id].text)))
|
|
68
|
+
: EditorState.createEmpty(), rules: step.required
|
|
69
|
+
? {
|
|
70
|
+
validate: function (editorState) {
|
|
71
|
+
return editorState
|
|
72
|
+
.getCurrentContent()
|
|
73
|
+
.hasText();
|
|
74
|
+
},
|
|
75
|
+
}
|
|
76
|
+
: {}, shouldUnregister: true, render: function (_a) {
|
|
77
|
+
var _b;
|
|
78
|
+
var field = _a.field;
|
|
79
|
+
var editorClassName = styles.editor;
|
|
80
|
+
if (!field.value.getCurrentContent().hasText()) {
|
|
81
|
+
if (field.value
|
|
75
82
|
.getCurrentContent()
|
|
76
|
-
.
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
inline: {
|
|
83
|
+
.getBlockMap()
|
|
84
|
+
.first()
|
|
85
|
+
.getType() !== 'unstyled') {
|
|
86
|
+
editorClassName +=
|
|
87
|
+
' RichEditor-hidePlaceholder';
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
return (_jsx(Editor, { editorRef: field.ref, onFocus: function () {
|
|
91
|
+
setFocus(true);
|
|
92
|
+
}, onBlur: field.onBlur, editorState: field.value, onEditorStateChange: field.onChange, toolbarClassName: styles.toolbar, editorClassName: editorClassName, wrapperClassName: styles.wrapper, placeholder: (_b = step.description) !== null && _b !== void 0 ? _b : '', toolbar: {
|
|
87
93
|
options: [
|
|
88
|
-
'
|
|
89
|
-
'
|
|
90
|
-
'
|
|
91
|
-
'strikethrough',
|
|
94
|
+
'inline',
|
|
95
|
+
'list',
|
|
96
|
+
'history',
|
|
92
97
|
],
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
98
|
+
inline: {
|
|
99
|
+
options: [
|
|
100
|
+
'bold',
|
|
101
|
+
'italic',
|
|
102
|
+
'underline',
|
|
103
|
+
'strikethrough',
|
|
104
|
+
],
|
|
105
|
+
},
|
|
106
|
+
list: {
|
|
107
|
+
options: ['unordered'],
|
|
108
|
+
},
|
|
109
|
+
} }, void 0));
|
|
110
|
+
} }, void 0)] }), void 0) }), void 0), _jsx("div", __assign({ className: styles.errorMsg, style: {
|
|
99
111
|
color: formStyle.errorColor,
|
|
100
112
|
} }, { children: !!errors[step.id] && 'Este campo es obligatorio' }), void 0)] }), void 0));
|
|
101
113
|
}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
display: flex;
|
|
3
3
|
flex-direction: column;
|
|
4
4
|
width: 900px;
|
|
5
|
+
max-width: 100%;
|
|
5
6
|
margin-bottom: 10px;
|
|
6
7
|
padding: 10px;
|
|
7
8
|
padding-bottom: 0px;
|
|
@@ -32,4 +33,5 @@
|
|
|
32
33
|
-webkit-user-select: none;
|
|
33
34
|
-ms-user-select: none;
|
|
34
35
|
user-select: none;
|
|
36
|
+
margin-bottom: 10px;
|
|
35
37
|
}
|
|
@@ -29,6 +29,16 @@
|
|
|
29
29
|
align-items: center;
|
|
30
30
|
position: relative;
|
|
31
31
|
}
|
|
32
|
+
|
|
33
|
+
.dialogContainer,
|
|
34
|
+
.dialogContainer *,
|
|
35
|
+
.dialogContainer *::after,
|
|
36
|
+
.dialogContainer *::before {
|
|
37
|
+
-webkit-box-sizing: content-box;
|
|
38
|
+
-moz-box-sizing: content-box;
|
|
39
|
+
box-sizing: content-box;
|
|
40
|
+
}
|
|
41
|
+
|
|
32
42
|
.closeIcon {
|
|
33
43
|
right: 15px;
|
|
34
44
|
top: 10px;
|
|
@@ -40,8 +40,6 @@ import React, { cloneElement } from 'react';
|
|
|
40
40
|
import { makeStyles } from '@material-ui/core/styles';
|
|
41
41
|
import CalendarTodayRoundedIcon from '@material-ui/icons/CalendarTodayRounded';
|
|
42
42
|
import { KeyboardDatePicker, } from '@material-ui/pickers';
|
|
43
|
-
import { getLocale } from '../../FormComponents/Form/Form';
|
|
44
|
-
import { format } from 'date-fns';
|
|
45
43
|
var useDatePickerStyles = function (props) {
|
|
46
44
|
return makeStyles(function () { return ({
|
|
47
45
|
root: {
|
|
@@ -219,7 +217,7 @@ function CustomDatePicker(_a) {
|
|
|
219
217
|
shrunkenFontSize: shrunkenFontSize,
|
|
220
218
|
fontWeight: fontWeight,
|
|
221
219
|
})();
|
|
222
|
-
return (_jsx(KeyboardDatePicker, __assign({}, others, { inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder:
|
|
220
|
+
return (_jsx(KeyboardDatePicker, __assign({}, others, { inputVariant: "outlined", size: "small", disabled: cantEdit, fullWidth: true, onChange: onChange, placeholder: "PPP", format: "PPP", required: required, keyboardIcon: showIcon ? (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit" }, void 0)) : null, InputLabelProps: { classes: labelClasses }, DialogProps: {
|
|
223
221
|
disableEnforceFocus: true,
|
|
224
222
|
className: datePicker,
|
|
225
223
|
cancelLabel: '',
|
|
@@ -98,9 +98,14 @@ var useLabelInputStyles = function (props) {
|
|
|
98
98
|
color: props.focusColor + ' !important',
|
|
99
99
|
},
|
|
100
100
|
root: {
|
|
101
|
+
whiteSpace: 'nowrap',
|
|
102
|
+
overflow: 'hidden',
|
|
103
|
+
maxWidth: 'calc(100% - 45px)',
|
|
104
|
+
textOverflow: 'ellipsis',
|
|
101
105
|
marginTop: props.height != '40px' ? '-4px' : '0px',
|
|
102
106
|
'&.EF-MuiInputLabel-shrink': {
|
|
103
107
|
marginTop: '0px',
|
|
108
|
+
maxWidth: 'calc(125% - 30px)',
|
|
104
109
|
},
|
|
105
110
|
'& .Mui-error': {
|
|
106
111
|
color: props.errorColor,
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arquimedes.co/eureka-forms",
|
|
3
3
|
"repository": "git://github.com/Arquimede5/Eureka-Forms.git",
|
|
4
|
-
"version": "0.2.
|
|
4
|
+
"version": "0.2.40",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"start": "react-scripts start",
|
|
7
7
|
"build": "react-scripts build",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"date-fns": "^2.23.0",
|
|
22
22
|
"draft-js": "^0.11.7",
|
|
23
23
|
"react-draft-wysiwyg": "^1.14.7",
|
|
24
|
-
"react-hook-form": "
|
|
24
|
+
"react-hook-form": "7.18.1",
|
|
25
25
|
"react-router-dom": "^5.2.0",
|
|
26
26
|
"react-scripts": "5.0.0-next.37",
|
|
27
27
|
"typescript": "^4.4.3"
|
|
@@ -66,7 +66,13 @@
|
|
|
66
66
|
},
|
|
67
67
|
"peerDependencies": {
|
|
68
68
|
"react": "^17.x.x",
|
|
69
|
-
"react-dom": "^17.x.x"
|
|
69
|
+
"react-dom": "^17.x.x",
|
|
70
|
+
"axios": "^0.21.x",
|
|
71
|
+
"date-fns": "^2.23.x",
|
|
72
|
+
"draft-js": "^0.11.x",
|
|
73
|
+
"react-draft-wysiwyg": "^1.14.x",
|
|
74
|
+
"react-hook-form": "^7.6.4",
|
|
75
|
+
"react-router-dom": "^5.2.0"
|
|
70
76
|
},
|
|
71
77
|
"publishConfig": {
|
|
72
78
|
"access": "public"
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { CheckBox } from '../../../@Types/FormStep';
|
|
3
|
-
import { StepProps } from '../Step';
|
|
4
|
-
export interface CheckBoxStepProps extends StepProps {
|
|
5
|
-
/** The CheckboxStep to display */
|
|
6
|
-
step: CheckBox;
|
|
7
|
-
}
|
|
8
|
-
declare function CheckboxStep({ formStyle, ...others }: CheckBoxStepProps): JSX.Element;
|
|
9
|
-
export default CheckboxStep;
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
24
|
-
import { FormStyleTypes } from '../../../constants/FormStepTypes';
|
|
25
|
-
import MaterialCheckBoxStep from './MaterialCheckBoxStep/MaterialCheckBoxStep';
|
|
26
|
-
function CheckboxStep(_a) {
|
|
27
|
-
var formStyle = _a.formStyle, others = __rest(_a, ["formStyle"]);
|
|
28
|
-
switch (formStyle.type) {
|
|
29
|
-
case FormStyleTypes.MATERIAL: {
|
|
30
|
-
return _jsx(MaterialCheckBoxStep, __assign({ formStyle: formStyle }, others), void 0);
|
|
31
|
-
}
|
|
32
|
-
default: {
|
|
33
|
-
return _jsx(MaterialCheckBoxStep, __assign({ formStyle: formStyle }, others), void 0);
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
export default CheckboxStep;
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
-
import styles from './MaterialCheckBoxStep.module.css';
|
|
14
|
-
import { calcStepWidth } from '../../StepFunctions';
|
|
15
|
-
import RoundedCheckBox from '../../../../shared/RoundedCheckBox/RoundedCheckBox';
|
|
16
|
-
import { Controller } from 'react-hook-form';
|
|
17
|
-
function CheckBoxStep(_a) {
|
|
18
|
-
var step = _a.step, form = _a.form, errors = _a.errors, control = _a.control, postview = _a.postview, formStyle = _a.formStyle, widthStats = _a.widthStats;
|
|
19
|
-
return (_jsxs("div", __assign({ className: styles.container, style: {
|
|
20
|
-
width: widthStats.currentBreakPoint <= step.size
|
|
21
|
-
? '100%'
|
|
22
|
-
: calcStepWidth(step.size, form),
|
|
23
|
-
maxWidth: '100%',
|
|
24
|
-
minHeight: step.description || step.required ? '55px' : '43px',
|
|
25
|
-
} }, { children: [_jsxs("div", __assign({ className: styles.labelCheckBoxContainer }, { children: [_jsxs("div", __assign({ className: styles.checkboxLbl }, { children: [step.label, step.required ? ' *' : '', ":"] }), void 0), _jsx(Controller, { name: step.id, control: control, defaultValue: false, rules: {
|
|
26
|
-
required: step.required
|
|
27
|
-
? 'Este campo es obligatorio'
|
|
28
|
-
: undefined,
|
|
29
|
-
}, shouldUnregister: true, render: function (_a) {
|
|
30
|
-
var field = _a.field;
|
|
31
|
-
return (_jsx(RoundedCheckBox, __assign({}, field, { inputRef: field.ref, padding: "0px", size: "1.6rem", cantEdit: postview, checkedColor: formStyle.primaryColor, uncheckedColor: formStyle.descriptionTextColor, checked: field.value }), void 0));
|
|
32
|
-
} }, void 0)] }), void 0), (step.description || !!errors[step.id]) && (_jsx("div", __assign({ className: styles.descriptionPar, style: {
|
|
33
|
-
color: !!errors[step.id]
|
|
34
|
-
? formStyle.errorColor
|
|
35
|
-
: formStyle.descriptionTextColor,
|
|
36
|
-
} }, { children: !!errors[step.id]
|
|
37
|
-
? 'Este campo es obligatorio'
|
|
38
|
-
: step.description }), void 0))] }), void 0));
|
|
39
|
-
}
|
|
40
|
-
export default CheckBoxStep;
|
package/dist/FormComponents/Step/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.module.css
DELETED
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
.container {
|
|
2
|
-
width: fit-content;
|
|
3
|
-
max-width: 100%;
|
|
4
|
-
display: flex;
|
|
5
|
-
padding: 10px;
|
|
6
|
-
padding-bottom: 0px;
|
|
7
|
-
padding-top: 5px;
|
|
8
|
-
margin-bottom: 0px;
|
|
9
|
-
flex-direction: column;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.checkboxLbl {
|
|
13
|
-
font-size: 18px;
|
|
14
|
-
margin-right: 10px;
|
|
15
|
-
margin-left: 10px;
|
|
16
|
-
white-space: nowrap;
|
|
17
|
-
overflow: hidden;
|
|
18
|
-
text-overflow: ellipsis;
|
|
19
|
-
}
|
|
20
|
-
.labelCheckBoxContainer {
|
|
21
|
-
display: flex;
|
|
22
|
-
align-items: center;
|
|
23
|
-
flex-direction: row;
|
|
24
|
-
align-items: center;
|
|
25
|
-
height: 31px;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.descriptionPar {
|
|
29
|
-
font-size: 0.75rem;
|
|
30
|
-
margin-left: 14px;
|
|
31
|
-
margin-top: -6px;
|
|
32
|
-
font-weight: 400;
|
|
33
|
-
line-height: 1.66;
|
|
34
|
-
}
|