@pareto-engineering/design-system 4.11.0 → 4.12.0

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 (19) hide show
  1. package/dist/cjs/g/FormBuilder/FormBuilder.js +6 -3
  2. package/dist/cjs/g/FormBuilder/common/Builder/Builder.js +3 -1
  3. package/dist/cjs/g/FormBuilder/common/Builder/common/InputBuilder/InputBuilder.js +7 -10
  4. package/dist/cjs/g/FormBuilder/common/Builder/common/Section/Section.js +4 -2
  5. package/dist/cjs/g/FormBuilder/common/Renderer/Renderer.js +4 -2
  6. package/dist/cjs/g/FormBuilder/common/Renderer/common/Section/Section.js +10 -2
  7. package/dist/es/g/FormBuilder/FormBuilder.js +6 -3
  8. package/dist/es/g/FormBuilder/common/Builder/Builder.js +3 -1
  9. package/dist/es/g/FormBuilder/common/Builder/common/InputBuilder/InputBuilder.js +7 -10
  10. package/dist/es/g/FormBuilder/common/Builder/common/Section/Section.js +4 -2
  11. package/dist/es/g/FormBuilder/common/Renderer/Renderer.js +4 -2
  12. package/dist/es/g/FormBuilder/common/Renderer/common/Section/Section.js +42 -32
  13. package/package.json +2 -2
  14. package/src/ui/g/FormBuilder/FormBuilder.jsx +3 -0
  15. package/src/ui/g/FormBuilder/common/Builder/Builder.jsx +2 -0
  16. package/src/ui/g/FormBuilder/common/Builder/common/InputBuilder/InputBuilder.jsx +7 -22
  17. package/src/ui/g/FormBuilder/common/Builder/common/Section/Section.jsx +2 -0
  18. package/src/ui/g/FormBuilder/common/Renderer/Renderer.jsx +2 -0
  19. package/src/ui/g/FormBuilder/common/Renderer/common/Section/Section.jsx +64 -50
package/dist/cjs/g/FormBuilder/FormBuilder.js CHANGED
@@ -40,7 +40,8 @@ const FormBuilder = _ref => {
40
40
  initialBuilderValues,
41
41
  fileUploadStatus,
42
42
  handleFileDelete,
43
- taskData
43
+ taskData,
44
+ customInputMap
44
45
  // ...otherProps
45
46
  } = _ref;
46
47
  const formattedJson = JSON.stringify(taskData, null, 2);
@@ -56,7 +57,8 @@ const FormBuilder = _ref => {
56
57
  formBuilderId: formBuilderId,
57
58
  onSave: onBuilderFormSave,
58
59
  onError: onBuilderError,
59
- validate: onBuilderValidate
60
+ validate: onBuilderValidate,
61
+ customInputMap: customInputMap
60
62
  }), mode === 'render' && /*#__PURE__*/React.createElement(_common.Renderer, {
61
63
  formData: formData,
62
64
  onSave: onRendererFormSave,
@@ -64,7 +66,8 @@ const FormBuilder = _ref => {
64
66
  shouldSubmit: shouldSubmit,
65
67
  fileUploadStatus: fileUploadStatus,
66
68
  handleFileDelete: handleFileDelete,
67
- onFileUpload: onFileUpload
69
+ onFileUpload: onFileUpload,
70
+ customInputMap: customInputMap
68
71
  }));
69
72
  };
70
73
  FormBuilder.propTypes = {
package/dist/cjs/g/FormBuilder/common/Builder/Builder.js CHANGED
@@ -42,6 +42,7 @@ const Builder = _ref => {
42
42
  onError,
43
43
  validate,
44
44
  formBuilderId,
45
+ customInputMap,
45
46
  initialValues = {}
46
47
  // ...otherProps
47
48
  } = _ref;
@@ -120,7 +121,8 @@ const Builder = _ref => {
120
121
  remove,
121
122
  values,
122
123
  setFieldValue
123
- })
124
+ }),
125
+ customInputMap: customInputMap
124
126
  })), /*#__PURE__*/React.createElement("div", {
125
127
  className: "section-footer"
126
128
  }, /*#__PURE__*/React.createElement("button", {
package/dist/cjs/g/FormBuilder/common/Builder/common/InputBuilder/InputBuilder.js CHANGED
@@ -36,8 +36,8 @@ const InputBuilder = _ref => {
36
36
  style,
37
37
  sectionIndex,
38
38
  inputIndex,
39
- onDelete
40
- // onCopy,
39
+ onDelete,
40
+ customInputMap
41
41
  // ...otherProps
42
42
  } = _ref;
43
43
  const {
@@ -49,13 +49,6 @@ const InputBuilder = _ref => {
49
49
  setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.required`, !input?.required);
50
50
  };
51
51
  const [hasDescription, setHasDescription] = (0, _react.useState)(false);
52
-
53
- // TODO: handle nav logic
54
- // const handleToggleConditionalNavigation = () => {
55
- // setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.conditionalNavigation`,
56
- // !input?.conditionalNavigation)
57
- // }
58
-
59
52
  const availableSections = values?.sections?.map((section, idx) => ({
60
53
  value: idx,
61
54
  label: `Go to ${section.title || `Untitled Section ${idx + 1}`}`
@@ -71,6 +64,7 @@ const InputBuilder = _ref => {
71
64
  const handleToggleShowSpecificFileTypes = () => {
72
65
  setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.showSpecificFileTypes`, !input.showSpecificFileTypes);
73
66
  };
67
+ const customInputTypes = customInputMap ? Object.keys(customInputMap) : [];
74
68
  return /*#__PURE__*/React.createElement("div", {
75
69
  id: id,
76
70
  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
@@ -110,7 +104,10 @@ const InputBuilder = _ref => {
110
104
  }, {
111
105
  value: 'file',
112
106
  label: 'File upload'
113
- }]
107
+ }, ...(customInputTypes && customInputTypes.map(customInputKey => ({
108
+ value: customInputKey,
109
+ label: customInputMap[customInputKey].label
110
+ })))]
114
111
  }), /*#__PURE__*/React.createElement("div", {
115
112
  className: "controls"
116
113
  }, /*#__PURE__*/React.createElement("button", {
package/dist/cjs/g/FormBuilder/common/Builder/common/Section/Section.js CHANGED
@@ -33,7 +33,8 @@ const Section = _ref => {
33
33
  className: userClassName,
34
34
  style,
35
35
  index,
36
- handleDeleteSection
36
+ handleDeleteSection,
37
+ customInputMap
37
38
  // ...otherProps
38
39
  } = _ref;
39
40
  const {
@@ -65,7 +66,8 @@ const Section = _ref => {
65
66
  sectionIndex: index,
66
67
  inputIndex: indx,
67
68
  onDelete: handleDeleteInput,
68
- onCopy: handleCopyInput
69
+ onCopy: handleCopyInput,
70
+ customInputMap: customInputMap
69
71
  }),
70
72
  identifier: input.name
71
73
  }));
package/dist/cjs/g/FormBuilder/common/Renderer/Renderer.js CHANGED
@@ -71,7 +71,8 @@ const Renderer = _ref => {
71
71
  fileUploadStatus,
72
72
  handleFileDelete,
73
73
  onFileUpload,
74
- shouldUpdateInputStateInRealTime = true
74
+ shouldUpdateInputStateInRealTime = true,
75
+ customInputMap
75
76
  // ...otherProps
76
77
  } = _ref;
77
78
  const [currentSectionIndex, setCurrentSectionIndex] = (0, _react.useState)(0);
@@ -149,7 +150,8 @@ const Renderer = _ref => {
149
150
  fileUploadStatus: fileUploadStatus,
150
151
  handleFileDelete: handleFileDelete,
151
152
  onFileUpload: onFileUpload,
152
- sectionIndex: sectionIndex
153
+ sectionIndex: sectionIndex,
154
+ customInputMap: customInputMap
153
155
  }))), /*#__PURE__*/React.createElement("div", {
154
156
  className: "navigator-container"
155
157
  }, updatedFormData.sections.length > 1 && /*#__PURE__*/React.createElement(_b.Button, {
package/dist/cjs/g/FormBuilder/common/Renderer/common/Section/Section.js CHANGED
@@ -39,9 +39,11 @@ const Section = _ref => {
39
39
  fileUploadStatus,
40
40
  handleFileDelete,
41
41
  onFileUpload,
42
- sectionIndex
42
+ sectionIndex,
43
+ customInputMap
43
44
  // ...otherProps
44
45
  } = _ref;
46
+ const customInputTypes = customInputMap ? Object.keys(customInputMap) : [];
45
47
  return /*#__PURE__*/React.createElement("div", {
46
48
  id: id,
47
49
  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
@@ -53,7 +55,9 @@ const Section = _ref => {
53
55
  name: "instructions"
54
56
  }), inputs?.map((input, inputIndex) => {
55
57
  const isFileInput = input.type === 'file';
56
- return /*#__PURE__*/React.createElement(_f.FormInput, _extends({
58
+ const isCustomInput = customInputTypes.includes(input.type);
59
+ const CustomInputComponent = isCustomInput ? customInputMap[input.type].component : null;
60
+ return !isCustomInput ? /*#__PURE__*/React.createElement(_f.FormInput, _extends({
57
61
  key: input.name
58
62
  }, input, {
59
63
  disabled: readOnly
@@ -72,6 +76,10 @@ const Section = _ref => {
72
76
  }));
73
77
  onFileUpload(filesToUpload);
74
78
  }
79
+ })) : /*#__PURE__*/React.createElement(CustomInputComponent, _extends({
80
+ key: input.name
81
+ }, input, {
82
+ disabled: readOnly
75
83
  }));
76
84
  }));
77
85
  };
package/dist/es/g/FormBuilder/FormBuilder.js CHANGED
@@ -30,7 +30,8 @@ const FormBuilder = ({
30
30
  initialBuilderValues,
31
31
  fileUploadStatus,
32
32
  handleFileDelete,
33
- taskData
33
+ taskData,
34
+ customInputMap
34
35
  // ...otherProps
35
36
  }) => {
36
37
  const formattedJson = JSON.stringify(taskData, null, 2);
@@ -46,7 +47,8 @@ const FormBuilder = ({
46
47
  formBuilderId: formBuilderId,
47
48
  onSave: onBuilderFormSave,
48
49
  onError: onBuilderError,
49
- validate: onBuilderValidate
50
+ validate: onBuilderValidate,
51
+ customInputMap: customInputMap
50
52
  }), mode === 'render' && /*#__PURE__*/React.createElement(Renderer, {
51
53
  formData: formData,
52
54
  onSave: onRendererFormSave,
@@ -54,7 +56,8 @@ const FormBuilder = ({
54
56
  shouldSubmit: shouldSubmit,
55
57
  fileUploadStatus: fileUploadStatus,
56
58
  handleFileDelete: handleFileDelete,
57
- onFileUpload: onFileUpload
59
+ onFileUpload: onFileUpload,
60
+ customInputMap: customInputMap
58
61
  }));
59
62
  };
60
63
  FormBuilder.propTypes = {
package/dist/es/g/FormBuilder/common/Builder/Builder.js CHANGED
@@ -32,6 +32,7 @@ const Builder = ({
32
32
  onError,
33
33
  validate,
34
34
  formBuilderId,
35
+ customInputMap,
35
36
  initialValues = {}
36
37
  // ...otherProps
37
38
  }) => {
@@ -106,7 +107,8 @@ const Builder = ({
106
107
  remove,
107
108
  values,
108
109
  setFieldValue
109
- })
110
+ }),
111
+ customInputMap: customInputMap
110
112
  })), /*#__PURE__*/React.createElement("div", {
111
113
  className: "section-footer"
112
114
  }, /*#__PURE__*/React.createElement("button", {
package/dist/es/g/FormBuilder/common/Builder/common/InputBuilder/InputBuilder.js CHANGED
@@ -26,8 +26,8 @@ const InputBuilder = ({
26
26
  style,
27
27
  sectionIndex,
28
28
  inputIndex,
29
- onDelete
30
- // onCopy,
29
+ onDelete,
30
+ customInputMap
31
31
  // ...otherProps
32
32
  }) => {
33
33
  const {
@@ -39,13 +39,6 @@ const InputBuilder = ({
39
39
  setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.required`, !input?.required);
40
40
  };
41
41
  const [hasDescription, setHasDescription] = useState(false);
42
-
43
- // TODO: handle nav logic
44
- // const handleToggleConditionalNavigation = () => {
45
- // setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.conditionalNavigation`,
46
- // !input?.conditionalNavigation)
47
- // }
48
-
49
42
  const availableSections = values?.sections?.map((section, idx) => ({
50
43
  value: idx,
51
44
  label: `Go to ${section.title || `Untitled Section ${idx + 1}`}`
@@ -61,6 +54,7 @@ const InputBuilder = ({
61
54
  const handleToggleShowSpecificFileTypes = () => {
62
55
  setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.showSpecificFileTypes`, !input.showSpecificFileTypes);
63
56
  };
57
+ const customInputTypes = customInputMap ? Object.keys(customInputMap) : [];
64
58
  return /*#__PURE__*/React.createElement("div", {
65
59
  id: id,
66
60
  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
@@ -100,7 +94,10 @@ const InputBuilder = ({
100
94
  }, {
101
95
  value: 'file',
102
96
  label: 'File upload'
103
- }]
97
+ }, ...(customInputTypes && customInputTypes.map(customInputKey => ({
98
+ value: customInputKey,
99
+ label: customInputMap[customInputKey].label
100
+ })))]
104
101
  }), /*#__PURE__*/React.createElement("div", {
105
102
  className: "controls"
106
103
  }, /*#__PURE__*/React.createElement("button", {
package/dist/es/g/FormBuilder/common/Builder/common/Section/Section.js CHANGED
@@ -23,7 +23,8 @@ const Section = ({
23
23
  className: userClassName,
24
24
  style,
25
25
  index,
26
- handleDeleteSection
26
+ handleDeleteSection,
27
+ customInputMap
27
28
  // ...otherProps
28
29
  }) => {
29
30
  const {
@@ -55,7 +56,8 @@ const Section = ({
55
56
  sectionIndex: index,
56
57
  inputIndex: indx,
57
58
  onDelete: handleDeleteInput,
58
- onCopy: handleCopyInput
59
+ onCopy: handleCopyInput,
60
+ customInputMap: customInputMap
59
61
  }),
60
62
  identifier: input.name
61
63
  }));
package/dist/es/g/FormBuilder/common/Renderer/Renderer.js CHANGED
@@ -65,7 +65,8 @@ const Renderer = ({
65
65
  fileUploadStatus,
66
66
  handleFileDelete,
67
67
  onFileUpload,
68
- shouldUpdateInputStateInRealTime = true
68
+ shouldUpdateInputStateInRealTime = true,
69
+ customInputMap
69
70
  // ...otherProps
70
71
  }) => {
71
72
  const [currentSectionIndex, setCurrentSectionIndex] = useState(0);
@@ -142,7 +143,8 @@ const Renderer = ({
142
143
  fileUploadStatus: fileUploadStatus,
143
144
  handleFileDelete: handleFileDelete,
144
145
  onFileUpload: onFileUpload,
145
- sectionIndex: sectionIndex
146
+ sectionIndex: sectionIndex,
147
+ customInputMap: customInputMap
146
148
  }))), /*#__PURE__*/React.createElement("div", {
147
149
  className: "navigator-container"
148
150
  }, updatedFormData.sections.length > 1 && /*#__PURE__*/React.createElement(Button, {
package/dist/es/g/FormBuilder/common/Renderer/common/Section/Section.js CHANGED
@@ -34,40 +34,50 @@ const Section = ({
34
34
  fileUploadStatus,
35
35
  handleFileDelete,
36
36
  onFileUpload,
37
- sectionIndex
37
+ sectionIndex,
38
+ customInputMap
38
39
  // ...otherProps
39
- }) => /*#__PURE__*/React.createElement("div", {
40
- id: id,
41
- className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
42
- style: style
43
- }, /*#__PURE__*/React.createElement("p", {
44
- className: "h3"
45
- }, title), /*#__PURE__*/React.createElement(ExpandableLexicalPreview, {
46
- nodes: description,
47
- name: "instructions"
48
- }), inputs?.map((input, inputIndex) => {
49
- const isFileInput = input.type === 'file';
50
- return /*#__PURE__*/React.createElement(FormInput, _extends({
51
- key: input.name
52
- }, input, {
53
- disabled: readOnly
54
- }, isFileInput && {
55
- uploadStatus: fileUploadStatus,
56
- handleFileDelete,
57
- onChange: files => {
58
- const filesToUpload = files?.filter(file => file instanceof File).map(file => ({
59
- file,
60
- name: file.name,
61
- mimeType: file.type,
62
- type: fileTypeMapper[getFileType(file)] || 'Generic',
63
- title: file.name,
64
- sectionIndex,
65
- inputIndex
66
- }));
67
- onFileUpload(filesToUpload);
68
- }
40
+ }) => {
41
+ const customInputTypes = customInputMap ? Object.keys(customInputMap) : [];
42
+ return /*#__PURE__*/React.createElement("div", {
43
+ id: id,
44
+ className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
45
+ style: style
46
+ }, /*#__PURE__*/React.createElement("p", {
47
+ className: "h3"
48
+ }, title), /*#__PURE__*/React.createElement(ExpandableLexicalPreview, {
49
+ nodes: description,
50
+ name: "instructions"
51
+ }), inputs?.map((input, inputIndex) => {
52
+ const isFileInput = input.type === 'file';
53
+ const isCustomInput = customInputTypes.includes(input.type);
54
+ const CustomInputComponent = isCustomInput ? customInputMap[input.type].component : null;
55
+ return !isCustomInput ? /*#__PURE__*/React.createElement(FormInput, _extends({
56
+ key: input.name
57
+ }, input, {
58
+ disabled: readOnly
59
+ }, isFileInput && {
60
+ uploadStatus: fileUploadStatus,
61
+ handleFileDelete,
62
+ onChange: files => {
63
+ const filesToUpload = files?.filter(file => file instanceof File).map(file => ({
64
+ file,
65
+ name: file.name,
66
+ mimeType: file.type,
67
+ type: fileTypeMapper[getFileType(file)] || 'Generic',
68
+ title: file.name,
69
+ sectionIndex,
70
+ inputIndex
71
+ }));
72
+ onFileUpload(filesToUpload);
73
+ }
74
+ })) : /*#__PURE__*/React.createElement(CustomInputComponent, _extends({
75
+ key: input.name
76
+ }, input, {
77
+ disabled: readOnly
78
+ }));
69
79
  }));
70
- }));
80
+ };
71
81
  Section.propTypes = {
72
82
  /**
73
83
  * The HTML id for this element
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pareto-engineering/design-system",
3
- "version": "4.11.0",
3
+ "version": "4.12.0",
4
4
  "description": "",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/es/index.js",
@@ -83,5 +83,5 @@
83
83
  "relay-test-utils": "^15.0.0"
84
84
  },
85
85
  "browserslist": "> 2%",
86
- "gitHead": "e615d57ca871e3be72080fac9dae86b71e53cdd7"
86
+ "gitHead": "f253e58e673c428639cc64dbb83a5fdfe9931dee"
87
87
  }
package/src/ui/g/FormBuilder/FormBuilder.jsx CHANGED
@@ -36,6 +36,7 @@ const FormBuilder = ({
36
36
  fileUploadStatus,
37
37
  handleFileDelete,
38
38
  taskData,
39
+ customInputMap,
39
40
  // ...otherProps
40
41
  }) => {
41
42
  const formattedJson = JSON.stringify(taskData, null, 2)
@@ -67,6 +68,7 @@ const FormBuilder = ({
67
68
  onSave={onBuilderFormSave}
68
69
  onError={onBuilderError}
69
70
  validate={onBuilderValidate}
71
+ customInputMap={customInputMap}
70
72
  />
71
73
  )}
72
74
  {mode === 'render' && (
@@ -78,6 +80,7 @@ const FormBuilder = ({
78
80
  fileUploadStatus={fileUploadStatus}
79
81
  handleFileDelete={handleFileDelete}
80
82
  onFileUpload={onFileUpload}
83
+ customInputMap={customInputMap}
81
84
  />
82
85
  )}
83
86
  </div>
package/src/ui/g/FormBuilder/common/Builder/Builder.jsx CHANGED
@@ -43,6 +43,7 @@ const Builder = ({
43
43
  onError,
44
44
  validate,
45
45
  formBuilderId,
46
+ customInputMap,
46
47
  initialValues = {},
47
48
  // ...otherProps
48
49
  }) => {
@@ -125,6 +126,7 @@ const Builder = ({
125
126
  handleDeleteSection={() => handleDeleteSection({
126
127
  index, remove, values, setFieldValue,
127
128
  })}
129
+ customInputMap={customInputMap}
128
130
  />
129
131
  ))}
130
132
  <div className="section-footer">
package/src/ui/g/FormBuilder/common/Builder/common/InputBuilder/InputBuilder.jsx CHANGED
@@ -41,7 +41,7 @@ const InputBuilder = ({
41
41
  sectionIndex,
42
42
  inputIndex,
43
43
  onDelete,
44
- // onCopy,
44
+ customInputMap,
45
45
  // ...otherProps
46
46
  }) => {
47
47
  const { values, setFieldValue } = useFormikContext()
@@ -53,12 +53,6 @@ const InputBuilder = ({
53
53
 
54
54
  const [hasDescription, setHasDescription] = useState(false)
55
55
 
56
- // TODO: handle nav logic
57
- // const handleToggleConditionalNavigation = () => {
58
- // setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.conditionalNavigation`,
59
- // !input?.conditionalNavigation)
60
- // }
61
-
62
56
  const availableSections = values?.sections?.map((section, idx) => ({
63
57
  value:idx,
64
58
  label:`Go to ${section.title || `Untitled Section ${idx + 1}`}`,
@@ -77,6 +71,8 @@ const InputBuilder = ({
77
71
  setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.showSpecificFileTypes`, !input.showSpecificFileTypes)
78
72
  }
79
73
 
74
+ const customInputTypes = customInputMap ? Object.keys(customInputMap) : []
75
+
80
76
  return (
81
77
  <div
82
78
  id={id}
@@ -134,13 +130,13 @@ const InputBuilder = ({
134
130
  value:'file',
135
131
  label:'File upload',
136
132
  },
133
+ ...(customInputTypes && customInputTypes.map((customInputKey) => ({
134
+ value:customInputKey,
135
+ label:customInputMap[customInputKey].label,
136
+ }))),
137
137
  ]}
138
138
  />
139
139
  <div className="controls">
140
- {/* TODO */}
141
- {/* <button type="button" onClick={() => onCopy(inputIndex)}>
142
- <span className="ai-icon x-ui-icons c-x">I</span>
143
- </button> */}
144
140
  <button type="button" onClick={() => onDelete(inputIndex)}>
145
141
  <span className="icon x-ui-icons c-x">D</span>
146
142
  </button>
@@ -168,17 +164,6 @@ const InputBuilder = ({
168
164
  Description
169
165
  </button>
170
166
  </li>
171
- {/* TODO: implement logic */}
172
- {/*
173
- <li className={`option ${input?.conditionalNavigation ? 'with-check-mark' : ''}`}>
174
- {input?.conditionalNavigation && <span className="x-ui-icons c-x icon">I</span>}
175
- <button
176
- onClick={handleToggleConditionalNavigation}
177
- type="button"
178
- >
179
- Go to section based on answer
180
- </button>
181
- </li> */}
182
167
  </ul>
183
168
  </ActionsContainer>
184
169
  </div>
package/src/ui/g/FormBuilder/common/Builder/common/Section/Section.jsx CHANGED
@@ -36,6 +36,7 @@ const Section = ({
36
36
  style,
37
37
  index,
38
38
  handleDeleteSection,
39
+ customInputMap,
39
40
  // ...otherProps
40
41
  }) => {
41
42
  const { values, setFieldValue } = useFormikContext()
@@ -69,6 +70,7 @@ const Section = ({
69
70
  inputIndex={indx}
70
71
  onDelete={handleDeleteInput}
71
72
  onCopy={handleCopyInput}
73
+ customInputMap={customInputMap}
72
74
  />,
73
75
  identifier:input.name,
74
76
  }))
package/src/ui/g/FormBuilder/common/Renderer/Renderer.jsx CHANGED
@@ -78,6 +78,7 @@ const Renderer = ({
78
78
  handleFileDelete,
79
79
  onFileUpload,
80
80
  shouldUpdateInputStateInRealTime = true,
81
+ customInputMap,
81
82
  // ...otherProps
82
83
  }) => {
83
84
  const [currentSectionIndex, setCurrentSectionIndex] = useState(0)
@@ -178,6 +179,7 @@ const Renderer = ({
178
179
  handleFileDelete={handleFileDelete}
179
180
  onFileUpload={onFileUpload}
180
181
  sectionIndex={sectionIndex}
182
+ customInputMap={customInputMap}
181
183
  />
182
184
  )
183
185
  ))}
package/src/ui/g/FormBuilder/common/Renderer/common/Section/Section.jsx CHANGED
@@ -40,57 +40,71 @@ const Section = ({
40
40
  handleFileDelete,
41
41
  onFileUpload,
42
42
  sectionIndex,
43
+ customInputMap,
43
44
  // ...otherProps
44
- }) => (
45
- <div
46
- id={id}
47
- className={[
48
-
49
- baseClassName,
50
-
51
- componentClassName,
52
- userClassName,
53
- ]
54
- .filter((e) => e)
55
- .join(' ')}
56
- style={style}
57
- >
58
- <p className="h3">{title}</p>
59
- <ExpandableLexicalPreview
60
- nodes={description}
61
- name="instructions"
62
- />
63
- {inputs?.map((input, inputIndex) => {
64
- const isFileInput = input.type === 'file'
65
- return (
66
- <FormInput
67
- key={input.name}
68
- {...input}
69
- disabled={readOnly}
70
- {...(isFileInput && {
71
- uploadStatus:fileUploadStatus,
72
- handleFileDelete,
73
- onChange :(files) => {
74
- const filesToUpload = files
75
- ?.filter((file) => file instanceof File)
76
- .map((file) => ({
77
- file,
78
- name :file.name,
79
- mimeType:file.type,
80
- type :fileTypeMapper[getFileType(file)] || 'Generic',
81
- title :file.name,
82
- sectionIndex,
83
- inputIndex,
84
- }))
85
-
86
- onFileUpload(filesToUpload)
87
- },
88
- })}
89
- />
90
- )
91
- })}
92
- </div>
93
- )
45
+ }) => {
46
+ const customInputTypes = customInputMap ? Object.keys(customInputMap) : []
47
+
48
+ return (
49
+ <div
50
+ id={id}
51
+ className={[
52
+ baseClassName,
53
+ componentClassName,
54
+ userClassName,
55
+ ]
56
+ .filter((e) => e)
57
+ .join(' ')}
58
+ style={style}
59
+ >
60
+ <p className="h3">{title}</p>
61
+ <ExpandableLexicalPreview
62
+ nodes={description}
63
+ name="instructions"
64
+ />
65
+ {inputs?.map((input, inputIndex) => {
66
+ const isFileInput = input.type === 'file'
67
+ const isCustomInput = customInputTypes.includes(input.type)
68
+ const CustomInputComponent = isCustomInput ? customInputMap[input.type].component : null
69
+
70
+ return (
71
+ !isCustomInput ? (
72
+ <FormInput
73
+ key={input.name}
74
+ {...input}
75
+ disabled={readOnly}
76
+ {...(isFileInput && {
77
+ uploadStatus:fileUploadStatus,
78
+ handleFileDelete,
79
+ onChange :(files) => {
80
+ const filesToUpload = files
81
+ ?.filter((file) => file instanceof File)
82
+ .map((file) => ({
83
+ file,
84
+ name :file.name,
85
+ mimeType:file.type,
86
+ type :fileTypeMapper[getFileType(file)] || 'Generic',
87
+ title :file.name,
88
+ sectionIndex,
89
+ inputIndex,
90
+ }))
91
+
92
+ onFileUpload(filesToUpload)
93
+ },
94
+ })}
95
+ />
96
+ ) : (
97
+ <CustomInputComponent
98
+ key={input.name}
99
+ {...input}
100
+ disabled={readOnly}
101
+ />
102
+ )
103
+ )
104
+ })}
105
+ </div>
106
+ )
107
+ }
94
108
 
95
109
  Section.propTypes = {
96
110
  /**