github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-01-20 18:27:47 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Lazy draw dropdowns to improve performance (#2925)

Browse Source
This commit is contained in:
David Sevilla Martin 2021-10-13 14:55:32 -04:00 committed by GitHub
parent ee6886382c
commit 766dba39e2
3 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
framework/core/js/src/admin/components/PermissionDropdown.js
View File

@ -38,6 +38,7 @@ export default class PermissionDropdown extends Dropdown {
attrs.className = 'PermissionDropdown';
attrs.buttonClassName = 'Button Button--text';
attrs.lazyDraw = true;
}
view(vnode) {

2
framework/core/js/src/admin/components/PermissionGrid.js
View File

@ -144,6 +144,7 @@ export default class PermissionGrid extends Component {
{ value: '1', label: app.translator.trans('core.admin.permissions_controls.signup_open_button') },
{ value: '0', label: app.translator.trans('core.admin.permissions_controls.signup_closed_button') },
],
lazyDraw: true,
}),
},
90
@ -191,6 +192,7 @@ export default class PermissionGrid extends Component {
{ value: '10', label: app.translator.trans('core.admin.permissions_controls.allow_ten_minutes_button') },
{ value: 'reply', label: app.translator.trans('core.admin.permissions_controls.allow_until_reply_button') },
],
lazyDraw: true,
});
},
},

21
framework/core/js/src/common/components/Dropdown.js
View File

@ -38,11 +38,12 @@ export default class Dropdown extends Component {
view(vnode) {
const items = vnode.children ? listItems(vnode.children) : [];
const renderItems = this.attrs.lazyDraw ? this.showing : true;
return (
<div className={'ButtonGroup Dropdown dropdown ' + this.attrs.className + ' itemCount' + items.length + (this.showing ? ' open' : '')}>
{this.getButton(vnode.children)}
{this.getMenu(items)}
{renderItems && this.getMenu(items)}
</div>
);
}
@ -54,13 +55,25 @@ export default class Dropdown extends Component {
// bottom of the viewport. If it does, we will apply class to make it show
// above the toggle button instead of below it.
this.$().on('shown.bs.dropdown', () => {
const { lazyDraw, onshow } = this.attrs;
this.showing = true;
if (this.attrs.onshow) {
this.attrs.onshow();
// If using lazy drawing, redraw before calling `onshow` function
// to make sure the menu DOM exists in case the callback tries to use it.
if (lazyDraw) {
m.redraw.sync();
}
m.redraw();
if (typeof onshow === 'function') {
onshow();
}
// If not using lazy drawing, keep previous functionality
// of redrawing after calling onshow()
if (!lazyDraw) {
m.redraw();
}
const $menu = this.$('.Dropdown-menu');
const isRight = $menu.hasClass('Dropdown-menu--right');