superdesk-ui-framework 3.0.6 → 3.0.7
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 +29 -10
- package/app-typescript/components/MultiSelect.tsx +2 -3
- package/app-typescript/components/TreeSelect.tsx +506 -243
- package/dist/examples.bundle.js +385 -143
- package/dist/react/Dropdowns.tsx +134 -85
- package/dist/react/MultiSelect.tsx +2 -2
- package/dist/react/TreeSelect.tsx +39 -27
- package/dist/superdesk-ui.bundle.css +26 -9
- package/dist/superdesk-ui.bundle.js +283 -104
- package/examples/pages/react/Dropdowns.tsx +134 -85
- package/examples/pages/react/MultiSelect.tsx +2 -2
- package/examples/pages/react/TreeSelect.tsx +39 -27
- package/package.json +2 -2
- package/react/components/MultiSelect.d.ts +1 -1
- package/react/components/MultiSelect.js +1 -1
- package/react/components/TreeSelect.d.ts +17 -9
- package/react/components/TreeSelect.js +249 -74
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
sd-tag-input {
|
|
2
2
|
display: block;
|
|
3
|
-
padding-bottom: 3rem;
|
|
3
|
+
padding-bottom: 3rem;
|
|
4
4
|
&[data-label] {
|
|
5
5
|
position: relative;
|
|
6
6
|
padding-top: 1rem;
|
|
@@ -10,7 +10,7 @@ sd-tag-input {
|
|
|
10
10
|
// Testing
|
|
11
11
|
.sd-tag-input {
|
|
12
12
|
display: block;
|
|
13
|
-
padding-bottom: 3rem;
|
|
13
|
+
padding-bottom: 3rem;
|
|
14
14
|
&[data-label] {
|
|
15
15
|
position: relative;
|
|
16
16
|
padding-top: 1rem;
|
|
@@ -225,6 +225,9 @@ tags-input,
|
|
|
225
225
|
&:hover {
|
|
226
226
|
opacity: 1;
|
|
227
227
|
}
|
|
228
|
+
&:focus {
|
|
229
|
+
opacity: 1;
|
|
230
|
+
}
|
|
228
231
|
&[disabled], [disabled]:hover, [disabled]:active {
|
|
229
232
|
opacity: 0.5;
|
|
230
233
|
background-color: rgba(123, 123, 123, 0.4);
|
|
@@ -277,8 +280,6 @@ tags-input,
|
|
|
277
280
|
}
|
|
278
281
|
.suggestion-item {
|
|
279
282
|
position: relative;
|
|
280
|
-
padding: 0.5rem 1rem;
|
|
281
|
-
cursor: pointer;
|
|
282
283
|
white-space: nowrap;
|
|
283
284
|
overflow: hidden;
|
|
284
285
|
text-overflow: ellipsis;
|
|
@@ -298,9 +299,6 @@ tags-input,
|
|
|
298
299
|
cursor: default;
|
|
299
300
|
pointer-events: none;
|
|
300
301
|
}
|
|
301
|
-
&:hover {
|
|
302
|
-
background-color: var(--sd-colour-interactive--alpha-10) !important;
|
|
303
|
-
}
|
|
304
302
|
.suggestion-item__icon {
|
|
305
303
|
display: flex;
|
|
306
304
|
align-items: center;
|
|
@@ -309,9 +307,26 @@ tags-input,
|
|
|
309
307
|
}
|
|
310
308
|
}
|
|
311
309
|
.suggestion-item--multi-select {
|
|
310
|
+
display: flex;
|
|
311
|
+
align-items: center;
|
|
312
|
+
}
|
|
313
|
+
.suggestion-item--btn {
|
|
312
314
|
display: flex;
|
|
313
315
|
justify-content: space-between;
|
|
314
316
|
align-items: center;
|
|
317
|
+
cursor: pointer;
|
|
318
|
+
width: 100%;
|
|
319
|
+
padding: 0.5rem 1rem;
|
|
320
|
+
|
|
321
|
+
&:focus {
|
|
322
|
+
background-color: $sd-colour-background__menu-item;
|
|
323
|
+
box-shadow: var(--sd-shadow__menu-item--focus-inner);
|
|
324
|
+
text-decoration: none;
|
|
325
|
+
outline: none;
|
|
326
|
+
}
|
|
327
|
+
&:hover {
|
|
328
|
+
background-color: var(--sd-colour-interactive--alpha-10) !important;
|
|
329
|
+
}
|
|
315
330
|
}
|
|
316
331
|
.suggestion-item--bgcolor {
|
|
317
332
|
min-height: 1.5em;
|
|
@@ -323,7 +338,7 @@ tags-input,
|
|
|
323
338
|
border-radius: 99px;
|
|
324
339
|
white-space: nowrap;
|
|
325
340
|
|
|
326
|
-
&[style] {
|
|
341
|
+
&[style*="background-color"] {
|
|
327
342
|
padding-inline: 8px;
|
|
328
343
|
}
|
|
329
344
|
}
|
|
@@ -430,7 +445,7 @@ tags-input,
|
|
|
430
445
|
transform: translate(-3px);
|
|
431
446
|
}
|
|
432
447
|
.arrow-left {
|
|
433
|
-
cursor: pointer;
|
|
448
|
+
cursor: pointer;
|
|
434
449
|
}
|
|
435
450
|
.search {
|
|
436
451
|
cursor: default;
|
|
@@ -485,6 +500,10 @@ tags-input,
|
|
|
485
500
|
border: 1px solid var(--sd-colour-interactive);
|
|
486
501
|
box-shadow: inset 0 0 0 2px var(--sd-colour-interactive--alpha-20);
|
|
487
502
|
}
|
|
503
|
+
&:focus {
|
|
504
|
+
border: 1px solid var(--sd-colour-interactive);
|
|
505
|
+
box-shadow: inset 0 0 0 2px var(--sd-colour-interactive--alpha-20);
|
|
506
|
+
}
|
|
488
507
|
&:active {
|
|
489
508
|
border: 1px solid var(--sd-colour-interactive);
|
|
490
509
|
box-shadow: inset 0 0 0 3px var(--sd-colour-interactive--alpha-30);
|
|
@@ -591,7 +610,7 @@ tags-input,
|
|
|
591
610
|
border-radius: 2px;
|
|
592
611
|
|
|
593
612
|
&-selected {
|
|
594
|
-
inset-block: 5px;
|
|
613
|
+
inset-block: 5px;
|
|
595
614
|
}
|
|
596
615
|
}
|
|
597
616
|
|
|
@@ -8,7 +8,6 @@ interface IProps<T> {
|
|
|
8
8
|
value: Array<T>;
|
|
9
9
|
options: Array<T>;
|
|
10
10
|
placeholder?: string;
|
|
11
|
-
optionLabel: string;
|
|
12
11
|
emptyFilterMessage?: string;
|
|
13
12
|
filterPlaceholder?: string;
|
|
14
13
|
maxSelectedLabels?: number;
|
|
@@ -19,6 +18,7 @@ interface IProps<T> {
|
|
|
19
18
|
showClear?: boolean;
|
|
20
19
|
showSelectAll?: boolean;
|
|
21
20
|
zIndex?: number;
|
|
21
|
+
optionLabel: (option: T) => string;
|
|
22
22
|
itemTemplate?(item: any): JSX.Element | undefined;
|
|
23
23
|
selectedItemTemplate?(value: any): JSX.Element | undefined;
|
|
24
24
|
onChange(newValue: Array<T>): void;
|
|
@@ -80,10 +80,9 @@ export class MultiSelect<T> extends React.Component<IProps<T>, IState<T>> {
|
|
|
80
80
|
display="chip"
|
|
81
81
|
zIndex={this.props.zIndex}
|
|
82
82
|
filter={this.props.filter}
|
|
83
|
-
filterBy={this.props.optionLabel}
|
|
84
83
|
appendTo={document.body}
|
|
85
84
|
placeholder={this.props.placeholder}
|
|
86
|
-
optionLabel={this.props.optionLabel}
|
|
85
|
+
optionLabel={(option) => this.props.optionLabel(option)}
|
|
87
86
|
emptyFilterMessage={this.props.emptyFilterMessage}
|
|
88
87
|
filterPlaceholder={this.props.filterPlaceholder}
|
|
89
88
|
itemTemplate={this.props.itemTemplate}
|