admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Documentation and Vertical Lane Padding

Browse Source 
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-05-23 16:07:04 -04:00
parent dc0147c5f9
commit c25714b68e
3 changed files with 95 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
client/src/components/trello-board/controllers/BoardContainer.jsx
View File

@@ -1,4 +1,4 @@
import React, { useState, useEffect, useCallback } from "react";
import React, { useCallback, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import Container from "../dnd/Container";
import Draggable from "../dnd/Draggable";
@@ -9,6 +9,44 @@ import Lane from "./Lane";
import { PopoverWrapper } from "react-popopo";
import * as actions from "../../../redux/trello/trello.actions.js";
/**
* BoardContainer is a React component that represents a Trello-like board.
* It uses Redux for state management and provides a variety of props to customize its behavior.
*
* @component
* @param {Object} props - Component props
* @param {string} props.id - The unique identifier for the board
* @param {Object} props.components - Custom components to use in the board
* @param {Object} props.data - The initial data for the board
* @param {boolean} props.draggable - Whether the board is draggable
* @param {boolean} props.laneDraggable - Whether the lanes in the board are draggable
* @param {string} props.laneDragClass - The CSS class to apply when a lane is being dragged
* @param {string} props.laneDropClass - The CSS class to apply when a lane is dropped
* @param {Object} props.style - The CSS styles to apply to the board
* @param {Function} props.onDataChange - Callback function when the board data changes
* @param {Function} props.onCardAdd - Callback function when a card is added
* @param {Function} props.onCardUpdate - Callback function when a card is updated
* @param {Function} props.onCardClick - Callback function when a card is clicked
* @param {Function} props.onBeforeCardDelete - Callback function before a card is deleted
* @param {Function} props.onCardDelete - Callback function when a card is deleted
* @param {Function} props.onLaneScroll - Callback function when a lane is scrolled
* @param {Function} props.onLaneClick - Callback function when a lane is clicked
* @param {Function} props.onLaneAdd - Callback function when a lane is added
* @param {Function} props.onLaneDelete - Callback function when a lane is deleted
* @param {Function} props.onLaneUpdate - Callback function when a lane is updated
* @param {boolean} props.editable - Whether the board is editable
* @param {boolean} props.canAddLanes - Whether lanes can be added to the board
* @param {Object} props.laneStyle - The CSS styles to apply to the lanes
* @param {Function} props.onCardMoveAcrossLanes - Callback function when a card is moved across lanes
* @param {string} props.orientation - The orientation of the board ("horizontal" or "vertical")
* @param {Function} props.eventBusHandle - Function to handle events from the event bus
* @param {Function} props.handleLaneDragStart - Callback function when a lane drag starts
* @param {Function} props.handleLaneDragEnd - Callback function when a lane drag ends
* @param {Object} props.reducerData - The initial data for the Redux reducer
* @param {Object} props.cardStyle - The CSS styles to apply to the cards
* @param {Object} props.otherProps - Any other props to pass to the board
* @returns {JSX.Element} A Trello-like board
*/
const BoardContainer = ({
id,
components,