superdesk-ui-framework 3.0.1-beta.18 → 3.0.1-beta.19
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/app-typescript/components/Dropdown.tsx +6 -2
- package/app-typescript/components/DurationInput.tsx +32 -17
- package/app-typescript/components/Spacer.tsx +87 -0
- package/dist/examples.bundle.js +169 -31
- package/dist/react/ContentList.tsx +187 -3
- package/dist/react/DurationInput.tsx +7 -3
- package/dist/react/TableList.tsx +21 -4
- package/dist/superdesk-ui.bundle.js +41 -22
- package/examples/pages/react/ContentList.tsx +187 -3
- package/examples/pages/react/DurationInput.tsx +7 -3
- package/examples/pages/react/TableList.tsx +21 -4
- package/package.json +1 -1
- package/react/components/Dropdown.js +6 -2
- package/react/components/DurationInput.d.ts +1 -1
- package/react/components/DurationInput.js +35 -20
@@ -56,7 +56,6 @@ export default class ContentListDoc extends React.Component {
|
|
56
56
|
}
|
57
57
|
],
|
58
58
|
action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
|
59
|
-
loading: true,
|
60
59
|
},
|
61
60
|
{
|
62
61
|
itemColum: [
|
@@ -93,8 +92,6 @@ export default class ContentListDoc extends React.Component {
|
|
93
92
|
fullwidth: true,
|
94
93
|
}
|
95
94
|
],
|
96
|
-
//locked: true,
|
97
|
-
selected: true,
|
98
95
|
action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
|
99
96
|
},
|
100
97
|
{
|
@@ -136,6 +133,141 @@ export default class ContentListDoc extends React.Component {
|
|
136
133
|
},
|
137
134
|
]} />
|
138
135
|
</Markup.ReactMarkupPreview>
|
136
|
+
|
137
|
+
<Markup.ReactMarkupPreview>
|
138
|
+
<p className="docs-page__paragraph">// loading</p>
|
139
|
+
<ContentList
|
140
|
+
items={[
|
141
|
+
{
|
142
|
+
itemColum: [
|
143
|
+
{
|
144
|
+
itemRow: [{content:<>
|
145
|
+
<i className="icon-rundown"></i>
|
146
|
+
</>}],
|
147
|
+
border: true
|
148
|
+
},
|
149
|
+
{
|
150
|
+
itemRow: [
|
151
|
+
{
|
152
|
+
content:
|
153
|
+
<>
|
154
|
+
<span className="sd-list-item__slugline">19:00 – 19:45</span>
|
155
|
+
<IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
|
156
|
+
<IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
|
157
|
+
<time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
|
158
|
+
</>
|
159
|
+
},
|
160
|
+
{
|
161
|
+
content:
|
162
|
+
<>
|
163
|
+
<Label text='Marker' color='blue--800'/>
|
164
|
+
<span className='sd-list-item__compound-text'>
|
165
|
+
<span className='sd-list-item__text-label'>Template:</span>
|
166
|
+
<span>Marker Daily</span>
|
167
|
+
</span>
|
168
|
+
<span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>
|
169
|
+
<Label style='translucent' text='In Progress' type='warning' />
|
170
|
+
</>
|
171
|
+
},
|
172
|
+
],
|
173
|
+
fullwidth: true,
|
174
|
+
}
|
175
|
+
],
|
176
|
+
action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
|
177
|
+
loading: true
|
178
|
+
},
|
179
|
+
]} />
|
180
|
+
</Markup.ReactMarkupPreview>
|
181
|
+
|
182
|
+
<Markup.ReactMarkupPreview>
|
183
|
+
<p className="docs-page__paragraph">// selected</p>
|
184
|
+
<ContentList
|
185
|
+
items={[
|
186
|
+
{
|
187
|
+
itemColum: [
|
188
|
+
{
|
189
|
+
itemRow: [{content:<>
|
190
|
+
<i className="icon-rundown"></i>
|
191
|
+
</>}],
|
192
|
+
border: true
|
193
|
+
},
|
194
|
+
{
|
195
|
+
itemRow: [
|
196
|
+
{
|
197
|
+
content:
|
198
|
+
<>
|
199
|
+
<span className="sd-list-item__slugline">19:00 – 19:45</span>
|
200
|
+
<IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
|
201
|
+
<IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
|
202
|
+
<time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
|
203
|
+
</>
|
204
|
+
},
|
205
|
+
{
|
206
|
+
content:
|
207
|
+
<>
|
208
|
+
<Label text='Marker' color='blue--800'/>
|
209
|
+
<span className='sd-list-item__compound-text'>
|
210
|
+
<span className='sd-list-item__text-label'>Template:</span>
|
211
|
+
<span>Marker Daily</span>
|
212
|
+
</span>
|
213
|
+
<span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>
|
214
|
+
<Label style='translucent' text='In Progress' type='warning' />
|
215
|
+
</>
|
216
|
+
},
|
217
|
+
],
|
218
|
+
fullwidth: true,
|
219
|
+
}
|
220
|
+
],
|
221
|
+
action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
|
222
|
+
selected: true,
|
223
|
+
},
|
224
|
+
]} />
|
225
|
+
</Markup.ReactMarkupPreview>
|
226
|
+
|
227
|
+
<Markup.ReactMarkupPreview>
|
228
|
+
<p className="docs-page__paragraph">// locked</p>
|
229
|
+
<ContentList
|
230
|
+
items={[
|
231
|
+
{
|
232
|
+
itemColum: [
|
233
|
+
{
|
234
|
+
itemRow: [{content:<>
|
235
|
+
<i className="icon-rundown"></i>
|
236
|
+
</>}],
|
237
|
+
border: true
|
238
|
+
},
|
239
|
+
{
|
240
|
+
itemRow: [
|
241
|
+
{
|
242
|
+
content:
|
243
|
+
<>
|
244
|
+
<span className="sd-list-item__slugline">19:00 – 19:45</span>
|
245
|
+
<IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
|
246
|
+
<IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
|
247
|
+
<time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
|
248
|
+
</>
|
249
|
+
},
|
250
|
+
{
|
251
|
+
content:
|
252
|
+
<>
|
253
|
+
<Label text='Marker' color='blue--800'/>
|
254
|
+
<span className='sd-list-item__compound-text'>
|
255
|
+
<span className='sd-list-item__text-label'>Template:</span>
|
256
|
+
<span>Marker Daily</span>
|
257
|
+
</span>
|
258
|
+
<span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>
|
259
|
+
<Label style='translucent' text='In Progress' type='warning' />
|
260
|
+
</>
|
261
|
+
},
|
262
|
+
],
|
263
|
+
fullwidth: true,
|
264
|
+
}
|
265
|
+
],
|
266
|
+
action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
|
267
|
+
locked: true,
|
268
|
+
},
|
269
|
+
]} />
|
270
|
+
</Markup.ReactMarkupPreview>
|
139
271
|
<Markup.ReactMarkupCode>{`
|
140
272
|
<ContentList
|
141
273
|
items={[
|
@@ -252,6 +384,52 @@ export default class ContentListDoc extends React.Component {
|
|
252
384
|
action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
|
253
385
|
},
|
254
386
|
]} />
|
387
|
+
|
388
|
+
// loading, slected & locked
|
389
|
+
|
390
|
+
<ContentList
|
391
|
+
items={[
|
392
|
+
{
|
393
|
+
itemColum: [
|
394
|
+
{
|
395
|
+
itemRow: [{content:<>
|
396
|
+
<i className="icon-rundown"></i>
|
397
|
+
</>}],
|
398
|
+
border: true
|
399
|
+
},
|
400
|
+
{
|
401
|
+
itemRow: [
|
402
|
+
{
|
403
|
+
content:
|
404
|
+
<>
|
405
|
+
<span className="sd-list-item__slugline">19:00 – 19:45</span>
|
406
|
+
<IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />
|
407
|
+
<IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />
|
408
|
+
<time className='sd-margin-s--auto' title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
|
409
|
+
</>
|
410
|
+
},
|
411
|
+
{
|
412
|
+
content:
|
413
|
+
<>
|
414
|
+
<Label text='Marker' color='blue--800'/>
|
415
|
+
<span className='sd-list-item__compound-text'>
|
416
|
+
<span className='sd-list-item__text-label'>Template:</span>
|
417
|
+
<span>Marker Daily</span>
|
418
|
+
</span>
|
419
|
+
<span className="sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline">Marker // 01.06.2022</span>
|
420
|
+
<Label style='translucent' text='In Progress' type='warning' />
|
421
|
+
</>
|
422
|
+
},
|
423
|
+
],
|
424
|
+
fullwidth: true,
|
425
|
+
}
|
426
|
+
],
|
427
|
+
action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,
|
428
|
+
loading: true,
|
429
|
+
selected: true,
|
430
|
+
locked: true,
|
431
|
+
},
|
432
|
+
]} />
|
255
433
|
`}
|
256
434
|
</Markup.ReactMarkupCode>
|
257
435
|
</Markup.ReactMarkup>
|
@@ -272,6 +450,12 @@ export default class ContentListDoc extends React.Component {
|
|
272
450
|
<Prop name='onClick' isRequired={false} type='function' default='/' description='onClick functionality.'/>
|
273
451
|
<Prop name='onDoubleClick' isRequired={false} type='function' default='/' description='onDoubleClick functionality.'/>
|
274
452
|
</PropsList>
|
453
|
+
<p className="docs-page__paragraph">itemColum:</p>
|
454
|
+
<PropsList>
|
455
|
+
<Prop name='itemRow' isRequired={true} type='Array<{content: any}>' default='ture' description='An array of objects for defining rows of individual items.'/>
|
456
|
+
<Prop name='border' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change style.'/>
|
457
|
+
<Prop name='fullwidth' isRequired={false} type='boolean' default='false' description='If is true, the individual item of list change style.'/>
|
458
|
+
</PropsList>
|
275
459
|
</section>
|
276
460
|
)
|
277
461
|
}
|
@@ -1,15 +1,15 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
|
3
2
|
import * as Markup from '../../js/react';
|
4
|
-
|
5
3
|
import { Input, Select, CheckGroup, Checkbox, PropsList, Prop } from '../../../app-typescript';
|
6
4
|
import { DurationInput } from '../../../app-typescript/components/DurationInput';
|
5
|
+
import { getDurationString } from '../../../app-typescript/components/DurationInput';
|
7
6
|
|
8
7
|
interface IState {
|
9
8
|
inlineLabel: boolean;
|
10
9
|
required: boolean;
|
11
10
|
disabled: boolean;
|
12
11
|
invalid: boolean;
|
12
|
+
value: any
|
13
13
|
}
|
14
14
|
|
15
15
|
export default class DurationInputDoc extends React.Component<{}, IState> {
|
@@ -20,10 +20,12 @@ export default class DurationInputDoc extends React.Component<{}, IState> {
|
|
20
20
|
required: true,
|
21
21
|
disabled: false,
|
22
22
|
invalid: false,
|
23
|
+
value: 3661,
|
23
24
|
}
|
24
25
|
}
|
25
26
|
|
26
27
|
render() {
|
28
|
+
|
27
29
|
return (
|
28
30
|
<section className='docs-page__container'>
|
29
31
|
<h2 className='docs-page__h2'>Duration Input</h2>
|
@@ -62,8 +64,10 @@ export default class DurationInputDoc extends React.Component<{}, IState> {
|
|
62
64
|
required={this.state.required}
|
63
65
|
invalid={this.state.invalid}
|
64
66
|
inlineLabel={this.state.inlineLabel}
|
67
|
+
seconds={this.state.value}
|
65
68
|
onChange={(e) => {
|
66
|
-
|
69
|
+
this.setState({value: e})
|
70
|
+
console.log(e);
|
67
71
|
}}
|
68
72
|
/>
|
69
73
|
</div>
|
package/dist/react/TableList.tsx
CHANGED
@@ -71,13 +71,28 @@ export default class TableListDoc extends React.Component<IProps, IState> {
|
|
71
71
|
addItem
|
72
72
|
array={this.state.array}
|
73
73
|
itemsDropdown={(index) => [
|
74
|
-
{ label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () =>
|
75
|
-
{ label: <Label style='translucent' text='prlg' />, onSelect: () =>
|
76
|
-
{ label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () =>
|
74
|
+
{ label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => false },
|
75
|
+
{ label: <Label style='translucent' text='prlg' />, onSelect: () => false },
|
76
|
+
{ label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => false },
|
77
77
|
]} />
|
78
78
|
`}
|
79
79
|
</Markup.ReactMarkupCodePreview>
|
80
80
|
|
81
|
+
<p className="docs-page__paragraph">Simple list without drag and drop functionality and without functionality for adding item in list:</p>
|
82
|
+
<Markup.ReactMarkup>
|
83
|
+
<Markup.ReactMarkupPreview>
|
84
|
+
<TableList
|
85
|
+
array={this.state.array}
|
86
|
+
/>
|
87
|
+
</Markup.ReactMarkupPreview>
|
88
|
+
<Markup.ReactMarkupCode>{`
|
89
|
+
<TableList
|
90
|
+
array={this.state.array}
|
91
|
+
/>
|
92
|
+
`}
|
93
|
+
</Markup.ReactMarkupCode>
|
94
|
+
</Markup.ReactMarkup>
|
95
|
+
|
81
96
|
<p className="docs-page__paragraph">With drag and drop functionality:</p>
|
82
97
|
<Markup.ReactMarkup>
|
83
98
|
<Markup.ReactMarkupPreview>
|
@@ -130,7 +145,9 @@ export default class TableListDoc extends React.Component<IProps, IState> {
|
|
130
145
|
<Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
|
131
146
|
<Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
|
132
147
|
<Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.' />
|
133
|
-
<Prop name='hexColor' isRequired={false} type='string' default='false' description='' />
|
148
|
+
<Prop name='hexColor' isRequired={false} type='string' default='false' description='Color of left border for item status.' />
|
149
|
+
<Prop name='locked' isRequired={false} type='function' default='false' description='If is true, the individual item of list change state and change style (border).' />
|
150
|
+
<Prop name='positionLocked' isRequired={false} type='function' default='false' description='Work in progress...' />
|
134
151
|
<Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.' />
|
135
152
|
<Prop name='onDoubleClick' isRequired={false} type='function' default='false' description='onDoubleClick functionality.' />
|
136
153
|
</PropsList>
|
@@ -40271,14 +40271,18 @@ var DurationInput = /** @class */ (function (_super) {
|
|
40271
40271
|
}, 500);
|
40272
40272
|
}
|
40273
40273
|
}
|
40274
|
-
if (
|
40275
|
-
|
40276
|
-
|
40277
|
-
this.
|
40278
|
-
|
40279
|
-
|
40280
|
-
|
40281
|
-
|
40274
|
+
if (this.hourRef.current.value.length === 2
|
40275
|
+
&& this.minuteRef.current.value.length === 2
|
40276
|
+
&& this.secondRef.current.value.length === 2) {
|
40277
|
+
if ((this.props.hours !== prevProps.hours)
|
40278
|
+
|| (this.props.minutes !== prevProps.minutes)
|
40279
|
+
|| (this.props.seconds !== prevProps.seconds)) {
|
40280
|
+
this.setState({
|
40281
|
+
hours: this.stateUpdate('hours', this.props.hours, this.props.minutes, this.props.seconds),
|
40282
|
+
minutes: this.stateUpdate('minutes', this.props.minutes, this.props.seconds),
|
40283
|
+
seconds: this.stateUpdate('seconds', this.props.seconds),
|
40284
|
+
});
|
40285
|
+
}
|
40282
40286
|
}
|
40283
40287
|
};
|
40284
40288
|
DurationInput.prototype.valueUpdate = function () {
|
@@ -40382,12 +40386,15 @@ var DurationInput = /** @class */ (function (_super) {
|
|
40382
40386
|
};
|
40383
40387
|
DurationInput.prototype.handleChange = function (event, state) {
|
40384
40388
|
var stateClone = {};
|
40385
|
-
if (event.target.value.length
|
40386
|
-
if (event.target.selectionStart === 1
|
40387
|
-
stateClone[state] = event.target.value.slice(0, 1)
|
40389
|
+
if (event.target.value.length > 2) {
|
40390
|
+
if (event.target.selectionStart === 1) {
|
40391
|
+
stateClone[state] = event.target.value.slice(0, 1);
|
40392
|
+
}
|
40393
|
+
else if (event.target.selectionStart === 2) {
|
40394
|
+
stateClone[state] = event.target.value.slice(1, 2);
|
40388
40395
|
}
|
40389
40396
|
else {
|
40390
|
-
stateClone[state] = event.target.value.slice(
|
40397
|
+
stateClone[state] = event.target.value.slice(2, 3);
|
40391
40398
|
}
|
40392
40399
|
}
|
40393
40400
|
else {
|
@@ -40423,19 +40430,19 @@ var DurationInput = /** @class */ (function (_super) {
|
|
40423
40430
|
var InputClasses = (0, classnames_1.default)('sd-input__duration-input');
|
40424
40431
|
return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.props.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
|
40425
40432
|
React.createElement("div", { className: InputClasses },
|
40426
|
-
React.createElement("input", { className: "duration-input ".concat(this.state.blink === 'hour' ? 'blink_me' : ''), type: 'text', id: 'hours', max: 99, min: 0, ref: this.hourRef, value: this.state.hours, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.minuteRef.current); }, onChange: function (event) { _this.handleChange(event, 'hours'); }, onBlur: function (event) { return _this.setState({ hours: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
|
40433
|
+
React.createElement("input", { className: "duration-input ".concat(this.state.blink === 'hour' ? 'blink_me' : ''), type: 'text', id: 'hours', autoComplete: "off", max: 99, min: 0, ref: this.hourRef, value: this.state.hours, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.minuteRef.current); }, onChange: function (event) { _this.handleChange(event, 'hours'); }, onBlur: function (event) { return _this.setState({ hours: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
|
40427
40434
|
if (!/[0-9]/.test(event.key)) {
|
40428
40435
|
event.preventDefault();
|
40429
40436
|
}
|
40430
40437
|
} }),
|
40431
40438
|
React.createElement("span", { className: 'sd-input__suffix' }, "h"),
|
40432
|
-
React.createElement("input", { className: "duration-input ".concat(this.state.blink === 'minute' ? 'blink_me' : ''), type: 'text', id: 'minutes', ref: this.minuteRef, value: this.state.minutes, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.secondRef.current); }, onChange: function (event) { _this.handleChange(event, 'minutes'); }, onBlur: function (event) { return _this.setState({ minutes: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
|
40439
|
+
React.createElement("input", { className: "duration-input ".concat(this.state.blink === 'minute' ? 'blink_me' : ''), type: 'text', id: 'minutes', autoComplete: "off", ref: this.minuteRef, value: this.state.minutes, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.secondRef.current); }, onChange: function (event) { _this.handleChange(event, 'minutes'); }, onBlur: function (event) { return _this.setState({ minutes: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
|
40433
40440
|
if (!/[0-9]/.test(event.key)) {
|
40434
40441
|
event.preventDefault();
|
40435
40442
|
}
|
40436
40443
|
} }),
|
40437
40444
|
React.createElement("span", { className: 'sd-input__suffix' }, "m"),
|
40438
|
-
React.createElement("input", { className: 'duration-input', type: 'text', id: 'seconds', ref: this.secondRef, value: this.state.seconds, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.hourRef.current); }, onChange: function (event) { _this.handleChange(event, 'seconds'); }, onBlur: function (event) { return _this.setState({ seconds: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
|
40445
|
+
React.createElement("input", { className: 'duration-input', type: 'text', id: 'seconds', autoComplete: "off", ref: this.secondRef, value: this.state.seconds, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.hourRef.current); }, onChange: function (event) { _this.handleChange(event, 'seconds'); }, onBlur: function (event) { return _this.setState({ seconds: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
|
40439
40446
|
if (!/[0-9]/.test(event.key)) {
|
40440
40447
|
event.preventDefault();
|
40441
40448
|
}
|
@@ -40445,7 +40452,7 @@ var DurationInput = /** @class */ (function (_super) {
|
|
40445
40452
|
return DurationInput;
|
40446
40453
|
}(React.PureComponent));
|
40447
40454
|
exports.DurationInput = DurationInput;
|
40448
|
-
function getDurationString(seconds,
|
40455
|
+
function getDurationString(seconds, minSections) {
|
40449
40456
|
function zeroPad(value) {
|
40450
40457
|
if (value.toString().length === 1 || value === 0) {
|
40451
40458
|
return "0".concat(value);
|
@@ -40460,16 +40467,24 @@ function getDurationString(seconds, zero) {
|
|
40460
40467
|
var hour = zeroPad(Math.floor(seconds / 3600));
|
40461
40468
|
var minute = zeroPad(Math.floor((seconds % 3600) / 60));
|
40462
40469
|
var second = zeroPad(Math.floor(seconds % 60));
|
40463
|
-
if (
|
40470
|
+
if (minSections === 3) {
|
40464
40471
|
return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
|
40465
40472
|
}
|
40466
|
-
else {
|
40467
|
-
if (Number(hour)
|
40473
|
+
else if (minSections === 2) {
|
40474
|
+
if (Number(hour) > 0) {
|
40475
|
+
return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
|
40476
|
+
}
|
40477
|
+
else {
|
40468
40478
|
return "".concat(minute, "m ").concat(second, "s");
|
40469
40479
|
}
|
40470
|
-
|
40480
|
+
}
|
40481
|
+
else {
|
40482
|
+
if (Number(hour) === 0 && Number(minute) === 0) {
|
40471
40483
|
return "".concat(second, "s");
|
40472
40484
|
}
|
40485
|
+
else if (Number(hour) === 0 && Number(minute) > 0) {
|
40486
|
+
return "".concat(minute, "m ").concat(second, "s");
|
40487
|
+
}
|
40473
40488
|
else {
|
40474
40489
|
return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
|
40475
40490
|
}
|
@@ -57226,7 +57241,9 @@ var DropdownItem = function (_a) {
|
|
57226
57241
|
var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect, onChange = _a.onChange;
|
57227
57242
|
return (React.createElement("li", { role: 'none', className: active ? 'dropdown__menu-item--active' : '' },
|
57228
57243
|
React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick: function () {
|
57229
|
-
|
57244
|
+
setTimeout(function () {
|
57245
|
+
onSelect();
|
57246
|
+
});
|
57230
57247
|
if (onChange) {
|
57231
57248
|
onChange();
|
57232
57249
|
}
|
@@ -57261,7 +57278,9 @@ var DropdownItemWithSubmenu = function (_a) {
|
|
57261
57278
|
React.createElement("div", { className: 'dropdown', onMouseLeave: function () { return setOpen(false); } },
|
57262
57279
|
React.createElement("button", { className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onClick: function () {
|
57263
57280
|
if (item.onSelect) {
|
57264
|
-
|
57281
|
+
setTimeout(function () {
|
57282
|
+
item.onSelect();
|
57283
|
+
});
|
57265
57284
|
}
|
57266
57285
|
if (onChange) {
|
57267
57286
|
onChange();
|