superdesk-ui-framework 3.0.1-beta.10 → 3.0.1-beta.11

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.
@@ -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 = 515);
73
+ /******/ return __webpack_require__(__webpack_require__.s = 529);
74
74
  /******/ })
75
75
  /************************************************************************/
76
76
  /******/ ({
@@ -82,7 +82,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
82
82
 
83
83
  /***/ }),
84
84
 
85
- /***/ 34:
85
+ /***/ 33:
86
86
  /***/ (function(module, exports, __webpack_require__) {
87
87
 
88
88
  /* WEBPACK VAR INJECTION */(function(global, module) {var __WEBPACK_AMD_DEFINE_RESULT__;/**
@@ -17296,11 +17296,11 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
17296
17296
  }
17297
17297
  }.call(this));
17298
17298
 
17299
- /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(40), __webpack_require__(49)(module)))
17299
+ /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(35), __webpack_require__(49)(module)))
17300
17300
 
17301
17301
  /***/ }),
17302
17302
 
17303
- /***/ 40:
17303
+ /***/ 35:
17304
17304
  /***/ (function(module, exports) {
17305
17305
 
17306
17306
  var g;
@@ -28246,21 +28246,21 @@ module.exports = function(module) {
28246
28246
 
28247
28247
  /***/ }),
28248
28248
 
28249
- /***/ 515:
28249
+ /***/ 529:
28250
28250
  /***/ (function(module, exports, __webpack_require__) {
28251
28251
 
28252
28252
  "use strict";
28253
28253
 
28254
28254
 
28255
- __webpack_require__(34);
28255
+ __webpack_require__(33);
28256
28256
 
28257
28257
  __webpack_require__(41);
28258
28258
 
28259
- __webpack_require__(516);
28259
+ __webpack_require__(530);
28260
28260
 
28261
- __webpack_require__(518);
28261
+ __webpack_require__(532);
28262
28262
 
28263
- __webpack_require__(520);
28263
+ __webpack_require__(534);
28264
28264
 
28265
28265
  __webpack_require__(0);
28266
28266
 
@@ -28268,7 +28268,7 @@ __webpack_require__(9);
28268
28268
 
28269
28269
  /***/ }),
28270
28270
 
28271
- /***/ 516:
28271
+ /***/ 530:
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__(517) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
28295
+ !(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(41), __webpack_require__(531) ], __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
- /***/ 517:
29033
+ /***/ 531:
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
- /***/ 518:
29063
+ /***/ 532:
29064
29064
  /***/ (function(module, exports, __webpack_require__) {
29065
29065
 
29066
- __webpack_require__(519);
29066
+ __webpack_require__(533);
29067
29067
  module.exports = angular;
29068
29068
 
29069
29069
 
29070
29070
  /***/ }),
29071
29071
 
29072
- /***/ 519:
29072
+ /***/ 533:
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
- /***/ 520:
65679
+ /***/ 534:
65680
65680
  /***/ (function(module, exports, __webpack_require__) {
65681
65681
 
65682
- __webpack_require__(521);
65682
+ __webpack_require__(535);
65683
65683
  module.exports = 'ngAnimate';
65684
65684
 
65685
65685
 
65686
65686
  /***/ }),
65687
65687
 
65688
- /***/ 521:
65688
+ /***/ 535:
65689
65689
  /***/ (function(module, exports) {
65690
65690
 
65691
65691
  /**
@@ -10,6 +10,7 @@ interface IState {
10
10
  options: any;
11
11
  options2: any;
12
12
  inputValue: string;
13
+ arr: any;
13
14
  }
14
15
 
15
16
  let itemArr = [
@@ -61,13 +62,41 @@ let itemArr2 = [
61
62
  {
62
63
  value: {name: 'Sub-category1'},
63
64
  children: [
64
- {value: {name: 'Item5'}}
65
+ {value: {name: 'Item20'}}
65
66
  ]
66
67
  },
67
68
  {
68
69
  value: {name: 'Sub-category2'},
69
70
  children: [
70
- {value: {name: 'Item7'}}
71
+ {value: {name: 'Item21'}}
72
+ ]
73
+ }
74
+ ,
75
+ {
76
+ value: {name: 'Sub-category3'},
77
+ children: [
78
+ {value: {name: 'Item22'}}
79
+ ]
80
+ }
81
+ ,
82
+ {
83
+ value: {name: 'Sub-category4'},
84
+ children: [
85
+ {value: {name: 'Item23'}}
86
+ ]
87
+ }
88
+ ,
89
+ {
90
+ value: {name: 'Sub-category5'},
91
+ children: [
92
+ {value: {name: 'Item24'}}
93
+ ]
94
+ }
95
+ ,
96
+ {
97
+ value: {name: 'Sub-category6'},
98
+ children: [
99
+ {value: {name: 'Item25'}}
71
100
  ]
72
101
  }
73
102
  ]
@@ -99,6 +128,10 @@ let itemArr2 = [
99
128
  const source = [
100
129
  {
101
130
  'name': 'Article (news)',
131
+ 'qcode': 'Article (news)',
132
+ },
133
+ {
134
+ 'name': 'Article',
102
135
  'qcode': 'Article',
103
136
  },
104
137
  {
@@ -109,19 +142,42 @@ const source = [
109
142
  'name': 'Factbox',
110
143
  'qcode': 'Factbox',
111
144
  },
145
+ {
146
+ 'name': 'Item',
147
+ 'qcode': 'Item',
148
+ },
149
+ {
150
+ 'name': 'Array',
151
+ 'qcode': 'Array',
152
+ },
153
+ {
154
+ 'name': 'Object',
155
+ 'qcode': 'Object',
156
+ },
112
157
  ];
113
158
 
159
+ let fetchedArr = [];
160
+ fetch('https://nominatim.openstreetmap.org/search/berlin?format=json&addressdetails=1&limit=20').then(response => response.json()).then(data => fetchedArr = data
161
+ );
162
+
163
+ type ICancelFn = () => void;
164
+
114
165
  function searchOptions(
115
166
  term: string,
116
- callback: (res: Array<ITreeNode<{name: string; qcode: string;}>>) => void,
117
- ): void {
118
- setTimeout(() => {
167
+ callback: (res: any) => void,
168
+ ): ICancelFn {
169
+ let timeout = setTimeout(() => {
170
+
119
171
  callback(
120
- source
121
- .filter((item) => item.name.toLocaleLowerCase().includes(term.toLocaleLowerCase()))
172
+ fetchedArr
173
+ .filter((item: any) => item.display_name.toLocaleLowerCase().includes(term.toLocaleLowerCase()))
122
174
  .map((item) => ({value: item})),
123
- );
175
+ );
124
176
  }, 1000);
177
+
178
+ return () => {
179
+ clearTimeout(timeout);
180
+ }
125
181
  }
126
182
 
127
183
  export class TreeSelectDocs extends React.Component<{}, IState> {
@@ -132,8 +188,10 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
132
188
  value2: [],
133
189
  options: itemArr2,
134
190
  options2: itemArr2,
135
- inputValue: ''
191
+ inputValue: '',
192
+ arr: []
136
193
  }
194
+
137
195
 
138
196
  this.handleChange = this.handleChange.bind(this);
139
197
  }
@@ -146,13 +204,13 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
146
204
  this.setState({
147
205
  options: option.item
148
206
  })
149
- }
207
+ }
150
208
  }
151
209
 
152
210
  render() {
153
211
  return (
154
212
  <section className='docs-page__container'>
155
- <h2 className='docs-page__h2'>TreeSelect (in progress)</h2>
213
+ <h2 className='docs-page__h2'>TreeSelect</h2>
156
214
 
157
215
  <Markup.ReactMarkupCodePreview>{`
158
216
  <TreeSelect
@@ -183,7 +241,8 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
183
241
  error={'Error Message'}
184
242
  required
185
243
  label={'TreeSelect Label'}
186
-
244
+ singleLevelSearch
245
+ searchPlaceholder='Search...'
187
246
  />
188
247
  </div>
189
248
  </div>
@@ -223,10 +282,11 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
223
282
  onChange={(val) => {
224
283
  this.setState({value: val});
225
284
  }}
226
- getLabel={({name}) => name}
227
- getId={({qcode}) => qcode}
285
+ getLabel={({display_name}) => display_name
286
+ }
287
+ getId={({qcode}) => qcode.display_name}
228
288
  selectBranchWithChildren={false}
229
- optionTemplate={(item) => <span style={{color: 'blue'}}>{item.name}</span>}
289
+ //optionTemplate={(item) => <span style={{color: 'blue'}}>{item.display_name}</span>}
230
290
  allowMultiple={true}
231
291
  />
232
292
  </div>
@@ -269,6 +329,8 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
269
329
  valueTemplate={(item: any) => {
270
330
  return <span>Label: {item.name}</span>
271
331
  }}
332
+ //allowMultiple
333
+ //readOnly
272
334
  />
273
335
  </div>
274
336
  </div>
@@ -302,12 +364,23 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
302
364
  <Prop name='selectBranchWithChildren' isRequired={false} type='boolean' default='false' description='When specified, select branch with children is enabled.'/>
303
365
  <Prop name='readonly' isRequired={false} type='boolean' default='false' description='When specified, component changes are not enabled.'/>
304
366
  <Prop name='loading' isRequired={false} type='boolean' default='false' description='Adds a loading indicator in dropdown.'/>
367
+ <Prop name='allowMultiple' isRequired={false} type='boolean' default='/' description='Enable multi-select mode.'/>
368
+ <Prop name='singleLevelSearch' isRequired={false} type='boolean' default='/' description='Limit search to only the level that is displayed.'/>
369
+ <Prop name='placeholder' isRequired={false} type='string' default='/' description='Placeholder of component in single select mode.'/>
370
+ <Prop name='searchPlaceholder' isRequired={false} type='string' default='/' description='Filter input placeholder.'/>
305
371
  <Prop name='getLabel' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
306
372
  <Prop name='getId' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
307
373
  <Prop name='valueTemplate' isRequired={false} type='Function' default='/' description='Function that gets an item in the value and returns the content for it.'/>
308
374
  <Prop name='optionTemplate' isRequired={false} type='Function' default='/' description='Function that gets the option and returns the content for it.'/>
309
375
  <Prop name='searchOptions' isRequired={false} type='Function' default='/' description='The function will be called when a search is initiated from UI in asynchronous mode.'/>
310
376
  <Prop name='onChange' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
377
+ <Prop name='label' isRequired={false} type='string' default='/' description='Input label'/>
378
+ <Prop name='info' isRequired={false} type='string' default='/' description='Hint text'/>
379
+ <Prop name='error' isRequired={false} type='string' default='/' description='Error text'/>
380
+ <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline'/>
381
+ <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required'/>
382
+ <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled'/>
383
+ <Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid'/>
311
384
  </PropsList>
312
385
 
313
386
  <p className='docs-page__paragraph'>synchronous:</p>
@@ -325,107 +398,3 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
325
398
  )
326
399
  }
327
400
  }
328
-
329
- // import React from 'react';
330
- // import {ITreeNode, TreeSelect} from './TreeSelect';
331
-
332
- // type IProps = {};
333
-
334
- // interface IVocabularyItem {
335
- // qcode: string;
336
- // name: string;
337
- // }
338
-
339
- // interface IState {
340
- // value: Array<IVocabularyItem>;
341
- // }
342
-
343
- // const source: Array<ITreeNode<IVocabularyItem>> = [
344
- // {
345
- // value: {
346
- // 'name': 'Article (news)',
347
- // 'qcode': 'Article',
348
- // },
349
- // children: [
350
- // {
351
- // value: {
352
- // 'name': 'Test 1',
353
- // 'qcode': 'test-1',
354
- // },
355
- // }
356
- // ],
357
- // },
358
- // {
359
- // value: {
360
- // 'name': 'Sidebar',
361
- // 'qcode': 'Sidebar',
362
- // },
363
- // children: [
364
- // {
365
- // value: {
366
- // 'name': 'Test 2',
367
- // 'qcode': 'test-2',
368
- // },
369
- // }
370
- // ],
371
- // },
372
- // {
373
- // value: {
374
- // 'name': 'Factbox',
375
- // 'qcode': 'Factbox',
376
- // },
377
- // children: [
378
- // {
379
- // value: {
380
- // 'name': 'Test 3',
381
- // 'qcode': 'test-3',
382
- // },
383
- // }
384
- // ],
385
- // }
386
- // ];
387
-
388
- // export class TreeSelectDocs extends React.PureComponent<IProps, IState> {
389
- // constructor(props: IProps) {
390
- // super(props);
391
- // this.state = {
392
- // value: [],
393
- // };
394
- // }
395
- // render() {
396
- // return (
397
- // // <TreeSelect
398
- // // kind="synchronous"
399
- // // getOptions={() => source}
400
- // // value={this.state.value}
401
- // // onChange={(val) => {
402
- // // this.setState({value: val});
403
- // // }}
404
- // // getId={(item) => item.name}
405
- // // getLabel={(item) => item.name}
406
- // // selectBranchWithChildren={false}
407
- // // optionTemplate={(item) => <span style={{color: 'blue'}}>{item.name}</span>}
408
- // // allowMultiple={true}
409
-
410
- // // />
411
-
412
- // <TreeSelect
413
- // getId={(item) => item.name}
414
- // getLabel={(item) => item.name}
415
- // getOptions={() => {
416
- // return source
417
- // }}
418
- // //value={[{name: 'Item1'}, {name: 'Item2'}]}
419
- // //selectBranchWithChildren={true}
420
- // onChange={(e) => console.log(e)}
421
- // allowMultiple
422
- // kind={'synchronous'}
423
- // fullWidth
424
- // info={'Info Message'}
425
- // error={'Error Message'}
426
- // required
427
- // label={'TreeSelect Label'}
428
- // />
429
- // );
430
- // }
431
- // }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "superdesk-ui-framework",
3
- "version": "3.0.1-beta.10",
3
+ "version": "3.0.1-beta.11",
4
4
  "license": "AGPL-3.0",
5
5
  "repository": {
6
6
  "type": "git",
@@ -11,7 +11,6 @@ interface IState<T> {
11
11
  buttonValue: any;
12
12
  buttonMouseEvent: boolean;
13
13
  loading: boolean;
14
- invalid: boolean;
15
14
  }
16
15
  interface IPropsBase<T> {
17
16
  value?: Array<T>;
@@ -22,6 +21,7 @@ interface IPropsBase<T> {
22
21
  loading?: boolean;
23
22
  singleLevelSearch?: boolean;
24
23
  placeholder?: string;
24
+ searchPlaceholder?: string;
25
25
  invalid?: boolean;
26
26
  inlineLabel?: boolean;
27
27
  labelHidden?: boolean;
@@ -56,7 +56,11 @@ export declare class TreeSelect<T> extends React.Component<IProps<T>, IState<T>>
56
56
  private dropdownRef;
57
57
  private openDropdownRef;
58
58
  private htmlId;
59
+ private popperInstance;
59
60
  constructor(props: IProps<T>);
61
+ componentDidMount: () => void;
62
+ componentDidUpdate(prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void;
63
+ toggleMenu(): void;
60
64
  removeClick(i: number): void;
61
65
  handleMultiLevel(item: ITreeNode<T>): void;
62
66
  handleButton(item: ITreeNode<T>): void;
@@ -66,10 +70,11 @@ export declare class TreeSelect<T> extends React.Component<IProps<T>, IState<T>>
66
70
  backButton: () => false | undefined;
67
71
  backButtonValue: () => void;
68
72
  recursion(arr: Array<ITreeNode<T>>): void;
69
- componentDidMount: () => void;
70
- componentDidUpdate(prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void;
71
- filteredItem(arr: Array<ITreeNode<T>>): JSX.Element[] | undefined;
73
+ filteredItem(arr: Array<ITreeNode<T>>): JSX.Element | JSX.Element[] | undefined;
72
74
  banchButton(): JSX.Element;
75
+ private debounceFn;
76
+ private ICancelFn;
77
+ handleDebounce(): void;
73
78
  render(): JSX.Element;
74
79
  }
75
80
  export {};