react-survey-builder 1.0.26 → 1.0.27
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.
|
@@ -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); }
|
|
@@ -1173,12 +1174,12 @@ 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: "survey-builder-checkbox",
|
|
1179
1180
|
key: "preview_".concat(option.key),
|
|
1180
1181
|
id: "fid_preview_".concat(option.key),
|
|
1181
|
-
|
|
1182
|
+
inputRef: function inputRef(c) {
|
|
1182
1183
|
if (c && self.props.item.mutable) {
|
|
1183
1184
|
self.options["child_ref_".concat(option.key)] = c;
|
|
1184
1185
|
}
|
|
@@ -1186,7 +1187,17 @@ var Checkboxes = /*#__PURE__*/function (_React$Component15) {
|
|
|
1186
1187
|
onChange: function onChange(e) {
|
|
1187
1188
|
self.onCheckboxChange(option.value, e);
|
|
1188
1189
|
}
|
|
1189
|
-
}, props)
|
|
1190
|
+
}, props), /*#__PURE__*/_react["default"].createElement("div", {
|
|
1191
|
+
className: "d-flex align-items-center justify-content-between text-survey-builder-checkbox"
|
|
1192
|
+
}, props.checked !== true && /*#__PURE__*/_react["default"].createElement(_ri.RiCheckboxBlankLine, {
|
|
1193
|
+
size: "40px",
|
|
1194
|
+
className: "me-3 flex-shrink-0"
|
|
1195
|
+
}), props.checked === true && /*#__PURE__*/_react["default"].createElement(_ri.RiCheckboxFill, {
|
|
1196
|
+
size: "40px",
|
|
1197
|
+
className: "me-3 flex-shrink-0"
|
|
1198
|
+
}), /*#__PURE__*/_react["default"].createElement("div", {
|
|
1199
|
+
className: "text-start"
|
|
1200
|
+
}, option.text)));
|
|
1190
1201
|
}), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
|
|
1191
1202
|
muted: true
|
|
1192
1203
|
}, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
|
|
@@ -1253,15 +1264,26 @@ var Checkbox = /*#__PURE__*/function (_React$Component16) {
|
|
|
1253
1264
|
className: "form-group mb-3"
|
|
1254
1265
|
}, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], (0, _extends2["default"])({
|
|
1255
1266
|
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
|
-
}),
|
|
1267
|
+
}, this.props)), /*#__PURE__*/_react["default"].createElement(_reactBootstrap.ToggleButton, (0, _extends2["default"])({
|
|
1262
1268
|
type: "checkbox",
|
|
1269
|
+
variant: "survey-builder-checkbox",
|
|
1270
|
+
value: props.name,
|
|
1263
1271
|
id: props.name
|
|
1264
|
-
}, props)
|
|
1272
|
+
}, props), /*#__PURE__*/_react["default"].createElement("div", {
|
|
1273
|
+
className: "d-flex align-items-center justify-content-between text-survey-builder-checkbox"
|
|
1274
|
+
}, props.checked !== true && /*#__PURE__*/_react["default"].createElement(_ri.RiCheckboxBlankLine, {
|
|
1275
|
+
size: "40px",
|
|
1276
|
+
className: "me-3 flex-shrink-0"
|
|
1277
|
+
}), props.checked === true && /*#__PURE__*/_react["default"].createElement(_ri.RiCheckboxFill, {
|
|
1278
|
+
size: "40px",
|
|
1279
|
+
className: "me-3 flex-shrink-0"
|
|
1280
|
+
}), /*#__PURE__*/_react["default"].createElement("div", {
|
|
1281
|
+
className: "text-start"
|
|
1282
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
1283
|
+
dangerouslySetInnerHTML: {
|
|
1284
|
+
__html: this.props.item.boxLabel
|
|
1285
|
+
}
|
|
1286
|
+
})))), this.props.item.help ? /*#__PURE__*/_react["default"].createElement(_reactBootstrap.Form.Text, {
|
|
1265
1287
|
muted: true
|
|
1266
1288
|
}, this.props.item.help) : null, /*#__PURE__*/_react["default"].createElement(_componentErrorMessage["default"], {
|
|
1267
1289
|
name: props.name
|
|
@@ -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;
|