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

Wulper Studio Library Components CMS

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["items", "children", "draggableId", "onUpdate", "HeaderComponent", "FooterComponent", "variant", "customColorBorder", "title", "AdornmentHeaderComponent", "dragHandleProps", "innerRef", "columnWidth", "counter", "EntryProps"];
import React from 'react';
import { FreeColumnContainer, FreeColumnHeader, FreeColumnTitle, FreeColumnCounter, FreeColumnWrapperHeader } from './styled';
import { ItemsList } from '../Board/components/List';
import { AddElementBody } from '../Board/components/AddElementBody';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
// 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 = _objectWithoutProperties(_ref, _excluded);
  var _React$useState = React.useState(false),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    showCollapse = _React$useState2[0],
    setShowCollapse = _React$useState2[1];
  var onUpdateColumn = function onUpdateColumn(text) {
    if (onUpdate && draggableId) onUpdate(text, draggableId);
  };
  return /*#__PURE__*/_jsxs(FreeColumnContainer, Object.assign({
    ref: innerRef,
    columnWidth: columnWidth,
    variant: variant,
    customColorBorder: customColorBorder
  }, props, {
    children: [/*#__PURE__*/_jsxs(FreeColumnWrapperHeader, {
      className: "column__wrapper__header",
      children: [/*#__PURE__*/_jsxs(FreeColumnHeader, {
        className: "column__header",
        children: [/*#__PURE__*/_jsxs(FreeColumnTitle, Object.assign({}, dragHandleProps, {
          children: [!showCollapse && /*#__PURE__*/_jsxs(_Fragment, {
            children: [title, ' ', counter || /*#__PURE__*/_jsx(FreeColumnCounter, {
              children: getFormatItems(items == null ? void 0 : items.length)
            })]
          }), showCollapse && /*#__PURE__*/_jsx(AddElementBody, {
            initialState: showCollapse,
            placeholder: "Actualizar nombre de la columna",
            onClose: function onClose() {
              return setShowCollapse(false);
            },
            onClick: onUpdateColumn
          })]
        })), AdornmentHeaderComponent]
      }), HeaderComponent]
    }), /*#__PURE__*/_jsx(ItemsList, {
      listId: draggableId,
      items: items,
      EntryProps: EntryProps,
      children: children
    }), FooterComponent]
  }));
};
export default FreeColumn;