@goldenpine/react-form-builder2 0.18.4-patch.1
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.
- package/LICENSE +7 -0
- package/README.md +250 -0
- package/dist/1.app.js +1 -0
- package/dist/app.css +38 -0
- package/dist/app.css.map +1 -0
- package/dist/app.js +71 -0
- package/lib/ItemTypes.js +11 -0
- package/lib/UUID.js +67 -0
- package/lib/dynamic-option-list.js +189 -0
- package/lib/fieldset/FieldSet.js +121 -0
- package/lib/fieldset/index.js +13 -0
- package/lib/form-dynamic-edit.js +57 -0
- package/lib/form-elements/component-drag-handle.js +91 -0
- package/lib/form-elements/component-drag-layer.js +69 -0
- package/lib/form-elements/component-drag-preview.js +61 -0
- package/lib/form-elements/component-header.js +30 -0
- package/lib/form-elements/component-label.js +30 -0
- package/lib/form-elements/custom-element.js +74 -0
- package/lib/form-elements/date-picker.js +185 -0
- package/lib/form-elements/header-bar.js +55 -0
- package/lib/form-elements/index.js +1144 -0
- package/lib/form-elements/myxss.js +30 -0
- package/lib/form-elements/star-rating.js +338 -0
- package/lib/form-elements-edit.js +740 -0
- package/lib/form-place-holder.js +52 -0
- package/lib/form-validator.js +104 -0
- package/lib/form.js +592 -0
- package/lib/functions/index.js +47 -0
- package/lib/index.js +142 -0
- package/lib/language-provider/IntlMessages.js +16 -0
- package/lib/language-provider/entries/en-us.js +17 -0
- package/lib/language-provider/entries/fa-ir.js +17 -0
- package/lib/language-provider/entries/it-it.js +17 -0
- package/lib/language-provider/entries/vi-vn.js +17 -0
- package/lib/language-provider/index.js +41 -0
- package/lib/language-provider/locales/en-us.json +117 -0
- package/lib/language-provider/locales/fa-ir.json +109 -0
- package/lib/language-provider/locales/it-it.json +109 -0
- package/lib/language-provider/locales/vi-vn.json +96 -0
- package/lib/multi-column/MultiColumnRow.js +137 -0
- package/lib/multi-column/dustbin.js +156 -0
- package/lib/multi-column/grip.js +52 -0
- package/lib/multi-column/index.js +24 -0
- package/lib/preview.js +392 -0
- package/lib/sortable-element.js +177 -0
- package/lib/sortable-form-elements.js +66 -0
- package/lib/stores/registry.js +42 -0
- package/lib/stores/requests.js +31 -0
- package/lib/stores/store.js +139 -0
- package/lib/toolbar-draggable-item.js +60 -0
- package/lib/toolbar-group-item.js +40 -0
- package/lib/toolbar.js +726 -0
- package/package.json +118 -0
- package/types/index.d.ts +184 -0
package/lib/toolbar.js
ADDED
|
@@ -0,0 +1,726 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports["default"] = void 0;
|
|
8
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
9
|
+
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
10
|
+
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
11
|
+
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
12
|
+
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
13
|
+
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
14
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
|
+
var _react = _interopRequireDefault(require("react"));
|
|
16
|
+
var _reactIntl = require("react-intl");
|
|
17
|
+
var _toolbarDraggableItem = _interopRequireDefault(require("./toolbar-draggable-item"));
|
|
18
|
+
var _toolbarGroupItem = _interopRequireDefault(require("./toolbar-group-item"));
|
|
19
|
+
var _UUID = _interopRequireDefault(require("./UUID"));
|
|
20
|
+
var _store = _interopRequireDefault(require("./stores/store"));
|
|
21
|
+
var _functions = require("./functions");
|
|
22
|
+
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
|
|
23
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
24
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
25
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /**
|
|
26
|
+
* <Toolbar />
|
|
27
|
+
*/
|
|
28
|
+
// function isDefaultItem(item) {
|
|
29
|
+
// const keys = Object.keys(item);
|
|
30
|
+
// return keys.filter(x => x !== 'element' && x !== 'key' && x !== 'group_name').length === 0;
|
|
31
|
+
// }
|
|
32
|
+
|
|
33
|
+
function buildItems(items, defaultItems) {
|
|
34
|
+
if (!items) {
|
|
35
|
+
return defaultItems;
|
|
36
|
+
}
|
|
37
|
+
return items.map(function (x) {
|
|
38
|
+
var found = defaultItems.find(function (y) {
|
|
39
|
+
return x.element === y.element && y.key === x.key;
|
|
40
|
+
});
|
|
41
|
+
if (!found) {
|
|
42
|
+
found = defaultItems.find(function (y) {
|
|
43
|
+
return (x.element || x.key) === (y.element || y.key);
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
if (found) {
|
|
47
|
+
if (x.inherited !== false) {
|
|
48
|
+
found = _objectSpread(_objectSpread({}, found), x);
|
|
49
|
+
} else if (x.group_name) {
|
|
50
|
+
found.group_name = x.group_name;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
return found || x;
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
function buildGroupItems(allItems) {
|
|
57
|
+
var items = allItems.filter(function (x) {
|
|
58
|
+
return !x.group_name;
|
|
59
|
+
});
|
|
60
|
+
var gItems = allItems.filter(function (x) {
|
|
61
|
+
return !!x.group_name;
|
|
62
|
+
});
|
|
63
|
+
var grouped = (0, _functions.groupBy)(gItems, function (x) {
|
|
64
|
+
return x.group_name;
|
|
65
|
+
});
|
|
66
|
+
var groupKeys = gItems.map(function (x) {
|
|
67
|
+
return x.group_name;
|
|
68
|
+
}).filter(function (v, i, self) {
|
|
69
|
+
return self.indexOf(v) === i;
|
|
70
|
+
});
|
|
71
|
+
return {
|
|
72
|
+
items: items,
|
|
73
|
+
grouped: grouped,
|
|
74
|
+
groupKeys: groupKeys
|
|
75
|
+
};
|
|
76
|
+
}
|
|
77
|
+
var Toolbar = /*#__PURE__*/function (_React$Component) {
|
|
78
|
+
(0, _inherits2["default"])(Toolbar, _React$Component);
|
|
79
|
+
var _super = _createSuper(Toolbar);
|
|
80
|
+
function Toolbar(props) {
|
|
81
|
+
var _this;
|
|
82
|
+
(0, _classCallCheck2["default"])(this, Toolbar);
|
|
83
|
+
_this = _super.call(this, props);
|
|
84
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderItem", function (item) {
|
|
85
|
+
return /*#__PURE__*/_react["default"].createElement(_toolbarDraggableItem["default"], {
|
|
86
|
+
data: item,
|
|
87
|
+
key: item.key,
|
|
88
|
+
onClick: _this._onClick.bind((0, _assertThisInitialized2["default"])(_this), item),
|
|
89
|
+
onCreate: _this.create
|
|
90
|
+
});
|
|
91
|
+
});
|
|
92
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "togglePin", function () {
|
|
93
|
+
_this.setState(function (prevState) {
|
|
94
|
+
return {
|
|
95
|
+
isPinned: !prevState.isPinned
|
|
96
|
+
};
|
|
97
|
+
});
|
|
98
|
+
});
|
|
99
|
+
var intl = _this.props.intl;
|
|
100
|
+
var items = buildItems(props.items, _this._defaultItems(intl));
|
|
101
|
+
_this.state = {
|
|
102
|
+
items: items,
|
|
103
|
+
isPinned: false
|
|
104
|
+
};
|
|
105
|
+
_this.create = _this.create.bind((0, _assertThisInitialized2["default"])(_this));
|
|
106
|
+
return _this;
|
|
107
|
+
}
|
|
108
|
+
(0, _createClass2["default"])(Toolbar, [{
|
|
109
|
+
key: "componentDidMount",
|
|
110
|
+
value: function componentDidMount() {
|
|
111
|
+
var _this2 = this;
|
|
112
|
+
_store["default"].subscribe(function (state) {
|
|
113
|
+
return _this2.setState({
|
|
114
|
+
store: state
|
|
115
|
+
});
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
}, {
|
|
119
|
+
key: "_defaultItems",
|
|
120
|
+
value: function _defaultItems(intl) {
|
|
121
|
+
return [{
|
|
122
|
+
key: 'Header',
|
|
123
|
+
name: intl.formatMessage({
|
|
124
|
+
id: 'header-text'
|
|
125
|
+
}),
|
|
126
|
+
icon: 'fas fa-heading',
|
|
127
|
+
"static": true,
|
|
128
|
+
content: intl.formatMessage({
|
|
129
|
+
id: 'place-holder-text'
|
|
130
|
+
})
|
|
131
|
+
}, {
|
|
132
|
+
key: 'Label',
|
|
133
|
+
name: intl.formatMessage({
|
|
134
|
+
id: 'label'
|
|
135
|
+
}),
|
|
136
|
+
"static": true,
|
|
137
|
+
icon: 'fas fa-font',
|
|
138
|
+
content: intl.formatMessage({
|
|
139
|
+
id: 'place-holder-text'
|
|
140
|
+
})
|
|
141
|
+
}, {
|
|
142
|
+
key: 'Paragraph',
|
|
143
|
+
name: intl.formatMessage({
|
|
144
|
+
id: 'paragraph'
|
|
145
|
+
}),
|
|
146
|
+
"static": true,
|
|
147
|
+
icon: 'fas fa-paragraph',
|
|
148
|
+
content: intl.formatMessage({
|
|
149
|
+
id: 'place-holder-text'
|
|
150
|
+
})
|
|
151
|
+
}, {
|
|
152
|
+
key: 'LineBreak',
|
|
153
|
+
name: intl.formatMessage({
|
|
154
|
+
id: 'line-break'
|
|
155
|
+
}),
|
|
156
|
+
"static": true,
|
|
157
|
+
icon: 'fas fa-arrows-alt-h'
|
|
158
|
+
}, {
|
|
159
|
+
key: 'Dropdown',
|
|
160
|
+
canHaveAnswer: true,
|
|
161
|
+
name: intl.formatMessage({
|
|
162
|
+
id: 'dropdown'
|
|
163
|
+
}),
|
|
164
|
+
icon: 'far fa-caret-square-down',
|
|
165
|
+
label: intl.formatMessage({
|
|
166
|
+
id: 'place-holder-label'
|
|
167
|
+
}),
|
|
168
|
+
field_name: 'dropdown_',
|
|
169
|
+
options: []
|
|
170
|
+
}, {
|
|
171
|
+
key: 'Tags',
|
|
172
|
+
canHaveAnswer: true,
|
|
173
|
+
name: intl.formatMessage({
|
|
174
|
+
id: 'tags'
|
|
175
|
+
}),
|
|
176
|
+
icon: 'fas fa-tags',
|
|
177
|
+
label: intl.formatMessage({
|
|
178
|
+
id: 'place-holder-label'
|
|
179
|
+
}),
|
|
180
|
+
field_name: 'tags_',
|
|
181
|
+
options: []
|
|
182
|
+
}, {
|
|
183
|
+
key: 'Checkboxes',
|
|
184
|
+
canHaveAnswer: true,
|
|
185
|
+
name: intl.formatMessage({
|
|
186
|
+
id: 'checkboxes'
|
|
187
|
+
}),
|
|
188
|
+
icon: 'far fa-check-square',
|
|
189
|
+
label: intl.formatMessage({
|
|
190
|
+
id: 'place-holder-label'
|
|
191
|
+
}),
|
|
192
|
+
field_name: 'checkboxes_',
|
|
193
|
+
options: []
|
|
194
|
+
}, {
|
|
195
|
+
key: 'RadioButtons',
|
|
196
|
+
canHaveAnswer: true,
|
|
197
|
+
name: intl.formatMessage({
|
|
198
|
+
id: 'multiple-choice'
|
|
199
|
+
}),
|
|
200
|
+
icon: 'far fa-dot-circle',
|
|
201
|
+
label: intl.formatMessage({
|
|
202
|
+
id: 'place-holder-label'
|
|
203
|
+
}),
|
|
204
|
+
field_name: 'radiobuttons_',
|
|
205
|
+
options: []
|
|
206
|
+
}, {
|
|
207
|
+
key: 'TextInput',
|
|
208
|
+
canHaveAnswer: true,
|
|
209
|
+
name: intl.formatMessage({
|
|
210
|
+
id: 'text-input'
|
|
211
|
+
}),
|
|
212
|
+
label: intl.formatMessage({
|
|
213
|
+
id: 'place-holder-label'
|
|
214
|
+
}),
|
|
215
|
+
icon: 'fas fa-font',
|
|
216
|
+
field_name: 'text_input_'
|
|
217
|
+
}, {
|
|
218
|
+
key: 'EmailInput',
|
|
219
|
+
canHaveAnswer: true,
|
|
220
|
+
name: intl.formatMessage({
|
|
221
|
+
id: 'email-input'
|
|
222
|
+
}),
|
|
223
|
+
label: intl.formatMessage({
|
|
224
|
+
id: 'place-holder-email'
|
|
225
|
+
}),
|
|
226
|
+
icon: 'fas fa-envelope',
|
|
227
|
+
field_name: 'email_input_'
|
|
228
|
+
}, {
|
|
229
|
+
key: 'NumberInput',
|
|
230
|
+
canHaveAnswer: true,
|
|
231
|
+
name: intl.formatMessage({
|
|
232
|
+
id: 'number-input'
|
|
233
|
+
}),
|
|
234
|
+
label: intl.formatMessage({
|
|
235
|
+
id: 'place-holder-label'
|
|
236
|
+
}),
|
|
237
|
+
icon: 'fas fa-plus',
|
|
238
|
+
field_name: 'number_input_'
|
|
239
|
+
}, {
|
|
240
|
+
key: 'PhoneNumber',
|
|
241
|
+
canHaveAnswer: true,
|
|
242
|
+
name: intl.formatMessage({
|
|
243
|
+
id: 'phone-input'
|
|
244
|
+
}),
|
|
245
|
+
label: intl.formatMessage({
|
|
246
|
+
id: 'place-holder-phone-number'
|
|
247
|
+
}),
|
|
248
|
+
icon: 'fas fa-phone',
|
|
249
|
+
field_name: 'phone_input_'
|
|
250
|
+
}, {
|
|
251
|
+
key: 'TextArea',
|
|
252
|
+
canHaveAnswer: true,
|
|
253
|
+
name: intl.formatMessage({
|
|
254
|
+
id: 'multi-line-input'
|
|
255
|
+
}),
|
|
256
|
+
label: intl.formatMessage({
|
|
257
|
+
id: 'place-holder-label'
|
|
258
|
+
}),
|
|
259
|
+
icon: 'fas fa-text-height',
|
|
260
|
+
field_name: 'text_area_'
|
|
261
|
+
}, {
|
|
262
|
+
key: 'FieldSet',
|
|
263
|
+
canHaveAnswer: false,
|
|
264
|
+
name: intl.formatMessage({
|
|
265
|
+
id: 'fieldset'
|
|
266
|
+
}),
|
|
267
|
+
label: intl.formatMessage({
|
|
268
|
+
id: 'fieldset'
|
|
269
|
+
}),
|
|
270
|
+
icon: 'fas fa-bars',
|
|
271
|
+
field_name: 'fieldset-element'
|
|
272
|
+
}, {
|
|
273
|
+
key: 'TwoColumnRow',
|
|
274
|
+
canHaveAnswer: false,
|
|
275
|
+
name: intl.formatMessage({
|
|
276
|
+
id: 'two-columns-row'
|
|
277
|
+
}),
|
|
278
|
+
label: '',
|
|
279
|
+
icon: 'fas fa-columns',
|
|
280
|
+
field_name: 'two_col_row_'
|
|
281
|
+
}, {
|
|
282
|
+
key: 'ThreeColumnRow',
|
|
283
|
+
canHaveAnswer: false,
|
|
284
|
+
name: intl.formatMessage({
|
|
285
|
+
id: 'three-columns-row'
|
|
286
|
+
}),
|
|
287
|
+
label: '',
|
|
288
|
+
icon: 'fas fa-columns',
|
|
289
|
+
field_name: 'three_col_row_'
|
|
290
|
+
}, {
|
|
291
|
+
key: 'FourColumnRow',
|
|
292
|
+
element: 'MultiColumnRow',
|
|
293
|
+
canHaveAnswer: false,
|
|
294
|
+
name: intl.formatMessage({
|
|
295
|
+
id: 'four-columns-row'
|
|
296
|
+
}),
|
|
297
|
+
label: '',
|
|
298
|
+
icon: 'fas fa-columns',
|
|
299
|
+
field_name: 'four_col_row_',
|
|
300
|
+
col_count: 4,
|
|
301
|
+
class_name: 'col-md-3'
|
|
302
|
+
}, {
|
|
303
|
+
key: 'FiveColumnRow',
|
|
304
|
+
element: 'MultiColumnRow',
|
|
305
|
+
canHaveAnswer: false,
|
|
306
|
+
name: intl.formatMessage({
|
|
307
|
+
id: 'five-columns-row'
|
|
308
|
+
}),
|
|
309
|
+
label: '',
|
|
310
|
+
icon: 'fas fa-columns',
|
|
311
|
+
field_name: 'five_col_row_',
|
|
312
|
+
col_count: 5,
|
|
313
|
+
class_name: 'col'
|
|
314
|
+
}, {
|
|
315
|
+
key: 'SixColumnRow',
|
|
316
|
+
element: 'MultiColumnRow',
|
|
317
|
+
canHaveAnswer: false,
|
|
318
|
+
name: intl.formatMessage({
|
|
319
|
+
id: 'six-columns-row'
|
|
320
|
+
}),
|
|
321
|
+
label: '',
|
|
322
|
+
icon: 'fas fa-columns',
|
|
323
|
+
field_name: 'six_col_row_',
|
|
324
|
+
col_count: 6,
|
|
325
|
+
class_name: 'col-md-2'
|
|
326
|
+
}, {
|
|
327
|
+
key: 'Image',
|
|
328
|
+
name: intl.formatMessage({
|
|
329
|
+
id: 'image'
|
|
330
|
+
}),
|
|
331
|
+
label: '',
|
|
332
|
+
icon: 'far fa-image',
|
|
333
|
+
field_name: 'image_',
|
|
334
|
+
src: ''
|
|
335
|
+
}, {
|
|
336
|
+
key: 'Rating',
|
|
337
|
+
canHaveAnswer: true,
|
|
338
|
+
name: intl.formatMessage({
|
|
339
|
+
id: 'rating'
|
|
340
|
+
}),
|
|
341
|
+
label: intl.formatMessage({
|
|
342
|
+
id: 'place-holder-label'
|
|
343
|
+
}),
|
|
344
|
+
icon: 'fas fa-star',
|
|
345
|
+
field_name: 'rating_'
|
|
346
|
+
}, {
|
|
347
|
+
key: 'DatePicker',
|
|
348
|
+
canDefaultToday: true,
|
|
349
|
+
canReadOnly: true,
|
|
350
|
+
dateFormat: 'MM/dd/yyyy',
|
|
351
|
+
timeFormat: 'hh:mm aa',
|
|
352
|
+
showTimeSelect: false,
|
|
353
|
+
showTimeSelectOnly: false,
|
|
354
|
+
showTimeInput: false,
|
|
355
|
+
name: intl.formatMessage({
|
|
356
|
+
id: 'date'
|
|
357
|
+
}),
|
|
358
|
+
icon: 'far fa-calendar-alt',
|
|
359
|
+
label: intl.formatMessage({
|
|
360
|
+
id: 'place-holder-label'
|
|
361
|
+
}),
|
|
362
|
+
field_name: 'date_picker_'
|
|
363
|
+
}, {
|
|
364
|
+
key: 'Signature',
|
|
365
|
+
canReadOnly: true,
|
|
366
|
+
name: intl.formatMessage({
|
|
367
|
+
id: 'signature'
|
|
368
|
+
}),
|
|
369
|
+
icon: 'fas fa-pen-square',
|
|
370
|
+
label: intl.formatMessage({
|
|
371
|
+
id: 'signature'
|
|
372
|
+
}),
|
|
373
|
+
field_name: 'signature_'
|
|
374
|
+
}, {
|
|
375
|
+
key: 'HyperLink',
|
|
376
|
+
name: intl.formatMessage({
|
|
377
|
+
id: 'website'
|
|
378
|
+
}),
|
|
379
|
+
icon: 'fas fa-link',
|
|
380
|
+
"static": true,
|
|
381
|
+
content: intl.formatMessage({
|
|
382
|
+
id: 'place-holder-website-link'
|
|
383
|
+
}),
|
|
384
|
+
href: 'http://www.example.com'
|
|
385
|
+
}, {
|
|
386
|
+
key: 'Download',
|
|
387
|
+
name: intl.formatMessage({
|
|
388
|
+
id: 'file-attachment'
|
|
389
|
+
}),
|
|
390
|
+
icon: 'fas fa-file',
|
|
391
|
+
"static": true,
|
|
392
|
+
content: intl.formatMessage({
|
|
393
|
+
id: 'place-holder-file-name'
|
|
394
|
+
}),
|
|
395
|
+
field_name: 'download_',
|
|
396
|
+
file_path: '',
|
|
397
|
+
_href: ''
|
|
398
|
+
}, {
|
|
399
|
+
key: 'Range',
|
|
400
|
+
name: intl.formatMessage({
|
|
401
|
+
id: 'range'
|
|
402
|
+
}),
|
|
403
|
+
icon: 'fas fa-sliders-h',
|
|
404
|
+
label: intl.formatMessage({
|
|
405
|
+
id: 'place-holder-label'
|
|
406
|
+
}),
|
|
407
|
+
field_name: 'range_',
|
|
408
|
+
step: 1,
|
|
409
|
+
default_value: 3,
|
|
410
|
+
min_value: 1,
|
|
411
|
+
max_value: 5,
|
|
412
|
+
min_label: intl.formatMessage({
|
|
413
|
+
id: 'easy'
|
|
414
|
+
}),
|
|
415
|
+
max_label: intl.formatMessage({
|
|
416
|
+
id: 'difficult'
|
|
417
|
+
})
|
|
418
|
+
}, {
|
|
419
|
+
key: 'Camera',
|
|
420
|
+
name: intl.formatMessage({
|
|
421
|
+
id: 'camera'
|
|
422
|
+
}),
|
|
423
|
+
icon: 'fas fa-camera',
|
|
424
|
+
label: intl.formatMessage({
|
|
425
|
+
id: 'place-holder-label'
|
|
426
|
+
}),
|
|
427
|
+
field_name: 'camera_',
|
|
428
|
+
label_after_camera_icon: intl.formatMessage({
|
|
429
|
+
id: 'place-holder-display-label-after-camera-icon'
|
|
430
|
+
}),
|
|
431
|
+
message_under_camera_icon: intl.formatMessage({
|
|
432
|
+
id: 'place-holder-display-message-under-camera-icon'
|
|
433
|
+
}),
|
|
434
|
+
label_after_photo_clear_icon: intl.formatMessage({
|
|
435
|
+
id: 'place-holder-display-label-after-photo-clear-icon'
|
|
436
|
+
})
|
|
437
|
+
}, {
|
|
438
|
+
key: 'FileUpload',
|
|
439
|
+
name: intl.formatMessage({
|
|
440
|
+
id: 'file-upload'
|
|
441
|
+
}),
|
|
442
|
+
icon: 'fas fa-file',
|
|
443
|
+
label: intl.formatMessage({
|
|
444
|
+
id: 'place-holder-label'
|
|
445
|
+
}),
|
|
446
|
+
field_name: 'file_upload_',
|
|
447
|
+
label_after_file_icon: intl.formatMessage({
|
|
448
|
+
id: 'place-holder-display-label-after-file-icon'
|
|
449
|
+
}),
|
|
450
|
+
message_under_file_icon: intl.formatMessage({
|
|
451
|
+
id: 'place-holder-display-message-under-file-icon'
|
|
452
|
+
}),
|
|
453
|
+
label_after_file_clear_icon: intl.formatMessage({
|
|
454
|
+
id: 'place-holder-display-label-after-file-clear-icon'
|
|
455
|
+
})
|
|
456
|
+
}];
|
|
457
|
+
}
|
|
458
|
+
}, {
|
|
459
|
+
key: "addCustomOptions",
|
|
460
|
+
value: function addCustomOptions(item, elementOptions) {
|
|
461
|
+
if (item.type === 'custom') {
|
|
462
|
+
var customOptions = Object.assign({}, item, elementOptions);
|
|
463
|
+
customOptions.custom = true;
|
|
464
|
+
customOptions.component = item.component || null;
|
|
465
|
+
customOptions.custom_options = item.custom_options || [];
|
|
466
|
+
return customOptions;
|
|
467
|
+
}
|
|
468
|
+
return elementOptions;
|
|
469
|
+
}
|
|
470
|
+
}, {
|
|
471
|
+
key: "create",
|
|
472
|
+
value: function create(item) {
|
|
473
|
+
var intl = this.props.intl;
|
|
474
|
+
var elementKey = item.element || item.key;
|
|
475
|
+
var elementOptions = this.addCustomOptions(item, {
|
|
476
|
+
id: _UUID["default"].uuid(),
|
|
477
|
+
element: elementKey,
|
|
478
|
+
text: item.name,
|
|
479
|
+
group_name: item.group_name,
|
|
480
|
+
"static": item["static"],
|
|
481
|
+
required: false,
|
|
482
|
+
showDescription: item.showDescription
|
|
483
|
+
});
|
|
484
|
+
if (this.props.showDescription === true && !item["static"]) {
|
|
485
|
+
elementOptions.showDescription = true;
|
|
486
|
+
}
|
|
487
|
+
if (item["static"]) {
|
|
488
|
+
elementOptions.bold = false;
|
|
489
|
+
elementOptions.italic = false;
|
|
490
|
+
}
|
|
491
|
+
if (item.canHaveAnswer) {
|
|
492
|
+
elementOptions.canHaveAnswer = item.canHaveAnswer;
|
|
493
|
+
}
|
|
494
|
+
if (item.canReadOnly) {
|
|
495
|
+
elementOptions.readOnly = false;
|
|
496
|
+
}
|
|
497
|
+
if (item.canDefaultToday) {
|
|
498
|
+
elementOptions.defaultToday = false;
|
|
499
|
+
}
|
|
500
|
+
if (item.content) {
|
|
501
|
+
elementOptions.content = item.content;
|
|
502
|
+
}
|
|
503
|
+
if (item.href) {
|
|
504
|
+
elementOptions.href = item.href;
|
|
505
|
+
}
|
|
506
|
+
if (item.inherited !== undefined) {
|
|
507
|
+
elementOptions.inherited = item.inherited;
|
|
508
|
+
}
|
|
509
|
+
elementOptions.canHavePageBreakBefore = item.canHavePageBreakBefore !== false;
|
|
510
|
+
elementOptions.canHaveAlternateForm = item.canHaveAlternateForm !== false;
|
|
511
|
+
elementOptions.canHaveDisplayHorizontal = item.canHaveDisplayHorizontal !== false;
|
|
512
|
+
if (elementOptions.canHaveDisplayHorizontal) {
|
|
513
|
+
elementOptions.inline = item.inline;
|
|
514
|
+
}
|
|
515
|
+
elementOptions.canHaveOptionCorrect = item.canHaveOptionCorrect !== false;
|
|
516
|
+
elementOptions.canHaveOptionValue = item.canHaveOptionValue !== false;
|
|
517
|
+
elementOptions.canPopulateFromApi = item.canPopulateFromApi !== false;
|
|
518
|
+
if (item.class_name) {
|
|
519
|
+
elementOptions.class_name = item.class_name;
|
|
520
|
+
}
|
|
521
|
+
if (elementKey === 'Image') {
|
|
522
|
+
elementOptions.src = item.src;
|
|
523
|
+
}
|
|
524
|
+
if (elementKey === 'DatePicker') {
|
|
525
|
+
elementOptions.dateFormat = item.dateFormat;
|
|
526
|
+
elementOptions.timeFormat = item.timeFormat;
|
|
527
|
+
elementOptions.showTimeSelect = item.showTimeSelect;
|
|
528
|
+
elementOptions.showTimeSelectOnly = item.showTimeSelectOnly;
|
|
529
|
+
elementOptions.showTimeInput = item.showTimeInput;
|
|
530
|
+
}
|
|
531
|
+
if (elementKey === 'Download') {
|
|
532
|
+
elementOptions._href = item._href;
|
|
533
|
+
elementOptions.file_path = item.file_path;
|
|
534
|
+
}
|
|
535
|
+
if (elementKey === 'Range') {
|
|
536
|
+
elementOptions.step = item.step;
|
|
537
|
+
elementOptions.default_value = item.default_value;
|
|
538
|
+
elementOptions.min_value = item.min_value;
|
|
539
|
+
elementOptions.max_value = item.max_value;
|
|
540
|
+
elementOptions.min_label = item.min_label;
|
|
541
|
+
elementOptions.max_label = item.max_label;
|
|
542
|
+
}
|
|
543
|
+
if (elementKey === 'Camera') {
|
|
544
|
+
elementOptions.label_after_camera_icon = item.label_after_camera_icon;
|
|
545
|
+
elementOptions.message_under_camera_icon = item.message_under_camera_icon;
|
|
546
|
+
elementOptions.label_after_photo_clear_icon = item.label_after_photo_clear_icon;
|
|
547
|
+
}
|
|
548
|
+
if (elementKey === 'FileUpload') {
|
|
549
|
+
elementOptions.label_after_file_icon = item.label_after_file_icon;
|
|
550
|
+
elementOptions.message_under_file_icon = item.message_under_file_icon;
|
|
551
|
+
elementOptions.label_after_file_clear_icon = item.label_after_file_clear_icon;
|
|
552
|
+
}
|
|
553
|
+
if (item.element === 'MultiColumnRow') {
|
|
554
|
+
elementOptions.col_count = item.col_count;
|
|
555
|
+
}
|
|
556
|
+
if (item.defaultValue) {
|
|
557
|
+
elementOptions.defaultValue = item.defaultValue;
|
|
558
|
+
}
|
|
559
|
+
if (item.field_name) {
|
|
560
|
+
elementOptions.field_name = item.field_name + _UUID["default"].uuid();
|
|
561
|
+
}
|
|
562
|
+
if (item.label) {
|
|
563
|
+
elementOptions.label = item.label;
|
|
564
|
+
}
|
|
565
|
+
if (item.options) {
|
|
566
|
+
if (item.options.length > 0) {
|
|
567
|
+
elementOptions.options = item.options.map(function (x) {
|
|
568
|
+
return _objectSpread(_objectSpread({}, x), {}, {
|
|
569
|
+
key: "custom_option_".concat(_UUID["default"].uuid())
|
|
570
|
+
});
|
|
571
|
+
});
|
|
572
|
+
} else {
|
|
573
|
+
elementOptions.options = Toolbar._defaultItemOptions(elementOptions.element, intl);
|
|
574
|
+
}
|
|
575
|
+
}
|
|
576
|
+
return elementOptions;
|
|
577
|
+
}
|
|
578
|
+
}, {
|
|
579
|
+
key: "_onClick",
|
|
580
|
+
value: function _onClick(item) {
|
|
581
|
+
// ElementActions.createElement(this.create(item));
|
|
582
|
+
_store["default"].dispatch('create', this.create(item));
|
|
583
|
+
}
|
|
584
|
+
}, {
|
|
585
|
+
key: "render",
|
|
586
|
+
value: function render() {
|
|
587
|
+
var _this3 = this;
|
|
588
|
+
var _buildGroupItems = buildGroupItems(this.state.items),
|
|
589
|
+
items = _buildGroupItems.items,
|
|
590
|
+
grouped = _buildGroupItems.grouped,
|
|
591
|
+
groupKeys = _buildGroupItems.groupKeys;
|
|
592
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
593
|
+
className: "col-md-3 react-form-builder-toolbar float-right",
|
|
594
|
+
style: {
|
|
595
|
+
position: this.state.isPinned ? 'fixed' : '',
|
|
596
|
+
// set up the vertical boundary by top/bottom,
|
|
597
|
+
// so later you can set height relative to the boundary to use scrollable bar.
|
|
598
|
+
top: this.state.isPinned ? '10%' : '',
|
|
599
|
+
bottom: this.state.isPinned ? '10%' : '',
|
|
600
|
+
right: this.state.isPinned ? '5%' : ''
|
|
601
|
+
}
|
|
602
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
603
|
+
style: {
|
|
604
|
+
display: 'flex'
|
|
605
|
+
}
|
|
606
|
+
}, /*#__PURE__*/_react["default"].createElement("button", {
|
|
607
|
+
onClick: this.togglePin,
|
|
608
|
+
style: {
|
|
609
|
+
marginBottom: '5px',
|
|
610
|
+
background: 'none',
|
|
611
|
+
outline: 'none',
|
|
612
|
+
// ✅ Removes the border when clicked
|
|
613
|
+
border: 'none',
|
|
614
|
+
transform: this.state.isPinned ? 'rotate(-45deg)' : 'rotate(90deg)',
|
|
615
|
+
// Rotates downward when pinned
|
|
616
|
+
transition: 'transform 0.2s ease-in-out'
|
|
617
|
+
}
|
|
618
|
+
}, "\uD83D\uDCCC"), /*#__PURE__*/_react["default"].createElement("h4", null, this.props.intl.formatMessage({
|
|
619
|
+
id: 'toolbox'
|
|
620
|
+
}))), /*#__PURE__*/_react["default"].createElement("div", {
|
|
621
|
+
style: {
|
|
622
|
+
overflowY: this.state.isPinned ? 'scroll' : '',
|
|
623
|
+
height: this.state.isPinned ? '90%' : ''
|
|
624
|
+
}
|
|
625
|
+
}, /*#__PURE__*/_react["default"].createElement("ul", null, items.map(this.renderItem), groupKeys.map(function (k) {
|
|
626
|
+
return /*#__PURE__*/_react["default"].createElement(_toolbarGroupItem["default"], {
|
|
627
|
+
key: k,
|
|
628
|
+
name: k,
|
|
629
|
+
group: grouped.get(k),
|
|
630
|
+
renderItem: _this3.renderItem
|
|
631
|
+
});
|
|
632
|
+
}))));
|
|
633
|
+
}
|
|
634
|
+
}], [{
|
|
635
|
+
key: "_defaultItemOptions",
|
|
636
|
+
value: function _defaultItemOptions(element, intl) {
|
|
637
|
+
switch (element) {
|
|
638
|
+
case 'Dropdown':
|
|
639
|
+
return [{
|
|
640
|
+
value: 'place_holder_option_1',
|
|
641
|
+
text: intl.formatMessage({
|
|
642
|
+
id: 'place-holder-option-1'
|
|
643
|
+
}),
|
|
644
|
+
key: "dropdown_option_".concat(_UUID["default"].uuid())
|
|
645
|
+
}, {
|
|
646
|
+
value: 'place_holder_option_2',
|
|
647
|
+
text: intl.formatMessage({
|
|
648
|
+
id: 'place-holder-option-2'
|
|
649
|
+
}),
|
|
650
|
+
key: "dropdown_option_".concat(_UUID["default"].uuid())
|
|
651
|
+
}, {
|
|
652
|
+
value: 'place_holder_option_3',
|
|
653
|
+
text: intl.formatMessage({
|
|
654
|
+
id: 'place-holder-option-3'
|
|
655
|
+
}),
|
|
656
|
+
key: "dropdown_option_".concat(_UUID["default"].uuid())
|
|
657
|
+
}];
|
|
658
|
+
case 'Tags':
|
|
659
|
+
return [{
|
|
660
|
+
value: 'place_holder_tag_1',
|
|
661
|
+
text: intl.formatMessage({
|
|
662
|
+
id: 'place-holder-tag-1'
|
|
663
|
+
}),
|
|
664
|
+
key: "tags_option_".concat(_UUID["default"].uuid())
|
|
665
|
+
}, {
|
|
666
|
+
value: 'place_holder_tag_2',
|
|
667
|
+
text: intl.formatMessage({
|
|
668
|
+
id: 'place-holder-tag-2'
|
|
669
|
+
}),
|
|
670
|
+
key: "tags_option_".concat(_UUID["default"].uuid())
|
|
671
|
+
}, {
|
|
672
|
+
value: 'place_holder_tag_3',
|
|
673
|
+
text: intl.formatMessage({
|
|
674
|
+
id: 'place-holder-tag-3'
|
|
675
|
+
}),
|
|
676
|
+
key: "tags_option_".concat(_UUID["default"].uuid())
|
|
677
|
+
}];
|
|
678
|
+
case 'Checkboxes':
|
|
679
|
+
return [{
|
|
680
|
+
value: 'place_holder_option_1',
|
|
681
|
+
text: intl.formatMessage({
|
|
682
|
+
id: 'place-holder-option-1'
|
|
683
|
+
}),
|
|
684
|
+
key: "checkboxes_option_".concat(_UUID["default"].uuid())
|
|
685
|
+
}, {
|
|
686
|
+
value: 'place_holder_option_2',
|
|
687
|
+
text: intl.formatMessage({
|
|
688
|
+
id: 'place-holder-option-2'
|
|
689
|
+
}),
|
|
690
|
+
key: "checkboxes_option_".concat(_UUID["default"].uuid())
|
|
691
|
+
}, {
|
|
692
|
+
value: 'place_holder_option_3',
|
|
693
|
+
text: intl.formatMessage({
|
|
694
|
+
id: 'place-holder-option-3'
|
|
695
|
+
}),
|
|
696
|
+
key: "checkboxes_option_".concat(_UUID["default"].uuid())
|
|
697
|
+
}];
|
|
698
|
+
case 'RadioButtons':
|
|
699
|
+
return [{
|
|
700
|
+
value: 'place_holder_option_1',
|
|
701
|
+
text: intl.formatMessage({
|
|
702
|
+
id: 'place-holder-option-1'
|
|
703
|
+
}),
|
|
704
|
+
key: "radiobuttons_option_".concat(_UUID["default"].uuid())
|
|
705
|
+
}, {
|
|
706
|
+
value: 'place_holder_option_2',
|
|
707
|
+
text: intl.formatMessage({
|
|
708
|
+
id: 'place-holder-option-2'
|
|
709
|
+
}),
|
|
710
|
+
key: "radiobuttons_option_".concat(_UUID["default"].uuid())
|
|
711
|
+
}, {
|
|
712
|
+
value: 'place_holder_option_3',
|
|
713
|
+
text: intl.formatMessage({
|
|
714
|
+
id: 'place-holder-option-3'
|
|
715
|
+
}),
|
|
716
|
+
key: "radiobuttons_option_".concat(_UUID["default"].uuid())
|
|
717
|
+
}];
|
|
718
|
+
default:
|
|
719
|
+
return [];
|
|
720
|
+
}
|
|
721
|
+
}
|
|
722
|
+
}]);
|
|
723
|
+
return Toolbar;
|
|
724
|
+
}(_react["default"].Component);
|
|
725
|
+
var _default = (0, _reactIntl.injectIntl)(Toolbar);
|
|
726
|
+
exports["default"] = _default;
|