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
@@ -322,7 +322,9 @@ onChange,
|
|
322
322
|
<button tabIndex={0}
|
323
323
|
role='menuitem'
|
324
324
|
onClick={() => {
|
325
|
-
|
325
|
+
setTimeout(() => {
|
326
|
+
onSelect();
|
327
|
+
});
|
326
328
|
if (onChange) {
|
327
329
|
onChange();
|
328
330
|
}
|
@@ -376,7 +378,9 @@ const DropdownItemWithSubmenu = ({
|
|
376
378
|
tabIndex={0}
|
377
379
|
onClick={() => {
|
378
380
|
if (item.onSelect) {
|
379
|
-
|
381
|
+
setTimeout(() => {
|
382
|
+
item.onSelect();
|
383
|
+
});
|
380
384
|
}
|
381
385
|
if (onChange) {
|
382
386
|
onChange();
|
@@ -129,14 +129,18 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
|
|
129
129
|
}
|
130
130
|
}
|
131
131
|
|
132
|
-
if (
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
132
|
+
if (this.hourRef.current.value.length === 2
|
133
|
+
&& this.minuteRef.current.value.length === 2
|
134
|
+
&& this.secondRef.current.value.length === 2) {
|
135
|
+
if ((this.props.hours !== prevProps.hours)
|
136
|
+
|| (this.props.minutes !== prevProps.minutes)
|
137
|
+
|| (this.props.seconds !== prevProps.seconds)) {
|
138
|
+
this.setState({
|
139
|
+
hours: this.stateUpdate('hours', this.props.hours, this.props.minutes, this.props.seconds),
|
140
|
+
minutes: this.stateUpdate('minutes', this.props.minutes, this.props.seconds),
|
141
|
+
seconds: this.stateUpdate('seconds', this.props.seconds),
|
142
|
+
});
|
143
|
+
}
|
140
144
|
}
|
141
145
|
}
|
142
146
|
|
@@ -241,11 +245,13 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
|
|
241
245
|
|
242
246
|
handleChange(event: React.ChangeEvent<HTMLInputElement>, state: 'hours' | 'minutes' | 'seconds') {
|
243
247
|
let stateClone: IState = {};
|
244
|
-
if (event.target.value.length
|
245
|
-
if (event.target.selectionStart === 1
|
246
|
-
stateClone[state] = event.target.value.slice(0, 1)
|
248
|
+
if (event.target.value.length > 2) {
|
249
|
+
if (event.target.selectionStart === 1) {
|
250
|
+
stateClone[state] = event.target.value.slice(0, 1);
|
251
|
+
} else if (event.target.selectionStart === 2) {
|
252
|
+
stateClone[state] = event.target.value.slice(1, 2);
|
247
253
|
} else {
|
248
|
-
stateClone[state] = event.target.value.slice(
|
254
|
+
stateClone[state] = event.target.value.slice(2, 3);
|
249
255
|
}
|
250
256
|
} else {
|
251
257
|
stateClone[state] = event.target.value;
|
@@ -299,6 +305,7 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
|
|
299
305
|
className={`duration-input ${this.state.blink === 'hour' ? 'blink_me' : ''}`}
|
300
306
|
type='text'
|
301
307
|
id='hours'
|
308
|
+
autoComplete="off"
|
302
309
|
max={99}
|
303
310
|
min={0}
|
304
311
|
ref={this.hourRef}
|
@@ -319,6 +326,7 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
|
|
319
326
|
className={`duration-input ${this.state.blink === 'minute' ? 'blink_me' : ''}`}
|
320
327
|
type='text'
|
321
328
|
id='minutes'
|
329
|
+
autoComplete="off"
|
322
330
|
ref={this.minuteRef}
|
323
331
|
value={this.state.minutes}
|
324
332
|
disabled={this.props.disabled}
|
@@ -337,6 +345,7 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
|
|
337
345
|
className='duration-input'
|
338
346
|
type='text'
|
339
347
|
id='seconds'
|
348
|
+
autoComplete="off"
|
340
349
|
ref={this.secondRef}
|
341
350
|
value={this.state.seconds}
|
342
351
|
disabled={this.props.disabled}
|
@@ -356,7 +365,7 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
|
|
356
365
|
}
|
357
366
|
}
|
358
367
|
|
359
|
-
export function getDurationString(seconds: number,
|
368
|
+
export function getDurationString(seconds: number, minSections: 1 | 2 | 3) {
|
360
369
|
function zeroPad(value: number | string) {
|
361
370
|
if (value.toString().length === 1 || value === 0) {
|
362
371
|
return `0${value}`;
|
@@ -371,13 +380,19 @@ export function getDurationString(seconds: number, zero?: boolean) {
|
|
371
380
|
let minute = zeroPad(Math.floor((seconds % 3600) / 60));
|
372
381
|
let second = zeroPad(Math.floor(seconds % 60));
|
373
382
|
|
374
|
-
if (
|
383
|
+
if (minSections === 3) {
|
375
384
|
return `${hour}h ${minute}m ${second}s`;
|
376
|
-
} else {
|
377
|
-
if (Number(hour)
|
385
|
+
} else if (minSections === 2) {
|
386
|
+
if (Number(hour) > 0) {
|
387
|
+
return `${hour}h ${minute}m ${second}s`;
|
388
|
+
} else {
|
378
389
|
return `${minute}m ${second}s`;
|
379
|
-
}
|
390
|
+
}
|
391
|
+
} else {
|
392
|
+
if (Number(hour) === 0 && Number(minute) === 0) {
|
380
393
|
return `${second}s`;
|
394
|
+
} else if (Number(hour) === 0 && Number(minute) > 0) {
|
395
|
+
return `${minute}m ${second}s`;
|
381
396
|
} else {
|
382
397
|
return `${hour}h ${minute}m ${second}s`;
|
383
398
|
}
|
@@ -0,0 +1,87 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import classNames from 'classnames';
|
3
|
+
|
4
|
+
export interface IPropsSpacer {
|
5
|
+
h?: boolean; // horizontal
|
6
|
+
v?: boolean; // vertical
|
7
|
+
gap: '4' | '8' | '16' | '32' | '64';
|
8
|
+
justifyContent?: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'stretch';
|
9
|
+
alignItems?: 'start' | 'end' | 'center' | 'stretch';
|
10
|
+
noGrow?: boolean;
|
11
|
+
|
12
|
+
/**
|
13
|
+
* Will not wrap children in div elements.
|
14
|
+
* `noGrow` prop would then not be relevant.
|
15
|
+
*/
|
16
|
+
noWrap?: boolean;
|
17
|
+
|
18
|
+
style?: React.CSSProperties;
|
19
|
+
|
20
|
+
children: Array<React.ReactNode>;
|
21
|
+
}
|
22
|
+
|
23
|
+
export class Spacer extends React.PureComponent<IPropsSpacer> {
|
24
|
+
constructor(props: IPropsSpacer) {
|
25
|
+
super(props);
|
26
|
+
this.state = {
|
27
|
+
items: [],
|
28
|
+
};
|
29
|
+
|
30
|
+
}
|
31
|
+
render() {
|
32
|
+
const {h, v, gap, justifyContent, alignItems, noGrow, noWrap} = this.props;
|
33
|
+
|
34
|
+
const justifyContentDefault: IPropsSpacer['justifyContent'] = h ? 'space-between' : 'start';
|
35
|
+
const alignItemsDefault: IPropsSpacer['alignItems'] = h ? 'center' : 'start';
|
36
|
+
|
37
|
+
return (
|
38
|
+
<div
|
39
|
+
style={{
|
40
|
+
display: 'flex',
|
41
|
+
flexDirection: v ? 'column' : 'row',
|
42
|
+
gap: `${gap}px`,
|
43
|
+
justifyContent: justifyContent ?? justifyContentDefault,
|
44
|
+
alignItems: alignItems ?? alignItemsDefault,
|
45
|
+
width: noGrow === true ? undefined : '100%',
|
46
|
+
...(this.props.style ?? {}),
|
47
|
+
}}
|
48
|
+
>
|
49
|
+
{this.props.children.map((el, i) => noWrap ? el : (
|
50
|
+
<div
|
51
|
+
key={i}
|
52
|
+
style={{
|
53
|
+
width: noGrow === true ? undefined : '100%',
|
54
|
+
}}
|
55
|
+
>
|
56
|
+
{el}
|
57
|
+
</div>
|
58
|
+
))}
|
59
|
+
</div>
|
60
|
+
);
|
61
|
+
}
|
62
|
+
}
|
63
|
+
|
64
|
+
/**
|
65
|
+
* Renders a standalone spacing block - similar to <br />
|
66
|
+
*/
|
67
|
+
export interface ISpacerBlock {
|
68
|
+
h?: boolean; // horizontal
|
69
|
+
v?: boolean; // vertical
|
70
|
+
gap: '4' | '8' | '16' | '32' | '64';
|
71
|
+
}
|
72
|
+
|
73
|
+
export class SpacerBlock extends React.PureComponent<ISpacerBlock> {
|
74
|
+
render() {
|
75
|
+
const {gap, h, v} = this.props;
|
76
|
+
|
77
|
+
return (
|
78
|
+
<span
|
79
|
+
style={{
|
80
|
+
display: h === true ? 'inline-block' : 'block',
|
81
|
+
width: h === true ? `${gap}px` : undefined,
|
82
|
+
height: v === true ? `${gap}px` : undefined,
|
83
|
+
}}
|
84
|
+
/>
|
85
|
+
);
|
86
|
+
}
|
87
|
+
}
|
package/dist/examples.bundle.js
CHANGED
@@ -40627,14 +40627,18 @@ var DurationInput = /** @class */ (function (_super) {
|
|
40627
40627
|
}, 500);
|
40628
40628
|
}
|
40629
40629
|
}
|
40630
|
-
if (
|
40631
|
-
|
40632
|
-
|
40633
|
-
this.
|
40634
|
-
|
40635
|
-
|
40636
|
-
|
40637
|
-
|
40630
|
+
if (this.hourRef.current.value.length === 2
|
40631
|
+
&& this.minuteRef.current.value.length === 2
|
40632
|
+
&& this.secondRef.current.value.length === 2) {
|
40633
|
+
if ((this.props.hours !== prevProps.hours)
|
40634
|
+
|| (this.props.minutes !== prevProps.minutes)
|
40635
|
+
|| (this.props.seconds !== prevProps.seconds)) {
|
40636
|
+
this.setState({
|
40637
|
+
hours: this.stateUpdate('hours', this.props.hours, this.props.minutes, this.props.seconds),
|
40638
|
+
minutes: this.stateUpdate('minutes', this.props.minutes, this.props.seconds),
|
40639
|
+
seconds: this.stateUpdate('seconds', this.props.seconds),
|
40640
|
+
});
|
40641
|
+
}
|
40638
40642
|
}
|
40639
40643
|
};
|
40640
40644
|
DurationInput.prototype.valueUpdate = function () {
|
@@ -40738,12 +40742,15 @@ var DurationInput = /** @class */ (function (_super) {
|
|
40738
40742
|
};
|
40739
40743
|
DurationInput.prototype.handleChange = function (event, state) {
|
40740
40744
|
var stateClone = {};
|
40741
|
-
if (event.target.value.length
|
40742
|
-
if (event.target.selectionStart === 1
|
40743
|
-
stateClone[state] = event.target.value.slice(0, 1)
|
40745
|
+
if (event.target.value.length > 2) {
|
40746
|
+
if (event.target.selectionStart === 1) {
|
40747
|
+
stateClone[state] = event.target.value.slice(0, 1);
|
40748
|
+
}
|
40749
|
+
else if (event.target.selectionStart === 2) {
|
40750
|
+
stateClone[state] = event.target.value.slice(1, 2);
|
40744
40751
|
}
|
40745
40752
|
else {
|
40746
|
-
stateClone[state] = event.target.value.slice(
|
40753
|
+
stateClone[state] = event.target.value.slice(2, 3);
|
40747
40754
|
}
|
40748
40755
|
}
|
40749
40756
|
else {
|
@@ -40779,19 +40786,19 @@ var DurationInput = /** @class */ (function (_super) {
|
|
40779
40786
|
var InputClasses = (0, classnames_1.default)('sd-input__duration-input');
|
40780
40787
|
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 },
|
40781
40788
|
React.createElement("div", { className: InputClasses },
|
40782
|
-
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) {
|
40789
|
+
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) {
|
40783
40790
|
if (!/[0-9]/.test(event.key)) {
|
40784
40791
|
event.preventDefault();
|
40785
40792
|
}
|
40786
40793
|
} }),
|
40787
40794
|
React.createElement("span", { className: 'sd-input__suffix' }, "h"),
|
40788
|
-
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) {
|
40795
|
+
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) {
|
40789
40796
|
if (!/[0-9]/.test(event.key)) {
|
40790
40797
|
event.preventDefault();
|
40791
40798
|
}
|
40792
40799
|
} }),
|
40793
40800
|
React.createElement("span", { className: 'sd-input__suffix' }, "m"),
|
40794
|
-
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) {
|
40801
|
+
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) {
|
40795
40802
|
if (!/[0-9]/.test(event.key)) {
|
40796
40803
|
event.preventDefault();
|
40797
40804
|
}
|
@@ -40801,7 +40808,7 @@ var DurationInput = /** @class */ (function (_super) {
|
|
40801
40808
|
return DurationInput;
|
40802
40809
|
}(React.PureComponent));
|
40803
40810
|
exports.DurationInput = DurationInput;
|
40804
|
-
function getDurationString(seconds,
|
40811
|
+
function getDurationString(seconds, minSections) {
|
40805
40812
|
function zeroPad(value) {
|
40806
40813
|
if (value.toString().length === 1 || value === 0) {
|
40807
40814
|
return "0".concat(value);
|
@@ -40816,16 +40823,24 @@ function getDurationString(seconds, zero) {
|
|
40816
40823
|
var hour = zeroPad(Math.floor(seconds / 3600));
|
40817
40824
|
var minute = zeroPad(Math.floor((seconds % 3600) / 60));
|
40818
40825
|
var second = zeroPad(Math.floor(seconds % 60));
|
40819
|
-
if (
|
40826
|
+
if (minSections === 3) {
|
40820
40827
|
return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
|
40821
40828
|
}
|
40822
|
-
else {
|
40823
|
-
if (Number(hour)
|
40829
|
+
else if (minSections === 2) {
|
40830
|
+
if (Number(hour) > 0) {
|
40831
|
+
return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
|
40832
|
+
}
|
40833
|
+
else {
|
40824
40834
|
return "".concat(minute, "m ").concat(second, "s");
|
40825
40835
|
}
|
40826
|
-
|
40836
|
+
}
|
40837
|
+
else {
|
40838
|
+
if (Number(hour) === 0 && Number(minute) === 0) {
|
40827
40839
|
return "".concat(second, "s");
|
40828
40840
|
}
|
40841
|
+
else if (Number(hour) === 0 && Number(minute) > 0) {
|
40842
|
+
return "".concat(minute, "m ").concat(second, "s");
|
40843
|
+
}
|
40829
40844
|
else {
|
40830
40845
|
return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
|
40831
40846
|
}
|
@@ -57582,7 +57597,9 @@ var DropdownItem = function (_a) {
|
|
57582
57597
|
var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect, onChange = _a.onChange;
|
57583
57598
|
return (React.createElement("li", { role: 'none', className: active ? 'dropdown__menu-item--active' : '' },
|
57584
57599
|
React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick: function () {
|
57585
|
-
|
57600
|
+
setTimeout(function () {
|
57601
|
+
onSelect();
|
57602
|
+
});
|
57586
57603
|
if (onChange) {
|
57587
57604
|
onChange();
|
57588
57605
|
}
|
@@ -57617,7 +57634,9 @@ var DropdownItemWithSubmenu = function (_a) {
|
|
57617
57634
|
React.createElement("div", { className: 'dropdown', onMouseLeave: function () { return setOpen(false); } },
|
57618
57635
|
React.createElement("button", { className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onClick: function () {
|
57619
57636
|
if (item.onSelect) {
|
57620
|
-
|
57637
|
+
setTimeout(function () {
|
57638
|
+
item.onSelect();
|
57639
|
+
});
|
57621
57640
|
}
|
57622
57641
|
if (onChange) {
|
57623
57642
|
onChange();
|
@@ -131900,7 +131919,12 @@ var TableListDoc = /** @class */ (function (_super) {
|
|
131900
131919
|
TableListDoc.prototype.render = function () {
|
131901
131920
|
return (React.createElement("section", { className: 'docs-page__container' },
|
131902
131921
|
React.createElement("h2", { className: 'docs-page__h2' }, "TableList"),
|
131903
|
-
React.createElement(Markup.ReactMarkupCodePreview, null, "\n <TableList\n dragAndDrop\n addItem\n array={this.state.array}\n itemsDropdown={(index) => [\n { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () =>
|
131922
|
+
React.createElement(Markup.ReactMarkupCodePreview, null, "\n <TableList\n dragAndDrop\n addItem\n array={this.state.array}\n itemsDropdown={(index) => [\n { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => false },\n { label: <Label style='translucent' text='prlg' />, onSelect: () => false },\n { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => false },\n ]} />\n "),
|
131923
|
+
React.createElement("p", { className: "docs-page__paragraph" }, "Simple list without drag and drop functionality and without functionality for adding item in list:"),
|
131924
|
+
React.createElement(Markup.ReactMarkup, null,
|
131925
|
+
React.createElement(Markup.ReactMarkupPreview, null,
|
131926
|
+
React.createElement(TableList_1.TableList, { array: this.state.array })),
|
131927
|
+
React.createElement(Markup.ReactMarkupCode, null, "\n <TableList\n array={this.state.array}\n />\n ")),
|
131904
131928
|
React.createElement("p", { className: "docs-page__paragraph" }, "With drag and drop functionality:"),
|
131905
131929
|
React.createElement(Markup.ReactMarkup, null,
|
131906
131930
|
React.createElement(Markup.ReactMarkupPreview, null,
|
@@ -131928,7 +131952,9 @@ var TableListDoc = /** @class */ (function (_super) {
|
|
131928
131952
|
React.createElement(app_typescript_1.Prop, { name: 'center', isRequired: false, type: 'React.ReactNode', default: 'false', description: 'Column of individual items of list.' }),
|
131929
131953
|
React.createElement(app_typescript_1.Prop, { name: 'end', isRequired: false, type: 'React.ReactNode', default: 'false', description: 'Column of individual items of list.' }),
|
131930
131954
|
React.createElement(app_typescript_1.Prop, { name: 'action', isRequired: false, type: 'React.ReactNode', default: 'false', description: 'Column of individual list items that is displayed on hover.' }),
|
131931
|
-
React.createElement(app_typescript_1.Prop, { name: 'hexColor', isRequired: false, type: 'string', default: 'false', description: '' }),
|
131955
|
+
React.createElement(app_typescript_1.Prop, { name: 'hexColor', isRequired: false, type: 'string', default: 'false', description: 'Color of left border for item status.' }),
|
131956
|
+
React.createElement(app_typescript_1.Prop, { name: 'locked', isRequired: false, type: 'function', default: 'false', description: 'If is true, the individual item of list change state and change style (border).' }),
|
131957
|
+
React.createElement(app_typescript_1.Prop, { name: 'positionLocked', isRequired: false, type: 'function', default: 'false', description: 'Work in progress...' }),
|
131932
131958
|
React.createElement(app_typescript_1.Prop, { name: 'onClick', isRequired: false, type: 'function', default: 'false', description: 'onClick functionality.' }),
|
131933
131959
|
React.createElement(app_typescript_1.Prop, { name: 'onDoubleClick', isRequired: false, type: 'function', default: 'false', description: 'onDoubleClick functionality.' }))));
|
131934
131960
|
};
|
@@ -132026,7 +132052,6 @@ var ContentListDoc = /** @class */ (function (_super) {
|
|
132026
132052
|
}
|
132027
132053
|
],
|
132028
132054
|
action: React.createElement(app_typescript_1.IconButton, { icon: 'dots-vertical', ariaValue: 'More actions', onClick: function () { return false; } }),
|
132029
|
-
loading: true,
|
132030
132055
|
},
|
132031
132056
|
{
|
132032
132057
|
itemColum: [
|
@@ -132057,8 +132082,6 @@ var ContentListDoc = /** @class */ (function (_super) {
|
|
132057
132082
|
fullwidth: true,
|
132058
132083
|
}
|
132059
132084
|
],
|
132060
|
-
//locked: true,
|
132061
|
-
selected: true,
|
132062
132085
|
action: React.createElement(app_typescript_1.IconButton, { icon: 'dots-vertical', ariaValue: 'More actions', onClick: function () { return false; } }),
|
132063
132086
|
},
|
132064
132087
|
{
|
@@ -132093,7 +132116,115 @@ var ContentListDoc = /** @class */ (function (_super) {
|
|
132093
132116
|
action: React.createElement(app_typescript_1.IconButton, { icon: 'dots-vertical', ariaValue: 'More actions', onClick: function () { return false; } }),
|
132094
132117
|
},
|
132095
132118
|
] })),
|
132096
|
-
React.createElement(Markup.
|
132119
|
+
React.createElement(Markup.ReactMarkupPreview, null,
|
132120
|
+
React.createElement("p", { className: "docs-page__paragraph" }, "// loading"),
|
132121
|
+
React.createElement(ContentList_1.ContentList, { items: [
|
132122
|
+
{
|
132123
|
+
itemColum: [
|
132124
|
+
{
|
132125
|
+
itemRow: [{ content: React.createElement(React.Fragment, null,
|
132126
|
+
React.createElement("i", { className: "icon-rundown" })) }],
|
132127
|
+
border: true
|
132128
|
+
},
|
132129
|
+
{
|
132130
|
+
itemRow: [
|
132131
|
+
{
|
132132
|
+
content: React.createElement(React.Fragment, null,
|
132133
|
+
React.createElement("span", { className: "sd-list-item__slugline" }, "19:00 \u2013 19:45"),
|
132134
|
+
React.createElement(app_typescript_1.IconLabel, { style: 'translucent', innerLabel: 'Duration:', text: '00:38', size: 'small', type: 'warning' }),
|
132135
|
+
React.createElement(app_typescript_1.IconLabel, { style: 'translucent', innerLabel: 'Planned Duration:', text: '00:45', size: 'small' }),
|
132136
|
+
React.createElement("time", { className: 'sd-margin-s--auto', title: "June 01, 2022 11:08 AM" }, "11:08, 01.06.2022"))
|
132137
|
+
},
|
132138
|
+
{
|
132139
|
+
content: React.createElement(React.Fragment, null,
|
132140
|
+
React.createElement(app_typescript_1.Label, { text: 'Marker', color: 'blue--800' }),
|
132141
|
+
React.createElement("span", { className: 'sd-list-item__compound-text' },
|
132142
|
+
React.createElement("span", { className: 'sd-list-item__text-label' }, "Template:"),
|
132143
|
+
React.createElement("span", null, "Marker Daily")),
|
132144
|
+
React.createElement("span", { className: "sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline" }, "Marker // 01.06.2022"),
|
132145
|
+
React.createElement(app_typescript_1.Label, { style: 'translucent', text: 'In Progress', type: 'warning' }))
|
132146
|
+
},
|
132147
|
+
],
|
132148
|
+
fullwidth: true,
|
132149
|
+
}
|
132150
|
+
],
|
132151
|
+
action: React.createElement(app_typescript_1.IconButton, { icon: 'dots-vertical', ariaValue: 'More actions', onClick: function () { return false; } }),
|
132152
|
+
loading: true
|
132153
|
+
},
|
132154
|
+
] })),
|
132155
|
+
React.createElement(Markup.ReactMarkupPreview, null,
|
132156
|
+
React.createElement("p", { className: "docs-page__paragraph" }, "// selected"),
|
132157
|
+
React.createElement(ContentList_1.ContentList, { items: [
|
132158
|
+
{
|
132159
|
+
itemColum: [
|
132160
|
+
{
|
132161
|
+
itemRow: [{ content: React.createElement(React.Fragment, null,
|
132162
|
+
React.createElement("i", { className: "icon-rundown" })) }],
|
132163
|
+
border: true
|
132164
|
+
},
|
132165
|
+
{
|
132166
|
+
itemRow: [
|
132167
|
+
{
|
132168
|
+
content: React.createElement(React.Fragment, null,
|
132169
|
+
React.createElement("span", { className: "sd-list-item__slugline" }, "19:00 \u2013 19:45"),
|
132170
|
+
React.createElement(app_typescript_1.IconLabel, { style: 'translucent', innerLabel: 'Duration:', text: '00:38', size: 'small', type: 'warning' }),
|
132171
|
+
React.createElement(app_typescript_1.IconLabel, { style: 'translucent', innerLabel: 'Planned Duration:', text: '00:45', size: 'small' }),
|
132172
|
+
React.createElement("time", { className: 'sd-margin-s--auto', title: "June 01, 2022 11:08 AM" }, "11:08, 01.06.2022"))
|
132173
|
+
},
|
132174
|
+
{
|
132175
|
+
content: React.createElement(React.Fragment, null,
|
132176
|
+
React.createElement(app_typescript_1.Label, { text: 'Marker', color: 'blue--800' }),
|
132177
|
+
React.createElement("span", { className: 'sd-list-item__compound-text' },
|
132178
|
+
React.createElement("span", { className: 'sd-list-item__text-label' }, "Template:"),
|
132179
|
+
React.createElement("span", null, "Marker Daily")),
|
132180
|
+
React.createElement("span", { className: "sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline" }, "Marker // 01.06.2022"),
|
132181
|
+
React.createElement(app_typescript_1.Label, { style: 'translucent', text: 'In Progress', type: 'warning' }))
|
132182
|
+
},
|
132183
|
+
],
|
132184
|
+
fullwidth: true,
|
132185
|
+
}
|
132186
|
+
],
|
132187
|
+
action: React.createElement(app_typescript_1.IconButton, { icon: 'dots-vertical', ariaValue: 'More actions', onClick: function () { return false; } }),
|
132188
|
+
selected: true,
|
132189
|
+
},
|
132190
|
+
] })),
|
132191
|
+
React.createElement(Markup.ReactMarkupPreview, null,
|
132192
|
+
React.createElement("p", { className: "docs-page__paragraph" }, "// locked"),
|
132193
|
+
React.createElement(ContentList_1.ContentList, { items: [
|
132194
|
+
{
|
132195
|
+
itemColum: [
|
132196
|
+
{
|
132197
|
+
itemRow: [{ content: React.createElement(React.Fragment, null,
|
132198
|
+
React.createElement("i", { className: "icon-rundown" })) }],
|
132199
|
+
border: true
|
132200
|
+
},
|
132201
|
+
{
|
132202
|
+
itemRow: [
|
132203
|
+
{
|
132204
|
+
content: React.createElement(React.Fragment, null,
|
132205
|
+
React.createElement("span", { className: "sd-list-item__slugline" }, "19:00 \u2013 19:45"),
|
132206
|
+
React.createElement(app_typescript_1.IconLabel, { style: 'translucent', innerLabel: 'Duration:', text: '00:38', size: 'small', type: 'warning' }),
|
132207
|
+
React.createElement(app_typescript_1.IconLabel, { style: 'translucent', innerLabel: 'Planned Duration:', text: '00:45', size: 'small' }),
|
132208
|
+
React.createElement("time", { className: 'sd-margin-s--auto', title: "June 01, 2022 11:08 AM" }, "11:08, 01.06.2022"))
|
132209
|
+
},
|
132210
|
+
{
|
132211
|
+
content: React.createElement(React.Fragment, null,
|
132212
|
+
React.createElement(app_typescript_1.Label, { text: 'Marker', color: 'blue--800' }),
|
132213
|
+
React.createElement("span", { className: 'sd-list-item__compound-text' },
|
132214
|
+
React.createElement("span", { className: 'sd-list-item__text-label' }, "Template:"),
|
132215
|
+
React.createElement("span", null, "Marker Daily")),
|
132216
|
+
React.createElement("span", { className: "sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline" }, "Marker // 01.06.2022"),
|
132217
|
+
React.createElement(app_typescript_1.Label, { style: 'translucent', text: 'In Progress', type: 'warning' }))
|
132218
|
+
},
|
132219
|
+
],
|
132220
|
+
fullwidth: true,
|
132221
|
+
}
|
132222
|
+
],
|
132223
|
+
action: React.createElement(app_typescript_1.IconButton, { icon: 'dots-vertical', ariaValue: 'More actions', onClick: function () { return false; } }),
|
132224
|
+
locked: true,
|
132225
|
+
},
|
132226
|
+
] })),
|
132227
|
+
React.createElement(Markup.ReactMarkupCode, null, "\n <ContentList\n items={[\n {\n itemColum: [\n {\n itemRow: [{content:<>\n <i className=\"icon-rundown\"></i>\n </>}], \n border: true\n },\n {\n itemRow: [\n {\n content: \n <>\n <span className=\"sd-list-item__slugline\">19:00 \u2013 19:45</span>\n <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />\n <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />\n <time className='sd-margin-s--auto' title=\"June 01, 2022 11:08 AM\">11:08, 01.06.2022</time>\n </>\n },\n {\n content: \n <>\n <Label text='Marker' color='blue--800'/>\n <span className='sd-list-item__compound-text'>\n <span className='sd-list-item__text-label'>Template:</span>\n <span>Marker Daily</span>\n </span>\n <span className=\"sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline\">Marker // 01.06.2022</span> \n <Label style='translucent' text='In Progress' type='warning' />\n </>\n },\n ],\n fullwidth: true,\n }\n ],\n action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,\n },\n {\n itemColum: [\n {\n itemRow: [{content:<>\n <i className=\"icon-rundown\"></i>\n </>}], \n border: true\n },\n {\n itemRow: [\n {\n content: \n <>\n <span className=\"sd-list-item__slugline\">19:00 \u2013 19:45</span>\n <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />\n <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />\n <time className='sd-margin-s--auto' title=\"June 01, 2022 11:08 AM\">11:08, 01.06.2022</time>\n </>\n },\n {\n content: \n <>\n <Label text='Marker' color='blue--800'/>\n <span className='sd-list-item__compound-text'>\n <span className='sd-list-item__text-label'>Template:</span>\n <span>Marker Daily</span>\n </span>\n <span className=\"sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline\">Marker // 01.06.2022</span> \n <Label style='translucent' text='In Progress' type='warning' />\n </>\n },\n ],\n fullwidth: true,\n }\n ],\n locked: true,\n action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,\n },\n {\n itemColum: [\n {\n itemRow: [{content:<>\n <i className=\"icon-rundown\"></i>\n </>}], \n border: true\n },\n {\n itemRow: [\n {\n content:\n <>\n <span className=\"sd-list-item__slugline\">19:00 \u2013 19:45</span>\n <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />\n <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />\n <time className='sd-margin-s--auto' title=\"June 01, 2022 11:08 AM\">11:08, 01.06.2022</time>\n </>\n },\n {\n content:\n <>\n <Label text='Marker' color='blue--800'/>\n <span className='sd-list-item__compound-text'>\n <span className='sd-list-item__text-label'>Template:</span>\n <span>Marker Daily</span>\n </span>\n <span className=\"sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline\">Marker // 01.06.2022</span> \n <Label style='translucent' text='In Progress' type='warning' />\n </>\n },\n ],\n fullwidth: true,\n }\n ],\n action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,\n },\n ]} />\n\n // loading, slected & locked\n\n <ContentList\n items={[\n {\n itemColum: [\n {\n itemRow: [{content:<>\n <i className=\"icon-rundown\"></i>\n </>}],\n border: true\n },\n {\n itemRow: [\n {\n content:\n <>\n <span className=\"sd-list-item__slugline\">19:00 \u2013 19:45</span>\n <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='small' type='warning' />\n <IconLabel style='translucent' innerLabel='Planned Duration:'text='00:45' size='small' />\n <time className='sd-margin-s--auto' title=\"June 01, 2022 11:08 AM\">11:08, 01.06.2022</time>\n </>\n },\n {\n content:\n <>\n <Label text='Marker' color='blue--800'/>\n <span className='sd-list-item__compound-text'>\n <span className='sd-list-item__text-label'>Template:</span>\n <span>Marker Daily</span>\n </span>\n <span className=\"sd-overflow-ellipsis sd-list-item--element-grow sd-list-item__headline\">Marker // 01.06.2022</span> \n <Label style='translucent' text='In Progress' type='warning' />\n </>\n },\n ],\n fullwidth: true,\n }\n ],\n action: <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> false} />,\n loading: true,\n selected: true,\n locked: true,\n },\n ]} />\n ")),
|
132097
132228
|
React.createElement("h3", { className: "docs-page__h3" }, "Props"),
|
132098
132229
|
React.createElement("p", { className: "docs-page__paragraph" }, "ContentList"),
|
132099
132230
|
React.createElement(app_typescript_1.PropsList, null,
|
@@ -132108,7 +132239,12 @@ var ContentListDoc = /** @class */ (function (_super) {
|
|
132108
132239
|
React.createElement(app_typescript_1.Prop, { name: 'archived', isRequired: false, type: 'boolean', default: 'false', description: 'If is true, the individual item of list change state and change style.' }),
|
132109
132240
|
React.createElement(app_typescript_1.Prop, { name: 'loading', isRequired: false, type: 'boolean', default: 'false', description: 'If is true, the individual item of list change state and change style.' }),
|
132110
132241
|
React.createElement(app_typescript_1.Prop, { name: 'onClick', isRequired: false, type: 'function', default: '/', description: 'onClick functionality.' }),
|
132111
|
-
React.createElement(app_typescript_1.Prop, { name: 'onDoubleClick', isRequired: false, type: 'function', default: '/', description: 'onDoubleClick functionality.' }))
|
132242
|
+
React.createElement(app_typescript_1.Prop, { name: 'onDoubleClick', isRequired: false, type: 'function', default: '/', description: 'onDoubleClick functionality.' })),
|
132243
|
+
React.createElement("p", { className: "docs-page__paragraph" }, "itemColum:"),
|
132244
|
+
React.createElement(app_typescript_1.PropsList, null,
|
132245
|
+
React.createElement(app_typescript_1.Prop, { name: 'itemRow', isRequired: true, type: 'Array<{content: any}>', default: 'ture', description: 'An array of objects for defining rows of individual items.' }),
|
132246
|
+
React.createElement(app_typescript_1.Prop, { name: 'border', isRequired: false, type: 'boolean', default: 'false', description: 'If is true, the individual item of list change style.' }),
|
132247
|
+
React.createElement(app_typescript_1.Prop, { name: 'fullwidth', isRequired: false, type: 'boolean', default: 'false', description: 'If is true, the individual item of list change style.' }))));
|
132112
132248
|
};
|
132113
132249
|
return ContentListDoc;
|
132114
132250
|
}(React.Component));
|
@@ -137436,6 +137572,7 @@ var DurationInputDoc = /** @class */ (function (_super) {
|
|
137436
137572
|
required: true,
|
137437
137573
|
disabled: false,
|
137438
137574
|
invalid: false,
|
137575
|
+
value: 3661,
|
137439
137576
|
};
|
137440
137577
|
return _this;
|
137441
137578
|
}
|
@@ -137455,7 +137592,8 @@ var DurationInputDoc = /** @class */ (function (_super) {
|
|
137455
137592
|
React.createElement(app_typescript_1.Checkbox, { checked: this.state.invalid, label: { text: 'Invalid input' }, onChange: function (value) { _this.setState({ invalid: value }); } }),
|
137456
137593
|
React.createElement(app_typescript_1.Checkbox, { checked: this.state.inlineLabel, label: { text: 'Label positioned inline' }, onChange: function (value) { _this.setState({ inlineLabel: value }); } }))),
|
137457
137594
|
React.createElement("div", { className: 'form__row' },
|
137458
|
-
React.createElement(DurationInput_1.DurationInput, { label: 'Label', info: 'info message', disabled: this.state.disabled, required: this.state.required, invalid: this.state.invalid, inlineLabel: this.state.inlineLabel, onChange: function (e) {
|
137595
|
+
React.createElement(DurationInput_1.DurationInput, { label: 'Label', info: 'info message', disabled: this.state.disabled, required: this.state.required, invalid: this.state.invalid, inlineLabel: this.state.inlineLabel, seconds: this.state.value, onChange: function (e) {
|
137596
|
+
_this.setState({ value: e });
|
137459
137597
|
console.log(e);
|
137460
137598
|
} })))),
|
137461
137599
|
React.createElement(Markup.ReactMarkupCode, null, "\n <DurationInput\n label='Label'\n info='info message'\n disabled={this.state.disabled}\n required={this.state.required}\n invalid={this.state.invalid}\n inlineLabel={this.state.inlineLabel}\n onChange={(e) => {\n console.log(e)\n }}\n />\n ")),
|
@@ -137772,7 +137910,7 @@ exports.WithSizeObserverDocs = WithSizeObserverDocs;
|
|
137772
137910
|
/* 649 */
|
137773
137911
|
/***/ (function(module, exports) {
|
137774
137912
|
|
137775
|
-
module.exports = {"name":"superdesk-ui-framework","version":"3.0.1-beta.
|
137913
|
+
module.exports = {"name":"superdesk-ui-framework","version":"3.0.1-beta.19","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build"},"devDependencies":{"@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/lodash":"^4.14.161","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"5.14.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","lodash":"4.17.21","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","tslint":"^5.18.0","typescript":"4.5.2","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","moment":"^2.29.3","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
|
137776
137914
|
|
137777
137915
|
/***/ }),
|
137778
137916
|
/* 650 */
|