@apptane/react-ui-layout/dist/TileLayout.js

layout component in Apptane React UI framework

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
const _excluded = ["children", "placement", "tileGap", "minTileWidth"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

import { Scroller } from "@apptane/react-ui-scroller";
import { css } from "@emotion/react";
import { TileLayoutPropTypes } from "./TileLayout.types.js";
import { jsx as _jsx } from "@emotion/react/jsx-runtime";

const StyleBase = (placement, minTileWidth, tileGap) => /*#__PURE__*/css("display:grid;column-gap:", tileGap, "px;row-gap:", tileGap, "px;grid-template-columns:repeat(", placement, ", minmax(", minTileWidth, "px, 1fr));" + (process.env.NODE_ENV === "production" ? "" : ";label:StyleBase;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9UaWxlTGF5b3V0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJbUYiLCJmaWxlIjoiLi4vc3JjL1RpbGVMYXlvdXQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgU2Nyb2xsZXIgfSBmcm9tIFwiQGFwcHRhbmUvcmVhY3QtdWktc2Nyb2xsZXJcIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHsgVGlsZUxheW91dFByb3BzLCBUaWxlTGF5b3V0UHJvcFR5cGVzIH0gZnJvbSBcIi4vVGlsZUxheW91dC50eXBlcy5qc1wiO1xuXG5jb25zdCBTdHlsZUJhc2UgPSAocGxhY2VtZW50OiBzdHJpbmcsIG1pblRpbGVXaWR0aDogbnVtYmVyLCB0aWxlR2FwOiBudW1iZXIpID0+IGNzc2BcbiAgZGlzcGxheTogZ3JpZDtcbiAgY29sdW1uLWdhcDogJHt0aWxlR2FwfXB4O1xuICByb3ctZ2FwOiAke3RpbGVHYXB9cHg7XG4gIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KCR7cGxhY2VtZW50fSwgbWlubWF4KCR7bWluVGlsZVdpZHRofXB4LCAxZnIpKTtcbmA7XG5cbi8qKlxuICogYFRpbGVMYXlvdXRgIGNvbXBvbmVudCDigJQgaW1wbGVtZW50cyB0aWxlLWJhc2VkIGxheW91dC5cbiAqL1xuZnVuY3Rpb24gVGlsZUxheW91dCh7IGNoaWxkcmVuLCBwbGFjZW1lbnQgPSBcImZpbGxcIiwgdGlsZUdhcCwgbWluVGlsZVdpZHRoLCAuLi5vdGhlciB9OiBUaWxlTGF5b3V0UHJvcHMpIHtcbiAgcmV0dXJuIChcbiAgICA8U2Nyb2xsZXIgey4uLm90aGVyfT5cbiAgICAgIDxkaXYgY3NzPXtTdHlsZUJhc2UocGxhY2VtZW50ID09PSBcImZpdFwiID8gXCJhdXRvLWZpdFwiIDogXCJhdXRvLWZpbGxcIiwgbWluVGlsZVdpZHRoLCB0aWxlR2FwID8/IDApfT57Y2hpbGRyZW59PC9kaXY+XG4gICAgPC9TY3JvbGxlcj5cbiAgKTtcbn1cblxuVGlsZUxheW91dC5kaXNwbGF5TmFtZSA9IFwiVGlsZUxheW91dFwiO1xuVGlsZUxheW91dC5wcm9wVHlwZXMgPSBUaWxlTGF5b3V0UHJvcFR5cGVzO1xuXG5leHBvcnQgZGVmYXVsdCBUaWxlTGF5b3V0O1xuIl19 */");
/**
 * `TileLayout` component — implements tile-based layout.
 */


function TileLayout(_ref) {
  let {
    children,
    placement = "fill",
    tileGap,
    minTileWidth
  } = _ref,
      other = _objectWithoutProperties(_ref, _excluded);

  return _jsx(Scroller, _objectSpread(_objectSpread({}, other), {}, {
    children: _jsx("div", {
      css: StyleBase(placement === "fit" ? "auto-fit" : "auto-fill", minTileWidth, tileGap !== null && tileGap !== void 0 ? tileGap : 0),
      children: children
    })
  }));
}

TileLayout.displayName = "TileLayout";
TileLayout.propTypes = TileLayoutPropTypes;
export default TileLayout;
//# sourceMappingURL=TileLayout.js.map