superdesk-ui-framework 3.0.66 → 3.0.68

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.
Files changed (78) hide show
  1. package/app/styles/components/_list-item.scss +22 -11
  2. package/app-typescript/components/Autocomplete.tsx +9 -3
  3. package/app-typescript/components/Badge.tsx +16 -2
  4. package/app-typescript/components/Dropdown.tsx +3 -1
  5. package/app-typescript/components/DropdownFirst.tsx +14 -2
  6. package/app-typescript/components/DurationInput.tsx +19 -4
  7. package/app-typescript/components/EmptyState.tsx +11 -2
  8. package/app-typescript/components/Layouts/Panel.tsx +12 -1
  9. package/app-typescript/components/Lists/ContentList.tsx +5 -1
  10. package/app-typescript/components/Modal.tsx +10 -1
  11. package/app-typescript/components/Navigation/BottomNav.tsx +9 -2
  12. package/app-typescript/components/Navigation/QuickNavBar.tsx +10 -2
  13. package/app-typescript/components/Navigation/SideBarMenu.tsx +9 -4
  14. package/app-typescript/components/SidebarMenu.tsx +8 -1
  15. package/app-typescript/components/TabList.tsx +5 -1
  16. package/app-typescript/components/TagInput.tsx +4 -1
  17. package/app-typescript/components/ThemeSelector.tsx +13 -2
  18. package/app-typescript/components/TreeMenu.tsx +127 -122
  19. package/app-typescript/components/TreeSelect/TreeSelect.tsx +157 -141
  20. package/app-typescript/components/WithPortal.tsx +49 -0
  21. package/app-typescript/components/avatar/avatar-image.tsx +2 -0
  22. package/app-typescript/components/avatar/avatar.tsx +2 -1
  23. package/dist/examples.bundle.js +1446 -1318
  24. package/dist/playgrounds/planning.html +121 -43
  25. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +398 -385
  26. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +359 -365
  27. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +33 -33
  28. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +227 -231
  29. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +41 -38
  30. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +76 -96
  31. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +73 -101
  32. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +788 -729
  33. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +35 -26
  34. package/dist/playgrounds/react-playgrounds/TestGround.tsx +99 -128
  35. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +40 -25
  36. package/dist/playgrounds/react-playgrounds/components/GraphicButton.tsx +6 -5
  37. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +0 -2
  38. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -9
  39. package/dist/playgrounds/react-playgrounds/tsconfig.json +4 -0
  40. package/dist/superdesk-ui.bundle.css +24 -14
  41. package/dist/superdesk-ui.bundle.js +830 -727
  42. package/dist/vendor.bundle.js +14 -14
  43. package/examples/pages/playgrounds/planning.html +121 -43
  44. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +398 -385
  45. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +359 -365
  46. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +33 -33
  47. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +227 -231
  48. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +41 -38
  49. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +76 -96
  50. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +73 -101
  51. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +788 -729
  52. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +35 -26
  53. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +99 -128
  54. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +40 -25
  55. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButton.tsx +6 -5
  56. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +0 -2
  57. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -9
  58. package/examples/pages/playgrounds/react-playgrounds/tsconfig.json +4 -0
  59. package/package.json +3 -2
  60. package/react/components/Autocomplete.js +2 -2
  61. package/react/components/Badge.js +1 -1
  62. package/react/components/Dropdown.js +3 -1
  63. package/react/components/DropdownFirst.js +6 -2
  64. package/react/components/DurationInput.js +5 -1
  65. package/react/components/EmptyState.js +2 -1
  66. package/react/components/Lists/ContentList.js +1 -1
  67. package/react/components/Navigation/BottomNav.js +4 -1
  68. package/react/components/Navigation/QuickNavBar.js +2 -1
  69. package/react/components/Navigation/SideBarMenu.js +3 -1
  70. package/react/components/TabList.js +2 -1
  71. package/react/components/TagInput.js +1 -1
  72. package/react/components/TreeSelect/TreeSelect.d.ts +3 -2
  73. package/react/components/TreeSelect/TreeSelect.js +81 -73
  74. package/react/components/WithPortal.d.ts +14 -0
  75. package/react/components/WithPortal.js +69 -0
  76. package/react/components/avatar/avatar.js +2 -1
  77. /package/dist/playgrounds/dummy-data/{items.js → items.ts} +0 -0
  78. /package/examples/pages/playgrounds/dummy-data/{items.js → items.ts} +0 -0
package/dist/playgrounds/react-playgrounds/RundownEditor.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, IconButton, Divider, Tooltip, Select, Option, Text, SlidingToolbar, Container, Label, IconLabel } from '../../../../app-typescript/index';
2
+ import { ButtonGroup, Button, NavButton, SubNav, Input, IconButton, Divider, Tooltip, Select, Option, Text, SlidingToolbar, Container, Label, IconLabel } from '../../../../app-typescript/index';
3
3
  import * as Layout from '../../../../app-typescript/components/Layouts';
4
4
  import * as Form from '../../../../app-typescript/components/Form';
5
5
  import * as Nav from '../../../../app-typescript/components/Navigation';
@@ -144,7 +144,6 @@ export class RundownEditor extends React.Component<IProps, IState> {
144
144
  <Button text="Save Rundown" onClick={()=> false} type="primary" />
145
145
  <Divider size="mini" />
146
146
  <ButtonGroup subgroup={true} spaces="no-space">
147
-
148
147
  <Tooltip text='Minimize' flow='left'>
149
148
  <NavButton type='default' icon='minimize' iconSize='big' text='Minimize' onClick={()=> false} />
150
149
  </Tooltip>
@@ -185,42 +184,36 @@ export class RundownEditor extends React.Component<IProps, IState> {
185
184
  <Select
186
185
  label='Type'
187
186
  value='Type value'
188
- error='This is error message'
189
- info=''
190
187
  required={true}
191
188
  disabled={false}
192
- invalid={false}
193
- onChange={(value) => {}}>
194
- <Option>Type 1</Option>
195
- <Option>Type 2</Option>
189
+ onChange={() => false}
190
+ >
191
+ <Option>Type 1</Option>
192
+ <Option>Type 2</Option>
196
193
  </Select>
197
194
  </Form.FormItem>
198
195
  <Form.FormItem>
199
196
  <Select
200
197
  label='Show'
201
198
  value='show value'
202
- error='This is error message'
203
- info=''
204
199
  required={true}
205
200
  disabled={false}
206
- invalid={false}
207
- onChange={(value) => {}}>
208
- <Option>Marker</Option>
209
- <Option>Tabu</Option>
201
+ onChange={() => false}
202
+ >
203
+ <Option>Marker</Option>
204
+ <Option>Tabu</Option>
210
205
  </Select>
211
206
  </Form.FormItem>
212
207
  <Form.FormItem>
213
208
  <Select
214
209
  label='Show section'
215
210
  value='Some value'
216
- error='This is error message'
217
- info=''
218
211
  required={true}
219
212
  disabled={false}
220
- invalid={false}
221
- onChange={(value) => {}}>
222
- <Option>Section 1</Option>
223
- <Option>Section 2</Option>
213
+ onChange={() => false}
214
+ >
215
+ <Option>Section 1</Option>
216
+ <Option>Section 2</Option>
224
217
  </Select>
225
218
  </Form.FormItem>
226
219
  </Form.FormGroup>
@@ -230,24 +223,20 @@ export class RundownEditor extends React.Component<IProps, IState> {
230
223
  type='text'
231
224
  label='Slugline'
232
225
  value=''
233
- error='This is error message'
234
- info=''
235
226
  required={false}
236
227
  disabled={false}
237
- invalid={false}
238
- onChange={(value) => {}} />
228
+ onChange={() => false}
229
+ />
239
230
  </Form.FormItem>
240
231
  <Form.FormItem>
241
232
  <Input
242
233
  type='text'
243
234
  label='Category'
244
235
  value=''
245
- error='This is error message'
246
- info=''
247
236
  required={false}
248
237
  disabled={false}
249
- invalid={false}
250
- onChange={(value) => {}} />
238
+ onChange={() => false}
239
+ />
251
240
  </Form.FormItem>
252
241
  </Form.FormGroup>
253
242
  <Form.FormGroup>
@@ -256,11 +245,10 @@ export class RundownEditor extends React.Component<IProps, IState> {
256
245
  type='text'
257
246
  label='Author'
258
247
  value='This is some value'
259
- error='This is error message'
260
248
  required={true}
261
249
  disabled={false}
262
- invalid={false}
263
- onChange={(value) => {}} />
250
+ onChange={() => false}
251
+ />
264
252
  </Form.FormItem>
265
253
  </Form.FormGroup>
266
254
  <Form.FormGroup marginBottom='2'>
@@ -269,69 +257,66 @@ export class RundownEditor extends React.Component<IProps, IState> {
269
257
  type='text'
270
258
  label='Start Time'
271
259
  value=''
272
- error='This is error message'
273
260
  required={true}
274
261
  disabled={false}
275
- invalid={false}
276
- onChange={(value) => {}} />
262
+ onChange={() => false}
263
+ />
277
264
  </Form.FormItem>
278
265
  <Form.FormItem>
279
266
  <Input
280
267
  type='text'
281
268
  label='End Time'
282
269
  value=''
283
- error='This is error message'
284
270
  required={true}
285
271
  disabled={false}
286
- invalid={false}
287
- onChange={(value) => {}} />
272
+ onChange={() => false}
273
+ />
288
274
  </Form.FormItem>
289
275
  <Form.FormItem>
290
276
  <Input
291
277
  type='text'
292
278
  label='Duration'
293
279
  value=''
294
- error='This is error message'
295
280
  required={true}
296
281
  disabled={false}
297
- invalid={false}
298
- onChange={(value) => {}} />
282
+ onChange={() => false}
283
+ />
299
284
  </Form.FormItem>
300
285
  </Form.FormGroup>
301
286
  </React.Fragment>
302
287
  )}
303
- >
304
- <Container direction='column' className='sd-margin-y--2'>
305
- <Input
306
- label='Rundown title'
307
- value={'Marker // 01.06.2022'}
308
- boxedStyle={true}
309
- boxedLable={true}
310
- size='x-large'
311
- placeholder='Rundown title'
312
- labelHidden={true}
313
- type='text'
314
- tabindex={0}
315
- onChange={(value) => this.setState({inputValue: value})} />
316
- </Container>
317
- <ButtonGroup>
318
- <IconLabel style='translucent' innerLabel='Airtime:' text='19:00 - 19:45' size='large' type='primary' icon='time' />
319
- <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='large' type='warning' />
320
- <Text color='light' size='medium' className='sd-margin--0'>OF</Text>
321
- <IconLabel style='translucent' innerLabel='Planned:'text='00:45' size='large' />
322
- </ButtonGroup>
323
- <TableList
324
- className='sd-margin-y--4'
325
- dragAndDrop
326
- addItem
327
- array={this.state.array}
328
- itemsDropdown={() => [
329
- { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
330
- { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
331
- { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
332
- ]}
288
+ >
289
+ <Container direction='column' className='sd-margin-y--2'>
290
+ <Input
291
+ label='Rundown title'
292
+ value={'Marker // 01.06.2022'}
293
+ boxedStyle={true}
294
+ boxedLable={true}
295
+ size='x-large'
296
+ placeholder='Rundown title'
297
+ labelHidden={true}
298
+ type='text'
299
+ tabindex={0}
300
+ onChange={(value) => this.setState({inputValue: value})}
333
301
  />
334
-
302
+ </Container>
303
+ <ButtonGroup>
304
+ <IconLabel style='translucent' innerLabel='Airtime:' text='19:00 - 19:45' size='large' type='primary' icon='time' />
305
+ <IconLabel style='translucent' innerLabel='Duration:' text='00:38' size='large' type='warning' />
306
+ <Text color='light' size='medium' className='sd-margin--0'>OF</Text>
307
+ <IconLabel style='translucent' innerLabel='Planned:'text='00:45' size='large' />
308
+ </ButtonGroup>
309
+ <TableList
310
+ className='sd-margin-y--4'
311
+ dragAndDrop
312
+ addItem
313
+ array={this.state.array}
314
+ itemsDropdown={() => [
315
+ { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
316
+ { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
317
+ { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
318
+ ]}
319
+ />
335
320
  </Layout.AuthoringMain>
336
321
  </Layout.MainPanel>
337
322
 
@@ -373,7 +358,6 @@ export class RundownEditor extends React.Component<IProps, IState> {
373
358
  </div>
374
359
  </React.Fragment>
375
360
  )}
376
-
377
361
  authoringHeader={(
378
362
  <React.Fragment>
379
363
  <Form.FormGroup inlineLabel={false}>
@@ -381,28 +365,24 @@ export class RundownEditor extends React.Component<IProps, IState> {
381
365
  <Select
382
366
  label='Type'
383
367
  value='Type value'
384
- error='This is error message'
385
- info=' '
386
368
  required={true}
387
369
  disabled={false}
388
- invalid={false}
389
- onChange={(value) => {}}>
390
- <Option>Type 1</Option>
391
- <Option>Type 2</Option>
370
+ onChange={() => false}
371
+ >
372
+ <Option>Type 1</Option>
373
+ <Option>Type 2</Option>
392
374
  </Select>
393
375
  </Form.FormItem>
394
376
  <Form.FormItem>
395
377
  <Select
396
378
  label='Show section'
397
379
  value='Some value'
398
- error='This is error message'
399
- info=' '
400
380
  required={true}
401
381
  disabled={false}
402
- invalid={false}
403
- onChange={(value) => {}}>
404
- <Option>Section 1</Option>
405
- <Option>Section 2</Option>
382
+ onChange={() => false}
383
+ >
384
+ <Option>Section 1</Option>
385
+ <Option>Section 2</Option>
406
386
  </Select>
407
387
  </Form.FormItem>
408
388
  </Form.FormGroup>
@@ -411,14 +391,12 @@ export class RundownEditor extends React.Component<IProps, IState> {
411
391
  <Select
412
392
  label='Duration'
413
393
  value='Some value'
414
- error='This is error message'
415
- info=' '
416
394
  required={true}
417
395
  disabled={false}
418
- invalid={false}
419
- onChange={(value) => {}}>
420
- <Option>Option 1</Option>
421
- <Option>Option 2</Option>
396
+ onChange={() => false}
397
+ >
398
+ <Option>Option 1</Option>
399
+ <Option>Option 2</Option>
422
400
  </Select>
423
401
  </Form.FormItem>
424
402
  <Form.FormItem>
@@ -426,12 +404,10 @@ export class RundownEditor extends React.Component<IProps, IState> {
426
404
  type='text'
427
405
  label='Category'
428
406
  value=' '
429
- error='This is error message'
430
- info=' '
431
407
  required={false}
432
408
  disabled={false}
433
- invalid={false}
434
- onChange={(value) => {}} />
409
+ onChange={() => false}
410
+ />
435
411
  </Form.FormItem>
436
412
  </Form.FormGroup>
437
413
  <Form.FormGroup inlineLabel={false}>
@@ -440,20 +416,16 @@ export class RundownEditor extends React.Component<IProps, IState> {
440
416
  type='text'
441
417
  label='Author'
442
418
  value='This is some value'
443
- error='This is error message'
444
- info=' '
445
419
  required={false}
446
420
  disabled={false}
447
- invalid={false}
448
- onChange={(value) => {}} />
421
+ onChange={() => false}
422
+ />
449
423
  </Form.FormItem>
450
424
  </Form.FormGroup>
451
425
  </React.Fragment>
452
426
  )}
453
- >
454
- </Layout.AuthoringMain>
427
+ />
455
428
  }
456
-
457
429
  sideBar={(
458
430
  <Nav.SideBarTabs
459
431
  items={[