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
@@ -38910,7 +38910,7 @@ var DurationInput = /** @class */ (function (_super) {
38910
38910
  return DurationInput;
38911
38911
  }(React.PureComponent));
38912
38912
  exports.DurationInput = DurationInput;
38913
- function getDurationString(seconds) {
38913
+ function getDurationString(seconds, zero) {
38914
38914
  function zeroPad(value) {
38915
38915
  if (value.toString().length === 1 || value === 0) {
38916
38916
  return "0".concat(value);
@@ -38922,9 +38922,19 @@ function getDurationString(seconds) {
38922
38922
  return value;
38923
38923
  }
38924
38924
  }
38925
- var hour = zeroPad(Math.floor(seconds / 3600));
38926
- var minute = zeroPad(Math.floor((seconds % 3600) / 60));
38927
- var second = zeroPad(Math.floor(seconds % 60));
38925
+ var hour;
38926
+ var minute;
38927
+ var second;
38928
+ if (zero) {
38929
+ hour = zeroPad(Math.floor(seconds / 3600));
38930
+ minute = zeroPad(Math.floor((seconds % 3600) / 60));
38931
+ second = zeroPad(Math.floor(seconds % 60));
38932
+ }
38933
+ else {
38934
+ hour = Math.floor(seconds / 3600);
38935
+ minute = Math.floor((seconds % 3600) / 60);
38936
+ second = Math.floor(seconds % 60);
38937
+ }
38928
38938
  if (Number(hour) === 0 && Number(minute) > 0) {
38929
38939
  return "".concat(minute, "m ").concat(second, "s");
38930
38940
  }
@@ -40768,7 +40778,7 @@ var TableList = /** @class */ (function (_super) {
40768
40778
  this.props.onDrag(result.source.index, result.destination.index) : null;
40769
40779
  };
40770
40780
  TableList.prototype.dropDown = function () {
40771
- return (React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
40781
+ return (React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown ? this.props.itemsDropdown() : [] },
40772
40782
  React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } })));
40773
40783
  };
40774
40784
  TableList.prototype.render = function () {
@@ -40787,7 +40797,9 @@ var TableList = /** @class */ (function (_super) {
40787
40797
  _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),
40788
40798
  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
40789
40799
  ? item.onDoubleClick
40790
- : undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
40800
+ : undefined, addItem: _this.props.addItem, itemsDropdown: function () { return _this.props.itemsDropdown
40801
+ ? _this.props.itemsDropdown(index)
40802
+ : []; }, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
40791
40803
  && _this.props.onAddItem(index, item); }, showDragHandle: _this.props.showDragHandle }))); })); }),
40792
40804
  provided.placeholder,
40793
40805
  (_this.props.addItem && !_this.props.readOnly) &&
@@ -40797,7 +40809,7 @@ var TableList = /** @class */ (function (_super) {
40797
40809
  : React.createElement("ul", { className: classes },
40798
40810
  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
40799
40811
  ? item.onDoubleClick
40800
- : undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
40812
+ : undefined, addItem: _this.props.addItem, itemsDropdown: function () { return _this.props.itemsDropdown ? _this.props.itemsDropdown(index) : []; }, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
40801
40813
  && _this.props.onAddItem(index, item); } })); }),
40802
40814
  (this.props.addItem && !this.props.readOnly) &&
40803
40815
  React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
@@ -40859,7 +40871,7 @@ var TableListItem = /** @class */ (function (_super) {
40859
40871
  React.createElement("div", { className: 'table-list__add-bar-container' },
40860
40872
  React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
40861
40873
  React.createElement("div", { className: 'table-list__add-bar' },
40862
- React.createElement(Dropdown_1.Dropdown, { onChange: this.props.onAddItem, items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
40874
+ React.createElement(Dropdown_1.Dropdown, { onChange: this.props.onAddItem, items: this.props.itemsDropdown ? this.props.itemsDropdown() : [] },
40863
40875
  React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }))))))
40864
40876
  : React.createElement("li", { className: "".concat(classes, " table-list__item--margin"), onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); } },
40865
40877
  React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
@@ -57028,12 +57040,12 @@ var React = __importStar(__webpack_require__(0));
57028
57040
  var ReactDOM = __importStar(__webpack_require__(9));
57029
57041
  var core_1 = __webpack_require__(61);
57030
57042
  var react_id_generator_1 = __webpack_require__(8);
57043
+ var DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
57031
57044
  var Dropdown = function (_a) {
57032
57045
  var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, onChange = _a.onChange;
57033
57046
  var _b = React.useState(false), open = _b[0], setOpen = _b[1];
57034
57047
  var _c = React.useState(false), change = _c[0], setChange = _c[1];
57035
57048
  var menuID = (0, react_id_generator_1.useId)()[0];
57036
- var DROPDOWN_ID = "react-placeholder";
57037
57049
  var ref = React.useRef(null);
57038
57050
  var buttonRef = React.useRef(null);
57039
57051
  var headerElements = header === null || header === void 0 ? void 0 : header.map(function (el, index) {
@@ -57046,11 +57058,10 @@ var Dropdown = function (_a) {
57046
57058
  return each(el, index);
57047
57059
  });
57048
57060
  React.useEffect(function () {
57049
- var existingElement = document.getElementById(DROPDOWN_ID);
57061
+ var existingElement = document.getElementById(DROPDOWN_ID_CONTAINER);
57050
57062
  if (!existingElement) {
57051
57063
  var el = document.createElement("div");
57052
- el.id = DROPDOWN_ID;
57053
- // style placeholder
57064
+ el.id = DROPDOWN_ID_CONTAINER;
57054
57065
  el.style.position = 'absolute';
57055
57066
  el.style.top = '0';
57056
57067
  el.style.left = '0';
@@ -57065,7 +57076,6 @@ var Dropdown = function (_a) {
57065
57076
  }
57066
57077
  setChange(true);
57067
57078
  }, [open]);
57068
- // structure for append menu
57069
57079
  function createAppendMenu() {
57070
57080
  if (header && footer) {
57071
57081
  return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref },
@@ -57087,7 +57097,6 @@ var Dropdown = function (_a) {
57087
57097
  return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref }, dropdownElements));
57088
57098
  }
57089
57099
  }
57090
- // toggle menu
57091
57100
  function toggleDisplay() {
57092
57101
  if (!open) {
57093
57102
  var menuRef_1;
@@ -57136,15 +57145,14 @@ var Dropdown = function (_a) {
57136
57145
  }
57137
57146
  }
57138
57147
  function addInPlaceholder() {
57139
- var placeholder = document.getElementById(DROPDOWN_ID);
57148
+ var placeholder = document.getElementById(DROPDOWN_ID_CONTAINER);
57140
57149
  var menu = createAppendMenu();
57141
57150
  if (open) {
57142
57151
  return ReactDOM.render(menu, placeholder);
57143
57152
  }
57144
57153
  else {
57145
- var menuDOM = document.getElementById(menuID);
57146
- if (menuDOM) {
57147
- menuDOM.style.display = 'none';
57154
+ if (placeholder) {
57155
+ ReactDOM.unmountComponentAtNode(placeholder);
57148
57156
  }
57149
57157
  }
57150
57158
  }
@@ -57154,7 +57162,7 @@ var Dropdown = function (_a) {
57154
57162
  item['items'].forEach(function (el, key) {
57155
57163
  submenuItems_1.push(each(el, key));
57156
57164
  });
57157
- return (React.createElement(DropdownItemWithSubmenu, { key: index, item: item, subMenuItems: submenuItems_1 }));
57165
+ return (React.createElement(DropdownItemWithSubmenu, { key: index, index: index, item: item, menuID: menuID, subMenuItems: submenuItems_1, onChange: onChange }));
57158
57166
  }
57159
57167
  else if (item['type'] === 'group') {
57160
57168
  var groupItems_1 = [];
@@ -57224,19 +57232,20 @@ var DropdownItem = function (_a) {
57224
57232
  label)));
57225
57233
  };
57226
57234
  var DropdownItemWithSubmenu = function (_a) {
57227
- var index = _a.index, item = _a.item, subMenuItems = _a.subMenuItems;
57235
+ var index = _a.index, item = _a.item, menuID = _a.menuID, subMenuItems = _a.subMenuItems, onChange = _a.onChange;
57228
57236
  var _b = React.useState(undefined), open = _b[0], setOpen = _b[1];
57229
57237
  var refButtonSubMenu = React.useRef(null);
57230
57238
  var refSubMenu = React.useRef(null);
57239
+ var placeholder = document.getElementById(menuID);
57231
57240
  React.useEffect(function () {
57232
57241
  var subMenuRef = refSubMenu.current;
57233
57242
  var subToggleRef = refButtonSubMenu.current;
57234
57243
  if (open === true) {
57235
- document.body.appendChild(subMenuRef);
57244
+ placeholder === null || placeholder === void 0 ? void 0 : placeholder.appendChild(subMenuRef);
57236
57245
  subMenuRef.style.display = 'block';
57237
57246
  }
57238
57247
  else if (open === false) {
57239
- document.body.removeChild(subMenuRef);
57248
+ placeholder === null || placeholder === void 0 ? void 0 : placeholder.removeChild(subMenuRef);
57240
57249
  subMenuRef.style.display = 'none';
57241
57250
  }
57242
57251
  if (subMenuRef && subToggleRef) {
@@ -57247,7 +57256,14 @@ var DropdownItemWithSubmenu = function (_a) {
57247
57256
  }, [open]);
57248
57257
  return (React.createElement("li", { key: index, ref: refButtonSubMenu },
57249
57258
  React.createElement("div", { className: 'dropdown', onMouseLeave: function () { return setOpen(false); } },
57250
- React.createElement("button", { className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onMouseOver: function () { return setOpen(true); }, onClick: item['onSelect'] },
57259
+ React.createElement("button", { className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onClick: function () {
57260
+ if (item.onSelect) {
57261
+ item.onSelect();
57262
+ }
57263
+ if (onChange) {
57264
+ onChange();
57265
+ }
57266
+ }, onMouseOver: function () { return setOpen(true); } },
57251
57267
  item['icon'] ? React.createElement("i", { className: 'icon-' + item['icon'] }) : null,
57252
57268
  item['label']),
57253
57269
  React.createElement("ul", { role: 'menu', ref: refSubMenu, style: { display: 'none' }, className: 'dropdown__menu' }, subMenuItems))));
@@ -59375,28 +59391,49 @@ var classnames_1 = __importDefault(__webpack_require__(2));
59375
59391
  var ContentListItem = /** @class */ (function (_super) {
59376
59392
  __extends(ContentListItem, _super);
59377
59393
  function ContentListItem() {
59378
- return _super !== null && _super.apply(this, arguments) || this;
59394
+ var _this = _super !== null && _super.apply(this, arguments) || this;
59395
+ _this.delay = 200;
59396
+ _this.prevent = false;
59397
+ _this.onSingleClick = function () {
59398
+ _this.timer = setTimeout(function () {
59399
+ if (!_this.prevent) {
59400
+ if (_this.props.onClick) {
59401
+ _this.props.onClick();
59402
+ }
59403
+ }
59404
+ }, _this.delay);
59405
+ };
59406
+ _this.onDoubleClick = function () {
59407
+ clearTimeout(_this.timer);
59408
+ _this.prevent = true;
59409
+ if (_this.props.onDoubleClick) {
59410
+ _this.props.onDoubleClick();
59411
+ }
59412
+ setTimeout(function () {
59413
+ _this.prevent = false;
59414
+ }, _this.delay);
59415
+ };
59416
+ return _this;
59379
59417
  }
59380
59418
  ContentListItem.prototype.render = function () {
59381
- var classes = (0, classnames_1.default)('sd-list-item sd-list-item-group sd-list-item-group--space-between-items', {
59419
+ var classes = (0, classnames_1.default)('sd-list-item sd-shadow--z1', {
59382
59420
  'sd-list-item--activated': this.props.activated,
59383
59421
  'sd-list-item--selected': this.props.selected,
59384
59422
  'fetched': this.props.archived,
59385
59423
  'actioning': this.props.loading,
59386
59424
  });
59387
- return (React.createElement("div", { className: classes, onClick: this.props.onClick, onDoubleClick: this.props.onDoubleClick },
59388
- React.createElement("div", { className: "sd-list-item sd-shadow--z1" },
59389
- this.props.locked
59390
- ? React.createElement("div", { className: "sd-list-item__border sd-list-item__border--locked" })
59391
- : React.createElement("div", { className: "sd-list-item__border" }),
59392
- this.props.itemColum.map(function (item, index) {
59393
- 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) {
59394
- return (item.itemRow.length <= 1
59395
- ? React.createElement(React.Fragment, { key: i }, e.content)
59396
- : React.createElement("div", { className: "sd-list-item__row", key: i }, e.content));
59397
- }));
59398
- }),
59399
- React.createElement("div", { className: "sd-list-item__action-menu" }, this.props.action))));
59425
+ return (React.createElement("div", { className: classes, onClick: this.onSingleClick, onDoubleClick: this.onDoubleClick },
59426
+ this.props.locked
59427
+ ? React.createElement("div", { className: "sd-list-item__border sd-list-item__border--locked" })
59428
+ : React.createElement("div", { className: "sd-list-item__border" }),
59429
+ this.props.itemColum.map(function (item, index) {
59430
+ 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) {
59431
+ return (item.itemRow.length <= 1
59432
+ ? React.createElement(React.Fragment, { key: i }, e.content)
59433
+ : React.createElement("div", { className: "sd-list-item__row", key: i }, e.content));
59434
+ }));
59435
+ }),
59436
+ React.createElement("div", { className: "sd-list-item__action-menu" }, this.props.action)));
59400
59437
  };
59401
59438
  return ContentListItem;
59402
59439
  }(React.PureComponent));
@@ -97433,7 +97470,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
97433
97470
  Object.defineProperty(exports, "__esModule", {
97434
97471
  value: true
97435
97472
  });
97436
- exports.TieredMenu = void 0;
97473
+ exports.TieredMenu = exports.LocationRetrieved = void 0;
97437
97474
 
97438
97475
  var _react = _interopRequireWildcard(__webpack_require__(0));
97439
97476
 
@@ -97459,6 +97496,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
97459
97496
 
97460
97497
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
97461
97498
 
97499
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
97500
+
97462
97501
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
97463
97502
 
97464
97503
  function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -97479,27 +97518,97 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
97479
97518
 
97480
97519
  function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
97481
97520
 
97482
- function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
97521
+ // interface IProps {
97522
+ // children(args: {direction: 'left' | 'right'}): JSX.Element;
97523
+ // }
97524
+ // interface IState {
97525
+ // direction: 'left' | 'right' | null;
97526
+ // }
97527
+
97528
+ /**
97529
+ * Checks whether there is more space on the left or right,
97530
+ * in order to choose which direction submenus open to.
97531
+ */
97532
+ var LocationRetrieved = /*#__PURE__*/function (_React$PureComponent) {
97533
+ _inherits(LocationRetrieved, _React$PureComponent);
97534
+
97535
+ var _super = _createSuper(LocationRetrieved);
97536
+
97537
+ // <IProps, IState>
97538
+ function LocationRetrieved(props) {
97539
+ var _this;
97540
+
97541
+ _classCallCheck(this, LocationRetrieved);
97542
+
97543
+ _this = _super.call(this, props);
97544
+ _this.state = {
97545
+ direction: null
97546
+ };
97547
+ _this.recompute = _this.recompute.bind(_assertThisInitialized(_this));
97548
+ return _this;
97549
+ }
97550
+
97551
+ _createClass(LocationRetrieved, [{
97552
+ key: "recompute",
97553
+ value: function recompute(callback) {
97554
+ // public, used in TieredMenu#show
97555
+ this.setState({
97556
+ direction: null
97557
+ });
97558
+ setTimeout(callback, 0);
97559
+ }
97560
+ }, {
97561
+ key: "render",
97562
+ value: function render() {
97563
+ var _this2 = this;
97564
+
97565
+ if (this.state.direction == null) {
97566
+ return /*#__PURE__*/_react.default.createElement("span", {
97567
+ ref: function ref(el) {
97568
+ if (el != null) {
97569
+ var rect = el.getBoundingClientRect();
97570
+ var left = rect.left;
97571
+ var availableSpaceH = document.body.offsetWidth;
97572
+ var direction = left < availableSpaceH / 2 ? 'right' : 'left';
97573
+
97574
+ _this2.setState({
97575
+ direction: direction
97576
+ });
97577
+ }
97578
+ }
97579
+ });
97580
+ } else {
97581
+ return this.props.children({
97582
+ direction: this.state.direction
97583
+ });
97584
+ }
97585
+ }
97586
+ }]);
97587
+
97588
+ return LocationRetrieved;
97589
+ }(_react.default.PureComponent);
97590
+
97591
+ exports.LocationRetrieved = LocationRetrieved;
97483
97592
 
97484
97593
  var TieredMenu = /*#__PURE__*/function (_Component) {
97485
97594
  _inherits(TieredMenu, _Component);
97486
97595
 
97487
- var _super = _createSuper(TieredMenu);
97596
+ var _super2 = _createSuper(TieredMenu);
97488
97597
 
97489
97598
  function TieredMenu(props) {
97490
- var _this;
97599
+ var _this3;
97491
97600
 
97492
97601
  _classCallCheck(this, TieredMenu);
97493
97602
 
97494
- _this = _super.call(this, props);
97495
- _this.state = {
97603
+ _this3 = _super2.call(this, props);
97604
+ _this3.state = {
97496
97605
  visible: !props.popup
97497
97606
  };
97498
- _this.onEnter = _this.onEnter.bind(_assertThisInitialized(_this));
97499
- _this.onEntered = _this.onEntered.bind(_assertThisInitialized(_this));
97500
- _this.onExit = _this.onExit.bind(_assertThisInitialized(_this));
97501
- _this.id = _this.props.id || (0, _UniqueComponentId.default)();
97502
- return _this;
97607
+ _this3.onEnter = _this3.onEnter.bind(_assertThisInitialized(_this3));
97608
+ _this3.onEntered = _this3.onEntered.bind(_assertThisInitialized(_this3));
97609
+ _this3.onExit = _this3.onExit.bind(_assertThisInitialized(_this3));
97610
+ _this3.id = _this3.props.id || (0, _UniqueComponentId.default)();
97611
+ return _this3;
97503
97612
  }
97504
97613
 
97505
97614
  _createClass(TieredMenu, [{
@@ -97512,29 +97621,31 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
97512
97621
  }, {
97513
97622
  key: "show",
97514
97623
  value: function show(event) {
97515
- var _this2 = this;
97624
+ var _this4 = this;
97516
97625
 
97517
97626
  this.target = event.currentTarget;
97518
97627
  var currentEvent = event;
97519
- this.setState({
97520
- visible: true
97521
- }, function () {
97522
- if (_this2.props.onShow) {
97523
- _this2.props.onShow(currentEvent);
97524
- }
97628
+ this.locator.recompute(function () {
97629
+ _this4.setState({
97630
+ visible: true
97631
+ }, function () {
97632
+ if (_this4.props.onShow) {
97633
+ _this4.props.onShow(currentEvent);
97634
+ }
97635
+ });
97525
97636
  });
97526
97637
  }
97527
97638
  }, {
97528
97639
  key: "hide",
97529
97640
  value: function hide(event) {
97530
- var _this3 = this;
97641
+ var _this5 = this;
97531
97642
 
97532
97643
  var currentEvent = event;
97533
97644
  this.setState({
97534
97645
  visible: false
97535
97646
  }, function () {
97536
- if (_this3.props.onHide) {
97537
- _this3.props.onHide(currentEvent);
97647
+ if (_this5.props.onHide) {
97648
+ _this5.props.onHide(currentEvent);
97538
97649
  }
97539
97650
  });
97540
97651
  }
@@ -97575,12 +97686,12 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
97575
97686
  }, {
97576
97687
  key: "bindDocumentClickListener",
97577
97688
  value: function bindDocumentClickListener() {
97578
- var _this4 = this;
97689
+ var _this6 = this;
97579
97690
 
97580
97691
  if (!this.documentClickListener) {
97581
97692
  this.documentClickListener = function (event) {
97582
- if (_this4.props.popup && _this4.state.visible && !_this4.container.contains(event.target)) {
97583
- _this4.hide(event);
97693
+ if (_this6.props.popup && _this6.state.visible && !_this6.container.contains(event.target)) {
97694
+ _this6.hide(event);
97584
97695
  }
97585
97696
  };
97586
97697
 
@@ -97598,12 +97709,12 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
97598
97709
  }, {
97599
97710
  key: "bindDocumentResizeListener",
97600
97711
  value: function bindDocumentResizeListener() {
97601
- var _this5 = this;
97712
+ var _this7 = this;
97602
97713
 
97603
97714
  if (!this.documentResizeListener) {
97604
97715
  this.documentResizeListener = function (event) {
97605
- if (_this5.state.visible) {
97606
- _this5.hide(event);
97716
+ if (_this7.state.visible) {
97717
+ _this7.hide(event);
97607
97718
  }
97608
97719
  };
97609
97720
 
@@ -97621,12 +97732,12 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
97621
97732
  }, {
97622
97733
  key: "bindScrollListener",
97623
97734
  value: function bindScrollListener() {
97624
- var _this6 = this;
97735
+ var _this8 = this;
97625
97736
 
97626
97737
  if (!this.scrollHandler) {
97627
97738
  this.scrollHandler = new _ConnectedOverlayScrollHandler.default(this.target, function (event) {
97628
- if (_this6.state.visible) {
97629
- _this6.hide(event);
97739
+ if (_this8.state.visible) {
97740
+ _this8.hide(event);
97630
97741
  }
97631
97742
  });
97632
97743
  }
@@ -97652,8 +97763,8 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
97652
97763
  }
97653
97764
  }, {
97654
97765
  key: "renderElement",
97655
- value: function renderElement() {
97656
- var _this7 = this;
97766
+ value: function renderElement(direction) {
97767
+ var _this9 = this;
97657
97768
 
97658
97769
  var className = (0, _ClassNames.classNames)('p-tieredmenu p-component', {
97659
97770
  'p-tieredmenu-overlay': this.props.popup
@@ -97671,7 +97782,7 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
97671
97782
  onExit: this.onExit
97672
97783
  }, /*#__PURE__*/_react.default.createElement("div", {
97673
97784
  ref: function ref(el) {
97674
- return _this7.container = el;
97785
+ return _this9.container = el;
97675
97786
  },
97676
97787
  id: this.id,
97677
97788
  className: className,
@@ -97680,14 +97791,28 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
97680
97791
  }, /*#__PURE__*/_react.default.createElement(_TieredMenuSub.TieredMenuSub, {
97681
97792
  model: this.props.model,
97682
97793
  root: true,
97683
- popup: this.props.popup
97794
+ popup: this.props.popup,
97795
+ direction: direction
97684
97796
  })));
97685
97797
  }
97686
97798
  }, {
97687
97799
  key: "render",
97688
97800
  value: function render() {
97689
- var element = this.renderElement();
97690
- if (this.props.appendTo) return /*#__PURE__*/_reactDom.default.createPortal(element, this.props.appendTo);else return element;
97801
+ var _this10 = this;
97802
+
97803
+ return /*#__PURE__*/_react.default.createElement(LocationRetrieved, {
97804
+ ref: function ref(instance) {
97805
+ if (instance != null) {
97806
+ _this10.locator = instance;
97807
+ }
97808
+ }
97809
+ }, function (_ref) {
97810
+ var direction = _ref.direction;
97811
+
97812
+ var element = _this10.renderElement(direction);
97813
+
97814
+ if (_this10.props.appendTo) return /*#__PURE__*/_reactDom.default.createPortal(element, _this10.props.appendTo);else return element;
97815
+ });
97691
97816
  }
97692
97817
  }]);
97693
97818
 
@@ -97851,6 +97976,8 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
97851
97976
  }, {
97852
97977
  key: "onItemClick",
97853
97978
  value: function onItemClick(event, item) {
97979
+ var _item$items$length, _item$items;
97980
+
97854
97981
  if (item.disabled) {
97855
97982
  event.preventDefault();
97856
97983
  return;
@@ -97867,21 +97994,27 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
97867
97994
  });
97868
97995
  }
97869
97996
 
97870
- if (this.props.root) {
97871
- if (item.items) {
97872
- if (this.state.activeItem && item === this.state.activeItem) {
97873
- this.setState({
97874
- activeItem: null
97875
- });
97876
- } else {
97877
- this.setState({
97878
- activeItem: item
97879
- });
97880
- }
97997
+ if (((_item$items$length = (_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.length) !== null && _item$items$length !== void 0 ? _item$items$length : 0) > 0) {
97998
+ if (this.state.activeItem && item === this.state.activeItem) {
97999
+ this.setState({
98000
+ activeItem: null
98001
+ });
98002
+ } else {
98003
+ this.setState({
98004
+ activeItem: item
98005
+ });
97881
98006
  }
97882
98007
  }
97883
98008
 
97884
- if (!item.items) {
98009
+ var target = event.target;
98010
+ var isKeyboardEvent = event.clientX === 0 && event.clientY === 0;
98011
+
98012
+ if (isKeyboardEvent) {
98013
+ setTimeout(function () {
98014
+ var el = target.parentElement.querySelectorAll('.p-submenu-list > .p-menuitem')[0].querySelector('button');
98015
+ el.focus();
98016
+ }, 0);
98017
+ } else if (!item.items) {
97885
98018
  this.onLeafClick();
97886
98019
  }
97887
98020
  }
@@ -97938,8 +98071,10 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
97938
98071
  }, {
97939
98072
  key: "onChildItemKeyDown",
97940
98073
  value: function onChildItemKeyDown(event, childListItem) {
97941
- //left
97942
- if (event.which === 37) {
98074
+ var leftArrow = event.which === 37;
98075
+ var escape = event.which === 27;
98076
+
98077
+ if (leftArrow || escape) {
97943
98078
  this.setState({
97944
98079
  activeItem: null
97945
98080
  });
@@ -98011,7 +98146,8 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
98011
98146
  onLeafClick: this.onLeafClick,
98012
98147
  popup: this.props.popup,
98013
98148
  onKeyDown: this.onChildItemKeyDown,
98014
- parentActive: item === this.state.activeItem
98149
+ parentActive: item === this.state.activeItem,
98150
+ direction: this.props.direction
98015
98151
  });
98016
98152
  }
98017
98153
 
@@ -98039,10 +98175,8 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
98039
98175
  return _this3.onItemMouseEnter(event, item);
98040
98176
  },
98041
98177
  role: "none"
98042
- }, /*#__PURE__*/_react.default.createElement("a", {
98043
- href: item.url || '#',
98178
+ }, /*#__PURE__*/_react.default.createElement("button", {
98044
98179
  className: linkClassName,
98045
- target: item.target,
98046
98180
  role: "menuitem",
98047
98181
  "aria-haspopup": item.items != null,
98048
98182
  onClick: function onClick(event) {
@@ -98088,7 +98222,10 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
98088
98222
  },
98089
98223
  className: className,
98090
98224
  role: this.props.root ? 'menubar' : 'menu',
98091
- "aria-orientation": "horizontal"
98225
+ "aria-orientation": "horizontal",
98226
+ style: {
98227
+ left: this.props.direction === 'left' ? '-100%' : '100%'
98228
+ }
98092
98229
  }, submenu);
98093
98230
  }
98094
98231
  }]);
@@ -98115,7 +98252,8 @@ _defineProperty(TieredMenuSub, "propTypes", {
98115
98252
  popup: _propTypes.default.bool,
98116
98253
  onLeafClick: _propTypes.default.func,
98117
98254
  onKeyDown: _propTypes.default.func,
98118
- parentActive: _propTypes.default.bool
98255
+ parentActive: _propTypes.default.bool,
98256
+ direction: _propTypes.default.string
98119
98257
  });
98120
98258
 
98121
98259
  /***/ }),
@@ -1,11 +1,8 @@
1
1
  import * as React from 'react';
2
- import * as Components from './components/Index';
3
- import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, IconButton, Divider, Tooltip, Select, Option, Switch, Icon, AvatarWrapper, AvatarContentImage, AvatarContentText, Text, EmptyState, Alert, SlidingToolbar, TabLabel, Tabs, Heading, RadioButtonGroup, Container, Label, IconLabel } from '../../../../app-typescript/index';
2
+ import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, IconButton, Divider, Tooltip, Select, Option, Text, SlidingToolbar, Container, Label, IconLabel } from '../../../../app-typescript/index';
4
3
  import * as Layout from '../../../../app-typescript/components/Layouts';
5
4
  import * as Form from '../../../../app-typescript/components/Form';
6
5
  import * as Nav from '../../../../app-typescript/components/Navigation';
7
- import { BoxedList, BoxedListItem, BoxedListContentRow } from '../../../../app-typescript/components/Lists';
8
- import { SimpleList, SimpleListItem } from '../../../../app-typescript/components/Lists';
9
6
  import { TableList } from '../../../../app-typescript/components/Lists/TableList';
10
7
 
11
8
  interface IProps {
@@ -115,7 +112,6 @@ export class RundownEditor extends React.Component<IProps, IState> {
115
112
  onClick: () => { this.setState({rightPanelOpen: !this.state.rightPanelOpen})}
116
113
  },
117
114
  ]
118
-
119
115
  }
120
116
  this.handleTheme = this.handleTheme.bind(this);
121
117
  }
@@ -319,19 +315,17 @@ export class RundownEditor extends React.Component<IProps, IState> {
319
315
  <Text color='light' size='medium' className='sd-margin--0'>OF</Text>
320
316
  <IconLabel style='translucent' innerLabel='Planned:'text='00:45' size='large' />
321
317
  </ButtonGroup>
322
-
323
318
  <TableList
324
319
  className='sd-margin-y--4'
325
320
  dragAndDrop
326
321
  addItem
327
322
  array={this.state.array}
328
- itemsDropdown={[
323
+ itemsDropdown={() => [
329
324
  { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
330
325
  { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
331
326
  { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
332
327
  ]}
333
- onClick={() => false}
334
- />
328
+ />
335
329
 
336
330
  </Layout.AuthoringMain>
337
331
  </Layout.MainPanel>