superdesk-ui-framework 3.0.1-beta.10 → 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.
Files changed (38) hide show
  1. package/app/styles/_modals.scss +3 -3
  2. package/app/styles/_sd-tag-input.scss +20 -1
  3. package/app/styles/_table-list.scss +100 -11
  4. package/app/styles/grids/_grid-layout.scss +3 -0
  5. package/app-typescript/components/Dropdown.tsx +20 -7
  6. package/app-typescript/components/DurationInput.tsx +7 -1
  7. package/app-typescript/components/Layouts/CoreLayout.tsx +2 -1
  8. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +7 -1
  9. package/app-typescript/components/Lists/TableList.tsx +138 -25
  10. package/app-typescript/components/SearchBar.tsx +11 -3
  11. package/app-typescript/components/TimePicker.tsx +2 -13
  12. package/app-typescript/components/TreeSelect.tsx +229 -175
  13. package/dist/examples.bundle.js +2489 -1727
  14. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +1 -0
  15. package/dist/react/TableList.tsx +15 -119
  16. package/dist/react/TreeSelect.tsx +88 -119
  17. package/dist/superdesk-ui.bundle.css +106 -19
  18. package/dist/superdesk-ui.bundle.js +2092 -1281
  19. package/dist/vendor.bundle.js +18 -18
  20. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +1 -0
  21. package/examples/pages/react/TableList.tsx +15 -119
  22. package/examples/pages/react/TreeSelect.tsx +88 -119
  23. package/package.json +1 -1
  24. package/react/components/Dropdown.d.ts +2 -1
  25. package/react/components/Dropdown.js +9 -4
  26. package/react/components/DurationInput.js +9 -1
  27. package/react/components/Layouts/CoreLayout.d.ts +1 -0
  28. package/react/components/Layouts/CoreLayout.js +1 -1
  29. package/react/components/Layouts/CoreLayoutMain.d.ts +1 -0
  30. package/react/components/Layouts/CoreLayoutMain.js +8 -1
  31. package/react/components/Lists/TableList.d.ts +22 -6
  32. package/react/components/Lists/TableList.js +78 -19
  33. package/react/components/SearchBar.d.ts +1 -1
  34. package/react/components/SearchBar.js +15 -7
  35. package/react/components/TimePicker.d.ts +1 -5
  36. package/react/components/TimePicker.js +3 -7
  37. package/react/components/TreeSelect.d.ts +9 -4
  38. package/react/components/TreeSelect.js +145 -99
@@ -72,6 +72,7 @@ export class CoreLayout extends React.Component<IProps, IState> {
72
72
  active={this.state.mainMenuOpen}
73
73
  ariaControls='main-menu'
74
74
  menuId='main-menu'
75
+ editorFullWidth={true}
75
76
  slideInMenu={(
76
77
  <Layout.MainMenu
77
78
  headerTitle='Main Menu'
@@ -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: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />,
27
- onClick: () => {
28
- return false;
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
  )
@@ -10,6 +10,7 @@ interface IState {
10
10
  options: any;
11
11
  options2: any;
12
12
  inputValue: string;
13
+ arr: any;
13
14
  }
14
15
 
15
16
  let itemArr = [
@@ -61,13 +62,41 @@ let itemArr2 = [
61
62
  {
62
63
  value: {name: 'Sub-category1'},
63
64
  children: [
64
- {value: {name: 'Item5'}}
65
+ {value: {name: 'Item20'}}
65
66
  ]
66
67
  },
67
68
  {
68
69
  value: {name: 'Sub-category2'},
69
70
  children: [
70
- {value: {name: 'Item7'}}
71
+ {value: {name: 'Item21'}}
72
+ ]
73
+ }
74
+ ,
75
+ {
76
+ value: {name: 'Sub-category3'},
77
+ children: [
78
+ {value: {name: 'Item22'}}
79
+ ]
80
+ }
81
+ ,
82
+ {
83
+ value: {name: 'Sub-category4'},
84
+ children: [
85
+ {value: {name: 'Item23'}}
86
+ ]
87
+ }
88
+ ,
89
+ {
90
+ value: {name: 'Sub-category5'},
91
+ children: [
92
+ {value: {name: 'Item24'}}
93
+ ]
94
+ }
95
+ ,
96
+ {
97
+ value: {name: 'Sub-category6'},
98
+ children: [
99
+ {value: {name: 'Item25'}}
71
100
  ]
72
101
  }
73
102
  ]
@@ -99,6 +128,10 @@ let itemArr2 = [
99
128
  const source = [
100
129
  {
101
130
  'name': 'Article (news)',
131
+ 'qcode': 'Article (news)',
132
+ },
133
+ {
134
+ 'name': 'Article',
102
135
  'qcode': 'Article',
103
136
  },
104
137
  {
@@ -109,19 +142,42 @@ const source = [
109
142
  'name': 'Factbox',
110
143
  'qcode': 'Factbox',
111
144
  },
145
+ {
146
+ 'name': 'Item',
147
+ 'qcode': 'Item',
148
+ },
149
+ {
150
+ 'name': 'Array',
151
+ 'qcode': 'Array',
152
+ },
153
+ {
154
+ 'name': 'Object',
155
+ 'qcode': 'Object',
156
+ },
112
157
  ];
113
158
 
159
+ let fetchedArr = [];
160
+ fetch('https://nominatim.openstreetmap.org/search/berlin?format=json&addressdetails=1&limit=20').then(response => response.json()).then(data => fetchedArr = data
161
+ );
162
+
163
+ type ICancelFn = () => void;
164
+
114
165
  function searchOptions(
115
166
  term: string,
116
- callback: (res: Array<ITreeNode<{name: string; qcode: string;}>>) => void,
117
- ): void {
118
- setTimeout(() => {
167
+ callback: (res: any) => void,
168
+ ): ICancelFn {
169
+ let timeout = setTimeout(() => {
170
+
119
171
  callback(
120
- source
121
- .filter((item) => item.name.toLocaleLowerCase().includes(term.toLocaleLowerCase()))
172
+ fetchedArr
173
+ .filter((item: any) => item.display_name.toLocaleLowerCase().includes(term.toLocaleLowerCase()))
122
174
  .map((item) => ({value: item})),
123
- );
175
+ );
124
176
  }, 1000);
177
+
178
+ return () => {
179
+ clearTimeout(timeout);
180
+ }
125
181
  }
126
182
 
127
183
  export class TreeSelectDocs extends React.Component<{}, IState> {
@@ -132,8 +188,10 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
132
188
  value2: [],
133
189
  options: itemArr2,
134
190
  options2: itemArr2,
135
- inputValue: ''
191
+ inputValue: '',
192
+ arr: []
136
193
  }
194
+
137
195
 
138
196
  this.handleChange = this.handleChange.bind(this);
139
197
  }
@@ -146,13 +204,13 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
146
204
  this.setState({
147
205
  options: option.item
148
206
  })
149
- }
207
+ }
150
208
  }
151
209
 
152
210
  render() {
153
211
  return (
154
212
  <section className='docs-page__container'>
155
- <h2 className='docs-page__h2'>TreeSelect (in progress)</h2>
213
+ <h2 className='docs-page__h2'>TreeSelect</h2>
156
214
 
157
215
  <Markup.ReactMarkupCodePreview>{`
158
216
  <TreeSelect
@@ -183,7 +241,8 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
183
241
  error={'Error Message'}
184
242
  required
185
243
  label={'TreeSelect Label'}
186
-
244
+ singleLevelSearch
245
+ searchPlaceholder='Search...'
187
246
  />
188
247
  </div>
189
248
  </div>
@@ -223,10 +282,11 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
223
282
  onChange={(val) => {
224
283
  this.setState({value: val});
225
284
  }}
226
- getLabel={({name}) => name}
227
- getId={({qcode}) => qcode}
285
+ getLabel={({display_name}) => display_name
286
+ }
287
+ getId={({qcode}) => qcode.display_name}
228
288
  selectBranchWithChildren={false}
229
- optionTemplate={(item) => <span style={{color: 'blue'}}>{item.name}</span>}
289
+ //optionTemplate={(item) => <span style={{color: 'blue'}}>{item.display_name}</span>}
230
290
  allowMultiple={true}
231
291
  />
232
292
  </div>
@@ -269,6 +329,8 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
269
329
  valueTemplate={(item: any) => {
270
330
  return <span>Label: {item.name}</span>
271
331
  }}
332
+ //allowMultiple
333
+ //readOnly
272
334
  />
273
335
  </div>
274
336
  </div>
@@ -302,12 +364,23 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
302
364
  <Prop name='selectBranchWithChildren' isRequired={false} type='boolean' default='false' description='When specified, select branch with children is enabled.'/>
303
365
  <Prop name='readonly' isRequired={false} type='boolean' default='false' description='When specified, component changes are not enabled.'/>
304
366
  <Prop name='loading' isRequired={false} type='boolean' default='false' description='Adds a loading indicator in dropdown.'/>
367
+ <Prop name='allowMultiple' isRequired={false} type='boolean' default='/' description='Enable multi-select mode.'/>
368
+ <Prop name='singleLevelSearch' isRequired={false} type='boolean' default='/' description='Limit search to only the level that is displayed.'/>
369
+ <Prop name='placeholder' isRequired={false} type='string' default='/' description='Placeholder of component in single select mode.'/>
370
+ <Prop name='searchPlaceholder' isRequired={false} type='string' default='/' description='Filter input placeholder.'/>
305
371
  <Prop name='getLabel' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
306
372
  <Prop name='getId' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
307
373
  <Prop name='valueTemplate' isRequired={false} type='Function' default='/' description='Function that gets an item in the value and returns the content for it.'/>
308
374
  <Prop name='optionTemplate' isRequired={false} type='Function' default='/' description='Function that gets the option and returns the content for it.'/>
309
375
  <Prop name='searchOptions' isRequired={false} type='Function' default='/' description='The function will be called when a search is initiated from UI in asynchronous mode.'/>
310
376
  <Prop name='onChange' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
377
+ <Prop name='label' isRequired={false} type='string' default='/' description='Input label'/>
378
+ <Prop name='info' isRequired={false} type='string' default='/' description='Hint text'/>
379
+ <Prop name='error' isRequired={false} type='string' default='/' description='Error text'/>
380
+ <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline'/>
381
+ <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required'/>
382
+ <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled'/>
383
+ <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid'/>
311
384
  </PropsList>
312
385
 
313
386
  <p className='docs-page__paragraph'>synchronous:</p>
@@ -325,107 +398,3 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
325
398
  )
326
399
  }
327
400
  }
328
-
329
- // import React from 'react';
330
- // import {ITreeNode, TreeSelect} from './TreeSelect';
331
-
332
- // type IProps = {};
333
-
334
- // interface IVocabularyItem {
335
- // qcode: string;
336
- // name: string;
337
- // }
338
-
339
- // interface IState {
340
- // value: Array<IVocabularyItem>;
341
- // }
342
-
343
- // const source: Array<ITreeNode<IVocabularyItem>> = [
344
- // {
345
- // value: {
346
- // 'name': 'Article (news)',
347
- // 'qcode': 'Article',
348
- // },
349
- // children: [
350
- // {
351
- // value: {
352
- // 'name': 'Test 1',
353
- // 'qcode': 'test-1',
354
- // },
355
- // }
356
- // ],
357
- // },
358
- // {
359
- // value: {
360
- // 'name': 'Sidebar',
361
- // 'qcode': 'Sidebar',
362
- // },
363
- // children: [
364
- // {
365
- // value: {
366
- // 'name': 'Test 2',
367
- // 'qcode': 'test-2',
368
- // },
369
- // }
370
- // ],
371
- // },
372
- // {
373
- // value: {
374
- // 'name': 'Factbox',
375
- // 'qcode': 'Factbox',
376
- // },
377
- // children: [
378
- // {
379
- // value: {
380
- // 'name': 'Test 3',
381
- // 'qcode': 'test-3',
382
- // },
383
- // }
384
- // ],
385
- // }
386
- // ];
387
-
388
- // export class TreeSelectDocs extends React.PureComponent<IProps, IState> {
389
- // constructor(props: IProps) {
390
- // super(props);
391
- // this.state = {
392
- // value: [],
393
- // };
394
- // }
395
- // render() {
396
- // return (
397
- // // <TreeSelect
398
- // // kind="synchronous"
399
- // // getOptions={() => source}
400
- // // value={this.state.value}
401
- // // onChange={(val) => {
402
- // // this.setState({value: val});
403
- // // }}
404
- // // getId={(item) => item.name}
405
- // // getLabel={(item) => item.name}
406
- // // selectBranchWithChildren={false}
407
- // // optionTemplate={(item) => <span style={{color: 'blue'}}>{item.name}</span>}
408
- // // allowMultiple={true}
409
-
410
- // // />
411
-
412
- // <TreeSelect
413
- // getId={(item) => item.name}
414
- // getLabel={(item) => item.name}
415
- // getOptions={() => {
416
- // return source
417
- // }}
418
- // //value={[{name: 'Item1'}, {name: 'Item2'}]}
419
- // //selectBranchWithChildren={true}
420
- // onChange={(e) => console.log(e)}
421
- // allowMultiple
422
- // kind={'synchronous'}
423
- // fullWidth
424
- // info={'Info Message'}
425
- // error={'Error Message'}
426
- // required
427
- // label={'TreeSelect Label'}
428
- // />
429
- // );
430
- // }
431
- // }