react-cron-generator 2.1.2 → 2.1.4
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.
- package/README.md +10 -9
- package/build/cron-builder.css +213 -0
- package/build/cron.d.ts +2 -2
- package/build/cron.d.ts.map +1 -1
- package/build/index.js +8 -30
- package/build/index.js.map +1 -1
- package/build/types/index.d.ts +7 -0
- package/build/types/index.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -44,7 +44,7 @@ yarn add react-cron-generator
|
|
|
44
44
|
```jsx
|
|
45
45
|
import React, { useState } from 'react';
|
|
46
46
|
import Cron from 'react-cron-generator';
|
|
47
|
-
import 'react-cron-generator/
|
|
47
|
+
import 'react-cron-generator/build/cron-builder.css';
|
|
48
48
|
|
|
49
49
|
function App() {
|
|
50
50
|
const [value, setValue] = useState('0 0 00 1/1 * ? *');
|
|
@@ -69,7 +69,7 @@ function App() {
|
|
|
69
69
|
```jsx
|
|
70
70
|
import React, { useState } from 'react';
|
|
71
71
|
import Cron from 'react-cron-generator';
|
|
72
|
-
import 'react-cron-generator/
|
|
72
|
+
import 'react-cron-generator/build/cron-builder.css';
|
|
73
73
|
|
|
74
74
|
function App() {
|
|
75
75
|
const [value, setValue] = useState('*/5 * * * *');
|
|
@@ -88,6 +88,12 @@ function App() {
|
|
|
88
88
|
}
|
|
89
89
|
```
|
|
90
90
|
|
|
91
|
+
## 📸 Screenshots
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
|
|
91
97
|
## 📖 Documentation
|
|
92
98
|
|
|
93
99
|
### Props
|
|
@@ -96,6 +102,7 @@ function App() {
|
|
|
96
102
|
|------|------|---------|-------------|
|
|
97
103
|
| `value` | `string` | `undefined` | Initial cron expression (Unix: 5 fields, Quartz: 6 or 7 fields) |
|
|
98
104
|
| `onChange` | `(value: string, text: string) => void` | **Required** | Callback fired when cron value changes. Receives cron expression and human-readable text |
|
|
105
|
+
| `onHeaderChange` | `(header: string) => void` | `undefined` | Callback fired when the selected tab/header changes. Receives header value (`'Minutes'`, `'Hourly'`, `'Daily'`, `'Weekly'`, `'Monthly'`, `'Custom'`). Called on initial mount and whenever tabs changes |
|
|
99
106
|
| `showResultText` | `boolean` | `false` | Display human-readable description below the builder |
|
|
100
107
|
| `showResultCron` | `boolean` | `false` | Display the cron expression below the builder |
|
|
101
108
|
| `isUnix` | `boolean` | `false` | Use Unix format (5 fields) instead of Quartz. **Cannot be used with `use6FieldQuartz`** |
|
|
@@ -244,7 +251,7 @@ function translateFn(key) {
|
|
|
244
251
|
The component comes with default styles. Import the CSS file:
|
|
245
252
|
|
|
246
253
|
```jsx
|
|
247
|
-
import 'react-cron-generator/
|
|
254
|
+
import 'react-cron-generator/build/cron-builder.css';
|
|
248
255
|
```
|
|
249
256
|
|
|
250
257
|
You can override styles by targeting the CSS classes:
|
|
@@ -363,12 +370,6 @@ Give a ⭐️ if this project helped you!
|
|
|
363
370
|
- [GitHub Repository](https://github.com/sojinantony01/react-cron-generator)
|
|
364
371
|
- [Issue Tracker](https://github.com/sojinantony01/react-cron-generator/issues)
|
|
365
372
|
|
|
366
|
-
## 📸 Screenshots
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
373
|
---
|
|
373
374
|
|
|
374
375
|
Made with ❤️ by [Sojin Antony](https://github.com/sojinantony01)
|
|
@@ -0,0 +1,213 @@
|
|
|
1
|
+
.cron_builder {
|
|
2
|
+
border: 1px solid #d0cbcb;
|
|
3
|
+
padding: 5px;
|
|
4
|
+
background-color: #dddef13d;
|
|
5
|
+
width: 100%;
|
|
6
|
+
max-width: 600px;
|
|
7
|
+
font-size: 14px;
|
|
8
|
+
font-family:
|
|
9
|
+
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
|
|
10
|
+
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.cron_builder .cron_builder_bordering {
|
|
14
|
+
border: 1px solid #ddd;
|
|
15
|
+
border-top: none;
|
|
16
|
+
text-align: center;
|
|
17
|
+
padding: 10px;
|
|
18
|
+
background: #fff;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.cron_builder .cron_builder_bordering input,
|
|
22
|
+
.cron_builder .cron_builder_bordering select {
|
|
23
|
+
width: 100px;
|
|
24
|
+
margin-right: 10px;
|
|
25
|
+
margin-left: 10px;
|
|
26
|
+
border: 1px solid #ddd;
|
|
27
|
+
border-radius: 4px;
|
|
28
|
+
outline: none;
|
|
29
|
+
padding: 0px 5px;
|
|
30
|
+
min-height: 28px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.cron_builder .df {
|
|
34
|
+
display: flex;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.cron_builder .cron-builder-bg {
|
|
38
|
+
background-color: #086090;
|
|
39
|
+
color: white;
|
|
40
|
+
text-align: center;
|
|
41
|
+
margin-bottom: 4px;
|
|
42
|
+
padding: 8px 0px;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.cron_builder .cron_builder_bordering select {
|
|
46
|
+
background-color: white;
|
|
47
|
+
width: 75px;
|
|
48
|
+
cursor: pointer;
|
|
49
|
+
padding: 4px 2px;
|
|
50
|
+
border-radius: 4px;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.cron_builder .cron_builder_bordering select:disabled {
|
|
54
|
+
background-color: #f5f5f5;
|
|
55
|
+
cursor: default;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.cron_builder .cron_builder_bordering select option:hover {
|
|
59
|
+
background-color: #086090;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.cron_builder .well-small input {
|
|
63
|
+
width: auto !important;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.cron_builder .cron_builder_bordering input[type='radio'] {
|
|
67
|
+
margin-top: 0px;
|
|
68
|
+
vertical-align: middle;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.cron_builder .text_align_left {
|
|
72
|
+
text-align: left;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.cron_builder .nav li {
|
|
76
|
+
cursor: pointer;
|
|
77
|
+
flex: 1 1 10px;
|
|
78
|
+
text-align: center;
|
|
79
|
+
width: 10px;
|
|
80
|
+
display: flex;
|
|
81
|
+
padding: 0;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.cron_builder .nav li a,
|
|
85
|
+
.cron_builder .nav li button {
|
|
86
|
+
color: #337ab7;
|
|
87
|
+
width: 100%;
|
|
88
|
+
padding: 10px;
|
|
89
|
+
display: inline-block;
|
|
90
|
+
border-radius: 4px 4px 0px 0px;
|
|
91
|
+
background: none;
|
|
92
|
+
border: 1px solid transparent;
|
|
93
|
+
font-size: inherit;
|
|
94
|
+
font-family: inherit;
|
|
95
|
+
cursor: pointer;
|
|
96
|
+
text-decoration: none;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.cron_builder .nav-tabs .nav-link:focus,
|
|
100
|
+
.cron_builder .nav-tabs .nav-link:hover {
|
|
101
|
+
border-color: transparent transparent transparent;
|
|
102
|
+
background-color: #eeeeee;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.cron_builder .nav-tabs .nav-item.show .nav-link,
|
|
106
|
+
.cron_builder .nav-tabs .nav-link.active {
|
|
107
|
+
border-color: #dee2e6 #dee2e6 #fff;
|
|
108
|
+
background-color: #ffffff;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.cron_builder .nav-tabs .nav-item.show .nav-link,
|
|
112
|
+
.cron_builder .nav-tabs .nav-link.disabled {
|
|
113
|
+
color: #6c757d;
|
|
114
|
+
background-color: #ffffff;
|
|
115
|
+
border-color: transparent transparent #ffffff;
|
|
116
|
+
cursor: not-allowed;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.cron_builder .well {
|
|
120
|
+
display: block;
|
|
121
|
+
min-height: 20px;
|
|
122
|
+
padding: 19px;
|
|
123
|
+
margin-bottom: 20px;
|
|
124
|
+
background-color: #f5f5f5;
|
|
125
|
+
border: 1px solid #e3e3e3;
|
|
126
|
+
border-radius: 4px;
|
|
127
|
+
-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
|
|
128
|
+
box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
@media screen and (max-width: 767px) {
|
|
132
|
+
.cron_builder .nav li {
|
|
133
|
+
cursor: pointer;
|
|
134
|
+
flex: 0 0 65px;
|
|
135
|
+
text-align: center;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/* ---- boostrap ----- */
|
|
140
|
+
.cron_builder .nav.nav-tabs {
|
|
141
|
+
list-style: none;
|
|
142
|
+
display: flex;
|
|
143
|
+
margin: 0 0;
|
|
144
|
+
padding-left: 0;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.cron_builder .row {
|
|
148
|
+
display: flex;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.cron_builder .col-sm-6 {
|
|
152
|
+
flex: 0 0 50%;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.cron_builder .min_height_auto {
|
|
156
|
+
min-height: auto !important;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.cron_builder .cursor_pointer {
|
|
160
|
+
cursor: pointer;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.cron_builder .dropbtn {
|
|
164
|
+
cursor: pointer;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.cron_builder .dropdown {
|
|
168
|
+
position: relative;
|
|
169
|
+
display: inline-block;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.cron_builder .dropdown-content {
|
|
173
|
+
position: absolute;
|
|
174
|
+
background-color: #f1f1f1;
|
|
175
|
+
min-width: 140px;
|
|
176
|
+
overflow: auto;
|
|
177
|
+
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
|
|
178
|
+
z-index: 1;
|
|
179
|
+
left: 0;
|
|
180
|
+
right: 0;
|
|
181
|
+
text-align: left;
|
|
182
|
+
max-height: 150px;
|
|
183
|
+
overflow: auto;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
@media screen and (min-height: 800px) {
|
|
187
|
+
.cron_builder .dropdown-content {
|
|
188
|
+
max-height: 200px;
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.cron_builder .dropdown-content .dropdown-item {
|
|
193
|
+
color: black;
|
|
194
|
+
padding: 12px 16px;
|
|
195
|
+
text-decoration: none;
|
|
196
|
+
display: block;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.cron_builder .dropdown-content .dropdown-item:hover,
|
|
200
|
+
.cron_builder .dropdown-content .dropdown-item-selected {
|
|
201
|
+
background-color: #086090;
|
|
202
|
+
color: white;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.cron_builder .mx-0 {
|
|
206
|
+
margin-left: 0 !important;
|
|
207
|
+
margin-right: 0 !important;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.cron_builder .mx-2 {
|
|
211
|
+
margin-left: 10px !important;
|
|
212
|
+
margin-right: 10px !important;
|
|
213
|
+
}
|
package/build/cron.d.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { HeaderKeyType } from './meta';
|
|
3
|
-
import './cron-builder.css';
|
|
2
|
+
import { HeaderKeyType, HeaderValType } from './meta';
|
|
4
3
|
export interface CronProp {
|
|
5
4
|
value?: string;
|
|
6
5
|
onChange(val: string, text: string): void;
|
|
@@ -14,6 +13,7 @@ export interface CronProp {
|
|
|
14
13
|
disabled?: boolean;
|
|
15
14
|
isUnix?: boolean;
|
|
16
15
|
use6FieldQuartz?: boolean;
|
|
16
|
+
onHeaderChange?(header: HeaderValType): void;
|
|
17
17
|
}
|
|
18
18
|
declare const Cron: React.FunctionComponent<CronProp>;
|
|
19
19
|
export default Cron;
|
package/build/cron.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cron.d.ts","sourceRoot":"","sources":["../src/lib/cron.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAEjF,OAAO,EAAyB,aAAa,
|
|
1
|
+
{"version":3,"file":"cron.d.ts","sourceRoot":"","sources":["../src/lib/cron.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAEjF,OAAO,EAAyB,aAAa,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAK7E,MAAM,WAAW,QAAQ;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1C,cAAc,EAAE,OAAO,CAAC;IACxB,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE;QAAE,OAAO,EAAE,aAAa,EAAE,CAAA;KAAE,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,CAAC,MAAM,EAAE,aAAa,GAAG,IAAI,CAAC;CAC9C;AAeD,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAuY3C,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
package/build/index.js
CHANGED
|
@@ -9022,36 +9022,6 @@ function validateCron(expression) {
|
|
|
9022
9022
|
}
|
|
9023
9023
|
}
|
|
9024
9024
|
|
|
9025
|
-
function styleInject(css, ref) {
|
|
9026
|
-
if ( ref === void 0 ) ref = {};
|
|
9027
|
-
var insertAt = ref.insertAt;
|
|
9028
|
-
|
|
9029
|
-
if (typeof document === 'undefined') { return; }
|
|
9030
|
-
|
|
9031
|
-
var head = document.head || document.getElementsByTagName('head')[0];
|
|
9032
|
-
var style = document.createElement('style');
|
|
9033
|
-
style.type = 'text/css';
|
|
9034
|
-
|
|
9035
|
-
if (insertAt === 'top') {
|
|
9036
|
-
if (head.firstChild) {
|
|
9037
|
-
head.insertBefore(style, head.firstChild);
|
|
9038
|
-
} else {
|
|
9039
|
-
head.appendChild(style);
|
|
9040
|
-
}
|
|
9041
|
-
} else {
|
|
9042
|
-
head.appendChild(style);
|
|
9043
|
-
}
|
|
9044
|
-
|
|
9045
|
-
if (style.styleSheet) {
|
|
9046
|
-
style.styleSheet.cssText = css;
|
|
9047
|
-
} else {
|
|
9048
|
-
style.appendChild(document.createTextNode(css));
|
|
9049
|
-
}
|
|
9050
|
-
}
|
|
9051
|
-
|
|
9052
|
-
var css_248z = ".cron_builder {\n border: 1px solid #d0cbcb;\n padding: 5px;\n background-color: #dddef13d;\n width: 100%;\n max-width: 600px;\n font-size: 14px;\n font-family:\n -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',\n sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';\n}\n\n.cron_builder .cron_builder_bordering {\n border: 1px solid #ddd;\n border-top: none;\n text-align: center;\n padding: 10px;\n background: #fff;\n}\n\n.cron_builder .cron_builder_bordering input,\n.cron_builder .cron_builder_bordering select {\n width: 100px;\n margin-right: 10px;\n margin-left: 10px;\n border: 1px solid #ddd;\n border-radius: 4px;\n outline: none;\n padding: 0px 5px;\n min-height: 28px;\n}\n\n.cron_builder .df {\n display: flex;\n}\n\n.cron_builder .cron-builder-bg {\n background-color: #086090;\n color: white;\n text-align: center;\n margin-bottom: 4px;\n padding: 8px 0px;\n}\n\n.cron_builder .cron_builder_bordering select {\n background-color: white;\n width: 75px;\n cursor: pointer;\n padding: 4px 2px;\n border-radius: 4px;\n}\n\n.cron_builder .cron_builder_bordering select:disabled {\n background-color: #f5f5f5;\n cursor: default;\n}\n\n.cron_builder .cron_builder_bordering select option:hover {\n background-color: #086090;\n}\n\n.cron_builder .well-small input {\n width: auto !important;\n}\n\n.cron_builder .cron_builder_bordering input[type='radio'] {\n margin-top: 0px;\n vertical-align: middle;\n}\n\n.cron_builder .text_align_left {\n text-align: left;\n}\n\n.cron_builder .nav li {\n cursor: pointer;\n flex: 1 1 10px;\n text-align: center;\n width: 10px;\n display: flex;\n padding: 0px 1px;\n}\n\n.cron_builder .nav li a,\n.cron_builder .nav li button {\n color: #337ab7;\n width: 100%;\n padding: 10px;\n display: inline-block;\n border-radius: 4px 4px 0px 0px;\n background: none;\n border: 1px solid transparent;\n font-size: inherit;\n font-family: inherit;\n cursor: pointer;\n text-decoration: none;\n}\n\n.cron_builder .nav-tabs .nav-link:focus,\n.cron_builder .nav-tabs .nav-link:hover {\n border-color: transparent transparent transparent;\n background-color: #eeeeee;\n}\n\n.cron_builder .nav-tabs .nav-item.show .nav-link,\n.cron_builder .nav-tabs .nav-link.active {\n border-color: #dee2e6 #dee2e6 #fff;\n background-color: #ffffff;\n}\n\n.cron_builder .nav-tabs .nav-item.show .nav-link,\n.cron_builder .nav-tabs .nav-link.disabled {\n color: #6c757d;\n background-color: #ffffff;\n border-color: transparent transparent #ffffff;\n cursor: not-allowed;\n}\n\n.cron_builder .well {\n display: block;\n min-height: 20px;\n padding: 19px;\n margin-bottom: 20px;\n background-color: #f5f5f5;\n border: 1px solid #e3e3e3;\n border-radius: 4px;\n -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\n box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\n}\n\n@media screen and (max-width: 767px) {\n .cron_builder .nav li {\n cursor: pointer;\n flex: 0 0 65px;\n text-align: center;\n }\n}\n\n/* ---- boostrap ----- */\n.cron_builder .nav.nav-tabs {\n list-style: none;\n display: flex;\n margin: 0 0;\n padding-left: 0;\n}\n\n.cron_builder .row {\n display: flex;\n}\n\n.cron_builder .col-sm-6 {\n flex: 0 0 50%;\n}\n\n.cron_builder .min_height_auto {\n min-height: auto !important;\n}\n\n.cron_builder .cursor_pointer {\n cursor: pointer;\n}\n\n.cron_builder .dropbtn {\n cursor: pointer;\n}\n\n.cron_builder .dropdown {\n position: relative;\n display: inline-block;\n}\n\n.cron_builder .dropdown-content {\n position: absolute;\n background-color: #f1f1f1;\n min-width: 140px;\n overflow: auto;\n box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n z-index: 1;\n left: 0;\n right: 0;\n text-align: left;\n max-height: 150px;\n overflow: auto;\n}\n\n@media screen and (min-height: 800px) {\n .cron_builder .dropdown-content {\n max-height: 200px;\n }\n}\n\n.cron_builder .dropdown-content .dropdown-item {\n color: black;\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n}\n\n.cron_builder .dropdown-content .dropdown-item:hover,\n.cron_builder .dropdown-content .dropdown-item-selected {\n background-color: #086090;\n color: white;\n}\n\n.cron_builder .mx-0 {\n margin-left: 0 !important;\n margin-right: 0 !important;\n}\n\n.cron_builder .mx-2 {\n margin-left: 10px !important;\n margin-right: 10px !important;\n}\n";
|
|
9053
|
-
styleInject(css_248z);
|
|
9054
|
-
|
|
9055
9025
|
const defaultCron = '0 0 00 1/1 * ? *';
|
|
9056
9026
|
const Cron = (props) => {
|
|
9057
9027
|
// Validate prop combination
|
|
@@ -9300,6 +9270,14 @@ const Cron = (props) => {
|
|
|
9300
9270
|
parentChange(state.value);
|
|
9301
9271
|
}
|
|
9302
9272
|
}, [state.value, parentChange]);
|
|
9273
|
+
/**
|
|
9274
|
+
* Notify parent when selected tab changes
|
|
9275
|
+
*/
|
|
9276
|
+
useEffect(() => {
|
|
9277
|
+
if (state.selectedTab && props.onHeaderChange) {
|
|
9278
|
+
props.onHeaderChange(state.selectedTab);
|
|
9279
|
+
}
|
|
9280
|
+
}, [state.selectedTab]);
|
|
9303
9281
|
/**
|
|
9304
9282
|
* Render tab headers
|
|
9305
9283
|
*/
|