sprint-digital-react-form-builder
Version:
A complete form builder for react.
333 lines (272 loc) • 13.5 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _dateFns = require("date-fns");
var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
var _componentHeader = _interopRequireDefault(require("./component-header"));
var _componentLabel = _interopRequireDefault(require("./component-label"));
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; }
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; }
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); }; }
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; } }
var DatePicker = /*#__PURE__*/function (_React$Component) {
(0, _inherits2["default"])(DatePicker, _React$Component);
var _super = _createSuper(DatePicker);
function DatePicker(props) {
var _this;
(0, _classCallCheck2["default"])(this, DatePicker);
_this = _super.call(this, props);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleChange", function (dt) {
// This handler is called when a date is selected from the picker calendar or cleared
var formatMask = _this.state.formatMask;
if (!dt || dt && !dt.target) {
// Date selected from picker or cleared (dt is null when clear button is clicked)
_this.setState({
value: dt ? (0, _dateFns.format)(dt, formatMask) : '',
internalValue: dt || undefined,
placeholder: dt ? '' : formatMask.toLowerCase()
});
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "formatDateInput", function (input) {
var _formatMask$match;
// Remove all non-numeric characters
var digitsOnly = input.replace(/\D/g, '');
var formatMask = _this.state.formatMask;
if (digitsOnly.length === 0) {
return '';
} // Analyze the format mask to determine the date format structure
// Common formats: MM/dd/yyyy, dd/MM/yyyy, yyyy/MM/dd, etc.
var formatLower = formatMask.toLowerCase(); // Determine the separator used in the format
var separator = ((_formatMask$match = formatMask.match(/[^a-zA-Z0-9]/)) === null || _formatMask$match === void 0 ? void 0 : _formatMask$match[0]) || '/'; // Determine the positions of day, month, and year in the format
var monthIndex = formatLower.indexOf('m');
var dayIndex = formatLower.indexOf('d');
var yearIndex = formatLower.indexOf('y'); // Create an array of format parts with their positions
var formatParts = [{
type: 'month',
index: monthIndex,
length: 2
}, {
type: 'day',
index: dayIndex,
length: 2
}, {
type: 'year',
index: yearIndex,
length: 4
}].sort(function (a, b) {
return a.index - b.index;
}); // Format the digits based on the detected format
var formatted = '';
var digitIndex = 0;
for (var i = 0; i < formatParts.length; i++) {
var part = formatParts[i];
var partLength = part.length;
if (digitIndex >= digitsOnly.length) {
break;
}
var partDigits = digitsOnly.slice(digitIndex, digitIndex + partLength);
formatted += partDigits;
digitIndex += partLength; // Add separator after each part except the last one
if (i < formatParts.length - 1 && digitIndex < digitsOnly.length) {
formatted += separator;
}
}
return formatted;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleChangeRaw", function (e) {
// This handler is called when the user manually types in the input field
var inputValue = e.target.value;
var formatMask = _this.state.formatMask; // If input is empty, clear the date
if (inputValue === '') {
_this.setState({
value: '',
internalValue: undefined,
placeholder: formatMask.toLowerCase()
});
} // Allow typing - React DatePicker will handle the input display
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleBlur", function (e) {
// This handler is called when the input loses focus (on blur)
var inputValue = e.target.value;
var formatMask = _this.state.formatMask; // If input is empty, just clear
if (inputValue === '') {
_this.setState({
value: '',
internalValue: undefined,
placeholder: formatMask.toLowerCase()
});
return;
} // Auto-format the input on blur (e.g., "08081995" -> "08/08/1995")
var formattedInput = _this.formatDateInput(inputValue); // Try to parse the formatted input
try {
var parsedDate = (0, _dateFns.parse)(formattedInput, formatMask, new Date()); // Check if the parsed date is valid
if ((0, _dateFns.isValid)(parsedDate)) {
var finalFormattedDate = (0, _dateFns.format)(parsedDate, formatMask);
_this.setState({
value: finalFormattedDate,
internalValue: parsedDate,
placeholder: ''
});
} else {
// Invalid date after formatting - clear the input
_this.setState({
value: '',
internalValue: undefined,
placeholder: formatMask.toLowerCase()
});
}
} catch (error) {
// Parsing failed - clear the input
_this.setState({
value: '',
internalValue: undefined,
placeholder: formatMask.toLowerCase()
});
}
});
_this.inputField = /*#__PURE__*/_react["default"].createRef();
var _DatePicker$updateFor = DatePicker.updateFormat(props, null),
_formatMask = _DatePicker$updateFor.formatMask;
_this.state = DatePicker.updateDateTime(props, {
formatMask: _formatMask
}, _formatMask);
return _this;
} // formatMask = '';
(0, _createClass2["default"])(DatePicker, [{
key: "render",
value: function render() {
var _this$props$data = this.props.data,
showTimeSelect = _this$props$data.showTimeSelect,
showTimeSelectOnly = _this$props$data.showTimeSelectOnly,
showTimeInput = _this$props$data.showTimeInput;
var props = {};
props.type = 'date';
props.className = 'form-control';
props.name = this.props.data.field_name;
var readOnly = this.props.data.readOnly || this.props.read_only;
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
var placeholderText = this.state.formatMask.toLowerCase();
if (this.props.mutable) {
props.defaultValue = this.props.defaultValue;
props.ref = this.inputField;
}
var baseClasses = 'SortableItem rfb-item';
if (this.props.data.pageBreakBefore) {
baseClasses += ' alwaysbreak';
}
return /*#__PURE__*/_react["default"].createElement("div", {
className: baseClasses,
style: _objectSpread({}, this.props.style)
}, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
className: "form-group"
}, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", null, readOnly && /*#__PURE__*/_react["default"].createElement("input", {
type: "text",
name: props.name,
ref: props.ref,
readOnly: readOnly,
placeholder: this.state.placeholder,
value: this.state.value,
className: "form-control"
}), iOS && !readOnly && /*#__PURE__*/_react["default"].createElement("input", {
type: "date",
name: props.name,
ref: props.ref,
onChange: this.handleChange,
dateFormat: "MM/DD/YYYY",
value: this.state.value,
className: "form-control"
}), !iOS && !readOnly && /*#__PURE__*/_react["default"].createElement(_reactDatepicker["default"], {
name: props.name,
ref: props.ref,
onChange: this.handleChange,
onChangeRaw: this.handleChangeRaw,
onBlur: this.handleBlur,
selected: this.state.internalValue,
todayButton: 'Today',
className: "form-control",
isClearable: true,
showTimeSelect: showTimeSelect,
showTimeSelectOnly: showTimeSelectOnly,
showTimeInput: showTimeInput,
dateFormat: this.state.formatMask,
portalId: "root-portal",
autoComplete: "off",
placeholderText: placeholderText
}))));
}
}], [{
key: "updateFormat",
value: function updateFormat(props, oldFormatMask) {
var _props$data = props.data,
showTimeSelect = _props$data.showTimeSelect,
showTimeSelectOnly = _props$data.showTimeSelectOnly,
showTimeInput = _props$data.showTimeInput;
var dateFormat = showTimeSelect && showTimeSelectOnly ? '' : props.data.dateFormat;
var timeFormat = showTimeSelect || showTimeInput ? props.data.timeFormat : '';
var formatMask = "".concat(dateFormat, " ").concat(timeFormat).trim();
var updated = formatMask !== oldFormatMask;
return {
updated: updated,
formatMask: formatMask
};
}
}, {
key: "updateDateTime",
value: function updateDateTime(props, state, formatMask) {
var value;
var internalValue;
var defaultToday = props.data.defaultToday;
if (defaultToday && (props.defaultValue === '' || props.defaultValue === undefined)) {
value = (0, _dateFns.format)(new Date(), formatMask);
internalValue = new Date();
} else {
value = props.defaultValue;
if (value === '' || value === undefined || value === null) {
internalValue = undefined;
} else {
internalValue = (0, _dateFns.parse)(value, state.formatMask, new Date());
}
}
return {
value: value,
internalValue: internalValue,
placeholder: formatMask.toLowerCase(),
defaultToday: defaultToday,
formatMask: state.formatMask
};
} // componentWillReceiveProps(props) {
// const formatUpdated = this.updateFormat(props);
// if ((props.data.defaultToday !== !this.state.defaultToday) || formatUpdated) {
// const state = this.updateDateTime(props, this.formatMask);
// this.setState(state);
// }
// }
}, {
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(props, state) {
var _DatePicker$updateFor2 = DatePicker.updateFormat(props, state.formatMask),
updated = _DatePicker$updateFor2.updated,
formatMask = _DatePicker$updateFor2.formatMask;
if (props.data.defaultToday !== state.defaultToday || updated) {
var newState = DatePicker.updateDateTime(props, state, formatMask);
return newState;
}
return null;
}
}]);
return DatePicker;
}(_react["default"].Component);
var _default = DatePicker;
exports["default"] = _default;