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.
- package/app-typescript/components/Lists/ContentList.tsx +28 -27
- package/app-typescript/components/Lists/TableList.tsx +140 -126
- package/app-typescript/components/SingleAndDoubleClickFunction.tsx +21 -0
- package/dist/examples.bundle.js +1016 -976
- package/dist/playgrounds/react-playgrounds/EditorTest.tsx +18 -10
- package/dist/playgrounds/react-playgrounds/Multiedit.tsx +15 -13
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +136 -125
- package/dist/superdesk-ui.bundle.js +732 -705
- package/dist/vendor.bundle.js +14 -14
- package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +18 -10
- package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +15 -13
- package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +136 -125
- package/package.json +1 -1
- package/react/components/Lists/ContentList.d.ts +2 -5
- package/react/components/Lists/ContentList.js +20 -25
- package/react/components/Lists/TableList.d.ts +4 -7
- package/react/components/Lists/TableList.js +66 -60
- package/react/components/SingleAndDoubleClickFunction.d.ts +6 -0
- package/react/components/SingleAndDoubleClickFunction.js +19 -0
@@ -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<{
|
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
|
-
|
19
|
-
|
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
|
-
|
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.
|
62
|
-
|
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
|
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={
|
154
|
-
|
155
|
-
|
156
|
-
|
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
|
-
{
|
174
|
-
|
175
|
-
<
|
176
|
-
<
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
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={
|
195
|
-
|
196
|
-
|
197
|
-
|
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
|
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
|
-
{
|
208
|
-
|
209
|
-
<
|
210
|
-
<
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
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)
|
218
|
-
<div className={
|
219
|
-
<
|
220
|
-
<
|
221
|
-
|
222
|
-
|
223
|
-
|
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
|
251
|
-
private delay = 200;
|
252
|
-
private prevent = false;
|
275
|
+
private multiClickHandler;
|
253
276
|
|
254
|
-
|
255
|
-
|
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
|
-
|
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
|
-
|
298
|
-
|
304
|
+
<Wrapper>
|
305
|
+
<>
|
299
306
|
<div
|
300
307
|
role='listitem'
|
301
|
-
|
302
|
-
|
303
|
-
|
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
|
-
|
340
|
-
|
341
|
-
|
342
|
-
|
343
|
-
|
344
|
-
|
345
|
-
|
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
|
-
{
|
360
|
-
|
361
|
-
|
362
|
-
|
363
|
-
|
364
|
-
|
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={
|
389
|
-
|
390
|
-
|
391
|
-
|
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
|
+
}
|