@dnb/eufemia/shared/MediaQuery.js

DNB Eufemia Design System UI Library

"use client";

import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
import React from 'react';
import { isTrue } from "./component-helper.js";
import Context from "./Context.js";
import { makeMediaQueryList, createMediaQueryListener, onMediaQueryChange, isMatchMediaSupported } from "./MediaQueryUtils.js";
export { onMediaQueryChange };
export default class MediaQuery extends React.PureComponent {
  constructor(props, context) {
    super(props);
    _defineProperty(this, "state", {
      match: null,
      mediaQueryList: null
    });
    _defineProperty(this, "bindListener", () => {
      this.componentWillUnmount();
      if (this.state.mediaQueryList) {
        this.listener = createMediaQueryListener(this.state.mediaQueryList, match => {
          this.setState({
            match
          });
        });
      }
    });
    if (!isMatchMediaSupported() && isTrue(props.matchOnSSR)) {
      this.state.match = true;
    }
    if (isMatchMediaSupported()) {
      var _this$state$mediaQuer;
      const {
        query,
        when,
        not
      } = props;
      const {
        disabled,
        correctRange = true,
        log
      } = props;
      this.state.mediaQueryList = makeMediaQueryList({
        query,
        when,
        not
      }, context === null || context === void 0 ? void 0 : context.breakpoints, {
        disabled,
        correctRange,
        log
      });
      if ((_this$state$mediaQuer = this.state.mediaQueryList) !== null && _this$state$mediaQuer !== void 0 && _this$state$mediaQuer.matches) {
        this.state.match = true;
      }
    }
  }
  componentDidMount() {
    if (isMatchMediaSupported()) {
      this.bindListener();
    }
  }
  componentWillUnmount() {
    if (this.listener) {
      this.listener();
      this.listener = null;
    }
  }
  componentDidUpdate(props) {
    if (this.props.query !== props.query || this.props.when !== props.when || this.props.not !== props.not) {
      const mediaQueryList = makeMediaQueryList(this.props, this.context.breakpoints);
      this.setState({
        match: mediaQueryList === null || mediaQueryList === void 0 ? void 0 : mediaQueryList.matches,
        mediaQueryList
      }, this.bindListener);
    }
  }
  render() {
    const {
      children
    } = this.props;
    return React.createElement(React.Fragment, null, this.state.match ? children : null);
  }
}
_defineProperty(MediaQuery, "contextType", Context);
//# sourceMappingURL=MediaQuery.js.map