Board Container and Lane, the last remaining class components are now functional components utilizing up to date react stuff, defaultProps deprecation fixed (rolled into function decleration)
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
@@ -9,42 +9,42 @@ import Lane from "./Lane";
|
||||
import { PopoverWrapper } from "react-popopo";
|
||||
import * as actions from "../../../redux/trello/trello.actions.js";
|
||||
|
||||
const BoardContainer = (props) => {
|
||||
const BoardContainer = ({
|
||||
id,
|
||||
components,
|
||||
data,
|
||||
draggable = false,
|
||||
laneDraggable = true,
|
||||
laneDragClass = "react_trello_dragLaneClass",
|
||||
laneDropClass = "react_trello_dragLaneDropClass",
|
||||
style,
|
||||
onDataChange = () => {},
|
||||
onCardAdd = () => {},
|
||||
onCardUpdate = () => {},
|
||||
onCardClick = () => {},
|
||||
onBeforeCardDelete = () => {},
|
||||
onCardDelete = () => {},
|
||||
onLaneScroll = () => {},
|
||||
onLaneClick = () => {},
|
||||
onLaneAdd = () => {},
|
||||
onLaneDelete = () => {},
|
||||
onLaneUpdate = () => {},
|
||||
editable = false,
|
||||
canAddLanes = false,
|
||||
laneStyle,
|
||||
onCardMoveAcrossLanes = () => {},
|
||||
orientation = "horizontal",
|
||||
eventBusHandle,
|
||||
handleLaneDragStart = () => {},
|
||||
handleLaneDragEnd = () => {},
|
||||
reducerData,
|
||||
cardStyle,
|
||||
...otherProps
|
||||
}) => {
|
||||
const [addLaneMode, setAddLaneMode] = useState(false);
|
||||
|
||||
const {
|
||||
id,
|
||||
components,
|
||||
data,
|
||||
draggable,
|
||||
laneDraggable,
|
||||
laneDragClass,
|
||||
laneDropClass,
|
||||
style,
|
||||
onDataChange,
|
||||
onCardAdd,
|
||||
onCardUpdate,
|
||||
onCardClick,
|
||||
onBeforeCardDelete,
|
||||
onCardDelete,
|
||||
onLaneScroll,
|
||||
onLaneClick,
|
||||
onLaneAdd,
|
||||
onLaneDelete,
|
||||
onLaneUpdate,
|
||||
editable,
|
||||
canAddLanes,
|
||||
laneStyle,
|
||||
onCardMoveAcrossLanes,
|
||||
orientation,
|
||||
eventBusHandle,
|
||||
handleLaneDragStart,
|
||||
handleLaneDragEnd,
|
||||
...otherProps
|
||||
} = props;
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const reducerData = useSelector((state) => (state.trello.lanes ? state.trello : {}));
|
||||
const currentReducerData = useSelector((state) => (state.trello.lanes ? state.trello : {}));
|
||||
|
||||
const groupName = `TrelloBoard${id}`;
|
||||
|
||||
@@ -91,10 +91,10 @@ const BoardContainer = (props) => {
|
||||
}, [data, eventBusHandle, dispatch, wireEventBus]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isEqual(reducerData, props.reducerData)) {
|
||||
onDataChange(reducerData);
|
||||
if (!isEqual(currentReducerData, reducerData)) {
|
||||
onDataChange(currentReducerData);
|
||||
}
|
||||
}, [reducerData, props.reducerData, onDataChange]);
|
||||
}, [currentReducerData, reducerData, onDataChange]);
|
||||
|
||||
const onDragStart = useCallback(
|
||||
({ payload }) => {
|
||||
@@ -115,16 +115,16 @@ const BoardContainer = (props) => {
|
||||
|
||||
const getCardDetails = useCallback(
|
||||
(laneId, cardIndex) => {
|
||||
return reducerData.lanes.find((lane) => lane.id === laneId).cards[cardIndex];
|
||||
return currentReducerData.lanes.find((lane) => lane.id === laneId).cards[cardIndex];
|
||||
},
|
||||
[reducerData]
|
||||
[currentReducerData]
|
||||
);
|
||||
|
||||
const getLaneDetails = useCallback(
|
||||
(index) => {
|
||||
return reducerData.lanes[index];
|
||||
return currentReducerData.lanes[index];
|
||||
},
|
||||
[reducerData]
|
||||
[currentReducerData]
|
||||
);
|
||||
|
||||
const hideEditableLane = () => {
|
||||
@@ -141,31 +141,65 @@ const BoardContainer = (props) => {
|
||||
onLaneAdd(params);
|
||||
};
|
||||
|
||||
const passThroughProps = pick(props, [
|
||||
"onCardMoveAcrossLanes",
|
||||
"onLaneScroll",
|
||||
"onLaneDelete",
|
||||
"onLaneUpdate",
|
||||
"onCardClick",
|
||||
"onBeforeCardDelete",
|
||||
"onCardDelete",
|
||||
"onCardAdd",
|
||||
"onCardUpdate",
|
||||
"onLaneClick",
|
||||
"laneSortFunction",
|
||||
"draggable",
|
||||
"laneDraggable",
|
||||
"cardDraggable",
|
||||
"collapsibleLanes",
|
||||
"canAddLanes",
|
||||
"hideCardDeleteIcon",
|
||||
"tagStyle",
|
||||
"handleDragStart",
|
||||
"handleDragEnd",
|
||||
"cardDragClass",
|
||||
"editLaneTitle",
|
||||
"orientation"
|
||||
]);
|
||||
const passThroughProps = pick(
|
||||
{
|
||||
id,
|
||||
components,
|
||||
data,
|
||||
draggable,
|
||||
laneDraggable,
|
||||
laneDragClass,
|
||||
laneDropClass,
|
||||
style,
|
||||
onDataChange,
|
||||
onCardAdd,
|
||||
onCardUpdate,
|
||||
onCardClick,
|
||||
onBeforeCardDelete,
|
||||
onCardDelete,
|
||||
onLaneScroll,
|
||||
onLaneClick,
|
||||
onLaneAdd,
|
||||
onLaneDelete,
|
||||
onLaneUpdate,
|
||||
editable,
|
||||
canAddLanes,
|
||||
laneStyle,
|
||||
onCardMoveAcrossLanes,
|
||||
orientation,
|
||||
eventBusHandle,
|
||||
handleLaneDragStart,
|
||||
handleLaneDragEnd,
|
||||
reducerData,
|
||||
cardStyle,
|
||||
...otherProps
|
||||
},
|
||||
[
|
||||
"onCardMoveAcrossLanes",
|
||||
"onLaneScroll",
|
||||
"onLaneDelete",
|
||||
"onLaneUpdate",
|
||||
"onCardClick",
|
||||
"onBeforeCardDelete",
|
||||
"onCardDelete",
|
||||
"onCardAdd",
|
||||
"onCardUpdate",
|
||||
"onLaneClick",
|
||||
"laneSortFunction",
|
||||
"draggable",
|
||||
"laneDraggable",
|
||||
"cardDraggable",
|
||||
"collapsibleLanes",
|
||||
"canAddLanes",
|
||||
"hideCardDeleteIcon",
|
||||
"tagStyle",
|
||||
"handleDragStart",
|
||||
"handleDragEnd",
|
||||
"cardDragClass",
|
||||
"editLaneTitle",
|
||||
"orientation"
|
||||
]
|
||||
);
|
||||
|
||||
return (
|
||||
<components.BoardWrapper style={style} orientation={orientation} draggable={false}>
|
||||
@@ -180,8 +214,8 @@ const BoardContainer = (props) => {
|
||||
getChildPayload={(index) => getLaneDetails(index)}
|
||||
groupName={groupName}
|
||||
>
|
||||
{reducerData.lanes.map((lane, index) => {
|
||||
const { id, droppable, ...otherProps } = lane;
|
||||
{currentReducerData.lanes.map((lane, index) => {
|
||||
const { id, droppable, ...laneOtherProps } = lane;
|
||||
const laneToRender = (
|
||||
<Lane
|
||||
key={id}
|
||||
@@ -193,9 +227,9 @@ const BoardContainer = (props) => {
|
||||
droppable={droppable === undefined ? true : droppable}
|
||||
style={laneStyle || lane.style || {}}
|
||||
labelStyle={lane.labelStyle || {}}
|
||||
cardStyle={props.cardStyle || lane.cardStyle}
|
||||
cardStyle={cardStyle || lane.cardStyle}
|
||||
editable={editable && !lane.disallowAddingCard}
|
||||
{...otherProps}
|
||||
{...laneOtherProps}
|
||||
{...passThroughProps}
|
||||
/>
|
||||
);
|
||||
@@ -251,32 +285,9 @@ BoardContainer.propTypes = {
|
||||
cardDragClass: PropTypes.string,
|
||||
laneDragClass: PropTypes.string,
|
||||
laneDropClass: PropTypes.string,
|
||||
onCardMoveAcrossLanes: PropTypes.func.isRequired,
|
||||
orientation: PropTypes.string
|
||||
};
|
||||
|
||||
BoardContainer.defaultProps = {
|
||||
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: "react_trello_dragLaneDropClass",
|
||||
orientation: "horizontal"
|
||||
onCardMoveAcrossLanes: PropTypes.func,
|
||||
orientation: PropTypes.string,
|
||||
cardStyle: PropTypes.object
|
||||
};
|
||||
|
||||
export default BoardContainer;
|
||||
|
||||
Reference in New Issue
Block a user