superdesk-ui-framework 3.0.7 → 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.
@@ -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'}`}
@@ -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}
@@ -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
+ }