@trap_stevo/legendarybuilderproreact-ui/dist/HUDComponents/HUDGrid.js

The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton

import _extends from "@babel/runtime/helpers/extends";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["gridConfigurationSettings", "breakpoints", "columnWidths", "rowHeights", "columns", "rows", "gap", "autoFlow", "fluid", "areas", "onLayoutUpdate", "dynamicAreas", "children"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useMemo, useState, useEffect } from "react";
import HUDGridItem from "./HUDGridItem.js";
var generateResponsiveStyles = function generateResponsiveStyles(breakpoints, rowHeights, columnWidths) {
  var styles = {};
  Object.keys(breakpoints).forEach(function (breakpoint) {
    var _breakpoints$breakpoi = breakpoints[breakpoint],
      rows = _breakpoints$breakpoi.rows,
      columns = _breakpoints$breakpoi.columns,
      gap = _breakpoints$breakpoi.gap,
      areas = _breakpoints$breakpoi.areas,
      autoFlow = _breakpoints$breakpoi.autoFlow;
    styles["@media (min-width: ".concat(breakpoint, "px)")] = {
      gridTemplateRows: rowHeights ? rowHeights.join(" ") : rows || "auto",
      gridTemplateColumns: columnWidths ? columnWidths.join(" ") : columns || "auto",
      gap: gap || "0",
      gridTemplateAreas: areas || null,
      gridAutoFlow: autoFlow || "row"
    };
  });
  return styles;
};
var HUDGrid = function HUDGrid(_ref) {
  var _ref$gridConfiguratio = _ref.gridConfigurationSettings,
    gridConfigurationSettings = _ref$gridConfiguratio === void 0 ? {} : _ref$gridConfiguratio,
    _ref$breakpoints = _ref.breakpoints,
    breakpoints = _ref$breakpoints === void 0 ? {} : _ref$breakpoints,
    _ref$columnWidths = _ref.columnWidths,
    columnWidths = _ref$columnWidths === void 0 ? null : _ref$columnWidths,
    _ref$rowHeights = _ref.rowHeights,
    rowHeights = _ref$rowHeights === void 0 ? null : _ref$rowHeights,
    _ref$columns = _ref.columns,
    columns = _ref$columns === void 0 ? "auto" : _ref$columns,
    _ref$rows = _ref.rows,
    rows = _ref$rows === void 0 ? "auto" : _ref$rows,
    _ref$gap = _ref.gap,
    gap = _ref$gap === void 0 ? "0" : _ref$gap,
    _ref$autoFlow = _ref.autoFlow,
    autoFlow = _ref$autoFlow === void 0 ? "row" : _ref$autoFlow,
    _ref$fluid = _ref.fluid,
    fluid = _ref$fluid === void 0 ? false : _ref$fluid,
    _ref$areas = _ref.areas,
    areas = _ref$areas === void 0 ? null : _ref$areas,
    _ref$onLayoutUpdate = _ref.onLayoutUpdate,
    onLayoutUpdate = _ref$onLayoutUpdate === void 0 ? null : _ref$onLayoutUpdate,
    _ref$dynamicAreas = _ref.dynamicAreas,
    dynamicAreas = _ref$dynamicAreas === void 0 ? null : _ref$dynamicAreas,
    children = _ref.children,
    rest = _objectWithoutProperties(_ref, _excluded);
  var _useState = useState(function () {
      return React.Children.toArray(children);
    }),
    _useState2 = _slicedToArray(_useState, 2),
    currentChildren = _useState2[0],
    setCurrentChildren = _useState2[1];
  var _useState3 = useState(areas),
    _useState4 = _slicedToArray(_useState3, 2),
    currentAreas = _useState4[0],
    setCurrentAreas = _useState4[1];
  var responsiveStyles = useMemo(function () {
    return generateResponsiveStyles(breakpoints, rowHeights, columnWidths);
  }, [breakpoints, rowHeights, columnWidths]);
  var gridStyle = useMemo(function () {
    return _objectSpread(_objectSpread({
      display: "grid",
      gridTemplateRows: rowHeights ? rowHeights.join(" ") : rows,
      gridTemplateColumns: columnWidths ? columnWidths.join(" ") : columns,
      gap: gap,
      gridTemplateAreas: dynamicAreas || currentAreas,
      gridAutoFlow: autoFlow,
      height: "100%",
      width: fluid ? "100%" : "auto"
    }, responsiveStyles), gridConfigurationSettings);
  }, [rows, columns, gap, dynamicAreas, currentAreas, autoFlow, fluid, responsiveStyles, gridConfigurationSettings, rowHeights, columnWidths]);
  var internalMoveItem = function internalMoveItem(dragIndex, hoverIndex) {
    var updatedChildren = _toConsumableArray(currentChildren);
    var _updatedChildren$spli = updatedChildren.splice(dragIndex, 1),
      _updatedChildren$spli2 = _slicedToArray(_updatedChildren$spli, 1),
      removed = _updatedChildren$spli2[0];
    updatedChildren.splice(hoverIndex, 0, removed);
    setCurrentChildren(updatedChildren);
    if (onLayoutUpdate) {
      onLayoutUpdate(updatedChildren, currentAreas);
    }
  };
  useEffect(function () {
    setCurrentChildren(React.Children.toArray(children));
  }, [children]);
  return /*#__PURE__*/React.createElement("div", _extends({
    style: gridStyle
  }, rest), currentChildren.map(function (child, index) {
    return /*#__PURE__*/React.cloneElement(child, {
      moveItem: internalMoveItem,
      index: index
    });
  }));
};
export { HUDGrid, HUDGridItem };