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.
@@ -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
- console.log(e)
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: () => 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>
@@ -40271,14 +40271,18 @@ var DurationInput = /** @class */ (function (_super) {
40271
40271
  }, 500);
40272
40272
  }
40273
40273
  }
40274
- if ((this.props.hours !== prevProps.hours)
40275
- || (this.props.minutes !== prevProps.minutes)
40276
- || (this.props.seconds !== prevProps.seconds)) {
40277
- this.setState({
40278
- hours: this.stateUpdate('hours', this.props.hours, this.props.minutes, this.props.seconds),
40279
- minutes: this.stateUpdate('minutes', this.props.minutes, this.props.seconds),
40280
- seconds: this.stateUpdate('seconds', this.props.seconds),
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 >= 2) {
40386
- if (event.target.selectionStart === 1 && event.target.selectionEnd === 1) {
40387
- stateClone[state] = event.target.value.slice(0, 1) + event.target.value.slice(2, 3);
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(0, 2);
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, zero) {
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 (zero) {
40470
+ if (minSections === 3) {
40464
40471
  return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
40465
40472
  }
40466
- else {
40467
- if (Number(hour) === 0 && Number(minute) > 0) {
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
- else if (Number(hour) === 0 && Number(minute) === 0) {
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
- onSelect();
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
- item.onSelect();
57281
+ setTimeout(function () {
57282
+ item.onSelect();
57283
+ });
57265
57284
  }
57266
57285
  if (onChange) {
57267
57286
  onChange();