@dnb/eufemia/components/tabs/TabsContentWrapper.js

DNB Eufemia Design System UI Library

import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
import React from 'react';
import classnames from 'classnames';
import { validateDOMAttributes, isTrue, combineLabelledBy } from "../../shared/component-helper.js";
import { createSpacingClasses } from "../space/SpacingHelper.js";
import Section from "../section/Section.js";
import EventEmitter from "../../shared/helpers/EventEmitter.js";
import HeightAnimation from "../height-animation/HeightAnimation.js";
export default class ContentWrapper extends React.PureComponent {
  constructor(props) {
    super(props);
    _defineProperty(this, "state", {
      key: null
    });
    if (props.id) {
      this._eventEmitter = EventEmitter.createInstance(props.id);
      this.state = this._eventEmitter.get();
    }
  }
  componentDidMount() {
    if (this.props.id && this._eventEmitter) {
      this._eventEmitter.listen(params => {
        if (this._eventEmitter && params.key !== this.state.key) {
          this.setState(params);
        }
      });
    }
  }
  componentWillUnmount() {
    if (this._eventEmitter) {
      this._eventEmitter.remove();
      this._eventEmitter = null;
    }
  }
  render() {
    const {
      id,
      children,
      selected_key: key,
      content_style,
      animate,
      content_spacing,
      ...rest
    } = this.props;
    if (!children) {
      return null;
    }
    const params = rest;
    if (key) {
      params['aria-labelledby'] = combineLabelledBy(params, `${id}-tab-${key}`);
    }
    validateDOMAttributes(this.props, params);
    let content = children;
    if (typeof children === 'function') {
      content = children(this.state);
    }
    return React.createElement(HeightAnimation, _extends({
      role: "tabpanel",
      tabIndex: "-1",
      id: `${id}-content`,
      element: content_style ? React.forwardRef((props, ref) => {
        return React.createElement(Section, _extends({
          spacing: content_style ? false : undefined,
          style_type: content_style ? content_style : undefined,
          innerRef: ref
        }, props));
      }) : 'div',
      className: classnames("dnb-tabs__content dnb-no-focus", createSpacingClasses(rest), content_spacing && `dnb-section--spacing-${isTrue(content_spacing) ? 'large' : content_spacing}`),
      duration: 600,
      animate: animate === true
    }, params), content);
  }
}
_defineProperty(ContentWrapper, "defaultProps", {
  selected_key: null,
  content_style: null,
  animate: null,
  content_spacing: true,
  children: null
});
//# sourceMappingURL=TabsContentWrapper.js.map