react-trello
Version:
Pluggable components to add a trello like kanban board to your application
340 lines (295 loc) • 12.4 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _redux = require("redux");
var _reactRedux = require("react-redux");
var _Container = _interopRequireDefault(require("../dnd/Container"));
var _Draggable = _interopRequireDefault(require("../dnd/Draggable"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _pick = _interopRequireDefault(require("lodash/pick"));
var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
var _Lane = _interopRequireDefault(require("./Lane"));
var _reactPopopo = require("react-popopo");
var boardActions = _interopRequireWildcard(require("../actions/BoardActions"));
var laneActions = _interopRequireWildcard(require("../actions/LaneActions"));
class BoardContainer extends _react.Component {
constructor(...args) {
super(...args);
(0, _defineProperty2.default)(this, "state", {
addLaneMode: false
});
(0, _defineProperty2.default)(this, "onDragStart", ({
payload
}) => {
const handleLaneDragStart = this.props.handleLaneDragStart;
handleLaneDragStart(payload.id);
});
(0, _defineProperty2.default)(this, "onLaneDrop", ({
removedIndex,
addedIndex,
payload
}) => {
const _this$props = this.props,
actions = _this$props.actions,
handleLaneDragEnd = _this$props.handleLaneDragEnd;
if (removedIndex !== addedIndex) {
actions.moveLane({
oldIndex: removedIndex,
newIndex: addedIndex
});
handleLaneDragEnd(removedIndex, addedIndex, payload);
}
});
(0, _defineProperty2.default)(this, "getCardDetails", (laneId, cardIndex) => {
return this.props.reducerData.lanes.find(lane => lane.id === laneId).cards[cardIndex];
});
(0, _defineProperty2.default)(this, "getLaneDetails", index => {
return this.props.reducerData.lanes[index];
});
(0, _defineProperty2.default)(this, "wireEventBus", () => {
const _this$props2 = this.props,
actions = _this$props2.actions,
eventBusHandle = _this$props2.eventBusHandle;
let eventBus = {
publish: event => {
switch (event.type) {
case 'ADD_CARD':
return actions.addCard({
laneId: event.laneId,
card: event.card
});
case 'UPDATE_CARD':
return actions.updateCard({
laneId: event.laneId,
card: event.card
});
case 'REMOVE_CARD':
return actions.removeCard({
laneId: event.laneId,
cardId: event.cardId
});
case 'REFRESH_BOARD':
return actions.loadBoard(event.data);
case 'MOVE_CARD':
return actions.moveCardAcrossLanes({
fromLaneId: event.fromLaneId,
toLaneId: event.toLaneId,
cardId: event.cardId,
index: event.index
});
case 'UPDATE_CARDS':
return actions.updateCards({
laneId: event.laneId,
cards: event.cards
});
case 'UPDATE_CARD':
return actions.updateCard({
laneId: event.laneId,
updatedCard: event.card
});
case 'UPDATE_LANES':
return actions.updateLanes(event.lanes);
case 'UPDATE_LANE':
return actions.updateLane(event.lane);
}
}
};
eventBusHandle(eventBus);
});
(0, _defineProperty2.default)(this, "hideEditableLane", () => {
this.setState({
addLaneMode: false
});
});
(0, _defineProperty2.default)(this, "showEditableLane", () => {
this.setState({
addLaneMode: true
});
});
(0, _defineProperty2.default)(this, "addNewLane", params => {
this.hideEditableLane();
this.props.actions.addLane(params);
this.props.onLaneAdd(params);
});
}
componentDidMount() {
const _this$props3 = this.props,
actions = _this$props3.actions,
eventBusHandle = _this$props3.eventBusHandle;
actions.loadBoard(this.props.data);
if (eventBusHandle) {
this.wireEventBus();
}
}
UNSAFE_componentWillReceiveProps(nextProps) {
// nextProps.data changes when external Board input props change and nextProps.reducerData changes due to event bus or UI changes
const _this$props4 = this.props,
data = _this$props4.data,
reducerData = _this$props4.reducerData,
onDataChange = _this$props4.onDataChange;
if (nextProps.reducerData && !(0, _isEqual.default)(reducerData, nextProps.reducerData)) {
onDataChange(nextProps.reducerData);
}
if (nextProps.data && !(0, _isEqual.default)(nextProps.data, data)) {
this.props.actions.loadBoard(nextProps.data);
onDataChange(nextProps.data);
}
}
get groupName() {
const id = this.props.id;
return "TrelloBoard".concat(id);
}
render() {
const _this$props5 = this.props,
id = _this$props5.id,
components = _this$props5.components,
reducerData = _this$props5.reducerData,
draggable = _this$props5.draggable,
laneDraggable = _this$props5.laneDraggable,
laneDragClass = _this$props5.laneDragClass,
laneDropClass = _this$props5.laneDropClass,
style = _this$props5.style,
onDataChange = _this$props5.onDataChange,
onCardAdd = _this$props5.onCardAdd,
onCardUpdate = _this$props5.onCardUpdate,
onCardClick = _this$props5.onCardClick,
onBeforeCardDelete = _this$props5.onBeforeCardDelete,
onCardDelete = _this$props5.onCardDelete,
onLaneScroll = _this$props5.onLaneScroll,
onLaneClick = _this$props5.onLaneClick,
onLaneAdd = _this$props5.onLaneAdd,
onLaneDelete = _this$props5.onLaneDelete,
onLaneUpdate = _this$props5.onLaneUpdate,
editable = _this$props5.editable,
canAddLanes = _this$props5.canAddLanes,
laneStyle = _this$props5.laneStyle,
onCardMoveAcrossLanes = _this$props5.onCardMoveAcrossLanes,
t = _this$props5.t,
otherProps = (0, _objectWithoutProperties2.default)(_this$props5, ["id", "components", "reducerData", "draggable", "laneDraggable", "laneDragClass", "laneDropClass", "style", "onDataChange", "onCardAdd", "onCardUpdate", "onCardClick", "onBeforeCardDelete", "onCardDelete", "onLaneScroll", "onLaneClick", "onLaneAdd", "onLaneDelete", "onLaneUpdate", "editable", "canAddLanes", "laneStyle", "onCardMoveAcrossLanes", "t"]);
const addLaneMode = this.state.addLaneMode; // Stick to whitelisting attributes to segregate board and lane props
const passthroughProps = (0, _pick.default)(this.props, ['onCardMoveAcrossLanes', 'onLaneScroll', 'onLaneDelete', 'onLaneUpdate', 'onCardClick', 'onBeforeCardDelete', 'onCardDelete', 'onCardAdd', 'onCardUpdate', 'onLaneClick', 'laneSortFunction', 'draggable', 'laneDraggable', 'cardDraggable', 'collapsibleLanes', 'canAddLanes', 'hideCardDeleteIcon', 'tagStyle', 'handleDragStart', 'handleDragEnd', 'cardDragClass', 'editLaneTitle', 't']);
return _react.default.createElement(components.BoardWrapper, (0, _extends2.default)({
style: style
}, otherProps, {
draggable: false
}), _react.default.createElement(_reactPopopo.PopoverWrapper, null, _react.default.createElement(_Container.default, {
orientation: "horizontal",
onDragStart: this.onDragStart,
dragClass: laneDragClass,
dropClass: laneDropClass,
onDrop: this.onLaneDrop,
lockAxis: "x",
getChildPayload: index => this.getLaneDetails(index),
groupName: this.groupName
}, reducerData.lanes.map((lane, index) => {
const id = lane.id,
droppable = lane.droppable,
otherProps = (0, _objectWithoutProperties2.default)(lane, ["id", "droppable"]);
const laneToRender = _react.default.createElement(_Lane.default, (0, _extends2.default)({
key: id,
boardId: this.groupName,
components: components,
id: id,
getCardDetails: this.getCardDetails,
index: index,
droppable: droppable === undefined ? true : droppable,
style: laneStyle || lane.style || {},
labelStyle: lane.labelStyle || {},
cardStyle: this.props.cardStyle || lane.cardStyle,
editable: editable && !lane.disallowAddingCard
}, otherProps, passthroughProps));
return draggable && laneDraggable ? _react.default.createElement(_Draggable.default, {
key: lane.id
}, laneToRender) : laneToRender;
}))), canAddLanes && _react.default.createElement(_Container.default, {
orientation: "horizontal"
}, editable && !addLaneMode ? _react.default.createElement(components.NewLaneSection, {
t: t,
onClick: this.showEditableLane
}) : addLaneMode && _react.default.createElement(components.NewLaneForm, {
onCancel: this.hideEditableLane,
onAdd: this.addNewLane,
t: t
})));
}
}
BoardContainer.propTypes = {
id: _propTypes.default.string,
components: _propTypes.default.object,
actions: _propTypes.default.object,
data: _propTypes.default.object.isRequired,
reducerData: _propTypes.default.object,
onDataChange: _propTypes.default.func,
eventBusHandle: _propTypes.default.func,
onLaneScroll: _propTypes.default.func,
onCardClick: _propTypes.default.func,
onBeforeCardDelete: _propTypes.default.func,
onCardDelete: _propTypes.default.func,
onCardAdd: _propTypes.default.func,
onCardUpdate: _propTypes.default.func,
onLaneAdd: _propTypes.default.func,
onLaneDelete: _propTypes.default.func,
onLaneClick: _propTypes.default.func,
onLaneUpdate: _propTypes.default.func,
laneSortFunction: _propTypes.default.func,
draggable: _propTypes.default.bool,
collapsibleLanes: _propTypes.default.bool,
editable: _propTypes.default.bool,
canAddLanes: _propTypes.default.bool,
hideCardDeleteIcon: _propTypes.default.bool,
handleDragStart: _propTypes.default.func,
handleDragEnd: _propTypes.default.func,
handleLaneDragStart: _propTypes.default.func,
handleLaneDragEnd: _propTypes.default.func,
style: _propTypes.default.object,
tagStyle: _propTypes.default.object,
laneDraggable: _propTypes.default.bool,
cardDraggable: _propTypes.default.bool,
cardDragClass: _propTypes.default.string,
laneDragClass: _propTypes.default.string,
laneDropClass: _propTypes.default.string,
onCardMoveAcrossLanes: _propTypes.default.func.isRequired,
t: _propTypes.default.func.isRequired
};
BoardContainer.defaultProps = {
t: v => v,
onDataChange: () => {},
handleDragStart: () => {},
handleDragEnd: () => {},
handleLaneDragStart: () => {},
handleLaneDragEnd: () => {},
onCardUpdate: () => {},
onLaneAdd: () => {},
onLaneDelete: () => {},
onCardMoveAcrossLanes: () => {},
onLaneUpdate: () => {},
editable: false,
canAddLanes: false,
hideCardDeleteIcon: false,
draggable: false,
collapsibleLanes: false,
laneDraggable: true,
cardDraggable: true,
cardDragClass: 'react_trello_dragClass',
laneDragClass: 'react_trello_dragLaneClass',
laneDropClass: ''
};
const mapStateToProps = state => {
return state.lanes ? {
reducerData: state
} : {};
};
const mapDispatchToProps = dispatch => ({
actions: (0, _redux.bindActionCreators)((0, _objectSpread2.default)({}, boardActions, laneActions), dispatch)
});
var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(BoardContainer);
exports.default = _default;