playbook_ui 14.12.0.pre.alpha.PBNTR779railsdraggablecrosscontainer5863 → 14.12.0.pre.alpha.PBNTR8335887

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 765d089ccf2865b636f00f2731f259d3251554090ba8cf345d1b96c887af523a
-  data.tar.gz: d2027d84bedb2da3000a272b5c85e8c108dbf4fac0c612653a8ce7f943924f51
+  metadata.gz: 465ee51ff2dbb2af50cc37ab1410fcc232cd40a299ef118c417233501dc228b4
+  data.tar.gz: d24d893f196fdb17bd2ac9de0c675fe94f75f96ffe22e40fac1b50291175b25a
 SHA512:
-  metadata.gz: 5927b36c0974b0d951da24d21a0afbae2f1e4949ec0e73e299491f7bb33e378b6be3eb573c0e090edc94efb924753b9117a310d12c6ff43da62c79cd21edbc17
-  data.tar.gz: 123324d5d23872521397b16043be4df25028beb28731e8cf7e2a79ff4c49058aa4a902a1908677d0533163256ea5860861d2cdb629971be3599a61b55192c95d
+  metadata.gz: 9c93b1222544a679b63d47c822e178f791bc5dc9c62b766d2b56343baab2ae44bb237cc821d70ffa6fe14c35a8b77aa277b17c2da02c0915b7f44764ddddf9d1
+  data.tar.gz: f20faea4116796dde581972cf1e1ab25e60470e4ecbc5fb51b59161f9593bbf17b24b501d4e6f351add749ce87f85d9389d49740cc66055c8cf3c50386f8337f

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -39,8 +39,15 @@ export const TableHeaderCell = ({
   sortIcon,
   table
 }: TableHeaderCellProps) => {
-  const { sortControl, responsive, selectableRows, hasAnySubRows, showActionsBar, inlineRowLoading } =
-    useContext(AdvancedTableContext);
+  const {
+    sortControl,
+    responsive,
+    selectableRows,
+    hasAnySubRows,
+    showActionsBar,
+    inlineRowLoading,
+    isActionBarVisible,
+  } = useContext(AdvancedTableContext);
 
   type justifyTypes = "none" | "center" | "start" | "end" | "between" | "around" | "evenly"
   
@@ -65,7 +72,7 @@ export const TableHeaderCell = ({
  
 const cellClassName = classnames(
   "table-header-cells",
-  `${showActionsBar && "header-cells-with-actions"}`,
+  `${showActionsBar && isActionBarVisible && "header-cells-with-actions"}`,
   `${isChrome() ? "chrome-styles" : ""}`,
   `${enableSorting ? "table-header-cells-active" : ""}`,
   { "pinned-left": responsive === "scroll" && isPinnedLeft },

data/app/pb_kits/playbook/pb_advanced_table/Utilities/ActionBarAnimationHelper.ts

@@ -0,0 +1,26 @@
+export const showActionBar = (elem: HTMLElement) => {
+  elem.style.display = "block";
+  const height = elem.scrollHeight + "px";
+  elem.style.height = height;
+  elem.classList.add("is-visible");
+  elem.style.overflow = "hidden";
+
+  window.setTimeout(() => {
+    if (elem.classList.contains("is-visible")) {
+      elem.style.height = "";
+      elem.style.overflow = "visible";
+    }
+  }, 300);
+};
+
+export const hideActionBar = (elem: HTMLElement) => {
+  elem.style.height = elem.scrollHeight + "px";
+  elem.offsetHeight;
+  window.setTimeout(() => {
+    elem.style.height = "0";
+    elem.style.overflow = "hidden";
+  }, 10);
+  window.setTimeout(() => {
+    elem.classList.remove("is-visible");
+  }, 300);
+};

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -31,12 +31,12 @@
     width: 100%;
   }
 
-  .row-selection-actions-card {
-    border-bottom-right-radius: 0px !important;
-    border-bottom-left-radius: 0px !important;
-    border-bottom-color: transparent;
-  }
-
+    .row-selection-actions-card {
+      border-bottom-right-radius: 0px !important;
+      border-bottom-left-radius: 0px !important;
+      border-bottom-color: transparent;
+      transition: height 300ms ease;
+    }
   .table-header-cells:first-child {
     min-width: 180px;
   }

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react"
+import React, { useState, useEffect, useCallback, useRef } from "react"
 import classnames from "classnames"
 
 import { GenericObject } from "../types"
@@ -27,6 +27,7 @@ import FlexItem from "../pb_flex/_flex_item"
 import AdvancedTableContext from "./Context/AdvancedTableContext"
 
 import { updateExpandAndCollapseState } from "./Utilities/ExpansionControlHelpers"
+import { showActionBar, hideActionBar } from "./Utilities/ActionBarAnimationHelper"
 
 import { CustomCell } from "./Components/CustomCell"
 import { TableHeader } from "./SubKits/TableHeader"
@@ -295,6 +296,20 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const onPageChange = (page: number) => {
     table.setPageIndex(page - 1)
   }
+//When to show the actions bar as a whole
+  const isActionBarVisible = selectableRows && showActionsBar && selectedRowsLength > 0
+
+  //Ref and useEffect for animating the actions bar
+  const cardRef = useRef(null);
+  useEffect(() => {
+    if (cardRef.current) {
+      if (isActionBarVisible) {
+        showActionBar(cardRef.current);
+      } else {
+        hideActionBar(cardRef.current);
+      }
+    }
+  }, [isActionBarVisible]);
 
   return (
     <div {...ariaProps} 
@@ -311,6 +326,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             expandedControl,
             handleExpandOrCollapse,
             inlineRowLoading,
+            isActionBarVisible,
             loading,
             responsive,
             setExpanded,
@@ -333,27 +349,24 @@ const AdvancedTable = (props: AdvancedTableProps) => {
                   total={table.getPageCount()}
                   />
           }
-          {
-            selectableRows && showActionsBar && (
-              <Card className="row-selection-actions-card"
-                  padding="xs"
+          <Card
+              borderNone={!isActionBarVisible}
+              className={`${isActionBarVisible && "show-action-card row-selection-actions-card"}`}
+              htmlOptions={{ ref: cardRef as any }}
+              padding={`${isActionBarVisible ? "xs" : "none"}`}
+          >
+            <Flex alignItems="center" 
+                justify="between"
+            >
+              <Caption color="light" 
+                  paddingLeft="xs" 
+                  size="xs"
               >
-                <Flex alignItems="center"
-                    justify="between"
-                >
-                    <Caption color="light"
-                        paddingLeft="xs"
-                        size="xs"
-                    >
-                      {selectedRowsLength} Selected
-                    </Caption>
-                    <FlexItem>
-                    {actions}
-                    </FlexItem>
-                </Flex>
-              </Card>
-            )
-          }
+                {selectedRowsLength} Selected
+              </Caption>
+              <FlexItem>{actions}</FlexItem>
+            </Flex>
+          </Card>
           <Table
               className={`${loading ? "content-loading" : ""}`}
               dark={dark}

data/app/pb_kits/playbook/pb_draggable/docs/example.yml

@@ -1,14 +1,18 @@
 examples:
+  
+  
   react:
   - draggable_default: Default
   - draggable_with_list: Draggable with List Kit
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
   - draggable_multiple_containers: Dragging Across Multiple Containers
+  
   rails:
   - draggable_default_rails: Default
   - draggable_with_list_rails: Draggable with List Kit
   - draggable_with_selectable_list_rails: Draggable with SelectableList Kit
   - draggable_with_cards_rails: Draggable with Cards
-  - draggable_multiple_containers_rails: Dragging Across Multiple Containers
 
+
+  

data/app/pb_kits/playbook/pb_draggable/draggable_container.html.erb

@@ -1,3 +1,3 @@
 <%= pb_content_tag do %>
-  <%= content.presence %>
-<% end %>
+    <%= content.presence %>
+  <% end %>

data/app/pb_kits/playbook/pb_draggable/draggable_container.rb

@@ -3,9 +3,6 @@
 module Playbook
   module PbDraggable
     class DraggableContainer < ::Playbook::KitBase
-      prop :container, type: Playbook::Props::String,
-                       default: ""
-
       def data
         Hash(prop(:data)).merge(pb_draggable_container: true)
       end

data/app/pb_kits/playbook/pb_draggable/draggable_item.rb

@@ -5,8 +5,6 @@ module Playbook
     class DraggableItem < ::Playbook::KitBase
       prop :drag_id, type: Playbook::Props::String,
                      default: ""
-      prop :container, type: Playbook::Props::String,
-                       default: ""
 
       def data
         Hash(prop(:data)).merge(pb_draggable_item: true)

data/app/pb_kits/playbook/pb_draggable/index.js

@@ -9,32 +9,11 @@ export default class PbDraggable extends PbEnhancedElement {
   }
 
   connect() {
-    this.state = {
-      items: [],
-      dragData: { id: "", initialGroup: "" },
-      isDragging: "",
-      activeContainer: ""
-    };
-
     this.draggedItem = null;
     this.draggedItemId = null;
-
     document.addEventListener("DOMContentLoaded", () => this.bindEventListeners());
   }
 
-  setState(newState) {
-    this.state = { ...this.state, ...newState };
-    if (newState.items) {
-      const customEvent = new CustomEvent('pb-draggable-reorder', {
-        detail: {
-          reorderedItems: this.state.items,
-          containerId: this.element.querySelector(DRAGGABLE_CONTAINER).id
-        }
-      });
-      this.element.dispatchEvent(customEvent);
-    }
-  }
-
   bindEventListeners() {
     // Needed to prevent images within draggable items from being independently draggable
     // Needed if using Image kit in draggable items
@@ -48,11 +27,11 @@ export default class PbDraggable extends PbEnhancedElement {
       item.addEventListener("dragenter", this.handleDragEnter.bind(this));
     });
 
-    const containers = this.element.querySelectorAll(DRAGGABLE_CONTAINER);
-    containers.forEach(container => {
+    const container = this.element.querySelector(DRAGGABLE_CONTAINER);
+    if (container) {
       container.addEventListener("dragover", this.handleDragOver.bind(this));
       container.addEventListener("drop", this.handleDrop.bind(this));
-    });
+    }
   }
 
   handleDragStart(event) {
@@ -62,17 +41,11 @@ export default class PbDraggable extends PbEnhancedElement {
       event.preventDefault();
       return;
     }
-
-    const container = event.target.closest(DRAGGABLE_CONTAINER);
+    
     this.draggedItem = event.target;
     this.draggedItemId = event.target.id;
-
-    this.setState({
-      dragData: { id: this.draggedItemId, initialGroup: container.id },
-      isDragging: this.draggedItemId
-    });
-
     event.target.classList.add("is_dragging");
+
     if (event.dataTransfer) {
       event.dataTransfer.effectAllowed = 'move';
       event.dataTransfer.setData('text/plain', this.draggedItemId);
@@ -91,14 +64,6 @@ export default class PbDraggable extends PbEnhancedElement {
 
     const container = targetItem.parentNode;
     const items = Array.from(container.children);
-
-    const newItems = [...items].map(item => ({
-      id: item.id,
-      container: container.id
-    }));
-
-    this.setState({ items: newItems });
-
     const draggedIndex = items.indexOf(this.draggedItem);
     const targetIndex = items.indexOf(targetItem);
 
@@ -111,82 +76,45 @@ export default class PbDraggable extends PbEnhancedElement {
 
   handleDragOver(event) {
     event.preventDefault();
-    event.stopPropagation();
-
-    let container;
-    if (event.target.matches(DRAGGABLE_CONTAINER)) {
-      container = event.target;
-    } else {
-      container = event.target.closest(DRAGGABLE_CONTAINER);
-    }
+    const container = event.target.closest(DRAGGABLE_CONTAINER);
 
     if (container) {
-      this.setState({ activeContainer: container.id });
       container.classList.add("active_container");
     }
   }
 
   handleDrop(event) {
     event.preventDefault();
-    event.stopPropagation();
-
-    let container;
-
-    if (event.target.matches(DRAGGABLE_CONTAINER)) {
-      container = event.target;
-    } else {
-      container = event.target.closest(DRAGGABLE_CONTAINER);
-    }
-
+    const container = event.target.closest(DRAGGABLE_CONTAINER);
     if (!container || !this.draggedItem) return;
-
+  
     container.classList.remove("active_container");
     this.draggedItem.style.opacity = '1';
-
-    // Handle empty containers
-    if (!container.querySelector('.pb_draggable_item')) {
-      container.appendChild(this.draggedItem);
-    }
-
+  
     // Updated order of items as an array of item IDs
-    const reorderedItems = Array.from(
-      this.element.querySelectorAll('.pb_draggable_item')
-    ).map(item => ({
-      id: item.id,
-      container: item.closest(DRAGGABLE_CONTAINER).id
-    }));
-
+    const reorderedItems = Array.from(container.children)
+      .filter(item => item.classList.contains("pb_draggable_item"))
+      .map(item => item.id.replace("item_", "")); 
+  
     // Store reordered items in a data attribute on the container
     container.setAttribute("data-reordered-items", JSON.stringify(reorderedItems));
-
+  
     const customEvent = new CustomEvent('pb-draggable-reorder', {
       detail: {
         reorderedItems,
         containerId: container.id,
       }
     });
-
     this.element.dispatchEvent(customEvent);
-
-    this.setState({
-      items: reorderedItems,  // Changed from reorderedItems to items to match setState
-      isDragging: "",
-      activeContainer: ""
-    });
-
+  
     this.draggedItem = null;
     this.draggedItemId = null;
   }
+  
 
   handleDragEnd(event) {
     event.target.classList.remove("is_dragging");
     event.target.style.opacity = '1';
-
-    this.setState({
-      isDragging: "",
-      activeContainer: ""
-    });
-
     this.draggedItem = null;
     this.draggedItemId = null;