+
child.getAttribute('data-pc-name') === 'splitterpanel');
- let _panelSizes = [];
-
- this.panels.map((panel, i) => {
- let panelInitialSize = panel.props && panel.props.size ? panel.props.size : null;
- let panelSize = panelInitialSize || 100 / this.panels.length;
-
- _panelSizes[i] = panelSize;
- children[i].style.flexBasis = 'calc(' + panelSize + '% - ' + (this.panels.length - 1) * this.gutterSize + 'px)';
- });
-
- this.panelSizes = _panelSizes;
- this.prevSize = parseFloat(_panelSizes[0]).toFixed(4);
- }
- }
+ this.initializePanels();
+ },
+ updated() {
+ this.initializePanels();
},
beforeUnmount() {
this.clear();
@@ -83,6 +65,31 @@ export default {
isSplitterPanel(child) {
return child.type.name === 'SplitterPanel';
},
+ initializePanels() {
+ if (this.panels && this.panels.length) {
+ let initialized = false;
+
+ if (this.isStateful()) {
+ initialized = this.restoreState();
+ }
+
+ if (!initialized) {
+ let children = [...this.$el.children].filter((child) => child.getAttribute('data-pc-name') === 'splitterpanel');
+ let _panelSizes = [];
+
+ this.panels.map((panel, i) => {
+ let panelInitialSize = panel.props && panel.props.size ? panel.props.size : null;
+ let panelSize = panelInitialSize || 100 / this.panels.length;
+
+ _panelSizes[i] = panelSize;
+ children[i].style.flexBasis = 'calc(' + panelSize + '% - ' + (this.panels.length - 1) * this.gutterSize + 'px)';
+ });
+
+ this.panelSizes = _panelSizes;
+ this.prevSize = parseFloat(_panelSizes[0]).toFixed(4);
+ }
+ }
+ },
onResizeStart(event, index, isKeyDown) {
this.gutterElement = event.currentTarget || event.target.parentElement;
this.size = this.horizontal ? DomHandler.getWidth(this.$el) : DomHandler.getHeight(this.$el);