@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.
Files changed (29) hide show
  1. package/dist/@Types/Form.d.ts +0 -1
  2. package/dist/@Types/FormStep.d.ts +1 -9
  3. package/dist/App.js +9 -4
  4. package/dist/App.module.css +8 -0
  5. package/dist/FormComponents/Form/ConfirmationDialog/ConfirmationDialog.js +1 -0
  6. package/dist/FormComponents/Form/ConfirmationDialog/ConfirmationDialog.module.css +9 -0
  7. package/dist/FormComponents/Form/Form.d.ts +0 -1
  8. package/dist/FormComponents/Form/Form.js +6 -5
  9. package/dist/FormComponents/Step/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.js +2 -2
  10. package/dist/FormComponents/Step/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.js +1 -1
  11. package/dist/FormComponents/Step/SelectorStep/MaterialSelectorStep/MaterialSelectorStep.module.css +1 -1
  12. package/dist/FormComponents/Step/Step.js +0 -4
  13. package/dist/FormComponents/Step/TextAreaStep/MaterialTextAreaStep/DraftEditor.css +50 -2
  14. package/dist/FormComponents/Step/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.js +44 -32
  15. package/dist/FormComponents/Step/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.module.css +0 -1
  16. package/dist/FormComponents/Step/TitleStep/MaterialTitleStep/MaterialTitleStep.module.css +2 -0
  17. package/dist/FormComponents/Term/MaterialTerm/MaterialTerm.module.css +10 -0
  18. package/dist/constants/FormStepTypes.d.ts +0 -1
  19. package/dist/constants/FormStepTypes.js +0 -1
  20. package/dist/constants/InternalFormStyle.js +0 -1
  21. package/dist/shared/RoundedButton/RoundedButton.js +1 -1
  22. package/dist/shared/RoundedDatePicker/RoundedDatePicker.js +1 -3
  23. package/dist/shared/RoundedSelect/RoundedSelect.js +5 -0
  24. package/package.json +9 -3
  25. package/dist/FormComponents/Step/CheckBoxStep/CheckBoxStep.d.ts +0 -9
  26. package/dist/FormComponents/Step/CheckBoxStep/CheckBoxStep.js +0 -37
  27. package/dist/FormComponents/Step/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.d.ts +0 -4
  28. package/dist/FormComponents/Step/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.js +0 -40
  29. package/dist/FormComponents/Step/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.module.css +0 -34
@@ -52,7 +52,6 @@ export interface MaterialStyle {
52
52
  textColor: string;
53
53
  outlineColor: string;
54
54
  stepBackgroundColor: string;
55
- descriptionTextColor: string;
56
55
  }
57
56
  export interface Section {
58
57
  _id: string;
@@ -1,19 +1,11 @@
1
1
  import Types, { ClassifierOptionTypes, ClientInfoTypes, OptionTypes } from '../constants/FormStepTypes';
2
- export declare type FormStep = Title | CheckBox | TextArea | TextInput | DatePicker | FileUpload | Separator | FormSelector | ClassifierSelector;
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, favicon;
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
- favicon = document.getElementById('favicon');
95
- favicon.href = currentOrg.partialLogoUrl;
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
  }
@@ -19,3 +19,11 @@
19
19
  max-width: 100%;
20
20
  height: 100%;
21
21
  }
22
+
23
+ .container *,
24
+ .container *::after,
25
+ .container *::before {
26
+ -webkit-box-sizing: content-box;
27
+ -moz-box-sizing: content-box;
28
+ box-sizing: content-box;
29
+ }
@@ -20,6 +20,7 @@ function ConfirmationDialog(_a) {
20
20
  style: {
21
21
  borderRadius: '20px',
22
22
  maxWidth: '100vw',
23
+ boxSizing: 'content-box',
23
24
  },
24
25
  }, onClose: function () {
25
26
  onClose();
@@ -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
- export var getLocale = function () {
43
- var _a;
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]) !== null && _a !== void 0 ? _a : localeMap.es);
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: getLocale() }, { children: renderTypes() }), void 0) }), void 0) }), void 0));
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;
@@ -1,6 +1,6 @@
1
1
  .container {
2
2
  width: fit-content;
3
- max-width: 100%;
3
+ max-width: calc(100% - 20px);
4
4
  display: flex;
5
5
  padding: 10px;
6
6
  padding-bottom: 0px;
@@ -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: 1em;
36
- padding-bottom: 1em;
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: _jsx("div", __assign({ className: styles.textContainer + ' EF-DraftContainer', style: calcStyle(), onMouseEnter: function () {
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
- ? EditorState.createWithContent(convertFromRaw(getRawText(originalValues[step.id].draft, originalValues[step.id].text)))
71
- : EditorState.createEmpty(), rules: step.required
72
- ? {
73
- validate: function (editorState) {
74
- return editorState
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
- .hasText();
77
- },
78
- }
79
- : {}, shouldUnregister: true, render: function (_a) {
80
- var _b;
81
- var field = _a.field;
82
- return (_jsx(Editor, { editorRef: field.ref, onFocus: function () {
83
- setFocus(true);
84
- }, readOnly: postview, onBlur: field.onBlur, editorState: field.value, onEditorStateChange: field.onChange, toolbarClassName: styles.toolbar, editorClassName: styles.editor, wrapperClassName: styles.wrapper, placeholder: (_b = step.description) !== null && _b !== void 0 ? _b : '', toolbar: {
85
- options: ['inline', 'list', 'history'],
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
- 'bold',
89
- 'italic',
90
- 'underline',
91
- 'strikethrough',
94
+ 'inline',
95
+ 'list',
96
+ 'history',
92
97
  ],
93
- },
94
- list: {
95
- options: ['unordered'],
96
- },
97
- } }, void 0));
98
- } }, void 0) }), void 0) }), void 0), _jsx("div", __assign({ className: styles.errorMsg, style: {
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
  }
@@ -22,7 +22,6 @@
22
22
  width: 100%;
23
23
  position: relative;
24
24
  margin-bottom: 1px;
25
- overflow: hidden;
26
25
  }
27
26
 
28
27
  .editor {
@@ -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;
@@ -7,7 +7,6 @@ export declare enum FormStyleTypes {
7
7
  }
8
8
  declare enum TYPES {
9
9
  TITLE = "TITLE",
10
- CHECKBOX = "CHECKBOX",
11
10
  TEXTAREA = "TEXTAREA",
12
11
  DATEPICKER = "DATEPICKER",
13
12
  FILEUPLOAD = "FILEUPLOAD",
@@ -10,7 +10,6 @@ export var FormStyleTypes;
10
10
  var TYPES;
11
11
  (function (TYPES) {
12
12
  TYPES["TITLE"] = "TITLE";
13
- TYPES["CHECKBOX"] = "CHECKBOX";
14
13
  TYPES["TEXTAREA"] = "TEXTAREA";
15
14
  TYPES["DATEPICKER"] = "DATEPICKER";
16
15
  TYPES["FILEUPLOAD"] = "FILEUPLOAD";
@@ -8,6 +8,5 @@ var InternalFormStyle = {
8
8
  errorColor: '#cc2936',
9
9
  textColor: '#293241',
10
10
  outlineColor: '#b8b8b8',
11
- descriptionTextColor: '#AFADAD',
12
11
  };
13
12
  export default InternalFormStyle;
@@ -20,7 +20,7 @@ function RoundedButton(_a) {
20
20
  root: {
21
21
  width: width,
22
22
  textTransform: 'none',
23
- fontFamily: 'Nunito',
23
+ fontFamily: 'inherit',
24
24
  fontSize: fontSize,
25
25
  borderRadius: borderRadius,
26
26
  padding: padding,
@@ -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: format(new Date(), 'P', { locale: getLocale() }), format: "P", required: required, keyboardIcon: showIcon ? (_jsx(CalendarTodayRoundedIcon, { fontSize: "inherit" }, void 0)) : null, InputLabelProps: { classes: labelClasses }, DialogProps: {
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.38-test",
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": "^7.6.4",
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,4 +0,0 @@
1
- /// <reference types="react" />
2
- import { CheckBoxStepProps } from '../CheckBoxStep';
3
- declare function CheckBoxStep({ step, form, errors, control, postview, formStyle, widthStats, }: CheckBoxStepProps): JSX.Element;
4
- 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;
@@ -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
- }