@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
163 lines (162 loc) • 7.61 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BoardColumn = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@iconify/react");
var _material = require("@mui/material");
var _reactBeautifulDnd = require("react-beautiful-dnd");
var _index = require("../List/index");
var _MenuColumn = require("../MenuColumn");
var _AddElementBody = require("../AddElementBody");
var _styled = require("./styled");
var _IconButtonComponent = require("../../../../components/IconButtonComponent");
var _icons = require("../../../../helpers/icons");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["items", "children", "draggableId", "onCreate", "onUpdate", "onDelete", "showCreatElements", "showMenuColumn", "isDragDisabled", "variant", "customColorBorder", "title", "index", "EntryProps", "counter"];
// eslint-disable-next-line max-len
var getFormatItems = function getFormatItems(length) {
return "(".concat(length > 10 ? length : "0".concat(length), " items)");
};
var BoardColumn = exports.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 = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
var theme = (0, _material.useTheme)();
var _React$useState = _react["default"].useState(false),
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
isVisible = _React$useState2[0],
setIsVisible = _React$useState2[1];
var _React$useState3 = _react["default"].useState(false),
_React$useState4 = (0, _slicedToArray2["default"])(_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__*/(0, _jsxRuntime.jsx)(_reactBeautifulDnd.Draggable, {
draggableId: draggableId,
index: index,
isDragDisabled: isDragDisabled,
children: function children(provided) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.Container, Object.assign({
width: props.columnWidth,
variant: variant,
ref: provided.innerRef,
customColorBorder: customColorBorder
}, provided.draggableProps, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.WrapperHeader, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.Header, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.Title, Object.assign({}, provided.dragHandleProps, {
children: [!showCollapse && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [title, ' ', counter || /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.Counter, {
children: getFormatItems(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
})]
})), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
direction: "row",
spacing: 0.5,
children: [showCreatElements && props.positionCreateElement === 'top' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButtonComponent.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__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
icon: _icons.ICONS_NAME.add,
color: theme.palette.text.primary
})
}), showMenuColumn && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuColumn.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__*/(0, _jsxRuntime.jsx)(_AddElementBody.AddElementBody, {
initialState: isVisible,
onClose: function onClose() {
return setIsVisible(false);
},
onClick: onCreateItem,
placeholder: props.AddCardProps.placeholder
})]
}), _ItemsList || (_ItemsList = /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ItemsList, {
listId: draggableId,
items: items,
EntryProps: EntryProps,
children: _children
})), showCreatElements && props.positionCreateElement === 'bottom' && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
title: props.AddCardProps.title,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButtonComponent.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__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
icon: _icons.ICONS_NAME.add,
color: theme.palette.text.primary
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AddElementBody.AddElementBody, {
initialState: isVisible,
onClose: function onClose() {
return setIsVisible(false);
},
onClick: onCreateItem,
placeholder: props.AddCardProps.placeholder
})]
})]
}));
}
});
};