@exabytellc/utils/dist/Shimmer/_Shimmer.js

EB react utils to make everything a little easier!

import React, { useMemo } from "react";
import PropTypes from "prop-types";
import "./style.css";

/**
 * Shimmer.Box Component
 * @param {Object} props
 * @param {string} props.className - Additional CSS classes for the Box.
 * @param {Object} props.style - Inline styles for the Box.
 * @param {React.ReactNode} props.children - Children to render inside the Box.
 * @returns {JSX.Element} A container box for the Shimmer.
 */
import { jsx as _jsx } from "react/jsx-runtime";
Shimmer.Box = function Box(_ref) {
  let {
    className = "",
    style = {},
    children
  } = _ref;
  return /*#__PURE__*/_jsx("div", {
    className: className,
    style: style,
    children: children
  });
};
Shimmer.Box.propTypes = {
  className: PropTypes.string,
  style: PropTypes.object,
  children: PropTypes.node
};

/**
 * Shimmer.Item Component
 * @param {Object} props
 * @param {string} props.className - Additional CSS classes for the Item.
 * @param {Object} props.style - Inline styles for the Item.
 * @returns {JSX.Element} A shimmer effect item.
 */
Shimmer.Item = function Item(_ref2) {
  let {
    className = "",
    style = {}
  } = _ref2;
  return /*#__PURE__*/_jsx("div", {
    className: `eb-shimmer ${className}`,
    style: style
  });
};
Shimmer.Item.propTypes = {
  className: PropTypes.string,
  style: PropTypes.object
};

/**
 * Shimmer Component
 * @param {Object} props
 * @param {boolean} props.loading - Whether to show the shimmer effect or not.
 * @param {string} props.className - Additional CSS classes for the Shimmer container.
 * @param {Object} props.style - Inline styles for the Shimmer container.
 * @param {React.ReactNode} props.children - Children to render when loading is false.
 * @param {number} props.rows - Number of rows for the shimmer.
 * @param {number} props.cols - Number of columns for the shimmer.
 * @param {Function} props.Render - Custom render function for the shimmer item.
 * @returns {JSX.Element} Shimmer effect or children based on the loading state.
 */
export default function Shimmer(_ref3) {
  let {
    loading = true,
    className = "",
    style = {},
    children = null,
    rows = 1,
    cols = 1,
    gap = 16,
    Render = () => /*#__PURE__*/_jsx(Shimmer.Box, {
      children: /*#__PURE__*/_jsx(Shimmer.Item, {
        style: {
          width: "75%",
          height: "80px"
        }
      })
    })
  } = _ref3;
  // Memoize grid styles to prevent unnecessary re-renders
  const gridStyles = useMemo(() => {
    return {
      display: "grid",
      gap: `${gap}px`,
      gridTemplateColumns: `repeat(${cols > 0 ? cols : 1}, minmax(0, 1fr))`,
      ...style
    };
  }, [cols, gap, style]);
  if (loading) {
    return /*#__PURE__*/_jsx("div", {
      className: className,
      style: gridStyles,
      children: Array.from({
        length: rows
      }).map((_, i) => /*#__PURE__*/_jsx(Render, {}, i))
    });
  }

  // Render children if loading is false
  return children || null;
}
Shimmer.propTypes = {
  loading: PropTypes.bool,
  className: PropTypes.string,
  style: PropTypes.object,
  children: PropTypes.node,
  rows: PropTypes.number,
  cols: PropTypes.number,
  gap: PropTypes.number,
  Render: PropTypes.func
};