superdesk-ui-framework 3.0.1-beta.13 → 3.0.1-beta.14
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/.vscode/settings.json +5 -0
- package/app/styles/_table-list.scss +1 -0
- package/app/styles/dropdowns/_basic-dropdown.scss +6 -0
- package/app-typescript/components/Dropdown.tsx +65 -65
- package/app-typescript/components/DurationInput.tsx +14 -4
- package/app-typescript/components/Lists/ContentList.tsx +28 -4
- package/app-typescript/components/Lists/TableList.tsx +11 -9
- package/app-typescript/dist/components/Alert.d.ts +16 -0
- package/app-typescript/dist/components/Autocomplete.d.ts +48 -0
- package/app-typescript/dist/components/Avatar.d.ts +33 -0
- package/app-typescript/dist/components/Badge.d.ts +13 -0
- package/app-typescript/dist/components/Button.d.ts +23 -0
- package/app-typescript/dist/components/ButtonGroup.d.ts +12 -0
- package/app-typescript/dist/components/CheckButtonGroup.d.ts +11 -0
- package/app-typescript/dist/components/CheckGroup.d.ts +9 -0
- package/app-typescript/dist/components/Checkbox.d.ts +19 -0
- package/app-typescript/dist/components/CheckboxButton.d.ts +19 -0
- package/app-typescript/dist/components/DatePicker.d.ts +37 -0
- package/app-typescript/dist/components/Divider.d.ts +9 -0
- package/app-typescript/dist/components/DonutChart.d.ts +12 -0
- package/app-typescript/dist/components/Dropdown.d.ts +28 -0
- package/app-typescript/dist/components/DropdownFirst.d.ts +42 -0
- package/app-typescript/dist/components/EmptyState.d.ts +11 -0
- package/app-typescript/dist/components/FormLabel.d.ts +9 -0
- package/app-typescript/dist/components/Genie.d.ts +13 -0
- package/app-typescript/dist/components/GridItem.d.ts +69 -0
- package/app-typescript/dist/components/GridList.d.ts +14 -0
- package/app-typescript/dist/components/HeadingText.d.ts +10 -0
- package/app-typescript/dist/components/HelloWorld.d.ts +8 -0
- package/app-typescript/dist/components/Icon.d.ts +12 -0
- package/app-typescript/dist/components/IconButton.d.ts +12 -0
- package/app-typescript/dist/components/IconLabel.d.ts +11 -0
- package/app-typescript/dist/components/Input.d.ts +24 -0
- package/app-typescript/dist/components/Label.d.ts +15 -0
- package/app-typescript/dist/components/LeftMenu.d.ts +26 -0
- package/app-typescript/dist/components/Loader.d.ts +8 -0
- package/app-typescript/dist/components/NavButton.d.ts +15 -0
- package/app-typescript/dist/components/Popover.d.ts +13 -0
- package/app-typescript/dist/components/PropsList.d.ts +15 -0
- package/app-typescript/dist/components/Radio.d.ts +19 -0
- package/app-typescript/dist/components/RadioButton.d.ts +20 -0
- package/app-typescript/dist/components/Select.d.ts +29 -0
- package/app-typescript/dist/components/SelectWithTemplate.d.ts +32 -0
- package/app-typescript/dist/components/SlidingToolbar.d.ts +8 -0
- package/app-typescript/dist/components/StrechBar.d.ts +4 -0
- package/app-typescript/dist/components/SubNav.d.ts +10 -0
- package/app-typescript/dist/components/Switch.d.ts +12 -0
- package/app-typescript/dist/components/TabCustom.d.ts +25 -0
- package/app-typescript/dist/components/TabList.d.ts +22 -0
- package/app-typescript/dist/components/Tag.d.ts +9 -0
- package/app-typescript/dist/components/TagInput.d.ts +7 -0
- package/app-typescript/dist/components/TagInputTest.d.ts +18 -0
- package/app-typescript/dist/components/TimePicker.d.ts +11 -0
- package/app-typescript/dist/components/Tooltip.d.ts +11 -0
- package/app-typescript/dist/components/_Positioner.d.ts +27 -0
- package/app-typescript/dist/index.d.ts +56 -0
- package/dist/examples.bundle.js +538 -122
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +3 -9
- package/dist/playgrounds/react-playgrounds/Rundowns.tsx +9 -19
- package/dist/react/ContentList.tsx +2 -10
- package/dist/react/Dropdowns.tsx +357 -5
- package/dist/react/TableList.tsx +28 -30
- package/dist/superdesk-ui.bundle.css +8 -3
- package/dist/superdesk-ui.bundle.js +232 -94
- package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +3 -9
- package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +9 -19
- package/examples/pages/react/ContentList.tsx +2 -10
- package/examples/pages/react/Dropdowns.tsx +357 -5
- package/examples/pages/react/TableList.tsx +28 -30
- package/package.json +1 -1
- package/react/components/Dropdown.d.ts +4 -4
- package/react/components/Dropdown.js +19 -15
- package/react/components/DurationInput.d.ts +1 -1
- package/react/components/DurationInput.js +14 -4
- package/react/components/Lists/ContentList.d.ts +5 -0
- package/react/components/Lists/ContentList.js +36 -15
- package/react/components/Lists/TableList.d.ts +5 -5
- package/react/components/Lists/TableList.js +6 -4
- package/yarn-error.log +111 -0
@@ -14,7 +14,7 @@ interface IProps {
|
|
14
14
|
export default class TableListDoc extends React.Component<IProps, IState> {
|
15
15
|
constructor(props: IState) {
|
16
16
|
super(props);
|
17
|
-
this.state = {
|
17
|
+
this.state = {
|
18
18
|
array: [
|
19
19
|
{
|
20
20
|
start: <>
|
@@ -40,9 +40,8 @@ export default class TableListDoc extends React.Component<IProps, IState> {
|
|
40
40
|
center: <span>Item 2</span>,
|
41
41
|
end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
|
42
42
|
action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />,
|
43
|
-
onClick: () =>
|
44
|
-
|
45
|
-
}
|
43
|
+
onClick: () => console.log('single'),
|
44
|
+
onDoubleClick: () => console.log('double'),
|
46
45
|
},
|
47
46
|
{
|
48
47
|
start: <>
|
@@ -52,9 +51,9 @@ export default class TableListDoc extends React.Component<IProps, IState> {
|
|
52
51
|
center: <span>Item 3</span>,
|
53
52
|
end: <IconLabel style='translucent' text='Label success' type='success' icon='time' />,
|
54
53
|
action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={() => false} />,
|
55
|
-
onClick: () =>
|
56
|
-
|
57
|
-
|
54
|
+
onClick: () => console.log('single'),
|
55
|
+
onDoubleClick: () => console.log('double'),
|
56
|
+
hexColor: '#ff9808'
|
58
57
|
},
|
59
58
|
]
|
60
59
|
}
|
@@ -71,10 +70,10 @@ export default class TableListDoc extends React.Component<IProps, IState> {
|
|
71
70
|
dragAndDrop
|
72
71
|
addItem
|
73
72
|
array={this.state.array}
|
74
|
-
itemsDropdown={[
|
75
|
-
{ label: '
|
76
|
-
{ label: '
|
77
|
-
{ label: '
|
73
|
+
itemsDropdown={(index) => [
|
74
|
+
{ label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => console.log(index) },
|
75
|
+
{ label: <Label style='translucent' text='prlg' />, onSelect: () => console.log(index) },
|
76
|
+
{ label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => console.log(index) },
|
78
77
|
]} />
|
79
78
|
`}
|
80
79
|
</Markup.ReactMarkupCodePreview>
|
@@ -82,32 +81,31 @@ export default class TableListDoc extends React.Component<IProps, IState> {
|
|
82
81
|
<p className="docs-page__paragraph">With drag and drop functionality:</p>
|
83
82
|
<Markup.ReactMarkup>
|
84
83
|
<Markup.ReactMarkupPreview>
|
85
|
-
|
86
84
|
<TableList
|
87
85
|
dragAndDrop
|
88
86
|
addItem
|
89
|
-
onAddItem={(index, item) => console.log(index, item)}
|
90
87
|
array={this.state.array}
|
91
|
-
itemsDropdown={[
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
88
|
+
itemsDropdown={(index) => [
|
89
|
+
{ label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => console.log(index) },
|
90
|
+
{ label: <Label style='translucent' text='prlg' />, onSelect: () => console.log(index) },
|
91
|
+
{ label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => console.log(index) },
|
92
|
+
]
|
93
|
+
}
|
96
94
|
onDrag={(start, end) => console.log(start, end)}
|
97
95
|
/>
|
98
|
-
|
99
96
|
</Markup.ReactMarkupPreview>
|
100
97
|
<Markup.ReactMarkupCode>{`
|
101
98
|
<TableList
|
102
99
|
dragAndDrop
|
103
100
|
addItem
|
104
101
|
array={this.state.array}
|
105
|
-
itemsDropdown={[
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
102
|
+
itemsDropdown={(index) => [
|
103
|
+
{ label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => console.log(index) },
|
104
|
+
{ label: <Label style='translucent' text='prlg' />, onSelect: () => console.log(index) },
|
105
|
+
{ label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => console.log(index) },
|
106
|
+
]
|
107
|
+
}
|
108
|
+
onDrag={(start, end) => console.log(start, end)}
|
111
109
|
/>
|
112
110
|
`}
|
113
111
|
</Markup.ReactMarkupCode>
|
@@ -116,16 +114,15 @@ export default class TableListDoc extends React.Component<IProps, IState> {
|
|
116
114
|
<h3 className="docs-page__h3">Props</h3>
|
117
115
|
<p className="docs-page__paragraph">TableList</p>
|
118
116
|
<PropsList>
|
119
|
-
<Prop name='array' isRequired={
|
120
|
-
<Prop name='children' isRequired={false} type='React.ReactNode' default='false' description='Children of component.' />
|
117
|
+
<Prop name='array' isRequired={true} type='Array' default='false' description='Array of object.' />
|
121
118
|
<Prop name='addItem' isRequired={false} type='boolean' default='false' description='Functionality to add items to the list.' />
|
122
119
|
<Prop name='dragAndDrop' isRequired={false} type='boolean' default='false' description='Drag&Drop functionality.' />
|
123
|
-
<Prop name='itemsDropdown' isRequired={false} type='React.ReactNode | any' default='false' description='Dropdown for functionality to add items to the list.' />
|
124
120
|
<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='' />
|
126
|
-
<Prop name='
|
121
|
+
<Prop name='showDragHandle' isRequired={false} type='string' default='always' description='"always" | "onHover" | "none".' />
|
122
|
+
<Prop name='readOnly' isRequired={false} type='boolean' default='false' description='When specified, component changes are not enabled.' />
|
127
123
|
<Prop name='onDrag' isRequired={false} type='function' default='false' description='Returns start and end position of draggable item' />
|
128
124
|
<Prop name='onAddItem' isRequired={false} type='function' default='false' description='Returns index of draggable item.' />
|
125
|
+
<Prop name='itemsDropdown' isRequired={false} type='function' default='false' description='Dropdown for adding items in the list. Returns index of draggable item.' />
|
129
126
|
</PropsList>
|
130
127
|
<p className="docs-page__paragraph">array:</p>
|
131
128
|
<PropsList>
|
@@ -133,6 +130,7 @@ export default class TableListDoc extends React.Component<IProps, IState> {
|
|
133
130
|
<Prop name='center' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
|
134
131
|
<Prop name='end' isRequired={false} type='React.ReactNode' default='false' description='Column of individual items of list.' />
|
135
132
|
<Prop name='action' isRequired={false} type='React.ReactNode' default='false' description='Column of individual list items that is displayed on hover.' />
|
133
|
+
<Prop name='hexColor' isRequired={false} type='string' default='false' description='' />
|
136
134
|
<Prop name='onClick' isRequired={false} type='function' default='false' description='onClick functionality.' />
|
137
135
|
<Prop name='onDoubleClick' isRequired={false} type='function' default='false' description='onDoubleClick functionality.' />
|
138
136
|
</PropsList>
|
package/package.json
CHANGED
@@ -1,23 +1,23 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
export interface IMenuItem {
|
3
|
-
label: string;
|
3
|
+
label: string | React.ReactNode;
|
4
4
|
icon?: string;
|
5
5
|
active?: boolean;
|
6
6
|
onSelect(): void;
|
7
7
|
}
|
8
8
|
export interface ISubmenu {
|
9
9
|
type: 'submenu';
|
10
|
-
label: string;
|
10
|
+
label: string | React.ReactNode;
|
11
11
|
icon?: string;
|
12
12
|
items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
|
13
13
|
}
|
14
14
|
export interface IMenuGroup {
|
15
15
|
type: 'group';
|
16
|
-
label?: string;
|
16
|
+
label?: string | React.ReactNode;
|
17
17
|
items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
|
18
18
|
}
|
19
19
|
interface IMenu {
|
20
|
-
label?: string;
|
20
|
+
label?: string | React.ReactNode;
|
21
21
|
align?: 'left' | 'right';
|
22
22
|
items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
|
23
23
|
header?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
|
@@ -24,12 +24,12 @@ var React = __importStar(require("react"));
|
|
24
24
|
var ReactDOM = __importStar(require("react-dom"));
|
25
25
|
var core_1 = require("@popperjs/core");
|
26
26
|
var react_id_generator_1 = require("react-id-generator");
|
27
|
+
var DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
|
27
28
|
var Dropdown = function (_a) {
|
28
29
|
var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, onChange = _a.onChange;
|
29
30
|
var _b = React.useState(false), open = _b[0], setOpen = _b[1];
|
30
31
|
var _c = React.useState(false), change = _c[0], setChange = _c[1];
|
31
32
|
var menuID = (0, react_id_generator_1.useId)()[0];
|
32
|
-
var DROPDOWN_ID = "react-placeholder";
|
33
33
|
var ref = React.useRef(null);
|
34
34
|
var buttonRef = React.useRef(null);
|
35
35
|
var headerElements = header === null || header === void 0 ? void 0 : header.map(function (el, index) {
|
@@ -42,11 +42,10 @@ var Dropdown = function (_a) {
|
|
42
42
|
return each(el, index);
|
43
43
|
});
|
44
44
|
React.useEffect(function () {
|
45
|
-
var existingElement = document.getElementById(
|
45
|
+
var existingElement = document.getElementById(DROPDOWN_ID_CONTAINER);
|
46
46
|
if (!existingElement) {
|
47
47
|
var el = document.createElement("div");
|
48
|
-
el.id =
|
49
|
-
// style placeholder
|
48
|
+
el.id = DROPDOWN_ID_CONTAINER;
|
50
49
|
el.style.position = 'absolute';
|
51
50
|
el.style.top = '0';
|
52
51
|
el.style.left = '0';
|
@@ -61,7 +60,6 @@ var Dropdown = function (_a) {
|
|
61
60
|
}
|
62
61
|
setChange(true);
|
63
62
|
}, [open]);
|
64
|
-
// structure for append menu
|
65
63
|
function createAppendMenu() {
|
66
64
|
if (header && footer) {
|
67
65
|
return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref },
|
@@ -83,7 +81,6 @@ var Dropdown = function (_a) {
|
|
83
81
|
return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref }, dropdownElements));
|
84
82
|
}
|
85
83
|
}
|
86
|
-
// toggle menu
|
87
84
|
function toggleDisplay() {
|
88
85
|
if (!open) {
|
89
86
|
var menuRef_1;
|
@@ -132,15 +129,14 @@ var Dropdown = function (_a) {
|
|
132
129
|
}
|
133
130
|
}
|
134
131
|
function addInPlaceholder() {
|
135
|
-
var placeholder = document.getElementById(
|
132
|
+
var placeholder = document.getElementById(DROPDOWN_ID_CONTAINER);
|
136
133
|
var menu = createAppendMenu();
|
137
134
|
if (open) {
|
138
135
|
return ReactDOM.render(menu, placeholder);
|
139
136
|
}
|
140
137
|
else {
|
141
|
-
|
142
|
-
|
143
|
-
menuDOM.style.display = 'none';
|
138
|
+
if (placeholder) {
|
139
|
+
ReactDOM.unmountComponentAtNode(placeholder);
|
144
140
|
}
|
145
141
|
}
|
146
142
|
}
|
@@ -150,7 +146,7 @@ var Dropdown = function (_a) {
|
|
150
146
|
item['items'].forEach(function (el, key) {
|
151
147
|
submenuItems_1.push(each(el, key));
|
152
148
|
});
|
153
|
-
return (React.createElement(DropdownItemWithSubmenu, { key: index, item: item, subMenuItems: submenuItems_1 }));
|
149
|
+
return (React.createElement(DropdownItemWithSubmenu, { key: index, index: index, item: item, menuID: menuID, subMenuItems: submenuItems_1, onChange: onChange }));
|
154
150
|
}
|
155
151
|
else if (item['type'] === 'group') {
|
156
152
|
var groupItems_1 = [];
|
@@ -220,19 +216,20 @@ var DropdownItem = function (_a) {
|
|
220
216
|
label)));
|
221
217
|
};
|
222
218
|
var DropdownItemWithSubmenu = function (_a) {
|
223
|
-
var index = _a.index, item = _a.item, subMenuItems = _a.subMenuItems;
|
219
|
+
var index = _a.index, item = _a.item, menuID = _a.menuID, subMenuItems = _a.subMenuItems, onChange = _a.onChange;
|
224
220
|
var _b = React.useState(undefined), open = _b[0], setOpen = _b[1];
|
225
221
|
var refButtonSubMenu = React.useRef(null);
|
226
222
|
var refSubMenu = React.useRef(null);
|
223
|
+
var placeholder = document.getElementById(menuID);
|
227
224
|
React.useEffect(function () {
|
228
225
|
var subMenuRef = refSubMenu.current;
|
229
226
|
var subToggleRef = refButtonSubMenu.current;
|
230
227
|
if (open === true) {
|
231
|
-
|
228
|
+
placeholder === null || placeholder === void 0 ? void 0 : placeholder.appendChild(subMenuRef);
|
232
229
|
subMenuRef.style.display = 'block';
|
233
230
|
}
|
234
231
|
else if (open === false) {
|
235
|
-
|
232
|
+
placeholder === null || placeholder === void 0 ? void 0 : placeholder.removeChild(subMenuRef);
|
236
233
|
subMenuRef.style.display = 'none';
|
237
234
|
}
|
238
235
|
if (subMenuRef && subToggleRef) {
|
@@ -243,7 +240,14 @@ var DropdownItemWithSubmenu = function (_a) {
|
|
243
240
|
}, [open]);
|
244
241
|
return (React.createElement("li", { key: index, ref: refButtonSubMenu },
|
245
242
|
React.createElement("div", { className: 'dropdown', onMouseLeave: function () { return setOpen(false); } },
|
246
|
-
React.createElement("button", { className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0,
|
243
|
+
React.createElement("button", { className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onClick: function () {
|
244
|
+
if (item.onSelect) {
|
245
|
+
item.onSelect();
|
246
|
+
}
|
247
|
+
if (onChange) {
|
248
|
+
onChange();
|
249
|
+
}
|
250
|
+
}, onMouseOver: function () { return setOpen(true); } },
|
247
251
|
item['icon'] ? React.createElement("i", { className: 'icon-' + item['icon'] }) : null,
|
248
252
|
item['label']),
|
249
253
|
React.createElement("ul", { role: 'menu', ref: refSubMenu, style: { display: 'none' }, className: 'dropdown__menu' }, subMenuItems))));
|
@@ -38,5 +38,5 @@ export declare class DurationInput extends React.PureComponent<IProps, IState> {
|
|
38
38
|
handleFocusOnKeyUp(event: React.KeyboardEvent<HTMLInputElement>, ref: HTMLInputElement | null): void;
|
39
39
|
render(): JSX.Element;
|
40
40
|
}
|
41
|
-
export declare function getDurationString(seconds: number): string;
|
41
|
+
export declare function getDurationString(seconds: number, zero?: boolean): string;
|
42
42
|
export {};
|
@@ -315,7 +315,7 @@ var DurationInput = /** @class */ (function (_super) {
|
|
315
315
|
return DurationInput;
|
316
316
|
}(React.PureComponent));
|
317
317
|
exports.DurationInput = DurationInput;
|
318
|
-
function getDurationString(seconds) {
|
318
|
+
function getDurationString(seconds, zero) {
|
319
319
|
function zeroPad(value) {
|
320
320
|
if (value.toString().length === 1 || value === 0) {
|
321
321
|
return "0".concat(value);
|
@@ -327,9 +327,19 @@ function getDurationString(seconds) {
|
|
327
327
|
return value;
|
328
328
|
}
|
329
329
|
}
|
330
|
-
var hour
|
331
|
-
var minute
|
332
|
-
var second
|
330
|
+
var hour;
|
331
|
+
var minute;
|
332
|
+
var second;
|
333
|
+
if (zero) {
|
334
|
+
hour = zeroPad(Math.floor(seconds / 3600));
|
335
|
+
minute = zeroPad(Math.floor((seconds % 3600) / 60));
|
336
|
+
second = zeroPad(Math.floor(seconds % 60));
|
337
|
+
}
|
338
|
+
else {
|
339
|
+
hour = Math.floor(seconds / 3600);
|
340
|
+
minute = Math.floor((seconds % 3600) / 60);
|
341
|
+
second = Math.floor(seconds % 60);
|
342
|
+
}
|
333
343
|
if (Number(hour) === 0 && Number(minute) > 0) {
|
334
344
|
return "".concat(minute, "m ").concat(second, "s");
|
335
345
|
}
|
@@ -17,6 +17,11 @@ interface IPropsItem {
|
|
17
17
|
onDoubleClick?(): void;
|
18
18
|
}
|
19
19
|
declare class ContentListItem extends React.PureComponent<IPropsItem> {
|
20
|
+
private timer;
|
21
|
+
private delay;
|
22
|
+
private prevent;
|
23
|
+
onSingleClick: () => void;
|
24
|
+
onDoubleClick: () => void;
|
20
25
|
render(): JSX.Element;
|
21
26
|
}
|
22
27
|
interface IProps {
|
@@ -43,28 +43,49 @@ var classnames_1 = __importDefault(require("classnames"));
|
|
43
43
|
var ContentListItem = /** @class */ (function (_super) {
|
44
44
|
__extends(ContentListItem, _super);
|
45
45
|
function ContentListItem() {
|
46
|
-
|
46
|
+
var _this = _super !== null && _super.apply(this, arguments) || this;
|
47
|
+
_this.delay = 200;
|
48
|
+
_this.prevent = false;
|
49
|
+
_this.onSingleClick = function () {
|
50
|
+
_this.timer = setTimeout(function () {
|
51
|
+
if (!_this.prevent) {
|
52
|
+
if (_this.props.onClick) {
|
53
|
+
_this.props.onClick();
|
54
|
+
}
|
55
|
+
}
|
56
|
+
}, _this.delay);
|
57
|
+
};
|
58
|
+
_this.onDoubleClick = function () {
|
59
|
+
clearTimeout(_this.timer);
|
60
|
+
_this.prevent = true;
|
61
|
+
if (_this.props.onDoubleClick) {
|
62
|
+
_this.props.onDoubleClick();
|
63
|
+
}
|
64
|
+
setTimeout(function () {
|
65
|
+
_this.prevent = false;
|
66
|
+
}, _this.delay);
|
67
|
+
};
|
68
|
+
return _this;
|
47
69
|
}
|
48
70
|
ContentListItem.prototype.render = function () {
|
49
|
-
var classes = (0, classnames_1.default)('sd-list-item sd-
|
71
|
+
var classes = (0, classnames_1.default)('sd-list-item sd-shadow--z1', {
|
50
72
|
'sd-list-item--activated': this.props.activated,
|
51
73
|
'sd-list-item--selected': this.props.selected,
|
52
74
|
'fetched': this.props.archived,
|
53
75
|
'actioning': this.props.loading,
|
54
76
|
});
|
55
|
-
return (React.createElement("div", { className: classes, onClick: this.
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
return
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
React.createElement("div", { className: "sd-list-item__action-menu" }, this.props.action))));
|
77
|
+
return (React.createElement("div", { className: classes, onClick: this.onSingleClick, onDoubleClick: this.onDoubleClick },
|
78
|
+
this.props.locked
|
79
|
+
? React.createElement("div", { className: "sd-list-item__border sd-list-item__border--locked" })
|
80
|
+
: React.createElement("div", { className: "sd-list-item__border" }),
|
81
|
+
this.props.itemColum.map(function (item, index) {
|
82
|
+
return React.createElement("div", { className: "sd-list-item__column ".concat(item.fullwidth && 'sd-list-item__column--grow', " ").concat(!item.border && 'sd-list-item__column--no-border'), key: index }, item.itemRow.map(function (e, i) {
|
83
|
+
return (item.itemRow.length <= 1
|
84
|
+
? React.createElement(React.Fragment, { key: i }, e.content)
|
85
|
+
: React.createElement("div", { className: "sd-list-item__row", key: i }, e.content));
|
86
|
+
}));
|
87
|
+
}),
|
88
|
+
React.createElement("div", { className: "sd-list-item__action-menu" }, this.props.action)));
|
68
89
|
};
|
69
90
|
return ContentListItem;
|
70
91
|
}(React.PureComponent));
|
@@ -5,21 +5,21 @@ export interface IProps {
|
|
5
5
|
array: Array<IPropsArrayItem>;
|
6
6
|
addItem?: boolean;
|
7
7
|
dragAndDrop?: boolean;
|
8
|
-
itemsDropdown?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
|
9
8
|
className?: string;
|
10
9
|
readOnly?: boolean;
|
11
10
|
showDragHandle?: 'always' | 'onHover' | 'none';
|
12
11
|
onDrag?(start: number, end: number): void;
|
13
12
|
onAddItem?(index: number, item?: IPropsArrayItem): void;
|
13
|
+
itemsDropdown?(index?: number): Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
|
14
14
|
}
|
15
15
|
export interface IPropsArrayItem {
|
16
16
|
start?: React.ReactNode;
|
17
17
|
center?: React.ReactNode;
|
18
18
|
end?: React.ReactNode;
|
19
19
|
action?: React.ReactNode;
|
20
|
+
hexColor?: string;
|
20
21
|
onClick?(): void;
|
21
22
|
onDoubleClick?(): void;
|
22
|
-
hexColor?: string;
|
23
23
|
}
|
24
24
|
interface IState {
|
25
25
|
items: Array<IPropsArrayItem>;
|
@@ -38,14 +38,14 @@ export interface IPropsItem {
|
|
38
38
|
end?: React.ReactNode;
|
39
39
|
action?: React.ReactNode;
|
40
40
|
addItem?: boolean;
|
41
|
-
itemsDropdown?: any;
|
42
41
|
dragAndDrop?: boolean;
|
42
|
+
hexColor?: string;
|
43
|
+
showDragHandle?: 'always' | 'onHover' | 'none';
|
43
44
|
onClick?(): void;
|
44
45
|
onDoubleClick?(): void;
|
45
46
|
onSelect?(): void;
|
46
47
|
onAddItem?(e: number): void;
|
47
|
-
|
48
|
-
showDragHandle?: 'always' | 'onHover' | 'none';
|
48
|
+
itemsDropdown?(index?: number): Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
|
49
49
|
}
|
50
50
|
declare class TableListItem extends React.PureComponent<IPropsItem> {
|
51
51
|
private timer;
|
@@ -98,7 +98,7 @@ var TableList = /** @class */ (function (_super) {
|
|
98
98
|
this.props.onDrag(result.source.index, result.destination.index) : null;
|
99
99
|
};
|
100
100
|
TableList.prototype.dropDown = function () {
|
101
|
-
return (React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
|
101
|
+
return (React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown ? this.props.itemsDropdown() : [] },
|
102
102
|
React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } })));
|
103
103
|
};
|
104
104
|
TableList.prototype.render = function () {
|
@@ -117,7 +117,9 @@ var TableList = /** @class */ (function (_super) {
|
|
117
117
|
_this.state.items.map(function (item, index) { return (React.createElement(react_beautiful_dnd_1.Draggable, { key: index, draggableId: "".concat(index), index: index }, function (provided2, _snapshot2) { return (React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
|
118
118
|
React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
|
119
119
|
? item.onDoubleClick
|
120
|
-
: undefined, addItem: _this.props.addItem, itemsDropdown:
|
120
|
+
: undefined, addItem: _this.props.addItem, itemsDropdown: function () { return _this.props.itemsDropdown
|
121
|
+
? _this.props.itemsDropdown(index)
|
122
|
+
: []; }, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
|
121
123
|
&& _this.props.onAddItem(index, item); }, showDragHandle: _this.props.showDragHandle }))); })); }),
|
122
124
|
provided.placeholder,
|
123
125
|
(_this.props.addItem && !_this.props.readOnly) &&
|
@@ -127,7 +129,7 @@ var TableList = /** @class */ (function (_super) {
|
|
127
129
|
: React.createElement("ul", { className: classes },
|
128
130
|
this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
|
129
131
|
? item.onDoubleClick
|
130
|
-
: undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
|
132
|
+
: undefined, addItem: _this.props.addItem, itemsDropdown: function () { return _this.props.itemsDropdown ? _this.props.itemsDropdown(index) : []; }, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
|
131
133
|
&& _this.props.onAddItem(index, item); } })); }),
|
132
134
|
(this.props.addItem && !this.props.readOnly) &&
|
133
135
|
React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
|
@@ -189,7 +191,7 @@ var TableListItem = /** @class */ (function (_super) {
|
|
189
191
|
React.createElement("div", { className: 'table-list__add-bar-container' },
|
190
192
|
React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
|
191
193
|
React.createElement("div", { className: 'table-list__add-bar' },
|
192
|
-
React.createElement(Dropdown_1.Dropdown, { onChange: this.props.onAddItem, items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
|
194
|
+
React.createElement(Dropdown_1.Dropdown, { onChange: this.props.onAddItem, items: this.props.itemsDropdown ? this.props.itemsDropdown() : [] },
|
193
195
|
React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }))))))
|
194
196
|
: React.createElement("li", { className: "".concat(classes, " table-list__item--margin"), onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); } },
|
195
197
|
React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
|
package/yarn-error.log
ADDED
@@ -0,0 +1,111 @@
|
|
1
|
+
Arguments:
|
2
|
+
/usr/local/bin/node /usr/local/bin/yarn install
|
3
|
+
|
4
|
+
PATH:
|
5
|
+
/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
|
6
|
+
|
7
|
+
Yarn version:
|
8
|
+
1.21.1
|
9
|
+
|
10
|
+
Node version:
|
11
|
+
12.14.1
|
12
|
+
|
13
|
+
Platform:
|
14
|
+
linux x64
|
15
|
+
|
16
|
+
Trace:
|
17
|
+
Error: getaddrinfo EAI_AGAIN registry.yarnpkg.com
|
18
|
+
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:60:26)
|
19
|
+
|
20
|
+
npm manifest:
|
21
|
+
{
|
22
|
+
"name": "superdesk-ui-framework",
|
23
|
+
"version": "2.1.11",
|
24
|
+
"license": "AGPL-3.0",
|
25
|
+
"repository": {
|
26
|
+
"type": "git",
|
27
|
+
"url": "https://github.com/superdesk/superdesk-ui-framework.git"
|
28
|
+
},
|
29
|
+
"main": "dist/superdesk-ui.bundle.js",
|
30
|
+
"types": "app-typescript/dist/index.d.ts",
|
31
|
+
"contributors": [
|
32
|
+
"Nemanja Pavlovic",
|
33
|
+
"Vladimir Stefanovic",
|
34
|
+
"Darko Tomic",
|
35
|
+
"Aleksandar Jelicic",
|
36
|
+
"Tomas Kikutis"
|
37
|
+
],
|
38
|
+
"scripts": {
|
39
|
+
"start": "webpack-dev-server --config tasks/webpack.dev.js",
|
40
|
+
"server": "webpack --watch",
|
41
|
+
"build": "webpack && npm run lint && tsc",
|
42
|
+
"lint": "eslint app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'",
|
43
|
+
"prepublishOnly": "npm run build",
|
44
|
+
"prepublish": "patch-package"
|
45
|
+
},
|
46
|
+
"devDependencies": {
|
47
|
+
"@types/classnames": "^2.2.9",
|
48
|
+
"@types/lodash": "4.14.149",
|
49
|
+
"@types/react": "16.8.23",
|
50
|
+
"@types/react-dom": "16.8.0",
|
51
|
+
"@types/react-router-dom": "^5.1.2",
|
52
|
+
"angular": "^1.7.9",
|
53
|
+
"angular-animate": "^1.7.9",
|
54
|
+
"angular-route": "^1.7.9",
|
55
|
+
"babel-core": "^6.26.0",
|
56
|
+
"babel-loader": "^7.1.2",
|
57
|
+
"babel-plugin-transform-object-rest-spread": "^6.26.0",
|
58
|
+
"babel-preset-es2015": "^6.24.1",
|
59
|
+
"babel-preset-react": "^6.24.1",
|
60
|
+
"classnames": "^2.2.5",
|
61
|
+
"clean-webpack-plugin": "^1.0.0",
|
62
|
+
"code-prettify": "^0.1.0",
|
63
|
+
"copy-webpack-plugin": "^4.6.0",
|
64
|
+
"css-loader": "^2.1.1",
|
65
|
+
"eslint": "^4.6.1",
|
66
|
+
"eslint-loader": "^1.9.0",
|
67
|
+
"eslint-plugin-angular": "^3.1.1",
|
68
|
+
"eslint-plugin-react": "^7.3.0",
|
69
|
+
"extract-text-webpack-plugin": "^3.0.2",
|
70
|
+
"file-loader": "^0.11.2",
|
71
|
+
"html-loader": "^0.5.1",
|
72
|
+
"html-webpack-plugin": "^2.30.1",
|
73
|
+
"jquery": "^3.1.1",
|
74
|
+
"jquery-ui": "^1.12.1",
|
75
|
+
"lodash": "4.17.15",
|
76
|
+
"node-sass": "^4.5.3",
|
77
|
+
"patch-package": "6.2.0",
|
78
|
+
"prismjs": "^1.17.1",
|
79
|
+
"prop-types": "^15.6.0",
|
80
|
+
"react": "16.8.6",
|
81
|
+
"react-bootstrap": "^0.31.2",
|
82
|
+
"react-dom": "16.8.6",
|
83
|
+
"react-redux": "^5.0.6",
|
84
|
+
"react-router-dom": "^5.1.2",
|
85
|
+
"redux": "^3.7.2",
|
86
|
+
"redux-form": "^7.0.4",
|
87
|
+
"sass-loader": "^6.0.6",
|
88
|
+
"style-loader": "^0.18.2",
|
89
|
+
"superdesk-code-style": "^1.1.2",
|
90
|
+
"ts-loader": "^6.0.2",
|
91
|
+
"tslint": "^5.18.0",
|
92
|
+
"typescript": "^3.5.1",
|
93
|
+
"url-loader": "^1.1.2",
|
94
|
+
"webpack": "^3.5.5",
|
95
|
+
"webpack-cli": "3.3.10",
|
96
|
+
"webpack-dev-server": "2.11.1",
|
97
|
+
"webpack-merge": "^4.2.1"
|
98
|
+
},
|
99
|
+
"dependencies": {
|
100
|
+
"date-fns": "2.7.0",
|
101
|
+
"popper.js": "1.14.4",
|
102
|
+
"primeicons": "2.0.0",
|
103
|
+
"primereact": "3.3.2"
|
104
|
+
}
|
105
|
+
}
|
106
|
+
|
107
|
+
yarn manifest:
|
108
|
+
No manifest
|
109
|
+
|
110
|
+
Lockfile:
|
111
|
+
No lockfile
|