@arudovwen/react-form-builder/lib/multi-column/MultiColumnRow.js

A complete form builder for react.

"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 _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"));
/* eslint-disable camelcase */

const accepts = [_ItemTypes.default.BOX, _ItemTypes.default.CARD];
class MultiColumnRowBase extends _react.default.Component {
  render() {
    const {
      controls,
      data,
      editModeOn,
      getDataById,
      setAsChild,
      removeChild,
      seq,
      className,
      index
    } = this.props;
    const {
      childItems,
      pageBreakBefore
    } = data;
    let baseClasses = 'SortableItem rfb-item';
    if (pageBreakBefore) {
      baseClasses += ' alwaysbreak';
    }
    return /*#__PURE__*/_react.default.createElement("div", {
      style: {
        ...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((x, i) => /*#__PURE__*/_react.default.createElement("div", {
      key: `${i}_${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: () => removeChild(data, i),
      getDataById: getDataById,
      setAsChild: setAsChild,
      seq: seq
    }))))));
  }
}
const TwoColumnRow = ({
  data,
  class_name,
  ...rest
}) => {
  const 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;
const ThreeColumnRow = ({
  data,
  class_name,
  ...rest
}) => {
  const 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;
const MultiColumnRow = ({
  data,
  ...rest
}) => {
  const colCount = data.col_count || 4;
  const 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
    }, (v, i) => null);
    data.isContainer = true;
  }
  return /*#__PURE__*/_react.default.createElement(MultiColumnRowBase, (0, _extends2.default)({}, rest, {
    className: className,
    data: data
  }));
};
exports.MultiColumnRow = MultiColumnRow;