@moxy/next-layout/es/LayoutTree.js

Add persistent and nested layouts to your Next.js projects in a declarative way

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import memoizeOne from 'memoize-one';
import LayoutContext from './util/context';
import createFullTree from './util/full-tree';
import { getInitialLayoutTree, isComponentWrapped } from './with-layout';
const LayoutProvider = LayoutContext.Provider;
export default class LayoutTree extends PureComponent {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "state", {});

    _defineProperty(this, "updateLayoutTree", layoutTree => this.setState({
      layoutTree
    }));

    _defineProperty(this, "getProviderValue", memoizeOne((Component, pageKey) => ({
      Component,
      pageKey,
      updateLayoutTree: this.updateLayoutTree
    })));
  }

  static getDerivedStateFromProps(props, state) {
    const {
      Component,
      pageProps,
      pageKey
    } = props;
    const didPageChange = Component !== state.Component || pageKey !== state.pageKey;
    const layoutTree = didPageChange ? getInitialLayoutTree(Component, pageProps) : state.layoutTree;
    return {
      Component,
      pageKey,
      layoutTree
    };
  }

  render() {
    const {
      defaultLayout,
      Component,
      pageProps,
      pageKey,
      children: render
    } = this.props;
    const {
      layoutTree
    } = this.state; // Do not forward pageKey if the component is not wrapped, otherwise it would cause
    // an error if props were spreaded into a DOM element:
    // "React does not recognize the `pageKey` prop on a DOM element".

    const isWrapped = isComponentWrapped(Component);
    const page = /*#__PURE__*/React.createElement(Component, Object.assign({}, pageProps, isWrapped && {
      pageKey
    }, {
      key: pageKey
    }));
    const fullTree = createFullTree(layoutTree !== null && layoutTree !== void 0 ? layoutTree : defaultLayout, page);
    const providerValue = this.getProviderValue(Component, pageKey);
    return /*#__PURE__*/React.createElement(LayoutProvider, {
      value: providerValue
    }, render(fullTree));
  }

}

_defineProperty(LayoutTree, "propTypes", {
  Component: PropTypes.elementType.isRequired,
  pageProps: PropTypes.object,
  pageKey: PropTypes.string,
  defaultLayout: PropTypes.element,
  children: PropTypes.func
});

_defineProperty(LayoutTree, "defaultProps", {
  children: rootNode => rootNode
});