superdesk-ui-framework 3.0.1-beta.11 → 3.0.1-beta.13
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/app/styles/_modals.scss +3 -3
- package/app/styles/_table-list.scss +100 -11
- package/app/styles/grids/_grid-layout.scss +3 -0
- package/app-typescript/components/Dropdown.tsx +78 -37
- package/app-typescript/components/DurationInput.tsx +7 -1
- package/app-typescript/components/Layouts/CoreLayout.tsx +2 -1
- package/app-typescript/components/Layouts/CoreLayoutMain.tsx +7 -1
- package/app-typescript/components/Lists/TableList.tsx +138 -25
- package/app-typescript/components/SearchBar.tsx +11 -3
- package/app-typescript/components/TimePicker.tsx +2 -13
- package/dist/examples.bundle.js +361 -123
- package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +1 -0
- package/dist/react/Dropdowns.tsx +227 -47
- package/dist/react/TableList.tsx +15 -119
- package/dist/superdesk-ui.bundle.css +84 -16
- package/dist/superdesk-ui.bundle.js +153 -56
- package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +1 -0
- package/examples/pages/react/Dropdowns.tsx +227 -47
- package/examples/pages/react/TableList.tsx +15 -119
- package/package.json +1 -1
- package/react/components/Dropdown.d.ts +2 -1
- package/react/components/Dropdown.js +39 -20
- package/react/components/DurationInput.js +9 -1
- package/react/components/Layouts/CoreLayout.d.ts +1 -0
- package/react/components/Layouts/CoreLayout.js +1 -1
- package/react/components/Layouts/CoreLayoutMain.d.ts +1 -0
- package/react/components/Layouts/CoreLayoutMain.js +8 -1
- package/react/components/Lists/TableList.d.ts +22 -6
- package/react/components/Lists/TableList.js +78 -19
- package/react/components/SearchBar.d.ts +1 -1
- package/react/components/SearchBar.js +15 -7
- package/react/components/TimePicker.d.ts +1 -5
- package/react/components/TimePicker.js +3 -7
- package/.vscode/settings.json +0 -5
- package/app-typescript/dist/components/Alert.d.ts +0 -16
- package/app-typescript/dist/components/Autocomplete.d.ts +0 -48
- package/app-typescript/dist/components/Avatar.d.ts +0 -33
- package/app-typescript/dist/components/Badge.d.ts +0 -13
- package/app-typescript/dist/components/Button.d.ts +0 -23
- package/app-typescript/dist/components/ButtonGroup.d.ts +0 -12
- package/app-typescript/dist/components/CheckButtonGroup.d.ts +0 -11
- package/app-typescript/dist/components/CheckGroup.d.ts +0 -9
- package/app-typescript/dist/components/Checkbox.d.ts +0 -19
- package/app-typescript/dist/components/CheckboxButton.d.ts +0 -19
- package/app-typescript/dist/components/DatePicker.d.ts +0 -37
- package/app-typescript/dist/components/Divider.d.ts +0 -9
- package/app-typescript/dist/components/DonutChart.d.ts +0 -12
- package/app-typescript/dist/components/Dropdown.d.ts +0 -28
- package/app-typescript/dist/components/DropdownFirst.d.ts +0 -42
- package/app-typescript/dist/components/EmptyState.d.ts +0 -11
- package/app-typescript/dist/components/FormLabel.d.ts +0 -9
- package/app-typescript/dist/components/Genie.d.ts +0 -13
- package/app-typescript/dist/components/GridItem.d.ts +0 -69
- package/app-typescript/dist/components/GridList.d.ts +0 -14
- package/app-typescript/dist/components/HeadingText.d.ts +0 -10
- package/app-typescript/dist/components/HelloWorld.d.ts +0 -8
- package/app-typescript/dist/components/Icon.d.ts +0 -12
- package/app-typescript/dist/components/IconButton.d.ts +0 -12
- package/app-typescript/dist/components/IconLabel.d.ts +0 -11
- package/app-typescript/dist/components/Input.d.ts +0 -24
- package/app-typescript/dist/components/Label.d.ts +0 -15
- package/app-typescript/dist/components/LeftMenu.d.ts +0 -26
- package/app-typescript/dist/components/Loader.d.ts +0 -8
- package/app-typescript/dist/components/NavButton.d.ts +0 -15
- package/app-typescript/dist/components/Popover.d.ts +0 -13
- package/app-typescript/dist/components/PropsList.d.ts +0 -15
- package/app-typescript/dist/components/Radio.d.ts +0 -19
- package/app-typescript/dist/components/RadioButton.d.ts +0 -20
- package/app-typescript/dist/components/Select.d.ts +0 -29
- package/app-typescript/dist/components/SelectWithTemplate.d.ts +0 -32
- package/app-typescript/dist/components/SlidingToolbar.d.ts +0 -8
- package/app-typescript/dist/components/StrechBar.d.ts +0 -4
- package/app-typescript/dist/components/SubNav.d.ts +0 -10
- package/app-typescript/dist/components/Switch.d.ts +0 -12
- package/app-typescript/dist/components/TabCustom.d.ts +0 -25
- package/app-typescript/dist/components/TabList.d.ts +0 -22
- package/app-typescript/dist/components/Tag.d.ts +0 -9
- package/app-typescript/dist/components/TagInput.d.ts +0 -7
- package/app-typescript/dist/components/TagInputTest.d.ts +0 -18
- package/app-typescript/dist/components/TimePicker.d.ts +0 -11
- package/app-typescript/dist/components/Tooltip.d.ts +0 -11
- package/app-typescript/dist/components/_Positioner.d.ts +0 -27
- package/app-typescript/dist/index.d.ts +0 -56
- package/yarn-error.log +0 -111
package/dist/examples.bundle.js
CHANGED
@@ -39281,7 +39281,15 @@ function getDurationString(seconds) {
|
|
39281
39281
|
var hour = zeroPad(Math.floor(seconds / 3600));
|
39282
39282
|
var minute = zeroPad(Math.floor((seconds % 3600) / 60));
|
39283
39283
|
var second = zeroPad(Math.floor(seconds % 60));
|
39284
|
-
|
39284
|
+
if (Number(hour) === 0 && Number(minute) > 0) {
|
39285
|
+
return "".concat(minute, "m ").concat(second, "s");
|
39286
|
+
}
|
39287
|
+
else if (Number(hour) === 0 && Number(minute) === 0) {
|
39288
|
+
return "".concat(second, "s");
|
39289
|
+
}
|
39290
|
+
else {
|
39291
|
+
return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
|
39292
|
+
}
|
39285
39293
|
}
|
39286
39294
|
exports.getDurationString = getDurationString;
|
39287
39295
|
|
@@ -41087,16 +41095,21 @@ var TableList = /** @class */ (function (_super) {
|
|
41087
41095
|
items: [],
|
41088
41096
|
};
|
41089
41097
|
_this.onDragEnd = _this.onDragEnd.bind(_this);
|
41098
|
+
_this.dropDown = _this.dropDown.bind(_this);
|
41090
41099
|
return _this;
|
41091
41100
|
}
|
41092
41101
|
TableList.prototype.componentDidMount = function () {
|
41093
|
-
|
41102
|
+
if (this.props.array) {
|
41103
|
+
this.setState({ items: this.props.array });
|
41104
|
+
}
|
41094
41105
|
};
|
41095
41106
|
TableList.prototype.componentDidUpdate = function (prevProps) {
|
41096
|
-
if (
|
41097
|
-
this.
|
41098
|
-
|
41099
|
-
|
41107
|
+
if (this.props.array) {
|
41108
|
+
if (prevProps.array !== this.props.array) {
|
41109
|
+
this.setState({
|
41110
|
+
items: this.props.array,
|
41111
|
+
});
|
41112
|
+
}
|
41100
41113
|
}
|
41101
41114
|
};
|
41102
41115
|
TableList.prototype.onDragEnd = function (result) {
|
@@ -41110,24 +41123,47 @@ var TableList = /** @class */ (function (_super) {
|
|
41110
41123
|
return this.props.onDrag ?
|
41111
41124
|
this.props.onDrag(result.source.index, result.destination.index) : null;
|
41112
41125
|
};
|
41126
|
+
TableList.prototype.dropDown = function () {
|
41127
|
+
return (React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
|
41128
|
+
React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } })));
|
41129
|
+
};
|
41113
41130
|
TableList.prototype.render = function () {
|
41114
41131
|
var _a;
|
41115
41132
|
var _this = this;
|
41116
|
-
var classes = (0, classnames_1.default)((_a = {
|
41117
|
-
'table-list': !this.props.addItem
|
41133
|
+
var classes = (0, classnames_1.default)('', (_a = {
|
41134
|
+
'table-list': !this.props.addItem,
|
41135
|
+
'table-list--read-only': this.props.readOnly
|
41118
41136
|
},
|
41119
41137
|
_a["".concat(this.props.className)] = this.props.className,
|
41120
41138
|
_a));
|
41121
|
-
return (this.
|
41122
|
-
this.props.dragAndDrop
|
41123
|
-
React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
|
41139
|
+
return (this.state.items.length > 0
|
41140
|
+
? this.props.dragAndDrop
|
41141
|
+
? React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
|
41124
41142
|
React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable" }, function (provided, _snapshot) { return (React.createElement("ul", __assign({ className: classes, ref: provided.innerRef }, provided.droppableProps),
|
41125
41143
|
_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),
|
41126
|
-
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,
|
41127
|
-
|
41128
|
-
|
41129
|
-
|
41130
|
-
|
41144
|
+
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
|
41145
|
+
? item.onDoubleClick
|
41146
|
+
: undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
|
41147
|
+
&& _this.props.onAddItem(index, item); }, showDragHandle: _this.props.showDragHandle }))); })); }),
|
41148
|
+
provided.placeholder,
|
41149
|
+
(_this.props.addItem && !_this.props.readOnly) &&
|
41150
|
+
React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
|
41151
|
+
React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
|
41152
|
+
React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, _this.dropDown()))))); }))
|
41153
|
+
: React.createElement("ul", { className: classes },
|
41154
|
+
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
|
41155
|
+
? item.onDoubleClick
|
41156
|
+
: undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
|
41157
|
+
&& _this.props.onAddItem(index, item); } })); }),
|
41158
|
+
(this.props.addItem && !this.props.readOnly) &&
|
41159
|
+
React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
|
41160
|
+
React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
|
41161
|
+
React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
|
41162
|
+
: (this.props.addItem && !this.props.readOnly) ? React.createElement("ul", { className: classes },
|
41163
|
+
React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
|
41164
|
+
React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
|
41165
|
+
React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
|
41166
|
+
: null);
|
41131
41167
|
};
|
41132
41168
|
return TableList;
|
41133
41169
|
}(React.PureComponent));
|
@@ -41135,12 +41171,42 @@ exports.TableList = TableList;
|
|
41135
41171
|
var TableListItem = /** @class */ (function (_super) {
|
41136
41172
|
__extends(TableListItem, _super);
|
41137
41173
|
function TableListItem() {
|
41138
|
-
|
41174
|
+
var _this = _super !== null && _super.apply(this, arguments) || this;
|
41175
|
+
_this.delay = 200;
|
41176
|
+
_this.prevent = false;
|
41177
|
+
_this.onSingleClick = function () {
|
41178
|
+
_this.timer = setTimeout(function () {
|
41179
|
+
if (!_this.prevent) {
|
41180
|
+
if (_this.props.onClick) {
|
41181
|
+
_this.props.onClick();
|
41182
|
+
}
|
41183
|
+
}
|
41184
|
+
}, _this.delay);
|
41185
|
+
};
|
41186
|
+
_this.onDoubleClick = function () {
|
41187
|
+
clearTimeout(_this.timer);
|
41188
|
+
_this.prevent = true;
|
41189
|
+
if (_this.props.onDoubleClick) {
|
41190
|
+
_this.props.onDoubleClick();
|
41191
|
+
}
|
41192
|
+
setTimeout(function () {
|
41193
|
+
_this.prevent = false;
|
41194
|
+
}, _this.delay);
|
41195
|
+
};
|
41196
|
+
return _this;
|
41139
41197
|
}
|
41140
41198
|
TableListItem.prototype.render = function () {
|
41199
|
+
var _this = this;
|
41200
|
+
var classes = (0, classnames_1.default)('table-list__item', {
|
41201
|
+
'table-list__item--clickable': this.props.onClick,
|
41202
|
+
'table-list__item--draggable': this.props.dragAndDrop,
|
41203
|
+
'table-list__item--drag-handles-always': !this.props.showDragHandle,
|
41204
|
+
'table-list__item--drag-handles-none': this.props.showDragHandle === 'none',
|
41205
|
+
});
|
41141
41206
|
return (this.props.addItem ?
|
41142
41207
|
React.createElement("li", { className: 'table-list__item-container' },
|
41143
|
-
React.createElement("div", { onClick:
|
41208
|
+
React.createElement("div", { onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); }, className: classes },
|
41209
|
+
React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
|
41144
41210
|
React.createElement("div", { className: 'table-list__item-content' },
|
41145
41211
|
React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
|
41146
41212
|
React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' }, this.props.center && this.props.center),
|
@@ -41149,9 +41215,10 @@ var TableListItem = /** @class */ (function (_super) {
|
|
41149
41215
|
React.createElement("div", { className: 'table-list__add-bar-container' },
|
41150
41216
|
React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
|
41151
41217
|
React.createElement("div", { className: 'table-list__add-bar' },
|
41152
|
-
React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown },
|
41218
|
+
React.createElement(Dropdown_1.Dropdown, { onChange: this.props.onAddItem, items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
|
41153
41219
|
React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }))))))
|
41154
|
-
: React.createElement("li", { className: "
|
41220
|
+
: React.createElement("li", { className: "".concat(classes, " table-list__item--margin"), onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); } },
|
41221
|
+
React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
|
41155
41222
|
React.createElement("div", { className: 'table-list__item-content' },
|
41156
41223
|
React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
|
41157
41224
|
React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' }, this.props.center && this.props.center),
|
@@ -57318,15 +57385,13 @@ var ReactDOM = __importStar(__webpack_require__(9));
|
|
57318
57385
|
var core_1 = __webpack_require__(61);
|
57319
57386
|
var react_id_generator_1 = __webpack_require__(8);
|
57320
57387
|
var Dropdown = function (_a) {
|
57321
|
-
var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align;
|
57388
|
+
var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, onChange = _a.onChange;
|
57322
57389
|
var _b = React.useState(false), open = _b[0], setOpen = _b[1];
|
57323
57390
|
var _c = React.useState(false), change = _c[0], setChange = _c[1];
|
57324
57391
|
var menuID = (0, react_id_generator_1.useId)()[0];
|
57325
57392
|
var DROPDOWN_ID = "react-placeholder";
|
57326
57393
|
var ref = React.useRef(null);
|
57327
|
-
var refSubMenu = React.useRef(null);
|
57328
57394
|
var buttonRef = React.useRef(null);
|
57329
|
-
var refButtonSubMenu = React.useRef(null);
|
57330
57395
|
var headerElements = header === null || header === void 0 ? void 0 : header.map(function (el, index) {
|
57331
57396
|
return each(el, index);
|
57332
57397
|
});
|
@@ -57445,20 +57510,7 @@ var Dropdown = function (_a) {
|
|
57445
57510
|
item['items'].forEach(function (el, key) {
|
57446
57511
|
submenuItems_1.push(each(el, key));
|
57447
57512
|
});
|
57448
|
-
return (React.createElement(
|
57449
|
-
React.createElement("div", { className: 'dropdown' },
|
57450
|
-
React.createElement("button", { ref: refButtonSubMenu, className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onMouseOver: function () {
|
57451
|
-
var subMenuRef = refSubMenu.current;
|
57452
|
-
var subToggleRef = refButtonSubMenu.current;
|
57453
|
-
if (subMenuRef && subToggleRef) {
|
57454
|
-
(0, core_1.createPopper)(subToggleRef, subMenuRef, {
|
57455
|
-
placement: 'right-start',
|
57456
|
-
});
|
57457
|
-
}
|
57458
|
-
}, onClick: item['onSelect'] },
|
57459
|
-
item['icon'] ? React.createElement("i", { className: 'icon-' + item['icon'] }) : null,
|
57460
|
-
item['label']),
|
57461
|
-
React.createElement("ul", { ref: refSubMenu, role: 'menu', className: 'dropdown__menu' }, submenuItems_1))));
|
57513
|
+
return (React.createElement(DropdownItemWithSubmenu, { key: index, item: item, subMenuItems: submenuItems_1 }));
|
57462
57514
|
}
|
57463
57515
|
else if (item['type'] === 'group') {
|
57464
57516
|
var groupItems_1 = [];
|
@@ -57474,7 +57526,7 @@ var Dropdown = function (_a) {
|
|
57474
57526
|
return (React.createElement("li", { className: "dropdown__menu-divider", key: index }));
|
57475
57527
|
}
|
57476
57528
|
else {
|
57477
|
-
return (React.createElement(DropdownItem, { key: index, label: item['label'], icon: item['icon'], active: item['active'], onSelect: item['onSelect'] }));
|
57529
|
+
return (React.createElement(DropdownItem, { key: index, label: item['label'], icon: item['icon'], active: item['active'], onSelect: item['onSelect'], onChange: onChange }));
|
57478
57530
|
}
|
57479
57531
|
}
|
57480
57532
|
return (React.createElement("div", { className: 'dropdown ' + (open ? 'open' : '') },
|
@@ -57516,12 +57568,46 @@ var Dropdown = function (_a) {
|
|
57516
57568
|
};
|
57517
57569
|
exports.Dropdown = Dropdown;
|
57518
57570
|
var DropdownItem = function (_a) {
|
57519
|
-
var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect;
|
57571
|
+
var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect, onChange = _a.onChange;
|
57520
57572
|
return (React.createElement("li", { role: 'none', className: active ? 'dropdown__menu-item--active' : '' },
|
57521
|
-
React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick:
|
57573
|
+
React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick: function () {
|
57574
|
+
onSelect();
|
57575
|
+
if (onChange) {
|
57576
|
+
onChange();
|
57577
|
+
}
|
57578
|
+
} },
|
57522
57579
|
React.createElement("i", { className: icon ? ('icon-' + icon) : '' }),
|
57523
57580
|
label)));
|
57524
57581
|
};
|
57582
|
+
var DropdownItemWithSubmenu = function (_a) {
|
57583
|
+
var index = _a.index, item = _a.item, subMenuItems = _a.subMenuItems;
|
57584
|
+
var _b = React.useState(undefined), open = _b[0], setOpen = _b[1];
|
57585
|
+
var refButtonSubMenu = React.useRef(null);
|
57586
|
+
var refSubMenu = React.useRef(null);
|
57587
|
+
React.useEffect(function () {
|
57588
|
+
var subMenuRef = refSubMenu.current;
|
57589
|
+
var subToggleRef = refButtonSubMenu.current;
|
57590
|
+
if (open === true) {
|
57591
|
+
document.body.appendChild(subMenuRef);
|
57592
|
+
subMenuRef.style.display = 'block';
|
57593
|
+
}
|
57594
|
+
else if (open === false) {
|
57595
|
+
document.body.removeChild(subMenuRef);
|
57596
|
+
subMenuRef.style.display = 'none';
|
57597
|
+
}
|
57598
|
+
if (subMenuRef && subToggleRef) {
|
57599
|
+
(0, core_1.createPopper)(subToggleRef, subMenuRef, {
|
57600
|
+
placement: 'right-start',
|
57601
|
+
});
|
57602
|
+
}
|
57603
|
+
}, [open]);
|
57604
|
+
return (React.createElement("li", { key: index, ref: refButtonSubMenu },
|
57605
|
+
React.createElement("div", { className: 'dropdown', onMouseLeave: function () { return setOpen(false); } },
|
57606
|
+
React.createElement("button", { className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onMouseOver: function () { return setOpen(true); }, onClick: item['onSelect'] },
|
57607
|
+
item['icon'] ? React.createElement("i", { className: 'icon-' + item['icon'] }) : null,
|
57608
|
+
item['label']),
|
57609
|
+
React.createElement("ul", { role: 'menu', ref: refSubMenu, style: { display: 'none' }, className: 'dropdown__menu' }, subMenuItems))));
|
57610
|
+
};
|
57525
57611
|
|
57526
57612
|
|
57527
57613
|
/***/ }),
|
@@ -62851,22 +62937,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
62851
62937
|
Object.defineProperty(exports, "__esModule", { value: true });
|
62852
62938
|
exports.TimePicker = void 0;
|
62853
62939
|
var React = __importStar(__webpack_require__(0));
|
62854
|
-
// import classNames from 'classnames';
|
62855
62940
|
var react_id_generator_1 = __importDefault(__webpack_require__(8));
|
62856
62941
|
var Form_1 = __webpack_require__(14);
|
62857
62942
|
var TimePicker = /** @class */ (function (_super) {
|
62858
62943
|
__extends(TimePicker, _super);
|
62859
|
-
function TimePicker(
|
62860
|
-
var _this = _super.
|
62944
|
+
function TimePicker() {
|
62945
|
+
var _this = _super !== null && _super.apply(this, arguments) || this;
|
62861
62946
|
_this.htmlId = (0, react_id_generator_1.default)();
|
62862
|
-
_this.state = {
|
62863
|
-
invalid: _this.props.invalid ? _this.props.invalid : false,
|
62864
|
-
};
|
62865
62947
|
return _this;
|
62866
62948
|
}
|
62867
62949
|
TimePicker.prototype.render = function () {
|
62868
62950
|
var _this = this;
|
62869
|
-
return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.
|
62951
|
+
return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.props.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
|
62870
62952
|
React.createElement("input", { id: this.htmlId, "aria-labelledby": this.htmlId + 'label', type: "time", step: this.props.allowSeconds ? 1 : undefined, className: "sd-input__input", value: this.props.value, required: this.props.required, disabled: this.props.disabled, onChange: function (event) {
|
62871
62953
|
_this.props.onChange(event.target.value);
|
62872
62954
|
} })));
|
@@ -99957,14 +100039,22 @@ var SearchBar = /** @class */ (function (_super) {
|
|
99957
100039
|
}
|
99958
100040
|
}, onChange: function (event) { return _this.setState({ inputValue: event.target.value }); }, onFocus: function () { return _this.setState({ focused: true }); } }),
|
99959
100041
|
this.state.inputValue &&
|
99960
|
-
React.createElement("button", { className: "sd-searchbar__cancel", onClick: function () {
|
100042
|
+
React.createElement("button", { className: "sd-searchbar__cancel", onClick: function () {
|
100043
|
+
_this.setState({ inputValue: '' });
|
100044
|
+
setTimeout(function () {
|
100045
|
+
if (_this.props.onSubmit) {
|
100046
|
+
_this.props.onSubmit(_this.state.inputValue);
|
100047
|
+
}
|
100048
|
+
});
|
100049
|
+
} },
|
99961
100050
|
React.createElement(Icon_1.Icon, { name: 'remove-sign' })),
|
99962
|
-
|
99963
|
-
|
99964
|
-
_this.props.onSubmit
|
99965
|
-
|
99966
|
-
|
99967
|
-
|
100051
|
+
this.state.inputValue &&
|
100052
|
+
React.createElement("button", { id: "sd-searchbar__search-btn", className: "sd-searchbar__search-btn ".concat(this.state.keyDown ? 'sd-searchbar__search-btn--active' : ''), onClick: function () {
|
100053
|
+
if (_this.props.onSubmit) {
|
100054
|
+
_this.props.onSubmit(_this.state.inputValue);
|
100055
|
+
}
|
100056
|
+
} },
|
100057
|
+
React.createElement(Icon_1.Icon, { name: 'chevron-right-thin' }))));
|
99968
100058
|
};
|
99969
100059
|
return SearchBar;
|
99970
100060
|
}(React.PureComponent));
|
@@ -101651,7 +101741,7 @@ var CoreLayout = /** @class */ (function (_super) {
|
|
101651
101741
|
return (React.createElement(_1.CoreLayoutContainer, null,
|
101652
101742
|
this.props.slideInMenu && (React.createElement(_1.CoreLayoutSlideInMenu, { menuId: this.props.menuId, menuOpen: this.props.menuOpen }, this.props.slideInMenu)),
|
101653
101743
|
this.props.topMenu && (React.createElement(_1.CoreLayoutTopMenu, { buttonAnimation: this.props.buttonAnimation, heading: this.props.heading, onClick: this.props.onClick, active: this.props.active, ariaControls: this.props.ariaControls }, this.props.topMenu)),
|
101654
|
-
React.createElement(_1.CoreLayoutMain,
|
101744
|
+
React.createElement(_1.CoreLayoutMain, { editorFullWidth: this.props.editorFullWidth }, this.props.children),
|
101655
101745
|
this.props.footer && (React.createElement(_1.CoreLayoutFooter, null, this.props.footer)),
|
101656
101746
|
this.props.overlay && (React.createElement(_1.CoreLayoutOverlay, null, this.props.overlay))));
|
101657
101747
|
};
|
@@ -101817,16 +101907,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
101817
101907
|
__setModuleDefault(result, mod);
|
101818
101908
|
return result;
|
101819
101909
|
};
|
101910
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
101911
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
101912
|
+
};
|
101820
101913
|
Object.defineProperty(exports, "__esModule", { value: true });
|
101821
101914
|
exports.CoreLayoutMain = void 0;
|
101822
101915
|
var React = __importStar(__webpack_require__(0));
|
101916
|
+
var classnames_1 = __importDefault(__webpack_require__(2));
|
101823
101917
|
var CoreLayoutMain = /** @class */ (function (_super) {
|
101824
101918
|
__extends(CoreLayoutMain, _super);
|
101825
101919
|
function CoreLayoutMain() {
|
101826
101920
|
return _super !== null && _super.apply(this, arguments) || this;
|
101827
101921
|
}
|
101828
101922
|
CoreLayoutMain.prototype.render = function () {
|
101829
|
-
|
101923
|
+
var classes = (0, classnames_1.default)('sd-content sd-content-wrapper', {
|
101924
|
+
'sd-content-wrapper--editor-full': this.props.editorFullWidth,
|
101925
|
+
});
|
101926
|
+
return (React.createElement("section", { id: this.props.id, className: classes }, this.props.children));
|
101830
101927
|
};
|
101831
101928
|
return CoreLayoutMain;
|
101832
101929
|
}(React.PureComponent));
|
@@ -129194,23 +129291,95 @@ var DropdownDoc = /** @class */ (function (_super) {
|
|
129194
129291
|
" to the dropdown element to append to the inner dropdown menu to the body. This is useful when the dropdown button is inside a div with overflow: hidden, and the menu would otherwise be hidden."),
|
129195
129292
|
React.createElement(Markup.ReactMarkup, null,
|
129196
129293
|
React.createElement(Markup.ReactMarkupPreview, null,
|
129197
|
-
React.createElement(app_typescript_1.Dropdown, {
|
129294
|
+
React.createElement(app_typescript_1.Dropdown, { header: [
|
129198
129295
|
{
|
129199
|
-
type: 'group',
|
129200
|
-
|
129201
|
-
|
129202
|
-
{
|
129203
|
-
|
129204
|
-
|
129205
|
-
|
129296
|
+
type: 'group',
|
129297
|
+
label: 'Create new',
|
129298
|
+
items: [
|
129299
|
+
{
|
129300
|
+
type: 'submenu',
|
129301
|
+
label: 'Rundown',
|
129302
|
+
icon: 'plus-sign',
|
129303
|
+
items: [
|
129304
|
+
{
|
129305
|
+
type: 'submenu',
|
129306
|
+
label: 'Show 1',
|
129307
|
+
icon: 'plus-sign',
|
129308
|
+
items: [],
|
129309
|
+
},
|
129310
|
+
{
|
129311
|
+
type: 'submenu',
|
129312
|
+
label: 'Show 2',
|
129313
|
+
icon: 'plus-sign',
|
129314
|
+
items: [],
|
129315
|
+
},
|
129316
|
+
],
|
129317
|
+
},
|
129318
|
+
],
|
129206
129319
|
},
|
129320
|
+
], items: [
|
129207
129321
|
{
|
129208
|
-
type: 'group',
|
129209
|
-
|
129210
|
-
|
129211
|
-
|
129212
|
-
|
129213
|
-
|
129322
|
+
type: 'group',
|
129323
|
+
label: 'Create new',
|
129324
|
+
items: [
|
129325
|
+
{
|
129326
|
+
type: 'submenu',
|
129327
|
+
label: 'Rundown',
|
129328
|
+
icon: 'plus-sign',
|
129329
|
+
items: [
|
129330
|
+
{
|
129331
|
+
type: 'submenu',
|
129332
|
+
label: 'Show 1',
|
129333
|
+
icon: 'plus-sign',
|
129334
|
+
items: [],
|
129335
|
+
},
|
129336
|
+
{
|
129337
|
+
type: 'submenu',
|
129338
|
+
label: 'Show 2',
|
129339
|
+
icon: 'plus-sign',
|
129340
|
+
items: [],
|
129341
|
+
},
|
129342
|
+
],
|
129343
|
+
},
|
129344
|
+
],
|
129345
|
+
},
|
129346
|
+
], footer: [
|
129347
|
+
{
|
129348
|
+
type: 'group',
|
129349
|
+
items: [
|
129350
|
+
{
|
129351
|
+
icon: 'rundown',
|
129352
|
+
label: 'Create new Show',
|
129353
|
+
onSelect: function () { return false; },
|
129354
|
+
},
|
129355
|
+
],
|
129356
|
+
},
|
129357
|
+
{
|
129358
|
+
type: 'group',
|
129359
|
+
label: 'Create new',
|
129360
|
+
items: [
|
129361
|
+
{
|
129362
|
+
type: 'submenu',
|
129363
|
+
label: 'Rundown',
|
129364
|
+
icon: 'plus-sign',
|
129365
|
+
items: [
|
129366
|
+
{
|
129367
|
+
type: 'submenu',
|
129368
|
+
label: 'Show 1',
|
129369
|
+
icon: 'plus-sign',
|
129370
|
+
items: [],
|
129371
|
+
},
|
129372
|
+
{
|
129373
|
+
type: 'submenu',
|
129374
|
+
label: 'Show 2',
|
129375
|
+
icon: 'plus-sign',
|
129376
|
+
items: [],
|
129377
|
+
},
|
129378
|
+
],
|
129379
|
+
},
|
129380
|
+
],
|
129381
|
+
},
|
129382
|
+
] })),
|
129214
129383
|
React.createElement(Markup.ReactMarkupCode, null, "\n <Dropdown\n items={[\n { label: 'Action 1', onSelect: () => 1 },\n { label: 'Action 2', onSelect: () => 1 },\n { label: 'Action 3', onSelect: () => 1 },\n { label: 'Action 4', onSelect: () => 1 },\n { label: 'Action 5', onSelect: () => 1 },\n { label: 'Action 6', onSelect: () => 1 },\n ]}>\n Drop append to body\n </Dropdown>\n ")),
|
129215
129384
|
React.createElement("h3", { className: "docs-page__h3" }, "Multilevel dropdown"),
|
129216
129385
|
React.createElement("p", { className: 'docs-page__paragraph' },
|
@@ -129266,7 +129435,11 @@ var DropdownDoc = /** @class */ (function (_super) {
|
|
129266
129435
|
React.createElement(Markup.ReactMarkupPreview, null,
|
129267
129436
|
React.createElement(app_typescript_1.SubNav, { zIndex: 1, color: 'darker' },
|
129268
129437
|
React.createElement("h3", { className: "subnav__page-title" }, "Subnav title"),
|
129269
|
-
React.createElement(app_typescript_1.Dropdown
|
129438
|
+
React.createElement(app_typescript_1.Dropdown
|
129439
|
+
//align='right'
|
129440
|
+
, {
|
129441
|
+
//align='right'
|
129442
|
+
header: [
|
129270
129443
|
{
|
129271
129444
|
type: 'group', label: 'actions', items: [
|
129272
129445
|
'divider',
|
@@ -129284,6 +129457,33 @@ var DropdownDoc = /** @class */ (function (_super) {
|
|
129284
129457
|
{ label: 'Action 4', onSelect: function () { return 1; } },
|
129285
129458
|
]
|
129286
129459
|
}
|
129460
|
+
], items: [
|
129461
|
+
// {
|
129462
|
+
// type: 'group', label: 'actions', items: [
|
129463
|
+
// 'divider',
|
129464
|
+
// { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
|
129465
|
+
// { label: 'Copy', icon: 'copy', onSelect: () => 1 },
|
129466
|
+
// { label: 'Delete', icon: 'trash', onSelect: () => 1 },
|
129467
|
+
// 'divider',
|
129468
|
+
// ]
|
129469
|
+
// },
|
129470
|
+
// {
|
129471
|
+
// type: 'submenu', label: 'Second level actions', icon: 'star', items: [
|
129472
|
+
// { label: 'Action 1', onSelect: () => 1 },
|
129473
|
+
// { label: 'Action 2', onSelect: () => 1 },
|
129474
|
+
// { label: 'Action 3', onSelect: () => 1 },
|
129475
|
+
// { label: 'Action 4', onSelect: () => 1 },
|
129476
|
+
// ]
|
129477
|
+
// }
|
129478
|
+
], footer: [
|
129479
|
+
{
|
129480
|
+
type: 'submenu', label: 'Second level actions', icon: 'star', items: [
|
129481
|
+
{ label: 'Action 1', onSelect: function () { return 1; } },
|
129482
|
+
{ label: 'Action 2', onSelect: function () { return 1; } },
|
129483
|
+
{ label: 'Action 3', onSelect: function () { return 1; } },
|
129484
|
+
{ label: 'Action 4', onSelect: function () { return 1; } },
|
129485
|
+
]
|
129486
|
+
}
|
129287
129487
|
] },
|
129288
129488
|
React.createElement("button", { className: 'sd-navbtn' },
|
129289
129489
|
React.createElement("i", { className: "icon-dots-vertical" }))))),
|
@@ -129294,37 +129494,87 @@ var DropdownDoc = /** @class */ (function (_super) {
|
|
129294
129494
|
React.createElement(Markup.ReactMarkupPreview, null,
|
129295
129495
|
React.createElement(app_typescript_1.SubNav, { zIndex: 1, color: 'darker' },
|
129296
129496
|
React.createElement("h3", { className: "subnav__page-title" }, "Subnav title"),
|
129297
|
-
React.createElement(app_typescript_1.Dropdown, {
|
129497
|
+
React.createElement(app_typescript_1.Dropdown, { append: true, header: [
|
129298
129498
|
{
|
129299
|
-
type: 'group',
|
129300
|
-
|
129301
|
-
|
129302
|
-
|
129499
|
+
type: 'group',
|
129500
|
+
label: 'Create new',
|
129501
|
+
items: [
|
129502
|
+
{
|
129503
|
+
type: 'submenu',
|
129504
|
+
label: 'Rundown',
|
129505
|
+
icon: 'plus-sign',
|
129506
|
+
items: [
|
129507
|
+
{
|
129508
|
+
type: 'submenu',
|
129509
|
+
label: 'Show 1',
|
129510
|
+
icon: 'plus-sign',
|
129511
|
+
items: [],
|
129512
|
+
},
|
129513
|
+
{
|
129514
|
+
type: 'submenu',
|
129515
|
+
label: 'Show 2',
|
129516
|
+
icon: 'plus-sign',
|
129517
|
+
items: [],
|
129518
|
+
},
|
129519
|
+
],
|
129520
|
+
},
|
129521
|
+
],
|
129303
129522
|
},
|
129304
129523
|
], items: [
|
129305
129524
|
{
|
129306
129525
|
type: 'group', label: 'body actions', items: [
|
129307
|
-
{
|
129308
|
-
|
129309
|
-
|
129310
|
-
|
129311
|
-
|
129312
|
-
|
129313
|
-
|
129314
|
-
|
129315
|
-
|
129316
|
-
|
129317
|
-
|
129318
|
-
|
129319
|
-
|
129526
|
+
{
|
129527
|
+
type: 'group',
|
129528
|
+
label: 'Create new',
|
129529
|
+
items: [
|
129530
|
+
{
|
129531
|
+
type: 'submenu',
|
129532
|
+
label: 'Rundown',
|
129533
|
+
icon: 'plus-sign',
|
129534
|
+
items: [
|
129535
|
+
{
|
129536
|
+
type: 'submenu',
|
129537
|
+
label: 'Show 1',
|
129538
|
+
icon: 'plus-sign',
|
129539
|
+
items: [],
|
129540
|
+
},
|
129541
|
+
{
|
129542
|
+
type: 'submenu',
|
129543
|
+
label: 'Show 2',
|
129544
|
+
icon: 'plus-sign',
|
129545
|
+
items: [],
|
129546
|
+
},
|
129547
|
+
],
|
129548
|
+
},
|
129549
|
+
],
|
129550
|
+
},
|
129320
129551
|
]
|
129321
129552
|
},
|
129322
129553
|
], footer: [
|
129323
129554
|
{
|
129324
|
-
type: 'group',
|
129325
|
-
|
129326
|
-
|
129327
|
-
|
129555
|
+
type: 'group',
|
129556
|
+
label: 'Create new',
|
129557
|
+
items: [
|
129558
|
+
{
|
129559
|
+
type: 'submenu',
|
129560
|
+
label: 'Rundown',
|
129561
|
+
icon: 'plus-sign',
|
129562
|
+
items: [
|
129563
|
+
{
|
129564
|
+
type: 'submenu',
|
129565
|
+
label: 'Show 1',
|
129566
|
+
icon: 'plus-sign',
|
129567
|
+
items: [],
|
129568
|
+
},
|
129569
|
+
{
|
129570
|
+
type: 'submenu',
|
129571
|
+
label: 'Show 2',
|
129572
|
+
icon: 'plus-sign',
|
129573
|
+
items: [],
|
129574
|
+
},
|
129575
|
+
],
|
129576
|
+
},
|
129577
|
+
],
|
129328
129578
|
},
|
129329
129579
|
] },
|
129330
129580
|
React.createElement("button", { className: 'sd-navbtn' },
|
@@ -131279,10 +131529,15 @@ var TableListDoc = /** @class */ (function (_super) {
|
|
131279
131529
|
React.createElement(app_typescript_1.Label, { style: 'translucent', type: 'primary', text: 'prlg' })),
|
131280
131530
|
center: React.createElement("span", null, "Item 1"),
|
131281
131531
|
end: React.createElement(app_typescript_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }),
|
131282
|
-
action: React.createElement(app_typescript_1.
|
131283
|
-
|
131284
|
-
|
131285
|
-
|
131532
|
+
action: React.createElement(app_typescript_1.Dropdown, { append: true, items: [
|
131533
|
+
{ label: React.createElement(app_typescript_1.Label, { style: 'translucent', type: 'primary', text: 'aacc' }), onSelect: function () { return 1; } },
|
131534
|
+
{ label: React.createElement(app_typescript_1.Label, { style: 'translucent', text: 'prlg' }), onSelect: function () { return 1; } },
|
131535
|
+
{ label: React.createElement(app_typescript_1.Label, { style: 'translucent', type: 'primary', text: 'prlg' }), onSelect: function () { return 1; } },
|
131536
|
+
] },
|
131537
|
+
React.createElement(app_typescript_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function (e) { return e.stopPropagation(); } })),
|
131538
|
+
onClick: function () { return console.log('single'); },
|
131539
|
+
onDoubleClick: function () { return console.log('double'); },
|
131540
|
+
hexColor: '#ccff00'
|
131286
131541
|
},
|
131287
131542
|
{
|
131288
131543
|
start: React.createElement(React.Fragment, null,
|
@@ -131314,28 +131569,14 @@ var TableListDoc = /** @class */ (function (_super) {
|
|
131314
131569
|
return (React.createElement("section", { className: 'docs-page__container' },
|
131315
131570
|
React.createElement("h2", { className: 'docs-page__h2' }, "TableList"),
|
131316
131571
|
React.createElement(Markup.ReactMarkupCodePreview, null, "\n <TableList\n dragAndDrop\n addItem\n array={this.state.array}\n itemsDropdown={[\n { label: 'Action 1', onSelect: () => 1 },\n { label: 'Action 2', onSelect: () => 1 },\n { label: 'Action 3', onSelect: () => 1 },\n ]} />\n "),
|
131317
|
-
React.createElement("p", { className: "docs-page__paragraph" }, "Basic:"),
|
131318
|
-
React.createElement(Markup.ReactMarkup, null,
|
131319
|
-
React.createElement(Markup.ReactMarkupPreview, null,
|
131320
|
-
React.createElement(TableList_1.TableList, null,
|
131321
|
-
React.createElement(TableList_1.TableListItem, { start: React.createElement(React.Fragment, null,
|
131322
|
-
React.createElement(app_typescript_1.Label, { style: 'translucent', text: 'aacc' }),
|
131323
|
-
React.createElement(app_typescript_1.Label, { style: 'translucent', type: 'primary', text: 'prlg' })), center: React.createElement("span", null, "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit."), end: React.createElement(app_typescript_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }), action: React.createElement(app_typescript_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }) }),
|
131324
|
-
React.createElement(TableList_1.TableListItem, { start: React.createElement(React.Fragment, null,
|
131325
|
-
React.createElement(app_typescript_1.Label, { style: 'hollow', text: 'aacc' }),
|
131326
|
-
React.createElement(app_typescript_1.Label, { style: 'filled', type: 'primary', text: 'prlg' })), center: React.createElement("span", null, "Nullam id dolor id nibh ultricies vehicula ut id elit."), end: React.createElement(app_typescript_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }) }),
|
131327
|
-
React.createElement(TableList_1.TableListItem, { start: React.createElement(React.Fragment, null,
|
131328
|
-
React.createElement(app_typescript_1.Label, { style: 'translucent', text: 'aacc' }),
|
131329
|
-
React.createElement(app_typescript_1.Label, { style: 'translucent', type: 'primary', text: 'prlg' })), center: React.createElement("span", null, "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit."), end: React.createElement(app_typescript_1.IconLabel, { style: 'translucent', text: 'Label success', type: 'success', icon: 'time' }), action: React.createElement(app_typescript_1.IconButton, { icon: 'dots-vertical', size: 'small', ariaValue: 'More actions', onClick: function () { return false; } }) }))),
|
131330
|
-
React.createElement(Markup.ReactMarkupCode, null, "\n <TableList>\n <TableListItem\n start={\n <>\n <Label style='translucent' text='aacc' />\n <Label style='translucent' type='primary' text='prlg' />\n </>\n }\n center={\n <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>\n }\n end={\n <IconLabel style='translucent' text='Label success' type='success' icon='time' />\n }\n action={\n <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />\n } />\n <TableListItem\n start={\n <>\n <Label style='hollow' text='aacc' />\n <Label style='filled' type='primary' text='prlg' />\n </>\n }\n center={\n <span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>\n }\n end={\n <IconLabel style='translucent' text='Label success' type='success' icon='time' />\n } />\n <TableListItem\n start={\n <>\n <Label style='translucent' text='aacc' />\n <Label style='translucent' type='primary' text='prlg' />\n </>\n }\n center={\n <span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>\n }\n end={\n <IconLabel style='translucent' text='Label success' type='success' icon='time' />\n }\n action={\n <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />\n } />\n </TableList>\n ")),
|
131331
131572
|
React.createElement("p", { className: "docs-page__paragraph" }, "With drag and drop functionality:"),
|
131332
131573
|
React.createElement(Markup.ReactMarkup, null,
|
131333
131574
|
React.createElement(Markup.ReactMarkupPreview, null,
|
131334
|
-
React.createElement(TableList_1.TableList, { dragAndDrop: true, addItem: true, array: this.state.array, itemsDropdown: [
|
131575
|
+
React.createElement(TableList_1.TableList, { dragAndDrop: true, addItem: true, onAddItem: function (index, item) { return console.log(index, item); }, array: this.state.array, itemsDropdown: [
|
131335
131576
|
{ label: React.createElement(app_typescript_1.Label, { style: 'translucent', type: 'primary', text: 'aacc' }), onSelect: function () { return 1; } },
|
131336
131577
|
{ label: React.createElement(app_typescript_1.Label, { style: 'translucent', text: 'prlg' }), onSelect: function () { return 1; } },
|
131337
131578
|
{ label: React.createElement(app_typescript_1.Label, { style: 'translucent', type: 'primary', text: 'prlg' }), onSelect: function () { return 1; } },
|
131338
|
-
],
|
131579
|
+
], onDrag: function (start, end) { return console.log(start, end); } })),
|
131339
131580
|
React.createElement(Markup.ReactMarkupCode, null, "\n <TableList\n dragAndDrop\n addItem\n array={this.state.array}\n itemsDropdown={[\n { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },\n { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },\n { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },\n ]}\n onClick={() => false}\n />\n ")),
|
131340
131581
|
React.createElement("h3", { className: "docs-page__h3" }, "Props"),
|
131341
131582
|
React.createElement("p", { className: "docs-page__paragraph" }, "TableList"),
|
@@ -131346,21 +131587,18 @@ var TableListDoc = /** @class */ (function (_super) {
|
|
131346
131587
|
React.createElement(app_typescript_1.Prop, { name: 'dragAndDrop', isRequired: false, type: 'boolean', default: 'false', description: 'Drag&Drop functionality.' }),
|
131347
131588
|
React.createElement(app_typescript_1.Prop, { name: 'itemsDropdown', isRequired: false, type: 'React.ReactNode | any', default: 'false', description: 'Dropdown for functionality to add items to the list.' }),
|
131348
131589
|
React.createElement(app_typescript_1.Prop, { name: 'className', isRequired: false, type: 'string', default: 'false', description: 'Add class on TableList container.' }),
|
131590
|
+
React.createElement(app_typescript_1.Prop, { name: 'showDragHandle', isRequired: false, type: 'string', default: 'always', description: '' }),
|
131349
131591
|
React.createElement(app_typescript_1.Prop, { name: 'onClick', isRequired: false, type: 'function', default: 'false', description: 'onClick functionality.' }),
|
131350
|
-
React.createElement(app_typescript_1.Prop, { name: 'onDrag', isRequired: false, type: 'function', default: 'false', description: 'Returns start and end position of draggable item' })
|
131592
|
+
React.createElement(app_typescript_1.Prop, { name: 'onDrag', isRequired: false, type: 'function', default: 'false', description: 'Returns start and end position of draggable item' }),
|
131593
|
+
React.createElement(app_typescript_1.Prop, { name: 'onAddItem', isRequired: false, type: 'function', default: 'false', description: 'Returns index of draggable item.' })),
|
131351
131594
|
React.createElement("p", { className: "docs-page__paragraph" }, "array:"),
|
131352
|
-
React.createElement(app_typescript_1.PropsList, null,
|
131353
|
-
React.createElement(app_typescript_1.Prop, { name: 'start', isRequired: false, type: 'React.ReactNode', default: 'false', description: 'Column of individual items of list.' }),
|
131354
|
-
React.createElement(app_typescript_1.Prop, { name: 'center', isRequired: false, type: 'React.ReactNode', default: 'false', description: 'Column of individual items of list.' }),
|
131355
|
-
React.createElement(app_typescript_1.Prop, { name: 'end', isRequired: false, type: 'React.ReactNode', default: 'false', description: 'Column of individual items of list.' }),
|
131356
|
-
React.createElement(app_typescript_1.Prop, { name: 'action', isRequired: false, type: 'React.ReactNode', default: 'false', description: 'Column of individual list items that is displayed on hover.' })),
|
131357
|
-
React.createElement("p", { className: "docs-page__paragraph" }, "TableListItem"),
|
131358
131595
|
React.createElement(app_typescript_1.PropsList, null,
|
131359
131596
|
React.createElement(app_typescript_1.Prop, { name: 'start', isRequired: false, type: 'React.ReactNode', default: 'false', description: 'Column of individual items of list.' }),
|
131360
131597
|
React.createElement(app_typescript_1.Prop, { name: 'center', isRequired: false, type: 'React.ReactNode', default: 'false', description: 'Column of individual items of list.' }),
|
131361
131598
|
React.createElement(app_typescript_1.Prop, { name: 'end', isRequired: false, type: 'React.ReactNode', default: 'false', description: 'Column of individual items of list.' }),
|
131362
131599
|
React.createElement(app_typescript_1.Prop, { name: 'action', isRequired: false, type: 'React.ReactNode', default: 'false', description: 'Column of individual list items that is displayed on hover.' }),
|
131363
|
-
React.createElement(app_typescript_1.Prop, { name: 'onClick', isRequired: false, type: 'function', default: 'false', description: 'onClick functionality.' })
|
131600
|
+
React.createElement(app_typescript_1.Prop, { name: 'onClick', isRequired: false, type: 'function', default: 'false', description: 'onClick functionality.' }),
|
131601
|
+
React.createElement(app_typescript_1.Prop, { name: 'onDoubleClick', isRequired: false, type: 'function', default: 'false', description: 'onDoubleClick functionality.' }))));
|
131364
131602
|
};
|
131365
131603
|
return TableListDoc;
|
131366
131604
|
}(React.Component));
|
@@ -134429,7 +134667,7 @@ var CoreLayout = /** @class */ (function (_super) {
|
|
134429
134667
|
});
|
134430
134668
|
};
|
134431
134669
|
CoreLayout.prototype.render = function () {
|
134432
|
-
return (React.createElement(Layout.CoreLayout, { heading: 'Core Layout', menuOpen: this.state.mainMenuOpen, onClick: this.handleMainMenu, active: this.state.mainMenuOpen, ariaControls: 'main-menu', menuId: 'main-menu', slideInMenu: (React.createElement(Layout.MainMenu, { headerTitle: 'Main Menu', poweredBy: 'Powered by Superdesk technology', header: (null), footerContent: true, footer: (React.createElement("p", null, "Menu footer testing")) },
|
134670
|
+
return (React.createElement(Layout.CoreLayout, { heading: 'Core Layout', menuOpen: this.state.mainMenuOpen, onClick: this.handleMainMenu, active: this.state.mainMenuOpen, ariaControls: 'main-menu', menuId: 'main-menu', editorFullWidth: true, slideInMenu: (React.createElement(Layout.MainMenu, { headerTitle: 'Main Menu', poweredBy: 'Powered by Superdesk technology', header: (null), footerContent: true, footer: (React.createElement("p", null, "Menu footer testing")) },
|
134433
134671
|
React.createElement(index_1.LeftMenu, { style: 'blanc', reverseItemBorder: true, size: 'large', ariaLabel: 'Left navigation', activeItemId: '1', groups: [
|
134434
134672
|
{ label: 'MAIN SECTIONS', items: [
|
134435
134673
|
{ id: '1', label: 'Section 1', ref: 'section1' },
|
@@ -137093,7 +137331,7 @@ exports.WithSizeObserverDocs = WithSizeObserverDocs;
|
|
137093
137331
|
/* 649 */
|
137094
137332
|
/***/ (function(module, exports) {
|
137095
137333
|
|
137096
|
-
module.exports = {"name":"superdesk-ui-framework","version":"3.0.1-beta.
|
137334
|
+
module.exports = {"name":"superdesk-ui-framework","version":"3.0.1-beta.13","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build"},"devDependencies":{"@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/lodash":"^4.14.161","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"5.14.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","lodash":"4.17.21","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","tslint":"^5.18.0","typescript":"4.5.2","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","moment":"^2.29.3","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
|
137097
137335
|
|
137098
137336
|
/***/ }),
|
137099
137337
|
/* 650 */
|