superdesk-ui-framework 3.1.4 → 3.1.5
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 +1 -1
- package/app-typescript/components/TreeSelect/TreeSelect.tsx +118 -38
- package/app-typescript/components/TreeSelect/TreeSelectPill.tsx +20 -9
- package/dist/examples.bundle.js +78139 -78057
- package/dist/react/TreeSelect.tsx +61 -3
- package/dist/superdesk-ui.bundle.css +1 -1
- package/dist/superdesk-ui.bundle.js +78175 -78103
- package/examples/pages/react/TreeSelect.tsx +61 -3
- package/package.json +1 -1
- package/react/components/TreeSelect/TreeSelect.d.ts +5 -0
- package/react/components/TreeSelect/TreeSelect.js +80 -17
- package/react/components/TreeSelect/TreeSelectPill.d.ts +1 -0
- package/react/components/TreeSelect/TreeSelectPill.js +13 -4
|
@@ -252,7 +252,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
|
|
|
252
252
|
label='TreeSelect Label'
|
|
253
253
|
info='Info Message'
|
|
254
254
|
searchPlaceholder='Search...'
|
|
255
|
-
getBackgroundColor={(item: any) => item.bgColor}
|
|
255
|
+
getBackgroundColor={(item: any) => item.bgColor}
|
|
256
256
|
valueTemplate={(item, Wrapper) => {
|
|
257
257
|
return (
|
|
258
258
|
<Wrapper backgroundColor={item.bgColor}>
|
|
@@ -278,7 +278,65 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
|
|
|
278
278
|
label='TreeSelect Label'
|
|
279
279
|
info='Info Message'
|
|
280
280
|
searchPlaceholder='Search...'
|
|
281
|
-
getBackgroundColor={(item: any) => item.bgColor}
|
|
281
|
+
getBackgroundColor={(item: any) => item.bgColor}
|
|
282
|
+
valueTemplate={(item, Wrapper) => {
|
|
283
|
+
return (
|
|
284
|
+
<Wrapper backgroundColor={item.bgColor}>
|
|
285
|
+
<span>{item.name}</span>
|
|
286
|
+
</Wrapper>
|
|
287
|
+
);
|
|
288
|
+
}}
|
|
289
|
+
onChange={(e) => false}
|
|
290
|
+
/>
|
|
291
|
+
`}</Markup.ReactMarkupCode>
|
|
292
|
+
|
|
293
|
+
</Markup.ReactMarkup>
|
|
294
|
+
|
|
295
|
+
<p className='docs-page__paragraph'>Sortable mode in TreeSelect.</p>
|
|
296
|
+
<Markup.ReactMarkup>
|
|
297
|
+
<Markup.ReactMarkupPreview>
|
|
298
|
+
<div className='docs-page__content-row docs-page__content-row--no-margin'>
|
|
299
|
+
<div className='form__row'>
|
|
300
|
+
<TreeSelect
|
|
301
|
+
kind='synchronous'
|
|
302
|
+
value={[{name: 'Category1'}, {name: 'Category2'}, {name: 'Category3'}]}
|
|
303
|
+
getOptions={() => options}
|
|
304
|
+
getId={(item) => item.name}
|
|
305
|
+
getLabel={(item) => item.name}
|
|
306
|
+
selectBranchWithChildren
|
|
307
|
+
allowMultiple
|
|
308
|
+
sortable
|
|
309
|
+
label='TreeSelect Label'
|
|
310
|
+
info='Info Message'
|
|
311
|
+
searchPlaceholder='Search...'
|
|
312
|
+
getBackgroundColor={(item: any) => item.bgColor}
|
|
313
|
+
valueTemplate={(item, Wrapper) => {
|
|
314
|
+
return (
|
|
315
|
+
<Wrapper backgroundColor={item.bgColor}>
|
|
316
|
+
<span>{item.name}</span>
|
|
317
|
+
</Wrapper>
|
|
318
|
+
);
|
|
319
|
+
}}
|
|
320
|
+
onChange={(e) => false}
|
|
321
|
+
/>
|
|
322
|
+
</div>
|
|
323
|
+
</div>
|
|
324
|
+
</Markup.ReactMarkupPreview>
|
|
325
|
+
|
|
326
|
+
<Markup.ReactMarkupCode>{`
|
|
327
|
+
<TreeSelect
|
|
328
|
+
kind='synchronous'
|
|
329
|
+
value={[{name: 'Category1'}]}
|
|
330
|
+
getOptions={() => options}
|
|
331
|
+
getId={(item) => item.name}
|
|
332
|
+
getLabel={(item) => item.name}
|
|
333
|
+
selectBranchWithChildren
|
|
334
|
+
allowMultiple
|
|
335
|
+
sortable
|
|
336
|
+
label='TreeSelect Label'
|
|
337
|
+
info='Info Message'
|
|
338
|
+
searchPlaceholder='Search...'
|
|
339
|
+
getBackgroundColor={(item: any) => item.bgColor}
|
|
282
340
|
valueTemplate={(item, Wrapper) => {
|
|
283
341
|
return (
|
|
284
342
|
<Wrapper backgroundColor={item.bgColor}>
|
|
@@ -401,6 +459,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
|
|
|
401
459
|
<Prop name='loading' isRequired={false} type='boolean' default='false' description='Adds a loading indicator in dropdown.'/>
|
|
402
460
|
<Prop name='allowMultiple' isRequired={false} type='boolean' default='/' description='Enable multi-select mode.'/>
|
|
403
461
|
<Prop name='singleLevelSearch' isRequired={false} type='boolean' default='/' description='Limit search to only the level that is displayed.'/>
|
|
462
|
+
<Prop name='sortable' isRequired={false} type='boolean' default='/' description='Enable drag & drop functionality.'/>
|
|
404
463
|
<Prop name='placeholder' isRequired={false} type='string' default='/' description='Placeholder of component in single select mode.'/>
|
|
405
464
|
<Prop name='searchPlaceholder' isRequired={false} type='string' default='/' description='Filter input placeholder.'/>
|
|
406
465
|
<Prop name='getLabel' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
|
|
@@ -409,7 +468,6 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
|
|
|
409
468
|
<Prop name='getBorderColor' isRequired={true} type='Function' default='/' description='Function to return border color of individual item in options in single-select mode.'/>
|
|
410
469
|
<Prop name='valueTemplate' isRequired={false} type='Function(item, Wrapper)' default='/' description='Function that gets an item in the value and returns the content for it.'/>
|
|
411
470
|
<Prop name='optionTemplate' isRequired={false} type='Function(item)' default='/' description='Function that gets the option and returns the content for it.'/>
|
|
412
|
-
<Prop name='searchOptions' isRequired={false} type='Function' default='/' description='The function will be called when a search is initiated from UI in asynchronous mode.'/>
|
|
413
471
|
<Prop name='onChange' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
|
|
414
472
|
<Prop name='label' isRequired={false} type='string' default='/' description='Label of component.' />
|
|
415
473
|
<Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline.' />
|
|
@@ -35996,7 +35996,7 @@ tags-input,
|
|
|
35996
35996
|
background-color: var(--sd-colour-interactive--alpha-70); }
|
|
35997
35997
|
tags-input .tags-input__tags .tags-input__tag-item:hover,
|
|
35998
35998
|
.tags-input .tags-input__tags .tags-input__tag-item:hover {
|
|
35999
|
-
cursor:
|
|
35999
|
+
cursor: default; }
|
|
36000
36000
|
tags-input .tags-input__tags .tags-input__tag-item .tags-input__remove-button,
|
|
36001
36001
|
.tags-input .tags-input__tags .tags-input__tag-item .tags-input__remove-button {
|
|
36002
36002
|
height: 1.8rem;
|