src/components/Page/Panel/index.js

/**
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React, { Component } from 'react';

export default class Panel extends Component {
  componentDidMount() {
    const { globalVariables, variables, onChange } = this.props;
    if (!this.isRender(this.props)) {
      return;
    }
    onChange({ ...globalVariables, ...variables });
  }

  shouldComponentUpdate(nextProps) {
    const {...propsData} = this.props;
    const { globalVariables, variables, onChange } = nextProps;
    if (!this.isRender(nextProps)) {
      return false;
    }
    if (globalVariables !== propsData.globalVariables || variables !== propsData.variables) {
      onChange({ ...globalVariables, ...variables });
      return false;
    }
    return true;
  }

  isRender = props =>
    [props.variables, props.globalVariables].reduce(
      (acc, curr) =>
        acc && (curr === undefined || (curr !== undefined && Object.keys(curr).length > 0)),
      true
    );

  render() {
    const { children } = this.props;
    return children && <div> {children} </div>;
  }
}