@saltcorn/builder 0.8.3-alpha.1 → 0.8.3-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.
|
@@ -37,49 +37,50 @@ export /**
|
|
|
37
37
|
* @subcategory components
|
|
38
38
|
* @namespace
|
|
39
39
|
*/
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
40
|
+
const ViewLink = ({
|
|
41
|
+
name,
|
|
42
|
+
block,
|
|
43
|
+
view_name,
|
|
44
|
+
minRole,
|
|
45
|
+
link_style,
|
|
46
|
+
link_size,
|
|
47
|
+
link_icon,
|
|
48
|
+
inModal,
|
|
49
|
+
label,
|
|
50
|
+
textStyle,
|
|
51
|
+
link_bgcol,
|
|
52
|
+
link_bordercol,
|
|
53
|
+
link_textcol,
|
|
54
|
+
}) => {
|
|
55
|
+
const {
|
|
56
|
+
selected,
|
|
57
|
+
connectors: { connect, drag },
|
|
58
|
+
} = useNode((node) => ({ selected: node.events.selected }));
|
|
59
|
+
const names = name.split(":");
|
|
60
60
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
61
|
+
const displabel =
|
|
62
|
+
label || view_name || (names.length > 1 ? names[1] : names[0]);
|
|
63
|
+
return (
|
|
64
|
+
<span
|
|
65
|
+
className={`${textStyle} ${inModal ? "btn btn-secondary btn-sm" : ""} ${
|
|
66
|
+
selected ? "selected-node" : "is-builder-link"
|
|
67
|
+
} ${link_style} ${link_size || ""} ${block ? "d-block" : ""}`}
|
|
68
|
+
ref={(dom) => connect(drag(dom))}
|
|
69
|
+
style={
|
|
70
|
+
link_style === "btn btn-custom-color"
|
|
71
|
+
? {
|
|
71
72
|
backgroundColor: link_bgcol || "#000000",
|
|
72
73
|
borderColor: link_bordercol || "#000000",
|
|
73
74
|
color: link_textcol || "#000000",
|
|
74
75
|
}
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
76
|
+
: {}
|
|
77
|
+
}
|
|
78
|
+
>
|
|
79
|
+
{link_icon ? <i className={`${link_icon} me-1`}></i> : ""}
|
|
80
|
+
{displabel}
|
|
81
|
+
</span>
|
|
82
|
+
);
|
|
83
|
+
};
|
|
83
84
|
|
|
84
85
|
export /**
|
|
85
86
|
* @returns {div}
|
|
@@ -87,165 +88,175 @@ export /**
|
|
|
87
88
|
* @subcategory components
|
|
88
89
|
* @namespace
|
|
89
90
|
*/
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
91
|
+
const ViewLinkSettings = () => {
|
|
92
|
+
const node = useNode((node) => ({
|
|
93
|
+
name: node.data.props.name,
|
|
94
|
+
block: node.data.props.block,
|
|
95
|
+
minRole: node.data.props.minRole,
|
|
96
|
+
isFormula: node.data.props.isFormula,
|
|
97
|
+
label: node.data.props.label,
|
|
98
|
+
inModal: node.data.props.inModal,
|
|
99
|
+
link_target_blank: node.data.props.link_target_blank,
|
|
100
|
+
link_style: node.data.props.link_style,
|
|
101
|
+
link_size: node.data.props.link_size,
|
|
102
|
+
link_icon: node.data.props.link_icon,
|
|
103
|
+
textStyle: node.data.props.textStyle,
|
|
104
|
+
link_bgcol: node.data.props.link_bgcol,
|
|
105
|
+
link_bordercol: node.data.props.link_bordercol,
|
|
106
|
+
link_textcol: node.data.props.link_textcol,
|
|
107
|
+
extra_state_fml: node.data.props.extra_state_fml,
|
|
108
|
+
view_name: node.data.props.view_name,
|
|
109
|
+
}));
|
|
110
|
+
const {
|
|
111
|
+
actions: { setProp },
|
|
112
|
+
name,
|
|
113
|
+
block,
|
|
114
|
+
minRole,
|
|
115
|
+
label,
|
|
116
|
+
isFormula,
|
|
117
|
+
inModal,
|
|
118
|
+
textStyle,
|
|
119
|
+
extra_state_fml,
|
|
120
|
+
view_name,
|
|
121
|
+
link_target_blank,
|
|
122
|
+
} = node;
|
|
123
|
+
const options = useContext(optionsCtx);
|
|
124
|
+
let errorString = false;
|
|
125
|
+
try {
|
|
126
|
+
Function("return " + extra_state_fml);
|
|
127
|
+
} catch (error) {
|
|
128
|
+
errorString = error.message;
|
|
129
|
+
}
|
|
130
|
+
const setAProp = setAPropGen(setProp);
|
|
131
|
+
//legacy values
|
|
132
|
+
const use_view_name =
|
|
133
|
+
view_name ||
|
|
134
|
+
(name &&
|
|
135
|
+
((names) => (names.length > 1 ? names[1] : names[0]))(name.split(":")));
|
|
136
|
+
const set_view_name = (e) => {
|
|
137
|
+
if (e.target) {
|
|
138
|
+
const target_value = e.target.value;
|
|
139
|
+
setProp((prop) => (prop.view_name = target_value));
|
|
140
|
+
if (target_value !== use_view_name) {
|
|
141
|
+
setProp(
|
|
142
|
+
(prop) =>
|
|
143
|
+
(prop.name = options.view_relation_opts[target_value][0].value)
|
|
144
|
+
);
|
|
140
145
|
}
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
</
|
|
162
|
-
</
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
146
|
+
}
|
|
147
|
+
};
|
|
148
|
+
return (
|
|
149
|
+
<div>
|
|
150
|
+
<table className="w-100">
|
|
151
|
+
<tbody>
|
|
152
|
+
<tr>
|
|
153
|
+
<td colSpan="2">
|
|
154
|
+
<label>View to link to</label>
|
|
155
|
+
<select
|
|
156
|
+
value={use_view_name}
|
|
157
|
+
className="form-control form-select"
|
|
158
|
+
onChange={set_view_name}
|
|
159
|
+
onBlur={set_view_name}
|
|
160
|
+
>
|
|
161
|
+
{options.view_name_opts.map((f, ix) => (
|
|
162
|
+
<option key={ix} value={f.name}>
|
|
163
|
+
{f.label}
|
|
164
|
+
</option>
|
|
165
|
+
))}
|
|
166
|
+
</select>
|
|
167
|
+
</td>
|
|
168
|
+
</tr>
|
|
169
|
+
<tr>
|
|
170
|
+
<td colSpan="2">
|
|
171
|
+
<label>Relation</label>
|
|
172
|
+
<select
|
|
173
|
+
value={name}
|
|
174
|
+
className="form-control form-select"
|
|
175
|
+
onChange={setAProp("name")}
|
|
176
|
+
onBlur={setAProp("name")}
|
|
177
|
+
>
|
|
178
|
+
{(options.view_relation_opts[use_view_name] || []).map(
|
|
179
|
+
(f, ix) => (
|
|
173
180
|
<option key={ix} value={f.value}>
|
|
174
181
|
{f.label}
|
|
175
182
|
</option>
|
|
176
|
-
)
|
|
177
|
-
|
|
178
|
-
</
|
|
179
|
-
</
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
type="text"
|
|
186
|
-
className="viewlink-label form-control"
|
|
187
|
-
value={label}
|
|
188
|
-
onChange={setAProp("label")}
|
|
189
|
-
/>
|
|
190
|
-
</OrFormula>
|
|
191
|
-
</td>
|
|
192
|
-
</tr>
|
|
193
|
-
<tr>
|
|
194
|
-
<td colSpan="2">
|
|
195
|
-
<label>Extra state Formula <FormulaTooltip /></label>
|
|
183
|
+
)
|
|
184
|
+
)}
|
|
185
|
+
</select>
|
|
186
|
+
</td>
|
|
187
|
+
</tr>
|
|
188
|
+
<tr>
|
|
189
|
+
<td colSpan="2">
|
|
190
|
+
<label>Label (leave blank for default)</label>
|
|
191
|
+
<OrFormula nodekey="label" {...{ setProp, isFormula, node }}>
|
|
196
192
|
<input
|
|
197
193
|
type="text"
|
|
198
194
|
className="viewlink-label form-control"
|
|
199
|
-
value={
|
|
200
|
-
onChange={setAProp("
|
|
195
|
+
value={label}
|
|
196
|
+
onChange={setAProp("label")}
|
|
201
197
|
/>
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
198
|
+
</OrFormula>
|
|
199
|
+
</td>
|
|
200
|
+
</tr>
|
|
201
|
+
<tr>
|
|
202
|
+
<td colSpan="2">
|
|
203
|
+
<label>
|
|
204
|
+
Extra state Formula <FormulaTooltip />
|
|
205
|
+
</label>
|
|
206
|
+
<input
|
|
207
|
+
type="text"
|
|
208
|
+
className="viewlink-label form-control"
|
|
209
|
+
value={extra_state_fml}
|
|
210
|
+
onChange={setAProp("extra_state_fml")}
|
|
211
|
+
/>
|
|
212
|
+
{errorString ? (
|
|
213
|
+
<small className="text-danger font-monospace d-block">
|
|
214
|
+
{errorString}
|
|
215
|
+
</small>
|
|
216
|
+
) : null}
|
|
217
|
+
</td>
|
|
218
|
+
</tr>
|
|
209
219
|
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
</tbody>
|
|
218
|
-
</table>
|
|
219
|
-
<div className="form-check">
|
|
220
|
-
<input
|
|
221
|
-
className="form-check-input"
|
|
222
|
-
name="block"
|
|
223
|
-
type="checkbox"
|
|
224
|
-
checked={link_target_blank}
|
|
225
|
-
onChange={setAProp("link_target_blank", { checked: true })}
|
|
226
|
-
/>
|
|
227
|
-
<label className="form-check-label">Open in new tab</label>
|
|
228
|
-
</div>
|
|
229
|
-
<div className="form-check">
|
|
230
|
-
<input
|
|
231
|
-
className="form-check-input"
|
|
232
|
-
name="block"
|
|
233
|
-
type="checkbox"
|
|
234
|
-
checked={inModal}
|
|
235
|
-
onChange={setAProp("inModal", { checked: true })}
|
|
220
|
+
<ButtonOrLinkSettingsRows
|
|
221
|
+
setProp={setProp}
|
|
222
|
+
keyPrefix="link_"
|
|
223
|
+
btnClass="btn"
|
|
224
|
+
values={node}
|
|
225
|
+
linkFirst={true}
|
|
226
|
+
linkIsBlank={true}
|
|
236
227
|
/>
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
<
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
228
|
+
</tbody>
|
|
229
|
+
</table>
|
|
230
|
+
<div className="form-check">
|
|
231
|
+
<input
|
|
232
|
+
className="form-check-input"
|
|
233
|
+
name="block"
|
|
234
|
+
type="checkbox"
|
|
235
|
+
checked={link_target_blank}
|
|
236
|
+
onChange={setAProp("link_target_blank", { checked: true })}
|
|
237
|
+
/>
|
|
238
|
+
<label className="form-check-label">Open in new tab</label>
|
|
246
239
|
</div>
|
|
247
|
-
|
|
248
|
-
|
|
240
|
+
<div className="form-check">
|
|
241
|
+
<input
|
|
242
|
+
className="form-check-input"
|
|
243
|
+
name="block"
|
|
244
|
+
type="checkbox"
|
|
245
|
+
checked={inModal}
|
|
246
|
+
onChange={setAProp("inModal", { checked: true })}
|
|
247
|
+
/>
|
|
248
|
+
<label className="form-check-label">Open in popup modal?</label>
|
|
249
|
+
</div>
|
|
250
|
+
<BlockSetting block={block} setProp={setProp} />
|
|
251
|
+
<TextStyleSetting textStyle={textStyle} setProp={setProp} />
|
|
252
|
+
<table>
|
|
253
|
+
<tbody>
|
|
254
|
+
<MinRoleSettingRow minRole={minRole} setProp={setProp} />
|
|
255
|
+
</tbody>
|
|
256
|
+
</table>
|
|
257
|
+
</div>
|
|
258
|
+
);
|
|
259
|
+
};
|
|
249
260
|
|
|
250
261
|
/**
|
|
251
262
|
* @type {object}
|
|
@@ -1109,6 +1109,7 @@ const ButtonOrLinkSettingsRows = ({
|
|
|
1109
1109
|
keyPrefix = "",
|
|
1110
1110
|
values,
|
|
1111
1111
|
linkFirst = false,
|
|
1112
|
+
linkIsBlank = false,
|
|
1112
1113
|
}) => {
|
|
1113
1114
|
const setAProp = setAPropGen(setProp);
|
|
1114
1115
|
const addBtnClass = (s) => (btnClass ? `${btnClass} ${s}` : s);
|
|
@@ -1124,7 +1125,9 @@ const ButtonOrLinkSettingsRows = ({
|
|
|
1124
1125
|
onChange={setAProp(keyPrefix + "style")}
|
|
1125
1126
|
>
|
|
1126
1127
|
{linkFirst ? (
|
|
1127
|
-
<option value={addBtnClass("btn-link")}>
|
|
1128
|
+
<option value={linkIsBlank ? "" : addBtnClass("btn-link")}>
|
|
1129
|
+
Link
|
|
1130
|
+
</option>
|
|
1128
1131
|
) : null}
|
|
1129
1132
|
<option value={addBtnClass("btn-primary")}>Primary button</option>
|
|
1130
1133
|
<option value={addBtnClass("btn-secondary")}>Secondary button</option>
|