dbl-components/src/js/containers/container.js

Framework based on bootstrap 5

import React from "react";
import PropTypes from "prop-types";
import ResizeSensor from "css-element-queries/src/ResizeSensor";

import { eventHandler } from "dbl-utils";

import Component from "../component";
import Icons from "../media/icons";

const typeClasses = PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.arrayOf(PropTypes.string),
]);

export default class Container extends Component {
  static jsClass = "Container";
  static propTypes = {
    ...Component.propTypes,
    fluid: PropTypes.bool,
    fullWidth: PropTypes.bool,
    breakpoints: PropTypes.objectOf(PropTypes.number),
    xsClasses: typeClasses,
    smClasses: typeClasses,
    mdClasses: typeClasses,
    lgClasses: typeClasses,
    xlClasses: typeClasses,
    xxlClasses: typeClasses,
  };
  static defaultProps = {
    ...Component.defaultProps,
    fluid: true,
    fullWidth: false,
    breakpoints: {
      xs: 0,
      sm: 576,
      md: 768,
      lg: 992,
      xl: 1200,
      xxl: 1400,
    },
  };

  breakpoint = false;
  orientation = false;
  waitBreakpoint = React.createElement(Icons, {
    icon: "spinner",
    classes: "spinner",
  });

  constructor(props) {
    super(props);
    this.onResize = this.onResize.bind(this);
  }

  get componentProps() {
    return {
      id: this.props.name,
      ...this.props._props,
    };
  }

  updateSize() {
    const { fluid, fullWidth } = this.props;
    const containerType = !fullWidth
      ? fluid
        ? "container-fluid"
        : "container"
      : "";
    const localClasses = new Set(this.state.localClasses.split(" "));
    Object.keys(this.props.breakpoints).forEach((br) =>
      localClasses.delete(br)
    );
    [containerType, this.breakpoint, "animate"].forEach((c) =>
      localClasses.add(c)
    );
    this.state.localClasses = Array.from(localClasses).flat().join(" ");
    if (!this.addClasses(this.props[this.breakpoint + "Classes"])) {
      this.setState({
        localClasses: this.state.localClasses,
      });
    }
  }

  onResize(firstTime) {
    const resizingFunc = () => {
      if (!this.ref.current) return;

      let width, height;
      if (firstTime === true)
        ({ offsetWidth: width, offsetHeight: height } = this.ref.current);
      else ({ width, height } = firstTime);

      // TODO: no se toma en cuenta el ordenamiento de los breakpoints, ordenarlos
      //       y buscar la manera de empatar automagicamente con sass $container-max-widths
      this.breakpoint = Object.keys(this.props.breakpoints)
        .filter((br) => width >= this.props.breakpoints[br])
        .pop();
      this.orientation = width >= height ? "landscape" : "portrait";
      this.width = width;
      this.height = height;
      const resp = {
        width,
        height,
        breakpoint: this.breakpoint,
        orientation: this.orientation,
      };

      if (typeof this.props.onResize === "function") {
        this.props.onResize(resp);
      }
      eventHandler.dispatch("resize." + this.props.name, resp);
      this.updateSize();
    };

    if (firstTime === true) {
      resizingFunc();
      eventHandler.dispatch("ready." + this.props.name);
    } else {
      clearTimeout(this.onResizeTimeout);
      this.onResizeTimeout = setTimeout(resizingFunc, 200);
    }
  }

  componentDidMount() {
    if (this.ref.current)
      this.resizeSensor = new ResizeSensor(this.ref.current, this.onResize);
    this.onResize(true);
  }

  componentDidUpdate(prevProps) {
    if (
      prevProps.fluid != this.props.fluid ||
      prevProps.fullWidth != this.props.fullWidth
    ) {
      this.updateSize();
    }
  }

  componentWillUnmount() {
    clearTimeout(this.onResizeTimeout);
    if (this.resizeSensor) this.resizeSensor.detach();
  }

  content(children = this.props.children) {
    return !!this.breakpoint ? children : this.waitBreakpoint;
  }
}