superdesk-ui-framework 3.0.55 → 3.0.57
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 +7 -2
- package/app-typescript/components/Button.tsx +1 -1
- package/app-typescript/components/RadioButtonGroup.tsx +6 -2
- package/app-typescript/components/TreeMenu.tsx +460 -0
- package/app-typescript/components/TreeSelect/KeyboardNavigation.tsx +63 -0
- package/app-typescript/components/TreeSelect/TreeSelect.tsx +2 -65
- package/app-typescript/components/TreeSelect/TreeSelectItem.tsx +15 -7
- package/dist/examples.bundle.js +1902 -1284
- package/dist/react/Index.tsx +5 -0
- package/dist/react/TreeMenu.tsx +277 -0
- package/dist/superdesk-ui.bundle.css +6 -3
- package/dist/superdesk-ui.bundle.js +860 -834
- package/dist/vendor.bundle.js +18 -18
- package/examples/pages/react/Index.tsx +5 -0
- package/examples/pages/react/TreeMenu.tsx +277 -0
- package/package.json +1 -1
- package/react/components/Button.js +1 -1
- package/react/components/RadioButtonGroup.js +1 -1
- package/react/components/TreeSelect/KeyboardNavigation.d.ts +1 -0
- package/react/components/TreeSelect/KeyboardNavigation.js +64 -0
- package/react/components/TreeSelect/TreeSelect.js +3 -53
- package/react/components/TreeSelect/TreeSelectItem.d.ts +2 -1
- package/react/components/TreeSelect/TreeSelectItem.js +10 -7
package/dist/react/Index.tsx
CHANGED
|
@@ -62,6 +62,7 @@ import * as Playgrounds from '../playgrounds/react-playgrounds/Index';
|
|
|
62
62
|
import { SelectWithTemplateDocs } from './SelectWithTemplate';
|
|
63
63
|
import { MultiselectDocs } from './MultiSelect';
|
|
64
64
|
import { TreeSelectDocs } from './TreeSelect';
|
|
65
|
+
import { TreeMenuDocs } from './TreeMenu';
|
|
65
66
|
import DurationInputDoc from './DurationInput';
|
|
66
67
|
import {WithPaginationDocs} from './WithPaginationDocs';
|
|
67
68
|
import { PopoverDoc } from './Popover';
|
|
@@ -124,6 +125,9 @@ const pages = {
|
|
|
124
125
|
'menu': {
|
|
125
126
|
name: 'Menu',
|
|
126
127
|
},
|
|
128
|
+
'treemenu': {
|
|
129
|
+
name: 'TreeMenu',
|
|
130
|
+
},
|
|
127
131
|
"drag-handle": {
|
|
128
132
|
name: 'Drag handle'
|
|
129
133
|
}
|
|
@@ -353,6 +357,7 @@ class ReactDoc extends React.Component<IProps, IState> {
|
|
|
353
357
|
<Route path="/react/with-size-observer" component={WithSizeObserverDocs} />
|
|
354
358
|
<Route path="/react/multiselect" component={MultiselectDocs} />
|
|
355
359
|
<Route path="/react/treeselect" component={TreeSelectDocs} />
|
|
360
|
+
<Route path="/react/treemenu" component={TreeMenuDocs} />
|
|
356
361
|
<Route path="/react/duration-input" component={DurationInputDoc} />
|
|
357
362
|
<Route path="/react/with-pagination" component={WithPaginationDocs} />
|
|
358
363
|
<Route path="/react/popover" component={PopoverDoc} />
|
|
@@ -0,0 +1,277 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import * as Markup from '../../js/react';
|
|
3
|
+
import { PropsList, Prop, Button, Icon } from '../../../app-typescript';
|
|
4
|
+
import {ITreeMenuNode, TreeMenu} from '../../../app-typescript/components/TreeMenu';
|
|
5
|
+
|
|
6
|
+
let options: Array<ITreeMenuNode<{name: string, bgColor?: string}>> = [
|
|
7
|
+
{
|
|
8
|
+
value: {name: 'Category1'},
|
|
9
|
+
children: [
|
|
10
|
+
{
|
|
11
|
+
value: {name: 'Sub-category1'},
|
|
12
|
+
children: [
|
|
13
|
+
{value: {name: 'Item5'}, onSelect: () => false},
|
|
14
|
+
{value: {name: 'Item6'}, onSelect: () => false},
|
|
15
|
+
{value: {name: 'Item7'}, onSelect: () => false},
|
|
16
|
+
{value: {name: 'Item8'}, onSelect: () => false},
|
|
17
|
+
|
|
18
|
+
]
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
value: {name: 'Sub-category2'},
|
|
22
|
+
children: [
|
|
23
|
+
{value: {name: 'Item9'}, onSelect: () => false},
|
|
24
|
+
{value: {name: 'Item10'}, onSelect: () => false},
|
|
25
|
+
{value: {name: 'Item11'}, onSelect: () => false},
|
|
26
|
+
{value: {name: 'Item12'}, onSelect: () => false},
|
|
27
|
+
]
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
value: {name: 'Sub-category3'},
|
|
31
|
+
children: [
|
|
32
|
+
{value: {name: 'Item13'}, onSelect: () => false},
|
|
33
|
+
{value: {name: 'Item14'}, onSelect: () => false},
|
|
34
|
+
]
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
value: {name: 'Sub-category4'},
|
|
38
|
+
children: [
|
|
39
|
+
{value: {name: 'Item15'}, onSelect: () => false},
|
|
40
|
+
{value: {name: 'Item16'}, onSelect: () => false},
|
|
41
|
+
]
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
value: {name: 'Sub-category5'},
|
|
45
|
+
children: [
|
|
46
|
+
{value: {name: 'Item17'}, onSelect: () => false},
|
|
47
|
+
{value: {name: 'Item18'}, onSelect: () => false},
|
|
48
|
+
{value: {name: 'Item19'}, onSelect: () => false},
|
|
49
|
+
{value: {name: 'Item20'}, onSelect: () => false},
|
|
50
|
+
]
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
value: {name: 'Sub-category6'},
|
|
54
|
+
children: [
|
|
55
|
+
{value: {name: 'Item21'}, onSelect: () => false},
|
|
56
|
+
{value: {name: 'Item22'}, onSelect: () => false},
|
|
57
|
+
{value: {name: 'Item23'}, onSelect: () => false},
|
|
58
|
+
{value: {name: 'Item24'}, onSelect: () => false},
|
|
59
|
+
]
|
|
60
|
+
}
|
|
61
|
+
]
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
value: {name: 'Category2'},
|
|
65
|
+
children: [
|
|
66
|
+
{value: {name: 'Item1'}, onSelect: () => false},
|
|
67
|
+
{value: {name: 'Item2'}, onSelect: () => false},
|
|
68
|
+
]
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
value: {name: 'Category3', bgColor: 'red'},
|
|
72
|
+
children: [
|
|
73
|
+
{value: {name: 'Item3'}, onSelect: () => false},
|
|
74
|
+
{value: {name: 'Item4'}, onSelect: () => false},
|
|
75
|
+
]
|
|
76
|
+
},
|
|
77
|
+
]
|
|
78
|
+
|
|
79
|
+
let options2: Array<ITreeMenuNode<{name: string, icon?: any}>>= [
|
|
80
|
+
{
|
|
81
|
+
value: {name: 'Category1', icon: <Icon name='text' />},
|
|
82
|
+
children: [
|
|
83
|
+
{
|
|
84
|
+
value: {name: 'Sub-category1'},
|
|
85
|
+
children: [
|
|
86
|
+
{value: {name: 'Item5'}, onSelect: () => false},
|
|
87
|
+
{value: {name: 'Item6'}, onSelect: () => false},
|
|
88
|
+
]
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
value: {name: 'Sub-category2'},
|
|
92
|
+
children: [
|
|
93
|
+
{value: {name: 'Item7'}, onSelect: () => false},
|
|
94
|
+
{value: {name: 'Item8'}, onSelect: () => false},
|
|
95
|
+
]
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
value: {name: 'Sub-category3'},
|
|
99
|
+
children: [
|
|
100
|
+
{value: {name: 'Item9'}, onSelect: () => false},
|
|
101
|
+
{value: {name: 'Item10'}, onSelect: () => false},
|
|
102
|
+
]
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
value: {name: 'Sub-category4'},
|
|
106
|
+
children: [
|
|
107
|
+
{value: {name: 'Item11'}, onSelect: () => false},
|
|
108
|
+
{value: {name: 'Item12'}, onSelect: () => false},
|
|
109
|
+
]
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
value: {name: 'Sub-category5'},
|
|
113
|
+
children: [
|
|
114
|
+
{value: {name: 'Item13'}, onSelect: () => false},
|
|
115
|
+
{value: {name: 'Item14'}, onSelect: () => false},
|
|
116
|
+
]
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
value: {name: 'Sub-category6'},
|
|
120
|
+
children: [
|
|
121
|
+
{value: {name: 'Item15'}, onSelect: () => false},
|
|
122
|
+
{value: {name: 'Item16'}, onSelect: () => false},
|
|
123
|
+
]
|
|
124
|
+
}
|
|
125
|
+
]
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
value: {name: 'Category2', icon: <Icon name='photo' />},
|
|
129
|
+
children: [
|
|
130
|
+
{value: {name: 'Item1'}, onSelect: () => false},
|
|
131
|
+
{value: {name: 'Item2'}, onSelect: () => false},
|
|
132
|
+
]
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
value: {name: 'Category3', icon: <Icon name='video' />},
|
|
136
|
+
children: [
|
|
137
|
+
{value: {name: 'Item3'}, onSelect: () => false},
|
|
138
|
+
{value: {name: 'Item4'}, onSelect: () => false},
|
|
139
|
+
]
|
|
140
|
+
},
|
|
141
|
+
]
|
|
142
|
+
|
|
143
|
+
export class TreeMenuDocs extends React.Component<{}, {}> {
|
|
144
|
+
constructor(props) {
|
|
145
|
+
super(props);
|
|
146
|
+
|
|
147
|
+
this.handleChange = this.handleChange.bind(this);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
handleChange(e, option) {
|
|
151
|
+
if(option.item) {
|
|
152
|
+
e.stopPropagation();
|
|
153
|
+
e.preventDefault();
|
|
154
|
+
|
|
155
|
+
this.setState({
|
|
156
|
+
options: option.item
|
|
157
|
+
})
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
render() {
|
|
162
|
+
return (
|
|
163
|
+
<section className='docs-page__container'>
|
|
164
|
+
<h2 className='docs-page__h2'>TreeMenu</h2>
|
|
165
|
+
|
|
166
|
+
<Markup.ReactMarkupCodePreview>{`
|
|
167
|
+
<TreeSelect
|
|
168
|
+
getOptions={() => this.state.options}
|
|
169
|
+
getId={(item) => item.name}
|
|
170
|
+
getLabel={(item) => item.name}
|
|
171
|
+
/>
|
|
172
|
+
`}
|
|
173
|
+
</Markup.ReactMarkupCodePreview>
|
|
174
|
+
|
|
175
|
+
<Markup.ReactMarkup>
|
|
176
|
+
<Markup.ReactMarkupPreview>
|
|
177
|
+
<div className='docs-page__content-row docs-page__content-row--no-margin'>
|
|
178
|
+
<TreeMenu
|
|
179
|
+
getOptions={() => options}
|
|
180
|
+
getId={(item) => item.name}
|
|
181
|
+
getLabel={(item) => item.name}
|
|
182
|
+
getBackgroundColor={(item: any) => item.bgColor}
|
|
183
|
+
>
|
|
184
|
+
{(toggle) => (
|
|
185
|
+
<Button text="Open TreeMenu" onClick={toggle} />
|
|
186
|
+
)}
|
|
187
|
+
</TreeMenu>
|
|
188
|
+
</div>
|
|
189
|
+
</Markup.ReactMarkupPreview>
|
|
190
|
+
|
|
191
|
+
<Markup.ReactMarkupCode>{`
|
|
192
|
+
<TreeMenu
|
|
193
|
+
getOptions={() => options}
|
|
194
|
+
getId={(item) => item.name}
|
|
195
|
+
getLabel={(item) => item.name}
|
|
196
|
+
getBackgroundColor={(item: any) => item.bgColor}
|
|
197
|
+
>
|
|
198
|
+
{(toggle) => (
|
|
199
|
+
<Button text="Open TreeMenu" onClick={toggle} />
|
|
200
|
+
)}
|
|
201
|
+
</TreeMenu>
|
|
202
|
+
`}</Markup.ReactMarkupCode>
|
|
203
|
+
|
|
204
|
+
</Markup.ReactMarkup>
|
|
205
|
+
|
|
206
|
+
<p className='docs-page__paragraph'>TreeMenu with custom template:</p>
|
|
207
|
+
<Markup.ReactMarkup>
|
|
208
|
+
<Markup.ReactMarkupPreview>
|
|
209
|
+
<div className='docs-page__content-row docs-page__content-row--no-margin'>
|
|
210
|
+
<TreeMenu
|
|
211
|
+
getOptions={() => options2}
|
|
212
|
+
getId={(item) => item.name}
|
|
213
|
+
getLabel={(item) => item.name}
|
|
214
|
+
optionTemplate={(item: any) => {
|
|
215
|
+
return (
|
|
216
|
+
<div
|
|
217
|
+
style={{
|
|
218
|
+
display: 'flex',
|
|
219
|
+
alignItems: 'center',
|
|
220
|
+
gap: '4px'
|
|
221
|
+
}}
|
|
222
|
+
>
|
|
223
|
+
{item.icon}
|
|
224
|
+
{item.name}
|
|
225
|
+
</div>
|
|
226
|
+
)
|
|
227
|
+
}}
|
|
228
|
+
>
|
|
229
|
+
{(toggle) => (
|
|
230
|
+
<Button text="Open TreeMenu" onClick={toggle} />
|
|
231
|
+
)}
|
|
232
|
+
</TreeMenu>
|
|
233
|
+
</div>
|
|
234
|
+
</Markup.ReactMarkupPreview>
|
|
235
|
+
|
|
236
|
+
<Markup.ReactMarkupCode>{`
|
|
237
|
+
<TreeMenu
|
|
238
|
+
getOptions={() => options2}
|
|
239
|
+
getId={(item) => item.name}
|
|
240
|
+
getLabel={(item) => item.name}
|
|
241
|
+
optionTemplate={(item: any) => {
|
|
242
|
+
return (
|
|
243
|
+
<div
|
|
244
|
+
style={{
|
|
245
|
+
display: 'flex',
|
|
246
|
+
alignItems: 'center',
|
|
247
|
+
gap: '4px'
|
|
248
|
+
}}
|
|
249
|
+
>
|
|
250
|
+
{item.icon}
|
|
251
|
+
{item.name}
|
|
252
|
+
</div>
|
|
253
|
+
)
|
|
254
|
+
}}
|
|
255
|
+
>
|
|
256
|
+
{(toggle) => (
|
|
257
|
+
<Button text="Open TreeMenu" onClick={toggle} />
|
|
258
|
+
)}
|
|
259
|
+
</TreeMenu>
|
|
260
|
+
`}</Markup.ReactMarkupCode>
|
|
261
|
+
|
|
262
|
+
</Markup.ReactMarkup>
|
|
263
|
+
|
|
264
|
+
<h3 className="docs-page__h3">Props</h3>
|
|
265
|
+
<PropsList>
|
|
266
|
+
<Prop name='getOptions' isRequired={true} type='Function' default='/' description='An array of selectitems to display as the available options.'/>
|
|
267
|
+
<Prop name='width' isRequired={false} type='medium | full-width (100%)' default='100%' description='Dropdown width.'/>
|
|
268
|
+
<Prop name='getLabel' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
|
|
269
|
+
<Prop name='getId' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
|
|
270
|
+
<Prop name='getBackgroundColor' isRequired={true} type='Function' default='/' description='Function to return background color of individual item in options.'/>
|
|
271
|
+
<Prop name='getBorderColor' isRequired={true} type='Function' default='/' description='Function to return border color of individual item in options in single-select mode.'/>
|
|
272
|
+
<Prop name='optionTemplate' isRequired={false} type='Function(item)' default='/' description='Function that gets the option and returns the content for it.'/>
|
|
273
|
+
</PropsList>
|
|
274
|
+
</section>
|
|
275
|
+
)
|
|
276
|
+
}
|
|
277
|
+
}
|
|
@@ -35736,7 +35736,7 @@ tags-input,
|
|
|
35736
35736
|
box-shadow: var(--sd-shadow__menu-item--focus-inner);
|
|
35737
35737
|
text-decoration: none;
|
|
35738
35738
|
outline: none; }
|
|
35739
|
-
.autocomplete .suggestion-item--btn:hover {
|
|
35739
|
+
.autocomplete .suggestion-item--btn:hover:not([disabled]) {
|
|
35740
35740
|
background-color: var(--sd-colour-interactive--alpha-10) !important; }
|
|
35741
35741
|
.autocomplete .suggestion-item--bgcolor {
|
|
35742
35742
|
min-height: 1.5em;
|
|
@@ -35746,11 +35746,14 @@ tags-input,
|
|
|
35746
35746
|
justify-content: center;
|
|
35747
35747
|
align-items: center;
|
|
35748
35748
|
border-radius: 99px;
|
|
35749
|
-
white-space:
|
|
35749
|
+
white-space: normal; }
|
|
35750
35750
|
.autocomplete .suggestion-item--bgcolor[style*="background-color"] {
|
|
35751
35751
|
padding-inline: 8px; }
|
|
35752
|
-
.autocomplete .suggestion-item--
|
|
35752
|
+
.autocomplete .suggestion-item--selected {
|
|
35753
35753
|
opacity: 0.5; }
|
|
35754
|
+
.autocomplete .suggestion-item--disabled {
|
|
35755
|
+
opacity: 0.5;
|
|
35756
|
+
cursor: default; }
|
|
35754
35757
|
.autocomplete .suggestion-item--nothing-found {
|
|
35755
35758
|
padding: 0.5rem 1rem;
|
|
35756
35759
|
cursor: not-allowed;
|