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
@@ -32136,13 +32136,13 @@ a.label {
|
|
32136
32136
|
.modal-open {
|
32137
32137
|
overflow: hidden; }
|
32138
32138
|
.modal-open .dropdown__menu {
|
32139
|
-
z-index:
|
32139
|
+
z-index: 3050; }
|
32140
32140
|
.modal-open .dropdown.open {
|
32141
|
-
*z-index:
|
32141
|
+
*z-index: 3050; }
|
32142
32142
|
.modal-open .popover {
|
32143
|
-
z-index:
|
32143
|
+
z-index: 3060; }
|
32144
32144
|
.modal-open .tooltip {
|
32145
|
-
z-index:
|
32145
|
+
z-index: 3090; }
|
32146
32146
|
|
32147
32147
|
.modal {
|
32148
32148
|
position: fixed;
|
@@ -35266,9 +35266,12 @@ tags-input,
|
|
35266
35266
|
.table-list--contained {
|
35267
35267
|
gap: 0; }
|
35268
35268
|
|
35269
|
+
.table-list--read-only {
|
35270
|
+
pointer-events: none;
|
35271
|
+
cursor: default; }
|
35272
|
+
|
35269
35273
|
.table-list__item {
|
35270
35274
|
display: grid;
|
35271
|
-
z-index: 1;
|
35272
35275
|
align-items: center;
|
35273
35276
|
grid-template-columns: [contentCol] 1fr [actionsVisible] auto [actionsHidden] auto;
|
35274
35277
|
position: relative;
|
@@ -35280,15 +35283,6 @@ tags-input,
|
|
35280
35283
|
border: 1px solid var(--sd-colour-line--light);
|
35281
35284
|
transition: all 0.2s ease-in-out;
|
35282
35285
|
inset-inline-start: 0; }
|
35283
|
-
.table-list__item::before {
|
35284
|
-
content: "";
|
35285
|
-
width: 6px;
|
35286
|
-
position: absolute;
|
35287
|
-
inset-block: 3px;
|
35288
|
-
inset-inline-start: 3px;
|
35289
|
-
background-color: var(--sd-colour-panel-bg--100);
|
35290
|
-
z-index: 1;
|
35291
|
-
border-radius: 2px; }
|
35292
35286
|
.table-list__item--margin {
|
35293
35287
|
margin-bottom: 0.8rem; }
|
35294
35288
|
.table-list__item--selected {
|
@@ -35353,6 +35347,32 @@ tags-input,
|
|
35353
35347
|
pointer-events: none;
|
35354
35348
|
opacity: 0.5; }
|
35355
35349
|
|
35350
|
+
.table-list__add-item {
|
35351
|
+
display: grid;
|
35352
|
+
align-items: center;
|
35353
|
+
position: relative;
|
35354
|
+
flex-direction: row;
|
35355
|
+
padding: 8px;
|
35356
|
+
min-height: 4.2rem;
|
35357
|
+
border-radius: var(--b-radius--medium);
|
35358
|
+
background-color: transparent;
|
35359
|
+
border: 1px dashed var(--sd-colour-line--medium);
|
35360
|
+
transition: all 0.2s ease-in-out;
|
35361
|
+
inset-inline-start: 0; }
|
35362
|
+
.table-list__add-item--container {
|
35363
|
+
display: flex;
|
35364
|
+
justify-content: center;
|
35365
|
+
align-items: center; }
|
35366
|
+
|
35367
|
+
.table-list__item-border {
|
35368
|
+
width: 6px;
|
35369
|
+
background-color: var(--sd-colour-panel-bg--100);
|
35370
|
+
z-index: 2;
|
35371
|
+
position: absolute;
|
35372
|
+
inset-block: 3px;
|
35373
|
+
inset-inline-start: 3px;
|
35374
|
+
border-radius: 2px; }
|
35375
|
+
|
35356
35376
|
.table-list__item-content {
|
35357
35377
|
grid-column: contentCol;
|
35358
35378
|
grid-row: mainRow;
|
@@ -35474,6 +35494,52 @@ tags-input,
|
|
35474
35494
|
.side-panel__content-block .table-list__item-content {
|
35475
35495
|
grid-template-columns: [columnLeft] 140px [columncenter] 1fr [columnRight] auto; }
|
35476
35496
|
|
35497
|
+
.table-list--gap-s {
|
35498
|
+
gap: 0.8rem; }
|
35499
|
+
|
35500
|
+
.table-list__item--draggable.table-list__item--drag-handles-always {
|
35501
|
+
border-left-width: 16px;
|
35502
|
+
border-left-color: var(--sd-colour-line--medium); }
|
35503
|
+
.table-list__item--draggable.table-list__item--drag-handles-always::after {
|
35504
|
+
content: "";
|
35505
|
+
width: 20px;
|
35506
|
+
position: absolute;
|
35507
|
+
inset-block: -1px;
|
35508
|
+
inset-inline-start: -18px;
|
35509
|
+
background-image: url(dots.svg);
|
35510
|
+
background-repeat: no-repeat;
|
35511
|
+
background-position: center center;
|
35512
|
+
z-index: 2;
|
35513
|
+
border-radius: var(--b-radius--small);
|
35514
|
+
opacity: 0.85; }
|
35515
|
+
.table-list__item--draggable.table-list__item--drag-handles-always:hover {
|
35516
|
+
border-left-color: var(--sd-colour-line--strong); }
|
35517
|
+
.table-list__item--draggable.table-list__item--drag-handles-always:hover::after {
|
35518
|
+
cursor: grab; }
|
35519
|
+
.table-list__item--draggable.table-list__item--drag-handles-always:active {
|
35520
|
+
border-color: var(--sd-colour-interactive);
|
35521
|
+
cursor: grabbing; }
|
35522
|
+
.table-list__item--draggable.table-list__item--drag-handles-always:active::after {
|
35523
|
+
opacity: 1 !important;
|
35524
|
+
cursor: grabbing; }
|
35525
|
+
|
35526
|
+
.table-list__item--draggable.table-list__item--drag-handles-none {
|
35527
|
+
border-left-width: 1px; }
|
35528
|
+
.table-list__item--draggable.table-list__item--drag-handles-none::after {
|
35529
|
+
content: "";
|
35530
|
+
width: 0;
|
35531
|
+
opacity: 0; }
|
35532
|
+
.table-list__item--draggable.table-list__item--drag-handles-none:hover {
|
35533
|
+
border-left-color: var(--sd-colour-line--strong); }
|
35534
|
+
.table-list__item--draggable.table-list__item--drag-handles-none:hover::after {
|
35535
|
+
cursor: grab; }
|
35536
|
+
.table-list__item--draggable.table-list__item--drag-handles-none:active {
|
35537
|
+
border-color: var(--sd-colour-interactive);
|
35538
|
+
cursor: grabbing; }
|
35539
|
+
.table-list__item--draggable.table-list__item--drag-handles-none:active::after {
|
35540
|
+
opacity: 1 !important;
|
35541
|
+
cursor: grabbing; }
|
35542
|
+
|
35477
35543
|
.hamburger {
|
35478
35544
|
cursor: pointer;
|
35479
35545
|
transition-property: opacity;
|
@@ -38682,6 +38748,8 @@ tags-input,
|
|
38682
38748
|
grid-template-rows: 1fr; }
|
38683
38749
|
.sd-content-wrapper .sd-main-content-grid {
|
38684
38750
|
grid-column: contentArea; }
|
38751
|
+
.sd-content-wrapper--editor-full {
|
38752
|
+
grid-template-columns: [sideTabsLeft] auto [contentArea] auto [contentSplitter] auto [authoringArea] 1fr; }
|
38685
38753
|
|
38686
38754
|
.sd-content-wrapper__left-tabs {
|
38687
38755
|
grid-column: sideTabsLeft; }
|
@@ -44900,7 +44968,7 @@ a.text-link {
|
|
44900
44968
|
background: var(--color-dropdown-menu-Bg);
|
44901
44969
|
color: var(--sd-colour-interactive);
|
44902
44970
|
box-shadow: -2px -1px 5px -2px rgba(0, 0, 0, 0.2), 3px -1px 5px -2px rgba(0, 0, 0, 0.2);
|
44903
|
-
z-index:
|
44971
|
+
z-index: 2001; }
|
44904
44972
|
.dropdown.open .navbtn > i {
|
44905
44973
|
opacity: 1;
|
44906
44974
|
color: var(--sd-colour-interactive); }
|
@@ -45458,7 +45526,7 @@ a.text-link {
|
|
45458
45526
|
position: absolute;
|
45459
45527
|
top: 100%;
|
45460
45528
|
inset-inline-start: 0;
|
45461
|
-
z-index:
|
45529
|
+
z-index: 2000;
|
45462
45530
|
display: none;
|
45463
45531
|
min-width: 200px;
|
45464
45532
|
padding: 1rem 0;
|
@@ -38925,7 +38925,15 @@ function getDurationString(seconds) {
|
|
38925
38925
|
var hour = zeroPad(Math.floor(seconds / 3600));
|
38926
38926
|
var minute = zeroPad(Math.floor((seconds % 3600) / 60));
|
38927
38927
|
var second = zeroPad(Math.floor(seconds % 60));
|
38928
|
-
|
38928
|
+
if (Number(hour) === 0 && Number(minute) > 0) {
|
38929
|
+
return "".concat(minute, "m ").concat(second, "s");
|
38930
|
+
}
|
38931
|
+
else if (Number(hour) === 0 && Number(minute) === 0) {
|
38932
|
+
return "".concat(second, "s");
|
38933
|
+
}
|
38934
|
+
else {
|
38935
|
+
return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
|
38936
|
+
}
|
38929
38937
|
}
|
38930
38938
|
exports.getDurationString = getDurationString;
|
38931
38939
|
|
@@ -40731,16 +40739,21 @@ var TableList = /** @class */ (function (_super) {
|
|
40731
40739
|
items: [],
|
40732
40740
|
};
|
40733
40741
|
_this.onDragEnd = _this.onDragEnd.bind(_this);
|
40742
|
+
_this.dropDown = _this.dropDown.bind(_this);
|
40734
40743
|
return _this;
|
40735
40744
|
}
|
40736
40745
|
TableList.prototype.componentDidMount = function () {
|
40737
|
-
|
40746
|
+
if (this.props.array) {
|
40747
|
+
this.setState({ items: this.props.array });
|
40748
|
+
}
|
40738
40749
|
};
|
40739
40750
|
TableList.prototype.componentDidUpdate = function (prevProps) {
|
40740
|
-
if (
|
40741
|
-
this.
|
40742
|
-
|
40743
|
-
|
40751
|
+
if (this.props.array) {
|
40752
|
+
if (prevProps.array !== this.props.array) {
|
40753
|
+
this.setState({
|
40754
|
+
items: this.props.array,
|
40755
|
+
});
|
40756
|
+
}
|
40744
40757
|
}
|
40745
40758
|
};
|
40746
40759
|
TableList.prototype.onDragEnd = function (result) {
|
@@ -40754,24 +40767,47 @@ var TableList = /** @class */ (function (_super) {
|
|
40754
40767
|
return this.props.onDrag ?
|
40755
40768
|
this.props.onDrag(result.source.index, result.destination.index) : null;
|
40756
40769
|
};
|
40770
|
+
TableList.prototype.dropDown = function () {
|
40771
|
+
return (React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
|
40772
|
+
React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } })));
|
40773
|
+
};
|
40757
40774
|
TableList.prototype.render = function () {
|
40758
40775
|
var _a;
|
40759
40776
|
var _this = this;
|
40760
|
-
var classes = (0, classnames_1.default)((_a = {
|
40761
|
-
'table-list': !this.props.addItem
|
40777
|
+
var classes = (0, classnames_1.default)('', (_a = {
|
40778
|
+
'table-list': !this.props.addItem,
|
40779
|
+
'table-list--read-only': this.props.readOnly
|
40762
40780
|
},
|
40763
40781
|
_a["".concat(this.props.className)] = this.props.className,
|
40764
40782
|
_a));
|
40765
|
-
return (this.
|
40766
|
-
this.props.dragAndDrop
|
40767
|
-
React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
|
40783
|
+
return (this.state.items.length > 0
|
40784
|
+
? this.props.dragAndDrop
|
40785
|
+
? React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
|
40768
40786
|
React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable" }, function (provided, _snapshot) { return (React.createElement("ul", __assign({ className: classes, ref: provided.innerRef }, provided.droppableProps),
|
40769
40787
|
_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),
|
40770
|
-
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,
|
40771
|
-
|
40772
|
-
|
40773
|
-
|
40774
|
-
|
40788
|
+
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
|
+
? item.onDoubleClick
|
40790
|
+
: undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
|
40791
|
+
&& _this.props.onAddItem(index, item); }, showDragHandle: _this.props.showDragHandle }))); })); }),
|
40792
|
+
provided.placeholder,
|
40793
|
+
(_this.props.addItem && !_this.props.readOnly) &&
|
40794
|
+
React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
|
40795
|
+
React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
|
40796
|
+
React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, _this.dropDown()))))); }))
|
40797
|
+
: React.createElement("ul", { className: classes },
|
40798
|
+
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
|
+
? item.onDoubleClick
|
40800
|
+
: undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
|
40801
|
+
&& _this.props.onAddItem(index, item); } })); }),
|
40802
|
+
(this.props.addItem && !this.props.readOnly) &&
|
40803
|
+
React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
|
40804
|
+
React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
|
40805
|
+
React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
|
40806
|
+
: (this.props.addItem && !this.props.readOnly) ? React.createElement("ul", { className: classes },
|
40807
|
+
React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
|
40808
|
+
React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
|
40809
|
+
React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
|
40810
|
+
: null);
|
40775
40811
|
};
|
40776
40812
|
return TableList;
|
40777
40813
|
}(React.PureComponent));
|
@@ -40779,12 +40815,42 @@ exports.TableList = TableList;
|
|
40779
40815
|
var TableListItem = /** @class */ (function (_super) {
|
40780
40816
|
__extends(TableListItem, _super);
|
40781
40817
|
function TableListItem() {
|
40782
|
-
|
40818
|
+
var _this = _super !== null && _super.apply(this, arguments) || this;
|
40819
|
+
_this.delay = 200;
|
40820
|
+
_this.prevent = false;
|
40821
|
+
_this.onSingleClick = function () {
|
40822
|
+
_this.timer = setTimeout(function () {
|
40823
|
+
if (!_this.prevent) {
|
40824
|
+
if (_this.props.onClick) {
|
40825
|
+
_this.props.onClick();
|
40826
|
+
}
|
40827
|
+
}
|
40828
|
+
}, _this.delay);
|
40829
|
+
};
|
40830
|
+
_this.onDoubleClick = function () {
|
40831
|
+
clearTimeout(_this.timer);
|
40832
|
+
_this.prevent = true;
|
40833
|
+
if (_this.props.onDoubleClick) {
|
40834
|
+
_this.props.onDoubleClick();
|
40835
|
+
}
|
40836
|
+
setTimeout(function () {
|
40837
|
+
_this.prevent = false;
|
40838
|
+
}, _this.delay);
|
40839
|
+
};
|
40840
|
+
return _this;
|
40783
40841
|
}
|
40784
40842
|
TableListItem.prototype.render = function () {
|
40843
|
+
var _this = this;
|
40844
|
+
var classes = (0, classnames_1.default)('table-list__item', {
|
40845
|
+
'table-list__item--clickable': this.props.onClick,
|
40846
|
+
'table-list__item--draggable': this.props.dragAndDrop,
|
40847
|
+
'table-list__item--drag-handles-always': !this.props.showDragHandle,
|
40848
|
+
'table-list__item--drag-handles-none': this.props.showDragHandle === 'none',
|
40849
|
+
});
|
40785
40850
|
return (this.props.addItem ?
|
40786
40851
|
React.createElement("li", { className: 'table-list__item-container' },
|
40787
|
-
React.createElement("div", { onClick:
|
40852
|
+
React.createElement("div", { onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); }, className: classes },
|
40853
|
+
React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
|
40788
40854
|
React.createElement("div", { className: 'table-list__item-content' },
|
40789
40855
|
React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
|
40790
40856
|
React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' }, this.props.center && this.props.center),
|
@@ -40793,9 +40859,10 @@ var TableListItem = /** @class */ (function (_super) {
|
|
40793
40859
|
React.createElement("div", { className: 'table-list__add-bar-container' },
|
40794
40860
|
React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
|
40795
40861
|
React.createElement("div", { className: 'table-list__add-bar' },
|
40796
|
-
React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown },
|
40862
|
+
React.createElement(Dropdown_1.Dropdown, { onChange: this.props.onAddItem, items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
|
40797
40863
|
React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }))))))
|
40798
|
-
: React.createElement("li", { className: "
|
40864
|
+
: React.createElement("li", { className: "".concat(classes, " table-list__item--margin"), onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); } },
|
40865
|
+
React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
|
40799
40866
|
React.createElement("div", { className: 'table-list__item-content' },
|
40800
40867
|
React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
|
40801
40868
|
React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' }, this.props.center && this.props.center),
|
@@ -56962,15 +57029,13 @@ var ReactDOM = __importStar(__webpack_require__(9));
|
|
56962
57029
|
var core_1 = __webpack_require__(61);
|
56963
57030
|
var react_id_generator_1 = __webpack_require__(8);
|
56964
57031
|
var Dropdown = function (_a) {
|
56965
|
-
var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align;
|
57032
|
+
var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, onChange = _a.onChange;
|
56966
57033
|
var _b = React.useState(false), open = _b[0], setOpen = _b[1];
|
56967
57034
|
var _c = React.useState(false), change = _c[0], setChange = _c[1];
|
56968
57035
|
var menuID = (0, react_id_generator_1.useId)()[0];
|
56969
57036
|
var DROPDOWN_ID = "react-placeholder";
|
56970
57037
|
var ref = React.useRef(null);
|
56971
|
-
var refSubMenu = React.useRef(null);
|
56972
57038
|
var buttonRef = React.useRef(null);
|
56973
|
-
var refButtonSubMenu = React.useRef(null);
|
56974
57039
|
var headerElements = header === null || header === void 0 ? void 0 : header.map(function (el, index) {
|
56975
57040
|
return each(el, index);
|
56976
57041
|
});
|
@@ -57089,20 +57154,7 @@ var Dropdown = function (_a) {
|
|
57089
57154
|
item['items'].forEach(function (el, key) {
|
57090
57155
|
submenuItems_1.push(each(el, key));
|
57091
57156
|
});
|
57092
|
-
return (React.createElement(
|
57093
|
-
React.createElement("div", { className: 'dropdown' },
|
57094
|
-
React.createElement("button", { ref: refButtonSubMenu, className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onMouseOver: function () {
|
57095
|
-
var subMenuRef = refSubMenu.current;
|
57096
|
-
var subToggleRef = refButtonSubMenu.current;
|
57097
|
-
if (subMenuRef && subToggleRef) {
|
57098
|
-
(0, core_1.createPopper)(subToggleRef, subMenuRef, {
|
57099
|
-
placement: 'right-start',
|
57100
|
-
});
|
57101
|
-
}
|
57102
|
-
}, onClick: item['onSelect'] },
|
57103
|
-
item['icon'] ? React.createElement("i", { className: 'icon-' + item['icon'] }) : null,
|
57104
|
-
item['label']),
|
57105
|
-
React.createElement("ul", { ref: refSubMenu, role: 'menu', className: 'dropdown__menu' }, submenuItems_1))));
|
57157
|
+
return (React.createElement(DropdownItemWithSubmenu, { key: index, item: item, subMenuItems: submenuItems_1 }));
|
57106
57158
|
}
|
57107
57159
|
else if (item['type'] === 'group') {
|
57108
57160
|
var groupItems_1 = [];
|
@@ -57118,7 +57170,7 @@ var Dropdown = function (_a) {
|
|
57118
57170
|
return (React.createElement("li", { className: "dropdown__menu-divider", key: index }));
|
57119
57171
|
}
|
57120
57172
|
else {
|
57121
|
-
return (React.createElement(DropdownItem, { key: index, label: item['label'], icon: item['icon'], active: item['active'], onSelect: item['onSelect'] }));
|
57173
|
+
return (React.createElement(DropdownItem, { key: index, label: item['label'], icon: item['icon'], active: item['active'], onSelect: item['onSelect'], onChange: onChange }));
|
57122
57174
|
}
|
57123
57175
|
}
|
57124
57176
|
return (React.createElement("div", { className: 'dropdown ' + (open ? 'open' : '') },
|
@@ -57160,12 +57212,46 @@ var Dropdown = function (_a) {
|
|
57160
57212
|
};
|
57161
57213
|
exports.Dropdown = Dropdown;
|
57162
57214
|
var DropdownItem = function (_a) {
|
57163
|
-
var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect;
|
57215
|
+
var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect, onChange = _a.onChange;
|
57164
57216
|
return (React.createElement("li", { role: 'none', className: active ? 'dropdown__menu-item--active' : '' },
|
57165
|
-
React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick:
|
57217
|
+
React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick: function () {
|
57218
|
+
onSelect();
|
57219
|
+
if (onChange) {
|
57220
|
+
onChange();
|
57221
|
+
}
|
57222
|
+
} },
|
57166
57223
|
React.createElement("i", { className: icon ? ('icon-' + icon) : '' }),
|
57167
57224
|
label)));
|
57168
57225
|
};
|
57226
|
+
var DropdownItemWithSubmenu = function (_a) {
|
57227
|
+
var index = _a.index, item = _a.item, subMenuItems = _a.subMenuItems;
|
57228
|
+
var _b = React.useState(undefined), open = _b[0], setOpen = _b[1];
|
57229
|
+
var refButtonSubMenu = React.useRef(null);
|
57230
|
+
var refSubMenu = React.useRef(null);
|
57231
|
+
React.useEffect(function () {
|
57232
|
+
var subMenuRef = refSubMenu.current;
|
57233
|
+
var subToggleRef = refButtonSubMenu.current;
|
57234
|
+
if (open === true) {
|
57235
|
+
document.body.appendChild(subMenuRef);
|
57236
|
+
subMenuRef.style.display = 'block';
|
57237
|
+
}
|
57238
|
+
else if (open === false) {
|
57239
|
+
document.body.removeChild(subMenuRef);
|
57240
|
+
subMenuRef.style.display = 'none';
|
57241
|
+
}
|
57242
|
+
if (subMenuRef && subToggleRef) {
|
57243
|
+
(0, core_1.createPopper)(subToggleRef, subMenuRef, {
|
57244
|
+
placement: 'right-start',
|
57245
|
+
});
|
57246
|
+
}
|
57247
|
+
}, [open]);
|
57248
|
+
return (React.createElement("li", { key: index, ref: refButtonSubMenu },
|
57249
|
+
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'] },
|
57251
|
+
item['icon'] ? React.createElement("i", { className: 'icon-' + item['icon'] }) : null,
|
57252
|
+
item['label']),
|
57253
|
+
React.createElement("ul", { role: 'menu', ref: refSubMenu, style: { display: 'none' }, className: 'dropdown__menu' }, subMenuItems))));
|
57254
|
+
};
|
57169
57255
|
|
57170
57256
|
|
57171
57257
|
/***/ }),
|
@@ -62468,22 +62554,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
62468
62554
|
Object.defineProperty(exports, "__esModule", { value: true });
|
62469
62555
|
exports.TimePicker = void 0;
|
62470
62556
|
var React = __importStar(__webpack_require__(0));
|
62471
|
-
// import classNames from 'classnames';
|
62472
62557
|
var react_id_generator_1 = __importDefault(__webpack_require__(8));
|
62473
62558
|
var Form_1 = __webpack_require__(14);
|
62474
62559
|
var TimePicker = /** @class */ (function (_super) {
|
62475
62560
|
__extends(TimePicker, _super);
|
62476
|
-
function TimePicker(
|
62477
|
-
var _this = _super.
|
62561
|
+
function TimePicker() {
|
62562
|
+
var _this = _super !== null && _super.apply(this, arguments) || this;
|
62478
62563
|
_this.htmlId = (0, react_id_generator_1.default)();
|
62479
|
-
_this.state = {
|
62480
|
-
invalid: _this.props.invalid ? _this.props.invalid : false,
|
62481
|
-
};
|
62482
62564
|
return _this;
|
62483
62565
|
}
|
62484
62566
|
TimePicker.prototype.render = function () {
|
62485
62567
|
var _this = this;
|
62486
|
-
return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.
|
62568
|
+
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 },
|
62487
62569
|
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) {
|
62488
62570
|
_this.props.onChange(event.target.value);
|
62489
62571
|
} })));
|
@@ -99218,14 +99300,22 @@ var SearchBar = /** @class */ (function (_super) {
|
|
99218
99300
|
}
|
99219
99301
|
}, onChange: function (event) { return _this.setState({ inputValue: event.target.value }); }, onFocus: function () { return _this.setState({ focused: true }); } }),
|
99220
99302
|
this.state.inputValue &&
|
99221
|
-
React.createElement("button", { className: "sd-searchbar__cancel", onClick: function () {
|
99303
|
+
React.createElement("button", { className: "sd-searchbar__cancel", onClick: function () {
|
99304
|
+
_this.setState({ inputValue: '' });
|
99305
|
+
setTimeout(function () {
|
99306
|
+
if (_this.props.onSubmit) {
|
99307
|
+
_this.props.onSubmit(_this.state.inputValue);
|
99308
|
+
}
|
99309
|
+
});
|
99310
|
+
} },
|
99222
99311
|
React.createElement(Icon_1.Icon, { name: 'remove-sign' })),
|
99223
|
-
|
99224
|
-
|
99225
|
-
_this.props.onSubmit
|
99226
|
-
|
99227
|
-
|
99228
|
-
|
99312
|
+
this.state.inputValue &&
|
99313
|
+
React.createElement("button", { id: "sd-searchbar__search-btn", className: "sd-searchbar__search-btn ".concat(this.state.keyDown ? 'sd-searchbar__search-btn--active' : ''), onClick: function () {
|
99314
|
+
if (_this.props.onSubmit) {
|
99315
|
+
_this.props.onSubmit(_this.state.inputValue);
|
99316
|
+
}
|
99317
|
+
} },
|
99318
|
+
React.createElement(Icon_1.Icon, { name: 'chevron-right-thin' }))));
|
99229
99319
|
};
|
99230
99320
|
return SearchBar;
|
99231
99321
|
}(React.PureComponent));
|
@@ -100912,7 +101002,7 @@ var CoreLayout = /** @class */ (function (_super) {
|
|
100912
101002
|
return (React.createElement(_1.CoreLayoutContainer, null,
|
100913
101003
|
this.props.slideInMenu && (React.createElement(_1.CoreLayoutSlideInMenu, { menuId: this.props.menuId, menuOpen: this.props.menuOpen }, this.props.slideInMenu)),
|
100914
101004
|
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)),
|
100915
|
-
React.createElement(_1.CoreLayoutMain,
|
101005
|
+
React.createElement(_1.CoreLayoutMain, { editorFullWidth: this.props.editorFullWidth }, this.props.children),
|
100916
101006
|
this.props.footer && (React.createElement(_1.CoreLayoutFooter, null, this.props.footer)),
|
100917
101007
|
this.props.overlay && (React.createElement(_1.CoreLayoutOverlay, null, this.props.overlay))));
|
100918
101008
|
};
|
@@ -101078,16 +101168,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
101078
101168
|
__setModuleDefault(result, mod);
|
101079
101169
|
return result;
|
101080
101170
|
};
|
101171
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
101172
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
101173
|
+
};
|
101081
101174
|
Object.defineProperty(exports, "__esModule", { value: true });
|
101082
101175
|
exports.CoreLayoutMain = void 0;
|
101083
101176
|
var React = __importStar(__webpack_require__(0));
|
101177
|
+
var classnames_1 = __importDefault(__webpack_require__(2));
|
101084
101178
|
var CoreLayoutMain = /** @class */ (function (_super) {
|
101085
101179
|
__extends(CoreLayoutMain, _super);
|
101086
101180
|
function CoreLayoutMain() {
|
101087
101181
|
return _super !== null && _super.apply(this, arguments) || this;
|
101088
101182
|
}
|
101089
101183
|
CoreLayoutMain.prototype.render = function () {
|
101090
|
-
|
101184
|
+
var classes = (0, classnames_1.default)('sd-content sd-content-wrapper', {
|
101185
|
+
'sd-content-wrapper--editor-full': this.props.editorFullWidth,
|
101186
|
+
});
|
101187
|
+
return (React.createElement("section", { id: this.props.id, className: classes }, this.props.children));
|
101091
101188
|
};
|
101092
101189
|
return CoreLayoutMain;
|
101093
101190
|
}(React.PureComponent));
|