superdesk-ui-framework 3.0.1-beta.12 → 3.0.1-beta.14

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 (29) hide show
  1. package/app/styles/_table-list.scss +1 -0
  2. package/app/styles/dropdowns/_basic-dropdown.scss +6 -0
  3. package/app-typescript/components/Dropdown.tsx +106 -78
  4. package/app-typescript/components/DurationInput.tsx +14 -4
  5. package/app-typescript/components/Lists/ContentList.tsx +28 -4
  6. package/app-typescript/components/Lists/TableList.tsx +11 -9
  7. package/dist/examples.bundle.js +2267 -1761
  8. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +3 -9
  9. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +9 -19
  10. package/dist/react/ContentList.tsx +2 -10
  11. package/dist/react/Dropdowns.tsx +580 -48
  12. package/dist/react/TableList.tsx +28 -30
  13. package/dist/superdesk-ui.bundle.css +8 -3
  14. package/dist/superdesk-ui.bundle.js +1294 -1219
  15. package/dist/vendor.bundle.js +14 -14
  16. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +3 -9
  17. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +9 -19
  18. package/examples/pages/react/ContentList.tsx +2 -10
  19. package/examples/pages/react/Dropdowns.tsx +580 -48
  20. package/examples/pages/react/TableList.tsx +28 -30
  21. package/package.json +1 -1
  22. package/react/components/Dropdown.d.ts +4 -4
  23. package/react/components/Dropdown.js +44 -26
  24. package/react/components/DurationInput.d.ts +1 -1
  25. package/react/components/DurationInput.js +14 -4
  26. package/react/components/Lists/ContentList.d.ts +5 -0
  27. package/react/components/Lists/ContentList.js +36 -15
  28. package/react/components/Lists/TableList.d.ts +5 -5
  29. package/react/components/Lists/TableList.js +6 -4
@@ -14,7 +14,7 @@ interface IProps {
14
14
  export default class TableListDoc extends React.Component<IProps, IState> {
15
15
  constructor(props: IState) {
16
16
  super(props);
17
- this.state = {
17
+ this.state = {
18
18
  array: [
19
19
  {
20
20
  start: <>
@@ -40,9 +40,8 @@ export default class TableListDoc extends React.Component<IProps, IState> {
40
40
  center: <span>Item 2</span>,
41
41
  end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
42
42
  action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />,
43
- onClick: () => {
44
- return false;
45
- }
43
+ onClick: () => console.log('single'),
44
+ onDoubleClick: () => console.log('double'),
46
45
  },
47
46
  {
48
47
  start: <>
@@ -52,9 +51,9 @@ export default class TableListDoc extends React.Component<IProps, IState> {
52
51
  center: <span>Item 3</span>,
53
52
  end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
54
53
  action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />,
55
- onClick: () => {
56
- return false;
57
- }
54
+ onClick: () => console.log('single'),
55
+ onDoubleClick: () => console.log('double'),
56
+ hexColor: '#ff9808'
58
57
  },
59
58
  ]
60
59
  }
@@ -71,10 +70,10 @@ export default class TableListDoc extends React.Component<IProps, IState> {
71
70
  dragAndDrop
72
71
  addItem
73
72
  array={this.state.array}
74
- itemsDropdown={[
75
- { label: 'Action 1', onSelect: () => 1 },
76
- { label: 'Action 2', onSelect: () => 1 },
77
- { label: 'Action 3', onSelect: () => 1 },
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) },
78
77
  ]} />
79
78
  `}
80
79
  </Markup.ReactMarkupCodePreview>
@@ -82,32 +81,31 @@ export default class TableListDoc extends React.Component<IProps, IState> {
82
81
  <p className="docs-page__paragraph">With drag and drop functionality:</p>
83
82
  <Markup.ReactMarkup>
84
83
  <Markup.ReactMarkupPreview>
85
-
86
84
  <TableList
87
85
  dragAndDrop
88
86
  addItem
89
- onAddItem={(index, item) => console.log(index, item)}
90
87
  array={this.state.array}
91
- itemsDropdown={[
92
- { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1},
93
- { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
94
- { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
95
- ]}
88
+ itemsDropdown={(index) => [
89
+ { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => console.log(index) },
90
+ { label: <Label style='translucent' text='prlg' />, onSelect: () => console.log(index) },
91
+ { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => console.log(index) },
92
+ ]
93
+ }
96
94
  onDrag={(start, end) => console.log(start, end)}
97
95
  />
98
-
99
96
  </Markup.ReactMarkupPreview>
100
97
  <Markup.ReactMarkupCode>{`
101
98
  <TableList
102
99
  dragAndDrop
103
100
  addItem
104
101
  array={this.state.array}
105
- itemsDropdown={[
106
- { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
107
- { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
108
- { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
109
- ]}
110
- onClick={() => false}
102
+ itemsDropdown={(index) => [
103
+ { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => console.log(index) },
104
+ { label: <Label style='translucent' text='prlg' />, onSelect: () => console.log(index) },
105
+ { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => console.log(index) },
106
+ ]
107
+ }
108
+ onDrag={(start, end) => console.log(start, end)}
111
109
  />
112
110
  `}
113
111
  </Markup.ReactMarkupCode>
@@ -116,16 +114,15 @@ export default class TableListDoc extends React.Component<IProps, IState> {
116
114
  <h3 className="docs-page__h3">Props</h3>
117
115
  <p className="docs-page__paragraph">TableList</p>
118
116
  <PropsList>
119
- <Prop name='array' isRequired={false} type='Array' default='false' description='Array of object.' />
120
- <Prop name='children' isRequired={false} type='React.ReactNode' default='false' description='Children of component.' />
117
+ <Prop name='array' isRequired={true} type='Array' default='false' description='Array of object.' />
121
118
  <Prop name='addItem' isRequired={false} type='boolean' default='false' description='Functionality to add items to the list.' />
122
119
  <Prop name='dragAndDrop' isRequired={false} type='boolean' default='false' description='Drag&Drop functionality.' />
123
- <Prop name='itemsDropdown' isRequired={false} type='React.ReactNode | any' default='false' description='Dropdown for functionality to add items to the list.' />
124
120
  <Prop name='className' isRequired={false} type='string' default='false' description='Add class on TableList container.' />
125
- <Prop name='showDragHandle' isRequired={false} type='string' default='always' description='' />
126
- <Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.' />
121
+ <Prop name='showDragHandle' isRequired={false} type='string' default='always' description='"always" | "onHover" | "none".' />
122
+ <Prop name='readOnly' isRequired={false} type='boolean' default='false' description='When specified, component changes are not enabled.' />
127
123
  <Prop name='onDrag' isRequired={false} type='function' default='false' description='Returns start and end position of draggable item' />
128
124
  <Prop name='onAddItem' isRequired={false} type='function' default='false' description='Returns index of draggable item.' />
125
+ <Prop name='itemsDropdown' isRequired={false} type='function' default='false' description='Dropdown for adding items in the list. Returns index of draggable item.' />
129
126
  </PropsList>
130
127
  <p className="docs-page__paragraph">array:</p>
131
128
  <PropsList>
@@ -133,6 +130,7 @@ export default class TableListDoc extends React.Component<IProps, IState> {
133
130
  <Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
134
131
  <Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
135
132
  <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='' />
136
134
  <Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.' />
137
135
  <Prop name='onDoubleClick' isRequired={false} type='function' default='false' description='onDoubleClick functionality.' />
138
136
  </PropsList>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "superdesk-ui-framework",
3
- "version": "3.0.1-beta.12",
3
+ "version": "3.0.1-beta.14",
4
4
  "license": "AGPL-3.0",
5
5
  "repository": {
6
6
  "type": "git",
@@ -1,23 +1,23 @@
1
1
  import * as React from 'react';
2
2
  export interface IMenuItem {
3
- label: string;
3
+ label: string | React.ReactNode;
4
4
  icon?: string;
5
5
  active?: boolean;
6
6
  onSelect(): void;
7
7
  }
8
8
  export interface ISubmenu {
9
9
  type: 'submenu';
10
- label: string;
10
+ label: string | React.ReactNode;
11
11
  icon?: string;
12
12
  items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
13
13
  }
14
14
  export interface IMenuGroup {
15
15
  type: 'group';
16
- label?: string;
16
+ label?: string | React.ReactNode;
17
17
  items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
18
18
  }
19
19
  interface IMenu {
20
- label?: string;
20
+ label?: string | React.ReactNode;
21
21
  align?: 'left' | 'right';
22
22
  items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
23
23
  header?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
@@ -24,16 +24,14 @@ 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
- var refSubMenu = React.useRef(null);
35
34
  var buttonRef = React.useRef(null);
36
- var refButtonSubMenu = React.useRef(null);
37
35
  var headerElements = header === null || header === void 0 ? void 0 : header.map(function (el, index) {
38
36
  return each(el, index);
39
37
  });
@@ -44,11 +42,10 @@ var Dropdown = function (_a) {
44
42
  return each(el, index);
45
43
  });
46
44
  React.useEffect(function () {
47
- var existingElement = document.getElementById(DROPDOWN_ID);
45
+ var existingElement = document.getElementById(DROPDOWN_ID_CONTAINER);
48
46
  if (!existingElement) {
49
47
  var el = document.createElement("div");
50
- el.id = DROPDOWN_ID;
51
- // style placeholder
48
+ el.id = DROPDOWN_ID_CONTAINER;
52
49
  el.style.position = 'absolute';
53
50
  el.style.top = '0';
54
51
  el.style.left = '0';
@@ -63,7 +60,6 @@ var Dropdown = function (_a) {
63
60
  }
64
61
  setChange(true);
65
62
  }, [open]);
66
- // structure for append menu
67
63
  function createAppendMenu() {
68
64
  if (header && footer) {
69
65
  return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref },
@@ -85,7 +81,6 @@ var Dropdown = function (_a) {
85
81
  return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref }, dropdownElements));
86
82
  }
87
83
  }
88
- // toggle menu
89
84
  function toggleDisplay() {
90
85
  if (!open) {
91
86
  var menuRef_1;
@@ -134,15 +129,14 @@ var Dropdown = function (_a) {
134
129
  }
135
130
  }
136
131
  function addInPlaceholder() {
137
- var placeholder = document.getElementById(DROPDOWN_ID);
132
+ var placeholder = document.getElementById(DROPDOWN_ID_CONTAINER);
138
133
  var menu = createAppendMenu();
139
134
  if (open) {
140
135
  return ReactDOM.render(menu, placeholder);
141
136
  }
142
137
  else {
143
- var menuDOM = document.getElementById(menuID);
144
- if (menuDOM) {
145
- menuDOM.style.display = 'none';
138
+ if (placeholder) {
139
+ ReactDOM.unmountComponentAtNode(placeholder);
146
140
  }
147
141
  }
148
142
  }
@@ -152,20 +146,7 @@ var Dropdown = function (_a) {
152
146
  item['items'].forEach(function (el, key) {
153
147
  submenuItems_1.push(each(el, key));
154
148
  });
155
- return (React.createElement("li", { key: index },
156
- React.createElement("div", { className: 'dropdown' },
157
- React.createElement("button", { ref: refButtonSubMenu, className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onMouseOver: function () {
158
- var subMenuRef = refSubMenu.current;
159
- var subToggleRef = refButtonSubMenu.current;
160
- if (subMenuRef && subToggleRef) {
161
- (0, core_1.createPopper)(subToggleRef, subMenuRef, {
162
- placement: 'right-start',
163
- });
164
- }
165
- }, onClick: item['onSelect'] },
166
- item['icon'] ? React.createElement("i", { className: 'icon-' + item['icon'] }) : null,
167
- item['label']),
168
- React.createElement("ul", { ref: refSubMenu, role: 'menu', className: 'dropdown__menu' }, submenuItems_1))));
149
+ return (React.createElement(DropdownItemWithSubmenu, { key: index, index: index, item: item, menuID: menuID, subMenuItems: submenuItems_1, onChange: onChange }));
169
150
  }
170
151
  else if (item['type'] === 'group') {
171
152
  var groupItems_1 = [];
@@ -234,3 +215,40 @@ var DropdownItem = function (_a) {
234
215
  React.createElement("i", { className: icon ? ('icon-' + icon) : '' }),
235
216
  label)));
236
217
  };
218
+ var DropdownItemWithSubmenu = function (_a) {
219
+ var index = _a.index, item = _a.item, menuID = _a.menuID, subMenuItems = _a.subMenuItems, onChange = _a.onChange;
220
+ var _b = React.useState(undefined), open = _b[0], setOpen = _b[1];
221
+ var refButtonSubMenu = React.useRef(null);
222
+ var refSubMenu = React.useRef(null);
223
+ var placeholder = document.getElementById(menuID);
224
+ React.useEffect(function () {
225
+ var subMenuRef = refSubMenu.current;
226
+ var subToggleRef = refButtonSubMenu.current;
227
+ if (open === true) {
228
+ placeholder === null || placeholder === void 0 ? void 0 : placeholder.appendChild(subMenuRef);
229
+ subMenuRef.style.display = 'block';
230
+ }
231
+ else if (open === false) {
232
+ placeholder === null || placeholder === void 0 ? void 0 : placeholder.removeChild(subMenuRef);
233
+ subMenuRef.style.display = 'none';
234
+ }
235
+ if (subMenuRef && subToggleRef) {
236
+ (0, core_1.createPopper)(subToggleRef, subMenuRef, {
237
+ placement: 'right-start',
238
+ });
239
+ }
240
+ }, [open]);
241
+ return (React.createElement("li", { key: index, ref: refButtonSubMenu },
242
+ React.createElement("div", { className: 'dropdown', onMouseLeave: function () { return setOpen(false); } },
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); } },
251
+ item['icon'] ? React.createElement("i", { className: 'icon-' + item['icon'] }) : null,
252
+ item['label']),
253
+ React.createElement("ul", { role: 'menu', ref: refSubMenu, style: { display: 'none' }, className: 'dropdown__menu' }, subMenuItems))));
254
+ };
@@ -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);
@@ -327,9 +327,19 @@ function getDurationString(seconds) {
327
327
  return value;
328
328
  }
329
329
  }
330
- var hour = zeroPad(Math.floor(seconds / 3600));
331
- var minute = zeroPad(Math.floor((seconds % 3600) / 60));
332
- var second = zeroPad(Math.floor(seconds % 60));
330
+ var hour;
331
+ var minute;
332
+ var second;
333
+ if (zero) {
334
+ hour = zeroPad(Math.floor(seconds / 3600));
335
+ minute = zeroPad(Math.floor((seconds % 3600) / 60));
336
+ second = zeroPad(Math.floor(seconds % 60));
337
+ }
338
+ else {
339
+ hour = Math.floor(seconds / 3600);
340
+ minute = Math.floor((seconds % 3600) / 60);
341
+ second = Math.floor(seconds % 60);
342
+ }
333
343
  if (Number(hour) === 0 && Number(minute) > 0) {
334
344
  return "".concat(minute, "m ").concat(second, "s");
335
345
  }
@@ -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 } }),