playbook_ui 14.16.0.pre.alpha.PBNTR924reacttablecustomheaders6846 → 14.16.0.pre.alpha.play1957inlinedatepickericonbugfix6872
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +34 -34
- data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +2 -2
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +16 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb +0 -11
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.jsx +0 -7
- data/app/pb_kits/playbook/pb_date_picker/sass_partials/_inline_styles.scss +28 -24
- data/app/pb_kits/playbook/pb_table/_table.tsx +0 -4
- data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_table/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_table/styles/_headers.scss +0 -76
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx +1 -11
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx +1 -11
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +0 -5
- data/app/pb_kits/playbook/pb_table/table.test.js +0 -17
- data/dist/chunks/{_typeahead-HN7DWIZV.js → _typeahead-BniHPQq8.js} +1 -1
- data/dist/chunks/_weekday_stacked-CuaFaMk8.js +45 -0
- data/dist/chunks/{lib-Co5y3V4K.js → lib-UIelzz2O.js} +1 -1
- data/dist/chunks/{pb_form_validation-DMajaRt3.js → pb_form_validation-EUv1tqtI.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +6 -10
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.jsx +0 -50
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_react.md +0 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.jsx +0 -59
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md +0 -1
- data/dist/chunks/_weekday_stacked-CEWwCgZj.js +0 -45
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 6ac4260b02869cad3eaa3d0c49e523d9f4a4463cfccf98858f504172eaf1d601
|
|
4
|
+
data.tar.gz: 1f91664b626b1362cf6b61ebf15ae1681830e96a3fb6d2bcd8601a2c50ea4a7a
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 1176546d1665cfe26fa78e48ad632470539f9b5bef9be47c28f60b238901c6237e236b413d09856ecde5d8f1166b3f9cc22e0c45e3e1d96c170b68d28dc2eeef
|
|
7
|
+
data.tar.gz: 327c8ebe3c86777bffeb9af8b56ba1ab2ff2033b2245d728170ae3d86a164881abd90a0bbf691a01bce8c000a2bef515609e3c463313a4869ec36915e9e396c7
|
|
@@ -106,41 +106,41 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
|
|
106
106
|
const inputAriaProps = buildAriaProps(inputAria)
|
|
107
107
|
const inputDataProps = buildDataProps(inputData)
|
|
108
108
|
|
|
109
|
-
useEffect(() => {
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
}, initializeOnce ? [] : undefined)
|
|
109
|
+
useEffect(() => {
|
|
110
|
+
datePickerHelper({
|
|
111
|
+
allowInput,
|
|
112
|
+
customQuickPickDates,
|
|
113
|
+
defaultDate,
|
|
114
|
+
disableDate,
|
|
115
|
+
disableRange,
|
|
116
|
+
disableWeekdays,
|
|
117
|
+
enableTime,
|
|
118
|
+
format,
|
|
119
|
+
hideIcon,
|
|
120
|
+
inLine,
|
|
121
|
+
maxDate,
|
|
122
|
+
minDate,
|
|
123
|
+
mode,
|
|
124
|
+
onChange,
|
|
125
|
+
onClose,
|
|
126
|
+
pickerId,
|
|
127
|
+
plugins,
|
|
128
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
129
|
+
// @ts-ignore
|
|
130
|
+
position,
|
|
131
|
+
positionElement,
|
|
132
|
+
selectionType,
|
|
133
|
+
showTimezone,
|
|
134
|
+
staticPosition,
|
|
135
|
+
thisRangesEndToday,
|
|
136
|
+
yearRange,
|
|
137
|
+
required: false,
|
|
138
|
+
}, scrollContainer)
|
|
139
|
+
}, initializeOnce ? [] : undefined)
|
|
140
140
|
const filteredProps = {...props}
|
|
141
141
|
if (filteredProps.marginBottom === undefined) {
|
|
142
142
|
filteredProps.marginBottom = "sm"
|
|
143
|
-
}
|
|
143
|
+
}
|
|
144
144
|
delete filteredProps?.position
|
|
145
145
|
|
|
146
146
|
const classes = classnames(
|
|
@@ -221,7 +221,7 @@ useEffect(() => {
|
|
|
221
221
|
{hideIcon && inLine ?
|
|
222
222
|
<div>
|
|
223
223
|
<div
|
|
224
|
-
className={iconWrapperClass()}
|
|
224
|
+
className={`${iconWrapperClass()} date-picker-inline-icon-plus`}
|
|
225
225
|
id={`${pickerId}-icon-plus`}
|
|
226
226
|
>
|
|
227
227
|
<Icon
|
|
@@ -230,7 +230,7 @@ useEffect(() => {
|
|
|
230
230
|
/>
|
|
231
231
|
</div>
|
|
232
232
|
<div
|
|
233
|
-
className={iconWrapperClass()}
|
|
233
|
+
className={`${iconWrapperClass()} date-picker-inline-angle-down`}
|
|
234
234
|
id={`${pickerId}-angle-down`}
|
|
235
235
|
>
|
|
236
236
|
<Icon
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
<% if object.hide_icon && object.inline %>
|
|
45
45
|
<!-- Plus Icon -->
|
|
46
46
|
<div
|
|
47
|
-
class="<%= object.icon_wrapper_class %>"
|
|
47
|
+
class="<%= object.icon_wrapper_class %> date-picker-inline-icon-plus"
|
|
48
48
|
id="<%= object.picker_id %>-icon-plus"
|
|
49
49
|
>
|
|
50
50
|
<%= pb_rails("icon", props: {
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
|
|
56
56
|
<!-- Angle Down Icon -->
|
|
57
57
|
<div
|
|
58
|
-
class="<%= object.icon_wrapper_class %>"
|
|
58
|
+
class="<%= object.icon_wrapper_class %> date-picker-inline-angle-down"
|
|
59
59
|
id="<%= object.picker_id %>-angle-down"
|
|
60
60
|
>
|
|
61
61
|
<%= pb_rails("icon", props: {
|
|
@@ -174,6 +174,21 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
|
174
174
|
yearInput.value = fp.currentYear?.toString()
|
|
175
175
|
}
|
|
176
176
|
|
|
177
|
+
const handleDatePickerChange = (fp: Instance, selectedDates: Date[]) => {
|
|
178
|
+
const inputEl = fp.input
|
|
179
|
+
|
|
180
|
+
if (inputEl) {
|
|
181
|
+
const inlineDatePickerElem = inputEl.closest('.inline-date-picker')
|
|
182
|
+
if (inlineDatePickerElem) {
|
|
183
|
+
if (selectedDates && selectedDates.length > 0) {
|
|
184
|
+
inlineDatePickerElem.classList.add('show-angle-down-icon')
|
|
185
|
+
} else {
|
|
186
|
+
inlineDatePickerElem.classList.remove('show-angle-down-icon')
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
|
|
177
192
|
// ===========================================================
|
|
178
193
|
// | Flatpickr initializer w/ config |
|
|
179
194
|
// ===========================================================
|
|
@@ -204,6 +219,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
|
204
219
|
onClose(selectedDates, dateStr)
|
|
205
220
|
}],
|
|
206
221
|
onChange: [(selectedDates, dateStr, fp) => {
|
|
222
|
+
handleDatePickerChange(fp, selectedDates)
|
|
207
223
|
yearChangeHook(fp)
|
|
208
224
|
onChange(dateStr, selectedDates)
|
|
209
225
|
}],
|
|
@@ -4,14 +4,3 @@
|
|
|
4
4
|
inline: true,
|
|
5
5
|
picker_id: "date-picker-inline"
|
|
6
6
|
}) %>
|
|
7
|
-
|
|
8
|
-
<%= javascript_tag do %>
|
|
9
|
-
window.addEventListener("DOMContentLoaded", (event) => {
|
|
10
|
-
const fpInline = document.querySelector("#date-picker-inline")._flatpickr
|
|
11
|
-
<!-- Display the angle-down icon when a date has been selected -->
|
|
12
|
-
const showAngleDownHandler = () => {
|
|
13
|
-
document.querySelector('.inline-date-picker').classList.add('show-angle-down-icon')
|
|
14
|
-
}
|
|
15
|
-
fpInline.config.onChange.push(showAngleDownHandler)
|
|
16
|
-
})
|
|
17
|
-
<% end %>
|
|
@@ -3,19 +3,12 @@ import React from 'react'
|
|
|
3
3
|
import DatePicker from '../_date_picker'
|
|
4
4
|
|
|
5
5
|
const DatePickerInline = (props) => {
|
|
6
|
-
const showAngleDownHandler = (dateSelected) => {
|
|
7
|
-
if (dateSelected) {
|
|
8
|
-
document.querySelector('.inline-date-picker').classList.add('show-angle-down-icon')
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
|
|
12
6
|
return (
|
|
13
7
|
<div>
|
|
14
8
|
<DatePicker
|
|
15
9
|
className="inline-date-picker"
|
|
16
10
|
hideIcon
|
|
17
11
|
inLine
|
|
18
|
-
onChange={showAngleDownHandler}
|
|
19
12
|
pickerId="date-picker-inline"
|
|
20
13
|
{...props}
|
|
21
14
|
/>
|
|
@@ -14,12 +14,12 @@
|
|
|
14
14
|
opacity: 1;
|
|
15
15
|
}
|
|
16
16
|
&:not(:hover) {
|
|
17
|
-
|
|
17
|
+
.date-picker-inline-angle-down.cal_icon_wrapper {
|
|
18
18
|
svg {
|
|
19
19
|
display: none;
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
|
-
|
|
22
|
+
.date-picker-inline-icon-plus.cal_icon_wrapper {
|
|
23
23
|
svg {
|
|
24
24
|
color: $slate;
|
|
25
25
|
display: inline-block;
|
|
@@ -33,12 +33,12 @@
|
|
|
33
33
|
[class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
|
|
34
34
|
color: $primary;
|
|
35
35
|
}
|
|
36
|
-
|
|
36
|
+
.date-picker-inline-angle-down.cal_icon_wrapper {
|
|
37
37
|
svg {
|
|
38
38
|
display: none;
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
|
-
|
|
41
|
+
.date-picker-inline-icon-plus.cal_icon_wrapper {
|
|
42
42
|
svg {
|
|
43
43
|
display: inline-block;
|
|
44
44
|
color: $primary;
|
|
@@ -47,32 +47,34 @@
|
|
|
47
47
|
}
|
|
48
48
|
&.show-angle-down-icon {
|
|
49
49
|
&:not(:hover) {
|
|
50
|
-
|
|
50
|
+
.date-picker-inline-angle-down.cal_icon_wrapper {
|
|
51
51
|
svg {
|
|
52
52
|
display: inline-block;
|
|
53
53
|
color: $text_lt_light;
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
|
-
|
|
56
|
+
.date-picker-inline-icon-plus.cal_icon_wrapper {
|
|
57
57
|
svg {
|
|
58
58
|
display: none;
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
}
|
|
62
|
-
|
|
62
|
+
.date-picker-inline-icon-plus.cal_icon_wrapper {
|
|
63
63
|
svg {
|
|
64
64
|
display: none;
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
|
-
|
|
67
|
+
.date-picker-inline-angle-down.cal_icon_wrapper {
|
|
68
68
|
svg {
|
|
69
69
|
display: inline-block;
|
|
70
70
|
color: $primary;
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
|
-
|
|
75
|
-
|
|
74
|
+
.date_picker_input.flatpickr-input,
|
|
75
|
+
.date_picker_input.flatpickr-input .active,
|
|
76
|
+
.text_input.flatpickr-input,
|
|
77
|
+
.text_input.flatpickr-input .active {
|
|
76
78
|
border: none;
|
|
77
79
|
padding: 5px 5px 5px 10px;
|
|
78
80
|
background-color: #FFF;
|
|
@@ -82,8 +84,8 @@
|
|
|
82
84
|
box-shadow: none;
|
|
83
85
|
}
|
|
84
86
|
}
|
|
85
|
-
|
|
86
|
-
|
|
87
|
+
.date-picker-inline-angle-down.cal_icon_wrapper,
|
|
88
|
+
.date-picker-inline-icon-plus.cal_icon_wrapper {
|
|
87
89
|
height: 33px;
|
|
88
90
|
border: none;
|
|
89
91
|
}
|
|
@@ -96,12 +98,12 @@
|
|
|
96
98
|
[class^=pb_date_picker_kit].dark {
|
|
97
99
|
&.inline-date-picker {
|
|
98
100
|
&:not(:hover) {
|
|
99
|
-
|
|
101
|
+
.date-picker-inline-angle-down.cal_icon_wrapper {
|
|
100
102
|
svg {
|
|
101
103
|
display: none;
|
|
102
104
|
}
|
|
103
105
|
}
|
|
104
|
-
|
|
106
|
+
.date-picker-inline-icon-plus.cal_icon_wrapper {
|
|
105
107
|
svg {
|
|
106
108
|
display: inline-block;
|
|
107
109
|
color: $white;
|
|
@@ -115,12 +117,12 @@
|
|
|
115
117
|
[class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
|
|
116
118
|
color: $white;
|
|
117
119
|
}
|
|
118
|
-
|
|
120
|
+
.date-picker-inline-angle-down.cal_icon_wrapper {
|
|
119
121
|
svg {
|
|
120
122
|
display: none;
|
|
121
123
|
}
|
|
122
124
|
}
|
|
123
|
-
|
|
125
|
+
.date-picker-inline-icon-plus.cal_icon_wrapper {
|
|
124
126
|
svg {
|
|
125
127
|
display: inline-block;
|
|
126
128
|
color: $white;
|
|
@@ -129,32 +131,34 @@
|
|
|
129
131
|
}
|
|
130
132
|
&.show-angle-down-icon {
|
|
131
133
|
&:not(:hover) {
|
|
132
|
-
|
|
134
|
+
.date-picker-inline-angle-down.cal_icon_wrapper {
|
|
133
135
|
svg {
|
|
134
136
|
display: inline-block;
|
|
135
137
|
color: $white;
|
|
136
138
|
}
|
|
137
139
|
}
|
|
138
|
-
|
|
140
|
+
.date-picker-inline-icon-plus.cal_icon_wrapper {
|
|
139
141
|
svg {
|
|
140
142
|
display: none;
|
|
141
143
|
}
|
|
142
144
|
}
|
|
143
145
|
}
|
|
144
|
-
|
|
146
|
+
.date-picker-inline-icon-plus.cal_icon_wrapper {
|
|
145
147
|
svg {
|
|
146
148
|
display: none;
|
|
147
149
|
}
|
|
148
150
|
}
|
|
149
|
-
|
|
151
|
+
.date-picker-inline-angle-down.cal_icon_wrapper {
|
|
150
152
|
svg {
|
|
151
153
|
display: inline-block;
|
|
152
154
|
color: $white;
|
|
153
155
|
}
|
|
154
156
|
}
|
|
155
157
|
}
|
|
156
|
-
|
|
157
|
-
|
|
158
|
+
.date_picker_input.flatpickr-input,
|
|
159
|
+
.date_picker_input.flatpickr-input .active,
|
|
160
|
+
.text_input.flatpickr-input,
|
|
161
|
+
.text_input.flatpickr-input .active {
|
|
158
162
|
background-color: rgba($white,.10);
|
|
159
163
|
border: none;
|
|
160
164
|
padding: 5px 5px 5px 10px;
|
|
@@ -164,8 +168,8 @@
|
|
|
164
168
|
box-shadow: none;
|
|
165
169
|
}
|
|
166
170
|
}
|
|
167
|
-
|
|
168
|
-
|
|
171
|
+
.date-picker-inline-angle-down.cal_icon_wrapper,
|
|
172
|
+
.date-picker-inline-icon-plus.cal_icon_wrapper {
|
|
169
173
|
height: 33px;
|
|
170
174
|
border: none;
|
|
171
175
|
}
|
|
@@ -21,7 +21,6 @@ type TableProps = {
|
|
|
21
21
|
data?: { [key: string]: string },
|
|
22
22
|
dataTable: boolean,
|
|
23
23
|
disableHover?: boolean,
|
|
24
|
-
headerStyle?: "default" | "borderless" | "floating"
|
|
25
24
|
htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
|
|
26
25
|
id?: string,
|
|
27
26
|
outerPadding?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
|
|
@@ -47,7 +46,6 @@ const Table = (props: TableProps): React.ReactElement => {
|
|
|
47
46
|
data = {},
|
|
48
47
|
dataTable = false,
|
|
49
48
|
disableHover = false,
|
|
50
|
-
headerStyle = "default",
|
|
51
49
|
htmlOptions = {},
|
|
52
50
|
id,
|
|
53
51
|
outerPadding = '',
|
|
@@ -87,8 +85,6 @@ const Table = (props: TableProps): React.ReactElement => {
|
|
|
87
85
|
'sticky-left-column': stickyLeftColumn,
|
|
88
86
|
'sticky-right-column': stickyRightColumn,
|
|
89
87
|
'striped': striped,
|
|
90
|
-
'header-borderless': headerStyle === 'borderless',
|
|
91
|
-
'header-floating': headerStyle === 'floating',
|
|
92
88
|
[outerPaddingCss]: outerPadding !== '',
|
|
93
89
|
},
|
|
94
90
|
globalProps(props),
|
|
@@ -75,5 +75,3 @@ examples:
|
|
|
75
75
|
- table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table
|
|
76
76
|
- table_with_clickable_rows: Table with Clickable Rows
|
|
77
77
|
- table_with_selectable_rows: Table with Selectable Rows
|
|
78
|
-
- table_with_header_style_borderless: Header Style Borderless
|
|
79
|
-
- table_with_header_style_floating: Header Style Floating
|
|
@@ -35,5 +35,3 @@ export { default as TableWithCollapsibleWithNestedRows } from './_table_with_col
|
|
|
35
35
|
export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
|
|
36
36
|
export { default as TableWithSelectableRows } from './_table_with_selectable_rows.jsx'
|
|
37
37
|
export { default as TableWithClickableRows } from './_table_with_clickable_rows.jsx'
|
|
38
|
-
export { default as TableWithHeaderStyleBorderless } from './_table_with_header_style_borderless.jsx'
|
|
39
|
-
export { default as TableWithHeaderStyleFloating } from './_table_with_header_style_floating.jsx'
|
|
@@ -14,79 +14,3 @@
|
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
|
-
// remove all outward facing borders from header
|
|
18
|
-
.header-borderless > thead,
|
|
19
|
-
.header-borderless > thead > tr,
|
|
20
|
-
.header-borderless > thead > tr > th,
|
|
21
|
-
.header-borderless > .pb_table_thead,
|
|
22
|
-
.header-borderless > .pb_table_thead > .pb_table_tr,
|
|
23
|
-
.header-borderless > .pb_table_thead .pb_table_th {
|
|
24
|
-
border-top: none !important;
|
|
25
|
-
border-left: none !important;
|
|
26
|
-
border-right: none !important;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
// remove bottom border (internal to table) on header cells - only light mode needs this redundancy handled likely due to a difference in the base scss and table-dark.scss
|
|
30
|
-
.header-borderless:not(.table-dark) > thead > tr:last-child > th,
|
|
31
|
-
.header-borderless:not(.table-dark) > .pb_table_thead > .pb_table_tr:last-child > .pb_table_th {
|
|
32
|
-
border-bottom: none !important;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
// preserves top rounded corners to header at top of table-card for unnested card
|
|
36
|
-
.header-borderless > thead > tr:first-child > th:first-child,
|
|
37
|
-
.header-borderless > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child {
|
|
38
|
-
border-top-left-radius: $border_radius_md !important;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.header-borderless > thead > tr:first-child > th:last-child,
|
|
42
|
-
.header-borderless > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child {
|
|
43
|
-
border-top-right-radius: $border_radius_md !important;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
// ensures top border is from first row of body to prevent double borders
|
|
47
|
-
.header-borderless > tbody > tr:first-child > td,
|
|
48
|
-
.header-borderless > .pb_table_tbody > .pb_table_tr:first-child > .pb_table_td {
|
|
49
|
-
border-top: 1px solid $border_light !important;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
// floating code - this carries over everything for header-borderless
|
|
53
|
-
.header-floating > thead,
|
|
54
|
-
.header-floating > thead > tr,
|
|
55
|
-
.header-floating > thead > tr > th,
|
|
56
|
-
.header-floating > .pb_table_thead,
|
|
57
|
-
.header-floating > .pb_table_thead > .pb_table_tr,
|
|
58
|
-
.header-floating > .pb_table_thead .pb_table_th {
|
|
59
|
-
border-top: none !important;
|
|
60
|
-
border-left: none !important;
|
|
61
|
-
border-right: none !important;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.header-floating:not(.table-dark) > thead > tr:last-child > th,
|
|
65
|
-
.header-floating:not(.table-dark) > .pb_table_thead > .pb_table_tr:last-child > .pb_table_th {
|
|
66
|
-
border-bottom: none !important;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.header-floating > thead > tr:first-child > th:first-child,
|
|
70
|
-
.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child {
|
|
71
|
-
border-top-left-radius: $border_radius_md !important;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.header-floating > thead > tr:first-child > th:last-child,
|
|
75
|
-
.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child {
|
|
76
|
-
border-top-right-radius: $border_radius_md !important;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.header-floating > tbody > tr:first-child > td,
|
|
80
|
-
.header-floating > .pb_table_tbody > .pb_table_tr:first-child > .pb_table_td {
|
|
81
|
-
border-top: 1px solid $border_light !important;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
// flatten out corners for floating headerstyle variant to avoid small triangle of white/empty space
|
|
85
|
-
.header-floating > thead > tr:first-child > th:first-child,
|
|
86
|
-
.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child {
|
|
87
|
-
border-top-left-radius: 0 !important;
|
|
88
|
-
}
|
|
89
|
-
.header-floating > thead > tr:first-child > th:last-child,
|
|
90
|
-
.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child {
|
|
91
|
-
border-top-right-radius: 0 !important;
|
|
92
|
-
}
|
|
@@ -12,7 +12,6 @@ type TableHeadPropTypes = {
|
|
|
12
12
|
children: React.ReactNode[] | React.ReactNode;
|
|
13
13
|
className: string;
|
|
14
14
|
data?: { [key: string]: string };
|
|
15
|
-
headerStyle?: "default" | "borderless" | "floating";
|
|
16
15
|
htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
|
|
17
16
|
id?: string;
|
|
18
17
|
tag?: "table" | "div";
|
|
@@ -24,7 +23,6 @@ const TableHead = (props: TableHeadPropTypes): React.ReactElement => {
|
|
|
24
23
|
children,
|
|
25
24
|
className,
|
|
26
25
|
data = {},
|
|
27
|
-
headerStyle = "default",
|
|
28
26
|
htmlOptions = {},
|
|
29
27
|
id,
|
|
30
28
|
tag = "table",
|
|
@@ -33,15 +31,7 @@ const TableHead = (props: TableHeadPropTypes): React.ReactElement => {
|
|
|
33
31
|
const ariaProps = buildAriaProps(aria);
|
|
34
32
|
const dataProps = buildDataProps(data);
|
|
35
33
|
const htmlProps = buildHtmlProps(htmlOptions);
|
|
36
|
-
const classes = classnames(
|
|
37
|
-
"pb_table_thead",
|
|
38
|
-
{
|
|
39
|
-
"pb_table_thead_borderless": headerStyle === "borderless" || headerStyle === "floating",
|
|
40
|
-
"pb_table_thead_floating": headerStyle === "floating",
|
|
41
|
-
},
|
|
42
|
-
globalProps(props),
|
|
43
|
-
className
|
|
44
|
-
);
|
|
34
|
+
const classes = classnames("pb_table_thead", globalProps(props), className);
|
|
45
35
|
const isTableTag = tag === "table";
|
|
46
36
|
|
|
47
37
|
return (
|
|
@@ -12,7 +12,6 @@ type TableHeaderPropTypes = {
|
|
|
12
12
|
children: React.ReactNode[] | React.ReactNode;
|
|
13
13
|
className: string;
|
|
14
14
|
data?: { [key: string]: string };
|
|
15
|
-
headerStyle?: "default" | "borderless" | "floating";
|
|
16
15
|
htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
|
|
17
16
|
id?: string;
|
|
18
17
|
tag?: "table" | "div";
|
|
@@ -25,7 +24,6 @@ const TableHeader = (props: TableHeaderPropTypes): React.ReactElement => {
|
|
|
25
24
|
children,
|
|
26
25
|
className,
|
|
27
26
|
data = {},
|
|
28
|
-
headerStyle = "default",
|
|
29
27
|
htmlOptions = {},
|
|
30
28
|
id,
|
|
31
29
|
tag = "table",
|
|
@@ -35,15 +33,7 @@ const TableHeader = (props: TableHeaderPropTypes): React.ReactElement => {
|
|
|
35
33
|
const ariaProps = buildAriaProps(aria);
|
|
36
34
|
const dataProps = buildDataProps(data);
|
|
37
35
|
const htmlProps = buildHtmlProps(htmlOptions);
|
|
38
|
-
const classes = classnames(
|
|
39
|
-
"pb_table_th",
|
|
40
|
-
{
|
|
41
|
-
"pb_table_thead_borderless": headerStyle === "borderless" || headerStyle === "floating",
|
|
42
|
-
"pb_table_thead_floating": headerStyle === "floating",
|
|
43
|
-
},
|
|
44
|
-
globalProps(props),
|
|
45
|
-
className
|
|
46
|
-
);
|
|
36
|
+
const classes = classnames("pb_table_th", globalProps(props), className);
|
|
47
37
|
const isTableTag = tag === "table";
|
|
48
38
|
|
|
49
39
|
return (
|
|
@@ -22,7 +22,6 @@ type TableRowPropTypes = {
|
|
|
22
22
|
dark?: boolean;
|
|
23
23
|
dragId?: string;
|
|
24
24
|
draggableItem?: boolean;
|
|
25
|
-
headerStyle?: "default" | "borderless" | "floating";
|
|
26
25
|
htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
|
|
27
26
|
id?: string;
|
|
28
27
|
toggleCellId?: string;
|
|
@@ -42,7 +41,6 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
|
|
|
42
41
|
dark = false,
|
|
43
42
|
dragId,
|
|
44
43
|
draggableItem = false,
|
|
45
|
-
headerStyle = "default",
|
|
46
44
|
htmlOptions = {},
|
|
47
45
|
id,
|
|
48
46
|
toggleCellId,
|
|
@@ -62,9 +60,6 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
|
|
|
62
60
|
const classes = classnames(
|
|
63
61
|
buildCss("pb_table_row_kit", sideHighlightClass),
|
|
64
62
|
"pb_table_tr",
|
|
65
|
-
{
|
|
66
|
-
"pb_table_tr_borderless_header": headerStyle === "borderless",
|
|
67
|
-
},
|
|
68
63
|
collapsibleRow,
|
|
69
64
|
globalProps(props),
|
|
70
65
|
className
|
|
@@ -167,20 +167,3 @@ test("Should have outerPadding class", () => {
|
|
|
167
167
|
const kit = renderKit(Table, props, { outerPadding: "sm" })
|
|
168
168
|
expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card outer_padding_space_sm table-collapse-sm")
|
|
169
169
|
})
|
|
170
|
-
|
|
171
|
-
test("when headerStyle is default", () => {
|
|
172
|
-
const kit = renderKit(Table, props)
|
|
173
|
-
expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card table-collapse-sm")
|
|
174
|
-
expect(kit).not.toHaveClass("header-borderless")
|
|
175
|
-
expect(kit).not.toHaveClass("header-floating")
|
|
176
|
-
})
|
|
177
|
-
|
|
178
|
-
test("when headerStyle is borderless", () => {
|
|
179
|
-
const kit = renderKit(Table, props, { headerStyle: "borderless" })
|
|
180
|
-
expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card header-borderless table-collapse-sm")
|
|
181
|
-
})
|
|
182
|
-
|
|
183
|
-
test("when headerStyle is floating", () => {
|
|
184
|
-
const kit = renderKit(Table, props, { headerStyle: "floating" })
|
|
185
|
-
expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card header-floating table-collapse-sm")
|
|
186
|
-
})
|
|
@@ -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,createElement,useRef,forwardRef,useState,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{n as getDefaultExportFromCjs,r as omit,u as useCollapsible,j as getAllIcons,l as commonjsGlobal,q as colors$1,p as highchartsTheme,o as highchartsDarkTheme,s as getAugmentedNamespace,t as createPopper,v as typography,w as cloneDeep}from"./lib-
|
|
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,createElement,useRef,forwardRef,useState,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{n as getDefaultExportFromCjs,r as omit,u as useCollapsible,j as getAllIcons,l as commonjsGlobal,q as colors$1,p as highchartsTheme,o as highchartsDarkTheme,s as getAugmentedNamespace,t as createPopper,v as typography,w as cloneDeep}from"./lib-UIelzz2O.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{...state,items:action.payload};case"SET_DRAG_DATA":return{...state,dragData:action.payload};case"SET_IS_DRAGGING":return{...state,isDragging:action.payload};case"SET_ACTIVE_CONTAINER":return{...state,activeContainer:action.payload};case"CHANGE_CATEGORY":return{...state,items:state.items.map((item=>item.id===action.payload.itemId?{...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{...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,dropZone:dropZone={type:"ghost",color:"neutral",direction:"vertical"}})=>{const[state,dispatch]=useReducer(reducer,initialState);let dropZoneType="ghost";let dropZoneColor="neutral";let dropZoneDirection="vertical";if(typeof dropZone==="string"){dropZoneType=dropZone}else{dropZoneType=dropZone.type||"ghost";dropZoneColor=dropZone.type==="line"?dropZone.color||"primary":dropZone.color||"neutral";if(dropZoneType==="line"){dropZoneDirection=dropZone.direction||"vertical"}}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,dropZone:dropZoneType,dropZoneColor:dropZoneColor,...dropZoneType==="line"?{direction:dropZoneDirection}:{},handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state,dropZoneType,dropZoneColor,dropZoneDirection]);return jsx$1(DragContext.Provider,{value:contextValue,children:children})};var classnames$1={exports:{}};
|
|
2
2
|
/*!
|
|
3
3
|
Copyright (c) 2018 Jed Watson.
|
|
4
4
|
Licensed under the MIT License (MIT), see
|