superdesk-ui-framework 3.0.1-beta.11 → 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 (32) hide show
  1. package/app/styles/_modals.scss +3 -3
  2. package/app/styles/_table-list.scss +100 -11
  3. package/app/styles/grids/_grid-layout.scss +3 -0
  4. package/app-typescript/components/Dropdown.tsx +20 -7
  5. package/app-typescript/components/DurationInput.tsx +7 -1
  6. package/app-typescript/components/Layouts/CoreLayout.tsx +2 -1
  7. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +7 -1
  8. package/app-typescript/components/Lists/TableList.tsx +138 -25
  9. package/app-typescript/components/SearchBar.tsx +11 -3
  10. package/app-typescript/components/TimePicker.tsx +2 -13
  11. package/dist/examples.bundle.js +1681 -1533
  12. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +1 -0
  13. package/dist/react/TableList.tsx +15 -119
  14. package/dist/superdesk-ui.bundle.css +85 -17
  15. package/dist/superdesk-ui.bundle.js +1476 -1316
  16. package/dist/vendor.bundle.js +14 -14
  17. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +1 -0
  18. package/examples/pages/react/TableList.tsx +15 -119
  19. package/package.json +1 -1
  20. package/react/components/Dropdown.d.ts +2 -1
  21. package/react/components/Dropdown.js +9 -4
  22. package/react/components/DurationInput.js +9 -1
  23. package/react/components/Layouts/CoreLayout.d.ts +1 -0
  24. package/react/components/Layouts/CoreLayout.js +1 -1
  25. package/react/components/Layouts/CoreLayoutMain.d.ts +1 -0
  26. package/react/components/Layouts/CoreLayoutMain.js +8 -1
  27. package/react/components/Lists/TableList.d.ts +22 -6
  28. package/react/components/Lists/TableList.js +78 -19
  29. package/react/components/SearchBar.d.ts +1 -1
  30. package/react/components/SearchBar.js +15 -7
  31. package/react/components/TimePicker.d.ts +1 -5
  32. package/react/components/TimePicker.js +3 -7
@@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
70
70
  /******/ __webpack_require__.p = "";
71
71
  /******/
72
72
  /******/ // Load entry module and return exports
73
- /******/ return __webpack_require__(__webpack_require__.s = 529);
73
+ /******/ return __webpack_require__(__webpack_require__.s = 528);
74
74
  /******/ })
75
75
  /************************************************************************/
76
76
  /******/ ({
@@ -28246,7 +28246,7 @@ module.exports = function(module) {
28246
28246
 
28247
28247
  /***/ }),
28248
28248
 
28249
- /***/ 529:
28249
+ /***/ 528:
28250
28250
  /***/ (function(module, exports, __webpack_require__) {
28251
28251
 
28252
28252
  "use strict";
@@ -28256,11 +28256,11 @@ __webpack_require__(33);
28256
28256
 
28257
28257
  __webpack_require__(41);
28258
28258
 
28259
- __webpack_require__(530);
28259
+ __webpack_require__(529);
28260
28260
 
28261
- __webpack_require__(532);
28261
+ __webpack_require__(531);
28262
28262
 
28263
- __webpack_require__(534);
28263
+ __webpack_require__(533);
28264
28264
 
28265
28265
  __webpack_require__(0);
28266
28266
 
@@ -28268,7 +28268,7 @@ __webpack_require__(9);
28268
28268
 
28269
28269
  /***/ }),
28270
28270
 
28271
- /***/ 530:
28271
+ /***/ 529:
28272
28272
  /***/ (function(module, exports, __webpack_require__) {
28273
28273
 
28274
28274
  var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -28292,7 +28292,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
28292
28292
  if ( true ) {
28293
28293
 
28294
28294
  // AMD. Register as an anonymous module.
28295
- !(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(41), __webpack_require__(531) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
28295
+ !(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(41), __webpack_require__(530) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
28296
28296
  __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
28297
28297
  (__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
28298
28298
  __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
@@ -29030,7 +29030,7 @@ return $.widget;
29030
29030
 
29031
29031
  /***/ }),
29032
29032
 
29033
- /***/ 531:
29033
+ /***/ 530:
29034
29034
  /***/ (function(module, exports, __webpack_require__) {
29035
29035
 
29036
29036
  var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;( function( factory ) {
@@ -29060,16 +29060,16 @@ return $.ui.version = "1.13.0";
29060
29060
 
29061
29061
  /***/ }),
29062
29062
 
29063
- /***/ 532:
29063
+ /***/ 531:
29064
29064
  /***/ (function(module, exports, __webpack_require__) {
29065
29065
 
29066
- __webpack_require__(533);
29066
+ __webpack_require__(532);
29067
29067
  module.exports = angular;
29068
29068
 
29069
29069
 
29070
29070
  /***/ }),
29071
29071
 
29072
- /***/ 533:
29072
+ /***/ 532:
29073
29073
  /***/ (function(module, exports, __webpack_require__) {
29074
29074
 
29075
29075
  /* WEBPACK VAR INJECTION */(function(__webpack_provided_window_dot_jQuery) {/**
@@ -65676,16 +65676,16 @@ $provide.value("$locale", {
65676
65676
 
65677
65677
  /***/ }),
65678
65678
 
65679
- /***/ 534:
65679
+ /***/ 533:
65680
65680
  /***/ (function(module, exports, __webpack_require__) {
65681
65681
 
65682
- __webpack_require__(535);
65682
+ __webpack_require__(534);
65683
65683
  module.exports = 'ngAnimate';
65684
65684
 
65685
65685
 
65686
65686
  /***/ }),
65687
65687
 
65688
- /***/ 535:
65688
+ /***/ 534:
65689
65689
  /***/ (function(module, exports) {
65690
65690
 
65691
65691
  /**
@@ -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
  )
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "superdesk-ui-framework",
3
- "version": "3.0.1-beta.11",
3
+ "version": "3.0.1-beta.12",
4
4
  "license": "AGPL-3.0",
5
5
  "repository": {
6
6
  "type": "git",
@@ -24,6 +24,7 @@ interface IMenu {
24
24
  footer?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
25
25
  append?: boolean;
26
26
  children: React.ReactNode;
27
+ onChange?(event?: any): void;
27
28
  }
28
- export declare const Dropdown: ({ items, header, footer, children, append, align, }: IMenu) => JSX.Element;
29
+ export declare const Dropdown: ({ items, header, footer, children, append, align, onChange, }: IMenu) => JSX.Element;
29
30
  export {};
@@ -25,7 +25,7 @@ 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
27
  var Dropdown = function (_a) {
28
- var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align;
28
+ var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, onChange = _a.onChange;
29
29
  var _b = React.useState(false), open = _b[0], setOpen = _b[1];
30
30
  var _c = React.useState(false), change = _c[0], setChange = _c[1];
31
31
  var menuID = (0, react_id_generator_1.useId)()[0];
@@ -181,7 +181,7 @@ var Dropdown = function (_a) {
181
181
  return (React.createElement("li", { className: "dropdown__menu-divider", key: index }));
182
182
  }
183
183
  else {
184
- return (React.createElement(DropdownItem, { key: index, label: item['label'], icon: item['icon'], active: item['active'], onSelect: item['onSelect'] }));
184
+ return (React.createElement(DropdownItem, { key: index, label: item['label'], icon: item['icon'], active: item['active'], onSelect: item['onSelect'], onChange: onChange }));
185
185
  }
186
186
  }
187
187
  return (React.createElement("div", { className: 'dropdown ' + (open ? 'open' : '') },
@@ -223,9 +223,14 @@ var Dropdown = function (_a) {
223
223
  };
224
224
  exports.Dropdown = Dropdown;
225
225
  var DropdownItem = function (_a) {
226
- var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect;
226
+ var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect, onChange = _a.onChange;
227
227
  return (React.createElement("li", { role: 'none', className: active ? 'dropdown__menu-item--active' : '' },
228
- React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick: onSelect },
228
+ React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick: function () {
229
+ onSelect();
230
+ if (onChange) {
231
+ onChange();
232
+ }
233
+ } },
229
234
  React.createElement("i", { className: icon ? ('icon-' + icon) : '' }),
230
235
  label)));
231
236
  };
@@ -330,6 +330,14 @@ function getDurationString(seconds) {
330
330
  var hour = zeroPad(Math.floor(seconds / 3600));
331
331
  var minute = zeroPad(Math.floor((seconds % 3600) / 60));
332
332
  var second = zeroPad(Math.floor(seconds % 60));
333
- return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
333
+ if (Number(hour) === 0 && Number(minute) > 0) {
334
+ return "".concat(minute, "m ").concat(second, "s");
335
+ }
336
+ else if (Number(hour) === 0 && Number(minute) === 0) {
337
+ return "".concat(second, "s");
338
+ }
339
+ else {
340
+ return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
341
+ }
334
342
  }
335
343
  exports.getDurationString = getDurationString;
@@ -12,6 +12,7 @@ interface IProps {
12
12
  menuId?: string;
13
13
  ariaControls?: string;
14
14
  buttonAnimation?: 'spin' | 'squeeze' | 'none';
15
+ editorFullWidth?: boolean;
15
16
  }
16
17
  export declare class CoreLayout extends React.PureComponent<IProps> {
17
18
  render(): JSX.Element;
@@ -46,7 +46,7 @@ var CoreLayout = /** @class */ (function (_super) {
46
46
  return (React.createElement(_1.CoreLayoutContainer, null,
47
47
  this.props.slideInMenu && (React.createElement(_1.CoreLayoutSlideInMenu, { menuId: this.props.menuId, menuOpen: this.props.menuOpen }, this.props.slideInMenu)),
48
48
  this.props.topMenu && (React.createElement(_1.CoreLayoutTopMenu, { buttonAnimation: this.props.buttonAnimation, heading: this.props.heading, onClick: this.props.onClick, active: this.props.active, ariaControls: this.props.ariaControls }, this.props.topMenu)),
49
- React.createElement(_1.CoreLayoutMain, null, this.props.children),
49
+ React.createElement(_1.CoreLayoutMain, { editorFullWidth: this.props.editorFullWidth }, this.props.children),
50
50
  this.props.footer && (React.createElement(_1.CoreLayoutFooter, null, this.props.footer)),
51
51
  this.props.overlay && (React.createElement(_1.CoreLayoutOverlay, null, this.props.overlay))));
52
52
  };
@@ -2,6 +2,7 @@ import * as React from 'react';
2
2
  interface IProps {
3
3
  children?: React.ReactNode;
4
4
  id?: string;
5
+ editorFullWidth?: boolean;
5
6
  }
6
7
  export declare class CoreLayoutMain extends React.PureComponent<IProps> {
7
8
  render(): JSX.Element;
@@ -33,16 +33,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
33
33
  __setModuleDefault(result, mod);
34
34
  return result;
35
35
  };
36
+ var __importDefault = (this && this.__importDefault) || function (mod) {
37
+ return (mod && mod.__esModule) ? mod : { "default": mod };
38
+ };
36
39
  Object.defineProperty(exports, "__esModule", { value: true });
37
40
  exports.CoreLayoutMain = void 0;
38
41
  var React = __importStar(require("react"));
42
+ var classnames_1 = __importDefault(require("classnames"));
39
43
  var CoreLayoutMain = /** @class */ (function (_super) {
40
44
  __extends(CoreLayoutMain, _super);
41
45
  function CoreLayoutMain() {
42
46
  return _super !== null && _super.apply(this, arguments) || this;
43
47
  }
44
48
  CoreLayoutMain.prototype.render = function () {
45
- return (React.createElement("section", { id: this.props.id, className: 'sd-content sd-content-wrapper' }, this.props.children));
49
+ var classes = (0, classnames_1.default)('sd-content sd-content-wrapper', {
50
+ 'sd-content-wrapper--editor-full': this.props.editorFullWidth,
51
+ });
52
+ return (React.createElement("section", { id: this.props.id, className: classes }, this.props.children));
46
53
  };
47
54
  return CoreLayoutMain;
48
55
  }(React.PureComponent));
@@ -2,13 +2,15 @@ import * as React from 'react';
2
2
  import { DropResult } from "react-beautiful-dnd";
3
3
  import { IMenuItem, ISubmenu, IMenuGroup } from '../Dropdown';
4
4
  export interface IProps {
5
- children?: React.ReactNode;
6
5
  array: Array<IPropsArrayItem>;
7
6
  addItem?: boolean;
8
7
  dragAndDrop?: boolean;
9
8
  itemsDropdown?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
10
9
  className?: string;
10
+ readOnly?: boolean;
11
+ showDragHandle?: 'always' | 'onHover' | 'none';
11
12
  onDrag?(start: number, end: number): void;
13
+ onAddItem?(index: number, item?: IPropsArrayItem): void;
12
14
  }
13
15
  export interface IPropsArrayItem {
14
16
  start?: React.ReactNode;
@@ -16,15 +18,19 @@ export interface IPropsArrayItem {
16
18
  end?: React.ReactNode;
17
19
  action?: React.ReactNode;
18
20
  onClick?(): void;
21
+ onDoubleClick?(): void;
22
+ hexColor?: string;
19
23
  }
20
- declare class TableList extends React.PureComponent<IProps, {
24
+ interface IState {
21
25
  items: Array<IPropsArrayItem>;
22
- }> {
23
- constructor(props: Readonly<IProps>);
26
+ }
27
+ declare class TableList extends React.PureComponent<IProps, IState> {
28
+ constructor(props: IProps);
24
29
  componentDidMount(): void;
25
- componentDidUpdate(prevProps: Readonly<IProps>): void;
30
+ componentDidUpdate(prevProps: IProps): void;
26
31
  onDragEnd(result: DropResult): void | null;
27
- render(): false | "" | 0 | JSX.Element | null | undefined;
32
+ dropDown(): JSX.Element;
33
+ render(): JSX.Element | null;
28
34
  }
29
35
  export interface IPropsItem {
30
36
  start?: React.ReactNode;
@@ -35,8 +41,18 @@ export interface IPropsItem {
35
41
  itemsDropdown?: any;
36
42
  dragAndDrop?: boolean;
37
43
  onClick?(): void;
44
+ onDoubleClick?(): void;
45
+ onSelect?(): void;
46
+ onAddItem?(e: number): void;
47
+ hexColor?: string;
48
+ showDragHandle?: 'always' | 'onHover' | 'none';
38
49
  }
39
50
  declare class TableListItem extends React.PureComponent<IPropsItem> {
51
+ private timer;
52
+ private delay;
53
+ private prevent;
54
+ onSingleClick: () => void;
55
+ onDoubleClick: () => void;
40
56
  render(): JSX.Element;
41
57
  }
42
58
  export { TableList, TableListItem };
@@ -69,16 +69,21 @@ var TableList = /** @class */ (function (_super) {
69
69
  items: [],
70
70
  };
71
71
  _this.onDragEnd = _this.onDragEnd.bind(_this);
72
+ _this.dropDown = _this.dropDown.bind(_this);
72
73
  return _this;
73
74
  }
74
75
  TableList.prototype.componentDidMount = function () {
75
- this.setState({ items: this.props.array });
76
+ if (this.props.array) {
77
+ this.setState({ items: this.props.array });
78
+ }
76
79
  };
77
80
  TableList.prototype.componentDidUpdate = function (prevProps) {
78
- if (prevProps.array !== this.props.array) {
79
- this.setState({
80
- items: this.props.array,
81
- });
81
+ if (this.props.array) {
82
+ if (prevProps.array !== this.props.array) {
83
+ this.setState({
84
+ items: this.props.array,
85
+ });
86
+ }
82
87
  }
83
88
  };
84
89
  TableList.prototype.onDragEnd = function (result) {
@@ -92,24 +97,47 @@ var TableList = /** @class */ (function (_super) {
92
97
  return this.props.onDrag ?
93
98
  this.props.onDrag(result.source.index, result.destination.index) : null;
94
99
  };
100
+ TableList.prototype.dropDown = function () {
101
+ return (React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
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
+ };
95
104
  TableList.prototype.render = function () {
96
105
  var _a;
97
106
  var _this = this;
98
- var classes = (0, classnames_1.default)((_a = {
99
- 'table-list': !this.props.addItem
107
+ var classes = (0, classnames_1.default)('', (_a = {
108
+ 'table-list': !this.props.addItem,
109
+ 'table-list--read-only': this.props.readOnly
100
110
  },
101
111
  _a["".concat(this.props.className)] = this.props.className,
102
112
  _a));
103
- return (this.props.array ?
104
- this.props.dragAndDrop ?
105
- React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
113
+ return (this.state.items.length > 0
114
+ ? this.props.dragAndDrop
115
+ ? React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
106
116
  React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable" }, function (provided, _snapshot) { return (React.createElement("ul", __assign({ className: classes, ref: provided.innerRef }, provided.droppableProps),
107
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),
108
- 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, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown }))); })); }),
109
- provided.placeholder)); }))
110
- : React.createElement("ul", { className: classes }, 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, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown })); }))
111
- : this.props.children &&
112
- React.createElement("ul", { className: classes }, this.props.children));
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
+ ? item.onDoubleClick
120
+ : undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
121
+ && _this.props.onAddItem(index, item); }, showDragHandle: _this.props.showDragHandle }))); })); }),
122
+ provided.placeholder,
123
+ (_this.props.addItem && !_this.props.readOnly) &&
124
+ React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
125
+ React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
126
+ React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, _this.dropDown()))))); }))
127
+ : React.createElement("ul", { className: classes },
128
+ 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
+ ? item.onDoubleClick
130
+ : undefined, addItem: _this.props.addItem, itemsDropdown: _this.props.itemsDropdown, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
131
+ && _this.props.onAddItem(index, item); } })); }),
132
+ (this.props.addItem && !this.props.readOnly) &&
133
+ React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
134
+ React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
135
+ React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
136
+ : (this.props.addItem && !this.props.readOnly) ? React.createElement("ul", { className: classes },
137
+ React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
138
+ React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
139
+ React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
140
+ : null);
113
141
  };
114
142
  return TableList;
115
143
  }(React.PureComponent));
@@ -117,12 +145,42 @@ exports.TableList = TableList;
117
145
  var TableListItem = /** @class */ (function (_super) {
118
146
  __extends(TableListItem, _super);
119
147
  function TableListItem() {
120
- return _super !== null && _super.apply(this, arguments) || this;
148
+ var _this = _super !== null && _super.apply(this, arguments) || this;
149
+ _this.delay = 200;
150
+ _this.prevent = false;
151
+ _this.onSingleClick = function () {
152
+ _this.timer = setTimeout(function () {
153
+ if (!_this.prevent) {
154
+ if (_this.props.onClick) {
155
+ _this.props.onClick();
156
+ }
157
+ }
158
+ }, _this.delay);
159
+ };
160
+ _this.onDoubleClick = function () {
161
+ clearTimeout(_this.timer);
162
+ _this.prevent = true;
163
+ if (_this.props.onDoubleClick) {
164
+ _this.props.onDoubleClick();
165
+ }
166
+ setTimeout(function () {
167
+ _this.prevent = false;
168
+ }, _this.delay);
169
+ };
170
+ return _this;
121
171
  }
122
172
  TableListItem.prototype.render = function () {
173
+ var _this = this;
174
+ var classes = (0, classnames_1.default)('table-list__item', {
175
+ 'table-list__item--clickable': this.props.onClick,
176
+ 'table-list__item--draggable': this.props.dragAndDrop,
177
+ 'table-list__item--drag-handles-always': !this.props.showDragHandle,
178
+ 'table-list__item--drag-handles-none': this.props.showDragHandle === 'none',
179
+ });
123
180
  return (this.props.addItem ?
124
181
  React.createElement("li", { className: 'table-list__item-container' },
125
- React.createElement("div", { onClick: this.props.onClick, className: "table-list__item ".concat(this.props.onClick && 'table-list__item--clickable', " ").concat(this.props.dragAndDrop && 'table-list__item--draggable') },
182
+ React.createElement("div", { onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); }, className: classes },
183
+ React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
126
184
  React.createElement("div", { className: 'table-list__item-content' },
127
185
  React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
128
186
  React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' }, this.props.center && this.props.center),
@@ -131,9 +189,10 @@ var TableListItem = /** @class */ (function (_super) {
131
189
  React.createElement("div", { className: 'table-list__add-bar-container' },
132
190
  React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
133
191
  React.createElement("div", { className: 'table-list__add-bar' },
134
- React.createElement(Dropdown_1.Dropdown, { items: this.props.itemsDropdown },
192
+ React.createElement(Dropdown_1.Dropdown, { onChange: this.props.onAddItem, items: this.props.itemsDropdown ? this.props.itemsDropdown : [] },
135
193
  React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }))))))
136
- : React.createElement("li", { className: "table-list__item ".concat(this.props.onClick && 'table-list__item--clickable', " ").concat(this.props.dragAndDrop && 'table-list__item--draggable', " table-list__item--margin"), onClick: this.props.onClick },
194
+ : React.createElement("li", { className: "".concat(classes, " table-list__item--margin"), onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); } },
195
+ React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
137
196
  React.createElement("div", { className: 'table-list__item-content' },
138
197
  React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
139
198
  React.createElement("div", { className: 'table-list__item-content-block table-list__item-content-block--center' }, this.props.center && this.props.center),
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  interface IProps {
3
- value?: string | number;
3
+ value?: string;
4
4
  type?: 'expanded' | 'collapsed' | 'boxed';
5
5
  placeholder: string;
6
6
  focused?: boolean;