saagie-ui/src/react/core/layout/page/Page.js

Saagie UI from Saagie Design System

import React, { createContext, useContext, useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

const propTypes = {
  /**
   * The page content.
   */
  children: PropTypes.node,
  /**
   * The className property allows you to add more classes to the component.
   */
  className: PropTypes.string,

  /**
   * The default class of the component.
   */
  defaultClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
  /**
   * The size of the horizontal space around the page.
   * You can also use responsive values like 'xs sm@md md@lg'
   */
  gutterHorizontal: PropTypes.oneOfType([
    PropTypes.oneOf(['none', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl']),
    PropTypes.string,
  ]),
  /**
   * The content size.
   */
  size: PropTypes.oneOf(['full', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl']),
  /**
   * The component used for the root node.
   * Either a string to use a DOM element or a component.
   */
  tag: PropTypes.elementType,
};

const defaultProps = {
  children: '',
  className: '',
  defaultClassName: 'sui-l-app-layout__main as--bg-soft',
  gutterHorizontal: 'lg',
  size: 'xl',
  tag: 'div',
};

export const PageContext = createContext({
  bgColor: defaultProps.bgColor,
  gutterHorizontal: defaultProps.gutterHorizontal,
  size: defaultProps.size,
  isContentScrolled: false,
  setIsContentScrolled: () => {},
  rangeAnimationShouldNotStart: undefined,
  setRangeAnimationShouldNotStart: () => {},
  shouldNotAnimateTopBar: false,
  setShouldNotAnimateTopBar: () => {},
});

export const usePageContext = () => useContext(PageContext);

export const Page = ({
  tag: Tag,
  children,
  className,
  defaultClassName,
  gutterHorizontal,
  size,
  ...props
}) => {
  const [isContentScrolled, setIsContentScrolled] = useState(false);
  const [rangeAnimationShouldNotStart, setRangeAnimationShouldNotStart] = useState(undefined);
  const [shouldNotAnimateTopBar, setShouldNotAnimateTopBar] = useState(false);

  const classes = classnames(
    defaultClassName,
    className
  );

  return (
    <PageContext.Provider
      value={{
        size,
        gutterHorizontal,
        isContentScrolled,
        setIsContentScrolled,
        rangeAnimationShouldNotStart,
        setRangeAnimationShouldNotStart,
        shouldNotAnimateTopBar,
        setShouldNotAnimateTopBar,
      }}
    >
      <Tag className={classes} {...props}>
        {children}
      </Tag>
    </PageContext.Provider>
  );
};

Page.propTypes = propTypes;
Page.defaultProps = defaultProps;