@wulperstudio/cms/node/organisms/FreeColumn/FreeColum.js

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _styled = require("./styled");
var _List = require("../Board/components/List");
var _AddElementBody = require("../Board/components/AddElementBody");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["items", "children", "draggableId", "onUpdate", "HeaderComponent", "FooterComponent", "variant", "customColorBorder", "title", "AdornmentHeaderComponent", "dragHandleProps", "innerRef", "columnWidth", "counter", "EntryProps"];
// eslint-disable-next-line max-len
var getFormatItems = function getFormatItems(length) {
  return "(".concat(length && length > 10 ? length : "0".concat(length), " items)");
};
var FreeColumn = function FreeColumn(_ref) {
  var items = _ref.items,
    children = _ref.children,
    draggableId = _ref.draggableId,
    onUpdate = _ref.onUpdate,
    HeaderComponent = _ref.HeaderComponent,
    FooterComponent = _ref.FooterComponent,
    variant = _ref.variant,
    customColorBorder = _ref.customColorBorder,
    title = _ref.title,
    AdornmentHeaderComponent = _ref.AdornmentHeaderComponent,
    dragHandleProps = _ref.dragHandleProps,
    innerRef = _ref.innerRef,
    columnWidth = _ref.columnWidth,
    counter = _ref.counter,
    EntryProps = _ref.EntryProps,
    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  var _React$useState = _react["default"].useState(false),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    showCollapse = _React$useState2[0],
    setShowCollapse = _React$useState2[1];
  var onUpdateColumn = function onUpdateColumn(text) {
    if (onUpdate && draggableId) onUpdate(text, draggableId);
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.FreeColumnContainer, Object.assign({
    ref: innerRef,
    columnWidth: columnWidth,
    variant: variant,
    customColorBorder: customColorBorder
  }, props, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.FreeColumnWrapperHeader, {
      className: "column__wrapper__header",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.FreeColumnHeader, {
        className: "column__header",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.FreeColumnTitle, Object.assign({}, dragHandleProps, {
          children: [!showCollapse && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
            children: [title, ' ', counter || /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.FreeColumnCounter, {
              children: getFormatItems(items == null ? void 0 : items.length)
            })]
          }), showCollapse && /*#__PURE__*/(0, _jsxRuntime.jsx)(_AddElementBody.AddElementBody, {
            initialState: showCollapse,
            placeholder: "Actualizar nombre de la columna",
            onClose: function onClose() {
              return setShowCollapse(false);
            },
            onClick: onUpdateColumn
          })]
        })), AdornmentHeaderComponent]
      }), HeaderComponent]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.ItemsList, {
      listId: draggableId,
      items: items,
      EntryProps: EntryProps,
      children: children
    }), FooterComponent]
  }));
};
var _default = exports["default"] = FreeColumn;