@saltcorn/builder 0.7.4 → 0.8.0-beta.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 (9) hide show
  1. package/dist/builder_bundle.js +1 -1
  2. package/package.json +1 -1
  3. package/src/components/elements/Aggregation.js +1 -0
  4. package/src/components/elements/Container.js +738 -741
  5. package/src/components/elements/Image.js +228 -227
  6. package/src/components/elements/View.js +185 -140
  7. package/src/components/elements/ViewLink.js +193 -147
  8. package/src/components/elements/utils.js +4 -2
  9. package/src/components/storage.js +381 -380
package/src/components/elements/Image.js CHANGED
@@ -31,29 +31,28 @@ export /**
31
31
  * @category saltcorn-builder
32
32
  * @subcategory components
33
33
  */
34
- const Image = ({ fileid, block, srctype, url, alt, style }) => {
35
- const {
36
- selected,
37
- connectors: { connect, drag },
38
- } = useNode((node) => ({ selected: node.events.selected }));
39
- const theurl = srctype === "File" ? `/files/serve/${fileid}` : url;
40
- return (
41
- <span {...blockProps(block)} ref={(dom) => connect(drag(dom))}>
42
- {fileid === 0 ? (
43
- "No images Available"
44
- ) : (
45
- <img
46
- className={`${style && style.width ? "" : "w-100"} image-widget ${
47
- selected ? "selected-node" : ""
48
- }`}
49
- style={reactifyStyles(style || {})}
50
- src={theurl}
51
- alt={alt}
52
- ></img>
53
- )}
54
- </span>
55
- );
56
- };
34
+ const Image = ({ fileid, block, srctype, url, alt, style }) => {
35
+ const {
36
+ selected,
37
+ connectors: { connect, drag },
38
+ } = useNode((node) => ({ selected: node.events.selected }));
39
+ const theurl = srctype === "File" ? `/files/serve/${fileid}` : url;
40
+ return (
41
+ <span {...blockProps(block)} ref={(dom) => connect(drag(dom))}>
42
+ {fileid === 0 ? (
43
+ "No images Available"
44
+ ) : (
45
+ <img
46
+ className={`${style && style.width ? "" : "w-100"} image-widget ${selected ? "selected-node" : ""
47
+ }`}
48
+ style={reactifyStyles(style || {})}
49
+ src={theurl}
50
+ alt={alt}
51
+ ></img>
52
+ )}
53
+ </span>
54
+ );
55
+ };
57
56
 
58
57
  export /**
59
58
  * @returns {table}
@@ -61,231 +60,233 @@ export /**
61
60
  * @category saltcorn-builder
62
61
  * @subcategory components
63
62
  */
64
- const ImageSettings = () => {
65
- const node = useNode((node) => ({
66
- fileid: node.data.props.fileid,
67
- field: node.data.props.field,
68
- url: node.data.props.url,
69
- filepath: node.data.props.filepath,
70
- srctype: node.data.props.srctype,
71
- alt: node.data.props.alt,
72
- block: node.data.props.block,
73
- style: node.data.props.style,
74
- isFormula: node.data.props.isFormula,
75
- imgResponsiveWidths: node.data.props.imgResponsiveWidths,
76
- }));
77
- const {
78
- actions: { setProp },
79
- fileid,
80
- srctype,
81
- field,
82
- url,
83
- alt,
84
- block,
85
- isFormula,
86
- filepath,
87
- imgResponsiveWidths,
88
- style,
89
- } = node;
90
- const options = useContext(optionsCtx);
91
- const { uploadedFiles, setUploadedFiles } = useContext(previewCtx);
63
+ const ImageSettings = () => {
64
+ const node = useNode((node) => ({
65
+ fileid: node.data.props.fileid,
66
+ field: node.data.props.field,
67
+ url: node.data.props.url,
68
+ filepath: node.data.props.filepath,
69
+ srctype: node.data.props.srctype,
70
+ alt: node.data.props.alt,
71
+ block: node.data.props.block,
72
+ style: node.data.props.style,
73
+ isFormula: node.data.props.isFormula,
74
+ imgResponsiveWidths: node.data.props.imgResponsiveWidths,
75
+ }));
76
+ const {
77
+ actions: { setProp },
78
+ fileid,
79
+ srctype,
80
+ field,
81
+ url,
82
+ alt,
83
+ block,
84
+ isFormula,
85
+ filepath,
86
+ imgResponsiveWidths,
87
+ style,
88
+ } = node;
89
+ const options = useContext(optionsCtx);
90
+ const { uploadedFiles, setUploadedFiles } = useContext(previewCtx);
92
91
 
93
- const handleUpload = (e) => {
94
- if (e.target.files && e.target.files.length > 0) {
95
- const formData = new FormData();
92
+ const handleUpload = (e) => {
93
+ if (e.target.files && e.target.files.length > 0) {
94
+ const formData = new FormData();
96
95
 
97
- formData.append("file", e.target.files[0]);
98
- formData.append("min_role_read", options.min_role || 1);
96
+ formData.append("file", e.target.files[0]);
97
+ formData.append("min_role_read", options.min_role || 1);
99
98
 
100
- fetch("/files/upload", {
101
- method: "POST",
102
- body: formData,
103
- headers: {
104
- "X-Requested-With": "XMLHttpRequest",
105
- "CSRF-Token": options.csrfToken,
106
- },
107
- })
108
- .then((response) => response.json())
109
- .then((result) => {
110
- setUploadedFiles((upFls) => [
111
- ...upFls,
112
- { id: result.success.id, filename: result.success.filename },
113
- ]);
114
- setProp((prop) => {
115
- prop.fileid = result.success.id;
116
- prop.srctype = "File";
117
- });
99
+ fetch("/files/upload", {
100
+ method: "POST",
101
+ body: formData,
102
+ headers: {
103
+ "X-Requested-With": "XMLHttpRequest",
104
+ "CSRF-Token": options.csrfToken,
105
+ },
118
106
  })
119
- .catch((error) => {
120
- console.error("Error:", error);
121
- });
122
- }
123
- };
124
- const setAProp = setAPropGen(setProp);
125
- return (
126
- <Accordion>
127
- <table accordiontitle="Select image">
128
- <tbody>
129
- <tr>
130
- <td colSpan="2">
131
- <i>
132
- <small>Preview shown in canvas is indicative</small>
133
- </i>
134
- </td>
135
- </tr>
136
- <tr>
137
- <td>
138
- <label>Source</label>
139
- </td>
140
- <td>
141
- <select
142
- value={srctype}
143
- className="form-control form-select"
144
- onChange={setAProp("srctype")}
145
- >
146
- <option>File</option>
147
- <option>URL</option>
148
- <option>Upload</option>
149
- {options.mode === "show" && <option>Field</option>}
150
- </select>
151
- </td>
152
- </tr>
153
- {srctype === "File" && (
154
- <tr>
155
- <td>
156
- <label>File</label>
157
- </td>
158
- <td>
159
- <select
160
- value={fileid}
161
- className="form-control form-select"
162
- onChange={setAProp("fileid")}
163
- >
164
- {options.images.map((f, ix) => (
165
- <option key={ix} value={f.id}>
166
- {f.filename}
167
- </option>
168
- ))}
169
- {(uploadedFiles || []).map((uf, ix) => (
170
- <option key={ix} value={uf.id}>
171
- {uf.filename}
172
- </option>
173
- ))}
174
- </select>
175
- </td>
176
- </tr>
177
- )}
178
- {srctype === "URL" && (
179
- <tr>
180
- <td>
181
- <label>URL</label>
182
- </td>
183
- <td>
184
- <OrFormula nodekey="url" {...{ setProp, isFormula, node }}>
185
- <input
186
- type="text"
187
- className="form-control"
188
- value={url}
189
- onChange={setAProp("url")}
190
- />
191
- </OrFormula>
192
- </td>
193
- </tr>
194
- )}
195
- {srctype === "Upload" && (
107
+ .then((response) => response.json())
108
+ .then((result) => {
109
+ setUploadedFiles((upFls) => [
110
+ ...upFls,
111
+ { id: result.success.location, filename: result.success.filename },
112
+ ]);
113
+ setProp((prop) => {
114
+ prop.fileid = result.success.location;
115
+ prop.srctype = "File";
116
+ });
117
+ })
118
+ .catch((error) => {
119
+ console.error("Error:", error);
120
+ });
121
+ }
122
+ };
123
+ const setAProp = setAPropGen(setProp);
124
+ return (
125
+ <Accordion>
126
+ <table accordiontitle="Select image">
127
+ <tbody>
196
128
  <tr>
197
- <td>
198
- <label>File</label>
199
- </td>
200
- <td>
201
- <input
202
- type="file"
203
- className="form-control"
204
- value={filepath}
205
- onChange={handleUpload}
206
- />
129
+ <td colSpan="2">
130
+ <i>
131
+ <small>Preview shown in canvas is indicative</small>
132
+ </i>
207
133
  </td>
208
134
  </tr>
209
- )}
210
- {srctype === "Field" && (
211
135
  <tr>
212
136
  <td>
213
- <label>Field</label>
137
+ <label>Source</label>
214
138
  </td>
215
139
  <td>
216
140
  <select
217
- value={field}
141
+ value={srctype}
218
142
  className="form-control form-select"
219
- onChange={setAProp("field")}
143
+ onChange={setAProp("srctype")}
220
144
  >
221
- {options.fields
222
- .filter(
223
- (f) =>
224
- (f.type && f.type.name === "String") ||
225
- f.reftable_name === "_sc_files"
226
- )
227
- .map((f, ix) => (
228
- <option key={ix} value={f.name}>
229
- {f.label}
230
- </option>
231
- ))}
145
+ <option>File</option>
146
+ <option>URL</option>
147
+ <option>Upload</option>
148
+ {options.mode === "show" && <option>Field</option>}
232
149
  </select>
233
150
  </td>
234
151
  </tr>
235
- )}
236
- {srctype !== "Upload" && (
237
- <tr>
238
- <td>
239
- <label>Alt text</label>
240
- </td>
241
- <td>
242
- <OrFormula nodekey="alt" {...{ setProp, isFormula, node }}>
152
+ {srctype === "File" && (
153
+ <tr>
154
+ <td>
155
+ <label>File</label>
156
+ </td>
157
+ <td>
158
+ <select
159
+ value={fileid}
160
+ className="form-control form-select"
161
+ onChange={setAProp("fileid")}
162
+ onBlur={setAProp("fileid")}
163
+ >
164
+ {options.images.map((f, ix) => (
165
+ <option key={ix} value={f.id}>
166
+ {f.filename}
167
+ </option>
168
+ ))}
169
+ {(uploadedFiles || []).map((uf, ix) => (
170
+ <option key={ix} value={uf.id}>
171
+ {uf.filename}
172
+ </option>
173
+ ))}
174
+ </select>
175
+ </td>
176
+ </tr>
177
+ )}
178
+ {srctype === "URL" && (
179
+ <tr>
180
+ <td>
181
+ <label>URL</label>
182
+ </td>
183
+ <td>
184
+ <OrFormula nodekey="url" {...{ setProp, isFormula, node }}>
185
+ <input
186
+ type="text"
187
+ className="form-control"
188
+ value={url}
189
+ onChange={setAProp("url")}
190
+ />
191
+ </OrFormula>
192
+ </td>
193
+ </tr>
194
+ )}
195
+ {srctype === "Upload" && (
196
+ <tr>
197
+ <td>
198
+ <label>File</label>
199
+ </td>
200
+ <td>
243
201
  <input
244
- type="text"
202
+ type="file"
245
203
  className="form-control"
246
- value={alt}
247
- onChange={setAProp("alt")}
204
+ value={filepath}
205
+ onChange={handleUpload}
248
206
  />
249
- </OrFormula>
250
- </td>
251
- </tr>
252
- )}
253
- {srctype !== "Upload" && (
254
- <tr>
255
- <td style={{ verticalAlign: "top" }}>
256
- <label>Responsive widths</label>
257
- </td>
207
+ </td>
208
+ </tr>
209
+ )}
210
+ {srctype === "Field" && (
211
+ <tr>
212
+ <td>
213
+ <label>Field</label>
214
+ </td>
215
+ <td>
216
+ <select
217
+ value={field}
218
+ className="form-control form-select"
219
+ onChange={setAProp("field")}
220
+ >
221
+ <option value=""></option>
222
+ {options.fields
223
+ .filter(
224
+ (f) =>
225
+ (f.type && f.type.name === "String") ||
226
+ (f.type && f.type === "File")
227
+ )
228
+ .map((f, ix) => (
229
+ <option key={ix} value={f.name}>
230
+ {f.label}
231
+ </option>
232
+ ))}
233
+ </select>
234
+ </td>
235
+ </tr>
236
+ )}
237
+ {srctype !== "Upload" && (
238
+ <tr>
239
+ <td>
240
+ <label>Alt text</label>
241
+ </td>
242
+ <td>
243
+ <OrFormula nodekey="alt" {...{ setProp, isFormula, node }}>
244
+ <input
245
+ type="text"
246
+ className="form-control"
247
+ value={alt}
248
+ onChange={setAProp("alt")}
249
+ />
250
+ </OrFormula>
251
+ </td>
252
+ </tr>
253
+ )}
254
+ {srctype !== "Upload" && (
255
+ <tr>
256
+ <td style={{ verticalAlign: "top" }}>
257
+ <label>Responsive widths</label>
258
+ </td>
258
259
 
259
- <td>
260
- <input
261
- type="text"
262
- value={imgResponsiveWidths}
263
- className="form-control"
264
- onChange={setAProp("imgResponsiveWidths")}
265
- />
266
- <small>
267
- <i>
268
- List of widths to serve resized images, e.g. 300, 400, 600
269
- </i>
270
- </small>
271
- </td>
272
- </tr>
273
- )}
274
- {srctype !== "Upload" && (
275
- <tr>
276
- <td colSpan="2">
277
- <BlockSetting block={block} setProp={setProp} />
278
- </td>
279
- </tr>
280
- )}
281
- </tbody>
282
- </table>
283
- <div accordiontitle="Box" className="w-100">
284
- <BoxModelEditor setProp={setProp} node={node} sizeWithStyle={true} />
285
- </div>
286
- </Accordion>
287
- );
288
- };
260
+ <td>
261
+ <input
262
+ type="text"
263
+ value={imgResponsiveWidths}
264
+ className="form-control"
265
+ onChange={setAProp("imgResponsiveWidths")}
266
+ />
267
+ <small>
268
+ <i>
269
+ List of widths to serve resized images, e.g. 300, 400, 600
270
+ </i>
271
+ </small>
272
+ </td>
273
+ </tr>
274
+ )}
275
+ {srctype !== "Upload" && (
276
+ <tr>
277
+ <td colSpan="2">
278
+ <BlockSetting block={block} setProp={setProp} />
279
+ </td>
280
+ </tr>
281
+ )}
282
+ </tbody>
283
+ </table>
284
+ <div accordiontitle="Box" className="w-100">
285
+ <BoxModelEditor setProp={setProp} node={node} sizeWithStyle={true} />
286
+ </div>
287
+ </Accordion>
288
+ );
289
+ };
289
290
 
290
291
  /**
291
292
  * @type {object}