@saltcorn/builder 0.7.4-beta.3 → 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 +133 -127
  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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@saltcorn/builder",
3
- "version": "0.7.4-beta.3",
3
+ "version": "0.8.0-beta.0",
4
4
  "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
5
5
  "main": "index.js",
6
6
  "homepage": "https://saltcorn.com",
package/src/components/elements/Aggregation.js CHANGED
@@ -21,21 +21,21 @@ export /**
21
21
  * @subcategory components
22
22
  * @namespace
23
23
  */
24
- const Aggregation = ({ agg_relation, agg_field, stat, block, textStyle }) => {
25
- const {
26
- selected,
27
- connectors: { connect, drag },
28
- } = useNode((node) => ({ selected: node.events.selected }));
29
- return (
30
- <span
31
- className={`${textStyle} ${selected ? "selected-node" : ""}`}
32
- {...blockProps(block)}
33
- ref={(dom) => connect(drag(dom))}
34
- >
35
- [{stat} {agg_relation} {agg_field}]
36
- </span>
37
- );
38
- };
24
+ const Aggregation = ({ agg_relation, agg_field, stat, block, textStyle }) => {
25
+ const {
26
+ selected,
27
+ connectors: { connect, drag },
28
+ } = useNode((node) => ({ selected: node.events.selected }));
29
+ return (
30
+ <span
31
+ className={`${textStyle} ${selected ? "selected-node" : ""}`}
32
+ {...blockProps(block)}
33
+ ref={(dom) => connect(drag(dom))}
34
+ >
35
+ [{stat} {agg_relation} {agg_field}]
36
+ </span>
37
+ );
38
+ };
39
39
 
40
40
  export /**
41
41
  * @returns {table}
@@ -43,120 +43,126 @@ export /**
43
43
  * @subcategory components
44
44
  * @namespace
45
45
  */
46
- const AggregationSettings = () => {
47
- const {
48
- actions: { setProp },
49
- agg_relation,
50
- agg_field,
51
- stat,
52
- aggwhere,
53
- block,
54
- textStyle,
55
- } = useNode((node) => ({
56
- agg_relation: node.data.props.agg_relation,
57
- agg_field: node.data.props.agg_field,
58
- aggwhere: node.data.props.aggwhere,
59
- stat: node.data.props.stat,
60
- block: node.data.props.block,
61
- textStyle: node.data.props.textStyle,
62
- }));
63
- const options = useContext(optionsCtx);
64
- const setAProp = setAPropGen(setProp);
46
+ const AggregationSettings = () => {
47
+ const {
48
+ actions: { setProp },
49
+ agg_relation,
50
+ agg_field,
51
+ stat,
52
+ aggwhere,
53
+ block,
54
+ textStyle,
55
+ } = useNode((node) => ({
56
+ agg_relation: node.data.props.agg_relation,
57
+ agg_field: node.data.props.agg_field,
58
+ aggwhere: node.data.props.aggwhere,
59
+ stat: node.data.props.stat,
60
+ block: node.data.props.block,
61
+ textStyle: node.data.props.textStyle,
62
+ }));
63
+ const options = useContext(optionsCtx);
64
+ const setAProp = setAPropGen(setProp);
65
65
 
66
- return (
67
- <table>
68
- <tbody>
69
- <tr>
70
- <td>
71
- <label>Relation</label>
72
- </td>
73
- <td>
74
- <select
75
- className="form-control form-select"
76
- value={agg_relation}
77
- onChange={(e) => {
78
- if (!e.target) return;
79
- const value = e.target.value;
80
- setProp((prop) => {
81
- prop.agg_relation = value;
82
- const fs = options.agg_field_opts[value];
83
- if (fs && fs.length > 0) prop.agg_field = fs[0];
84
- });
85
- }}
86
- >
87
- {options.child_field_list.map((f, ix) => (
88
- <option key={ix} value={f}>
89
- {f}
90
- </option>
91
- ))}
92
- </select>
93
- </td>
94
- </tr>
95
- <tr>
96
- <td>
97
- <label>Child table field</label>
98
- </td>
99
- <td>
100
- <select
101
- className="form-control form-select"
102
- value={agg_field}
103
- onChange={setAProp("agg_field")}
104
- >
105
- {(options.agg_field_opts[agg_relation] || []).map((f, ix) => (
106
- <option key={ix} value={f}>
107
- {f}
108
- </option>
109
- ))}
110
- </select>
111
- </td>
112
- </tr>
113
- <tr>
114
- <td>
115
- <label>Statistic</label>
116
- </td>
117
- <td>
118
- <select
119
- value={stat}
120
- className="form-control form-select"
121
- onChange={setAProp("stat")}
122
- >
123
- <option value={"Count"}>Count</option>
124
- <option value={"Avg"}>Avg</option>
125
- <option value={"Sum"}>Sum</option>
126
- <option value={"Max"}>Max</option>
127
- <option value={"Min"}>Min</option>
128
- <option value={"Array_Agg"}>Array_Agg</option>
129
- {options.fields
130
- .filter((f) => f.type.name === "Date")
131
- .map((f) => (
132
- <option value={`Latest ${f.name}`}>Latest {f.name}</option>
66
+ return (
67
+ <table>
68
+ <tbody>
69
+ <tr>
70
+ <td>
71
+ <label>Relation</label>
72
+ </td>
73
+ <td>
74
+ <select
75
+ className="form-control form-select"
76
+ value={agg_relation}
77
+ onChange={(e) => {
78
+ if (!e.target) return;
79
+ const value = e.target.value;
80
+ setProp((prop) => {
81
+ prop.agg_relation = value;
82
+ const fs = options.agg_field_opts[value];
83
+ if (fs && fs.length > 0) prop.agg_field = fs[0];
84
+ });
85
+ }}
86
+ >
87
+ {options.child_field_list.map((f, ix) => (
88
+ <option key={ix} value={f}>
89
+ {f}
90
+ </option>
133
91
  ))}
134
- </select>
135
- </td>
136
- </tr>
137
- <tr>
138
- <td>
139
- <label>Where</label>
140
- </td>
141
- <td>
142
- <input
143
- type="text"
144
- className="form-control"
145
- value={aggwhere}
146
- onChange={setAProp("aggwhere")}
147
- />
148
- </td>
149
- </tr>
150
- <TextStyleRow textStyle={textStyle} setProp={setProp} />
151
- <tr>
152
- <td colSpan="2">
153
- <BlockSetting block={block} setProp={setProp} />
154
- </td>
155
- </tr>
156
- </tbody>
157
- </table>
158
- );
159
- };
92
+ </select>
93
+ </td>
94
+ </tr>
95
+ <tr>
96
+ <td>
97
+ <label>Child table field</label>
98
+ </td>
99
+ <td>
100
+ <select
101
+ className="form-control form-select"
102
+ value={agg_field}
103
+ onChange={setAProp("agg_field")}
104
+ >
105
+ {(options.agg_field_opts[agg_relation] || []).map((f, ix) => (
106
+ <option key={ix} value={f}>
107
+ {f}
108
+ </option>
109
+ ))}
110
+ </select>
111
+ </td>
112
+ </tr>
113
+ <tr>
114
+ <td>
115
+ <label>Statistic</label>
116
+ </td>
117
+ <td>
118
+ <select
119
+ value={stat}
120
+ className="form-control form-select"
121
+ onChange={setAProp("stat")}
122
+ onBlur={setAProp("stat")}
123
+ >
124
+ <option value={"Count"}>Count</option>
125
+ <option value={"Avg"}>Avg</option>
126
+ <option value={"Sum"}>Sum</option>
127
+ <option value={"Max"}>Max</option>
128
+ <option value={"Min"}>Min</option>
129
+ <option value={"Array_Agg"}>Array_Agg</option>
130
+ {options.fields
131
+ .filter((f) => f.type.name === "Date")
132
+ .map((f) => (
133
+ <option value={`Latest ${f.name}`}>Latest {f.name}</option>
134
+ ))}
135
+ {options.fields
136
+ .filter((f) => f.type.name === "Date")
137
+ .map((f) => (
138
+ <option value={`Earliest ${f.name}`}>Earliest {f.name}</option>
139
+ ))}
140
+ </select>
141
+ </td>
142
+ </tr>
143
+ <tr>
144
+ <td>
145
+ <label>Where</label>
146
+ </td>
147
+ <td>
148
+ <input
149
+ type="text"
150
+ className="form-control"
151
+ value={aggwhere}
152
+ onChange={setAProp("aggwhere")}
153
+ />
154
+ </td>
155
+ </tr>
156
+ <TextStyleRow textStyle={textStyle} setProp={setProp} />
157
+ <tr>
158
+ <td colSpan="2">
159
+ <BlockSetting block={block} setProp={setProp} />
160
+ </td>
161
+ </tr>
162
+ </tbody>
163
+ </table>
164
+ );
165
+ };
160
166
 
161
167
  /**
162
168
  * @type {object}