@geezee/react-ui/esm/page/page.js

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React, { useEffect, useMemo, useState } from 'react';
import { tuple } from '../utils/prop-types';
import { getPageSize } from './styles';
import useTheme from '../styles/use-theme';
import PageContent from './page-content';
import { hasChild } from '../utils/collections';
var renderMode = tuple('default', 'effect', 'effect-seo');
var defaultProps = {
  size: 'medium',
  render: 'default',
  dotBackdrop: false
};

var DotStyles = function DotStyles() {
  return /*#__PURE__*/React.createElement("span", {
    className: "jsx-3167743014"
  }, /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "3167743014"
  }, "body{background-image:radial-gradient(#e3e3e3 1px,transparent 0), radial-gradient(#e3e3e3 1px,transparent 0);background-position:0 0,25px 25px;background-attachment:fixed;background-size:50px 50px;}"));
};

var Page = function Page(_ref) {
  var children = _ref.children,
      size = _ref.size,
      render = _ref.render,
      dotBackdrop = _ref.dotBackdrop,
      className = _ref.className,
      props = _objectWithoutProperties(_ref, ["children", "size", "render", "dotBackdrop", "className"]);

  var theme = useTheme();
  var width = useMemo(function () {
    return getPageSize(size, theme.layout);
  }, [size, theme.layout]);
  var showDot = useMemo(function () {
    if (theme.type === 'dark') return false;
    return dotBackdrop;
  }, [dotBackdrop, theme.type]);

  var _useState = useState(render !== 'default'),
      _useState2 = _slicedToArray(_useState, 2),
      preventRender = _useState2[0],
      setPreventRender = _useState2[1];

  useEffect(function () {
    setPreventRender(false);
  }, []);

  if (preventRender) {
    var renderSEO = render === 'effect-seo';
    if (!renderSEO) return null;
    return /*#__PURE__*/React.createElement("div", {
      "aria-hidden": "true",
      className: "jsx-3942095687" + " " + "hidden"
    }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
      id: "3942095687"
    }, ".hidden.jsx-3942095687{opacity:0;display:none;}"));
  }

  var hasContent = hasChild(children, PageContent);
  return /*#__PURE__*/React.createElement("section", _extends({}, props, {
    className: _JSXStyle.dynamic([["2518005568", [width, theme.layout.gap]]]) + " " + (props && props.className != null && props.className || className || "")
  }), hasContent ? children : /*#__PURE__*/React.createElement(PageContent, null, children), showDot && /*#__PURE__*/React.createElement(DotStyles, null), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "2518005568",
    dynamic: [width, theme.layout.gap]
  }, "section.__jsx-style-dynamic-selector{width:".concat(width, ";max-width:100vw;min-height:100vh;margin:0 auto;padding:0 ").concat(theme.layout.gap, ";box-sizing:border-box;position:relative;}")));
};

Page.defaultProps = defaultProps;
export default React.memo(Page);