superdesk-ui-framework 3.0.1-beta.13 → 3.0.1-beta.15
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/scripts/toggleBoxNext.js +1 -1
- package/app/styles/_buttons.scss +1 -1
- package/app/styles/_content-divider.scss +5 -5
- package/app/styles/_helpers.scss +24 -1
- package/app/styles/_icon-font.scss +9 -9
- package/app/styles/_modals.scss +3 -0
- package/app/styles/_normalize.scss +4 -0
- package/app/styles/_simple-list.scss +1 -0
- package/app/styles/_table-list.scss +11 -1
- package/app/styles/app.scss +1 -0
- package/app/styles/components/_list-item.scss +23 -16
- package/app/styles/components/_sd-collapse-box.scss +6 -6
- package/app/styles/design-tokens/_new-colors.scss +10 -5
- package/app/styles/dropdowns/_basic-dropdown.scss +6 -0
- package/app/styles/form-elements/_input-wrap.scss +138 -0
- package/app/styles/form-elements/_inputs.scss +230 -61
- package/app/styles/interface-elements/_side-panel.scss +1 -1
- package/app/styles/primereact/_pr-dialog.scss +1 -0
- package/app/styles/primereact/_pr-menu.scss +6 -5
- package/app-typescript/components/Dropdown.tsx +65 -65
- package/app-typescript/components/DurationInput.tsx +10 -6
- package/app-typescript/components/Form/FormLabel.tsx +8 -1
- package/app-typescript/components/Form/InputBase.tsx +12 -2
- package/app-typescript/components/Lists/ContentList.tsx +28 -4
- package/app-typescript/components/Lists/TableList.tsx +11 -9
- package/dist/examples.bundle.css +8 -8
- package/dist/examples.bundle.js +1075 -640
- package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +1 -1
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +5 -10
- package/dist/playgrounds/react-playgrounds/Rundowns.tsx +20 -21
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +198 -25
- package/dist/react/ContentDivider.tsx +4 -4
- package/dist/react/ContentList.tsx +2 -10
- package/dist/react/Dropdowns.tsx +357 -5
- package/dist/react/Inputs.tsx +1 -7
- package/dist/react/TableList.tsx +28 -30
- package/dist/react/Togglebox.tsx +1 -1
- package/dist/superdesk-ui.bundle.css +463 -176
- package/dist/superdesk-ui.bundle.js +591 -539
- package/dist/vendor.bundle.js +2 -2
- package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +1 -1
- package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +5 -10
- package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +20 -21
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +198 -25
- package/examples/pages/react/ContentDivider.tsx +4 -4
- package/examples/pages/react/ContentList.tsx +2 -10
- package/examples/pages/react/Dropdowns.tsx +357 -5
- package/examples/pages/react/Inputs.tsx +1 -7
- package/examples/pages/react/TableList.tsx +28 -30
- package/examples/pages/react/Togglebox.tsx +1 -1
- package/package.json +1 -1
- package/react/components/Dropdown.d.ts +4 -4
- package/react/components/Dropdown.js +19 -15
- package/react/components/DurationInput.d.ts +1 -1
- package/react/components/DurationInput.js +12 -7
- package/react/components/Form/FormLabel.d.ts +4 -1
- package/react/components/Form/FormLabel.js +9 -3
- package/react/components/Form/InputBase.d.ts +0 -1
- package/react/components/Form/InputBase.js +15 -1
- package/react/components/Lists/ContentList.d.ts +5 -0
- package/react/components/Lists/ContentList.js +36 -15
- package/react/components/Lists/TableList.d.ts +5 -5
- package/react/components/Lists/TableList.js +6 -4
@@ -24,12 +24,12 @@ var React = __importStar(require("react"));
|
|
24
24
|
var ReactDOM = __importStar(require("react-dom"));
|
25
25
|
var core_1 = require("@popperjs/core");
|
26
26
|
var react_id_generator_1 = require("react-id-generator");
|
27
|
+
var DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
|
27
28
|
var Dropdown = function (_a) {
|
28
29
|
var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, onChange = _a.onChange;
|
29
30
|
var _b = React.useState(false), open = _b[0], setOpen = _b[1];
|
30
31
|
var _c = React.useState(false), change = _c[0], setChange = _c[1];
|
31
32
|
var menuID = (0, react_id_generator_1.useId)()[0];
|
32
|
-
var DROPDOWN_ID = "react-placeholder";
|
33
33
|
var ref = React.useRef(null);
|
34
34
|
var buttonRef = React.useRef(null);
|
35
35
|
var headerElements = header === null || header === void 0 ? void 0 : header.map(function (el, index) {
|
@@ -42,11 +42,10 @@ var Dropdown = function (_a) {
|
|
42
42
|
return each(el, index);
|
43
43
|
});
|
44
44
|
React.useEffect(function () {
|
45
|
-
var existingElement = document.getElementById(
|
45
|
+
var existingElement = document.getElementById(DROPDOWN_ID_CONTAINER);
|
46
46
|
if (!existingElement) {
|
47
47
|
var el = document.createElement("div");
|
48
|
-
el.id =
|
49
|
-
// style placeholder
|
48
|
+
el.id = DROPDOWN_ID_CONTAINER;
|
50
49
|
el.style.position = 'absolute';
|
51
50
|
el.style.top = '0';
|
52
51
|
el.style.left = '0';
|
@@ -61,7 +60,6 @@ var Dropdown = function (_a) {
|
|
61
60
|
}
|
62
61
|
setChange(true);
|
63
62
|
}, [open]);
|
64
|
-
// structure for append menu
|
65
63
|
function createAppendMenu() {
|
66
64
|
if (header && footer) {
|
67
65
|
return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref },
|
@@ -83,7 +81,6 @@ var Dropdown = function (_a) {
|
|
83
81
|
return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref }, dropdownElements));
|
84
82
|
}
|
85
83
|
}
|
86
|
-
// toggle menu
|
87
84
|
function toggleDisplay() {
|
88
85
|
if (!open) {
|
89
86
|
var menuRef_1;
|
@@ -132,15 +129,14 @@ var Dropdown = function (_a) {
|
|
132
129
|
}
|
133
130
|
}
|
134
131
|
function addInPlaceholder() {
|
135
|
-
var placeholder = document.getElementById(
|
132
|
+
var placeholder = document.getElementById(DROPDOWN_ID_CONTAINER);
|
136
133
|
var menu = createAppendMenu();
|
137
134
|
if (open) {
|
138
135
|
return ReactDOM.render(menu, placeholder);
|
139
136
|
}
|
140
137
|
else {
|
141
|
-
|
142
|
-
|
143
|
-
menuDOM.style.display = 'none';
|
138
|
+
if (placeholder) {
|
139
|
+
ReactDOM.unmountComponentAtNode(placeholder);
|
144
140
|
}
|
145
141
|
}
|
146
142
|
}
|
@@ -150,7 +146,7 @@ var Dropdown = function (_a) {
|
|
150
146
|
item['items'].forEach(function (el, key) {
|
151
147
|
submenuItems_1.push(each(el, key));
|
152
148
|
});
|
153
|
-
return (React.createElement(DropdownItemWithSubmenu, { key: index, item: item, subMenuItems: submenuItems_1 }));
|
149
|
+
return (React.createElement(DropdownItemWithSubmenu, { key: index, index: index, item: item, menuID: menuID, subMenuItems: submenuItems_1, onChange: onChange }));
|
154
150
|
}
|
155
151
|
else if (item['type'] === 'group') {
|
156
152
|
var groupItems_1 = [];
|
@@ -220,19 +216,20 @@ var DropdownItem = function (_a) {
|
|
220
216
|
label)));
|
221
217
|
};
|
222
218
|
var DropdownItemWithSubmenu = function (_a) {
|
223
|
-
var index = _a.index, item = _a.item, subMenuItems = _a.subMenuItems;
|
219
|
+
var index = _a.index, item = _a.item, menuID = _a.menuID, subMenuItems = _a.subMenuItems, onChange = _a.onChange;
|
224
220
|
var _b = React.useState(undefined), open = _b[0], setOpen = _b[1];
|
225
221
|
var refButtonSubMenu = React.useRef(null);
|
226
222
|
var refSubMenu = React.useRef(null);
|
223
|
+
var placeholder = document.getElementById(menuID);
|
227
224
|
React.useEffect(function () {
|
228
225
|
var subMenuRef = refSubMenu.current;
|
229
226
|
var subToggleRef = refButtonSubMenu.current;
|
230
227
|
if (open === true) {
|
231
|
-
|
228
|
+
placeholder === null || placeholder === void 0 ? void 0 : placeholder.appendChild(subMenuRef);
|
232
229
|
subMenuRef.style.display = 'block';
|
233
230
|
}
|
234
231
|
else if (open === false) {
|
235
|
-
|
232
|
+
placeholder === null || placeholder === void 0 ? void 0 : placeholder.removeChild(subMenuRef);
|
236
233
|
subMenuRef.style.display = 'none';
|
237
234
|
}
|
238
235
|
if (subMenuRef && subToggleRef) {
|
@@ -243,7 +240,14 @@ var DropdownItemWithSubmenu = function (_a) {
|
|
243
240
|
}, [open]);
|
244
241
|
return (React.createElement("li", { key: index, ref: refButtonSubMenu },
|
245
242
|
React.createElement("div", { className: 'dropdown', onMouseLeave: function () { return setOpen(false); } },
|
246
|
-
React.createElement("button", { className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0,
|
243
|
+
React.createElement("button", { className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onClick: function () {
|
244
|
+
if (item.onSelect) {
|
245
|
+
item.onSelect();
|
246
|
+
}
|
247
|
+
if (onChange) {
|
248
|
+
onChange();
|
249
|
+
}
|
250
|
+
}, onMouseOver: function () { return setOpen(true); } },
|
247
251
|
item['icon'] ? React.createElement("i", { className: 'icon-' + item['icon'] }) : null,
|
248
252
|
item['label']),
|
249
253
|
React.createElement("ul", { role: 'menu', ref: refSubMenu, style: { display: 'none' }, className: 'dropdown__menu' }, subMenuItems))));
|
@@ -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): string;
|
41
|
+
export declare function getDurationString(seconds: number, zero?: boolean): string;
|
42
42
|
export {};
|
@@ -315,7 +315,7 @@ var DurationInput = /** @class */ (function (_super) {
|
|
315
315
|
return DurationInput;
|
316
316
|
}(React.PureComponent));
|
317
317
|
exports.DurationInput = DurationInput;
|
318
|
-
function getDurationString(seconds) {
|
318
|
+
function getDurationString(seconds, zero) {
|
319
319
|
function zeroPad(value) {
|
320
320
|
if (value.toString().length === 1 || value === 0) {
|
321
321
|
return "0".concat(value);
|
@@ -330,14 +330,19 @@ function getDurationString(seconds) {
|
|
330
330
|
var hour = zeroPad(Math.floor(seconds / 3600));
|
331
331
|
var minute = zeroPad(Math.floor((seconds % 3600) / 60));
|
332
332
|
var second = zeroPad(Math.floor(seconds % 60));
|
333
|
-
if (
|
334
|
-
return "".concat(minute, "m ").concat(second, "s");
|
335
|
-
}
|
336
|
-
else if (Number(hour) === 0 && Number(minute) === 0) {
|
337
|
-
return "".concat(second, "s");
|
333
|
+
if (zero) {
|
334
|
+
return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
|
338
335
|
}
|
339
336
|
else {
|
340
|
-
|
337
|
+
if (Number(hour) === 0 && Number(minute) > 0) {
|
338
|
+
return "".concat(minute, "m ").concat(second, "s");
|
339
|
+
}
|
340
|
+
else if (Number(hour) === 0 && Number(minute) === 0) {
|
341
|
+
return "".concat(second, "s");
|
342
|
+
}
|
343
|
+
else {
|
344
|
+
return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
|
345
|
+
}
|
341
346
|
}
|
342
347
|
}
|
343
348
|
exports.getDurationString = getDurationString;
|
@@ -1,8 +1,11 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
interface IProps {
|
3
|
-
style?: 'normal' | 'light';
|
3
|
+
style?: 'normal' | 'light' | 'boxed';
|
4
|
+
state?: 'default' | 'focused' | 'warning';
|
4
5
|
text: string;
|
5
6
|
forId?: string;
|
7
|
+
required?: boolean;
|
8
|
+
invalid?: boolean;
|
6
9
|
}
|
7
10
|
export declare class FormLabel extends React.PureComponent<IProps> {
|
8
11
|
render(): JSX.Element;
|
@@ -46,9 +46,15 @@ var FormLabel = /** @class */ (function (_super) {
|
|
46
46
|
return _super !== null && _super.apply(this, arguments) || this;
|
47
47
|
}
|
48
48
|
FormLabel.prototype.render = function () {
|
49
|
-
var
|
50
|
-
|
51
|
-
|
49
|
+
var _a;
|
50
|
+
var classes = (0, classnames_1.default)('form-label', (_a = {
|
51
|
+
'form-label--light': this.props.style === 'light',
|
52
|
+
'form-label--boxed': this.props.style === 'boxed',
|
53
|
+
'form-label--required': this.props.required,
|
54
|
+
'form-label--invalid': this.props.invalid
|
55
|
+
},
|
56
|
+
_a["form-label--".concat(this.props.state)] = this.props.state !== 'default' && this.props.state !== undefined,
|
57
|
+
_a));
|
52
58
|
return (React.createElement("label", { htmlFor: this.props.forId, className: classes }, this.props.text));
|
53
59
|
};
|
54
60
|
return FormLabel;
|
@@ -33,9 +33,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
33
33
|
__setModuleDefault(result, mod);
|
34
34
|
return result;
|
35
35
|
};
|
36
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
37
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
38
|
+
};
|
36
39
|
Object.defineProperty(exports, "__esModule", { value: true });
|
37
40
|
exports.InputBase = void 0;
|
38
41
|
var React = __importStar(require("react"));
|
42
|
+
var classnames_1 = __importDefault(require("classnames"));
|
39
43
|
var InputBase = /** @class */ (function (_super) {
|
40
44
|
__extends(InputBase, _super);
|
41
45
|
function InputBase(props) {
|
@@ -65,7 +69,17 @@ var InputBase = /** @class */ (function (_super) {
|
|
65
69
|
};
|
66
70
|
InputBase.prototype.render = function () {
|
67
71
|
var _a;
|
68
|
-
|
72
|
+
var _b;
|
73
|
+
var classes = (0, classnames_1.default)('sd-input__input', (_a = {
|
74
|
+
'sd-input__input--boxed-style': this.props.boxedStyle,
|
75
|
+
'sd-input__input--required': this.props.required,
|
76
|
+
'sd-input__input--invalid': this.props.invalid,
|
77
|
+
'sd-input__input--disabled': this.props.disabled,
|
78
|
+
'sd-input__input--medium': this.props.size === undefined
|
79
|
+
},
|
80
|
+
_a["sd-input__input--".concat(this.props.size)] = this.props.size || this.props.size !== undefined,
|
81
|
+
_a));
|
82
|
+
return (React.createElement("input", { className: classes, type: (_b = this.props.type) !== null && _b !== void 0 ? _b : 'text', id: this.props.htmlId, value: this.state.value, "aria-describedby": this.props.htmlId + 'label', tabIndex: this.props.tabIndex, onChange: this.handleChange, placeholder: this.props.placeholder, disabled: this.props.disabled }));
|
69
83
|
};
|
70
84
|
return InputBase;
|
71
85
|
}(React.Component));
|
@@ -17,6 +17,11 @@ interface IPropsItem {
|
|
17
17
|
onDoubleClick?(): void;
|
18
18
|
}
|
19
19
|
declare class ContentListItem extends React.PureComponent<IPropsItem> {
|
20
|
+
private timer;
|
21
|
+
private delay;
|
22
|
+
private prevent;
|
23
|
+
onSingleClick: () => void;
|
24
|
+
onDoubleClick: () => void;
|
20
25
|
render(): JSX.Element;
|
21
26
|
}
|
22
27
|
interface IProps {
|
@@ -43,28 +43,49 @@ var classnames_1 = __importDefault(require("classnames"));
|
|
43
43
|
var ContentListItem = /** @class */ (function (_super) {
|
44
44
|
__extends(ContentListItem, _super);
|
45
45
|
function ContentListItem() {
|
46
|
-
|
46
|
+
var _this = _super !== null && _super.apply(this, arguments) || this;
|
47
|
+
_this.delay = 200;
|
48
|
+
_this.prevent = false;
|
49
|
+
_this.onSingleClick = function () {
|
50
|
+
_this.timer = setTimeout(function () {
|
51
|
+
if (!_this.prevent) {
|
52
|
+
if (_this.props.onClick) {
|
53
|
+
_this.props.onClick();
|
54
|
+
}
|
55
|
+
}
|
56
|
+
}, _this.delay);
|
57
|
+
};
|
58
|
+
_this.onDoubleClick = function () {
|
59
|
+
clearTimeout(_this.timer);
|
60
|
+
_this.prevent = true;
|
61
|
+
if (_this.props.onDoubleClick) {
|
62
|
+
_this.props.onDoubleClick();
|
63
|
+
}
|
64
|
+
setTimeout(function () {
|
65
|
+
_this.prevent = false;
|
66
|
+
}, _this.delay);
|
67
|
+
};
|
68
|
+
return _this;
|
47
69
|
}
|
48
70
|
ContentListItem.prototype.render = function () {
|
49
|
-
var classes = (0, classnames_1.default)('sd-list-item sd-
|
71
|
+
var classes = (0, classnames_1.default)('sd-list-item sd-shadow--z1', {
|
50
72
|
'sd-list-item--activated': this.props.activated,
|
51
73
|
'sd-list-item--selected': this.props.selected,
|
52
74
|
'fetched': this.props.archived,
|
53
75
|
'actioning': this.props.loading,
|
54
76
|
});
|
55
|
-
return (React.createElement("div", { className: classes, onClick: this.
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
return
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
React.createElement("div", { className: "sd-list-item__action-menu" }, this.props.action))));
|
77
|
+
return (React.createElement("div", { className: classes, onClick: this.onSingleClick, onDoubleClick: this.onDoubleClick },
|
78
|
+
this.props.locked
|
79
|
+
? React.createElement("div", { className: "sd-list-item__border sd-list-item__border--locked" })
|
80
|
+
: React.createElement("div", { className: "sd-list-item__border" }),
|
81
|
+
this.props.itemColum.map(function (item, index) {
|
82
|
+
return React.createElement("div", { className: "sd-list-item__column ".concat(item.fullwidth && 'sd-list-item__column--grow', " ").concat(!item.border && 'sd-list-item__column--no-border'), key: index }, item.itemRow.map(function (e, i) {
|
83
|
+
return (item.itemRow.length <= 1
|
84
|
+
? React.createElement(React.Fragment, { key: i }, e.content)
|
85
|
+
: React.createElement("div", { className: "sd-list-item__row", key: i }, e.content));
|
86
|
+
}));
|
87
|
+
}),
|
88
|
+
React.createElement("div", { className: "sd-list-item__action-menu" }, this.props.action)));
|
68
89
|
};
|
69
90
|
return ContentListItem;
|
70
91
|
}(React.PureComponent));
|
@@ -5,21 +5,21 @@ export interface IProps {
|
|
5
5
|
array: Array<IPropsArrayItem>;
|
6
6
|
addItem?: boolean;
|
7
7
|
dragAndDrop?: boolean;
|
8
|
-
itemsDropdown?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
|
9
8
|
className?: string;
|
10
9
|
readOnly?: boolean;
|
11
10
|
showDragHandle?: 'always' | 'onHover' | 'none';
|
12
11
|
onDrag?(start: number, end: number): void;
|
13
12
|
onAddItem?(index: number, item?: IPropsArrayItem): void;
|
13
|
+
itemsDropdown?(index?: number): Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
|
14
14
|
}
|
15
15
|
export interface IPropsArrayItem {
|
16
16
|
start?: React.ReactNode;
|
17
17
|
center?: React.ReactNode;
|
18
18
|
end?: React.ReactNode;
|
19
19
|
action?: React.ReactNode;
|
20
|
+
hexColor?: string;
|
20
21
|
onClick?(): void;
|
21
22
|
onDoubleClick?(): void;
|
22
|
-
hexColor?: string;
|
23
23
|
}
|
24
24
|
interface IState {
|
25
25
|
items: Array<IPropsArrayItem>;
|
@@ -38,14 +38,14 @@ export interface IPropsItem {
|
|
38
38
|
end?: React.ReactNode;
|
39
39
|
action?: React.ReactNode;
|
40
40
|
addItem?: boolean;
|
41
|
-
itemsDropdown?: any;
|
42
41
|
dragAndDrop?: boolean;
|
42
|
+
hexColor?: string;
|
43
|
+
showDragHandle?: 'always' | 'onHover' | 'none';
|
43
44
|
onClick?(): void;
|
44
45
|
onDoubleClick?(): void;
|
45
46
|
onSelect?(): void;
|
46
47
|
onAddItem?(e: number): void;
|
47
|
-
|
48
|
-
showDragHandle?: 'always' | 'onHover' | 'none';
|
48
|
+
itemsDropdown?(index?: number): Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
|
49
49
|
}
|
50
50
|
declare class TableListItem extends React.PureComponent<IPropsItem> {
|
51
51
|
private timer;
|
@@ -98,7 +98,7 @@ var TableList = /** @class */ (function (_super) {
|
|
98
98
|
this.props.onDrag(result.source.index, result.destination.index) : null;
|
99
99
|
};
|
100
100
|
TableList.prototype.dropDown = function () {
|
101
|
-
return (React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
|
101
|
+
return (React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown ? this.props.itemsDropdown() : [] },
|
102
102
|
React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } })));
|
103
103
|
};
|
104
104
|
TableList.prototype.render = function () {
|
@@ -117,7 +117,9 @@ var TableList = /** @class */ (function (_super) {
|
|
117
117
|
_this.state.items.map(function (item, index) { return (React.createElement(react_beautiful_dnd_1.Draggable, { key: index, draggableId: "".concat(index), index: index }, function (provided2, _snapshot2) { return (React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
|
118
118
|
React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
|
119
119
|
? item.onDoubleClick
|
120
|
-
: undefined, addItem: _this.props.addItem, itemsDropdown:
|
120
|
+
: undefined, addItem: _this.props.addItem, itemsDropdown: function () { return _this.props.itemsDropdown
|
121
|
+
? _this.props.itemsDropdown(index)
|
122
|
+
: []; }, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
|
121
123
|
&& _this.props.onAddItem(index, item); }, showDragHandle: _this.props.showDragHandle }))); })); }),
|
122
124
|
provided.placeholder,
|
123
125
|
(_this.props.addItem && !_this.props.readOnly) &&
|
@@ -127,7 +129,7 @@ var TableList = /** @class */ (function (_super) {
|
|
127
129
|
: React.createElement("ul", { className: classes },
|
128
130
|
this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
|
129
131
|
? item.onDoubleClick
|
130
|
-
: undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
|
132
|
+
: undefined, addItem: _this.props.addItem, itemsDropdown: function () { return _this.props.itemsDropdown ? _this.props.itemsDropdown(index) : []; }, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
|
131
133
|
&& _this.props.onAddItem(index, item); } })); }),
|
132
134
|
(this.props.addItem && !this.props.readOnly) &&
|
133
135
|
React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
|
@@ -189,7 +191,7 @@ var TableListItem = /** @class */ (function (_super) {
|
|
189
191
|
React.createElement("div", { className: 'table-list__add-bar-container' },
|
190
192
|
React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
|
191
193
|
React.createElement("div", { className: 'table-list__add-bar' },
|
192
|
-
React.createElement(Dropdown_1.Dropdown, { onChange: this.props.onAddItem, items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
|
194
|
+
React.createElement(Dropdown_1.Dropdown, { onChange: this.props.onAddItem, items: this.props.itemsDropdown ? this.props.itemsDropdown() : [] },
|
193
195
|
React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }))))))
|
194
196
|
: React.createElement("li", { className: "".concat(classes, " table-list__item--margin"), onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); } },
|
195
197
|
React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
|