nfttrace-form-builder
Version:
A complete form builder for react.
298 lines (253 loc) • 11.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
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 _jsCookie = _interopRequireDefault(require("js-cookie"));
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 PaleteInputs = /*#__PURE__*/function (_React$Component) {
(0, _inherits2["default"])(PaleteInputs, _React$Component);
var _super = _createSuper(PaleteInputs);
function PaleteInputs(props) {
var _this;
(0, _classCallCheck2["default"])(this, PaleteInputs);
_this = _super.call(this, props);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleIconChange", function (option_index, e) {
var value = e.target.value;
_this.editValue(option_index, e, "icon");
_this.setState({
activeIconIndex: option_index
}); // Clear the previous timeout
clearTimeout(_this.debounceTimeout); // Set a new timeout
_this.debounceTimeout = setTimeout(function () {
_this.fetchIcons(option_index, value);
}, 300); // Adjust debounce time as needed (300ms)
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onSelectIcon", function (icon) {
var _icon$raster_sizes$, _icon$raster_sizes$2;
var this_element = _this.state.element;
this_element.list[_this.state.activeIconIndex].icon = (_icon$raster_sizes$ = icon.raster_sizes[5]) === null || _icon$raster_sizes$ === void 0 ? void 0 : _icon$raster_sizes$.formats[0].preview_url;
_this.setState({
element: this_element,
selectedIcon: (_icon$raster_sizes$2 = icon.raster_sizes[5]) === null || _icon$raster_sizes$2 === void 0 ? void 0 : _icon$raster_sizes$2.formats[0].preview_url,
activeIconIndex: null
});
_this.updateOption();
});
_this.state = {
element: _this.props.element,
dirty: false,
activeIconIndex: null,
iconList: [],
loading: true,
selectedIcon: null
};
return _this;
}
(0, _createClass2["default"])(PaleteInputs, [{
key: "_setValue",
value: function _setValue(text) {
return text.replace(/[^A-Z0-9]+/gi, "_").toLowerCase();
}
}, {
key: "editValue",
value: function editValue(option_index, e, type) {
var _this2 = this;
var this_element = this.state.element;
var val = e.target.value;
this_element.list[option_index.toString()][type] = val;
this.setState({
element: this_element,
dirty: true
}, function () {
if (type === "bgColor") {
_this2.updateOption();
}
});
}
}, {
key: "updateOption",
value: function updateOption() {
var this_element = this.state.element; // to prevent ajax calls with no change
if (this.state.dirty) {
this.props.updateElement.call(this.props.preview, this_element);
this.setState({
dirty: false
});
}
}
}, {
key: "fetchIcons",
value: function () {
var _fetchIcons = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(option_index, query) {
var baseurl, token, url, response, data;
return _regenerator["default"].wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
if (query) {
_context.next = 2;
break;
}
return _context.abrupt("return");
case 2:
// Avoid unnecessary requests when input is empty
this.setState({
loading: true
});
baseurl = this.props.element.baseUrl || this.props.baseUrl;
token = _jsCookie["default"].get("authToken");
url = "".concat(baseurl, "/api/v1/icons/search?query=").concat(query);
_context.prev = 6;
_context.next = 9;
return fetch(url, {
method: "GET",
headers: {
Authorization: "Bearer ".concat(token)
}
});
case 9:
response = _context.sent;
if (response.ok) {
_context.next = 12;
break;
}
throw new Error("Error: ".concat(response.status));
case 12:
_context.next = 14;
return response.json();
case 14:
data = _context.sent;
this.setState({
iconList: data.icons,
loading: false
});
_context.next = 21;
break;
case 18:
_context.prev = 18;
_context.t0 = _context["catch"](6);
this.setState({
loading: false
});
case 21:
case "end":
return _context.stop();
}
}
}, _callee, this, [[6, 18]]);
}));
function fetchIcons(_x, _x2) {
return _fetchIcons.apply(this, arguments);
}
return fetchIcons;
}()
}, {
key: "render",
value: function render() {
var _this3 = this;
return /*#__PURE__*/_react["default"].createElement("div", {
className: "dynamic-option-list mt-3"
}, this.props.element.list.map(function (item, index) {
return /*#__PURE__*/_react["default"].createElement("div", {
key: index,
className: "dynamic-option-list-item"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "d-flex align-items-center mb-2",
style: {
gap: "10px"
}
}, /*#__PURE__*/_react["default"].createElement("input", {
type: "text",
value: item.link,
placeholder: "Enter link",
className: "form-control",
onChange: function onChange(e) {
return _this3.editValue(index, e, "link");
},
onBlur: _this3.updateOption.bind(_this3),
style: {
maxWidth: "200px"
}
}), /*#__PURE__*/_react["default"].createElement("input", {
type: "text",
value: item.text,
placeholder: "Enter text",
className: "form-control",
onChange: function onChange(e) {
return _this3.editValue(index, e, "text");
},
onBlur: _this3.updateOption.bind(_this3),
style: {
maxWidth: "150px"
}
}), /*#__PURE__*/_react["default"].createElement("div", {
className: "position-relative"
}, /*#__PURE__*/_react["default"].createElement("input", {
type: "text",
value: item.icon,
placeholder: "Search and select the icon",
className: "form-control",
onChange: function onChange(e) {
return _this3.handleIconChange(index, e);
} // onBlur={() => this.setState({ activeIconIndex: null })}
}), _this3.state.activeIconIndex == index && /*#__PURE__*/_react["default"].createElement("div", {
className: "position-absolute text-center z-index-1 bg-white w-100 p-1 border border-gray",
style: {
top: "100%",
zIndex: 99,
borderRadius: "5px"
}
}, _this3.state.loading && _this3.state.iconList.length == 0 && /*#__PURE__*/_react["default"].createElement("div", {
className: "spinner-border",
role: "status"
}), !_this3.state.loading && _this3.state.iconList.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
className: "icon-container"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "icon-list"
}, _this3.state.iconList.map(function (icon) {
var _icon$raster_sizes$3, _icon$raster_sizes$4, _icon$raster_sizes$5;
return ((_icon$raster_sizes$3 = icon.raster_sizes[5]) === null || _icon$raster_sizes$3 === void 0 ? void 0 : _icon$raster_sizes$3.formats[0].preview_url) && /*#__PURE__*/_react["default"].createElement("img", {
key: icon.icon_id,
src: (_icon$raster_sizes$4 = icon.raster_sizes[5]) === null || _icon$raster_sizes$4 === void 0 ? void 0 : _icon$raster_sizes$4.formats[0].preview_url,
alt: "icon",
className: "icon-item ".concat(_this3.state.selectedIcon == ((_icon$raster_sizes$5 = icon.raster_sizes[5]) === null || _icon$raster_sizes$5 === void 0 ? void 0 : _icon$raster_sizes$5.formats[0].preview_url) ? "selected-pale-icon" : ""),
style: {
width: 40
},
onClick: function onClick() {
return _this3.onSelectIcon(icon);
}
});
}))))), /*#__PURE__*/_react["default"].createElement("input", {
type: "color",
value: item.bgColor,
className: "form-control border-0 p-0 bg-transparent",
style: {
minWidth: "25px",
maxWidth: "25px",
minHeight: "25px",
maxHeight: "25px"
},
onChange: function onChange(e) {
return _this3.editValue(index, e, "bgColor");
}
})));
}));
}
}]);
return PaleteInputs;
}(_react["default"].Component);
exports["default"] = PaleteInputs;