superdesk-ui-framework 7.0.0-dev1 → 7.0.0-dev2
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/dropdowns/_basic-dropdown.scss +6 -0
- package/app/styles/grids/_grid-layout.scss +2 -0
- package/app-typescript/components/Dropdown.tsx +266 -229
- package/dist/components/Dropdowns.tsx +78 -15
- package/dist/examples.bundle.js +1 -1
- package/dist/storybook/iframe.html +1 -1
- package/dist/storybook/main.18fb8930.iframe.bundle.js +1 -0
- package/dist/storybook/project.json +1 -1
- package/dist/superdesk-ui.bundle.css +1 -1
- package/dist/superdesk-ui.bundle.js +1 -1
- package/package.json +1 -1
- package/react/components/Dropdown.d.ts +6 -5
- package/react/components/Dropdown.js +163 -168
- package/storybook-static/iframe.html +1 -1
- package/storybook-static/main.18fb8930.iframe.bundle.js +1 -0
- package/storybook-static/project.json +1 -1
- package/storybook-static/main.f0d64657.iframe.bundle.js +0 -1
|
@@ -91,32 +91,19 @@ export default class DropdownDoc extends React.Component {
|
|
|
91
91
|
type: 'submenu',
|
|
92
92
|
label: 'Show 1',
|
|
93
93
|
icon: 'plus-sign',
|
|
94
|
-
items: [
|
|
95
|
-
{
|
|
96
|
-
type: 'submenu',
|
|
97
|
-
label: 'Show 3',
|
|
98
|
-
icon: 'plus-sign',
|
|
99
|
-
items: [],
|
|
100
|
-
},
|
|
101
|
-
],
|
|
94
|
+
items: [{label: 'Show 3', icon: 'plus-sign', onSelect: () => 1}],
|
|
102
95
|
},
|
|
103
96
|
{
|
|
104
97
|
type: 'submenu',
|
|
105
98
|
label: 'Show 2',
|
|
106
99
|
icon: 'plus-sign',
|
|
107
|
-
|
|
108
100
|
items: [
|
|
109
101
|
{
|
|
110
102
|
type: 'submenu',
|
|
111
103
|
label: 'Show 4',
|
|
112
104
|
icon: 'plus-sign',
|
|
113
105
|
items: [
|
|
114
|
-
{
|
|
115
|
-
type: 'submenu',
|
|
116
|
-
label: 'Show 5',
|
|
117
|
-
icon: 'plus-sign',
|
|
118
|
-
items: [],
|
|
119
|
-
},
|
|
106
|
+
{label: 'Show 5', icon: 'plus-sign', onSelect: () => 1},
|
|
120
107
|
],
|
|
121
108
|
},
|
|
122
109
|
],
|
|
@@ -228,6 +215,75 @@ export default class DropdownDoc extends React.Component {
|
|
|
228
215
|
</Markup.ReactMarkupCode>
|
|
229
216
|
</Markup.ReactMarkup>
|
|
230
217
|
|
|
218
|
+
<h3 className="docs-page__h3">Scrollable dropdown with submenu</h3>
|
|
219
|
+
<p className="docs-page__paragraph">
|
|
220
|
+
Set <code>maxHeight</code> to make a long menu scrollable. Submenus are rendered outside the scroll
|
|
221
|
+
container so they remain fully visible.
|
|
222
|
+
</p>
|
|
223
|
+
<Markup.ReactMarkup>
|
|
224
|
+
<Markup.ReactMarkupPreview>
|
|
225
|
+
<Dropdown
|
|
226
|
+
maxHeight={180}
|
|
227
|
+
items={[
|
|
228
|
+
{label: 'Action 1', onSelect: () => 1},
|
|
229
|
+
{label: 'Action 2', onSelect: () => 1},
|
|
230
|
+
{label: 'Action 3', onSelect: () => 1},
|
|
231
|
+
{label: 'Action 4', onSelect: () => 1},
|
|
232
|
+
{label: 'Action 5', onSelect: () => 1},
|
|
233
|
+
{label: 'Action 6', onSelect: () => 1},
|
|
234
|
+
{
|
|
235
|
+
type: 'submenu',
|
|
236
|
+
label: 'Second level actions',
|
|
237
|
+
icon: 'star',
|
|
238
|
+
items: [
|
|
239
|
+
{label: 'Sub action 1', onSelect: () => 1},
|
|
240
|
+
{label: 'Sub action 2', onSelect: () => 1},
|
|
241
|
+
{label: 'Sub action 3', onSelect: () => 1},
|
|
242
|
+
{label: 'Sub action 4', onSelect: () => 1},
|
|
243
|
+
],
|
|
244
|
+
},
|
|
245
|
+
{label: 'Action 7', onSelect: () => 1},
|
|
246
|
+
{label: 'Action 8', onSelect: () => 1},
|
|
247
|
+
{label: 'Action 9', onSelect: () => 1},
|
|
248
|
+
{label: 'Action 10', onSelect: () => 1},
|
|
249
|
+
]}
|
|
250
|
+
>
|
|
251
|
+
maxHeight + submenu
|
|
252
|
+
</Dropdown>
|
|
253
|
+
</Markup.ReactMarkupPreview>
|
|
254
|
+
<Markup.ReactMarkupCode>
|
|
255
|
+
{`
|
|
256
|
+
<Dropdown
|
|
257
|
+
maxHeight={180}
|
|
258
|
+
items={[
|
|
259
|
+
{ label: 'Action 1', onSelect: () => 1 },
|
|
260
|
+
{ label: 'Action 2', onSelect: () => 1 },
|
|
261
|
+
{ label: 'Action 3', onSelect: () => 1 },
|
|
262
|
+
{ label: 'Action 4', onSelect: () => 1 },
|
|
263
|
+
{ label: 'Action 5', onSelect: () => 1 },
|
|
264
|
+
{ label: 'Action 6', onSelect: () => 1 },
|
|
265
|
+
{
|
|
266
|
+
type: 'submenu',
|
|
267
|
+
label: 'Second level actions',
|
|
268
|
+
icon: 'star',
|
|
269
|
+
items: [
|
|
270
|
+
{ label: 'Sub action 1', onSelect: () => 1 },
|
|
271
|
+
{ label: 'Sub action 2', onSelect: () => 1 },
|
|
272
|
+
{ label: 'Sub action 3', onSelect: () => 1 },
|
|
273
|
+
{ label: 'Sub action 4', onSelect: () => 1 },
|
|
274
|
+
],
|
|
275
|
+
},
|
|
276
|
+
{ label: 'Action 7', onSelect: () => 1 },
|
|
277
|
+
{ label: 'Action 8', onSelect: () => 1 },
|
|
278
|
+
{ label: 'Action 9', onSelect: () => 1 },
|
|
279
|
+
{ label: 'Action 10', onSelect: () => 1 },
|
|
280
|
+
]}>
|
|
281
|
+
maxHeight + submenu
|
|
282
|
+
</Dropdown>
|
|
283
|
+
`}
|
|
284
|
+
</Markup.ReactMarkupCode>
|
|
285
|
+
</Markup.ReactMarkup>
|
|
286
|
+
|
|
231
287
|
<h3 className="docs-page__h3">Navigation dropdown</h3>
|
|
232
288
|
<p className="docs-page__paragraph">Example of a dropdown inside a subnavigation element.</p>
|
|
233
289
|
<Markup.ReactMarkup>
|
|
@@ -508,6 +564,13 @@ export default class DropdownDoc extends React.Component {
|
|
|
508
564
|
default="left"
|
|
509
565
|
description="Position of dropdown menu based on button"
|
|
510
566
|
/>
|
|
567
|
+
<Prop
|
|
568
|
+
name="maxHeight"
|
|
569
|
+
isRequired={false}
|
|
570
|
+
type="number"
|
|
571
|
+
default="/"
|
|
572
|
+
description="Max height of the menu in pixels. Enables vertical scrolling when content overflows. Submenus stay visible outside the scroll area."
|
|
573
|
+
/>
|
|
511
574
|
<Prop
|
|
512
575
|
name="items"
|
|
513
576
|
isRequired={true}
|