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.
- package/app/styles/_sd-tag-input.scss +20 -1
- package/app-typescript/components/TreeSelect.tsx +229 -175
- package/dist/examples.bundle.js +2401 -1787
- package/dist/react/TreeSelect.tsx +88 -119
- package/dist/superdesk-ui.bundle.css +21 -2
- package/dist/superdesk-ui.bundle.js +2060 -1409
- package/dist/vendor.bundle.js +18 -18
- package/examples/pages/react/TreeSelect.tsx +88 -119
- package/package.json +1 -1
- package/react/components/TreeSelect.d.ts +9 -4
- package/react/components/TreeSelect.js +145 -99
@@ -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: '
|
65
|
+
{value: {name: 'Item20'}}
|
65
66
|
]
|
66
67
|
},
|
67
68
|
{
|
68
69
|
value: {name: 'Sub-category2'},
|
69
70
|
children: [
|
70
|
-
{value: {name: '
|
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:
|
117
|
-
):
|
118
|
-
setTimeout(() => {
|
167
|
+
callback: (res: any) => void,
|
168
|
+
): ICancelFn {
|
169
|
+
let timeout = setTimeout(() => {
|
170
|
+
|
119
171
|
callback(
|
120
|
-
|
121
|
-
.filter((item) => item.
|
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
|
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={({
|
227
|
-
|
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.
|
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
|
-
// }
|
@@ -33718,12 +33718,18 @@ tags-input,
|
|
33718
33718
|
position: relative; }
|
33719
33719
|
tags-input .autocomplete .suggestion-list--multi-select,
|
33720
33720
|
.tags-input .autocomplete .suggestion-list--multi-select {
|
33721
|
-
padding: 4px 0 !important;
|
33721
|
+
padding: 4px 0 !important;
|
33722
|
+
min-height: 40px; }
|
33722
33723
|
tags-input .autocomplete .suggestion-list--loader,
|
33723
33724
|
.tags-input .autocomplete .suggestion-list--loader {
|
33724
33725
|
padding: 4px 0 !important;
|
33725
33726
|
position: relative;
|
33726
|
-
min-height:
|
33727
|
+
min-height: 3.2rem; }
|
33728
|
+
tags-input .autocomplete .suggestion-list--loader > div,
|
33729
|
+
.tags-input .autocomplete .suggestion-list--loader > div {
|
33730
|
+
padding: 0.5rem 1rem;
|
33731
|
+
min-height: 3.2rem;
|
33732
|
+
position: relative; }
|
33727
33733
|
tags-input .autocomplete .suggestion-item,
|
33728
33734
|
.tags-input .autocomplete .suggestion-item {
|
33729
33735
|
padding: 0.5rem 1rem;
|
@@ -33766,6 +33772,19 @@ tags-input,
|
|
33766
33772
|
tags-input .autocomplete .suggestion-item--disabled,
|
33767
33773
|
.tags-input .autocomplete .suggestion-item--disabled {
|
33768
33774
|
opacity: 0.5; }
|
33775
|
+
tags-input .autocomplete .suggestion-item--nothing-found,
|
33776
|
+
.tags-input .autocomplete .suggestion-item--nothing-found {
|
33777
|
+
padding: 0.5rem 1rem;
|
33778
|
+
cursor: not-allowed;
|
33779
|
+
white-space: nowrap;
|
33780
|
+
overflow: hidden;
|
33781
|
+
text-overflow: ellipsis;
|
33782
|
+
color: var(--color-text-light);
|
33783
|
+
transition: all ease 0.2s;
|
33784
|
+
min-height: 3.2rem;
|
33785
|
+
display: flex;
|
33786
|
+
align-items: center;
|
33787
|
+
justify-content: center; }
|
33769
33788
|
|
33770
33789
|
.tags-input {
|
33771
33790
|
padding-inline: 0 !important;
|