@parkassist/pa-ui-library
Version:
INX Platform elements
164 lines • 6.71 kB
JavaScript
var __rest = this && this.__rest || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useEffect, useState } from "react";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import { Column, Row } from "../Layout/Flex";
import { ItemContainer, ItemContainerCopy, ListContainer, PlaceHolderContainer } from "./components/Containers";
import styled from 'styled-components';
import Palette from '../../constants/Palette';
import FontStyles from '../../constants/FontStyles';
const Container = styled.div(() => ({
display: 'flex',
width: '100%',
gap: '12px'
}));
const getSeparatorText = isDefault => isDefault ? 'THEN' : 'OR';
const getColumnNumber = columnId => Number(columnId.split('-')[1]);
export default function DragDropList(_a) {
var {
reorderedList,
placeholderComponent,
numColumns = 1,
canCombine = false,
onChange = () => null
} = _a,
props = __rest(_a, ["reorderedList", "placeholderComponent", "numColumns", "canCombine", "onChange"]);
const [itemList, setItemList] = useState(props.items);
const [isDraggingDraftDefault, setIsDraggingDraftDefault] = useState(false);
useEffect(() => {
setItemList(props.items);
}, [props.items]);
const handleDrop = ({
destination,
source,
combine
}) => {
setIsDraggingDraftDefault(false);
const nStartColumn = getColumnNumber(source.droppableId);
const startColumn = numColumns > 1 ? itemList.filter(i => i.column === nStartColumn) : itemList;
if (combine && numColumns > 1) {
const newDefault = startColumn.find((_, i) => i + 1 !== source.index);
if (!newDefault.draftDefault) {
return;
}
const newList = itemList.map(i => {
if (i.default && i.id.toString() === combine.draggableId) {
return Object.assign(Object.assign({}, newDefault), {
order: i.order,
column: 1,
default: true,
id: i.id
});
}
return i;
});
setItemList(newList);
reorderedList(newList);
return;
}
if (!destination || destination.droppableId === source.droppableId && destination.index === source.index) {
return;
}
const nFinishColumn = getColumnNumber(destination.droppableId);
const sameColumn = nStartColumn === nFinishColumn;
const updatedStartList = [...startColumn];
const updatedFinishList = sameColumn ? updatedStartList : [...itemList.filter(i => i.column === nFinishColumn)];
if (nFinishColumn === 1 && destination.index === (sameColumn ? updatedFinishList.length - 1 : updatedFinishList.length)) {
return;
}
const [reorderedItem] = updatedStartList.splice(source.index, 1);
if (reorderedItem.draftDefault) {
return;
}
updatedFinishList.splice(destination.index, 0, sameColumn ? reorderedItem : Object.assign(Object.assign({}, reorderedItem), {
column: nFinishColumn
}));
let restList = [];
if (numColumns > 1 && sameColumn) {
restList = itemList.filter(i => i.column !== nStartColumn);
}
const newList = updatedStartList.concat(restList, !sameColumn ? updatedFinishList : []);
setItemList(newList);
reorderedList(newList);
};
const handleDrag = ({
draggableId,
source
}) => {
const nStartColumn = getColumnNumber(source.droppableId);
if (nStartColumn > 1) {
const item = itemList.find(r => r.id.toString() === draggableId);
setIsDraggingDraftDefault(item.draftDefault);
}
};
return _jsx(Column, {
style: {
width: '100%'
},
children: _jsx(DragDropContext, {
onChange: onChange,
onDragEnd: handleDrop,
onDragStart: handleDrag,
children: _jsx(Container, {
children: [...Array(numColumns)].map((_, nCol) => {
const listToIterate = numColumns > 1 ? itemList.filter(i => (i === null || i === void 0 ? void 0 : i.column) === nCol + 1) : itemList;
const isFirstColumn = nCol === 0;
return _jsx(Column, {
style: {
width: '100%'
},
children: _jsx(Droppable, {
droppableId: `column-${nCol + 1}`,
isCombineEnabled: canCombine && numColumns > 1 && isFirstColumn,
children: (provided, snapshot) => _jsxs(ListContainer, {
dndProps: provided,
showBorder: nCol + 1 < numColumns,
children: [nCol > 0 && _jsx(PlaceHolderContainer, {
isDraggingOver: snapshot.isDraggingOver,
children: placeholderComponent
}), listToIterate.map((item, index) => _jsxs(_Fragment, {
children: [index > 0 && _jsx(Row, {
style: {
color: Palette.DARK_GREY,
font: FontStyles.BUTTON_FONT,
justifyContent: 'center',
margin: isFirstColumn ? '4px' : '14px'
},
children: isFirstColumn ? getSeparatorText(item.default) : ''
}), _jsx(Draggable, {
draggableId: item.id.toString(),
index: index,
isDragDisabled: item.default,
children: (provided, snapshot) => {
const canCopyItem = nCol > 0 && item.draftDefault && snapshot.isDragging;
return _jsxs(_Fragment, {
children: [_jsx(ItemContainer, {
itemDefault: item.default,
dndProps: provided,
showNumber: isFirstColumn,
index: index + 1,
shouldHighlight: item.new,
showOpacity: isDraggingDraftDefault && !item.default && !snapshot.isDragging,
children: item.component
}), canCopyItem && _jsx(ItemContainerCopy, {
children: item.component
})]
});
}
}, item.id.toString())]
})), provided.placeholder]
})
})
});
})
})
})
});
}