Progress Commit

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/trello-board/controllers/Board.jsx

@@ -3,15 +3,22 @@ import classNames from "classnames";
 import { useState } from "react";
 import { v1 } from "uuid";
 
-const Board = ({ id, className, components, ...additionalProps }) => {
+const Board = ({ id, className, components, orientation, ...additionalProps }) => {
   const [storeId] = useState(id || v1());
 
   const allClassNames = classNames("react-trello-board", className || "");
 
+  const Styles = orientation === "horizontal" ? components.GlobalStyleHorizontal : components.GlobalStyleVertical;
   return (
     <>
-      <components.GlobalStyle />
-      <BoardContainer components={components} {...additionalProps} id={storeId} className={allClassNames} />
+      <Styles />
+      <BoardContainer
+        components={components}
+        orientation={orientation}
+        {...additionalProps}
+        id={storeId}
+        className={allClassNames}
+      />
     </>
   );
 };

client/src/components/trello-board/controllers/BoardContainer.jsx

@@ -141,12 +141,13 @@ class BoardContainer extends Component {
       laneStyle,
       onCardMoveAcrossLanes,
       t,
+      orientation,
       ...otherProps
     } = this.props;
 
     const { addLaneMode } = this.state;
     // Stick to whitelisting attributes to segregate board and lane props
-    const passthroughProps = pick(this.props, [
+    const passThroughProps = pick(this.props, [
       "onCardMoveAcrossLanes",
       "onLaneScroll",
       "onLaneDelete",
@@ -169,19 +170,19 @@ class BoardContainer extends Component {
       "handleDragEnd",
       "cardDragClass",
       "editLaneTitle",
-      "t"
+      "orientation"
     ]);
 
     return (
-      <components.BoardWrapper style={style} {...otherProps} draggable={false}>
+      <components.BoardWrapper style={style} orientation={orientation} {...otherProps} draggable={false}>
         <PopoverWrapper>
           <Container
-            orientation="horizontal"
+            orientation={orientation === "vertical" ? "vertical" : "horizontal"}
             onDragStart={this.onDragStart}
             dragClass={laneDragClass}
             dropClass={laneDropClass}
             onDrop={this.onLaneDrop}
-            lockAxis="x"
+            lockAxis={orientation === "vertical" ? "y" : "x"}
             getChildPayload={(index) => this.getLaneDetails(index)}
             groupName={this.groupName}
           >
@@ -201,7 +202,7 @@ class BoardContainer extends Component {
                   cardStyle={this.props.cardStyle || lane.cardStyle}
                   editable={editable && !lane.disallowAddingCard}
                   {...otherProps}
-                  {...passthroughProps}
+                  {...passThroughProps}
                 />
               );
               return draggable && laneDraggable ? <Draggable key={lane.id}>{laneToRender}</Draggable> : laneToRender;
@@ -209,9 +210,9 @@ class BoardContainer extends Component {
           </Container>
         </PopoverWrapper>
         {canAddLanes && (
-          <Container orientation="horizontal">
+          <Container orientation={orientation === "vertical" ? "vertical" : "horizontal"}>
             {editable && !addLaneMode ? (
-              <components.NewLaneSection t={t} onClick={this.showEditableLane} />
+              <components.NewLaneSection onClick={this.showEditableLane} />
             ) : (
               addLaneMode && <components.NewLaneForm onCancel={this.hideEditableLane} onAdd={this.addNewLane} t={t} />
             )}
@@ -257,7 +258,9 @@ BoardContainer.propTypes = {
   cardDragClass: PropTypes.string,
   laneDragClass: PropTypes.string,
   laneDropClass: PropTypes.string,
-  onCardMoveAcrossLanes: PropTypes.func.isRequired
+  onCardMoveAcrossLanes: PropTypes.func.isRequired,
+  t: PropTypes.func,
+  orientation: PropTypes.string
 };
 
 BoardContainer.defaultProps = {
@@ -281,7 +284,8 @@ BoardContainer.defaultProps = {
   cardDraggable: true,
   cardDragClass: "react_trello_dragClass",
   laneDragClass: "react_trello_dragLaneClass",
-  laneDropClass: ""
+  laneDropClass: "",
+  orientation: "horizontal"
 };
 
 const mapStateToProps = (state) => {

client/src/components/trello-board/controllers/Lane.jsx

@@ -157,7 +157,8 @@ class Lane extends Component {
       cardDropClass,
       tagStyle,
       cardStyle,
-      components
+      components,
+      orientation
     } = this.props;
     const { addCardMode, collapsed } = this.state;
 
@@ -191,7 +192,7 @@ class Lane extends Component {
     return (
       <components.ScrollableLane ref={this.laneDidMount} isDraggingOver={isDraggingOver}>
         <Container
-          orientation="vertical" // TODO This is where we would switch the card orientation.
+          // orientation={orientation === "horizontal" ? "vertical" : "horizontal"}
           groupName={this.groupName}
           dragClass={cardDragClass}
           dropClass={cardDropClass}
@@ -254,6 +255,7 @@ class Lane extends Component {
       onLaneUpdate,
       onCardUpdate,
       onCardMoveAcrossLanes,
+      orientation,
       ...otherProps
     } = this.props;
     const allClassNames = classNames("react-trello-lane", this.props.className || "");
@@ -265,6 +267,7 @@ class Lane extends Component {
         onClick={() => onLaneClick && onLaneClick(id)}
         draggable={false}
         className={allClassNames}
+        orientation={orientation}
       >
         {this.renderHeader({ id, cards, ...otherProps })}
         {this.renderDragContainer(isDraggingOver)}
@@ -308,7 +311,13 @@ Lane.propTypes = {
   cardDraggable: PropTypes.bool,
   cardDragClass: PropTypes.string,
   cardDropClass: PropTypes.string,
-  canAddLanes: PropTypes.bool
+  canAddLanes: PropTypes.bool,
+  hideCardDeleteIcon: PropTypes.bool,
+  components: PropTypes.object,
+  getCardDetails: PropTypes.func,
+  handleDragStart: PropTypes.func,
+  handleDragEnd: PropTypes.func,
+  orientation: PropTypes.string
 };
 
 Lane.defaultProps = {
@@ -319,7 +328,25 @@ Lane.defaultProps = {
   editable: false,
   onLaneUpdate: () => {},
   onCardAdd: () => {},
-  onCardUpdate: () => {}
+  onCardUpdate: () => {},
+  onCardDelete: () => {},
+  onBeforeCardDelete: () => {},
+  onLaneDelete: () => {},
+  onLaneClick: () => {},
+  onLaneScroll: () => {},
+  onCardClick: () => {},
+  onCardMoveAcrossLanes: () => {},
+  draggable: false,
+  laneDraggable: false,
+  cardDraggable: true,
+  collapsibleLanes: false,
+  droppable: true,
+  canAddLanes: false,
+  hideCardDeleteIcon: false,
+  components: {},
+  handleDragStart: () => {},
+  handleDragEnd: () => {},
+  orientation: "vertical"
 };
 
 const mapDispatchToProps = (dispatch) => ({