Introduce React-Trello in place of React-Kanban
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
328
client/src/components/trello-board/controllers/Lane.jsx
Normal file
328
client/src/components/trello-board/controllers/Lane.jsx
Normal file
@@ -0,0 +1,328 @@
|
||||
import React, { Component } from "react";
|
||||
import classNames from "classnames";
|
||||
import PropTypes from "prop-types";
|
||||
import { bindActionCreators } from "redux";
|
||||
import { connect } from "react-redux";
|
||||
import isEqual from "lodash/isEqual";
|
||||
import cloneDeep from "lodash/cloneDeep";
|
||||
import { v1 } from "uuid";
|
||||
|
||||
import Container from "../dnd/Container.jsx";
|
||||
import Draggable from "../dnd/Draggable.jsx";
|
||||
|
||||
import * as actions from "../../../redux/trello/trello.actions.js";
|
||||
|
||||
class Lane extends Component {
|
||||
state = {
|
||||
loading: false,
|
||||
currentPage: this.props.currentPage,
|
||||
addCardMode: false,
|
||||
collapsed: false,
|
||||
isDraggingOver: false
|
||||
};
|
||||
|
||||
get groupName() {
|
||||
const { boardId } = this.props;
|
||||
return `TrelloBoard${boardId}Lane`;
|
||||
}
|
||||
|
||||
handleScroll = (evt) => {
|
||||
const node = evt.target;
|
||||
const elemScrollPosition = node.scrollHeight - node.scrollTop - node.clientHeight;
|
||||
const { onLaneScroll } = this.props;
|
||||
// In some browsers and/or screen sizes a decimal rest value between 0 and 1 exists, so it should be checked on < 1 instead of < 0
|
||||
if (elemScrollPosition < 1 && onLaneScroll && !this.state.loading) {
|
||||
const { currentPage } = this.state;
|
||||
this.setState({ loading: true });
|
||||
const nextPage = currentPage + 1;
|
||||
onLaneScroll(nextPage, this.props.id).then((moreCards) => {
|
||||
if ((moreCards || []).length > 0) {
|
||||
this.props.actions.paginateLane({
|
||||
laneId: this.props.id,
|
||||
newCards: moreCards,
|
||||
nextPage: nextPage
|
||||
});
|
||||
}
|
||||
this.setState({ loading: false });
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
sortCards(cards, sortFunction) {
|
||||
if (!cards) return [];
|
||||
if (!sortFunction) return cards;
|
||||
return cards.concat().sort(function (card1, card2) {
|
||||
return sortFunction(card1, card2);
|
||||
});
|
||||
}
|
||||
|
||||
laneDidMount = (node) => {
|
||||
if (node) {
|
||||
node.addEventListener("scroll", this.handleScroll);
|
||||
}
|
||||
};
|
||||
|
||||
UNSAFE_componentWillReceiveProps(nextProps) {
|
||||
if (!isEqual(this.props.cards, nextProps.cards)) {
|
||||
this.setState({
|
||||
currentPage: nextProps.currentPage
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
removeCard = (cardId) => {
|
||||
if (this.props.onBeforeCardDelete && typeof this.props.onBeforeCardDelete === "function") {
|
||||
this.props.onBeforeCardDelete(() => {
|
||||
this.props.onCardDelete && this.props.onCardDelete(cardId, this.props.id);
|
||||
this.props.actions.removeCard({ laneId: this.props.id, cardId: cardId });
|
||||
});
|
||||
} else {
|
||||
this.props.onCardDelete && this.props.onCardDelete(cardId, this.props.id);
|
||||
this.props.actions.removeCard({ laneId: this.props.id, cardId: cardId });
|
||||
}
|
||||
};
|
||||
|
||||
handleCardClick = (e, card) => {
|
||||
const { onCardClick } = this.props;
|
||||
onCardClick && onCardClick(card.id, card.metadata, card.laneId);
|
||||
e.stopPropagation();
|
||||
};
|
||||
|
||||
showEditableCard = () => {
|
||||
this.setState({ addCardMode: true });
|
||||
};
|
||||
|
||||
hideEditableCard = () => {
|
||||
this.setState({ addCardMode: false });
|
||||
};
|
||||
|
||||
addNewCard = (params) => {
|
||||
const laneId = this.props.id;
|
||||
const id = v1();
|
||||
this.hideEditableCard();
|
||||
let card = { id, ...params };
|
||||
this.props.actions.addCard({ laneId, card });
|
||||
this.props.onCardAdd(card, laneId);
|
||||
};
|
||||
|
||||
onDragStart = ({ payload }) => {
|
||||
const { handleDragStart } = this.props;
|
||||
handleDragStart && handleDragStart(payload.id, payload.laneId);
|
||||
};
|
||||
|
||||
shouldAcceptDrop = (sourceContainerOptions) => {
|
||||
return this.props.droppable && sourceContainerOptions.groupName === this.groupName;
|
||||
};
|
||||
|
||||
onDragEnd = (laneId, result) => {
|
||||
const { handleDragEnd } = this.props;
|
||||
const { addedIndex, payload } = result;
|
||||
|
||||
if (this.state.isDraggingOver) {
|
||||
this.setState({ isDraggingOver: false });
|
||||
}
|
||||
|
||||
if (addedIndex != null) {
|
||||
const newCard = { ...cloneDeep(payload), laneId };
|
||||
const response = handleDragEnd ? handleDragEnd(payload.id, payload.laneId, laneId, addedIndex, newCard) : true;
|
||||
if (response === undefined || !!response) {
|
||||
this.props.actions.moveCardAcrossLanes({
|
||||
fromLaneId: payload.laneId,
|
||||
toLaneId: laneId,
|
||||
cardId: payload.id,
|
||||
index: addedIndex
|
||||
});
|
||||
this.props.onCardMoveAcrossLanes(payload.laneId, laneId, payload.id, addedIndex);
|
||||
}
|
||||
return response;
|
||||
}
|
||||
};
|
||||
|
||||
updateCard = (updatedCard) => {
|
||||
this.props.actions.updateCard({ laneId: this.props.id, card: updatedCard });
|
||||
this.props.onCardUpdate(this.props.id, updatedCard);
|
||||
};
|
||||
|
||||
renderDragContainer = (isDraggingOver) => {
|
||||
const {
|
||||
id,
|
||||
cards,
|
||||
laneSortFunction,
|
||||
editable,
|
||||
hideCardDeleteIcon,
|
||||
cardDraggable,
|
||||
cardDragClass,
|
||||
cardDropClass,
|
||||
tagStyle,
|
||||
cardStyle,
|
||||
components,
|
||||
t
|
||||
} = this.props;
|
||||
const { addCardMode, collapsed } = this.state;
|
||||
|
||||
const showableCards = collapsed ? [] : cards;
|
||||
|
||||
const cardList = this.sortCards(showableCards, laneSortFunction).map((card, idx) => {
|
||||
const onDeleteCard = () => this.removeCard(card.id);
|
||||
const cardToRender = (
|
||||
<components.Card
|
||||
key={card.id}
|
||||
index={idx}
|
||||
style={card.style || cardStyle}
|
||||
className="react-trello-card"
|
||||
onDelete={onDeleteCard}
|
||||
onClick={(e) => this.handleCardClick(e, card)}
|
||||
onChange={(updatedCard) => this.updateCard(updatedCard)}
|
||||
showDeleteButton={!hideCardDeleteIcon}
|
||||
tagStyle={tagStyle}
|
||||
cardDraggable={cardDraggable}
|
||||
editable={editable}
|
||||
{...card}
|
||||
/>
|
||||
);
|
||||
return cardDraggable && (!card.hasOwnProperty("draggable") || card.draggable) ? (
|
||||
<Draggable key={card.id}>{cardToRender}</Draggable>
|
||||
) : (
|
||||
<span key={card.id}>{cardToRender}</span>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<components.ScrollableLane ref={this.laneDidMount} isDraggingOver={isDraggingOver}>
|
||||
<Container
|
||||
orientation="vertical"
|
||||
groupName={this.groupName}
|
||||
dragClass={cardDragClass}
|
||||
dropClass={cardDropClass}
|
||||
onDragStart={this.onDragStart}
|
||||
onDrop={(e) => this.onDragEnd(id, e)}
|
||||
onDragEnter={() => this.setState({ isDraggingOver: true })}
|
||||
onDragLeave={() => this.setState({ isDraggingOver: false })}
|
||||
shouldAcceptDrop={this.shouldAcceptDrop}
|
||||
getChildPayload={(index) => this.props.getCardDetails(id, index)}
|
||||
>
|
||||
{cardList}
|
||||
</Container>
|
||||
{editable && !addCardMode && <components.AddCardLink onClick={this.showEditableCard} laneId={id} />}
|
||||
{addCardMode && <components.NewCardForm onCancel={this.hideEditableCard} laneId={id} onAdd={this.addNewCard} />}
|
||||
</components.ScrollableLane>
|
||||
);
|
||||
};
|
||||
|
||||
removeLane = () => {
|
||||
const { id } = this.props;
|
||||
this.props.actions.removeLane({ laneId: id });
|
||||
this.props.onLaneDelete(id);
|
||||
};
|
||||
|
||||
updateTitle = (value) => {
|
||||
this.props.actions.updateLane({ id: this.props.id, title: value });
|
||||
this.props.onLaneUpdate(this.props.id, { title: value });
|
||||
};
|
||||
|
||||
renderHeader = (pickedProps) => {
|
||||
const { components } = this.props;
|
||||
return (
|
||||
<components.LaneHeader
|
||||
{...pickedProps}
|
||||
onDelete={this.removeLane}
|
||||
onDoubleClick={this.toggleLaneCollapsed}
|
||||
updateTitle={this.updateTitle}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
toggleLaneCollapsed = () => {
|
||||
this.props.collapsibleLanes && this.setState((state) => ({ collapsed: !state.collapsed }));
|
||||
};
|
||||
|
||||
render() {
|
||||
const { loading, isDraggingOver, collapsed } = this.state;
|
||||
const {
|
||||
id,
|
||||
cards,
|
||||
collapsibleLanes,
|
||||
components,
|
||||
onLaneClick,
|
||||
onLaneScroll,
|
||||
onCardClick,
|
||||
onCardAdd,
|
||||
onBeforeCardDelete,
|
||||
onCardDelete,
|
||||
onLaneDelete,
|
||||
onLaneUpdate,
|
||||
onCardUpdate,
|
||||
onCardMoveAcrossLanes,
|
||||
...otherProps
|
||||
} = this.props;
|
||||
const allClassNames = classNames("react-trello-lane", this.props.className || "");
|
||||
const showFooter = collapsibleLanes && cards.length > 0;
|
||||
return (
|
||||
<components.Section
|
||||
{...otherProps}
|
||||
key={id}
|
||||
onClick={() => onLaneClick && onLaneClick(id)}
|
||||
draggable={false}
|
||||
className={allClassNames}
|
||||
>
|
||||
{this.renderHeader({ id, cards, ...otherProps })}
|
||||
{this.renderDragContainer(isDraggingOver)}
|
||||
{loading && <components.Loader />}
|
||||
{showFooter && <components.LaneFooter onClick={this.toggleLaneCollapsed} collapsed={collapsed} />}
|
||||
</components.Section>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Lane.propTypes = {
|
||||
actions: PropTypes.object,
|
||||
id: PropTypes.string.isRequired,
|
||||
boardId: PropTypes.string,
|
||||
title: PropTypes.node,
|
||||
index: PropTypes.number,
|
||||
laneSortFunction: PropTypes.func,
|
||||
style: PropTypes.object,
|
||||
cardStyle: PropTypes.object,
|
||||
tagStyle: PropTypes.object,
|
||||
titleStyle: PropTypes.object,
|
||||
labelStyle: PropTypes.object,
|
||||
cards: PropTypes.array,
|
||||
label: PropTypes.string,
|
||||
currentPage: PropTypes.number,
|
||||
draggable: PropTypes.bool,
|
||||
collapsibleLanes: PropTypes.bool,
|
||||
droppable: PropTypes.bool,
|
||||
onCardMoveAcrossLanes: PropTypes.func,
|
||||
onCardClick: PropTypes.func,
|
||||
onBeforeCardDelete: PropTypes.func,
|
||||
onCardDelete: PropTypes.func,
|
||||
onCardAdd: PropTypes.func,
|
||||
onCardUpdate: PropTypes.func,
|
||||
onLaneDelete: PropTypes.func,
|
||||
onLaneUpdate: PropTypes.func,
|
||||
onLaneClick: PropTypes.func,
|
||||
onLaneScroll: PropTypes.func,
|
||||
editable: PropTypes.bool,
|
||||
laneDraggable: PropTypes.bool,
|
||||
cardDraggable: PropTypes.bool,
|
||||
cardDragClass: PropTypes.string,
|
||||
cardDropClass: PropTypes.string,
|
||||
canAddLanes: PropTypes.bool
|
||||
};
|
||||
|
||||
Lane.defaultProps = {
|
||||
style: {},
|
||||
titleStyle: {},
|
||||
labelStyle: {},
|
||||
label: undefined,
|
||||
editable: false,
|
||||
onLaneUpdate: () => {},
|
||||
onCardAdd: () => {},
|
||||
onCardUpdate: () => {}
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
actions: bindActionCreators(actions, dispatch)
|
||||
});
|
||||
|
||||
export default connect(null, mapDispatchToProps)(Lane);
|
||||
Reference in New Issue
Block a user