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.
Files changed (63) hide show
  1. package/app/scripts/toggleBoxNext.js +1 -1
  2. package/app/styles/_buttons.scss +1 -1
  3. package/app/styles/_content-divider.scss +5 -5
  4. package/app/styles/_helpers.scss +24 -1
  5. package/app/styles/_icon-font.scss +9 -9
  6. package/app/styles/_modals.scss +3 -0
  7. package/app/styles/_normalize.scss +4 -0
  8. package/app/styles/_simple-list.scss +1 -0
  9. package/app/styles/_table-list.scss +11 -1
  10. package/app/styles/app.scss +1 -0
  11. package/app/styles/components/_list-item.scss +23 -16
  12. package/app/styles/components/_sd-collapse-box.scss +6 -6
  13. package/app/styles/design-tokens/_new-colors.scss +10 -5
  14. package/app/styles/dropdowns/_basic-dropdown.scss +6 -0
  15. package/app/styles/form-elements/_input-wrap.scss +138 -0
  16. package/app/styles/form-elements/_inputs.scss +230 -61
  17. package/app/styles/interface-elements/_side-panel.scss +1 -1
  18. package/app/styles/primereact/_pr-dialog.scss +1 -0
  19. package/app/styles/primereact/_pr-menu.scss +6 -5
  20. package/app-typescript/components/Dropdown.tsx +65 -65
  21. package/app-typescript/components/DurationInput.tsx +10 -6
  22. package/app-typescript/components/Form/FormLabel.tsx +8 -1
  23. package/app-typescript/components/Form/InputBase.tsx +12 -2
  24. package/app-typescript/components/Lists/ContentList.tsx +28 -4
  25. package/app-typescript/components/Lists/TableList.tsx +11 -9
  26. package/dist/examples.bundle.css +8 -8
  27. package/dist/examples.bundle.js +1075 -640
  28. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +1 -1
  29. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +5 -10
  30. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +20 -21
  31. package/dist/playgrounds/react-playgrounds/TestGround.tsx +198 -25
  32. package/dist/react/ContentDivider.tsx +4 -4
  33. package/dist/react/ContentList.tsx +2 -10
  34. package/dist/react/Dropdowns.tsx +357 -5
  35. package/dist/react/Inputs.tsx +1 -7
  36. package/dist/react/TableList.tsx +28 -30
  37. package/dist/react/Togglebox.tsx +1 -1
  38. package/dist/superdesk-ui.bundle.css +463 -176
  39. package/dist/superdesk-ui.bundle.js +591 -539
  40. package/dist/vendor.bundle.js +2 -2
  41. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +1 -1
  42. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +5 -10
  43. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +20 -21
  44. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +198 -25
  45. package/examples/pages/react/ContentDivider.tsx +4 -4
  46. package/examples/pages/react/ContentList.tsx +2 -10
  47. package/examples/pages/react/Dropdowns.tsx +357 -5
  48. package/examples/pages/react/Inputs.tsx +1 -7
  49. package/examples/pages/react/TableList.tsx +28 -30
  50. package/examples/pages/react/Togglebox.tsx +1 -1
  51. package/package.json +1 -1
  52. package/react/components/Dropdown.d.ts +4 -4
  53. package/react/components/Dropdown.js +19 -15
  54. package/react/components/DurationInput.d.ts +1 -1
  55. package/react/components/DurationInput.js +12 -7
  56. package/react/components/Form/FormLabel.d.ts +4 -1
  57. package/react/components/Form/FormLabel.js +9 -3
  58. package/react/components/Form/InputBase.d.ts +0 -1
  59. package/react/components/Form/InputBase.js +15 -1
  60. package/react/components/Lists/ContentList.d.ts +5 -0
  61. package/react/components/Lists/ContentList.js +36 -15
  62. package/react/components/Lists/TableList.d.ts +5 -5
  63. 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(DROPDOWN_ID);
45
+ var existingElement = document.getElementById(DROPDOWN_ID_CONTAINER);
46
46
  if (!existingElement) {
47
47
  var el = document.createElement("div");
48
- el.id = DROPDOWN_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(DROPDOWN_ID);
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
- var menuDOM = document.getElementById(menuID);
142
- if (menuDOM) {
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
- document.body.appendChild(subMenuRef);
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
- document.body.removeChild(subMenuRef);
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, onMouseOver: function () { return setOpen(true); }, onClick: item['onSelect'] },
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 (Number(hour) === 0 && Number(minute) > 0) {
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
- return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
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 classes = (0, classnames_1.default)('form-label', {
50
- 'form-label--light': this.props.style === 'light',
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;
@@ -7,7 +7,6 @@ interface IPropsBase {
7
7
  tabIndex?: number;
8
8
  fullWidth?: boolean;
9
9
  boxedStyle?: boolean;
10
- boxedLable?: boolean;
11
10
  placeholder?: string;
12
11
  htmlId?: string;
13
12
  id?: string;
@@ -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
- return (React.createElement("input", { className: 'sd-input__input', type: (_a = this.props.type) !== null && _a !== void 0 ? _a : '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 }));
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
- return _super !== null && _super.apply(this, arguments) || this;
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-list-item-group sd-list-item-group--space-between-items', {
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.props.onClick, onDoubleClick: this.props.onDoubleClick },
56
- React.createElement("div", { className: "sd-list-item sd-shadow--z1" },
57
- this.props.locked
58
- ? React.createElement("div", { className: "sd-list-item__border sd-list-item__border--locked" })
59
- : React.createElement("div", { className: "sd-list-item__border" }),
60
- this.props.itemColum.map(function (item, index) {
61
- 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) {
62
- return (item.itemRow.length <= 1
63
- ? React.createElement(React.Fragment, { key: i }, e.content)
64
- : React.createElement("div", { className: "sd-list-item__row", key: i }, e.content));
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
- hexColor?: string;
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: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
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 } }),