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.
Files changed (15) hide show
  1. package/app-typescript/components/Dropdown.tsx +6 -2
  2. package/app-typescript/components/DurationInput.tsx +32 -17
  3. package/app-typescript/components/Spacer.tsx +87 -0
  4. package/dist/examples.bundle.js +169 -31
  5. package/dist/react/ContentList.tsx +187 -3
  6. package/dist/react/DurationInput.tsx +7 -3
  7. package/dist/react/TableList.tsx +21 -4
  8. package/dist/superdesk-ui.bundle.js +41 -22
  9. package/examples/pages/react/ContentList.tsx +187 -3
  10. package/examples/pages/react/DurationInput.tsx +7 -3
  11. package/examples/pages/react/TableList.tsx +21 -4
  12. package/package.json +1 -1
  13. package/react/components/Dropdown.js +6 -2
  14. package/react/components/DurationInput.d.ts +1 -1
  15. package/react/components/DurationInput.js +35 -20
package/examples/pages/react/ContentList.tsx CHANGED
@@ -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
  }
package/examples/pages/react/DurationInput.tsx CHANGED
@@ -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
- console.log(e)
69
+ this.setState({value: e})
70
+ console.log(e);
67
71
  }}
68
72
  />
69
73
  </div>
package/examples/pages/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: () => console.log(index) },
75
- { label: <Label style='translucent' text='prlg' />, onSelect: () => console.log(index) },
76
- { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => console.log(index) },
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "superdesk-ui-framework",
3
- "version": "3.0.1-beta.18",
3
+ "version": "3.0.1-beta.19",
4
4
  "license": "AGPL-3.0",
5
5
  "repository": {
6
6
  "type": "git",
package/react/components/Dropdown.js 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
- onSelect();
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
- item.onSelect();
247
+ setTimeout(function () {
248
+ item.onSelect();
249
+ });
246
250
  }
247
251
  if (onChange) {
248
252
  onChange();
package/react/components/DurationInput.d.ts CHANGED
@@ -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, zero?: boolean): string;
41
+ export declare function getDurationString(seconds: number, minSections: 1 | 2 | 3): string;
42
42
  export {};
package/react/components/DurationInput.js CHANGED
@@ -141,14 +141,18 @@ var DurationInput = /** @class */ (function (_super) {
141
141
  }, 500);
142
142
  }
143
143
  }
144
- if ((this.props.hours !== prevProps.hours)
145
- || (this.props.minutes !== prevProps.minutes)
146
- || (this.props.seconds !== prevProps.seconds)) {
147
- this.setState({
148
- hours: this.stateUpdate('hours', this.props.hours, this.props.minutes, this.props.seconds),
149
- minutes: this.stateUpdate('minutes', this.props.minutes, this.props.seconds),
150
- seconds: this.stateUpdate('seconds', this.props.seconds),
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 >= 2) {
256
- if (event.target.selectionStart === 1 && event.target.selectionEnd === 1) {
257
- stateClone[state] = event.target.value.slice(0, 1) + event.target.value.slice(2, 3);
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(0, 2);
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, zero) {
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 (zero) {
340
+ if (minSections === 3) {
334
341
  return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
335
342
  }
336
- else {
337
- if (Number(hour) === 0 && Number(minute) > 0) {
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
- else if (Number(hour) === 0 && Number(minute) === 0) {
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
  }