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.
- package/.vscode/settings.json +5 -0
- package/app/styles/_table-list.scss +1 -0
- package/app/styles/dropdowns/_basic-dropdown.scss +6 -0
- package/app-typescript/components/Dropdown.tsx +65 -65
- package/app-typescript/components/DurationInput.tsx +14 -4
- package/app-typescript/components/Lists/ContentList.tsx +28 -4
- package/app-typescript/components/Lists/TableList.tsx +11 -9
- package/app-typescript/dist/components/Alert.d.ts +16 -0
- package/app-typescript/dist/components/Autocomplete.d.ts +48 -0
- package/app-typescript/dist/components/Avatar.d.ts +33 -0
- package/app-typescript/dist/components/Badge.d.ts +13 -0
- package/app-typescript/dist/components/Button.d.ts +23 -0
- package/app-typescript/dist/components/ButtonGroup.d.ts +12 -0
- package/app-typescript/dist/components/CheckButtonGroup.d.ts +11 -0
- package/app-typescript/dist/components/CheckGroup.d.ts +9 -0
- package/app-typescript/dist/components/Checkbox.d.ts +19 -0
- package/app-typescript/dist/components/CheckboxButton.d.ts +19 -0
- package/app-typescript/dist/components/DatePicker.d.ts +37 -0
- package/app-typescript/dist/components/Divider.d.ts +9 -0
- package/app-typescript/dist/components/DonutChart.d.ts +12 -0
- package/app-typescript/dist/components/Dropdown.d.ts +28 -0
- package/app-typescript/dist/components/DropdownFirst.d.ts +42 -0
- package/app-typescript/dist/components/EmptyState.d.ts +11 -0
- package/app-typescript/dist/components/FormLabel.d.ts +9 -0
- package/app-typescript/dist/components/Genie.d.ts +13 -0
- package/app-typescript/dist/components/GridItem.d.ts +69 -0
- package/app-typescript/dist/components/GridList.d.ts +14 -0
- package/app-typescript/dist/components/HeadingText.d.ts +10 -0
- package/app-typescript/dist/components/HelloWorld.d.ts +8 -0
- package/app-typescript/dist/components/Icon.d.ts +12 -0
- package/app-typescript/dist/components/IconButton.d.ts +12 -0
- package/app-typescript/dist/components/IconLabel.d.ts +11 -0
- package/app-typescript/dist/components/Input.d.ts +24 -0
- package/app-typescript/dist/components/Label.d.ts +15 -0
- package/app-typescript/dist/components/LeftMenu.d.ts +26 -0
- package/app-typescript/dist/components/Loader.d.ts +8 -0
- package/app-typescript/dist/components/NavButton.d.ts +15 -0
- package/app-typescript/dist/components/Popover.d.ts +13 -0
- package/app-typescript/dist/components/PropsList.d.ts +15 -0
- package/app-typescript/dist/components/Radio.d.ts +19 -0
- package/app-typescript/dist/components/RadioButton.d.ts +20 -0
- package/app-typescript/dist/components/Select.d.ts +29 -0
- package/app-typescript/dist/components/SelectWithTemplate.d.ts +32 -0
- package/app-typescript/dist/components/SlidingToolbar.d.ts +8 -0
- package/app-typescript/dist/components/StrechBar.d.ts +4 -0
- package/app-typescript/dist/components/SubNav.d.ts +10 -0
- package/app-typescript/dist/components/Switch.d.ts +12 -0
- package/app-typescript/dist/components/TabCustom.d.ts +25 -0
- package/app-typescript/dist/components/TabList.d.ts +22 -0
- package/app-typescript/dist/components/Tag.d.ts +9 -0
- package/app-typescript/dist/components/TagInput.d.ts +7 -0
- package/app-typescript/dist/components/TagInputTest.d.ts +18 -0
- package/app-typescript/dist/components/TimePicker.d.ts +11 -0
- package/app-typescript/dist/components/Tooltip.d.ts +11 -0
- package/app-typescript/dist/components/_Positioner.d.ts +27 -0
- package/app-typescript/dist/index.d.ts +56 -0
- package/dist/examples.bundle.js +538 -122
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +3 -9
- package/dist/playgrounds/react-playgrounds/Rundowns.tsx +9 -19
- package/dist/react/ContentList.tsx +2 -10
- package/dist/react/Dropdowns.tsx +357 -5
- package/dist/react/TableList.tsx +28 -30
- package/dist/superdesk-ui.bundle.css +8 -3
- package/dist/superdesk-ui.bundle.js +232 -94
- package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +3 -9
- package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +9 -19
- package/examples/pages/react/ContentList.tsx +2 -10
- package/examples/pages/react/Dropdowns.tsx +357 -5
- package/examples/pages/react/TableList.tsx +28 -30
- package/package.json +1 -1
- package/react/components/Dropdown.d.ts +4 -4
- package/react/components/Dropdown.js +19 -15
- package/react/components/DurationInput.d.ts +1 -1
- package/react/components/DurationInput.js +14 -4
- package/react/components/Lists/ContentList.d.ts +5 -0
- package/react/components/Lists/ContentList.js +36 -15
- package/react/components/Lists/TableList.d.ts +5 -5
- package/react/components/Lists/TableList.js +6 -4
- 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
|
38926
|
-
var minute
|
38927
|
-
var second
|
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:
|
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(
|
57061
|
+
var existingElement = document.getElementById(DROPDOWN_ID_CONTAINER);
|
57050
57062
|
if (!existingElement) {
|
57051
57063
|
var el = document.createElement("div");
|
57052
|
-
el.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(
|
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
|
-
|
57146
|
-
|
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
|
-
|
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
|
-
|
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,
|
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
|
-
|
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-
|
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.
|
59388
|
-
|
59389
|
-
|
59390
|
-
|
59391
|
-
|
59392
|
-
|
59393
|
-
return
|
59394
|
-
|
59395
|
-
|
59396
|
-
|
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
|
-
|
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
|
97596
|
+
var _super2 = _createSuper(TieredMenu);
|
97488
97597
|
|
97489
97598
|
function TieredMenu(props) {
|
97490
|
-
var
|
97599
|
+
var _this3;
|
97491
97600
|
|
97492
97601
|
_classCallCheck(this, TieredMenu);
|
97493
97602
|
|
97494
|
-
|
97495
|
-
|
97603
|
+
_this3 = _super2.call(this, props);
|
97604
|
+
_this3.state = {
|
97496
97605
|
visible: !props.popup
|
97497
97606
|
};
|
97498
|
-
|
97499
|
-
|
97500
|
-
|
97501
|
-
|
97502
|
-
return
|
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
|
97624
|
+
var _this4 = this;
|
97516
97625
|
|
97517
97626
|
this.target = event.currentTarget;
|
97518
97627
|
var currentEvent = event;
|
97519
|
-
this.
|
97520
|
-
|
97521
|
-
|
97522
|
-
|
97523
|
-
|
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
|
97641
|
+
var _this5 = this;
|
97531
97642
|
|
97532
97643
|
var currentEvent = event;
|
97533
97644
|
this.setState({
|
97534
97645
|
visible: false
|
97535
97646
|
}, function () {
|
97536
|
-
if (
|
97537
|
-
|
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
|
97689
|
+
var _this6 = this;
|
97579
97690
|
|
97580
97691
|
if (!this.documentClickListener) {
|
97581
97692
|
this.documentClickListener = function (event) {
|
97582
|
-
if (
|
97583
|
-
|
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
|
97712
|
+
var _this7 = this;
|
97602
97713
|
|
97603
97714
|
if (!this.documentResizeListener) {
|
97604
97715
|
this.documentResizeListener = function (event) {
|
97605
|
-
if (
|
97606
|
-
|
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
|
97735
|
+
var _this8 = this;
|
97625
97736
|
|
97626
97737
|
if (!this.scrollHandler) {
|
97627
97738
|
this.scrollHandler = new _ConnectedOverlayScrollHandler.default(this.target, function (event) {
|
97628
|
-
if (
|
97629
|
-
|
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
|
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
|
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
|
97690
|
-
|
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 (
|
97871
|
-
if (item.
|
97872
|
-
|
97873
|
-
|
97874
|
-
|
97875
|
-
|
97876
|
-
|
97877
|
-
|
97878
|
-
|
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
|
-
|
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
|
-
|
97942
|
-
|
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("
|
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
|
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
|
-
|
334
|
-
/>
|
328
|
+
/>
|
335
329
|
|
336
330
|
</Layout.AuthoringMain>
|
337
331
|
</Layout.MainPanel>
|