@goldenpine/react-form-builder2 0.18.4-patch.1

package/lib/language-provider/locales/vi-vn.json

@@ -0,0 +1,96 @@
+{
+  "display-label": "Nhãn hiển thị",
+  "choose-file": "Chọn tệp tin",
+  "text-to-display": "Chữ hiển thị",
+  "link-to": "Liên kết tới",
+  "center": "Giữa",
+  "width": "Độ rộng",
+  "height": "Chiều cao",
+  "required": "Bắt buộc nhập",
+  "read-only": "Chỉ đọc",
+  "default-to-today": "Mặc định hôm nay",
+  "show-time-select": "Hiển thị chọn thời gian",
+  "show-time-select-only": "Chỉ hiển thị thời gian",
+  "show-time-input": "Hiển thị đầu vào thời gian",
+  "display-horizontal": "Hiển thị theo chiều ngang",
+  "variable-key": "Khóa tham chiếu",
+  "variable-key-desc": "Tùy chọn này cung cấp từ khóa dùng để thay thế nội dung khi biểu mẫu hoạt động",
+  "print-options": "Tùy chọn in ấn",
+  "page-break-before-elements": "Phân trang trước thành phần điểu khiển",
+  "alternate-signature-page": "Trang thay thế / ký",
+  "display-on-alternate-signature-page": "Hiển thị trên trang thay thế / ký",
+  "step": "Bước nhảy",
+  "min": "Nhỏ nhất",
+  "max": "Lớn nhất",
+  "default-selected": "Mặc Định Chọn",
+  "text-style": "Kiểu Chữ",
+  "bold": "Đậm",
+  "italic": "Nghiêng",
+  "description": "Mô tả",
+  "correct-answer": "Lựa chọn đúng",
+  "populate-options-from-api": "Lấy dữ liệu từ API",
+  "populate": "Thực hiện",
+  "display-label-after-camera-icon" : "Hiển thị nhãn sau biểu tượng máy ảnh",
+  "place-holder-display-label-after-camera-icon" : "Tải ảnh lên",
+  "display-message-under-camera-icon" : "Hiển thị tin nhắn dưới biểu tượng máy ảnh",
+  "place-holder-display-message-under-camera-icon" : "Chọn một hình ảnh từ máy tính hoặc thiết bị của bạn.",
+  "display-label-after-photo-clear-icon" : "Hiển thị nhãn sau biểu tượng xóa ảnh",
+  "place-holder-display-label-after-photo-clear-icon" : "Xóa ảnh",
+  "display-label-after-file-icon" : "Hiển thị nhãn sau biểu tượng tập tin",
+  "place-holder-display-label-after-file-icon" : "Tải tập tin lên",
+  "display-message-under-file-icon" : "Hiển thị tin nhắn dưới biểu tượng tập tin",
+  "place-holder-display-message-under-file-icon" : "Chọn một tập tin từ máy tính hoặc thiết bị của bạn.",
+  "display-label-after-file-clear-icon" : "Hiển thị nhãn sau biểu tượng xóa tập tin",
+  "place-holder-display-label-after-file-clear-icon" : "Xóa tập tin",
+
+  "options" : "Tùy chọn",
+  "value" : "Giá trị",
+  "correct" : "Đúng",
+
+  "dismiss" : "Bỏ qua",
+
+  "place-holder-option-1" : "Lựa chọn 1",
+  "place-holder-option-2" : "Lựa chọn 2",
+  "place-holder-option-3" : "Lựa chọn 3",
+  "place-holder-tag-1" : "Lựa chọn 1",
+  "place-holder-tag-2" : "Lựa chọn 2",
+  "place-holder-tag-3" : "Lựa chọn 3",
+
+  "toolbox" : "Công cụ",
+  "header-text" : "Tiêu đề",
+  "label" : "Nhãn",
+  "paragraph" : "Đoạn văn",
+  "line-break" : "Đường kẻ dòng",
+  "dropdown" : "Danh sách chọn",
+  "tags": "Thẻ",
+  "checkboxes" : "Hộp chọn",
+  "multiple-choice":"Nhiều lựa chọn",
+  "text-input":"Nhập chữ",
+  "number-input":"Nhập số",
+  "fieldset":"bộ trường",
+  "multi-line-input":"Nhập nhiều dòng",
+  "two-columns-row":"Dòng có hai cột",
+  "three-columns-row":"Dòng có ba cột",
+  "four-columns-row":"Dòng có bốn cột",
+  "image":"Liên kết ảnh",
+  "rating":"Đánh giá",
+  "date":"Ngày",
+  "signature":"Chữ kí",
+  "website":"Trang web",
+  "file-attachment":"Tệp đính kèm",
+  "range":"Khoảng",
+  "camera":"Tải ảnh",
+  "place-holder-text": "Nội dung...",
+  "place-holder-label": "Nhãn",
+  "place-holder-website-link": "Đường dẫn tới website...",
+  "place-holder-file-name": "Tên tệp...",
+  "easy": "Easy",
+  "difficult": "Difficult",
+
+  "drop-zone": "Khu vực kéo thả",
+
+  "message.is-required": "không được bỏ trống",
+  "message.was-answered incorrectly": "đã trả lời sai",
+  "message.was-not-registered": "chưa đăng ký"
+  
+}

package/lib/multi-column/MultiColumnRow.js

@@ -0,0 +1,137 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TwoColumnRow = exports.ThreeColumnRow = exports.MultiColumnRow = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+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 _react = _interopRequireDefault(require("react"));
+var _componentHeader = _interopRequireDefault(require("../form-elements/component-header"));
+var _componentLabel = _interopRequireDefault(require("../form-elements/component-label"));
+var _dustbin = _interopRequireDefault(require("./dustbin"));
+var _ItemTypes = _interopRequireDefault(require("../ItemTypes"));
+var _excluded = ["data", "class_name"],
+  _excluded2 = ["data", "class_name"],
+  _excluded3 = ["data"];
+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; } } /* eslint-disable camelcase */
+var accepts = [_ItemTypes["default"].BOX, _ItemTypes["default"].CARD];
+var MultiColumnRowBase = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(MultiColumnRowBase, _React$Component);
+  var _super = _createSuper(MultiColumnRowBase);
+  function MultiColumnRowBase() {
+    (0, _classCallCheck2["default"])(this, MultiColumnRowBase);
+    return _super.apply(this, arguments);
+  }
+  (0, _createClass2["default"])(MultiColumnRowBase, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        controls = _this$props.controls,
+        data = _this$props.data,
+        editModeOn = _this$props.editModeOn,
+        getDataById = _this$props.getDataById,
+        setAsChild = _this$props.setAsChild,
+        removeChild = _this$props.removeChild,
+        seq = _this$props.seq,
+        className = _this$props.className,
+        index = _this$props.index;
+      var childItems = data.childItems,
+        pageBreakBefore = data.pageBreakBefore;
+      var baseClasses = 'SortableItem rfb-item';
+      if (pageBreakBefore) {
+        baseClasses += ' alwaysbreak';
+      }
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: _objectSpread({}, this.props.style),
+        className: baseClasses
+      }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "row"
+      }, childItems.map(function (x, i) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          key: "".concat(i, "_").concat(x || '_'),
+          className: className
+        }, controls ? controls[i] : /*#__PURE__*/_react["default"].createElement(_dustbin["default"], {
+          style: {
+            width: '100%'
+          },
+          data: data,
+          accepts: accepts,
+          items: childItems,
+          col: i,
+          parentIndex: index,
+          editModeOn: editModeOn,
+          _onDestroy: function _onDestroy() {
+            return removeChild(data, i);
+          },
+          getDataById: getDataById,
+          setAsChild: setAsChild,
+          seq: seq
+        }));
+      }))));
+    }
+  }]);
+  return MultiColumnRowBase;
+}(_react["default"].Component);
+var TwoColumnRow = function TwoColumnRow(_ref) {
+  var data = _ref.data,
+    class_name = _ref.class_name,
+    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var className = class_name || 'col-md-6';
+  if (!data.childItems) {
+    // eslint-disable-next-line no-param-reassign
+    data.childItems = [null, null];
+    data.isContainer = true;
+  }
+  return /*#__PURE__*/_react["default"].createElement(MultiColumnRowBase, (0, _extends2["default"])({}, rest, {
+    className: className,
+    data: data
+  }));
+};
+exports.TwoColumnRow = TwoColumnRow;
+var ThreeColumnRow = function ThreeColumnRow(_ref2) {
+  var data = _ref2.data,
+    class_name = _ref2.class_name,
+    rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
+  var className = class_name || 'col-md-4';
+  if (!data.childItems) {
+    // eslint-disable-next-line no-param-reassign
+    data.childItems = [null, null, null];
+    data.isContainer = true;
+  }
+  return /*#__PURE__*/_react["default"].createElement(MultiColumnRowBase, (0, _extends2["default"])({}, rest, {
+    className: className,
+    data: data
+  }));
+};
+exports.ThreeColumnRow = ThreeColumnRow;
+var MultiColumnRow = function MultiColumnRow(_ref3) {
+  var data = _ref3.data,
+    rest = (0, _objectWithoutProperties2["default"])(_ref3, _excluded3);
+  var colCount = data.col_count || 4;
+  var className = data.class_name || (colCount === 4 ? 'col-md-3' : 'col');
+  if (!data.childItems) {
+    // eslint-disable-next-line no-param-reassign
+    data.childItems = Array.from({
+      length: colCount
+    }, function (v, i) {
+      return null;
+    });
+    data.isContainer = true;
+  }
+  return /*#__PURE__*/_react["default"].createElement(MultiColumnRowBase, (0, _extends2["default"])({}, rest, {
+    className: className,
+    data: data
+  }));
+};
+exports.MultiColumnRow = MultiColumnRow;

package/lib/multi-column/dustbin.js

@@ -0,0 +1,156 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactDnd = require("react-dnd");
+var _formElements = _interopRequireDefault(require("../form-elements"));
+var _ItemTypes = _interopRequireDefault(require("../ItemTypes"));
+var _customElement = _interopRequireDefault(require("../form-elements/custom-element"));
+var _registry = _interopRequireDefault(require("../stores/registry"));
+var _store = _interopRequireDefault(require("../stores/store"));
+var _excluded = ["onDropSuccess", "seq", "draggedItem", "parentIndex", "canDrop", "isOver", "isOverCurrent", "connectDropTarget", "items", "col", "getDataById"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function getCustomElement(item, props) {
+  if (!item.component || typeof item.component !== 'function') {
+    item.component = _registry["default"].get(item.key);
+    if (!item.component) {
+      console.error("".concat(item.element, " was not registered"));
+    }
+  }
+  return /*#__PURE__*/_react["default"].createElement(_customElement["default"], (0, _extends2["default"])({}, props, {
+    mutable: false,
+    key: "form_".concat(item.id),
+    data: item
+  }));
+}
+function getElement(item, props) {
+  if (!item) return null;
+  if (item.custom) {
+    return getCustomElement(item, props);
+  }
+  var Element = _formElements["default"][item.element || item.key];
+  return /*#__PURE__*/_react["default"].createElement(Element, (0, _extends2["default"])({}, props, {
+    key: "form_".concat(item.id),
+    data: item
+  }));
+}
+function getStyle(backgroundColor) {
+  return {
+    border: '1px solid rgba(0,0,0,0.2)',
+    minHeight: '2rem',
+    minWidth: '7rem',
+    width: '100%',
+    backgroundColor: backgroundColor,
+    padding: 0,
+    "float": 'left'
+  };
+}
+function isContainer(item) {
+  if (item.itemType !== _ItemTypes["default"].CARD) {
+    var data = item.data;
+    if (data) {
+      if (data.isContainer) {
+        return true;
+      }
+      if (data.field_name) {
+        return data.field_name.indexOf('_col_row') > -1;
+      }
+    }
+  }
+  return false;
+}
+var Dustbin = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+  var onDropSuccess = _ref.onDropSuccess,
+    seq = _ref.seq,
+    draggedItem = _ref.draggedItem,
+    parentIndex = _ref.parentIndex,
+    canDrop = _ref.canDrop,
+    isOver = _ref.isOver,
+    isOverCurrent = _ref.isOverCurrent,
+    connectDropTarget = _ref.connectDropTarget,
+    items = _ref.items,
+    col = _ref.col,
+    getDataById = _ref.getDataById,
+    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var item = getDataById(items[col]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      onDrop: function onDrop(dropped) {
+        console.log("dropped ites");
+        var data = dropped.data;
+        if (data) {
+          onDropSuccess && onDropSuccess();
+          _store["default"].dispatch('deleteLastItem');
+        }
+      }
+    };
+  }, []);
+  var element = getElement(item, rest);
+  var sameCard = draggedItem ? draggedItem.index === parentIndex : false;
+
+  // console.log('dragIndex:',draggedItem?.index)
+  // console.log('HoverIndex:',parentIndex)
+  // console.log('SameCard:',sameCard)
+
+  var backgroundColor = 'rgba(0, 0, 0, .03)';
+  if (!sameCard && isOver && canDrop && !draggedItem.data.isContainer) {
+    backgroundColor = '#F7F589';
+  }
+
+  // console.log('sameCard, canDrop', sameCard, canDrop);
+  return connectDropTarget(/*#__PURE__*/_react["default"].createElement("div", {
+    style: !sameCard ? getStyle(backgroundColor) : getStyle('rgba(0, 0, 0, .03')
+  }, !element && /*#__PURE__*/_react["default"].createElement("span", null, "Drop your element here "), element));
+});
+var _default = (0, _reactDnd.DropTarget)(function (props) {
+  return props.accepts;
+}, {
+  drop: function drop(props, monitor, component) {
+    if (!component) {
+      return;
+    }
+
+    // //Do nothing whith busy dustbin
+    // if(props.items[props.col]) return;
+    // Allow swap column if target and source are in same multi column row
+    var isBusy = !!props.items[props.col];
+    var item = monitor.getItem();
+
+    // Do nothing when moving the box inside the same column
+    if (props.col === item.col && props.items[props.col] === item.id) return;
+
+    // Do not allow replace component other than both items in same multi column row
+    if (item.col === undefined && props.items[props.col]) {
+      _store["default"].dispatch('resetLastItem');
+      return;
+    }
+    if (!isContainer(item)) {
+      component.onDrop(item);
+      console.log("calling on Drop from 137", item);
+      if (item.data && typeof props.setAsChild === 'function') {
+        var isNew = !item.data.id;
+        var data = isNew ? item.onCreate(item.data) : item.data;
+        props.setAsChild(props.data, data, props.col, isBusy);
+      }
+    }
+  }
+}, function (connect, monitor) {
+  return {
+    connectDropTarget: connect.dropTarget(),
+    draggedItem: monitor.getItem() ? monitor.getItem() : null,
+    isOver: monitor.isOver(),
+    isOverCurrent: monitor.isOver({
+      shallow: true
+    }),
+    canDrop: monitor.canDrop()
+  };
+})(Dustbin);
+exports["default"] = _default;

package/lib/multi-column/grip.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactDnd = require("react-dnd");
+var _ItemTypes = _interopRequireDefault(require("../ItemTypes"));
+var style = {
+  // display: 'inline-block',
+  // border: '1px dashed gray',
+  // padding: '0.5rem 1rem',
+  // backgroundColor: 'white',
+  cursor: 'move'
+};
+var gripSource = {
+  beginDrag: function beginDrag(props) {
+    var data = props.data,
+      index = props.index,
+      onDestroy = props.onDestroy,
+      setAsChild = props.setAsChild,
+      getDataById = props.getDataById;
+    return {
+      itemType: _ItemTypes["default"].BOX,
+      index: data.parentId ? -1 : index,
+      parentIndex: data.parentIndex,
+      id: data.id,
+      col: data.col,
+      onDestroy: onDestroy,
+      setAsChild: setAsChild,
+      getDataById: getDataById,
+      data: data
+    };
+  }
+};
+var Grip = function Grip(_ref) {
+  var connectDragSource = _ref.connectDragSource;
+  return connectDragSource(/*#__PURE__*/_react["default"].createElement("div", {
+    className: "btn is-isolated",
+    style: style
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "is-isolated fas fa-grip-vertical"
+  })));
+};
+var _default = (0, _reactDnd.DragSource)(_ItemTypes["default"].BOX, gripSource, function (connect) {
+  return {
+    connectDragSource: connect.dragSource()
+  };
+})(Grip);
+exports["default"] = _default;

package/lib/multi-column/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MultiColumnRow", {
+  enumerable: true,
+  get: function get() {
+    return _MultiColumnRow.MultiColumnRow;
+  }
+});
+Object.defineProperty(exports, "ThreeColumnRow", {
+  enumerable: true,
+  get: function get() {
+    return _MultiColumnRow.ThreeColumnRow;
+  }
+});
+Object.defineProperty(exports, "TwoColumnRow", {
+  enumerable: true,
+  get: function get() {
+    return _MultiColumnRow.TwoColumnRow;
+  }
+});
+var _MultiColumnRow = require("./MultiColumnRow");