playbook_ui 14.12.0.pre.alpha.PBNTR456fixedconftoastrailsautoclose5673 → 14.12.0.pre.alpha.PBNTR456fixedconftoastrailsautoclose5738

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ab973abc311a1d8a8b406fe1733365d241d40ff7c9d71ab47286685a39931831
-  data.tar.gz: 1efceea37120fc1a5cc40b95ed64b05b0b4bb94a6ea4a48037c87b2dab971de7
+  metadata.gz: 3fc1642e15301ac5fecdafb78ad0d02de29c9dbbb26b3bc08760f2528ecd61c5
+  data.tar.gz: 9fc96e2bc464ba755a7fbcedb891829e390d557d04da9e37cd51e607737c95b9
 SHA512:
-  metadata.gz: 624d99dd670eaeec337a32e50a5330138c5a15d77d7a21c2a4499b5a7d2389dacc4f076f37c42ae76c1bef1ee0c1ef3140ef5266f6ed50dea8b6713c07aaf6d2
-  data.tar.gz: af70dcadf4147c80d19a6fc71c4d4d0cd6427a9b10a65a3d7ef1c79e67549df49c5b2efea002414e4c6a1f4204602a47d9999bd808afbcd61cbec9e8e9b56afc
+  metadata.gz: a1bc8cd947d1555876f16312bf9ca8c81b79bfb44f2d5f5bf5f8a968faf0081252cc8be904e77f8935fd175cdea7bc47d7dcfad2f4fc07915edff5f4f7287088
+  data.tar.gz: d7ed7ae200c1b5c09e5aac2f39a945060fc3f9a7f997bc083854bd94d6a062f12ed865abfd8f82c631118020f2c4ef1222a237663595fa0ce72aa8e3881c9acb

data/app/pb_kits/playbook/_playbook.scss

@@ -15,6 +15,7 @@
 @import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
 @import 'pb_collapsible/collapsible';
+@import 'pb_copy_button/copy_button';
 @import 'pb_contact/contact';
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';

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

@@ -47,7 +47,7 @@ export const CustomCell = ({
       <Flex 
           alignItems="center" 
           columnGap="xs"
-          justify={!hasAnySubRows ? "end" : "start"}
+          justify={!hasAnySubRows && !inlineRowLoading ? "end" : "start"}
           orientation="row"
       >
         {

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

@@ -39,7 +39,7 @@ export const TableHeaderCell = ({
   sortIcon,
   table
 }: TableHeaderCellProps) => {
-  const { sortControl, responsive, selectableRows, hasAnySubRows, showActionsBar } =
+  const { sortControl, responsive, selectableRows, hasAnySubRows, showActionsBar, inlineRowLoading } =
     useContext(AdvancedTableContext);
 
   type justifyTypes = "none" | "center" | "start" | "end" | "between" | "around" | "evenly"
@@ -91,7 +91,7 @@ const isToggleExpansionEnabled =
 
   let justifyHeader:justifyTypes;
 
-  if (header?.index === 0 && hasAnySubRows) {
+  if (header?.index === 0 && hasAnySubRows || (header?.index === 0 && inlineRowLoading)) {
     justifyHeader = enableSorting ? "between" : "start";
   } else {
     justifyHeader = isLeafColumn ? "end" : "center";

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb

@@ -1,15 +1,10 @@
 <%= pb_content_tag do %>
-  <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive: "none", dark: dark }.merge(object.table_props)) do %>
-    <% if content.present? %>
-      <% content.presence %>
-    <% else %>
-      <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions,
-                                                            enable_toggle_expansion: object.enable_toggle_expansion,
-                                                            responsive: object.responsive }) %>
-      <%= pb_rails("advanced_table/table_body", props: { id: object.id,
-                                                         table_data: object.table_data,
-                                                         column_definitions: object.column_definitions,
-                                                         responsive: object.responsive }) %>
-    <% end %>
-  <% end %>
+        <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark, classname: object.loading ? "content-loading" : ""  }.merge(object.table_props)) do %>
+          <% if content.present? %>
+            <% content.presence %>
+          <% else %>
+            <%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading }) %>
+            <%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading }) %>
+          <% end %>
+        <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb

@@ -10,6 +10,8 @@ module Playbook
       prop :enable_toggle_expansion, type: Playbook::Props::Enum,
                                      values: %w[all header none],
                                      default: "header"
+      prop :loading, type: Playbook::Props::Boolean,
+                     default: false
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
                         default: "scroll"

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -245,7 +245,7 @@ test("toggleExpansionAll button exists and toggles subrows open and closed", asy
 })
 
 
-test("loading state + initialLoadingRowCount prop", () => {
+test("loading state + initialLoadingRowsCount prop", () => {
   render(
     <AdvancedTable
         columnDefinitions={columnDefinitions}

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb

@@ -0,0 +1,33 @@
+<% column_definitions = [
+    {
+      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",
+    }
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "beta_table", table_data: @table_data, column_definitions: column_definitions, loading: true }) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading_rails.md

@@ -0,0 +1 @@
+The optional `loading` prop takes a boolean value that can be managed using state. If loading is true, the table will display the loading skeleton and once loading is false, the table will render with the data provided. 

data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_loading.md → _advanced_table_loading_react.md}

@@ -1,3 +1,3 @@
-the optional `loading` prop takes a boolean value that can be managed using state. If loading is true, the table will display the loading skeleton and once loading is false, the table will render with the data provided. 
+The optional `loading` prop takes a boolean value that can be managed using state. If loading is true, the table will display the loading skeleton and once loading is false, the table will render with the data provided. 
 
-By default, the inital row count of the loading skeleton is set to 10. If you want more control over this initial row count, the optional `initialLoadingRowCount` prop can be used to pass in a number. __NOTE__: This is only for the first render of the table, subsequent loading skeleton row count logic is handled within the kit itself.
+By default, the inital row count of the loading skeleton is set to 10. If you want more control over this initial row count, the optional `initialLoadingRowsCount` prop can be used to pass in a number. __NOTE__: This is only for the first render of the table, subsequent loading skeleton row count logic is handled within the kit itself.

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

@@ -1,6 +1,7 @@
 examples:
   rails:
   - advanced_table_beta: Default (Required Props)
+  - advanced_table_loading: Loading State
   - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_table_props: Table Props

data/app/pb_kits/playbook/pb_advanced_table/table_body.rb

@@ -16,6 +16,8 @@ module Playbook
                             default: []
       prop :collapsible_trail, type: Playbook::Props::Boolean,
                                default: true
+      prop :loading, type: Playbook::Props::Boolean,
+                     default: false
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
                         default: "scroll"
@@ -54,7 +56,7 @@ module Playbook
         current_data_attributes = current_depth.zero? ? { row_depth: 0 } : table_data_attributes
 
         # Additional class and data attributes needed for toggle logic
-        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive })
+        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading })
 
         if row[:children].present?
           row[:children].each do |child_row|

data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb

@@ -6,11 +6,15 @@
         <%= pb_rails("table/table_header", props: { id: header_id, colspan: cell[:colspan], classname: [object.th_classname(is_first_column: cell_index.zero?), ('last-header-cell' if cell[:is_last_in_group] && cell_index != 0)].compact.join(' '), sort_menu: cell[:accessor] ? cell[:sort_menu] : nil }) do %>
           <%= pb_rails("flex", props: { align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: "end" }) do %>
             <% if cell_index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") && row_index === header_rows.size - 1 %>
-              <button
-                class="gray-icon toggle-all-icon"
-                onclick="expandAllRows(this); event.preventDefault();">
-                <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
-              </button>
+              <% if loading %>
+                <div class="<%= object.loading ? 'loading-toggle-icon' : '' %>"></div>
+              <% else %>
+                <button
+                  class="gray-icon toggle-all-icon"
+                  onclick="expandAllRows(this); event.preventDefault();">
+                  <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
+                </button>
+              <% end %>
             <% end %>
             <%= cell[:label] %>
           <% end %>

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -8,6 +8,8 @@ module Playbook
       prop :enable_toggle_expansion, type: Playbook::Props::Enum,
                                      values: %w[all header none],
                                      default: "header"
+      prop :loading, type: Playbook::Props::Boolean,
+                     default: false
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
                         default: "scroll"

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -2,7 +2,7 @@
         <% object.column_definitions.each_with_index do |column, index| %>
             <% next unless column[:accessor].present? %>
             <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
-                <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>
+                <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", classname: object.loading ? "loading-cell" : "" }) do %>
                     <% if collapsible_trail && index.zero? %>
                         <% (1..depth).each do |i| %>
                             <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -13,6 +13,8 @@ module Playbook
                                default: true
       prop :table_data_attributes, type: Playbook::Props::HashProp,
                                    default: {}
+      prop :loading, type: Playbook::Props::Boolean,
+                     default: false
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
                         default: "scroll"

data/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -78,4 +78,9 @@ $avatar-sizes: (
       }
     }
   }
+  &.dark {
+    [class^=pb_card_kit] {
+      position: absolute;
+    }
+  }
 }

data/app/pb_kits/playbook/pb_copy_button/_copy_button.scss

@@ -0,0 +1,3 @@
+.pb_copy_button_kit {
+
+}

data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx

@@ -0,0 +1,92 @@
+
+import React, { useState } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+
+import Button from '../pb_button/_button'
+import Tooltip from '../pb_tooltip/_tooltip'
+
+type CopyButtonProps = {
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
+  id?: string,
+  from?: string,
+  text?: string,
+  tooltipPlacement?:  "top" | "right" | "bottom" | "left",
+  tooltipText?: string,
+  value?: string,
+}
+
+const CopyButton = (props: CopyButtonProps) => {
+  const {
+    aria = {},
+    className,
+    data = {},
+    from = '',
+    id,
+    text= 'Copy',
+    tooltipPlacement= 'bottom',
+    tooltipText = 'Copied!',
+    value = '',
+  } = props
+
+  const [copied, setCopied] = useState(false)
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_copy_button_kit'), globalProps(props), className)
+
+  const copy = () => {
+    if (!from && !value) {
+      return
+    }
+
+    if (value) {
+      navigator.clipboard.writeText(value)
+    } else if (from) {
+      const copyElement = document.getElementById(from);
+      let copyText = copyElement?.innerText
+
+      if (copyElement instanceof HTMLTextAreaElement || copyElement instanceof HTMLInputElement) {
+        copyText = copyElement.value;
+      }
+
+      if (copyText) {
+        navigator.clipboard.writeText(copyText)
+      }
+    }
+
+    setCopied(true)
+
+    setTimeout(() => {
+      setCopied(false)
+    }, 1000);
+  }
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      <Tooltip 
+          forceOpenTooltip={copied}
+          placement={tooltipPlacement}
+          showTooltip={false}
+          text={tooltipText}
+      >
+        <Button
+            icon='copy'
+            onClick={copy}
+        >
+          { text }
+        </Button>
+      </Tooltip>
+    </div>
+  )
+}
+
+export default CopyButton

data/app/pb_kits/playbook/pb_copy_button/copy_button.test.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { CopyButton } from 'playbook-ui'
+import { ensureAccessible, renderKit, render, fireEvent, screen } from '../utilities/test-utils'
+
+const props = {
+  data: { testid: 'default', value: 'copy' }
+}
+
+test('returns namespaced class name', () => {
+  const kit = renderKit(CopyButton, props)
+  expect(kit).toBeInTheDocument()
+  expect(kit).toHaveClass('pb_copy_button_kit')
+})
+
+it('should be accessible', async () => {
+  ensureAccessible(CopyButton, props)
+})
+
+// It's difficult to actually use navigator.clipboard.readText, so we mock
+it('copies the value to clipboard and pastes it into an input', async () => {
+  Object.defineProperty(global, 'navigator', {
+    value: {
+      clipboard: {
+        writeText: jest.fn().mockResolvedValueOnce(undefined),
+      },
+    },
+    writable: true,
+  })
+
+  render(<CopyButton {...props} />)
+
+  const copyButton = screen.getByTestId('default')
+  fireEvent.click(copyButton)
+
+  await navigator.clipboard.writeText('copy')
+
+  expect(navigator.clipboard.writeText).toHaveBeenCalledWith("copy");
+})
+
+test('passes text and tooltip props to button', () => {
+  render(
+      <CopyButton
+          data={{ testid: 'text-test' }}
+          text={"text"}
+          tooltipPlacement="right"
+          tooltipText="Text copied!"
+          value="copy"
+      />
+  )
+
+  const content = screen.getByText("text")
+  expect(content).toHaveTextContent("text")
+
+  const kit = screen.getByTestId('text-test')
+  const button = kit.querySelector('.pb_button_kit_primary_inline_enabled')
+  expect(button).toBeInTheDocument()
+
+  fireEvent.click(button)
+  const tooltipContent = screen.getByText("Text copied!")
+  expect(tooltipContent).toHaveTextContent("Text copied!")
+
+  const tooltip = kit.querySelector('.pb_tooltip_kit')
+  expect(tooltip).toBeInTheDocument()
+})

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { CopyButton, Textarea } from 'playbook-ui'
+
+const CopyButtonDefault = (props) => (
+  <div>
+    <CopyButton
+        {...props}
+        text="Copy Text"
+        tooltipPlacement="right"
+        tooltipText="Text copied!"
+        value="Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease."
+    />
+
+    <Textarea
+        {...props}
+        placeholder="Copy and paste here"
+    />
+  </div>
+)
+
+export default CopyButtonDefault

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+import { CopyButton, Body, TextInput, Textarea } from 'playbook-ui'
+
+const CopyButtonFrom = (props) => {
+  const [text, setText] = useState("Copy this text input text")
+
+  const handleChange = (event) => {
+    setText(event.target.value);
+  }
+
+  return (<div>
+    <Body id="body">Copy this body text!</Body>
+    <CopyButton
+        {...props}
+        from="body"
+        marginBottom="sm"
+        text="Copy Body text"
+        tooltipPlacement="right"
+        tooltipText="Body text copied!"
+    />
+
+    <TextInput
+        {...props}
+        id="textinput"
+        onChange={handleChange}
+        value={text}
+    />
+    <CopyButton
+        {...props}
+        from="textinput"
+        marginBottom="sm"
+        text="Copy Text Input"
+        tooltipPlacement="right"
+        tooltipText="Text input copied!"
+    />
+
+    <Textarea
+        {...props}
+        placeholder="Copy and paste here"
+    />
+  </div>
+  )
+}
+
+export default CopyButtonFrom

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.md

@@ -0,0 +1 @@
+Provide an element's ID as the `from` parameter, and its text will be copied. If the element is an input, its `value` will be copied; otherwise, the `innerText` will be used. Additionally, if a `value` prop is provided, it will override the content from the `from` element and be copied instead.

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

@@ -0,0 +1,8 @@
+examples:
+  
+  
+  react:
+  - copy_button_default: Default
+  - copy_button_from: Copy From
+  
+  

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

@@ -0,0 +1,2 @@
+export { default as CopyButtonDefault } from './_copy_button_default.jsx'
+export { default as CopyButtonFrom } from './_copy_button_from.jsx'

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb

@@ -1,15 +1,5 @@
-<%= pb_rails("button", props: { text: "Show Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close" } }) %>
 <%= pb_rails("button", props: { text: "Show Closeable Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close-closeable" } }) %>
 
-<%= pb_rails("fixed_confirmation_toast", props: {
-  auto_close: 3000,
-  id: "toast-auto-close",
-  text: "I will disappear in 3 seconds.",
-  status: "tip",
-  vertical: "top",
-  horizontal: "center"
-}) %>
-
 <%= pb_rails("fixed_confirmation_toast", props: {
   auto_close: 10000,
   closeable: true,
@@ -22,53 +12,22 @@
 
 <script>
   document.addEventListener('DOMContentLoaded', () => {
-    const toasts = {
-      '#toast-auto-close': document.querySelector("#toast-auto-close"),
-      '#toast-auto-close-closeable': document.querySelector("#toast-auto-close-closeable")
-    }
-    
-    const buttons = {
-      '#toast-auto-close': document.querySelector("button[data-toast='#toast-auto-close']"),
-      '#toast-auto-close-closeable': document.querySelector("button[data-toast='#toast-auto-close-closeable']")
-    }
+    const toast10SecCloseable = document.querySelector("#toast-auto-close-closeable")
+    const button10SecCloseable = document.querySelector("button[data-toast='#toast-auto-close-closeable']")
 
-    const hideAllToastsUponPageLoad = () => {
-      Object.values(toasts).forEach(toast => {
-        if (toast) toast.style.display = "none"
-      })
+    const originalToast = toast10SecCloseable.cloneNode(true)
+    
+    if (toast10SecCloseable) {
+      toast10SecCloseable.remove()
     }
 
-    const showAndAutoCloseToast = (toastId) => {
-      hideAllToastsUponPageLoad()
-      const toast = toasts[toastId]
-
-      if (toast) {
-        toast.style.display = "flex"  // Show the selected toast
-
-        const autoCloseClass = Array.from(toast.classList).find(cls => cls.startsWith('auto_close_'))
-        if (autoCloseClass) {
-          const duration = parseInt(autoCloseClass.split('_')[2]) || 0;  // Use 0 as fallback if parsing fails
-
-          if (toast.autoCloseTimeout) {
-            clearTimeout(toast.autoCloseTimeout)
-          }
-
-          toast.autoCloseTimeout = setTimeout(() => {
-            toast.style.display = "none"
-          }, duration)
-        }
+    if (button10SecCloseable) {
+      button10SecCloseable.onclick = () => {
+        const newToast = originalToast.cloneNode(true)
+        newToast.style.display = "flex"
+        
+        document.body.appendChild(newToast)
       }
     }
-
-    Object.keys(buttons).forEach((key) => {
-      const button = buttons[key]
-      if (button) {
-        button.onclick = () => {
-          showAndAutoCloseToast(key)
-        }
-      }
-    })
-
-    hideAllToastsUponPageLoad()
   })
-</script>
+</script>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close_rails.md

@@ -1,3 +1,3 @@
-Auto close is used when you want the confirmation toast to close automatically after a certain time. `auto_close` property will be a delay number in ms.
+Auto close is used when you want the confirmation toast to close automatically after a certain time. `auto_close` property will be a delay number in ms. The `auto_close` property currently only works in rails when it is a closeable one (`closeable: true`).
 
-Script tag in code snippet is for demonstration purposes only. It provides the functionality needed to show and hide the toaster in response to user interaction, and hides them from appearing upon initial page load. In a typical production environment this functionality would be handled by a controller or a separate javascript file.
+The script tag in this code snippet is for demonstration purposes only. It clones the toast in order to have it appear with a button click prompt and not upon initial page load. In a typical production environment the event triggering a fixed confirmation toast to appear would be handled by a controller or a separate javascript file.

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

@@ -1,69 +1,35 @@
 import PbEnhancedElement from '../pb_enhanced_element'
 
-const TOAST_WRAPPER_SELECTOR = '[data-pb-toast-wrapper]'
-const TOAST_AUTO_CLOSE_CLASS = 'auto_close'
-const TOAST_REMOVE_CLASS = 'remove_toast'
-
 export default class PbFixedConfirmationToast extends PbEnhancedElement {
   static get selector() {
-    return `${TOAST_WRAPPER_SELECTOR}, .${TOAST_AUTO_CLOSE_CLASS}, .${TOAST_REMOVE_CLASS}`
+    return '.remove_toast'
   }
 
   connect() {
     this.self = this.element
+    this.autoCloseToast(this.self)
 
-    if (this.self.classList.contains(TOAST_AUTO_CLOSE_CLASS) || 
-        this.self.hasAttribute('data-pb-auto-close')) {
-      this.autoCloseToast(this.self)
-    }
-
-    if (this.self.classList.contains(TOAST_REMOVE_CLASS) || 
-        this.self.hasAttribute('data-pb-remove-toast')) {
-      this.self.addEventListener('click', () => {
-        this.removeToast(this.self)
-      })
-    }
+    this.self.addEventListener('click', () => {
+      this.removeToast(this.self)
+    })
   }
 
   removeToast(elem) {
-    if (elem.autoCloseTimeout) {
-      clearTimeout(elem.autoCloseTimeout)
-      elem.autoCloseTimeout = null
-    }
-
     elem.parentNode.removeChild(elem)
   }
 
   autoCloseToast(element) {
-    let duration
+    const classListValues = element.classList.value
+    const hasAutoCloseClass = classListValues.includes('auto_close')
 
-    if (element.classList.contains(TOAST_AUTO_CLOSE_CLASS)) {
-      const autoCloseClass = Array.from(element.classList)
-        .find(cls => cls.startsWith('auto_close_'))
-      
-      if (autoCloseClass) {
-        duration = parseInt(autoCloseClass.split('_')[2])
-      }
-    }
+    if (hasAutoCloseClass) {
+      const classList = classListValues.split(' ')
+      const autoCloseValue = classList[classList.length - 1].split('_')[2]
+      const autoCloseIntValue = parseInt(autoCloseValue)
 
-    if (!duration) {
-      duration = parseInt(element.getAttribute('data-pb-auto-close'))
-    }
-
-    if (duration) {
-      if (element.autoCloseTimeout) {
-        clearTimeout(element.autoCloseTimeout)
-      }
-
-      element.autoCloseTimeout = setTimeout(() => {
+      setTimeout(() => {
         this.removeToast(element)
-      }, duration)
-    }
-  }
-
-  disconnect() {
-    if (this.element.autoCloseTimeout) {
-      clearTimeout(this.element.autoCloseTimeout)
+      }, autoCloseIntValue)
     }
   }
 }