getLaneDetails(index)}
>
{currentReducerData.lanes.map((lane, index) => {
const { id, droppable, ...laneOtherProps } = lane;
@@ -288,6 +296,8 @@ const BoardContainer = ({
{...laneOtherProps}
{...passThroughProps}
cards={lane.cards}
+ isDragging={isDragging}
+ isProcessing={isProcessing}
/>
);
})}
diff --git a/client/src/components/trello-board/controllers/Lane.jsx b/client/src/components/trello-board/controllers/Lane.jsx
index 4c637378d..8725cccb2 100644
--- a/client/src/components/trello-board/controllers/Lane.jsx
+++ b/client/src/components/trello-board/controllers/Lane.jsx
@@ -11,12 +11,14 @@ import { Draggable, Droppable } from "../dnd/lib";
import { Virtuoso, VirtuosoGrid } from "react-virtuoso";
import HeightPreservingItem from "../components/Lane/HeightPreservingItem.jsx";
-function Lane({
+const Lane = ({
actions,
id,
boardId,
title,
index,
+ isDragging,
+ isProcessing,
laneSortFunction,
style = {},
cardStyle = {},
@@ -51,7 +53,7 @@ function Lane({
className,
currentPage,
...otherProps
-}) {
+}) => {
const [loading, setLoading] = useState(false);
const [currentPageFinal, setCurrentPageFinal] = useState(currentPage);
const [addCardMode, setAddCardMode] = useState(false);
@@ -99,77 +101,80 @@ function Lane({
};
}, [handleScroll]);
- const sortCards = (cards, sortFunction) => {
+ const sortCards = useCallback((cards, sortFunction) => {
if (!cards) return [];
if (!sortFunction) return cards;
return cards.concat().sort((card1, card2) => sortFunction(card1, card2));
- };
+ }, []);
- const removeCard = (cardId) => {
- if (onBeforeCardDelete && typeof onBeforeCardDelete === "function") {
- onBeforeCardDelete(() => {
+ const removeCard = useCallback(
+ (cardId) => {
+ if (onBeforeCardDelete && typeof onBeforeCardDelete === "function") {
+ onBeforeCardDelete(() => {
+ onCardDelete && onCardDelete(cardId, id);
+ actions.removeCard({ laneId: id, cardId: cardId });
+ });
+ } else {
onCardDelete && onCardDelete(cardId, id);
actions.removeCard({ laneId: id, cardId: cardId });
- });
- } else {
- onCardDelete && onCardDelete(cardId, id);
- actions.removeCard({ laneId: id, cardId: cardId });
- }
- };
+ }
+ },
+ [onBeforeCardDelete, onCardDelete, actions, id]
+ );
- const handleCardClick = (e, card) => {
- onCardClick && onCardClick(card.id, card.metadata, card.laneId);
- e.stopPropagation();
- };
+ const handleCardClick = useCallback(
+ (e, card) => {
+ onCardClick && onCardClick(card.id, card.metadata, card.laneId);
+ e.stopPropagation();
+ },
+ [onCardClick]
+ );
- const showEditableCard = () => {
+ const showEditableCard = useCallback(() => {
setAddCardMode(true);
- };
+ }, []);
- const hideEditableCard = () => {
+ const hideEditableCard = useCallback(() => {
setAddCardMode(false);
- };
+ }, []);
- const addNewCard = (params) => {
- const laneId = id;
- const newCardId = v1();
- hideEditableCard();
- let card = { id: newCardId, ...params };
- actions.addCard({ laneId, card });
- onCardAdd(card, laneId);
- };
+ const addNewCard = useCallback(
+ (params) => {
+ const laneId = id;
+ const newCardId = v1();
+ hideEditableCard();
+ let card = { id: newCardId, ...params };
+ actions.addCard({ laneId, card });
+ onCardAdd(card, laneId);
+ },
+ [actions, id, onCardAdd, hideEditableCard]
+ );
- // const onDragStart = ({ payload }) => {
- // handleDragStart && handleDragStart(payload.id, payload.laneId);
- // };
+ const updateCard = useCallback(
+ (updatedCard) => {
+ actions.updateCard({ laneId: id, card: updatedCard });
+ onCardUpdate(id, updatedCard);
+ },
+ [actions, id, onCardUpdate]
+ );
- // const shouldAcceptDrop = (sourceContainerOptions) => {
- // return droppable && sourceContainerOptions.groupName === groupName;
- // };
-
- const updateCard = (updatedCard) => {
- actions.updateCard({ laneId: id, card: updatedCard });
- onCardUpdate(id, updatedCard);
- };
-
- const removeLane = () => {
+ const removeLane = useCallback(() => {
actions.removeLane({ laneId: id });
onLaneDelete(id);
- };
+ }, [actions, id, onLaneDelete]);
- const updateTitle = (value) => {
- actions.updateLane({ id, title: value });
- onLaneUpdate(id, { title: value });
- };
+ const updateTitle = useCallback(
+ (value) => {
+ actions.updateLane({ id, title: value });
+ onLaneUpdate(id, { title: value });
+ },
+ [actions, id, onLaneUpdate]
+ );
- const toggleLaneCollapsed = () => {
+ const toggleLaneCollapsed = useCallback(() => {
collapsibleLanes && setCollapsed(!collapsed);
- };
+ }, [collapsibleLanes, collapsed]);
- /**
- * Card component
- * @type {React.NamedExoticComponent<{readonly item?: *, readonly provided?: *, readonly isDragging?: *}>}
- */
const Card = React.memo(({ provided, item: card, isDragging }) => {
const onDeleteCard = () => removeCard(card.id);
return (
@@ -210,27 +215,16 @@ function Lane({
);
- /**
- * Render the add card link
- * @returns {false|React.JSX.Element}
- */
- const renderAddCardLink = () =>
- editable && !addCardMode && ;
+ const renderAddCardLink = useCallback(
+ () => editable && !addCardMode && ,
+ [editable, addCardMode, showEditableCard, id]
+ );
- /**
- * Render the new card form
- * @returns {false|React.JSX.Element}
- */
- const renderNewCardForm = () =>
- addCardMode && ;
+ const renderNewCardForm = useCallback(
+ () => addCardMode && ,
+ [addCardMode, hideEditableCard, addNewCard, id]
+ );
- /**
- * Wrapper for the item in the grid layout
- * @param children
- * @param props
- * @returns {React.JSX.Element}
- * @constructor
- */
const ItemWrapper = ({ children, ...props }) => (
{renderHeader({ id, cards, ...passedProps })}
{renderDragContainer()}
- {/*{renderDragContainer(isDraggingOver)}*/}
{loading && }
{showFooter && }
);
-}
+};
Lane.propTypes = {
actions: PropTypes.object,
diff --git a/client/src/components/trello-board/helpers/LaneHelper.js b/client/src/components/trello-board/helpers/LaneHelper.js
index 501a09019..69b9edb52 100644
--- a/client/src/components/trello-board/helpers/LaneHelper.js
+++ b/client/src/components/trello-board/helpers/LaneHelper.js
@@ -100,8 +100,6 @@ const LaneHelper = {
// Clone the state to avoid mutation
const newLanes = cloneDeep(state.lanes);
- console.dir({ fromLaneId, toLaneId, cardId, index });
-
// Find the source and destination lanes using the lane IDs
const fromLane = newLanes.find((lane) => lane.id === fromLaneId);
const toLane = newLanes.find((lane) => lane.id === toLaneId);
diff --git a/client/src/components/trello-board/styles/Base.js b/client/src/components/trello-board/styles/Base.js
index dd8d9683c..775e9589d 100644
--- a/client/src/components/trello-board/styles/Base.js
+++ b/client/src/components/trello-board/styles/Base.js
@@ -81,6 +81,9 @@ export const StyleHorizontal = styled.div`
.react-trello-lane.lane-collapsed {
min-height: 15px;
}
+ .ant-card-body {
+ padding: 4px;
+ }
`;
export const StyleVertical = styled.div`
@@ -98,6 +101,7 @@ export const StyleVertical = styled.div`
.react-trello-card {
flex: 0 1 auto;
+ min-width: 120px;
}
.react-trello-board {
@@ -109,6 +113,9 @@ export const StyleVertical = styled.div`
.grid-item {
}
+
+ .ant-card-body {
+ }
`;
export const CustomPopoverContainer = styled(PopoverContainer)`
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index b2e9d344d..a60b8c1b5 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -2719,6 +2719,16 @@
}
},
"production": {
+ "settings": {
+ "layout": "Layout",
+ "information": "Information",
+ "board_settings": "Board Settings",
+ "tabs": {
+ "card": "Card",
+ "board": "Board",
+ "lane": "Lane"
+ }
+ },
"actions": {
"addcolumns": "Add Columns",
"bodypriority-clear": "Clear Body Priority",