superdesk-ui-framework 3.0.6 → 3.0.8
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/_sd-tag-input.scss +29 -10
- package/app-typescript/components/Lists/ContentList.tsx +28 -27
- package/app-typescript/components/Lists/TableList.tsx +140 -126
- package/app-typescript/components/MultiSelect.tsx +2 -3
- package/app-typescript/components/SingleAndDoubleClickFunction.tsx +21 -0
- package/app-typescript/components/TreeSelect.tsx +506 -243
- package/dist/examples.bundle.js +1468 -1186
- package/dist/playgrounds/react-playgrounds/EditorTest.tsx +18 -10
- package/dist/playgrounds/react-playgrounds/Multiedit.tsx +15 -13
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +136 -125
- package/dist/react/Dropdowns.tsx +134 -85
- package/dist/react/MultiSelect.tsx +2 -2
- package/dist/react/TreeSelect.tsx +39 -27
- package/dist/superdesk-ui.bundle.css +26 -9
- package/dist/superdesk-ui.bundle.js +1015 -809
- package/dist/vendor.bundle.js +14 -14
- package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +18 -10
- package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +15 -13
- package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +136 -125
- package/examples/pages/react/Dropdowns.tsx +134 -85
- package/examples/pages/react/MultiSelect.tsx +2 -2
- package/examples/pages/react/TreeSelect.tsx +39 -27
- package/package.json +2 -2
- package/react/components/Lists/ContentList.d.ts +2 -5
- package/react/components/Lists/ContentList.js +20 -25
- package/react/components/Lists/TableList.d.ts +4 -7
- package/react/components/Lists/TableList.js +66 -60
- package/react/components/MultiSelect.d.ts +1 -1
- package/react/components/MultiSelect.js +1 -1
- package/react/components/SingleAndDoubleClickFunction.d.ts +6 -0
- package/react/components/SingleAndDoubleClickFunction.js +19 -0
- package/react/components/TreeSelect.d.ts +17 -9
- package/react/components/TreeSelect.js +249 -74
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 = 538);
|
|
74
74
|
/******/ })
|
|
75
75
|
/************************************************************************/
|
|
76
76
|
/******/ ({
|
|
@@ -28246,7 +28246,7 @@ module.exports = function(module) {
|
|
|
28246
28246
|
|
|
28247
28247
|
/***/ }),
|
|
28248
28248
|
|
|
28249
|
-
/***/
|
|
28249
|
+
/***/ 538:
|
|
28250
28250
|
/***/ (function(module, exports, __webpack_require__) {
|
|
28251
28251
|
|
|
28252
28252
|
"use strict";
|
|
@@ -28256,11 +28256,11 @@ __webpack_require__(34);
|
|
|
28256
28256
|
|
|
28257
28257
|
__webpack_require__(42);
|
|
28258
28258
|
|
|
28259
|
-
__webpack_require__(
|
|
28259
|
+
__webpack_require__(539);
|
|
28260
28260
|
|
|
28261
|
-
__webpack_require__(
|
|
28261
|
+
__webpack_require__(541);
|
|
28262
28262
|
|
|
28263
|
-
__webpack_require__(
|
|
28263
|
+
__webpack_require__(543);
|
|
28264
28264
|
|
|
28265
28265
|
__webpack_require__(0);
|
|
28266
28266
|
|
|
@@ -28268,7 +28268,7 @@ __webpack_require__(8);
|
|
|
28268
28268
|
|
|
28269
28269
|
/***/ }),
|
|
28270
28270
|
|
|
28271
|
-
/***/
|
|
28271
|
+
/***/ 539:
|
|
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__(42), __webpack_require__(
|
|
28295
|
+
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(42), __webpack_require__(540) ], __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
|
+
/***/ 540:
|
|
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
|
+
/***/ 541:
|
|
29064
29064
|
/***/ (function(module, exports, __webpack_require__) {
|
|
29065
29065
|
|
|
29066
|
-
__webpack_require__(
|
|
29066
|
+
__webpack_require__(542);
|
|
29067
29067
|
module.exports = angular;
|
|
29068
29068
|
|
|
29069
29069
|
|
|
29070
29070
|
/***/ }),
|
|
29071
29071
|
|
|
29072
|
-
/***/
|
|
29072
|
+
/***/ 542:
|
|
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
|
+
/***/ 543:
|
|
65680
65680
|
/***/ (function(module, exports, __webpack_require__) {
|
|
65681
65681
|
|
|
65682
|
-
__webpack_require__(
|
|
65682
|
+
__webpack_require__(544);
|
|
65683
65683
|
module.exports = 'ngAnimate';
|
|
65684
65684
|
|
|
65685
65685
|
|
|
65686
65686
|
/***/ }),
|
|
65687
65687
|
|
|
65688
|
-
/***/
|
|
65688
|
+
/***/ 544:
|
|
65689
65689
|
/***/ (function(module, exports) {
|
|
65690
65690
|
|
|
65691
65691
|
/**
|
|
@@ -25,6 +25,7 @@ interface IState {
|
|
|
25
25
|
rightPanelOpen: boolean;
|
|
26
26
|
rightPanelPinned: boolean;
|
|
27
27
|
sideOverlayOpen: boolean;
|
|
28
|
+
activeTab: string | null;
|
|
28
29
|
}
|
|
29
30
|
|
|
30
31
|
export class EditorTest extends React.Component<IProps, IState> {
|
|
@@ -44,6 +45,7 @@ export class EditorTest extends React.Component<IProps, IState> {
|
|
|
44
45
|
rightPanelOpen: false,
|
|
45
46
|
rightPanelPinned: false,
|
|
46
47
|
sideOverlayOpen: false,
|
|
48
|
+
activeTab: null,
|
|
47
49
|
|
|
48
50
|
}
|
|
49
51
|
this.handleTheme = this.handleTheme.bind(this);
|
|
@@ -441,16 +443,22 @@ export class EditorTest extends React.Component<IProps, IState> {
|
|
|
441
443
|
)}
|
|
442
444
|
sideBar={(
|
|
443
445
|
<Nav.SideBarTabs
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
446
|
+
items={[
|
|
447
|
+
{ icon: 'info', size: 'big', tooltip: 'Info', id: '1' },
|
|
448
|
+
{ icon: 'chat', size: 'big', tooltip: 'Comments', id: '2' },
|
|
449
|
+
{ icon: 'history', size: 'big', tooltip: 'History', id: '3' },
|
|
450
|
+
{ icon: 'package', size: 'big', tooltip: 'Packages', id: '4' },
|
|
451
|
+
{ icon: 'attachment', size: 'big', tooltip: 'Attachments', id: '5' },
|
|
452
|
+
{ icon: 'comments', size: 'big', tooltip: 'Inline Comments', id: '6' },
|
|
453
|
+
{ icon: 'suggestion', size: 'big', tooltip: 'Suggestions', id: '7' }
|
|
454
|
+
]}
|
|
455
|
+
activeTab={this.state.activeTab}
|
|
456
|
+
onActiveTabChange={(val) => {
|
|
457
|
+
this.setState({
|
|
458
|
+
activeTab: val,
|
|
459
|
+
sideOverlayOpen: !this.state.sideOverlayOpen,
|
|
460
|
+
});
|
|
461
|
+
}}
|
|
454
462
|
/>
|
|
455
463
|
)}
|
|
456
464
|
overlayPanel={(
|
|
@@ -308,19 +308,21 @@ export class Editor extends React.Component<{}, IEditor> {
|
|
|
308
308
|
sideBarClosed={this.state.sideBarOpen}
|
|
309
309
|
sideBar={(
|
|
310
310
|
<Nav.SideBarTabs
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
311
|
+
items={[
|
|
312
|
+
{ icon: 'info', size: 'big', tooltip: 'Info', id: '1' },
|
|
313
|
+
{ icon: 'chat', size: 'big', tooltip: 'Comments', id: '2' },
|
|
314
|
+
{ icon: 'history', size: 'big', tooltip: 'History', id: '3' },
|
|
315
|
+
{ icon: 'package', size: 'big', tooltip: 'Packages', id: '4' },
|
|
316
|
+
{ icon: 'attachment', size: 'big', tooltip: 'Attachments', id: '5'},
|
|
317
|
+
{ icon: 'comments', size: 'big', tooltip: 'Inline Comments', id: '6' },
|
|
318
|
+
{ icon: 'suggestion', size: 'big', tooltip: 'Suggestions', id: '7' }
|
|
319
|
+
]}
|
|
320
|
+
activeTab={this.state.activeTab}
|
|
321
|
+
onActiveTabChange={(val) => {
|
|
322
|
+
this.setState({
|
|
323
|
+
activeTab: val,
|
|
324
|
+
})
|
|
325
|
+
}}
|
|
324
326
|
/>
|
|
325
327
|
)}
|
|
326
328
|
/>
|
|
@@ -28,6 +28,7 @@ interface IState {
|
|
|
28
28
|
sideOverlayOpen: boolean;
|
|
29
29
|
array: any;
|
|
30
30
|
inputValue: string;
|
|
31
|
+
activeTab: string | null;
|
|
31
32
|
}
|
|
32
33
|
|
|
33
34
|
export class RundownEditor extends React.Component<IProps, IState> {
|
|
@@ -114,7 +115,8 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
|
114
115
|
action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
|
|
115
116
|
onClick: () => { this.props.openPanel() }
|
|
116
117
|
},
|
|
117
|
-
]
|
|
118
|
+
],
|
|
119
|
+
activeTab: null,
|
|
118
120
|
}
|
|
119
121
|
this.handleTheme = this.handleTheme.bind(this);
|
|
120
122
|
}
|
|
@@ -135,14 +137,14 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
|
135
137
|
render() {
|
|
136
138
|
return (
|
|
137
139
|
<Layout.LayoutContainer>
|
|
138
|
-
<Layout.HeaderPanel>
|
|
140
|
+
<Layout.HeaderPanel>
|
|
139
141
|
<SubNav>
|
|
140
142
|
<ButtonGroup align='end'>
|
|
141
143
|
<Button text="Cancel" onClick={()=> false} type="default" />
|
|
142
144
|
<Button text="Save Rundown" onClick={()=> false} type="primary" />
|
|
143
145
|
<Divider size="mini" />
|
|
144
146
|
<ButtonGroup subgroup={true} spaces="no-space">
|
|
145
|
-
|
|
147
|
+
|
|
146
148
|
<Tooltip text='Minimize' flow='left'>
|
|
147
149
|
<NavButton type='default' icon='minimize' iconSize='big' text='Minimize' onClick={()=> false} />
|
|
148
150
|
</Tooltip>
|
|
@@ -156,7 +158,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
|
156
158
|
</ButtonGroup>
|
|
157
159
|
</SubNav>
|
|
158
160
|
</Layout.HeaderPanel>
|
|
159
|
-
|
|
161
|
+
|
|
160
162
|
<Layout.MainPanel padding='none'>
|
|
161
163
|
<Layout.AuthoringMain
|
|
162
164
|
headerPadding='medium'
|
|
@@ -233,7 +235,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
|
233
235
|
required={false}
|
|
234
236
|
disabled={false}
|
|
235
237
|
invalid={false}
|
|
236
|
-
onChange={(value) => {}} />
|
|
238
|
+
onChange={(value) => {}} />
|
|
237
239
|
</Form.FormItem>
|
|
238
240
|
<Form.FormItem>
|
|
239
241
|
<Input
|
|
@@ -245,7 +247,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
|
245
247
|
required={false}
|
|
246
248
|
disabled={false}
|
|
247
249
|
invalid={false}
|
|
248
|
-
onChange={(value) => {}} />
|
|
250
|
+
onChange={(value) => {}} />
|
|
249
251
|
</Form.FormItem>
|
|
250
252
|
</Form.FormGroup>
|
|
251
253
|
<Form.FormGroup>
|
|
@@ -300,7 +302,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
|
300
302
|
)}
|
|
301
303
|
>
|
|
302
304
|
<Container direction='column' className='sd-margin-y--2'>
|
|
303
|
-
<Input
|
|
305
|
+
<Input
|
|
304
306
|
label='Rundown title'
|
|
305
307
|
value={'Marker // 01.06.2022'}
|
|
306
308
|
boxedStyle={true}
|
|
@@ -338,133 +340,142 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
|
338
340
|
<Layout.PanelContent>
|
|
339
341
|
<Layout.AuthoringFrame
|
|
340
342
|
main={
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
343
|
+
<Layout.AuthoringMain
|
|
344
|
+
headerPadding='medium'
|
|
345
|
+
toolbarCustom={true}
|
|
346
|
+
headerCollapsed={true}
|
|
347
|
+
toolBar={(
|
|
348
|
+
<React.Fragment>
|
|
349
|
+
<SubNav className='sd-shadow--z0'>
|
|
350
|
+
<SlidingToolbar>
|
|
351
|
+
<ButtonGroup align='start'>
|
|
352
|
+
<IconButton ariaValue="Close" icon="close-small" onClick={() => this.props.closePanel()} />
|
|
353
|
+
</ButtonGroup>
|
|
354
|
+
<ButtonGroup align='end'>
|
|
355
|
+
<Button text="Save Changes" style='hollow' onClick={() => this.props.closePanel()} type="primary" />
|
|
356
|
+
</ButtonGroup>
|
|
357
|
+
</SlidingToolbar>
|
|
358
|
+
</SubNav>
|
|
357
359
|
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
360
|
+
<div className='sd-editor-content__toolbar-inner'>
|
|
361
|
+
<div className="sd-editor-toolbar__content">
|
|
362
|
+
<dl>
|
|
363
|
+
<dt>Created</dt>
|
|
364
|
+
<dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
|
|
365
|
+
<dt>by</dt>
|
|
366
|
+
<dt>Nareg Asmarian</dt>
|
|
367
|
+
</dl>
|
|
368
|
+
<dl>
|
|
369
|
+
<dt>Modified</dt>
|
|
370
|
+
<dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
|
|
371
|
+
</dl>
|
|
372
|
+
</div>
|
|
370
373
|
</div>
|
|
371
|
-
</
|
|
372
|
-
|
|
373
|
-
)}
|
|
374
|
-
authoringHeader={(
|
|
375
|
-
<React.Fragment>
|
|
376
|
-
<Form.FormGroup inlineLabel={false}>
|
|
377
|
-
<Form.FormItem>
|
|
378
|
-
<Select
|
|
379
|
-
label='Type'
|
|
380
|
-
value='Type value'
|
|
381
|
-
error='This is error message'
|
|
382
|
-
info=' '
|
|
383
|
-
required={true}
|
|
384
|
-
disabled={false}
|
|
385
|
-
invalid={false}
|
|
386
|
-
onChange={(value) => {}}>
|
|
387
|
-
<Option>Type 1</Option>
|
|
388
|
-
<Option>Type 2</Option>
|
|
389
|
-
</Select>
|
|
390
|
-
</Form.FormItem>
|
|
391
|
-
<Form.FormItem>
|
|
392
|
-
<Select
|
|
393
|
-
label='Show section'
|
|
394
|
-
value='Some value'
|
|
395
|
-
error='This is error message'
|
|
396
|
-
info=' '
|
|
397
|
-
required={true}
|
|
398
|
-
disabled={false}
|
|
399
|
-
invalid={false}
|
|
400
|
-
onChange={(value) => {}}>
|
|
401
|
-
<Option>Section 1</Option>
|
|
402
|
-
<Option>Section 2</Option>
|
|
403
|
-
</Select>
|
|
404
|
-
</Form.FormItem>
|
|
405
|
-
</Form.FormGroup>
|
|
406
|
-
<Form.FormGroup inlineLabel={false}>
|
|
407
|
-
<Form.FormItem>
|
|
408
|
-
<Select
|
|
409
|
-
label='Duration'
|
|
410
|
-
value='Some value'
|
|
411
|
-
error='This is error message'
|
|
412
|
-
info=' '
|
|
413
|
-
required={true}
|
|
414
|
-
disabled={false}
|
|
415
|
-
invalid={false}
|
|
416
|
-
onChange={(value) => {}}>
|
|
417
|
-
<Option>Option 1</Option>
|
|
418
|
-
<Option>Option 2</Option>
|
|
419
|
-
</Select>
|
|
420
|
-
</Form.FormItem>
|
|
421
|
-
<Form.FormItem>
|
|
422
|
-
<Input
|
|
423
|
-
type='text'
|
|
424
|
-
label='Category'
|
|
425
|
-
value=' '
|
|
426
|
-
error='This is error message'
|
|
427
|
-
info=' '
|
|
428
|
-
required={false}
|
|
429
|
-
disabled={false}
|
|
430
|
-
invalid={false}
|
|
431
|
-
onChange={(value) => {}} />
|
|
432
|
-
</Form.FormItem>
|
|
433
|
-
</Form.FormGroup>
|
|
434
|
-
<Form.FormGroup inlineLabel={false}>
|
|
435
|
-
<Form.FormItem>
|
|
436
|
-
<Input
|
|
437
|
-
type='text'
|
|
438
|
-
label='Author'
|
|
439
|
-
value='This is some value'
|
|
440
|
-
error='This is error message'
|
|
441
|
-
info=' '
|
|
442
|
-
required={false}
|
|
443
|
-
disabled={false}
|
|
444
|
-
invalid={false}
|
|
445
|
-
onChange={(value) => {}} />
|
|
446
|
-
</Form.FormItem>
|
|
447
|
-
</Form.FormGroup>
|
|
448
|
-
</React.Fragment>
|
|
449
|
-
)}
|
|
450
|
-
>
|
|
374
|
+
</React.Fragment>
|
|
375
|
+
)}
|
|
451
376
|
|
|
452
|
-
|
|
377
|
+
authoringHeader={(
|
|
378
|
+
<React.Fragment>
|
|
379
|
+
<Form.FormGroup inlineLabel={false}>
|
|
380
|
+
<Form.FormItem>
|
|
381
|
+
<Select
|
|
382
|
+
label='Type'
|
|
383
|
+
value='Type value'
|
|
384
|
+
error='This is error message'
|
|
385
|
+
info=' '
|
|
386
|
+
required={true}
|
|
387
|
+
disabled={false}
|
|
388
|
+
invalid={false}
|
|
389
|
+
onChange={(value) => {}}>
|
|
390
|
+
<Option>Type 1</Option>
|
|
391
|
+
<Option>Type 2</Option>
|
|
392
|
+
</Select>
|
|
393
|
+
</Form.FormItem>
|
|
394
|
+
<Form.FormItem>
|
|
395
|
+
<Select
|
|
396
|
+
label='Show section'
|
|
397
|
+
value='Some value'
|
|
398
|
+
error='This is error message'
|
|
399
|
+
info=' '
|
|
400
|
+
required={true}
|
|
401
|
+
disabled={false}
|
|
402
|
+
invalid={false}
|
|
403
|
+
onChange={(value) => {}}>
|
|
404
|
+
<Option>Section 1</Option>
|
|
405
|
+
<Option>Section 2</Option>
|
|
406
|
+
</Select>
|
|
407
|
+
</Form.FormItem>
|
|
408
|
+
</Form.FormGroup>
|
|
409
|
+
<Form.FormGroup inlineLabel={false}>
|
|
410
|
+
<Form.FormItem>
|
|
411
|
+
<Select
|
|
412
|
+
label='Duration'
|
|
413
|
+
value='Some value'
|
|
414
|
+
error='This is error message'
|
|
415
|
+
info=' '
|
|
416
|
+
required={true}
|
|
417
|
+
disabled={false}
|
|
418
|
+
invalid={false}
|
|
419
|
+
onChange={(value) => {}}>
|
|
420
|
+
<Option>Option 1</Option>
|
|
421
|
+
<Option>Option 2</Option>
|
|
422
|
+
</Select>
|
|
423
|
+
</Form.FormItem>
|
|
424
|
+
<Form.FormItem>
|
|
425
|
+
<Input
|
|
426
|
+
type='text'
|
|
427
|
+
label='Category'
|
|
428
|
+
value=' '
|
|
429
|
+
error='This is error message'
|
|
430
|
+
info=' '
|
|
431
|
+
required={false}
|
|
432
|
+
disabled={false}
|
|
433
|
+
invalid={false}
|
|
434
|
+
onChange={(value) => {}} />
|
|
435
|
+
</Form.FormItem>
|
|
436
|
+
</Form.FormGroup>
|
|
437
|
+
<Form.FormGroup inlineLabel={false}>
|
|
438
|
+
<Form.FormItem>
|
|
439
|
+
<Input
|
|
440
|
+
type='text'
|
|
441
|
+
label='Author'
|
|
442
|
+
value='This is some value'
|
|
443
|
+
error='This is error message'
|
|
444
|
+
info=' '
|
|
445
|
+
required={false}
|
|
446
|
+
disabled={false}
|
|
447
|
+
invalid={false}
|
|
448
|
+
onChange={(value) => {}} />
|
|
449
|
+
</Form.FormItem>
|
|
450
|
+
</Form.FormGroup>
|
|
451
|
+
</React.Fragment>
|
|
452
|
+
)}
|
|
453
|
+
>
|
|
454
|
+
</Layout.AuthoringMain>
|
|
453
455
|
}
|
|
456
|
+
|
|
454
457
|
sideBar={(
|
|
455
458
|
<Nav.SideBarTabs
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
459
|
+
items={[
|
|
460
|
+
{ icon: 'info', size: 'big', tooltip: 'Info', id: '1' },
|
|
461
|
+
{ icon: 'chat', size: 'big', tooltip: 'Comments', id: '2' },
|
|
462
|
+
{ icon: 'history', size: 'big', tooltip: 'History', id: '3' },
|
|
463
|
+
{ icon: 'package', size: 'big', tooltip: 'Packages', id: '4' },
|
|
464
|
+
{ icon: 'attachment', size: 'big', tooltip: 'Attachments', id: '5' },
|
|
465
|
+
{ icon: 'comments', size: 'big', tooltip: 'Inline Comments', badgeValue: '5', id: '6' },
|
|
466
|
+
{ icon: 'suggestion', size: 'big', tooltip: 'Suggestions', id: '7' }
|
|
467
|
+
]}
|
|
468
|
+
activeTab={this.state.activeTab}
|
|
469
|
+
onActiveTabChange={(id) => {
|
|
470
|
+
this.setState({
|
|
471
|
+
activeTab: id,
|
|
472
|
+
})
|
|
473
|
+
}}
|
|
474
|
+
/>
|
|
464
475
|
)}
|
|
465
476
|
/>
|
|
466
477
|
</Layout.PanelContent>
|
|
467
|
-
</Layout.Panel>
|
|
478
|
+
</Layout.Panel>
|
|
468
479
|
</Layout.RightPanel>
|
|
469
480
|
</Layout.LayoutContainer>
|
|
470
481
|
);
|