othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixing select2 re-rendering issues

Browse Source
This commit is contained in:
Bruno Alves de Faria 2017-03-31 12:07:38 -03:00
parent 25671c4e77
commit 4e54b21dd4
2 changed files with 49 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Packages/ohif-core/client/components/base/mixins/schemaData.js
View File

@ -100,7 +100,7 @@ OHIF.mixins.schemaData = new OHIF.Mixin({
// Fill the items if it's an array schema // Fill the items if it's an array schema
if (!data.items && Array.isArray(currentSchema.allowedValues)) { if (!data.items && Array.isArray(currentSchema.allowedValues)) {
data.items = new ReactiveVar(); data.items = data.items instanceof ReactiveVar ? data.items : new ReactiveVar();
Tracker.autorun(() => { Tracker.autorun(() => {
const schemaDefs = getCurrentSchemaDefs(parent, data.pathKey); const schemaDefs = getCurrentSchemaDefs(parent, data.pathKey);

68
Packages/ohif-core/client/components/base/mixins/select2.js
View File

@ -1,5 +1,6 @@
import { Template } from 'meteor/templating'; import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var'; import { ReactiveVar } from 'meteor/reactive-var';
import { Tracker } from 'meteor/tracker';
import { _ } from 'meteor/underscore'; import { _ } from 'meteor/underscore';
import { $ } from 'meteor/jquery'; import { $ } from 'meteor/jquery';
import { OHIF } from 'meteor/ohif:core'; import { OHIF } from 'meteor/ohif:core';
@ -53,27 +54,54 @@ OHIF.mixins.select2 = new OHIF.Mixin({
const instance = Template.instance(); const instance = Template.instance();
const component = instance.component; const component = instance.component;
// Apply the select2 to the component // Destroy and re-create the select2 instance
component.$element.select2(instance.data.options); const rebuildSelect2 = () => {
// Destroy the select2 instance if exists and re-create it
// Store the select2 instance to allow its further destruction if (component.select2Instance) {
component.select2Instance = component.$element.data('select2'); component.select2Instance.destroy();
// Get the focusable elements
const elements = [];
elements.push(component.$element[0]);
elements.push(component.$element.nextAll('.select2:first').find('.select2-selection')[0]);
// Attach focus and blur handlers to focusable elements
$(elements).on('focus', event => {
if (event.target === event.currentTarget) {
// Show the state message on elements focus
component.toggleMessage(true);
} }
}).on('blur', event => {
if (event.target === event.currentTarget) { // Apply the select2 to the component
// Hide the state message on elements blur component.$element.select2(instance.data.options);
component.toggleMessage(false);
// Store the select2 instance to allow its further destruction
component.select2Instance = component.$element.data('select2');
// Get the focusable elements
const elements = [];
elements.push(component.$element[0]);
elements.push(component.$element.nextAll('.select2:first').find('.select2-selection')[0]);
// Attach focus and blur handlers to focusable elements
$(elements).on('focus', event => {
if (event.target === event.currentTarget) {
// Show the state message on elements focus
component.toggleMessage(true);
}
}).on('blur', event => {
if (event.target === event.currentTarget) {
// Hide the state message on elements blur
component.toggleMessage(false);
}
});
};
instance.autorun(() => {
// Run this computation every time the reactive items suffer any changes
const isReactive = instance.data.items instanceof ReactiveVar;
if (isReactive) {
instance.data.items.dep.depend();
}
if (isReactive) {
// Keep the current value of the component
const currentValue = component.value();
Tracker.afterFlush(() => {
rebuildSelect2();
component.value(currentValue);
});
} else {
rebuildSelect2();
} }
}); });
}, },