@lanaco/lnc-react-ui/dist/FlexGridItem.js

React component library

import { jsx as y } from "react/jsx-runtime";
import { forwardRef as N, useState as S, useEffect as b } from "react";
import { P as i } from "./index-S5Cd7WrG.js";
import { n as I } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { u as M } from "./utils-DtRLzzTZ.js";
const W = I.div`
  ${(t) => t.width > 0 ? "" : "flex: 1;"}
  min-width: ${(t) => 100 / t.columns}%;
  width: ${(t) => t.width}%;
  padding: ${(t) => t.rowGap}px ${(t) => t.columnGap}px;
  overflow-wrap: break-word;
`, j = N((t, x) => {
  const {
    XS: r,
    S: s,
    M: a,
    L: n,
    XL: d,
    col: u,
    columns: e,
    spacing: p,
    rowSpacing: c,
    columnSpacing: m,
    children: k
  } = t, l = M(), [L, X] = S(0), [g, f] = S(0), [$, w] = S(0);
  b(() => {
    h();
  }, [e, r, s, a, n, d, u]), b(() => {
    h(), G();
  }, [l]), b(() => {
    G();
  }, [p, c, m]);
  const h = () => {
    let o = u ? 100 / (e / u) : 0;
    switch (l) {
      case "XS":
        o = r ? 100 / (e / r) : o;
        break;
      case "S":
        o = s ? 100 / (e / s) : r ? 100 / (e / r) : o;
        break;
      case "M":
        o = a ? 100 / (e / a) : s ? 100 / (e / s) : r ? 100 / (e / r) : o;
        break;
      case "L":
        o = n ? 100 / (e / n) : a ? 100 / (e / a) : s ? 100 / (e / s) : r ? 100 / (e / r) : o;
        break;
      case "XL":
        o = d ? 100 / (e / d) : n ? 100 / (e / n) : a ? 100 / (e / a) : s ? 100 / (e / s) : r ? 100 / (e / r) : o;
        break;
    }
    X(o);
  }, G = () => {
    p ? (f(p), w(p)) : (c && (isNaN(c) ? f(c[l] ?? 0) : f(c)), m && (isNaN(m) ? w(m[l] ?? 0) : w(m)));
  };
  return /* @__PURE__ */ y(
    W,
    {
      ref: x,
      columns: e,
      width: L,
      rowGap: g,
      columnGap: $,
      children: k
    }
  );
});
j.propTypes = {
  /**
   * Number of columns to take up on XS screens.
   */
  XS: i.number,
  /**
   * Number of columns to take up on S screens.
   */
  S: i.number,
  /**
   * Number of columns to take up on M screens.
   */
  M: i.number,
  /**
   * Number of columns to take up on L screens.
   */
  L: i.number,
  /**
   * Number of columns to take up on XL screens.
   */
  XL: i.number,
  /**
   * Number of columns to take up on any screen size.
   * Defining number on columns for specific screen sizes takes priority over this.
   */
  col: i.number
};
export {
  j as default
};