superdesk-ui-framework 3.0.1-beta.11 → 3.0.1-beta.12
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 +20 -7
- 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 +1681 -1533
- package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +1 -0
- package/dist/react/TableList.tsx +15 -119
- package/dist/superdesk-ui.bundle.css +85 -17
- package/dist/superdesk-ui.bundle.js +1476 -1316
- package/dist/vendor.bundle.js +14 -14
- package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +1 -0
- 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 +9 -4
- 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/dist/vendor.bundle.js
CHANGED
@@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|
70
70
|
/******/ __webpack_require__.p = "";
|
71
71
|
/******/
|
72
72
|
/******/ // Load entry module and return exports
|
73
|
-
/******/ return __webpack_require__(__webpack_require__.s =
|
73
|
+
/******/ return __webpack_require__(__webpack_require__.s = 528);
|
74
74
|
/******/ })
|
75
75
|
/************************************************************************/
|
76
76
|
/******/ ({
|
@@ -28246,7 +28246,7 @@ module.exports = function(module) {
|
|
28246
28246
|
|
28247
28247
|
/***/ }),
|
28248
28248
|
|
28249
|
-
/***/
|
28249
|
+
/***/ 528:
|
28250
28250
|
/***/ (function(module, exports, __webpack_require__) {
|
28251
28251
|
|
28252
28252
|
"use strict";
|
@@ -28256,11 +28256,11 @@ __webpack_require__(33);
|
|
28256
28256
|
|
28257
28257
|
__webpack_require__(41);
|
28258
28258
|
|
28259
|
-
__webpack_require__(
|
28259
|
+
__webpack_require__(529);
|
28260
28260
|
|
28261
|
-
__webpack_require__(
|
28261
|
+
__webpack_require__(531);
|
28262
28262
|
|
28263
|
-
__webpack_require__(
|
28263
|
+
__webpack_require__(533);
|
28264
28264
|
|
28265
28265
|
__webpack_require__(0);
|
28266
28266
|
|
@@ -28268,7 +28268,7 @@ __webpack_require__(9);
|
|
28268
28268
|
|
28269
28269
|
/***/ }),
|
28270
28270
|
|
28271
|
-
/***/
|
28271
|
+
/***/ 529:
|
28272
28272
|
/***/ (function(module, exports, __webpack_require__) {
|
28273
28273
|
|
28274
28274
|
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
|
@@ -28292,7 +28292,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
|
|
28292
28292
|
if ( true ) {
|
28293
28293
|
|
28294
28294
|
// AMD. Register as an anonymous module.
|
28295
|
-
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(41), __webpack_require__(
|
28295
|
+
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(41), __webpack_require__(530) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
|
28296
28296
|
__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
|
28297
28297
|
(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
|
28298
28298
|
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
|
@@ -29030,7 +29030,7 @@ return $.widget;
|
|
29030
29030
|
|
29031
29031
|
/***/ }),
|
29032
29032
|
|
29033
|
-
/***/
|
29033
|
+
/***/ 530:
|
29034
29034
|
/***/ (function(module, exports, __webpack_require__) {
|
29035
29035
|
|
29036
29036
|
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;( function( factory ) {
|
@@ -29060,16 +29060,16 @@ return $.ui.version = "1.13.0";
|
|
29060
29060
|
|
29061
29061
|
/***/ }),
|
29062
29062
|
|
29063
|
-
/***/
|
29063
|
+
/***/ 531:
|
29064
29064
|
/***/ (function(module, exports, __webpack_require__) {
|
29065
29065
|
|
29066
|
-
__webpack_require__(
|
29066
|
+
__webpack_require__(532);
|
29067
29067
|
module.exports = angular;
|
29068
29068
|
|
29069
29069
|
|
29070
29070
|
/***/ }),
|
29071
29071
|
|
29072
|
-
/***/
|
29072
|
+
/***/ 532:
|
29073
29073
|
/***/ (function(module, exports, __webpack_require__) {
|
29074
29074
|
|
29075
29075
|
/* WEBPACK VAR INJECTION */(function(__webpack_provided_window_dot_jQuery) {/**
|
@@ -65676,16 +65676,16 @@ $provide.value("$locale", {
|
|
65676
65676
|
|
65677
65677
|
/***/ }),
|
65678
65678
|
|
65679
|
-
/***/
|
65679
|
+
/***/ 533:
|
65680
65680
|
/***/ (function(module, exports, __webpack_require__) {
|
65681
65681
|
|
65682
|
-
__webpack_require__(
|
65682
|
+
__webpack_require__(534);
|
65683
65683
|
module.exports = 'ngAnimate';
|
65684
65684
|
|
65685
65685
|
|
65686
65686
|
/***/ }),
|
65687
65687
|
|
65688
|
-
/***/
|
65688
|
+
/***/ 534:
|
65689
65689
|
/***/ (function(module, exports) {
|
65690
65690
|
|
65691
65691
|
/**
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import * as Markup from '../../js/react';
|
3
|
-
import { BoxedList, BoxedListItem, BoxedListContentRow, Prop, PropsList, Icon, IconButton, AvatarWrapper, AvatarContentText, ButtonGroup, Button, Heading, Text, Label, Container, IconLabel, SelectGrid, Dropdown } from '../../../app-typescript';
|
3
|
+
import { BoxedList, BoxedListItem, BoxedListContentRow, Prop, PropsList, Icon, IconButton, AvatarWrapper, AvatarContentText, ButtonGroup, Button, Heading, Text, Label, Container, IconLabel, SelectGrid, Dropdown, Tooltip } from '../../../app-typescript';
|
4
4
|
import { TableList, TableListItem } from '../../../app-typescript/components/Lists/TableList';
|
5
5
|
|
6
6
|
interface IState {
|
@@ -23,10 +23,14 @@ export default class TableListDoc extends React.Component<IProps, IState> {
|
|
23
23
|
</>,
|
24
24
|
center: <span>Item 1</span>,
|
25
25
|
end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
|
26
|
-
action: <
|
27
|
-
|
28
|
-
|
29
|
-
|
26
|
+
action: <Dropdown append={true} items={[
|
27
|
+
{ label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
|
28
|
+
{ label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
|
29
|
+
{ label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
|
30
|
+
]}><IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={(e) => e.stopPropagation()} /></Dropdown>,
|
31
|
+
onClick: () => console.log('single'),
|
32
|
+
onDoubleClick: () => console.log('double'),
|
33
|
+
hexColor: '#ccff00'
|
30
34
|
},
|
31
35
|
{
|
32
36
|
start: <>
|
@@ -75,111 +79,6 @@ export default class TableListDoc extends React.Component<IProps, IState> {
|
|
75
79
|
`}
|
76
80
|
</Markup.ReactMarkupCodePreview>
|
77
81
|
|
78
|
-
<p className="docs-page__paragraph">Basic:</p>
|
79
|
-
|
80
|
-
<Markup.ReactMarkup>
|
81
|
-
<Markup.ReactMarkupPreview>
|
82
|
-
|
83
|
-
<TableList>
|
84
|
-
<TableListItem
|
85
|
-
start={
|
86
|
-
<>
|
87
|
-
<Label style='translucent' text='aacc' />
|
88
|
-
<Label style='translucent' type='primary' text='prlg' />
|
89
|
-
</>
|
90
|
-
}
|
91
|
-
center={
|
92
|
-
<span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
|
93
|
-
}
|
94
|
-
end={
|
95
|
-
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
96
|
-
}
|
97
|
-
action={
|
98
|
-
<IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />
|
99
|
-
} />
|
100
|
-
<TableListItem
|
101
|
-
start={
|
102
|
-
<>
|
103
|
-
<Label style='hollow' text='aacc' />
|
104
|
-
<Label style='filled' type='primary' text='prlg' />
|
105
|
-
</>
|
106
|
-
}
|
107
|
-
center={
|
108
|
-
<span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
|
109
|
-
}
|
110
|
-
end={
|
111
|
-
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
112
|
-
} />
|
113
|
-
<TableListItem
|
114
|
-
start={
|
115
|
-
<>
|
116
|
-
<Label style='translucent' text='aacc' />
|
117
|
-
<Label style='translucent' type='primary' text='prlg' />
|
118
|
-
</>
|
119
|
-
}
|
120
|
-
center={
|
121
|
-
<span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
|
122
|
-
}
|
123
|
-
end={
|
124
|
-
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
125
|
-
}
|
126
|
-
action={
|
127
|
-
<IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />
|
128
|
-
} />
|
129
|
-
</TableList>
|
130
|
-
|
131
|
-
</Markup.ReactMarkupPreview>
|
132
|
-
<Markup.ReactMarkupCode>{`
|
133
|
-
<TableList>
|
134
|
-
<TableListItem
|
135
|
-
start={
|
136
|
-
<>
|
137
|
-
<Label style='translucent' text='aacc' />
|
138
|
-
<Label style='translucent' type='primary' text='prlg' />
|
139
|
-
</>
|
140
|
-
}
|
141
|
-
center={
|
142
|
-
<span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
|
143
|
-
}
|
144
|
-
end={
|
145
|
-
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
146
|
-
}
|
147
|
-
action={
|
148
|
-
<IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
|
149
|
-
} />
|
150
|
-
<TableListItem
|
151
|
-
start={
|
152
|
-
<>
|
153
|
-
<Label style='hollow' text='aacc' />
|
154
|
-
<Label style='filled' type='primary' text='prlg' />
|
155
|
-
</>
|
156
|
-
}
|
157
|
-
center={
|
158
|
-
<span>Nullam id dolor id nibh ultricies vehicula ut id elit.</span>
|
159
|
-
}
|
160
|
-
end={
|
161
|
-
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
162
|
-
} />
|
163
|
-
<TableListItem
|
164
|
-
start={
|
165
|
-
<>
|
166
|
-
<Label style='translucent' text='aacc' />
|
167
|
-
<Label style='translucent' type='primary' text='prlg' />
|
168
|
-
</>
|
169
|
-
}
|
170
|
-
center={
|
171
|
-
<span>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</span>
|
172
|
-
}
|
173
|
-
end={
|
174
|
-
<IconLabel style='translucent' text='Label success' type='success' icon='time' />
|
175
|
-
}
|
176
|
-
action={
|
177
|
-
<IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />
|
178
|
-
} />
|
179
|
-
</TableList>
|
180
|
-
`}
|
181
|
-
</Markup.ReactMarkupCode>
|
182
|
-
</Markup.ReactMarkup>
|
183
82
|
<p className="docs-page__paragraph">With drag and drop functionality:</p>
|
184
83
|
<Markup.ReactMarkup>
|
185
84
|
<Markup.ReactMarkupPreview>
|
@@ -187,13 +86,13 @@ export default class TableListDoc extends React.Component<IProps, IState> {
|
|
187
86
|
<TableList
|
188
87
|
dragAndDrop
|
189
88
|
addItem
|
89
|
+
onAddItem={(index, item) => console.log(index, item)}
|
190
90
|
array={this.state.array}
|
191
91
|
itemsDropdown={[
|
192
|
-
{ label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1
|
92
|
+
{ label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1},
|
193
93
|
{ label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
|
194
94
|
{ label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
|
195
95
|
]}
|
196
|
-
onClick={() => false}
|
197
96
|
onDrag={(start, end) => console.log(start, end)}
|
198
97
|
/>
|
199
98
|
|
@@ -223,24 +122,21 @@ export default class TableListDoc extends React.Component<IProps, IState> {
|
|
223
122
|
<Prop name='dragAndDrop' isRequired={false} type='boolean' default='false' description='Drag&Drop functionality.' />
|
224
123
|
<Prop name='itemsDropdown' isRequired={false} type='React.ReactNode | any' default='false' description='Dropdown for functionality to add items to the list.' />
|
225
124
|
<Prop name='className' isRequired={false} type='string' default='false' description='Add class on TableList container.' />
|
125
|
+
<Prop name='showDragHandle' isRequired={false} type='string' default='always' description='' />
|
226
126
|
<Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.' />
|
227
127
|
<Prop name='onDrag' isRequired={false} type='function' default='false' description='Returns start and end position of draggable item' />
|
128
|
+
<Prop name='onAddItem' isRequired={false} type='function' default='false' description='Returns index of draggable item.' />
|
228
129
|
</PropsList>
|
229
130
|
<p className="docs-page__paragraph">array:</p>
|
230
|
-
<PropsList>
|
231
|
-
<Prop name='start' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
|
232
|
-
<Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
|
233
|
-
<Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
|
234
|
-
<Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.' />
|
235
|
-
</PropsList>
|
236
|
-
<p className="docs-page__paragraph">TableListItem</p>
|
237
131
|
<PropsList>
|
238
132
|
<Prop name='start' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
|
239
133
|
<Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
|
240
134
|
<Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
|
241
135
|
<Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.' />
|
242
136
|
<Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.' />
|
137
|
+
<Prop name='onDoubleClick' isRequired={false} type='function' default='false' description='onDoubleClick functionality.' />
|
243
138
|
</PropsList>
|
139
|
+
|
244
140
|
|
245
141
|
</section>
|
246
142
|
)
|
package/package.json
CHANGED
@@ -24,6 +24,7 @@ interface IMenu {
|
|
24
24
|
footer?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
|
25
25
|
append?: boolean;
|
26
26
|
children: React.ReactNode;
|
27
|
+
onChange?(event?: any): void;
|
27
28
|
}
|
28
|
-
export declare const Dropdown: ({ items, header, footer, children, append, align, }: IMenu) => JSX.Element;
|
29
|
+
export declare const Dropdown: ({ items, header, footer, children, append, align, onChange, }: IMenu) => JSX.Element;
|
29
30
|
export {};
|
@@ -25,7 +25,7 @@ var ReactDOM = __importStar(require("react-dom"));
|
|
25
25
|
var core_1 = require("@popperjs/core");
|
26
26
|
var react_id_generator_1 = require("react-id-generator");
|
27
27
|
var Dropdown = function (_a) {
|
28
|
-
var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align;
|
28
|
+
var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, onChange = _a.onChange;
|
29
29
|
var _b = React.useState(false), open = _b[0], setOpen = _b[1];
|
30
30
|
var _c = React.useState(false), change = _c[0], setChange = _c[1];
|
31
31
|
var menuID = (0, react_id_generator_1.useId)()[0];
|
@@ -181,7 +181,7 @@ var Dropdown = function (_a) {
|
|
181
181
|
return (React.createElement("li", { className: "dropdown__menu-divider", key: index }));
|
182
182
|
}
|
183
183
|
else {
|
184
|
-
return (React.createElement(DropdownItem, { key: index, label: item['label'], icon: item['icon'], active: item['active'], onSelect: item['onSelect'] }));
|
184
|
+
return (React.createElement(DropdownItem, { key: index, label: item['label'], icon: item['icon'], active: item['active'], onSelect: item['onSelect'], onChange: onChange }));
|
185
185
|
}
|
186
186
|
}
|
187
187
|
return (React.createElement("div", { className: 'dropdown ' + (open ? 'open' : '') },
|
@@ -223,9 +223,14 @@ var Dropdown = function (_a) {
|
|
223
223
|
};
|
224
224
|
exports.Dropdown = Dropdown;
|
225
225
|
var DropdownItem = function (_a) {
|
226
|
-
var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect;
|
226
|
+
var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect, onChange = _a.onChange;
|
227
227
|
return (React.createElement("li", { role: 'none', className: active ? 'dropdown__menu-item--active' : '' },
|
228
|
-
React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick:
|
228
|
+
React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick: function () {
|
229
|
+
onSelect();
|
230
|
+
if (onChange) {
|
231
|
+
onChange();
|
232
|
+
}
|
233
|
+
} },
|
229
234
|
React.createElement("i", { className: icon ? ('icon-' + icon) : '' }),
|
230
235
|
label)));
|
231
236
|
};
|
@@ -330,6 +330,14 @@ function getDurationString(seconds) {
|
|
330
330
|
var hour = zeroPad(Math.floor(seconds / 3600));
|
331
331
|
var minute = zeroPad(Math.floor((seconds % 3600) / 60));
|
332
332
|
var second = zeroPad(Math.floor(seconds % 60));
|
333
|
-
|
333
|
+
if (Number(hour) === 0 && Number(minute) > 0) {
|
334
|
+
return "".concat(minute, "m ").concat(second, "s");
|
335
|
+
}
|
336
|
+
else if (Number(hour) === 0 && Number(minute) === 0) {
|
337
|
+
return "".concat(second, "s");
|
338
|
+
}
|
339
|
+
else {
|
340
|
+
return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
|
341
|
+
}
|
334
342
|
}
|
335
343
|
exports.getDurationString = getDurationString;
|
@@ -46,7 +46,7 @@ var CoreLayout = /** @class */ (function (_super) {
|
|
46
46
|
return (React.createElement(_1.CoreLayoutContainer, null,
|
47
47
|
this.props.slideInMenu && (React.createElement(_1.CoreLayoutSlideInMenu, { menuId: this.props.menuId, menuOpen: this.props.menuOpen }, this.props.slideInMenu)),
|
48
48
|
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)),
|
49
|
-
React.createElement(_1.CoreLayoutMain,
|
49
|
+
React.createElement(_1.CoreLayoutMain, { editorFullWidth: this.props.editorFullWidth }, this.props.children),
|
50
50
|
this.props.footer && (React.createElement(_1.CoreLayoutFooter, null, this.props.footer)),
|
51
51
|
this.props.overlay && (React.createElement(_1.CoreLayoutOverlay, null, this.props.overlay))));
|
52
52
|
};
|
@@ -33,16 +33,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
33
33
|
__setModuleDefault(result, mod);
|
34
34
|
return result;
|
35
35
|
};
|
36
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
37
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
38
|
+
};
|
36
39
|
Object.defineProperty(exports, "__esModule", { value: true });
|
37
40
|
exports.CoreLayoutMain = void 0;
|
38
41
|
var React = __importStar(require("react"));
|
42
|
+
var classnames_1 = __importDefault(require("classnames"));
|
39
43
|
var CoreLayoutMain = /** @class */ (function (_super) {
|
40
44
|
__extends(CoreLayoutMain, _super);
|
41
45
|
function CoreLayoutMain() {
|
42
46
|
return _super !== null && _super.apply(this, arguments) || this;
|
43
47
|
}
|
44
48
|
CoreLayoutMain.prototype.render = function () {
|
45
|
-
|
49
|
+
var classes = (0, classnames_1.default)('sd-content sd-content-wrapper', {
|
50
|
+
'sd-content-wrapper--editor-full': this.props.editorFullWidth,
|
51
|
+
});
|
52
|
+
return (React.createElement("section", { id: this.props.id, className: classes }, this.props.children));
|
46
53
|
};
|
47
54
|
return CoreLayoutMain;
|
48
55
|
}(React.PureComponent));
|
@@ -2,13 +2,15 @@ import * as React from 'react';
|
|
2
2
|
import { DropResult } from "react-beautiful-dnd";
|
3
3
|
import { IMenuItem, ISubmenu, IMenuGroup } from '../Dropdown';
|
4
4
|
export interface IProps {
|
5
|
-
children?: React.ReactNode;
|
6
5
|
array: Array<IPropsArrayItem>;
|
7
6
|
addItem?: boolean;
|
8
7
|
dragAndDrop?: boolean;
|
9
8
|
itemsDropdown?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
|
10
9
|
className?: string;
|
10
|
+
readOnly?: boolean;
|
11
|
+
showDragHandle?: 'always' | 'onHover' | 'none';
|
11
12
|
onDrag?(start: number, end: number): void;
|
13
|
+
onAddItem?(index: number, item?: IPropsArrayItem): void;
|
12
14
|
}
|
13
15
|
export interface IPropsArrayItem {
|
14
16
|
start?: React.ReactNode;
|
@@ -16,15 +18,19 @@ export interface IPropsArrayItem {
|
|
16
18
|
end?: React.ReactNode;
|
17
19
|
action?: React.ReactNode;
|
18
20
|
onClick?(): void;
|
21
|
+
onDoubleClick?(): void;
|
22
|
+
hexColor?: string;
|
19
23
|
}
|
20
|
-
|
24
|
+
interface IState {
|
21
25
|
items: Array<IPropsArrayItem>;
|
22
|
-
}
|
23
|
-
|
26
|
+
}
|
27
|
+
declare class TableList extends React.PureComponent<IProps, IState> {
|
28
|
+
constructor(props: IProps);
|
24
29
|
componentDidMount(): void;
|
25
|
-
componentDidUpdate(prevProps:
|
30
|
+
componentDidUpdate(prevProps: IProps): void;
|
26
31
|
onDragEnd(result: DropResult): void | null;
|
27
|
-
|
32
|
+
dropDown(): JSX.Element;
|
33
|
+
render(): JSX.Element | null;
|
28
34
|
}
|
29
35
|
export interface IPropsItem {
|
30
36
|
start?: React.ReactNode;
|
@@ -35,8 +41,18 @@ export interface IPropsItem {
|
|
35
41
|
itemsDropdown?: any;
|
36
42
|
dragAndDrop?: boolean;
|
37
43
|
onClick?(): void;
|
44
|
+
onDoubleClick?(): void;
|
45
|
+
onSelect?(): void;
|
46
|
+
onAddItem?(e: number): void;
|
47
|
+
hexColor?: string;
|
48
|
+
showDragHandle?: 'always' | 'onHover' | 'none';
|
38
49
|
}
|
39
50
|
declare class TableListItem extends React.PureComponent<IPropsItem> {
|
51
|
+
private timer;
|
52
|
+
private delay;
|
53
|
+
private prevent;
|
54
|
+
onSingleClick: () => void;
|
55
|
+
onDoubleClick: () => void;
|
40
56
|
render(): JSX.Element;
|
41
57
|
}
|
42
58
|
export { TableList, TableListItem };
|
@@ -69,16 +69,21 @@ var TableList = /** @class */ (function (_super) {
|
|
69
69
|
items: [],
|
70
70
|
};
|
71
71
|
_this.onDragEnd = _this.onDragEnd.bind(_this);
|
72
|
+
_this.dropDown = _this.dropDown.bind(_this);
|
72
73
|
return _this;
|
73
74
|
}
|
74
75
|
TableList.prototype.componentDidMount = function () {
|
75
|
-
|
76
|
+
if (this.props.array) {
|
77
|
+
this.setState({ items: this.props.array });
|
78
|
+
}
|
76
79
|
};
|
77
80
|
TableList.prototype.componentDidUpdate = function (prevProps) {
|
78
|
-
if (
|
79
|
-
this.
|
80
|
-
|
81
|
-
|
81
|
+
if (this.props.array) {
|
82
|
+
if (prevProps.array !== this.props.array) {
|
83
|
+
this.setState({
|
84
|
+
items: this.props.array,
|
85
|
+
});
|
86
|
+
}
|
82
87
|
}
|
83
88
|
};
|
84
89
|
TableList.prototype.onDragEnd = function (result) {
|
@@ -92,24 +97,47 @@ var TableList = /** @class */ (function (_super) {
|
|
92
97
|
return this.props.onDrag ?
|
93
98
|
this.props.onDrag(result.source.index, result.destination.index) : null;
|
94
99
|
};
|
100
|
+
TableList.prototype.dropDown = function () {
|
101
|
+
return (React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
|
102
|
+
React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } })));
|
103
|
+
};
|
95
104
|
TableList.prototype.render = function () {
|
96
105
|
var _a;
|
97
106
|
var _this = this;
|
98
|
-
var classes = (0, classnames_1.default)((_a = {
|
99
|
-
'table-list': !this.props.addItem
|
107
|
+
var classes = (0, classnames_1.default)('', (_a = {
|
108
|
+
'table-list': !this.props.addItem,
|
109
|
+
'table-list--read-only': this.props.readOnly
|
100
110
|
},
|
101
111
|
_a["".concat(this.props.className)] = this.props.className,
|
102
112
|
_a));
|
103
|
-
return (this.
|
104
|
-
this.props.dragAndDrop
|
105
|
-
React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
|
113
|
+
return (this.state.items.length > 0
|
114
|
+
? this.props.dragAndDrop
|
115
|
+
? React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
|
106
116
|
React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable" }, function (provided, _snapshot) { return (React.createElement("ul", __assign({ className: classes, ref: provided.innerRef }, provided.droppableProps),
|
107
117
|
_this.state.items.map(function (item, index) { return (React.createElement(react_beautiful_dnd_1.Draggable, { key: index, draggableId: "".concat(index), index: index }, function (provided2, _snapshot2) { return (React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
|
108
|
-
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,
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
118
|
+
React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
|
119
|
+
? item.onDoubleClick
|
120
|
+
: undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
|
121
|
+
&& _this.props.onAddItem(index, item); }, showDragHandle: _this.props.showDragHandle }))); })); }),
|
122
|
+
provided.placeholder,
|
123
|
+
(_this.props.addItem && !_this.props.readOnly) &&
|
124
|
+
React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
|
125
|
+
React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
|
126
|
+
React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, _this.dropDown()))))); }))
|
127
|
+
: React.createElement("ul", { className: classes },
|
128
|
+
this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
|
129
|
+
? item.onDoubleClick
|
130
|
+
: undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
|
131
|
+
&& _this.props.onAddItem(index, item); } })); }),
|
132
|
+
(this.props.addItem && !this.props.readOnly) &&
|
133
|
+
React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
|
134
|
+
React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
|
135
|
+
React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
|
136
|
+
: (this.props.addItem && !this.props.readOnly) ? React.createElement("ul", { className: classes },
|
137
|
+
React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
|
138
|
+
React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
|
139
|
+
React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
|
140
|
+
: null);
|
113
141
|
};
|
114
142
|
return TableList;
|
115
143
|
}(React.PureComponent));
|
@@ -117,12 +145,42 @@ exports.TableList = TableList;
|
|
117
145
|
var TableListItem = /** @class */ (function (_super) {
|
118
146
|
__extends(TableListItem, _super);
|
119
147
|
function TableListItem() {
|
120
|
-
|
148
|
+
var _this = _super !== null && _super.apply(this, arguments) || this;
|
149
|
+
_this.delay = 200;
|
150
|
+
_this.prevent = false;
|
151
|
+
_this.onSingleClick = function () {
|
152
|
+
_this.timer = setTimeout(function () {
|
153
|
+
if (!_this.prevent) {
|
154
|
+
if (_this.props.onClick) {
|
155
|
+
_this.props.onClick();
|
156
|
+
}
|
157
|
+
}
|
158
|
+
}, _this.delay);
|
159
|
+
};
|
160
|
+
_this.onDoubleClick = function () {
|
161
|
+
clearTimeout(_this.timer);
|
162
|
+
_this.prevent = true;
|
163
|
+
if (_this.props.onDoubleClick) {
|
164
|
+
_this.props.onDoubleClick();
|
165
|
+
}
|
166
|
+
setTimeout(function () {
|
167
|
+
_this.prevent = false;
|
168
|
+
}, _this.delay);
|
169
|
+
};
|
170
|
+
return _this;
|
121
171
|
}
|
122
172
|
TableListItem.prototype.render = function () {
|
173
|
+
var _this = this;
|
174
|
+
var classes = (0, classnames_1.default)('table-list__item', {
|
175
|
+
'table-list__item--clickable': this.props.onClick,
|
176
|
+
'table-list__item--draggable': this.props.dragAndDrop,
|
177
|
+
'table-list__item--drag-handles-always': !this.props.showDragHandle,
|
178
|
+
'table-list__item--drag-handles-none': this.props.showDragHandle === 'none',
|
179
|
+
});
|
123
180
|
return (this.props.addItem ?
|
124
181
|
React.createElement("li", { className: 'table-list__item-container' },
|
125
|
-
React.createElement("div", { onClick:
|
182
|
+
React.createElement("div", { onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); }, className: classes },
|
183
|
+
React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
|
126
184
|
React.createElement("div", { className: 'table-list__item-content' },
|
127
185
|
React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
|
128
186
|
React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' }, this.props.center && this.props.center),
|
@@ -131,9 +189,10 @@ var TableListItem = /** @class */ (function (_super) {
|
|
131
189
|
React.createElement("div", { className: 'table-list__add-bar-container' },
|
132
190
|
React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
|
133
191
|
React.createElement("div", { className: 'table-list__add-bar' },
|
134
|
-
React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown },
|
192
|
+
React.createElement(Dropdown_1.Dropdown, { onChange: this.props.onAddItem, items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
|
135
193
|
React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }))))))
|
136
|
-
: React.createElement("li", { className: "
|
194
|
+
: React.createElement("li", { className: "".concat(classes, " table-list__item--margin"), onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); } },
|
195
|
+
React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
|
137
196
|
React.createElement("div", { className: 'table-list__item-content' },
|
138
197
|
React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
|
139
198
|
React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' }, this.props.center && this.props.center),
|