react-survey-builder 1.0.26 → 1.0.28
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/README.md +1 -0
- package/dist/index.js +1 -1
- package/lib/form-fields.js +5 -2
- package/lib/form.js +5 -2
- package/lib/survey-elements/component-wrapper.js +1960 -0
- package/lib/survey-elements/date-picker.js +272 -0
- package/lib/survey-elements/index.js +58 -17
- package/lib/utils/custom-date-picker.js +93 -0
- package/package.json +1 -1
- package/types/index.d.ts +1 -0
- package/lib/form copy.js +0 -622
|
@@ -0,0 +1,272 @@
|
|
|
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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
10
|
+
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
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 _react = _interopRequireDefault(require("react"));
|
|
15
|
+
var _dateFns = require("date-fns");
|
|
16
|
+
var _componentHeader = _interopRequireDefault(require("./component-header"));
|
|
17
|
+
var _componentLabel = _interopRequireDefault(require("./component-label"));
|
|
18
|
+
var _reactBootstrap = require("react-bootstrap");
|
|
19
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
20
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
21
|
+
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); }; }
|
|
22
|
+
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; } }
|
|
23
|
+
// This is the utility function that will attempt to parse a date string
|
|
24
|
+
// using several different formats until it finds one that works.
|
|
25
|
+
var DatePicker = /*#__PURE__*/function (_React$Component) {
|
|
26
|
+
(0, _inherits2["default"])(DatePicker, _React$Component);
|
|
27
|
+
var _super = _createSuper(DatePicker);
|
|
28
|
+
function DatePicker(props) {
|
|
29
|
+
var _this;
|
|
30
|
+
(0, _classCallCheck2["default"])(this, DatePicker);
|
|
31
|
+
_this = _super.call(this, props);
|
|
32
|
+
_this.inputField = /*#__PURE__*/_react["default"].createRef();
|
|
33
|
+
var _DatePicker$updateFor = DatePicker.updateFormat(props, null),
|
|
34
|
+
formatMask = _DatePicker$updateFor.formatMask;
|
|
35
|
+
var state = DatePicker.updateDateTime(props, {
|
|
36
|
+
formatMask: formatMask
|
|
37
|
+
}, formatMask);
|
|
38
|
+
|
|
39
|
+
// Ensure state.value and state.internalValue are not undefined
|
|
40
|
+
state.value = state.value || '';
|
|
41
|
+
state.internalValue = state.internalValue || '';
|
|
42
|
+
_this.state = state;
|
|
43
|
+
return _this;
|
|
44
|
+
}
|
|
45
|
+
(0, _createClass2["default"])(DatePicker, [{
|
|
46
|
+
key: "handleBirthdayFocus",
|
|
47
|
+
value: function handleBirthdayFocus() {
|
|
48
|
+
this.setState({
|
|
49
|
+
birthdayFocused: true
|
|
50
|
+
}, function () {
|
|
51
|
+
document.getElementById('year').placeholder = 'YYYY';
|
|
52
|
+
document.getElementById('day').placeholder = 'DD';
|
|
53
|
+
document.getElementById('month').placeholder = 'MM';
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
}, {
|
|
57
|
+
key: "handleDateChange",
|
|
58
|
+
value: function handleDateChange(event) {
|
|
59
|
+
var _this$state = this.state,
|
|
60
|
+
month = _this$state.month,
|
|
61
|
+
day = _this$state.day,
|
|
62
|
+
year = _this$state.year;
|
|
63
|
+
var newValue = event.target.value;
|
|
64
|
+
switch (event.target.name) {
|
|
65
|
+
case 'month':
|
|
66
|
+
if (newValue > 12) {
|
|
67
|
+
this.setState({
|
|
68
|
+
month: '12'
|
|
69
|
+
});
|
|
70
|
+
} else {
|
|
71
|
+
this.setState({
|
|
72
|
+
month: newValue
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
break;
|
|
76
|
+
case 'day':
|
|
77
|
+
if (newValue > 31) {
|
|
78
|
+
this.setState({
|
|
79
|
+
day: '31'
|
|
80
|
+
});
|
|
81
|
+
} else {
|
|
82
|
+
this.setState({
|
|
83
|
+
day: newValue
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
break;
|
|
87
|
+
case 'year':
|
|
88
|
+
if (newValue > new Date().getFullYear()) {
|
|
89
|
+
this.setState({
|
|
90
|
+
year: new Date().getFullYear().toString()
|
|
91
|
+
});
|
|
92
|
+
} else {
|
|
93
|
+
this.setState({
|
|
94
|
+
year: newValue
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
break;
|
|
98
|
+
default:
|
|
99
|
+
break;
|
|
100
|
+
}
|
|
101
|
+
var updatedMonth = event.target.name === 'month' ? newValue : month;
|
|
102
|
+
var updatedDay = event.target.name === 'day' ? newValue : day;
|
|
103
|
+
var updatedYear = event.target.name === 'year' ? newValue : year;
|
|
104
|
+
this.setState({
|
|
105
|
+
value: {
|
|
106
|
+
year: updatedYear,
|
|
107
|
+
month: updatedMonth,
|
|
108
|
+
day: updatedDay
|
|
109
|
+
}
|
|
110
|
+
});
|
|
111
|
+
}
|
|
112
|
+
}, {
|
|
113
|
+
key: "render",
|
|
114
|
+
value: function render() {
|
|
115
|
+
var _this2 = this;
|
|
116
|
+
var placeholder = this.props.data.placeholder;
|
|
117
|
+
var props = {};
|
|
118
|
+
props.type = 'date';
|
|
119
|
+
props.className = 'form-control';
|
|
120
|
+
props.name = this.props.data.fieldName;
|
|
121
|
+
var readOnly = this.props.data.readOnly || this.props.readOnly;
|
|
122
|
+
this.state.formatMask.toLowerCase();
|
|
123
|
+
if (this.props.mutable) {
|
|
124
|
+
props.defaultValue = this.props.defaultValue;
|
|
125
|
+
props.ref = this.inputField;
|
|
126
|
+
}
|
|
127
|
+
var baseClasses = 'SortableItem rfb-item';
|
|
128
|
+
if (this.props.data.pageBreakBefore) {
|
|
129
|
+
baseClasses += ' alwaysbreak';
|
|
130
|
+
}
|
|
131
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
132
|
+
className: baseClasses,
|
|
133
|
+
style: _objectSpread({}, this.props.style)
|
|
134
|
+
}, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", null, readOnly && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
|
|
135
|
+
type: "text",
|
|
136
|
+
name: props.name,
|
|
137
|
+
ref: props.ref,
|
|
138
|
+
readOnly: readOnly,
|
|
139
|
+
placeholder: placeholder || this.state.placeholder,
|
|
140
|
+
value: this.state.value
|
|
141
|
+
}), !readOnly && /*#__PURE__*/_react["default"].createElement(_reactBootstrap.InputGroup, {
|
|
142
|
+
style: {
|
|
143
|
+
border: '1px solid #ced4da',
|
|
144
|
+
borderRadius: '0.25rem',
|
|
145
|
+
marginTop: 10
|
|
146
|
+
}
|
|
147
|
+
}, /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
|
|
148
|
+
value: this.state.month,
|
|
149
|
+
onKeyUp: function onKeyUp(e) {
|
|
150
|
+
return e.target.value && e.target.value.length === 2 && document.getElementById('day').focus();
|
|
151
|
+
},
|
|
152
|
+
name: "month",
|
|
153
|
+
id: "month",
|
|
154
|
+
onChange: function onChange(e) {
|
|
155
|
+
return _this2.handleDateChange(e);
|
|
156
|
+
},
|
|
157
|
+
type: "text",
|
|
158
|
+
style: {
|
|
159
|
+
border: 'none'
|
|
160
|
+
},
|
|
161
|
+
onFocus: function onFocus(e) {
|
|
162
|
+
return _this2.handleBirthdayFocus();
|
|
163
|
+
},
|
|
164
|
+
placeholder: placeholder || this.state.placeholder,
|
|
165
|
+
maxLength: "2",
|
|
166
|
+
pattern: "\\d*"
|
|
167
|
+
}), this.state.birthdayFocused && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
|
|
168
|
+
style: {
|
|
169
|
+
display: this.state.year || this.state.day || this.state.month ? '' : 'none',
|
|
170
|
+
alignSelf: 'center'
|
|
171
|
+
}
|
|
172
|
+
}, "/"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
|
|
173
|
+
value: this.state.day,
|
|
174
|
+
onKeyUp: function onKeyUp(e) {
|
|
175
|
+
return e.target.value && e.target.value.length === 2 && document.getElementById('year').focus();
|
|
176
|
+
},
|
|
177
|
+
name: "day",
|
|
178
|
+
id: "day",
|
|
179
|
+
type: "text",
|
|
180
|
+
style: {
|
|
181
|
+
border: 'none'
|
|
182
|
+
},
|
|
183
|
+
onChange: function onChange(e) {
|
|
184
|
+
return _this2.handleDateChange(e);
|
|
185
|
+
},
|
|
186
|
+
onFocus: function onFocus(e) {
|
|
187
|
+
return _this2.handleBirthdayFocus();
|
|
188
|
+
},
|
|
189
|
+
maxLength: "2",
|
|
190
|
+
pattern: "\\d*"
|
|
191
|
+
}), /*#__PURE__*/_react["default"].createElement("span", {
|
|
192
|
+
style: {
|
|
193
|
+
display: this.state.year || this.state.day || this.state.month ? '' : 'none',
|
|
194
|
+
alignSelf: 'center'
|
|
195
|
+
}
|
|
196
|
+
}, "/"), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Control, {
|
|
197
|
+
value: this.state.year,
|
|
198
|
+
name: "year",
|
|
199
|
+
id: "year",
|
|
200
|
+
type: "text",
|
|
201
|
+
style: {
|
|
202
|
+
border: 'none'
|
|
203
|
+
},
|
|
204
|
+
onFocus: function onFocus(e) {
|
|
205
|
+
return _this2.handleBirthdayFocus();
|
|
206
|
+
},
|
|
207
|
+
maxLength: "4",
|
|
208
|
+
pattern: "\\d*",
|
|
209
|
+
onChange: function onChange(e) {
|
|
210
|
+
return _this2.handleDateChange(e);
|
|
211
|
+
}
|
|
212
|
+
}))))));
|
|
213
|
+
}
|
|
214
|
+
}], [{
|
|
215
|
+
key: "updateDateTime",
|
|
216
|
+
value: function updateDateTime(props, state, formatMask) {
|
|
217
|
+
var value;
|
|
218
|
+
var internalValue;
|
|
219
|
+
var defaultToday = props.data.defaultToday;
|
|
220
|
+
var iOSFormatMask = 'yyyy-MM-dd';
|
|
221
|
+
if (defaultToday && (props.defaultValue === '' || props.defaultValue === undefined)) {
|
|
222
|
+
var dateToFormat = new Date();
|
|
223
|
+
value = dateToFormat.toString() === 'Invalid Date' ? '' : (0, _dateFns.format)(dateToFormat, iOSFormatMask);
|
|
224
|
+
internalValue = dateToFormat.toString() === 'Invalid Date' ? '' : dateToFormat; // Ensure not undefined
|
|
225
|
+
} else {
|
|
226
|
+
value = props.defaultValue || ''; // Ensure not undefined
|
|
227
|
+
if (value === '') {
|
|
228
|
+
internalValue = '';
|
|
229
|
+
} else {
|
|
230
|
+
var parsedDate = (0, _dateFns.parse)(value, formatMask, new Date());
|
|
231
|
+
internalValue = parsedDate.toString() === 'Invalid Date' ? '' : parsedDate; // Ensure not undefined
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
return {
|
|
235
|
+
value: value,
|
|
236
|
+
internalValue: internalValue,
|
|
237
|
+
placeholder: formatMask.toLowerCase(),
|
|
238
|
+
defaultToday: defaultToday,
|
|
239
|
+
formatMask: formatMask
|
|
240
|
+
};
|
|
241
|
+
}
|
|
242
|
+
}, {
|
|
243
|
+
key: "updateFormat",
|
|
244
|
+
value: function updateFormat(props, oldFormatMask) {
|
|
245
|
+
var _props$data = props.data,
|
|
246
|
+
showTimeSelect = _props$data.showTimeSelect,
|
|
247
|
+
showTimeSelectOnly = _props$data.showTimeSelectOnly,
|
|
248
|
+
showTimeInput = _props$data.showTimeInput;
|
|
249
|
+
var dateFormat = showTimeSelect && showTimeSelectOnly ? '' : props.data.dateFormat;
|
|
250
|
+
var timeFormat = showTimeSelect || showTimeInput ? props.data.timeFormat : '';
|
|
251
|
+
var formatMask = "".concat(dateFormat, " ").concat(timeFormat).trim();
|
|
252
|
+
var updated = formatMask !== oldFormatMask;
|
|
253
|
+
return {
|
|
254
|
+
updated: updated,
|
|
255
|
+
formatMask: formatMask
|
|
256
|
+
};
|
|
257
|
+
}
|
|
258
|
+
}, {
|
|
259
|
+
key: "getDerivedStateFromProps",
|
|
260
|
+
value: function getDerivedStateFromProps(props, state) {
|
|
261
|
+
var _DatePicker$updateFor2 = DatePicker.updateFormat(props, state.formatMask),
|
|
262
|
+
updated = _DatePicker$updateFor2.updated,
|
|
263
|
+
formatMask = _DatePicker$updateFor2.formatMask;
|
|
264
|
+
if (props.data.defaultToday !== state.defaultToday || updated) {
|
|
265
|
+
return DatePicker.updateDateTime(props, state, formatMask);
|
|
266
|
+
}
|
|
267
|
+
return null;
|
|
268
|
+
}
|
|
269
|
+
}]);
|
|
270
|
+
return DatePicker;
|
|
271
|
+
}(_react["default"].Component);
|
|
272
|
+
var _default = exports["default"] = DatePicker;
|
|
@@ -33,6 +33,7 @@ var _reactBootstrapTypeahead = require("react-bootstrap-typeahead");
|
|
|
33
33
|
var _componentErrorMessage = _interopRequireDefault(require("./component-error-message"));
|
|
34
34
|
var _ipUtils = require("../utils/ipUtils");
|
|
35
35
|
var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
|
|
36
|
+
var _ri = require("react-icons/ri");
|
|
36
37
|
var _excluded = ["onChange"],
|
|
37
38
|
_excluded2 = ["onChange", "formatMask"]; // eslint-disable-next-line max-classes-per-file
|
|
38
39
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
@@ -1164,7 +1165,7 @@ var Checkboxes = /*#__PURE__*/function (_React$Component15) {
|
|
|
1164
1165
|
}, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({}, this.props, {
|
|
1165
1166
|
htmlFor: this.props.name
|
|
1166
1167
|
})), this.props.item.options.map(function (option) {
|
|
1167
|
-
var _self$props$item$inli;
|
|
1168
|
+
var _self$props$item$inli, _this20$props$checkbo;
|
|
1168
1169
|
var props = {};
|
|
1169
1170
|
props.name = "option_".concat(option.key);
|
|
1170
1171
|
props.value = option.value;
|
|
@@ -1173,12 +1174,13 @@ var Checkboxes = /*#__PURE__*/function (_React$Component15) {
|
|
|
1173
1174
|
if (self.props.item.disabled) {
|
|
1174
1175
|
props.disabled = 'disabled';
|
|
1175
1176
|
}
|
|
1176
|
-
return /*#__PURE__*/_react["default"].createElement(_reactBootstrap.
|
|
1177
|
-
label: option.text,
|
|
1177
|
+
return /*#__PURE__*/_react["default"].createElement(_reactBootstrap.ToggleButton, (0, _extends2["default"])({
|
|
1178
1178
|
type: "checkbox",
|
|
1179
|
+
variant: (_this20$props$checkbo = _this20.props.checkboxButtonClassName) !== null && _this20$props$checkbo !== void 0 ? _this20$props$checkbo : "outline-light",
|
|
1180
|
+
className: "btn-survey-builder-checkbox",
|
|
1179
1181
|
key: "preview_".concat(option.key),
|
|
1180
1182
|
id: "fid_preview_".concat(option.key),
|
|
1181
|
-
|
|
1183
|
+
inputRef: function inputRef(c) {
|
|
1182
1184
|
if (c && self.props.item.mutable) {
|
|
1183
1185
|
self.options["child_ref_".concat(option.key)] = c;
|
|
1184
1186
|
}
|
|
@@ -1186,7 +1188,17 @@ var Checkboxes = /*#__PURE__*/function (_React$Component15) {
|
|
|
1186
1188
|
onChange: function onChange(e) {
|
|
1187
1189
|
self.onCheckboxChange(option.value, e);
|
|
1188
1190
|
}
|
|
1189
|
-
}, props)
|
|
1191
|
+
}, props), /*#__PURE__*/_react["default"].createElement("div", {
|
|
1192
|
+
className: "d-flex align-items-center justify-content-between text-black text-survey-builder-checkbox"
|
|
1193
|
+
}, props.checked !== true && /*#__PURE__*/_react["default"].createElement(_ri.RiCheckboxBlankLine, {
|
|
1194
|
+
size: "40px",
|
|
1195
|
+
className: "me-3 flex-shrink-0"
|
|
1196
|
+
}), props.checked === true && /*#__PURE__*/_react["default"].createElement(_ri.RiCheckboxFill, {
|
|
1197
|
+
size: "40px",
|
|
1198
|
+
className: "me-3 flex-shrink-0"
|
|
1199
|
+
}), /*#__PURE__*/_react["default"].createElement("div", {
|
|
1200
|
+
className: "text-start"
|
|
1201
|
+
}, option.text)));
|
|
1190
1202
|
}), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
|
|
1191
1203
|
muted: true
|
|
1192
1204
|
}, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
|
|
@@ -1210,7 +1222,8 @@ var Checkbox = /*#__PURE__*/function (_React$Component16) {
|
|
|
1210
1222
|
key: "render",
|
|
1211
1223
|
value: function render() {
|
|
1212
1224
|
var _this22 = this,
|
|
1213
|
-
_this$props$item$inli
|
|
1225
|
+
_this$props$item$inli,
|
|
1226
|
+
_this$props$checkboxB;
|
|
1214
1227
|
var baseClasses = 'SortableItem rfb-item';
|
|
1215
1228
|
if (this.props.item.pageBreakBefore) {
|
|
1216
1229
|
baseClasses += ' alwaysbreak';
|
|
@@ -1253,15 +1266,27 @@ var Checkbox = /*#__PURE__*/function (_React$Component16) {
|
|
|
1253
1266
|
className: "form-group mb-3"
|
|
1254
1267
|
}, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({
|
|
1255
1268
|
className: "form-label"
|
|
1256
|
-
}, this.props)), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.
|
|
1257
|
-
label: /*#__PURE__*/_react["default"].createElement("span", {
|
|
1258
|
-
dangerouslySetInnerHTML: {
|
|
1259
|
-
__html: this.props.item.boxLabel
|
|
1260
|
-
}
|
|
1261
|
-
}),
|
|
1269
|
+
}, this.props)), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.ToggleButton, (0, _extends2["default"])({
|
|
1262
1270
|
type: "checkbox",
|
|
1271
|
+
variant: (_this$props$checkboxB = this.props.checkboxButtonClassName) !== null && _this$props$checkboxB !== void 0 ? _this$props$checkboxB : "outline-light",
|
|
1272
|
+
className: "btn-survey-builder-checkbox",
|
|
1273
|
+
value: props.name,
|
|
1263
1274
|
id: props.name
|
|
1264
|
-
}, props)
|
|
1275
|
+
}, props), /*#__PURE__*/_react["default"].createElement("div", {
|
|
1276
|
+
className: "d-flex align-items-center justify-content-between text-black text-survey-builder-checkbox"
|
|
1277
|
+
}, props.checked !== true && /*#__PURE__*/_react["default"].createElement(_ri.RiCheckboxBlankLine, {
|
|
1278
|
+
size: "40px",
|
|
1279
|
+
className: "me-3 flex-shrink-0"
|
|
1280
|
+
}), props.checked === true && /*#__PURE__*/_react["default"].createElement(_ri.RiCheckboxFill, {
|
|
1281
|
+
size: "40px",
|
|
1282
|
+
className: "me-3 flex-shrink-0"
|
|
1283
|
+
}), /*#__PURE__*/_react["default"].createElement("div", {
|
|
1284
|
+
className: "text-start"
|
|
1285
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
1286
|
+
dangerouslySetInnerHTML: {
|
|
1287
|
+
__html: this.props.item.boxLabel
|
|
1288
|
+
}
|
|
1289
|
+
})))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
|
|
1265
1290
|
muted: true
|
|
1266
1291
|
}, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
|
|
1267
1292
|
name: props.name
|
|
@@ -1309,7 +1334,7 @@ var RadioButtons = /*#__PURE__*/function (_React$Component17) {
|
|
|
1309
1334
|
}, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Group, {
|
|
1310
1335
|
className: "form-group mb-3"
|
|
1311
1336
|
}, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.item.options.map(function (option) {
|
|
1312
|
-
var _self$props$item$inli2;
|
|
1337
|
+
var _self$props$item$inli2, _this24$props$checkbo;
|
|
1313
1338
|
var props = {};
|
|
1314
1339
|
props.name = self.props.name;
|
|
1315
1340
|
props.value = option.value;
|
|
@@ -1321,17 +1346,33 @@ var RadioButtons = /*#__PURE__*/function (_React$Component17) {
|
|
|
1321
1346
|
props.disabled = 'disabled';
|
|
1322
1347
|
}
|
|
1323
1348
|
props.inline = (_self$props$item$inli2 = self.props.item.inline) !== null && _self$props$item$inli2 !== void 0 ? _self$props$item$inli2 : false;
|
|
1324
|
-
return /*#__PURE__*/_react["default"].createElement(_reactBootstrap.
|
|
1349
|
+
return /*#__PURE__*/_react["default"].createElement(_reactBootstrap.ToggleButton, (0, _extends2["default"])({
|
|
1325
1350
|
label: option.text,
|
|
1326
1351
|
type: "radio",
|
|
1352
|
+
variant: (_this24$props$checkbo = _this24.props.checkboxButtonClassName) !== null && _this24$props$checkbo !== void 0 ? _this24$props$checkbo : "outline-light",
|
|
1353
|
+
className: "btn-survey-builder-checkbox",
|
|
1327
1354
|
key: "preview_".concat(option.key),
|
|
1328
1355
|
id: "fid_preview_".concat(option.key),
|
|
1329
|
-
|
|
1356
|
+
inputRef: function inputRef(c) {
|
|
1330
1357
|
if (c && self.props.item.mutable) {
|
|
1331
1358
|
self.options["child_ref_".concat(option.key)] = c;
|
|
1332
1359
|
}
|
|
1333
1360
|
}
|
|
1334
|
-
}, props)
|
|
1361
|
+
}, props), /*#__PURE__*/_react["default"].createElement("div", {
|
|
1362
|
+
className: "d-flex align-items-center justify-content-between text-black text-survey-builder-checkbox"
|
|
1363
|
+
}, props.checked !== true && /*#__PURE__*/_react["default"].createElement(_ri.RiRadioButtonLine, {
|
|
1364
|
+
size: "40px",
|
|
1365
|
+
className: "me-3 flex-shrink-0"
|
|
1366
|
+
}), props.checked === true && /*#__PURE__*/_react["default"].createElement(_ri.RiRadioButtonFill, {
|
|
1367
|
+
size: "40px",
|
|
1368
|
+
className: "me-3 flex-shrink-0"
|
|
1369
|
+
}), /*#__PURE__*/_react["default"].createElement("div", {
|
|
1370
|
+
className: "text-start"
|
|
1371
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
1372
|
+
dangerouslySetInnerHTML: {
|
|
1373
|
+
__html: _this24.props.item.boxLabel
|
|
1374
|
+
}
|
|
1375
|
+
}))));
|
|
1335
1376
|
}), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
|
|
1336
1377
|
muted: true
|
|
1337
1378
|
}, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
|
|
@@ -0,0 +1,93 @@
|
|
|
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 _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
|
|
10
|
+
var _lodash = require("lodash");
|
|
11
|
+
function DatePickerComponent(props) {
|
|
12
|
+
var showTimeInput = props.showTimeInput,
|
|
13
|
+
dateFormat = props.dateFormat,
|
|
14
|
+
selected = props.selected,
|
|
15
|
+
_onChange = props.onChange,
|
|
16
|
+
isClearable = props.isClearable,
|
|
17
|
+
portalId = props.portalId;
|
|
18
|
+
var ButtonDatePicker = function ButtonDatePicker(_ref) {
|
|
19
|
+
var value = _ref.value,
|
|
20
|
+
onClick = _ref.onClick;
|
|
21
|
+
return /*#__PURE__*/_react["default"].createElement("button", {
|
|
22
|
+
type: "button",
|
|
23
|
+
className: "form-control",
|
|
24
|
+
style: {
|
|
25
|
+
minWidth: 140,
|
|
26
|
+
textAlign: 'left'
|
|
27
|
+
},
|
|
28
|
+
onClick: onClick
|
|
29
|
+
}, value || 'mm/dd/yyyy');
|
|
30
|
+
};
|
|
31
|
+
var years = (0, _lodash.range)(2010, new Date().getFullYear() + 10, 1);
|
|
32
|
+
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
|
|
33
|
+
return /*#__PURE__*/_react["default"].createElement(_reactDatepicker["default"], {
|
|
34
|
+
name: props.name,
|
|
35
|
+
ref: props.ref,
|
|
36
|
+
selected: selected,
|
|
37
|
+
onChange: function onChange(date) {
|
|
38
|
+
return _onChange(date);
|
|
39
|
+
},
|
|
40
|
+
todayButton: 'Today',
|
|
41
|
+
className: "form-control",
|
|
42
|
+
showTimeSelect: props.showTimeSelect,
|
|
43
|
+
showTimeSelectOnly: props.showTimeSelectOnly,
|
|
44
|
+
showTimeInput: showTimeInput,
|
|
45
|
+
autoComplete: "off",
|
|
46
|
+
placeholderText: props.placeholderText,
|
|
47
|
+
portalId: portalId,
|
|
48
|
+
dateFormat: dateFormat,
|
|
49
|
+
isClearable: isClearable,
|
|
50
|
+
customInput: /*#__PURE__*/_react["default"].createElement(ButtonDatePicker, null),
|
|
51
|
+
renderCustomHeader: function renderCustomHeader(_ref2) {
|
|
52
|
+
var date = _ref2.date,
|
|
53
|
+
changeYear = _ref2.changeYear,
|
|
54
|
+
changeMonth = _ref2.changeMonth,
|
|
55
|
+
decreaseMonth = _ref2.decreaseMonth,
|
|
56
|
+
increaseMonth = _ref2.increaseMonth,
|
|
57
|
+
prevMonthButtonDisabled = _ref2.prevMonthButtonDisabled,
|
|
58
|
+
nextMonthButtonDisabled = _ref2.nextMonthButtonDisabled;
|
|
59
|
+
return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("button", {
|
|
60
|
+
onClick: decreaseMonth,
|
|
61
|
+
disabled: prevMonthButtonDisabled,
|
|
62
|
+
type: "button"
|
|
63
|
+
}, '<'), /*#__PURE__*/_react["default"].createElement("select", {
|
|
64
|
+
value: date.getFullYear(),
|
|
65
|
+
onChange: function onChange(_ref3) {
|
|
66
|
+
var value = _ref3.target.value;
|
|
67
|
+
return changeYear(value);
|
|
68
|
+
}
|
|
69
|
+
}, years.map(function (option) {
|
|
70
|
+
return /*#__PURE__*/_react["default"].createElement("option", {
|
|
71
|
+
key: option,
|
|
72
|
+
value: option
|
|
73
|
+
}, option);
|
|
74
|
+
})), /*#__PURE__*/_react["default"].createElement("select", {
|
|
75
|
+
value: months[date.getMonth()],
|
|
76
|
+
onChange: function onChange(_ref4) {
|
|
77
|
+
var value = _ref4.target.value;
|
|
78
|
+
return changeMonth(months.indexOf(value));
|
|
79
|
+
}
|
|
80
|
+
}, months.map(function (option) {
|
|
81
|
+
return /*#__PURE__*/_react["default"].createElement("option", {
|
|
82
|
+
key: option,
|
|
83
|
+
value: option
|
|
84
|
+
}, option);
|
|
85
|
+
})), /*#__PURE__*/_react["default"].createElement("button", {
|
|
86
|
+
onClick: increaseMonth,
|
|
87
|
+
disabled: nextMonthButtonDisabled,
|
|
88
|
+
type: "button"
|
|
89
|
+
}, '>'));
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
var _default = exports["default"] = DatePickerComponent;
|
package/package.json
CHANGED
package/types/index.d.ts
CHANGED