@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
156 lines • 6.8 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["items", "children", "draggableId", "onCreate", "onUpdate", "onDelete", "showCreatElements", "showMenuColumn", "isDragDisabled", "variant", "customColorBorder", "title", "index", "EntryProps", "counter"];
import React from 'react';
import { Icon } from '@iconify/react';
import { Tooltip, Stack, useTheme } from '@mui/material';
import { Draggable } from 'react-beautiful-dnd';
import { ItemsList } from '../List/index';
import { MenuColumn } from '../MenuColumn';
import { AddElementBody } from '../AddElementBody';
import { Container, Header, Title, Counter, WrapperHeader } from './styled';
import { IconButtonComponent } from '../../../../components/IconButtonComponent';
import { ICONS_NAME } from '../../../../helpers/icons';
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 > 10 ? length : "0".concat(length), " items)");
};
export var BoardColumn = function BoardColumn(_ref) {
var _ItemsList;
var items = _ref.items,
_children = _ref.children,
draggableId = _ref.draggableId,
onCreate = _ref.onCreate,
onUpdate = _ref.onUpdate,
onDelete = _ref.onDelete,
_ref$showCreatElement = _ref.showCreatElements,
showCreatElements = _ref$showCreatElement === void 0 ? false : _ref$showCreatElement,
_ref$showMenuColumn = _ref.showMenuColumn,
showMenuColumn = _ref$showMenuColumn === void 0 ? false : _ref$showMenuColumn,
_ref$isDragDisabled = _ref.isDragDisabled,
isDragDisabled = _ref$isDragDisabled === void 0 ? false : _ref$isDragDisabled,
variant = _ref.variant,
customColorBorder = _ref.customColorBorder,
title = _ref.title,
index = _ref.index,
EntryProps = _ref.EntryProps,
counter = _ref.counter,
props = _objectWithoutProperties(_ref, _excluded);
var theme = useTheme();
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
isVisible = _React$useState2[0],
setIsVisible = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
showCollapse = _React$useState4[0],
setShowCollapse = _React$useState4[1];
var onCreateItem = function onCreateItem(text) {
onCreate(text, draggableId);
};
var onUpdateColumn = function onUpdateColumn(text) {
onUpdate(text, draggableId);
};
var onDeleteColumn = function onDeleteColumn() {
onDelete(draggableId);
};
return /*#__PURE__*/_jsx(Draggable, {
draggableId: draggableId,
index: index,
isDragDisabled: isDragDisabled,
children: function children(provided) {
return /*#__PURE__*/_jsxs(Container, Object.assign({
width: props.columnWidth,
variant: variant,
ref: provided.innerRef,
customColorBorder: customColorBorder
}, provided.draggableProps, {
children: [/*#__PURE__*/_jsxs(WrapperHeader, {
children: [/*#__PURE__*/_jsxs(Header, {
children: [/*#__PURE__*/_jsxs(Title, Object.assign({}, provided.dragHandleProps, {
children: [!showCollapse && /*#__PURE__*/_jsxs(_Fragment, {
children: [title, ' ', counter || /*#__PURE__*/_jsx(Counter, {
children: getFormatItems(items.length)
})]
}), showCollapse && /*#__PURE__*/_jsx(AddElementBody, {
initialState: showCollapse,
placeholder: "Actualizar nombre de la columna",
onClose: function onClose() {
return setShowCollapse(false);
},
onClick: onUpdateColumn
})]
})), /*#__PURE__*/_jsxs(Stack, {
direction: "row",
spacing: 0.5,
children: [showCreatElements && props.positionCreateElement === 'top' && /*#__PURE__*/_jsx(IconButtonComponent, {
iconProps: {
size: 'medium',
onClick: function onClick() {
return setIsVisible(!isVisible);
},
sx: {
transform: isVisible ? 'rotate(45deg)' : 'rotate(0deg)',
transition: 'transform 0.3s ease-out'
}
},
children: /*#__PURE__*/_jsx(Icon, {
icon: ICONS_NAME.add,
color: theme.palette.text.primary
})
}), showMenuColumn && /*#__PURE__*/_jsx(MenuColumn, {
textDelete: props.menuColumnProps.textDelete,
textUpdate: props.menuColumnProps.textUpdate,
onDelete: onDeleteColumn,
onUpdate: function onUpdate() {
return setShowCollapse(!showCollapse);
},
disabledDelete: items.length !== 0
})]
})]
}), showCreatElements && props.positionCreateElement === 'top' && /*#__PURE__*/_jsx(AddElementBody, {
initialState: isVisible,
onClose: function onClose() {
return setIsVisible(false);
},
onClick: onCreateItem,
placeholder: props.AddCardProps.placeholder
})]
}), _ItemsList || (_ItemsList = /*#__PURE__*/_jsx(ItemsList, {
listId: draggableId,
items: items,
EntryProps: EntryProps,
children: _children
})), showCreatElements && props.positionCreateElement === 'bottom' && /*#__PURE__*/_jsxs("div", {
children: [/*#__PURE__*/_jsx(Tooltip, {
title: props.AddCardProps.title,
children: /*#__PURE__*/_jsx(IconButtonComponent, {
iconProps: {
size: 'medium',
onClick: function onClick() {
return setIsVisible(!isVisible);
},
sx: {
transform: isVisible ? 'rotate(45deg)' : 'rotate(0deg)',
transition: 'transform 0.3s ease-out'
}
},
children: /*#__PURE__*/_jsx(Icon, {
icon: ICONS_NAME.add,
color: theme.palette.text.primary
})
})
}), /*#__PURE__*/_jsx(AddElementBody, {
initialState: isVisible,
onClose: function onClose() {
return setIsVisible(false);
},
onClick: onCreateItem,
placeholder: props.AddCardProps.placeholder
})]
})]
}));
}
});
};