playbook_ui 14.10.0.pre.rc.20 → 14.10.0.pre.rc.21

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 8004b611a0e7ed5891628daf08be8b7560b22d0faa48631442fc94116f6fba30
4
- data.tar.gz: 5e7b1d10c69dc6148f1778ea2d9c912cc220d199a54db0d9f9179c75ba5bfdd2
3
+ metadata.gz: 0b5b2dde029c1a805ef88ea1e6771b8cd9406daa6a13ecc29828b3c842292cdc
4
+ data.tar.gz: 40b8c61b5a5c93b5bbb43eac9d230a19fa9abe21056f8e87a9d10ac102e9527a
5
5
  SHA512:
6
- metadata.gz: 79e6cc10512af3e174eb5a6e11b9b638c63af121d7c9a398aaae6086e083bd3569dbcd2ab11dc0f436858a3c4c2aefe2d7677252c8cff64d5f60b75c211e4281
7
- data.tar.gz: 2405a386d65dc6880cc5ffb3dc835a7556caa55ce59eea569cf42205a6f090d1f9ad413fc29b52c210fef9e7d51c0d84e19aaf8eec7215746f1d847086ea08e9
6
+ metadata.gz: 152d244ee2616d0e82ca0baa68624222b7bf07cb7e40c05db4a120890a754ade64aebf69b1346e12bf737ae265b649ebf369ddf9d0aca3d26dcb8dbf01bc22b7
7
+ data.tar.gz: b590fcf5c3dde6875820a5b4afc5c9c3caf4ea91ba5187e3ad385103f5780b8dfceabddb91b45db48eb812f933d5b448c04439b1340e1a6a0bf202201fc6b572
@@ -120,7 +120,7 @@
120
120
 
121
121
  // Responsive Styles
122
122
  @media only screen and (max-width: $screen-xl-min) {
123
- &[class*="table-responsive-scroll"] {
123
+ &[class*="advanced-table-responsive-scroll"] {
124
124
  border-radius: 4px;
125
125
  box-shadow: 1px 0 0 0px $border_light,
126
126
  -1px 0 0 0px $border_light;
@@ -158,7 +158,7 @@
158
158
  }
159
159
  }
160
160
  @media only screen and (min-width: $screen-xl-min) {
161
- &[class*="table-responsive-scroll"] {
161
+ &[class*="advanced-table-responsive-scroll"] {
162
162
  overflow-x: visible;
163
163
  }
164
164
  }
@@ -208,7 +208,7 @@
208
208
  }
209
209
  // Dark Mode Responsive Styles
210
210
  @media only screen and (max-width: $screen-xl-min) {
211
- &[class*="table-responsive-scroll"] {
211
+ &[class*="advanced-table-responsive-scroll"] {
212
212
  border-radius: 4px;
213
213
  box-shadow: 1px 0 0 0px $border_dark,
214
214
  -1px 0 0 0px $border_dark;
@@ -240,7 +240,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
240
240
  const htmlProps = buildHtmlProps(htmlOptions)
241
241
  const classes = classnames(
242
242
  buildCss("pb_advanced_table"),
243
- `table-responsive-${responsive}`,
243
+ `advanced-table-responsive-${responsive}`,
244
244
  globalProps(props),
245
245
  className
246
246
  )
@@ -468,7 +468,7 @@ test("responsive prop functions as expected", () => {
468
468
  )
469
469
 
470
470
  const kit = screen.getByTestId(testId)
471
- expect(kit).toHaveClass("pb_advanced_table table-responsive-scroll")
471
+ expect(kit).toHaveClass("pb_advanced_table advanced-table-responsive-scroll")
472
472
  })
473
473
 
474
474
  test("responsive none prop functions as expected", () => {
@@ -483,7 +483,7 @@ test("responsive none prop functions as expected", () => {
483
483
  )
484
484
 
485
485
  const kit = screen.getByTestId(testId)
486
- expect(kit).toHaveClass("pb_advanced_table table-responsive-none")
486
+ expect(kit).toHaveClass("pb_advanced_table advanced-table-responsive-none")
487
487
  })
488
488
 
489
489
  test("customRenderer prop functions as expected", () => {
@@ -92,16 +92,16 @@ const Table = (props: TableProps): React.ReactElement => {
92
92
  useEffect(() => {
93
93
  const handleStickyColumns = () => {
94
94
  let accumulatedWidth = 0;
95
-
95
+
96
96
  stickyLeftcolumn.forEach((colId, index) => {
97
97
  const isLastColumn = index === stickyLeftcolumn.length - 1;
98
98
  const header = document.querySelector(`th[id="${colId}"]`);
99
99
  const cells = document.querySelectorAll(`td[id="${colId}"]`);
100
-
100
+
101
101
  if (header) {
102
102
  header.classList.add('sticky');
103
103
  (header as HTMLElement).style.left = `${accumulatedWidth}px`;
104
-
104
+
105
105
  if (!isLastColumn) {
106
106
  header.classList.add('with-border');
107
107
  header.classList.remove('sticky-shadow');
@@ -109,14 +109,14 @@ const Table = (props: TableProps): React.ReactElement => {
109
109
  header.classList.remove('with-border');
110
110
  header.classList.add('sticky-shadow');
111
111
  }
112
-
112
+
113
113
  accumulatedWidth += (header as HTMLElement).offsetWidth;
114
114
  }
115
-
115
+
116
116
  cells.forEach((cell) => {
117
117
  cell.classList.add('sticky');
118
118
  (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
119
-
119
+
120
120
  if (!isLastColumn) {
121
121
  cell.classList.add('with-border');
122
122
  cell.classList.remove('sticky-shadow');
@@ -25,16 +25,16 @@
25
25
  <td id="3">Value 3</td>
26
26
  <td>Value 4</td>
27
27
  <td>Value 5</td>
28
- <td>Column 6</td>
29
- <td>Column 7</td>
30
- <td>Column 8</td>
31
- <td>Column 9</td>
32
- <td>Column 10</td>
33
- <td>Column 11</td>
34
- <td>Column 12</td>
35
- <td>Column 13</td>
36
- <td>Column 14</td>
37
- <td>Column 15</td>
28
+ <td>Value 6</td>
29
+ <td>Value 7</td>
30
+ <td>Value 8</td>
31
+ <td>Value 9</td>
32
+ <td>Value 10</td>
33
+ <td>Value 11</td>
34
+ <td>Value 12</td>
35
+ <td>Value 13</td>
36
+ <td>Value 14</td>
37
+ <td>Value 15</td>
38
38
 
39
39
  </tr>
40
40
  <tr>
@@ -43,16 +43,16 @@
43
43
  <td id="3">Value 3</td>
44
44
  <td>Value 4</td>
45
45
  <td>Value 5</td>
46
- <td>Column 6</td>
47
- <td>Column 7</td>
48
- <td>Column 8</td>
49
- <td>Column 9</td>
50
- <td>Column 10</td>
51
- <td>Column 11</td>
52
- <td>Column 12</td>
53
- <td>Column 13</td>
54
- <td>Column 14</td>
55
- <td>Column 15</td>
46
+ <td>Value 6</td>
47
+ <td>Value 7</td>
48
+ <td>Value 8</td>
49
+ <td>Value 9</td>
50
+ <td>Value 10</td>
51
+ <td>Value 11</td>
52
+ <td>Value 12</td>
53
+ <td>Value 13</td>
54
+ <td>Value 14</td>
55
+ <td>Value 15</td>
56
56
 
57
57
  </tr>
58
58
  <tr>
@@ -61,34 +61,16 @@
61
61
  <td id="3">Value 3</td>
62
62
  <td>Value 4</td>
63
63
  <td>Value 5</td>
64
- <td>Column 6</td>
65
- <td>Column 7</td>
66
- <td>Column 8</td>
67
- <td>Column 9</td>
68
- <td>Column 10</td>
69
- <td>Column 11</td>
70
- <td>Column 12</td>
71
- <td>Column 13</td>
72
- <td>Column 14</td>
73
- <td>Column 15</td>
74
-
75
- </tr>
76
- <tr>
77
- <td id="1">Value 1</td>
78
- <td id="2">Value 2</td>
79
- <td id="3">Value 3</td>
80
- <td>Value 4</td>
81
- <td>Value 5</td>
82
- <td>Column 6</td>
83
- <td>Column 7</td>
84
- <td>Column 8</td>
85
- <td>Column 9</td>
86
- <td>Column 10</td>
87
- <td>Column 11</td>
88
- <td>Column 12</td>
89
- <td>Column 13</td>
90
- <td>Column 14</td>
91
- <td>Column 15</td>
64
+ <td>Value 6</td>
65
+ <td>Value 7</td>
66
+ <td>Value 8</td>
67
+ <td>Value 9</td>
68
+ <td>Value 10</td>
69
+ <td>Value 11</td>
70
+ <td>Value 12</td>
71
+ <td>Value 13</td>
72
+ <td>Value 14</td>
73
+ <td>Value 15</td>
92
74
 
93
75
  </tr>
94
76
  </tbody>
@@ -0,0 +1 @@
1
+ The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
@@ -4,6 +4,7 @@ examples:
4
4
  - table_md: Medium
5
5
  - table_lg: Large
6
6
  - table_sticky: Sticky Header
7
+ - table_sticky_left_columns: Sticky Left Column
7
8
  - table_header: Table Header
8
9
  - table_alignment_row_rails: Row Alignment
9
10
  - table_alignment_column_rails: Cell Alignment
@@ -33,6 +34,7 @@ examples:
33
34
  - table_md: Medium
34
35
  - table_lg: Large
35
36
  - table_sticky: Sticky Header
37
+ - table_sticky_left_columns: Sticky Left Column
36
38
  - table_alignment_row: Row Alignment
37
39
  - table_alignment_column: Cell Alignment
38
40
  - table_alignment_shift_row: Row Shift
@@ -51,9 +51,11 @@ export default class PbTable extends PbEnhancedElement {
51
51
  .split('-');
52
52
 
53
53
  if (this.stickyLeftColumns.length > 0) {
54
- this.handleStickyColumnsRef = this.handleStickyColumns.bind(this);
55
- this.handleStickyColumns();
56
- window.addEventListener('resize', this.handleStickyColumnsRef);
54
+ setTimeout(() => {
55
+ this.handleStickyColumnsRef = this.handleStickyColumns.bind(this);
56
+ this.handleStickyColumns();
57
+ window.addEventListener('resize', this.handleStickyColumnsRef);
58
+ }, 10);
57
59
  }
58
60
  }
59
61
  });
@@ -1,4 +1,29 @@
1
- .table-responsive-scroll {
2
- display: block;
3
- overflow-x: auto;
1
+ @import "../../tokens/screen_sizes";
2
+
3
+ .table-responsive-scroll {
4
+ display: block;
5
+ overflow-x: scroll;
6
+
7
+ // Responsive Styles
8
+ @media (max-width: 1600px) {
9
+ &[class*="table-responsive-scroll"] {
10
+ border-radius: 4px;
11
+ box-shadow: 1px 0 0 0px $border_light
12
+ }
13
+
14
+ &[class^=pb_table].table-sm.table-card thead tr th:last-child,
15
+ &[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
16
+ border-right-width: 0px;
17
+ }
18
+
19
+ &[class^=pb_table].table-md.table-card thead tr th:last-child,
20
+ &[class^=pb_table].table-md:not(.no-hover).table-card tbody tr td:last-child {
21
+ border-right-width: 0px;
22
+ }
23
+
24
+ &[class^=pb_table].table-lg.table-card thead tr th:last-child,
25
+ &[class^=pb_table].table-lg:not(.no-hover).table-card tbody tr td:last-child {
26
+ border-right-width: 0px;
27
+ }
4
28
  }
29
+ }
@@ -3,7 +3,6 @@
3
3
  [class^="pb_table"] {
4
4
  .sticky {
5
5
  position: sticky !important;
6
- left: 0;
7
6
  z-index: 1;
8
7
  background-color: white;
9
8
  }
@@ -1,4 +1,10 @@
1
- <%= content_tag(:div) do %>
1
+ <% if object.responsive_classname %>
2
+ <% responsive_class = object.responsive_classname %>
3
+ <% else %>
4
+ <% responsive_class = nil %>
5
+ <% end %>
6
+
7
+ <%= content_tag(:div, class: responsive_class) do %>
2
8
  <% if object.tag == "table" %>
3
9
  <%= content_tag(:table,
4
10
  aria: object.aria,
@@ -45,6 +45,10 @@ module Playbook
45
45
  )
46
46
  end
47
47
 
48
+ def responsive_classname
49
+ responsive ? "table-responsive-#{responsive}" : nil
50
+ end
51
+
48
52
  private
49
53
 
50
54
  def dark_class
@@ -1,4 +1,4 @@
1
- import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useEffect,useMemo,useContext,useRef,createElement,useState,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{r as getDefaultExportFromCjs,x as filter,y as omit,u as useCollapsible,j as getAllIcons,z as get,q as commonjsGlobal,w as colors$1,t as highchartsTheme,A as merge,s as highchartsDarkTheme,B as getAugmentedNamespace,C as createPopper,E as uniqueId,F as typography,G as cloneDeep,H as isString}from"./lib-CuCy3_xO.js";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";import{TrixEditor}from"react-trix";import Trix from"trix";import require$$0 from"react-is";const initialState={items:[],dragData:{id:"",initialGroup:""},isDragging:"",activeContainer:""};const reducer=(state,action)=>{switch(action.type){case"SET_ITEMS":return Object.assign(Object.assign({},state),{items:action.payload});case"SET_DRAG_DATA":return Object.assign(Object.assign({},state),{dragData:action.payload});case"SET_IS_DRAGGING":return Object.assign(Object.assign({},state),{isDragging:action.payload});case"SET_ACTIVE_CONTAINER":return Object.assign(Object.assign({},state),{activeContainer:action.payload});case"CHANGE_CATEGORY":return Object.assign(Object.assign({},state),{items:state.items.map((item=>item.id===action.payload.itemId?Object.assign(Object.assign({},item),{container:action.payload.container}):item))});case"REORDER_ITEMS":{const{dragId:dragId,targetId:targetId}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item.id===dragId));const draggedIndex=newItems.indexOf(draggedItem);const targetIndex=newItems.findIndex((item=>item.id===targetId));newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return Object.assign(Object.assign({},state),{items:newItems})}default:return state}};const DragContext=createContext({});const DraggableContext=()=>useContext(DragContext);const DraggableProvider=({children:children,initialItems:initialItems,onReorder:onReorder,onDragStart:onDragStart,onDragEnter:onDragEnter,onDragEnd:onDragEnd,onDrop:onDrop,onDragOver:onDragOver})=>{const[state,dispatch]=useReducer(reducer,initialState);useEffect((()=>{dispatch({type:"SET_ITEMS",payload:initialItems})}),[initialItems]);useEffect((()=>{onReorder(state.items)}),[state.items]);const handleDragStart=(id,container)=>{dispatch({type:"SET_DRAG_DATA",payload:{id:id,initialGroup:container}});dispatch({type:"SET_IS_DRAGGING",payload:id});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{if(state.dragData.id!==id){dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}});dispatch({type:"SET_DRAG_DATA",payload:{id:state.dragData.id,initialGroup:container}})}if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});if(onDragEnd)onDragEnd()};const changeCategory=(itemId,container)=>{dispatch({type:"CHANGE_CATEGORY",payload:{itemId:itemId,container:container}})};const handleDrop=container=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});changeCategory(state.dragData.id,container);if(onDrop)onDrop(container)};const handleDragOver=(e,container)=>{e.preventDefault();dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragOver)onDragOver(e,container)};const contextValue=useMemo((()=>({items:state.items,dragData:state.dragData,isDragging:state.isDragging,activeContainer:state.activeContainer,handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state]);return jsx$1(DragContext.Provider,Object.assign({value:contextValue},{children:children}),void 0)};var classnames$1={exports:{}};
1
+ import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useEffect,useMemo,useContext,useRef,createElement,useState,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{r as getDefaultExportFromCjs,x as filter,y as omit,u as useCollapsible,j as getAllIcons,z as get,q as commonjsGlobal,w as colors$1,t as highchartsTheme,A as merge,s as highchartsDarkTheme,B as getAugmentedNamespace,C as createPopper,E as uniqueId,F as typography,G as cloneDeep,H as isString}from"./lib-sMFo2JZy.js";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";import{TrixEditor}from"react-trix";import Trix from"trix";import require$$0 from"react-is";const initialState={items:[],dragData:{id:"",initialGroup:""},isDragging:"",activeContainer:""};const reducer=(state,action)=>{switch(action.type){case"SET_ITEMS":return Object.assign(Object.assign({},state),{items:action.payload});case"SET_DRAG_DATA":return Object.assign(Object.assign({},state),{dragData:action.payload});case"SET_IS_DRAGGING":return Object.assign(Object.assign({},state),{isDragging:action.payload});case"SET_ACTIVE_CONTAINER":return Object.assign(Object.assign({},state),{activeContainer:action.payload});case"CHANGE_CATEGORY":return Object.assign(Object.assign({},state),{items:state.items.map((item=>item.id===action.payload.itemId?Object.assign(Object.assign({},item),{container:action.payload.container}):item))});case"REORDER_ITEMS":{const{dragId:dragId,targetId:targetId}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item.id===dragId));const draggedIndex=newItems.indexOf(draggedItem);const targetIndex=newItems.findIndex((item=>item.id===targetId));newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return Object.assign(Object.assign({},state),{items:newItems})}default:return state}};const DragContext=createContext({});const DraggableContext=()=>useContext(DragContext);const DraggableProvider=({children:children,initialItems:initialItems,onReorder:onReorder,onDragStart:onDragStart,onDragEnter:onDragEnter,onDragEnd:onDragEnd,onDrop:onDrop,onDragOver:onDragOver})=>{const[state,dispatch]=useReducer(reducer,initialState);useEffect((()=>{dispatch({type:"SET_ITEMS",payload:initialItems})}),[initialItems]);useEffect((()=>{onReorder(state.items)}),[state.items]);const handleDragStart=(id,container)=>{dispatch({type:"SET_DRAG_DATA",payload:{id:id,initialGroup:container}});dispatch({type:"SET_IS_DRAGGING",payload:id});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{if(state.dragData.id!==id){dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}});dispatch({type:"SET_DRAG_DATA",payload:{id:state.dragData.id,initialGroup:container}})}if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});if(onDragEnd)onDragEnd()};const changeCategory=(itemId,container)=>{dispatch({type:"CHANGE_CATEGORY",payload:{itemId:itemId,container:container}})};const handleDrop=container=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});changeCategory(state.dragData.id,container);if(onDrop)onDrop(container)};const handleDragOver=(e,container)=>{e.preventDefault();dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragOver)onDragOver(e,container)};const contextValue=useMemo((()=>({items:state.items,dragData:state.dragData,isDragging:state.isDragging,activeContainer:state.activeContainer,handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state]);return jsx$1(DragContext.Provider,Object.assign({value:contextValue},{children:children}),void 0)};var classnames$1={exports:{}};
2
2
  /*!
3
3
  Copyright (c) 2018 Jed Watson.
4
4
  Licensed under the MIT License (MIT), see