github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-02-02 01:11:25 +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 0a7e885eab
commit 05121b928a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

2
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: '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') }, { value: '0', label: app.translator.trans('core.admin.permissions_controls.signup_closed_button') },
], ],
lazyDraw: true,
}), }),
}, },
90 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: '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') }, { value: 'reply', label: app.translator.trans('core.admin.permissions_controls.allow_until_reply_button') },
], ],
lazyDraw: true,
}); });
}, },
}, },

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

@ -38,11 +38,12 @@ export default class Dropdown extends Component {
view(vnode) { view(vnode) {
const items = vnode.children ? listItems(vnode.children) : []; const items = vnode.children ? listItems(vnode.children) : [];
const renderItems = this.attrs.lazyDraw ? this.showing : true;
return ( return (
<div className={'ButtonGroup Dropdown dropdown ' + this.attrs.className + ' itemCount' + items.length + (this.showing ? ' open' : '')}> <div className={'ButtonGroup Dropdown dropdown ' + this.attrs.className + ' itemCount' + items.length + (this.showing ? ' open' : '')}>
{this.getButton(vnode.children)} {this.getButton(vnode.children)}
{this.getMenu(items)} {renderItems && this.getMenu(items)}
</div> </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 // bottom of the viewport. If it does, we will apply class to make it show
// above the toggle button instead of below it. // above the toggle button instead of below it.
this.$().on('shown.bs.dropdown', () => { this.$().on('shown.bs.dropdown', () => {
const { lazyDraw, onshow } = this.attrs;
this.showing = true; this.showing = true;
if (this.attrs.onshow) { // If using lazy drawing, redraw before calling `onshow` function
this.attrs.onshow(); // 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 $menu = this.$('.Dropdown-menu');
const isRight = $menu.hasClass('Dropdown-menu--right'); const isRight = $menu.hasClass('Dropdown-menu--right');