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.
Files changed (33) hide show
  1. package/app/styles/_sd-tag-input.scss +29 -10
  2. package/app-typescript/components/Lists/ContentList.tsx +28 -27
  3. package/app-typescript/components/Lists/TableList.tsx +140 -126
  4. package/app-typescript/components/MultiSelect.tsx +2 -3
  5. package/app-typescript/components/SingleAndDoubleClickFunction.tsx +21 -0
  6. package/app-typescript/components/TreeSelect.tsx +506 -243
  7. package/dist/examples.bundle.js +1468 -1186
  8. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +18 -10
  9. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +15 -13
  10. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +136 -125
  11. package/dist/react/Dropdowns.tsx +134 -85
  12. package/dist/react/MultiSelect.tsx +2 -2
  13. package/dist/react/TreeSelect.tsx +39 -27
  14. package/dist/superdesk-ui.bundle.css +26 -9
  15. package/dist/superdesk-ui.bundle.js +1015 -809
  16. package/dist/vendor.bundle.js +14 -14
  17. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +18 -10
  18. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +15 -13
  19. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +136 -125
  20. package/examples/pages/react/Dropdowns.tsx +134 -85
  21. package/examples/pages/react/MultiSelect.tsx +2 -2
  22. package/examples/pages/react/TreeSelect.tsx +39 -27
  23. package/package.json +2 -2
  24. package/react/components/Lists/ContentList.d.ts +2 -5
  25. package/react/components/Lists/ContentList.js +20 -25
  26. package/react/components/Lists/TableList.d.ts +4 -7
  27. package/react/components/Lists/TableList.js +66 -60
  28. package/react/components/MultiSelect.d.ts +1 -1
  29. package/react/components/MultiSelect.js +1 -1
  30. package/react/components/SingleAndDoubleClickFunction.d.ts +6 -0
  31. package/react/components/SingleAndDoubleClickFunction.js +19 -0
  32. package/react/components/TreeSelect.d.ts +17 -9
  33. package/react/components/TreeSelect.js +249 -74
package/app/styles/_sd-tag-input.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  sd-tag-input {
2
2
  display: block;
3
- padding-bottom: 3rem;
3
+ padding-bottom: 3rem;
4
4
  &[data-label] {
5
5
  position: relative;
6
6
  padding-top: 1rem;
@@ -10,7 +10,7 @@ sd-tag-input {
10
10
  // Testing
11
11
  .sd-tag-input {
12
12
  display: block;
13
- padding-bottom: 3rem;
13
+ padding-bottom: 3rem;
14
14
  &[data-label] {
15
15
  position: relative;
16
16
  padding-top: 1rem;
@@ -225,6 +225,9 @@ tags-input,
225
225
  &:hover {
226
226
  opacity: 1;
227
227
  }
228
+ &:focus {
229
+ opacity: 1;
230
+ }
228
231
  &[disabled], [disabled]:hover, [disabled]:active {
229
232
  opacity: 0.5;
230
233
  background-color: rgba(123, 123, 123, 0.4);
@@ -277,8 +280,6 @@ tags-input,
277
280
  }
278
281
  .suggestion-item {
279
282
  position: relative;
280
- padding: 0.5rem 1rem;
281
- cursor: pointer;
282
283
  white-space: nowrap;
283
284
  overflow: hidden;
284
285
  text-overflow: ellipsis;
@@ -298,9 +299,6 @@ tags-input,
298
299
  cursor: default;
299
300
  pointer-events: none;
300
301
  }
301
- &:hover {
302
- background-color: var(--sd-colour-interactive--alpha-10) !important;
303
- }
304
302
  .suggestion-item__icon {
305
303
  display: flex;
306
304
  align-items: center;
@@ -309,9 +307,26 @@ tags-input,
309
307
  }
310
308
  }
311
309
  .suggestion-item--multi-select {
310
+ display: flex;
311
+ align-items: center;
312
+ }
313
+ .suggestion-item--btn {
312
314
  display: flex;
313
315
  justify-content: space-between;
314
316
  align-items: center;
317
+ cursor: pointer;
318
+ width: 100%;
319
+ padding: 0.5rem 1rem;
320
+
321
+ &:focus {
322
+ background-color: $sd-colour-background__menu-item;
323
+ box-shadow: var(--sd-shadow__menu-item--focus-inner);
324
+ text-decoration: none;
325
+ outline: none;
326
+ }
327
+ &:hover {
328
+ background-color: var(--sd-colour-interactive--alpha-10) !important;
329
+ }
315
330
  }
316
331
  .suggestion-item--bgcolor {
317
332
  min-height: 1.5em;
@@ -323,7 +338,7 @@ tags-input,
323
338
  border-radius: 99px;
324
339
  white-space: nowrap;
325
340
 
326
- &[style] {
341
+ &[style*="background-color"] {
327
342
  padding-inline: 8px;
328
343
  }
329
344
  }
@@ -430,7 +445,7 @@ tags-input,
430
445
  transform: translate(-3px);
431
446
  }
432
447
  .arrow-left {
433
- cursor: pointer;
448
+ cursor: pointer;
434
449
  }
435
450
  .search {
436
451
  cursor: default;
@@ -485,6 +500,10 @@ tags-input,
485
500
  border: 1px solid var(--sd-colour-interactive);
486
501
  box-shadow: inset 0 0 0 2px var(--sd-colour-interactive--alpha-20);
487
502
  }
503
+ &:focus {
504
+ border: 1px solid var(--sd-colour-interactive);
505
+ box-shadow: inset 0 0 0 2px var(--sd-colour-interactive--alpha-20);
506
+ }
488
507
  &:active {
489
508
  border: 1px solid var(--sd-colour-interactive);
490
509
  box-shadow: inset 0 0 0 3px var(--sd-colour-interactive--alpha-30);
@@ -591,7 +610,7 @@ tags-input,
591
610
  border-radius: 2px;
592
611
 
593
612
  &-selected {
594
- inset-block: 5px;
613
+ inset-block: 5px;
595
614
  }
596
615
  }
597
616
 
package/app-typescript/components/Lists/ContentList.tsx CHANGED
@@ -1,10 +1,15 @@
1
1
  import * as React from 'react';
2
2
  import classNames from 'classnames';
3
+ import {setupSingleAndDoubleClick} from './../SingleAndDoubleClickFunction';
3
4
 
4
5
  interface IPropsItem {
5
6
  action?: React.ReactNode;
6
7
  locked?: boolean;
7
- itemColum: Array<{ itemRow: Array<{ content: any }>, border?: boolean, fullwidth?: boolean }>;
8
+ itemColum: Array<{
9
+ itemRow: Array<{ content: any }>,
10
+ border?: boolean,
11
+ fullwidth?: boolean,
12
+ }>;
8
13
  activated?: boolean;
9
14
  selected?: boolean;
10
15
  archived?: boolean;
@@ -14,31 +19,12 @@ interface IPropsItem {
14
19
  }
15
20
 
16
21
  class ContentListItem extends React.PureComponent<IPropsItem> {
22
+ private multiClickHandler;
17
23
 
18
- private timer: any;
19
- private delay = 200;
20
- private prevent = false;
21
-
22
- onSingleClick = () => {
23
- let selection = window.getSelection();
24
- this.timer = setTimeout(() => {
25
- if (!this.prevent && this.props.onClick && selection) {
26
- if (selection.toString().length < 1) {
27
- this.props.onClick();
28
- }
29
- }
30
- }, this.delay);
31
- }
24
+ constructor(props: IPropsItem) {
25
+ super(props);
32
26
 
33
- onDoubleClick = () => {
34
- clearTimeout(this.timer);
35
- this.prevent = true;
36
- if (this.props.onDoubleClick) {
37
- this.props.onDoubleClick();
38
- }
39
- setTimeout(() => {
40
- this.prevent = false;
41
- }, this.delay);
27
+ this.multiClickHandler = setupSingleAndDoubleClick();
42
28
  }
43
29
 
44
30
  onActionMenuClick = (event: React.MouseEvent<HTMLElement>) => {
@@ -58,11 +44,26 @@ class ContentListItem extends React.PureComponent<IPropsItem> {
58
44
  <div
59
45
  role='listitem'
60
46
  className={classes}
61
- onClick={this.onSingleClick}
62
- onDoubleClick={this.onDoubleClick}>
47
+ onClick={(e) => this.multiClickHandler(e, {
48
+ onSingleClick: () => {
49
+ let selection = window.getSelection();
50
+ if (this.props.onClick && selection) {
51
+ if (selection.toString().length < 1) {
52
+ this.props.onClick();
53
+ }
54
+ }
55
+ },
56
+ onDoubleClick: () => {
57
+ if (this.props.onDoubleClick) {
58
+ this.props.onDoubleClick();
59
+ }
60
+ },
61
+ })}
62
+ >
63
63
  {this.props.locked
64
64
  ? <div className="sd-list-item__border sd-list-item__border--locked"></div>
65
- : <div className="sd-list-item__border"></div>}
65
+ : <div className="sd-list-item__border"></div>
66
+ }
66
67
  {this.props.itemColum.map((item, index) => {
67
68
  return <div
68
69
  className={`sd-list-item__column ${item.fullwidth && 'sd-list-item__column--grow'} ${!item.border && 'sd-list-item__column--no-border'}`}
package/app-typescript/components/Lists/TableList.tsx CHANGED
@@ -1,10 +1,11 @@
1
1
  import * as React from 'react';
2
+ import ReactDOM from 'react-dom';
2
3
  import classNames from 'classnames';
3
4
  import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautiful-dnd";
4
5
  import { Tooltip } from '../Tooltip';
5
6
  import { Button } from '../Button';
6
7
  import { Dropdown, IMenuItem, ISubmenu, IMenuGroup } from '../Dropdown';
7
- import ReactDOM from 'react-dom';
8
+ import {setupSingleAndDoubleClick} from './../SingleAndDoubleClickFunction';
8
9
 
9
10
  export interface IProps {
10
11
  array: Array<IPropsArrayItem>;
@@ -25,10 +26,10 @@ export interface IPropsArrayItem {
25
26
  end?: React.ReactNode;
26
27
  action?: React.ReactNode;
27
28
  hexColor?: string;
28
- onClick?(): void;
29
- onDoubleClick?(): void;
30
29
  locked?: boolean;
31
30
  positionLocked?: boolean;
31
+ onClick?(): void;
32
+ onDoubleClick?(): void;
32
33
  }
33
34
 
34
35
  interface IState {
@@ -121,7 +122,8 @@ class TableList extends React.PureComponent<IProps, IState> {
121
122
  role='list'
122
123
  className={classes}
123
124
  ref={provided.innerRef}
124
- {...provided.droppableProps} >
125
+ {...provided.droppableProps}
126
+ >
125
127
  {this.state.items.map((item: IPropsArrayItem, index: number) => (
126
128
  <Draggable key={index} draggableId={`${index}`} index={index}>
127
129
  {(provided2, snapshot) => (
@@ -135,10 +137,12 @@ class TableList extends React.PureComponent<IProps, IState> {
135
137
  showDragHandle={this.props.showDragHandle}
136
138
  addItem={this.props.addItem}
137
139
  onAddItem={() => this.props.onAddItem
138
- && this.props.onAddItem(index, item)}
140
+ && this.props.onAddItem(index, item)
141
+ }
139
142
  itemsDropdown={() => this.props.itemsDropdown
140
143
  ? this.props.itemsDropdown(index)
141
- : []}
144
+ : []
145
+ }
142
146
  />
143
147
  : <div
144
148
  ref={provided2.innerRef}
@@ -150,19 +154,27 @@ class TableList extends React.PureComponent<IProps, IState> {
150
154
  center={item.center}
151
155
  end={item.end}
152
156
  action={item.action}
153
- onClick={item.onClick ? item.onClick : undefined}
154
- onDoubleClick={item.onDoubleClick
155
- ? item.onDoubleClick
156
- : undefined}
157
+ onClick={
158
+ item.onClick
159
+ ? item.onClick
160
+ : undefined
161
+ }
162
+ onDoubleClick={
163
+ item.onDoubleClick
164
+ ? item.onDoubleClick
165
+ : undefined
166
+ }
157
167
  addItem={this.props.addItem}
158
168
  itemsDropdown={() => this.props.itemsDropdown
159
169
  ? this.props.itemsDropdown(index)
160
- : []}
170
+ : []
171
+ }
161
172
  hexColor={item.hexColor}
162
173
  locked={item.locked}
163
174
  positionLocked={item.positionLocked}
164
175
  onAddItem={() => this.props.onAddItem
165
- && this.props.onAddItem(index, item)}
176
+ && this.props.onAddItem(index, item)
177
+ }
166
178
  showDragHandle={this.props.showDragHandle}
167
179
  />
168
180
  </div>
@@ -170,14 +182,15 @@ class TableList extends React.PureComponent<IProps, IState> {
170
182
  </Draggable>
171
183
  ))}
172
184
  {provided.placeholder}
173
- {(this.props.addItem && !this.props.readOnly) &&
174
- <div className={`table-list__add-item table-list__item--margin`}>
175
- <Tooltip text='Add item' flow='top' appendToBody={true}>
176
- <div className='table-list__add-item--container sd-margin-x--auto'>
177
- {this.dropDown()}
178
- </div>
179
- </Tooltip>
180
- </div>
185
+ {
186
+ (this.props.addItem && !this.props.readOnly)
187
+ && <div className={`table-list__add-item table-list__item--margin`}>
188
+ <Tooltip text='Add item' flow='top' appendToBody={true}>
189
+ <div className='table-list__add-item--container sd-margin-x--auto'>
190
+ {this.dropDown()}
191
+ </div>
192
+ </Tooltip>
193
+ </div>
181
194
  }
182
195
  </div>
183
196
  )}
@@ -191,38 +204,50 @@ class TableList extends React.PureComponent<IProps, IState> {
191
204
  center={item.center}
192
205
  end={item.end}
193
206
  action={item.action}
194
- onClick={item.onClick ? item.onClick : undefined}
195
- onDoubleClick={item.onDoubleClick
196
- ? item.onDoubleClick
197
- : undefined}
207
+ onClick={
208
+ item.onClick
209
+ ? item.onClick
210
+ : undefined
211
+ }
212
+ onDoubleClick={
213
+ item.onDoubleClick
214
+ ? item.onDoubleClick
215
+ : undefined
216
+ }
198
217
  addItem={this.props.addItem}
199
- itemsDropdown={() => this.props.itemsDropdown ? this.props.itemsDropdown(index) : []}
218
+ itemsDropdown={() => this.props.itemsDropdown
219
+ ? this.props.itemsDropdown(index)
220
+ : []
221
+ }
200
222
  hexColor={item.hexColor}
201
223
  locked={item.locked}
202
224
  positionLocked={item.positionLocked}
203
225
  onAddItem={() => this.props.onAddItem
204
- && this.props.onAddItem(index, item)}
226
+ && this.props.onAddItem(index, item)
227
+ }
205
228
  />
206
229
  ))}
207
- {(this.props.addItem && !this.props.readOnly) &&
208
- <div className={`table-list__add-item table-list__item--margin`}>
209
- <Tooltip text='Add item' flow='top' appendToBody={true}>
210
- <div className='table-list__add-item--container sd-margin-x--auto'>
211
- {this.dropDown()}
212
- </div>
213
- </Tooltip>
214
- </div>
230
+ {
231
+ (this.props.addItem && !this.props.readOnly)
232
+ && <div className={`table-list__add-item table-list__item--margin`}>
233
+ <Tooltip text='Add item' flow='top' appendToBody={true}>
234
+ <div className='table-list__add-item--container sd-margin-x--auto'>
235
+ {this.dropDown()}
236
+ </div>
237
+ </Tooltip>
238
+ </div>
215
239
  }
216
240
  </div>
217
- : (this.props.addItem && !this.props.readOnly) ? <div role='list' className={classes}>
218
- <div className={`table-list__add-item table-list__item--margin`}>
219
- <Tooltip text='Add item' flow='top' appendToBody={true}>
220
- <div className='table-list__add-item--container sd-margin-x--auto'>
221
- {this.dropDown()}
222
- </div>
223
- </Tooltip>
241
+ : (this.props.addItem && !this.props.readOnly)
242
+ ? <div role='list' className={classes}>
243
+ <div className={`table-list__add-item table-list__item--margin`}>
244
+ <Tooltip text='Add item' flow='top' appendToBody={true}>
245
+ <div className='table-list__add-item--container sd-margin-x--auto'>
246
+ {this.dropDown()}
247
+ </div>
248
+ </Tooltip>
249
+ </div>
224
250
  </div>
225
- </div>
226
251
  : null
227
252
  );
228
253
  }
@@ -247,34 +272,12 @@ export interface IPropsItem {
247
272
  }
248
273
 
249
274
  class TableListItem extends React.PureComponent<IPropsItem> {
250
- private timer: any;
251
- private delay = 200;
252
- private prevent = false;
275
+ private multiClickHandler;
253
276
 
254
- onSingleClick = () => {
255
- let selection = window.getSelection();
256
- this.timer = setTimeout(() => {
257
- if (!this.prevent && this.props.onClick && selection) {
258
- if (this.props.dragAndDrop) {
259
- this.props.onClick();
260
- } else {
261
- if (selection.toString().length < 1) {
262
- this.props.onClick();
263
- }
264
- }
265
- }
266
- }, this.delay);
267
- }
277
+ constructor(props: IPropsItem) {
278
+ super(props);
268
279
 
269
- onDoubleClick = () => {
270
- clearTimeout(this.timer);
271
- this.prevent = true;
272
- if (this.props.onDoubleClick) {
273
- this.props.onDoubleClick();
274
- }
275
- setTimeout(() => {
276
- this.prevent = false;
277
- }, this.delay);
280
+ this.multiClickHandler = setupSingleAndDoubleClick();
278
281
  }
279
282
 
280
283
  onActionMenuClick = (event: React.MouseEvent<HTMLElement>) => {
@@ -283,7 +286,6 @@ class TableListItem extends React.PureComponent<IPropsItem> {
283
286
  }
284
287
 
285
288
  render() {
286
-
287
289
  let classes = classNames('table-list__item', {
288
290
  'table-list__item--clickable': this.props.onClick,
289
291
  'table-list__item--draggable': this.props.dragAndDrop,
@@ -291,16 +293,39 @@ class TableListItem extends React.PureComponent<IPropsItem> {
291
293
  'table-list__item--position-locked': this.props.positionLocked,
292
294
  'table-list__item--drag-handles-always': !this.props.showDragHandle,
293
295
  'table-list__item--drag-handles-none': this.props.showDragHandle === 'none',
296
+ 'table-list__item--margin': !this.props.addItem,
294
297
  });
295
298
 
299
+ const Wrapper: React.ComponentType<{children: JSX.Element}> = this.props.addItem
300
+ ? ({children}) => (<div className='table-list__item-container'>{children}</div>)
301
+ : ({children}) => children;
302
+
296
303
  return (
297
- this.props.addItem ?
298
- <div className='table-list__item-container'>
304
+ <Wrapper>
305
+ <>
299
306
  <div
300
307
  role='listitem'
301
- onClick={() => this.onSingleClick()}
302
- onDoubleClick={() => this.onDoubleClick()}
303
- className={classes}>
308
+ className={classes}
309
+ onClick={(e) => this.multiClickHandler(e, {
310
+ onSingleClick: () => {
311
+ let selection = window.getSelection();
312
+ if (this.props.onClick && selection) {
313
+ if (this.props.dragAndDrop) {
314
+ this.props.onClick();
315
+ } else {
316
+ if (selection.toString().length < 1) {
317
+ this.props.onClick();
318
+ }
319
+ }
320
+ }
321
+ },
322
+ onDoubleClick: () => {
323
+ if (this.props.onDoubleClick) {
324
+ this.props.onDoubleClick();
325
+ }
326
+ },
327
+ })}
328
+ >
304
329
  <div className='table-list__item-border' style={{ backgroundColor: this.props.hexColor }}></div>
305
330
  <div className='table-list__item-content'>
306
331
  <div className='table-list__item-content-block'>
@@ -312,56 +337,39 @@ class TableListItem extends React.PureComponent<IPropsItem> {
312
337
  <div className='table-list__item-content-block'>
313
338
  {this.props.end && this.props.end}
314
339
  </div>
315
- </div>
316
- {this.props.action &&
317
- <div className='table-list__slide-in-actions'
318
- onClick={this.onActionMenuClick}>
319
- {this.props.action}
320
- </div>}
321
- </div>
322
- <div className='table-list__add-bar-container'>
323
- <Tooltip text='Add item' flow='top' appendToBody={true}>
324
- <div className='table-list__add-bar'>
325
- <Dropdown
326
- onChange={this.props.onAddItem}
327
- items={this.props.itemsDropdown ? this.props.itemsDropdown() : []}>
328
- <Button
329
- type="primary"
330
- icon="plus-large"
331
- text="Add item"
332
- size="small"
333
- shape="round"
334
- iconOnly={true}
335
- onClick={() => false}
336
- />
337
- </Dropdown>
338
340
  </div>
339
- </Tooltip>
340
- </div>
341
- </div>
342
- : <div
343
- role='listitem'
344
- className={`${classes} table-list__item--margin`}
345
- onClick={() => this.onSingleClick()}
346
- onDoubleClick={() => this.onDoubleClick()}>
347
- <div className='table-list__item-border' style={{ backgroundColor: this.props.hexColor }}></div>
348
- <div className='table-list__item-content'>
349
- <div className='table-list__item-content-block'>
350
- {this.props.start && this.props.start}
351
- </div>
352
- <div className='table-list__item-content-block table-list__item-content-block--center'>
353
- {this.props.center && this.props.center}
354
- </div>
355
- <div className='table-list__item-content-block'>
356
- {this.props.end && this.props.end}
357
- </div>
341
+ {
342
+ this.props.action
343
+ && <div className='table-list__slide-in-actions'
344
+ onClick={this.onActionMenuClick}>
345
+ {this.props.action}
346
+ </div>
347
+ }
358
348
  </div>
359
- {this.props.action &&
360
- <div className='table-list__slide-in-actions'
361
- onClick={this.onActionMenuClick}>
362
- {this.props.action}
363
- </div>}
364
- </div>
349
+ {
350
+ this.props.addItem
351
+ && <div className='table-list__add-bar-container'>
352
+ <Tooltip text='Add item' flow='top' appendToBody={true}>
353
+ <div className='table-list__add-bar'>
354
+ <Dropdown
355
+ onChange={this.props.onAddItem}
356
+ items={this.props.itemsDropdown ? this.props.itemsDropdown() : []}>
357
+ <Button
358
+ type="primary"
359
+ icon="plus-large"
360
+ text="Add item"
361
+ size="small"
362
+ shape="round"
363
+ iconOnly={true}
364
+ onClick={() => false}
365
+ />
366
+ </Dropdown>
367
+ </div>
368
+ </Tooltip>
369
+ </div>
370
+ }
371
+ </>
372
+ </Wrapper>
365
373
  );
366
374
  }
367
375
  }
@@ -385,10 +393,16 @@ class PortalItem extends React.PureComponent {
385
393
  center={this.props.item.center}
386
394
  end={this.props.item.end}
387
395
  action={this.props.item.action}
388
- onClick={this.props.item.onClick ? this.props.item.onClick : undefined}
389
- onDoubleClick={this.props.item.onDoubleClick
390
- ? this.props.item.onDoubleClick
391
- : undefined}
396
+ onClick={
397
+ this.props.item.onClick
398
+ ? this.props.item.onClick
399
+ : undefined
400
+ }
401
+ onDoubleClick={
402
+ this.props.item.onDoubleClick
403
+ ? this.props.item.onDoubleClick
404
+ : undefined
405
+ }
392
406
  addItem={this.props.addItem}
393
407
  itemsDropdown={this.props.itemsDropdown}
394
408
  hexColor={this.props.item.hexColor}
package/app-typescript/components/MultiSelect.tsx CHANGED
@@ -8,7 +8,6 @@ interface IProps<T> {
8
8
  value: Array<T>;
9
9
  options: Array<T>;
10
10
  placeholder?: string;
11
- optionLabel: string;
12
11
  emptyFilterMessage?: string;
13
12
  filterPlaceholder?: string;
14
13
  maxSelectedLabels?: number;
@@ -19,6 +18,7 @@ interface IProps<T> {
19
18
  showClear?: boolean;
20
19
  showSelectAll?: boolean;
21
20
  zIndex?: number;
21
+ optionLabel: (option: T) => string;
22
22
  itemTemplate?(item: any): JSX.Element | undefined;
23
23
  selectedItemTemplate?(value: any): JSX.Element | undefined;
24
24
  onChange(newValue: Array<T>): void;
@@ -80,10 +80,9 @@ export class MultiSelect<T> extends React.Component<IProps<T>, IState<T>> {
80
80
  display="chip"
81
81
  zIndex={this.props.zIndex}
82
82
  filter={this.props.filter}
83
- filterBy={this.props.optionLabel}
84
83
  appendTo={document.body}
85
84
  placeholder={this.props.placeholder}
86
- optionLabel={this.props.optionLabel}
85
+ optionLabel={(option) => this.props.optionLabel(option)}
87
86
  emptyFilterMessage={this.props.emptyFilterMessage}
88
87
  filterPlaceholder={this.props.filterPlaceholder}
89
88
  itemTemplate={this.props.itemTemplate}
package/app-typescript/components/SingleAndDoubleClickFunction.tsx ADDED
@@ -0,0 +1,21 @@
1
+ export interface ICallbacks {
2
+ onSingleClick: (event: React.MouseEvent) => void;
3
+ onDoubleClick: (event: React.MouseEvent) => void;
4
+ }
5
+
6
+ export function setupSingleAndDoubleClick(): (event: React.MouseEvent, cb: ICallbacks) => void {
7
+ let timer: number | undefined;
8
+ let delay: number;
9
+
10
+ return (event, cb: ICallbacks) => {
11
+ clearTimeout(timer);
12
+
13
+ if (event.nativeEvent.detail === 1) {
14
+ timer = window.setTimeout(() => {
15
+ cb.onSingleClick(event);
16
+ }, delay);
17
+ } else if (event.nativeEvent.detail === 2) {
18
+ cb.onDoubleClick(event);
19
+ }
20
+ };
21
+ }