superdesk-ui-framework 3.0.1-beta.13 → 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 (79) hide show
  1. package/.vscode/settings.json +5 -0
  2. package/app/styles/_table-list.scss +1 -0
  3. package/app/styles/dropdowns/_basic-dropdown.scss +6 -0
  4. package/app-typescript/components/Dropdown.tsx +65 -65
  5. package/app-typescript/components/DurationInput.tsx +14 -4
  6. package/app-typescript/components/Lists/ContentList.tsx +28 -4
  7. package/app-typescript/components/Lists/TableList.tsx +11 -9
  8. package/app-typescript/dist/components/Alert.d.ts +16 -0
  9. package/app-typescript/dist/components/Autocomplete.d.ts +48 -0
  10. package/app-typescript/dist/components/Avatar.d.ts +33 -0
  11. package/app-typescript/dist/components/Badge.d.ts +13 -0
  12. package/app-typescript/dist/components/Button.d.ts +23 -0
  13. package/app-typescript/dist/components/ButtonGroup.d.ts +12 -0
  14. package/app-typescript/dist/components/CheckButtonGroup.d.ts +11 -0
  15. package/app-typescript/dist/components/CheckGroup.d.ts +9 -0
  16. package/app-typescript/dist/components/Checkbox.d.ts +19 -0
  17. package/app-typescript/dist/components/CheckboxButton.d.ts +19 -0
  18. package/app-typescript/dist/components/DatePicker.d.ts +37 -0
  19. package/app-typescript/dist/components/Divider.d.ts +9 -0
  20. package/app-typescript/dist/components/DonutChart.d.ts +12 -0
  21. package/app-typescript/dist/components/Dropdown.d.ts +28 -0
  22. package/app-typescript/dist/components/DropdownFirst.d.ts +42 -0
  23. package/app-typescript/dist/components/EmptyState.d.ts +11 -0
  24. package/app-typescript/dist/components/FormLabel.d.ts +9 -0
  25. package/app-typescript/dist/components/Genie.d.ts +13 -0
  26. package/app-typescript/dist/components/GridItem.d.ts +69 -0
  27. package/app-typescript/dist/components/GridList.d.ts +14 -0
  28. package/app-typescript/dist/components/HeadingText.d.ts +10 -0
  29. package/app-typescript/dist/components/HelloWorld.d.ts +8 -0
  30. package/app-typescript/dist/components/Icon.d.ts +12 -0
  31. package/app-typescript/dist/components/IconButton.d.ts +12 -0
  32. package/app-typescript/dist/components/IconLabel.d.ts +11 -0
  33. package/app-typescript/dist/components/Input.d.ts +24 -0
  34. package/app-typescript/dist/components/Label.d.ts +15 -0
  35. package/app-typescript/dist/components/LeftMenu.d.ts +26 -0
  36. package/app-typescript/dist/components/Loader.d.ts +8 -0
  37. package/app-typescript/dist/components/NavButton.d.ts +15 -0
  38. package/app-typescript/dist/components/Popover.d.ts +13 -0
  39. package/app-typescript/dist/components/PropsList.d.ts +15 -0
  40. package/app-typescript/dist/components/Radio.d.ts +19 -0
  41. package/app-typescript/dist/components/RadioButton.d.ts +20 -0
  42. package/app-typescript/dist/components/Select.d.ts +29 -0
  43. package/app-typescript/dist/components/SelectWithTemplate.d.ts +32 -0
  44. package/app-typescript/dist/components/SlidingToolbar.d.ts +8 -0
  45. package/app-typescript/dist/components/StrechBar.d.ts +4 -0
  46. package/app-typescript/dist/components/SubNav.d.ts +10 -0
  47. package/app-typescript/dist/components/Switch.d.ts +12 -0
  48. package/app-typescript/dist/components/TabCustom.d.ts +25 -0
  49. package/app-typescript/dist/components/TabList.d.ts +22 -0
  50. package/app-typescript/dist/components/Tag.d.ts +9 -0
  51. package/app-typescript/dist/components/TagInput.d.ts +7 -0
  52. package/app-typescript/dist/components/TagInputTest.d.ts +18 -0
  53. package/app-typescript/dist/components/TimePicker.d.ts +11 -0
  54. package/app-typescript/dist/components/Tooltip.d.ts +11 -0
  55. package/app-typescript/dist/components/_Positioner.d.ts +27 -0
  56. package/app-typescript/dist/index.d.ts +56 -0
  57. package/dist/examples.bundle.js +538 -122
  58. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +3 -9
  59. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +9 -19
  60. package/dist/react/ContentList.tsx +2 -10
  61. package/dist/react/Dropdowns.tsx +357 -5
  62. package/dist/react/TableList.tsx +28 -30
  63. package/dist/superdesk-ui.bundle.css +8 -3
  64. package/dist/superdesk-ui.bundle.js +232 -94
  65. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +3 -9
  66. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +9 -19
  67. package/examples/pages/react/ContentList.tsx +2 -10
  68. package/examples/pages/react/Dropdowns.tsx +357 -5
  69. package/examples/pages/react/TableList.tsx +28 -30
  70. package/package.json +1 -1
  71. package/react/components/Dropdown.d.ts +4 -4
  72. package/react/components/Dropdown.js +19 -15
  73. package/react/components/DurationInput.d.ts +1 -1
  74. package/react/components/DurationInput.js +14 -4
  75. package/react/components/Lists/ContentList.d.ts +5 -0
  76. package/react/components/Lists/ContentList.js +36 -15
  77. package/react/components/Lists/TableList.d.ts +5 -5
  78. package/react/components/Lists/TableList.js +6 -4
  79. package/yarn-error.log +111 -0
@@ -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.13",
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,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);
@@ -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 } }),
package/yarn-error.log ADDED
@@ -0,0 +1,111 @@
1
+ Arguments:
2
+ /usr/local/bin/node /usr/local/bin/yarn install
3
+
4
+ PATH:
5
+ /usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
6
+
7
+ Yarn version:
8
+ 1.21.1
9
+
10
+ Node version:
11
+ 12.14.1
12
+
13
+ Platform:
14
+ linux x64
15
+
16
+ Trace:
17
+ Error: getaddrinfo EAI_AGAIN registry.yarnpkg.com
18
+ at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:60:26)
19
+
20
+ npm manifest:
21
+ {
22
+ "name": "superdesk-ui-framework",
23
+ "version": "2.1.11",
24
+ "license": "AGPL-3.0",
25
+ "repository": {
26
+ "type": "git",
27
+ "url": "https://github.com/superdesk/superdesk-ui-framework.git"
28
+ },
29
+ "main": "dist/superdesk-ui.bundle.js",
30
+ "types": "app-typescript/dist/index.d.ts",
31
+ "contributors": [
32
+ "Nemanja Pavlovic",
33
+ "Vladimir Stefanovic",
34
+ "Darko Tomic",
35
+ "Aleksandar Jelicic",
36
+ "Tomas Kikutis"
37
+ ],
38
+ "scripts": {
39
+ "start": "webpack-dev-server --config tasks/webpack.dev.js",
40
+ "server": "webpack --watch",
41
+ "build": "webpack && npm run lint && tsc",
42
+ "lint": "eslint app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'",
43
+ "prepublishOnly": "npm run build",
44
+ "prepublish": "patch-package"
45
+ },
46
+ "devDependencies": {
47
+ "@types/classnames": "^2.2.9",
48
+ "@types/lodash": "4.14.149",
49
+ "@types/react": "16.8.23",
50
+ "@types/react-dom": "16.8.0",
51
+ "@types/react-router-dom": "^5.1.2",
52
+ "angular": "^1.7.9",
53
+ "angular-animate": "^1.7.9",
54
+ "angular-route": "^1.7.9",
55
+ "babel-core": "^6.26.0",
56
+ "babel-loader": "^7.1.2",
57
+ "babel-plugin-transform-object-rest-spread": "^6.26.0",
58
+ "babel-preset-es2015": "^6.24.1",
59
+ "babel-preset-react": "^6.24.1",
60
+ "classnames": "^2.2.5",
61
+ "clean-webpack-plugin": "^1.0.0",
62
+ "code-prettify": "^0.1.0",
63
+ "copy-webpack-plugin": "^4.6.0",
64
+ "css-loader": "^2.1.1",
65
+ "eslint": "^4.6.1",
66
+ "eslint-loader": "^1.9.0",
67
+ "eslint-plugin-angular": "^3.1.1",
68
+ "eslint-plugin-react": "^7.3.0",
69
+ "extract-text-webpack-plugin": "^3.0.2",
70
+ "file-loader": "^0.11.2",
71
+ "html-loader": "^0.5.1",
72
+ "html-webpack-plugin": "^2.30.1",
73
+ "jquery": "^3.1.1",
74
+ "jquery-ui": "^1.12.1",
75
+ "lodash": "4.17.15",
76
+ "node-sass": "^4.5.3",
77
+ "patch-package": "6.2.0",
78
+ "prismjs": "^1.17.1",
79
+ "prop-types": "^15.6.0",
80
+ "react": "16.8.6",
81
+ "react-bootstrap": "^0.31.2",
82
+ "react-dom": "16.8.6",
83
+ "react-redux": "^5.0.6",
84
+ "react-router-dom": "^5.1.2",
85
+ "redux": "^3.7.2",
86
+ "redux-form": "^7.0.4",
87
+ "sass-loader": "^6.0.6",
88
+ "style-loader": "^0.18.2",
89
+ "superdesk-code-style": "^1.1.2",
90
+ "ts-loader": "^6.0.2",
91
+ "tslint": "^5.18.0",
92
+ "typescript": "^3.5.1",
93
+ "url-loader": "^1.1.2",
94
+ "webpack": "^3.5.5",
95
+ "webpack-cli": "3.3.10",
96
+ "webpack-dev-server": "2.11.1",
97
+ "webpack-merge": "^4.2.1"
98
+ },
99
+ "dependencies": {
100
+ "date-fns": "2.7.0",
101
+ "popper.js": "1.14.4",
102
+ "primeicons": "2.0.0",
103
+ "primereact": "3.3.2"
104
+ }
105
+ }
106
+
107
+ yarn manifest:
108
+ No manifest
109
+
110
+ Lockfile:
111
+ No lockfile