@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
267 lines (265 loc) • 9.56 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _Icon;
var _excluded = ["children", "boardItems", "onDropAccepted", "onCreateColumn", "onCreateItem", "onUpdateColumn", "onDeleteColumn", "showCreateColumns", "showMenuColumn", "positionCreateElement", "variant", "isDragDisabled", "isDropDisabled", "customColorBorder"];
/* eslint-disable max-len */
import React from 'react';
import { DragDropContext, Droppable } from 'react-beautiful-dnd';
import { Collapse, Stack } from '@mui/material';
import { Icon } from '@iconify/react';
import { v4 } from 'uuid';
import { BoardColumn } from './components/Column';
import { reorderColumn, reorderData } from './utils/reorder/reorder';
import { Container } from './styled';
import { AddColumn } from './components/Column/styled';
import { AddElementBody } from './components/AddElementBody';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var INITIAL_STATE = {
columns: [],
columnTitles: []
};
var Board = function Board(_ref) {
var _children = _ref.children,
boardItems = _ref.boardItems,
_ref$onDropAccepted = _ref.onDropAccepted,
onDropAccepted = _ref$onDropAccepted === void 0 ? function () {
return true;
} : _ref$onDropAccepted,
onCreateColumn = _ref.onCreateColumn,
onCreateItem = _ref.onCreateItem,
onUpdateColumn = _ref.onUpdateColumn,
onDeleteColumn = _ref.onDeleteColumn,
_ref$showCreateColumn = _ref.showCreateColumns,
showCreateColumns = _ref$showCreateColumn === void 0 ? false : _ref$showCreateColumn,
_ref$showMenuColumn = _ref.showMenuColumn,
showMenuColumn = _ref$showMenuColumn === void 0 ? false : _ref$showMenuColumn,
_ref$positionCreateEl = _ref.positionCreateElement,
positionCreateElement = _ref$positionCreateEl === void 0 ? 'bottom' : _ref$positionCreateEl,
_ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? 'float' : _ref$variant,
_ref$isDragDisabled = _ref.isDragDisabled,
isDragDisabled = _ref$isDragDisabled === void 0 ? false : _ref$isDragDisabled,
_ref$isDropDisabled = _ref.isDropDisabled,
isDropDisabled = _ref$isDropDisabled === void 0 ? false : _ref$isDropDisabled,
customColorBorder = _ref.customColorBorder,
props = _objectWithoutProperties(_ref, _excluded);
var _React$useState = React.useState(INITIAL_STATE),
_React$useState2 = _slicedToArray(_React$useState, 2),
data = _React$useState2[0],
setData = _React$useState2[1];
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
isVisibility = _React$useState4[0],
setIsVisibility = _React$useState4[1];
React.useEffect(function () {
setData({
columns: boardItems,
columnTitles: boardItems.map(function (_ref2) {
var label = _ref2.label;
return label;
})
});
}, [boardItems]);
var onDragEnd = function onDragEnd(result) {
var _result$destination;
// dropped nowhere
if (!result.destination) {
return;
}
var source = result.source;
var destination = result.destination;
// did not move anywhere - can bail early
if (source.droppableId === destination.droppableId && source.index === destination.index) {
return;
}
// reordering column
if (result.type === 'COLUMN') {
var ordered = reorderColumn(data.columns, source.index, destination.index);
setData(Object.assign({}, data, {
columnTitles: ordered.map(function (_ref3) {
var label = _ref3.label;
return label;
}),
columns: ordered
}));
return;
}
var el;
data.columns.forEach(function (_ref4) {
var id = _ref4.id,
items = _ref4.items;
if (id === result.source.droppableId) {
el = items.find(function (e) {
return e.id === result.draggableId;
});
}
});
var validate = onDropAccepted({
source: result.source.droppableId,
destination: (_result$destination = result.destination) == null ? void 0 : _result$destination.droppableId,
item: result.draggableId,
element: el
});
if (validate) {
var newData = reorderData({
itemMap: data.columns,
source: source,
destination: destination
});
setData(Object.assign({}, data, {
columns: newData.itemMap
}));
}
};
var handleCreateColumn = function handleCreateColumn(text) {
var newColumn = {
id: v4(),
label: text,
items: []
};
var newData = _toConsumableArray(data.columns);
newData.push(newColumn);
var newColumnTitles = _toConsumableArray(data.columnTitles);
newColumnTitles.push(text);
setData({
columns: newData,
columnTitles: newColumnTitles
});
};
var handleCreateItem = function handleCreateItem(text, columnId) {
if (onCreateItem) {
var element = onCreateItem(text);
var newData = _toConsumableArray(data.columns.map(function (_ref5) {
var id = _ref5.id,
label = _ref5.label,
items = _ref5.items;
if (id === columnId) {
items.push(element);
return {
id: id,
label: label,
items: items
};
}
return {
id: id,
label: label,
items: items
};
}));
setData(Object.assign({}, data, {
columns: newData
}));
}
};
var handleUpdateColumn = function handleUpdateColumn(text, columnId) {
var newData = _toConsumableArray(data.columns.map(function (_ref6) {
var id = _ref6.id,
label = _ref6.label,
items = _ref6.items;
if (id === columnId) {
return {
id: id,
label: text,
items: items
};
}
return {
id: id,
label: label,
items: items
};
}));
setData({
columns: newData,
columnTitles: newData.map(function (_ref7) {
var label = _ref7.label;
return label;
})
});
if (onUpdateColumn) onUpdateColumn(text, columnId);
};
var handleDeleteColumn = function handleDeleteColumn(columnId) {
var newData = _toConsumableArray(data.columns.filter(function (item) {
return item.id !== columnId;
}));
setData({
columns: newData,
columnTitles: newData.map(function (_ref8) {
var label = _ref8.label;
return label;
})
});
if (onDeleteColumn) onDeleteColumn(columnId);
};
return /*#__PURE__*/_jsx(DragDropContext, {
onDragEnd: onDragEnd,
children: /*#__PURE__*/_jsx(Droppable, {
droppableId: "board",
type: "COLUMN",
direction: "horizontal",
isDropDisabled: isDropDisabled,
children: function children(provided) {
return /*#__PURE__*/_jsxs(Container, Object.assign({
ref: provided.innerRef
}, provided.droppableProps, {
children: [data.columnTitles.map(function (e, index) {
var _data$columns$index;
return /*#__PURE__*/_jsx(BoardColumn, {
index: index,
title: e,
counter: data.columns[index].total,
draggableId: data.columns[index].id,
onCreate: handleCreateItem,
onUpdate: handleUpdateColumn,
onDelete: handleDeleteColumn,
items: data.columns[index].items,
showCreatElements: showCreateColumns,
variant: variant,
positionCreateElement: positionCreateElement,
AddCardProps: props.AddCardProps,
menuColumnProps: props.menuColumnProps,
isDragDisabled: isDragDisabled,
showMenuColumn: showMenuColumn,
columnWidth: props.columnWidth,
customColorBorder: customColorBorder,
EntryProps: data == null || (_data$columns$index = data.columns[index]) == null ? void 0 : _data$columns$index.EntryProps,
children: _children
}, data.columns[index].id);
}), showCreateColumns && /*#__PURE__*/_jsx(AddColumn, {
children: /*#__PURE__*/_jsxs("div", {
children: [/*#__PURE__*/_jsx(Collapse, {
"in": !isVisibility,
children: /*#__PURE__*/_jsxs(Stack, {
spacing: 2,
direction: "row",
alignItems: "center",
onClick: function onClick() {
return setIsVisibility(true);
},
children: [_Icon || (_Icon = /*#__PURE__*/_jsx(Icon, {
icon: "ic:round-plus",
color: "black",
width: "20"
})), props.AddColumnProps.title]
})
}), /*#__PURE__*/_jsx(AddElementBody, {
initialState: isVisibility,
onClose: function onClose() {
return setIsVisibility(false);
},
onClick: function onClick(text) {
handleCreateColumn(text);
if (onCreateColumn) onCreateColumn(text);
},
placeholder: props.AddColumnProps.placeholder
})]
})
})]
}));
}
})
});
};
export default Board;