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>
|
@@ -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>
|
package/package.json
CHANGED
@@ -207,7 +207,9 @@ var DropdownItem = function (_a) {
|
|
207
207
|
var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect, onChange = _a.onChange;
|
208
208
|
return (React.createElement("li", { role: 'none', className: active ? 'dropdown__menu-item--active' : '' },
|
209
209
|
React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick: function () {
|
210
|
-
|
210
|
+
setTimeout(function () {
|
211
|
+
onSelect();
|
212
|
+
});
|
211
213
|
if (onChange) {
|
212
214
|
onChange();
|
213
215
|
}
|
@@ -242,7 +244,9 @@ var DropdownItemWithSubmenu = function (_a) {
|
|
242
244
|
React.createElement("div", { className: 'dropdown', onMouseLeave: function () { return setOpen(false); } },
|
243
245
|
React.createElement("button", { className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onClick: function () {
|
244
246
|
if (item.onSelect) {
|
245
|
-
|
247
|
+
setTimeout(function () {
|
248
|
+
item.onSelect();
|
249
|
+
});
|
246
250
|
}
|
247
251
|
if (onChange) {
|
248
252
|
onChange();
|
@@ -38,5 +38,5 @@ export declare class DurationInput extends React.PureComponent<IProps, IState> {
|
|
38
38
|
handleFocusOnKeyUp(event: React.KeyboardEvent<HTMLInputElement>, ref: HTMLInputElement | null): void;
|
39
39
|
render(): JSX.Element;
|
40
40
|
}
|
41
|
-
export declare function getDurationString(seconds: number,
|
41
|
+
export declare function getDurationString(seconds: number, minSections: 1 | 2 | 3): string;
|
42
42
|
export {};
|
@@ -141,14 +141,18 @@ var DurationInput = /** @class */ (function (_super) {
|
|
141
141
|
}, 500);
|
142
142
|
}
|
143
143
|
}
|
144
|
-
if (
|
145
|
-
|
146
|
-
|
147
|
-
this.
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
144
|
+
if (this.hourRef.current.value.length === 2
|
145
|
+
&& this.minuteRef.current.value.length === 2
|
146
|
+
&& this.secondRef.current.value.length === 2) {
|
147
|
+
if ((this.props.hours !== prevProps.hours)
|
148
|
+
|| (this.props.minutes !== prevProps.minutes)
|
149
|
+
|| (this.props.seconds !== prevProps.seconds)) {
|
150
|
+
this.setState({
|
151
|
+
hours: this.stateUpdate('hours', this.props.hours, this.props.minutes, this.props.seconds),
|
152
|
+
minutes: this.stateUpdate('minutes', this.props.minutes, this.props.seconds),
|
153
|
+
seconds: this.stateUpdate('seconds', this.props.seconds),
|
154
|
+
});
|
155
|
+
}
|
152
156
|
}
|
153
157
|
};
|
154
158
|
DurationInput.prototype.valueUpdate = function () {
|
@@ -252,12 +256,15 @@ var DurationInput = /** @class */ (function (_super) {
|
|
252
256
|
};
|
253
257
|
DurationInput.prototype.handleChange = function (event, state) {
|
254
258
|
var stateClone = {};
|
255
|
-
if (event.target.value.length
|
256
|
-
if (event.target.selectionStart === 1
|
257
|
-
stateClone[state] = event.target.value.slice(0, 1)
|
259
|
+
if (event.target.value.length > 2) {
|
260
|
+
if (event.target.selectionStart === 1) {
|
261
|
+
stateClone[state] = event.target.value.slice(0, 1);
|
262
|
+
}
|
263
|
+
else if (event.target.selectionStart === 2) {
|
264
|
+
stateClone[state] = event.target.value.slice(1, 2);
|
258
265
|
}
|
259
266
|
else {
|
260
|
-
stateClone[state] = event.target.value.slice(
|
267
|
+
stateClone[state] = event.target.value.slice(2, 3);
|
261
268
|
}
|
262
269
|
}
|
263
270
|
else {
|
@@ -293,19 +300,19 @@ var DurationInput = /** @class */ (function (_super) {
|
|
293
300
|
var InputClasses = (0, classnames_1.default)('sd-input__duration-input');
|
294
301
|
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 },
|
295
302
|
React.createElement("div", { className: InputClasses },
|
296
|
-
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) {
|
303
|
+
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) {
|
297
304
|
if (!/[0-9]/.test(event.key)) {
|
298
305
|
event.preventDefault();
|
299
306
|
}
|
300
307
|
} }),
|
301
308
|
React.createElement("span", { className: 'sd-input__suffix' }, "h"),
|
302
|
-
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) {
|
309
|
+
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) {
|
303
310
|
if (!/[0-9]/.test(event.key)) {
|
304
311
|
event.preventDefault();
|
305
312
|
}
|
306
313
|
} }),
|
307
314
|
React.createElement("span", { className: 'sd-input__suffix' }, "m"),
|
308
|
-
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) {
|
315
|
+
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) {
|
309
316
|
if (!/[0-9]/.test(event.key)) {
|
310
317
|
event.preventDefault();
|
311
318
|
}
|
@@ -315,7 +322,7 @@ var DurationInput = /** @class */ (function (_super) {
|
|
315
322
|
return DurationInput;
|
316
323
|
}(React.PureComponent));
|
317
324
|
exports.DurationInput = DurationInput;
|
318
|
-
function getDurationString(seconds,
|
325
|
+
function getDurationString(seconds, minSections) {
|
319
326
|
function zeroPad(value) {
|
320
327
|
if (value.toString().length === 1 || value === 0) {
|
321
328
|
return "0".concat(value);
|
@@ -330,16 +337,24 @@ function getDurationString(seconds, zero) {
|
|
330
337
|
var hour = zeroPad(Math.floor(seconds / 3600));
|
331
338
|
var minute = zeroPad(Math.floor((seconds % 3600) / 60));
|
332
339
|
var second = zeroPad(Math.floor(seconds % 60));
|
333
|
-
if (
|
340
|
+
if (minSections === 3) {
|
334
341
|
return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
|
335
342
|
}
|
336
|
-
else {
|
337
|
-
if (Number(hour)
|
343
|
+
else if (minSections === 2) {
|
344
|
+
if (Number(hour) > 0) {
|
345
|
+
return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
|
346
|
+
}
|
347
|
+
else {
|
338
348
|
return "".concat(minute, "m ").concat(second, "s");
|
339
349
|
}
|
340
|
-
|
350
|
+
}
|
351
|
+
else {
|
352
|
+
if (Number(hour) === 0 && Number(minute) === 0) {
|
341
353
|
return "".concat(second, "s");
|
342
354
|
}
|
355
|
+
else if (Number(hour) === 0 && Number(minute) > 0) {
|
356
|
+
return "".concat(minute, "m ").concat(second, "s");
|
357
|
+
}
|
343
358
|
else {
|
344
359
|
return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
|
345
360
|
}
|