playbook_ui 14.11.1.pre.alpha.PBNTR573datepickerinvestigation5355 → 14.11.1.pre.alpha.PBNTR769sticky5359

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 10a0e4cb9340097b9e793ab5a4c3cf062ccb0f33df36fc321495215cbcdf89ce
-  data.tar.gz: 63b345af0b4b60033d485c080600f2c57bccc4de2eeb3259f2ce68bf9fe28b79
+  metadata.gz: 83c318646e50eb8f4974a79029c4553c98dd90c0c878ec0fdd60fd77045d36a8
+  data.tar.gz: 777f930d187a4815ab702202437cbb96868039c9e115acfd97cee157bbd42d07
 SHA512:
-  metadata.gz: cafe574e0d494c8a4466dcbf01e2c7502701bf3be1cf19f3419505fa6812b6613eddd2a60d6d092a30c4ca489bf67dc32a75a3c53975d32dbd01375745f634d7
-  data.tar.gz: b3a6601c23e7426a97a5c28b9d613c500ce905dc49b381769714419c6ae6478ad78bba36243d489ea666a38b03e7d23c3871cf894b19622cfa4f6b44bffa1224
+  metadata.gz: b8a756512afdc408c56dbcccb9c6660ea746e14a3656f1fef48557bb09c57140f5f069c2160d2a6ac31883fae34861b9f909eb5fb0c05ec9fa4230145db24da9
+  data.tar.gz: 1cbeb5057637f11e479097c70b6e1e59b52abc1bd88d8f4ff0bf329e8ba56c1847eee4b3680c54c7b8cc423c0ad4c052cd77a3e9c5a348c58148a2747d0af1a0

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

@@ -15,6 +15,12 @@
     word-wrap: normal;
   }
 
+  .sticky-header {
+    thead {
+      z-index: 3 !important;
+    }
+  }
+
   .bg-silver {
     background-color: lighten($silver, $opacity_7);
   }

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_responsive.jsx

@@ -0,0 +1,52 @@
+import React from "react"
+import { AdvancedTable } from "playbook-ui"
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableStickyHeaderResponsive = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          htmlOptions={{style: { maxHeight: "100vh" }}}
+          tableData={MOCK_DATA}
+          tableProps={{sticky:true}}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableStickyHeaderResponsive

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

@@ -22,6 +22,7 @@ examples:
   - advanced_table_table_props: Table Props
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
+  - advanced_table_sticky_header_responsive: Sticky Header and Responsive
   - advanced_table_custom_cell: Custom Components for Cells
   - advanced_table_pagination: Pagination
   - advanced_table_pagination_with_props: Pagination Props

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js

@@ -13,4 +13,5 @@ export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cel
 export { default as AdvancedTablePagination } from './_advanced_table_pagination.jsx'
 export { default as AdvancedTablePaginationWithProps } from './_advanced_table_pagination_with_props.jsx'
 export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
-export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
+export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
+export { default as AdvancedTableStickyHeaderResponsive } from './_advanced_table_sticky_header_responsive.jsx'

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -68,7 +68,7 @@
   </div>
 
   <%= javascript_tag do %>
-    const loadDatePicker = () => {
+    window.addEventListener("DOMContentLoaded", () => {
       datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
 
       if (<%= object.selection_type == "quickpick" %>) {
@@ -80,17 +80,6 @@
           endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
         })
       }
-    }
-
-    window.addEventListener("DOMContentLoaded", () => {
-      loadDatePicker();
-    });
-    
-    if (<%= !object.custom_event_listener.empty? %>) {
-      window.addEventListener("<%= object.custom_event_listener %>", () => {
-        console.log("Custom Event listener fired");
-        loadDatePicker();
-      })
-    }
+    })
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -73,8 +73,6 @@ module Playbook
                       default: false
       prop :year_range, type: Playbook::Props::Array,
                         default: [1900, 2100]
-      prop :custom_event_listener, type: Playbook::Props::String,
-                                   default: ""
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb

@@ -1,12 +1 @@
-<%= pb_rails("date_picker", props: { picker_id: "date-picker-default", custom_event_listener: "datePickerLoader" }) %>
-<%= pb_rails("button", props: { id: "date-picker-loader", text: "Load Custom Event" }) %>
-
-<script>
-    document.getElementById("date-picker-loader").addEventListener("click", () => {
-        window.document.dispatchEvent(
-            new CustomEvent("datePickerLoader", {
-                bubbles: true,
-            })
-        );
-    });
-</script>
+<%= pb_rails("date_picker", props: { picker_id: "date-picker-default"}) %>