superdesk-ui-framework 3.1.20 → 3.1.22
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/_animations.scss +21 -0
- package/app/styles/_helpers.scss +1 -1
- package/app/styles/components/_list-item.scss +3 -0
- package/app/styles/components/_sd-collapse-box.scss +32 -0
- package/app/styles/primereact/_pr-datepicker.scss +10 -0
- package/dist/examples.bundle.js +231 -1
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +499 -4
- package/dist/superdesk-ui.bundle.css +48 -6
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +499 -4
- package/package.json +8 -6
|
@@ -2,6 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import * as Components from './components/Index';
|
|
3
3
|
import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, TreeSelect, DatePicker, ContentDivider, Select, Option, AvatarGroup, Avatar, SvgIconIllustration, IllustrationButton, SubNav, NavButton, } from '../../../../app-typescript/index';
|
|
4
4
|
import { IAvatarInGroup } from '../../../../app-typescript/components/avatar/avatar-group';
|
|
5
|
+
import * as Form from '../../../../app-typescript/components/Form';
|
|
5
6
|
import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
|
|
6
7
|
|
|
7
8
|
interface IProps {
|
|
@@ -36,6 +37,8 @@ interface IState {
|
|
|
36
37
|
openCollapsibleOne: boolean;
|
|
37
38
|
openCollapsibleTwo: boolean;
|
|
38
39
|
openCollapsibleThree: boolean;
|
|
40
|
+
openCollapsibleFour: boolean;
|
|
41
|
+
openCollapsibleFive: boolean;
|
|
39
42
|
}
|
|
40
43
|
|
|
41
44
|
let options2 = [
|
|
@@ -49,6 +52,29 @@ let options2 = [
|
|
|
49
52
|
value: {name: 'Category3'},
|
|
50
53
|
},
|
|
51
54
|
]
|
|
55
|
+
let options3 = [
|
|
56
|
+
{
|
|
57
|
+
value: {name: 'Norvegian'},
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
value: {name: 'Suomi'},
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
value: {name: 'English'},
|
|
64
|
+
},
|
|
65
|
+
]
|
|
66
|
+
let options4 = [
|
|
67
|
+
{
|
|
68
|
+
value: {name: 'Turku, Finland'},
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
value: {name: 'Helsinki, Finland'},
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
value: {name: 'Rovaniemi, Finland'},
|
|
75
|
+
},
|
|
76
|
+
]
|
|
77
|
+
|
|
52
78
|
|
|
53
79
|
export class TestGround extends React.Component<IProps, IState> {
|
|
54
80
|
constructor(props: IProps) {
|
|
@@ -81,6 +107,8 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
81
107
|
openCollapsibleOne: false,
|
|
82
108
|
openCollapsibleTwo: false,
|
|
83
109
|
openCollapsibleThree: false,
|
|
110
|
+
openCollapsibleFour: false,
|
|
111
|
+
openCollapsibleFive: false,
|
|
84
112
|
}
|
|
85
113
|
}
|
|
86
114
|
|
|
@@ -165,6 +193,473 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
165
193
|
<IconButton icon="adjust" ariaValue="Toggle theme" onClick={this.toggleTheme} toolTipFlow='left' />
|
|
166
194
|
</ButtonGroup>
|
|
167
195
|
|
|
196
|
+
<div style={{maxWidth: '600px'}} className={`sd-shadow--z1 new-collapse-box ${this.state.openCollapsibleFour ? 'new-collapse-box--open' : ''}`}>
|
|
197
|
+
{/* Header */}
|
|
198
|
+
<div className='new-collapse-box__header'>
|
|
199
|
+
<div className='new-collapse-box__header-inner'>
|
|
200
|
+
<div role="listitem" className="sd-list-item sd-list-item--no-hover">
|
|
201
|
+
<div className="sd-list-item__border sd-list-item__border--locked"></div>
|
|
202
|
+
<div className="sd-list-item__column sd-list-item__column--no-border pe-0-5">
|
|
203
|
+
<Icon type='primary' name='calendar' scale='1.5x' ariaHidden={true} />
|
|
204
|
+
</div>
|
|
205
|
+
<div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border pe-1">
|
|
206
|
+
<div className="sd-list-item__row">
|
|
207
|
+
<span className="sd-list-item__slugline">Planning Slug</span>
|
|
208
|
+
<span className="sd-overflow-ellipsis sd-list-item--element-grow">
|
|
209
|
+
<span className="sd-list-item__text-strong">Cras justo odio, dapibus ac facilisis in.</span>
|
|
210
|
+
</span>
|
|
211
|
+
</div>
|
|
212
|
+
<div className="sd-list-item__row sd-list-item__row--overflow-visible me-1 mb-1-5">
|
|
213
|
+
<Label text='draft' style='translucent'/>
|
|
214
|
+
<span className="sd-margin-s--auto">
|
|
215
|
+
<AvatarGroup
|
|
216
|
+
size="x-small"
|
|
217
|
+
items={avatars}
|
|
218
|
+
/>
|
|
219
|
+
</span>
|
|
220
|
+
</div>
|
|
221
|
+
</div>
|
|
222
|
+
<div className="sd-list-item__action-menu sd-list-item__action-menu--direction-row ps-0">
|
|
223
|
+
<ButtonGroup orientation='vertical' spaces='compact'>
|
|
224
|
+
<IconButton size='small' icon='external' ariaValue='Open in modal' onClick={()=> false} />
|
|
225
|
+
<IconButton size='small' icon='trash' ariaValue='Delete Coverage' onClick={()=> false} />
|
|
226
|
+
</ButtonGroup>
|
|
227
|
+
</div>
|
|
228
|
+
</div>
|
|
229
|
+
</div>
|
|
230
|
+
<button className='new-collapse-box__divider' onClick={() => this.setState(prevState => ({openCollapsibleFour: !prevState.openCollapsibleFour}))}>
|
|
231
|
+
<span className='label label--translucent new-collapse-box__divider-label'>
|
|
232
|
+
{this.state.openCollapsibleFour ? 'Show less' : 'Show more'}
|
|
233
|
+
</span>
|
|
234
|
+
</button>
|
|
235
|
+
</div>
|
|
236
|
+
|
|
237
|
+
{/* Content */}
|
|
238
|
+
<div className='new-collapse-box__content'>
|
|
239
|
+
<div className='new-collapse-box__content-inner p-2 pt-0-5'>
|
|
240
|
+
<Form.FormGroup>
|
|
241
|
+
<Form.FormItem>
|
|
242
|
+
<TreeSelect
|
|
243
|
+
kind={'synchronous'}
|
|
244
|
+
value={this.state.treeSelectValue}
|
|
245
|
+
getOptions={() => options3}
|
|
246
|
+
getLabel={(item) => item.name}
|
|
247
|
+
getId={(item) => item.name}
|
|
248
|
+
allowMultiple
|
|
249
|
+
sortable
|
|
250
|
+
required
|
|
251
|
+
label='Language'
|
|
252
|
+
onChange={() => false}
|
|
253
|
+
placeholder='Add language'
|
|
254
|
+
width='medium'
|
|
255
|
+
>
|
|
256
|
+
</TreeSelect>
|
|
257
|
+
</Form.FormItem>
|
|
258
|
+
</Form.FormGroup>
|
|
259
|
+
<Form.FormGroup>
|
|
260
|
+
<Form.FormItem>
|
|
261
|
+
<DatePicker
|
|
262
|
+
value={this.state.date}
|
|
263
|
+
dateFormat="YYYY-MM-DD"
|
|
264
|
+
onChange={(date) => {
|
|
265
|
+
this.setState({date});
|
|
266
|
+
}}
|
|
267
|
+
label='Planning date'
|
|
268
|
+
/>
|
|
269
|
+
</Form.FormItem>
|
|
270
|
+
<Form.FormItem>
|
|
271
|
+
<TimePicker
|
|
272
|
+
value={this.state.time}
|
|
273
|
+
onChange={(time) => {
|
|
274
|
+
this.setState({time});
|
|
275
|
+
}}
|
|
276
|
+
allowSeconds
|
|
277
|
+
label='Planning time'
|
|
278
|
+
labelHidden
|
|
279
|
+
/>
|
|
280
|
+
</Form.FormItem>
|
|
281
|
+
</Form.FormGroup>
|
|
282
|
+
<Form.FormGroup>
|
|
283
|
+
<Form.FormItem>
|
|
284
|
+
<Input
|
|
285
|
+
label='Slugline'
|
|
286
|
+
value={''}
|
|
287
|
+
type='text'
|
|
288
|
+
tabindex={0}
|
|
289
|
+
onChange={(value) => this.setState({value: value})}
|
|
290
|
+
/>
|
|
291
|
+
</Form.FormItem>
|
|
292
|
+
</Form.FormGroup>
|
|
293
|
+
<Form.FormGroup>
|
|
294
|
+
<Form.FormItem>
|
|
295
|
+
<Input
|
|
296
|
+
label='Name'
|
|
297
|
+
value={''}
|
|
298
|
+
type='text'
|
|
299
|
+
tabindex={0}
|
|
300
|
+
onChange={(value) => this.setState({value: value})}
|
|
301
|
+
/>
|
|
302
|
+
</Form.FormItem>
|
|
303
|
+
</Form.FormGroup>
|
|
304
|
+
<Form.FormGroup>
|
|
305
|
+
<Form.FormItem>
|
|
306
|
+
<Input
|
|
307
|
+
label='Headline'
|
|
308
|
+
value={''}
|
|
309
|
+
type='text'
|
|
310
|
+
tabindex={0}
|
|
311
|
+
onChange={(value) => this.setState({value: value})}
|
|
312
|
+
/>
|
|
313
|
+
</Form.FormItem>
|
|
314
|
+
</Form.FormGroup>
|
|
315
|
+
<Form.FormGroup>
|
|
316
|
+
<Form.FormItem>
|
|
317
|
+
<Select
|
|
318
|
+
value={this.state.value}
|
|
319
|
+
label='Priority'
|
|
320
|
+
onChange={(value) => {
|
|
321
|
+
this.setState({
|
|
322
|
+
value: value,
|
|
323
|
+
})
|
|
324
|
+
}}
|
|
325
|
+
>
|
|
326
|
+
<Option>None</Option>
|
|
327
|
+
<Option>1</Option>
|
|
328
|
+
<Option>2</Option>
|
|
329
|
+
<Option>3</Option>
|
|
330
|
+
<Option>4</Option>
|
|
331
|
+
<Option>5</Option>
|
|
332
|
+
<Option>6</Option>
|
|
333
|
+
</Select>
|
|
334
|
+
</Form.FormItem>
|
|
335
|
+
</Form.FormGroup>
|
|
336
|
+
<Form.FormGroup>
|
|
337
|
+
<Form.FormItem>
|
|
338
|
+
<TreeSelect
|
|
339
|
+
kind={'synchronous'}
|
|
340
|
+
value={this.state.treeSelectValue}
|
|
341
|
+
getOptions={() => options4}
|
|
342
|
+
getLabel={(item) => item.name}
|
|
343
|
+
getId={(item) => item.name}
|
|
344
|
+
label='Place'
|
|
345
|
+
onChange={() => false}
|
|
346
|
+
placeholder='Select place'
|
|
347
|
+
width='match-input'
|
|
348
|
+
>
|
|
349
|
+
</TreeSelect>
|
|
350
|
+
</Form.FormItem>
|
|
351
|
+
</Form.FormGroup>
|
|
352
|
+
<Form.FormGroup>
|
|
353
|
+
<Form.FormItem>
|
|
354
|
+
<Input
|
|
355
|
+
label='Description'
|
|
356
|
+
value={''}
|
|
357
|
+
type='text'
|
|
358
|
+
tabindex={0}
|
|
359
|
+
onChange={(value) => this.setState({value: value})}
|
|
360
|
+
/>
|
|
361
|
+
</Form.FormItem>
|
|
362
|
+
</Form.FormGroup>
|
|
363
|
+
<Form.FormGroup>
|
|
364
|
+
<Form.FormItem>
|
|
365
|
+
<Input
|
|
366
|
+
label='Internal note'
|
|
367
|
+
value={''}
|
|
368
|
+
type='text'
|
|
369
|
+
tabindex={0}
|
|
370
|
+
onChange={(value) => this.setState({value: value})}
|
|
371
|
+
/>
|
|
372
|
+
</Form.FormItem>
|
|
373
|
+
</Form.FormGroup>
|
|
374
|
+
<div className='d-flex items-center justify-between mb-1-5'>
|
|
375
|
+
<Heading type='h4'>Coverages</Heading>
|
|
376
|
+
<Button type="primary" icon="plus-large" text="plus-large" size='small' shape="round" iconOnly={true} onClick={()=> false} />
|
|
377
|
+
</div>
|
|
378
|
+
<div className='sd-border--medium border-dashed p-1-5 radius-md d-flex items-center justify-center'>
|
|
379
|
+
<span className='text-sm text-color-subdued'>No Coverages yet</span>
|
|
380
|
+
</div>
|
|
381
|
+
|
|
382
|
+
{/* <ContentDivider type="dashed" margin='x-small' /> */}
|
|
383
|
+
|
|
384
|
+
{/* NESTED BOX */}
|
|
385
|
+
<div className={`sd-shadow--z1 new-collapse-box ${this.state.openCollapsibleFive ? 'new-collapse-box--open' : ''}`}>
|
|
386
|
+
{/* Header */}
|
|
387
|
+
<div className='new-collapse-box__header'>
|
|
388
|
+
<div className='new-collapse-box__header-inner'>
|
|
389
|
+
<div role="listitem" className="sd-list-item sd-list-item--no-hover hide-on-open">
|
|
390
|
+
<div className="sd-list-item__column sd-list-item__column--no-border pe-1">
|
|
391
|
+
<Avatar
|
|
392
|
+
displayName="Jeffrey Lebowski"
|
|
393
|
+
imageUrl={null}
|
|
394
|
+
initials='JL'
|
|
395
|
+
size="medium"
|
|
396
|
+
icon={{name: 'photo', color: 'var(--sd-colour-highlight)'}}
|
|
397
|
+
/>
|
|
398
|
+
</div>
|
|
399
|
+
<div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
|
|
400
|
+
<div className="sd-list-item__row">
|
|
401
|
+
<span className="sd-overflow-ellipsis sd-list-item--element-grow">
|
|
402
|
+
<span className="sd-list-item__compound-text">
|
|
403
|
+
<span className="sd-list-item__text-strong">Photo</span>
|
|
404
|
+
<span className="sd-list-item__text-light">//</span>
|
|
405
|
+
<span className="sd-list-item__text">Archive</span>
|
|
406
|
+
</span>
|
|
407
|
+
|
|
408
|
+
</span>
|
|
409
|
+
<time className="sd-margin-s--auto" title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
|
|
410
|
+
</div>
|
|
411
|
+
<div className="sd-list-item__row sd-list-item__row--overflow-visible mb-1-5">
|
|
412
|
+
<span className="sd-list-item__compound-text">
|
|
413
|
+
<span className="sd-list-item__text-label">Desk:</span>
|
|
414
|
+
<span>Sports</span>
|
|
415
|
+
</span>
|
|
416
|
+
<span className="sd-list-item__compound-text">
|
|
417
|
+
<span className="sd-list-item__text-label">Assignee:</span>
|
|
418
|
+
<span>Jeffrey Lebowski</span>
|
|
419
|
+
</span>
|
|
420
|
+
<span className='sd-margin-s--auto'>
|
|
421
|
+
<Label text='draft' style='translucent' type='default'/>
|
|
422
|
+
</span>
|
|
423
|
+
</div>
|
|
424
|
+
</div>
|
|
425
|
+
<div className="sd-list-item__action-menu sd-list-item__action-menu--direction-row">
|
|
426
|
+
<div className="side-panel__top-tools-right">
|
|
427
|
+
<button id="coverages[0]-item-actions" className="icn-btn dropdown__toggle" title="Actions" aria-label="More actions">
|
|
428
|
+
<i className="icon-dots-vertical"></i>
|
|
429
|
+
</button>
|
|
430
|
+
</div>
|
|
431
|
+
</div>
|
|
432
|
+
</div>
|
|
433
|
+
</div>
|
|
434
|
+
<button className='new-collapse-box__divider' onClick={() => this.setState(prevState => ({openCollapsibleFive: !prevState.openCollapsibleFive}))}>
|
|
435
|
+
<span className='label label--translucent new-collapse-box__divider-label'>
|
|
436
|
+
{this.state.openCollapsibleFive ? 'Show less' : 'Show more'}
|
|
437
|
+
</span>
|
|
438
|
+
</button>
|
|
439
|
+
</div>
|
|
440
|
+
|
|
441
|
+
{/* Content */}
|
|
442
|
+
<div className='new-collapse-box__content'>
|
|
443
|
+
<div className='new-collapse-box__content-inner p-2 pt-0-5'>
|
|
444
|
+
<Container className='sd-border--mediu sd-panel-bg--000 p-1-5 radius-lg sd-shadow--z1 mb-3'>
|
|
445
|
+
<div role="listitem" className="sd-list-item sd-list-item--no-hover flex-grow">
|
|
446
|
+
<div className="sd-list-item__column sd-list-item__column--no-border px-0">
|
|
447
|
+
<Avatar
|
|
448
|
+
displayName="Jeffrey Lebowski"
|
|
449
|
+
imageUrl={null}
|
|
450
|
+
initials='JL'
|
|
451
|
+
size="large"
|
|
452
|
+
/>
|
|
453
|
+
|
|
454
|
+
</div>
|
|
455
|
+
<div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border gap-0-5">
|
|
456
|
+
<div className="sd-list-item__row m-0 flex-grow">
|
|
457
|
+
<span className="sd-overflow-ellipsis flex-grow">
|
|
458
|
+
<span className="sd-list-item__compound-text">
|
|
459
|
+
<span className="sd-list-item__text-strong">Photo</span>
|
|
460
|
+
<span className="sd-list-item__text-light">//</span>
|
|
461
|
+
<span className="sd-list-item__text">Archive</span>
|
|
462
|
+
</span>
|
|
463
|
+
|
|
464
|
+
|
|
465
|
+
</span>
|
|
466
|
+
<Label text='Draft' style='translucent' type='default' />
|
|
467
|
+
</div>
|
|
468
|
+
<div className="sd-list-item__row sd-list-item__row--overflow-visible m-0 flex-grow">
|
|
469
|
+
<span className="sd-list-item__compound-text">
|
|
470
|
+
<span className="sd-list-item__text-label">Desk:</span>
|
|
471
|
+
<span>Sports</span>
|
|
472
|
+
</span>
|
|
473
|
+
<span className="sd-list-item__compound-text">
|
|
474
|
+
<span className="sd-list-item__text-label">Assignee:</span>
|
|
475
|
+
<span>Jeffrey Lebowski</span>
|
|
476
|
+
</span>
|
|
477
|
+
</div>
|
|
478
|
+
</div>
|
|
479
|
+
<div className="sd-list-item__column px-0 gap-0-5">
|
|
480
|
+
<div className="sd-list-item__row justify-end m-0 flex-grow">
|
|
481
|
+
<button className="btn btn btn--hollow btn--small">Reassign</button>
|
|
482
|
+
</div>
|
|
483
|
+
<div className="sd-list-item__row justify-end m-0 flex-grow">
|
|
484
|
+
<button className="btn btn btn--hollow btn--small">Remove</button>
|
|
485
|
+
</div>
|
|
486
|
+
</div>
|
|
487
|
+
</div>
|
|
488
|
+
|
|
489
|
+
</Container>
|
|
490
|
+
<Form.FormGroup>
|
|
491
|
+
<Form.FormItem>
|
|
492
|
+
<Select
|
|
493
|
+
value={this.state.value}
|
|
494
|
+
label='Coverage type'
|
|
495
|
+
required
|
|
496
|
+
onChange={(value) => {
|
|
497
|
+
this.setState({
|
|
498
|
+
value: value,
|
|
499
|
+
})
|
|
500
|
+
}}
|
|
501
|
+
>
|
|
502
|
+
<Option>None</Option>
|
|
503
|
+
<Option>Text</Option>
|
|
504
|
+
<Option>Picture</Option>
|
|
505
|
+
<Option>Video</Option>
|
|
506
|
+
<Option>Audio</Option>
|
|
507
|
+
<Option>Infographic</Option>
|
|
508
|
+
<Option>Live video</Option>
|
|
509
|
+
<Option>Live blog</Option>
|
|
510
|
+
</Select>
|
|
511
|
+
</Form.FormItem>
|
|
512
|
+
</Form.FormGroup>
|
|
513
|
+
<Form.FormGroup>
|
|
514
|
+
<Form.FormItem>
|
|
515
|
+
<Select
|
|
516
|
+
value={this.state.value}
|
|
517
|
+
label='Genre'
|
|
518
|
+
onChange={(value) => {
|
|
519
|
+
this.setState({
|
|
520
|
+
value: value,
|
|
521
|
+
})
|
|
522
|
+
}}
|
|
523
|
+
>
|
|
524
|
+
<Option>Article (news)</Option>
|
|
525
|
+
<Option>Sidebar</Option>
|
|
526
|
+
<Option>Factbox</Option>
|
|
527
|
+
<Option>Feature</Option>
|
|
528
|
+
<Option>Newsfeature</Option>
|
|
529
|
+
<Option>Backgrounder</Option>
|
|
530
|
+
<Option>Opinion</Option>
|
|
531
|
+
<Option>Modular</Option>
|
|
532
|
+
</Select>
|
|
533
|
+
</Form.FormItem>
|
|
534
|
+
</Form.FormGroup>
|
|
535
|
+
<Form.FormGroup>
|
|
536
|
+
<Form.FormItem>
|
|
537
|
+
<Input
|
|
538
|
+
label='Slugline'
|
|
539
|
+
value={''}
|
|
540
|
+
type='text'
|
|
541
|
+
tabindex={0}
|
|
542
|
+
onChange={(value) => this.setState({value: value})}
|
|
543
|
+
/>
|
|
544
|
+
</Form.FormItem>
|
|
545
|
+
</Form.FormGroup>
|
|
546
|
+
<Form.FormGroup>
|
|
547
|
+
<Form.FormItem>
|
|
548
|
+
<Input
|
|
549
|
+
label='Ed note'
|
|
550
|
+
value={''}
|
|
551
|
+
type='text'
|
|
552
|
+
tabindex={0}
|
|
553
|
+
onChange={(value) => this.setState({value: value})}
|
|
554
|
+
/>
|
|
555
|
+
</Form.FormItem>
|
|
556
|
+
</Form.FormGroup>
|
|
557
|
+
<Form.FormGroup>
|
|
558
|
+
<Form.FormItem>
|
|
559
|
+
<Input
|
|
560
|
+
label='Internal note'
|
|
561
|
+
value={''}
|
|
562
|
+
type='text'
|
|
563
|
+
tabindex={0}
|
|
564
|
+
onChange={(value) => this.setState({value: value})}
|
|
565
|
+
/>
|
|
566
|
+
</Form.FormItem>
|
|
567
|
+
</Form.FormGroup>
|
|
568
|
+
<Form.FormGroup>
|
|
569
|
+
<Form.FormItem>
|
|
570
|
+
<Select
|
|
571
|
+
value={this.state.value}
|
|
572
|
+
label='Coverage Status'
|
|
573
|
+
onChange={(value) => {
|
|
574
|
+
this.setState({
|
|
575
|
+
value: value,
|
|
576
|
+
})
|
|
577
|
+
}}
|
|
578
|
+
>
|
|
579
|
+
<Option>Planned</Option>
|
|
580
|
+
<Option>On merit</Option>
|
|
581
|
+
<Option>Not planned</Option>
|
|
582
|
+
<Option>On request</Option>
|
|
583
|
+
</Select>
|
|
584
|
+
</Form.FormItem>
|
|
585
|
+
</Form.FormGroup>
|
|
586
|
+
<Form.FormGroup>
|
|
587
|
+
<Form.FormItem>
|
|
588
|
+
<DatePicker
|
|
589
|
+
value={this.state.date}
|
|
590
|
+
dateFormat="YYYY-MM-DD"
|
|
591
|
+
required
|
|
592
|
+
onChange={(date) => {
|
|
593
|
+
this.setState({date});
|
|
594
|
+
}}
|
|
595
|
+
label='Due'
|
|
596
|
+
/>
|
|
597
|
+
</Form.FormItem>
|
|
598
|
+
<Form.FormItem>
|
|
599
|
+
<TimePicker
|
|
600
|
+
value={this.state.time}
|
|
601
|
+
onChange={(time) => {
|
|
602
|
+
this.setState({time});
|
|
603
|
+
}}
|
|
604
|
+
allowSeconds
|
|
605
|
+
label='Planning time'
|
|
606
|
+
labelHidden
|
|
607
|
+
/>
|
|
608
|
+
</Form.FormItem>
|
|
609
|
+
</Form.FormGroup>
|
|
610
|
+
<Form.FormGroup>
|
|
611
|
+
<Form.FormItem>
|
|
612
|
+
<TreeSelect
|
|
613
|
+
kind={'synchronous'}
|
|
614
|
+
value={this.state.treeSelectValue}
|
|
615
|
+
getOptions={() => options3}
|
|
616
|
+
getLabel={(item) => item.name}
|
|
617
|
+
getId={(item) => item.name}
|
|
618
|
+
label='Language'
|
|
619
|
+
onChange={() => false}
|
|
620
|
+
placeholder='Select place'
|
|
621
|
+
required
|
|
622
|
+
width='match-input'
|
|
623
|
+
>
|
|
624
|
+
</TreeSelect>
|
|
625
|
+
</Form.FormItem>
|
|
626
|
+
</Form.FormGroup>
|
|
627
|
+
<Form.FormGroup>
|
|
628
|
+
<Form.FormItem>
|
|
629
|
+
<Input
|
|
630
|
+
label='Coverage contact'
|
|
631
|
+
value={''}
|
|
632
|
+
type='text'
|
|
633
|
+
tabindex={0}
|
|
634
|
+
onChange={(value) => this.setState({value: value})}
|
|
635
|
+
/>
|
|
636
|
+
</Form.FormItem>
|
|
637
|
+
</Form.FormGroup>
|
|
638
|
+
<Form.FormGroup>
|
|
639
|
+
<Form.FormItem>
|
|
640
|
+
<Input
|
|
641
|
+
label='Headline'
|
|
642
|
+
value={''}
|
|
643
|
+
type='text'
|
|
644
|
+
tabindex={0}
|
|
645
|
+
onChange={(value) => this.setState({value: value})}
|
|
646
|
+
/>
|
|
647
|
+
</Form.FormItem>
|
|
648
|
+
</Form.FormGroup>
|
|
649
|
+
<div className='mb-1'>
|
|
650
|
+
<FormLabel text='Attachments' />
|
|
651
|
+
<div className="basic-drag-block mt-0-5">
|
|
652
|
+
<Icon size='big' name='upload-alt' /> <span className="basic-drag-block__text"> Drag files here or</span> <a className="text-link" href="">browse</a>.
|
|
653
|
+
</div>
|
|
654
|
+
|
|
655
|
+
</div>
|
|
656
|
+
</div>
|
|
657
|
+
</div>
|
|
658
|
+
</div>
|
|
659
|
+
</div>
|
|
660
|
+
</div>
|
|
661
|
+
</div>
|
|
662
|
+
|
|
168
663
|
<hr />
|
|
169
664
|
|
|
170
665
|
<Avatar
|
|
@@ -198,10 +693,10 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
198
693
|
<div className="sd-list-item__row sd-list-item__row--overflow-visible me-1 mb-1-5">
|
|
199
694
|
<Label text='draft' style='translucent'/>
|
|
200
695
|
<span className="sd-margin-s--auto">
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
696
|
+
<AvatarGroup
|
|
697
|
+
size="x-small"
|
|
698
|
+
items={avatars}
|
|
699
|
+
/>
|
|
205
700
|
</span>
|
|
206
701
|
</div>
|
|
207
702
|
</div>
|