@integreat-app/react-sticky-headroom/index.cjs.map

ReactStickyHeadroom is a React Component for hiding the header when scrolling.

{"version":3,"sources":["index.tsx"],"sourcesContent":["import React from 'react'\nimport styled from '@emotion/styled'\nimport { keyframes } from '@emotion/react'\n\nconst DIRECTION_UP = 'up'\nconst DIRECTION_DOWN = 'down'\n\nconst MODE_UNPINNED = 'unpinned'\nconst MODE_PINNED = 'pinned'\nconst MODE_STATIC = 'static'\n\nconst TRANSITION_NONE = 'none'\nconst TRANSITION_NORMAL = 'normal'\nconst TRANSITION_PINNED_TO_STATIC = 'pinned-to-static'\n\ntype ModeType = typeof MODE_PINNED | typeof MODE_UNPINNED | typeof MODE_STATIC\ntype DirectionType = typeof DIRECTION_UP | typeof DIRECTION_DOWN\ntype TransitionType = typeof TRANSITION_NONE | typeof TRANSITION_NORMAL | typeof TRANSITION_PINNED_TO_STATIC\n\ntype PropsType = {\n  /** The child node to be displayed as a header */\n  children: React.ReactNode\n  /** The maximum amount of px the header should move up when scrolling */\n  scrollHeight: number\n  /** The minimum scrollTop position where the transform should start */\n  pinStart: number\n  /** Used for calculating the stickyTop position of an ancestor */\n  height?: number\n  /** Fired, when Headroom changes its state. Passes stickyTop of the ancestor. */\n  onStickyTopChanged?: (stickyTop: number) => void\n  /** True, if sticky position should be disabled (e.g. for edge 16 support) */\n  positionStickyDisabled?: boolean\n  /** The parent element firing the scroll event. Defaults to document.documentElement */\n  parent?: HTMLElement | null\n  /** The z-index used by the wrapper. Defaults to 1. */\n  zIndex?: number\n  /** A classname for applying custom styles to the wrapper. Use at your own risk. */\n  className?: string\n}\n\ntype StateType = {\n  mode: ModeType\n  transition: TransitionType\n  animateUpFrom: number | null\n}\n\nconst HeaderWrapper = styled.div<{\n  $positionStickyDisabled: boolean\n  $translateY: number\n  $transition: TransitionType\n  $animateUpFrom: number | null\n  $zIndex?: number\n  $top: number\n  $static: boolean\n}>`\n  position: ${props => (props.$positionStickyDisabled ? 'static' : 'sticky')};\n  top: ${props => props.$top}px;\n  z-index: ${props => props.$zIndex};\n  transform: translateY(${props => props.$translateY}px);\n  animation-duration: 0.2s;\n  animation-timing-function: ease-out;\n  ${props => (props.$transition === TRANSITION_NORMAL && !props.$static ? 'transition: transform 0.2s ease-out;' : '')}\n  animation-name: ${props =>\n    props.$transition === TRANSITION_PINNED_TO_STATIC && props.$animateUpFrom !== null\n      ? keyframesMoveUpFrom(props.$animateUpFrom)\n      : 'none'};\n  ${props => (props.$static ? 'transition: none;' : '')}\n`\n\nconst keyframesMoveUpFrom = (from: number) => keyframes`\n    from {\n      transform: translateY(${Math.max(from, 0)}px)\n    }\n\n    to {\n      transform: translateY(0)\n    }\n`\n\nclass Headroom extends React.PureComponent<PropsType, StateType> {\n  static defaultProps: { pinStart: number; zIndex: number; parent: HTMLElement | null } = {\n    pinStart: 0,\n    zIndex: 1,\n    parent: window.document.documentElement,\n  }\n\n  state: StateType = {\n    mode: MODE_STATIC,\n    transition: TRANSITION_NONE,\n    animateUpFrom: null,\n  }\n\n  /** the very last scrollTop which we know about (to determine direction changes) */\n  lastKnownScrollTop: number = 0\n\n  /**\n   * @returns {number} the current scrollTop position of the window\n   */\n  getScrollTop(): number {\n    const parent = this.props.parent\n    if (parent && parent.scrollTop !== undefined && parent !== document.documentElement) {\n      return parent.scrollTop\n    }\n    if (parent !== document.documentElement) {\n      console.warn('Could not determine scrollTop from parent for StickyHeadroom. Defaulting to window.pageYOffset.')\n    }\n    if (window.pageYOffset === undefined) {\n      console.error('window.pageYOffset is undefined. Defaulting to 0.')\n      return 0\n    }\n    return window.pageYOffset\n  }\n\n  componentDidMount() {\n    this.addScrollListener(this.props.parent)\n  }\n\n  addScrollListener(parent?: HTMLElement | null) {\n    if (parent === window.document.documentElement) {\n      window.addEventListener('scroll', this.handleEvent)\n    } else if (parent) {\n      parent.addEventListener('scroll', this.handleEvent)\n    } else {\n      console.debug(\"'parent' prop of Headroom is null. Assuming, it will be set soon...\")\n    }\n  }\n\n  removeScrollListener(parent?: HTMLElement | null) {\n    if (parent === window.document.documentElement) {\n      window.removeEventListener('scroll', this.handleEvent)\n    } else if (parent) {\n      parent.removeEventListener('scroll', this.handleEvent)\n    }\n  }\n\n  componentDidUpdate(prevProps: PropsType) {\n    if (prevProps.parent !== this.props.parent) {\n      this.removeScrollListener(prevProps.parent)\n      this.addScrollListener(this.props.parent)\n    }\n  }\n\n  componentWillUnmount() {\n    this.removeScrollListener(this.props.parent)\n  }\n\n  /**\n   * If we're already static and pinStart + scrollHeight >= scrollTop, then we should stay static.\n   * If we're not already static, then we should set the header static, only when pinStart >= scrollTop (regardless of\n   * scrollHeight, so the header doesn't jump up, when scrolling upwards to the trigger).\n   * Else we shouldn't set it static.\n   * @param scrollTop the currentScrollTop position\n   * @param direction the current direction\n   * @returns {boolean} if we should set the header static\n   */\n  shouldSetStatic(scrollTop: number, direction: DirectionType): boolean {\n    if (this.state.mode === MODE_STATIC || (this.state.mode === MODE_PINNED && direction === DIRECTION_DOWN)) {\n      return this.props.pinStart + this.props.scrollHeight >= scrollTop\n    } else {\n      return this.props.pinStart >= scrollTop\n    }\n  }\n\n  /**\n   * Determines the mode depending on the scrollTop position and the current direction\n   * @param {number} scrollTop\n   * @param {string} direction\n   * @returns {string} the next mode of Headroom\n   */\n  determineMode(scrollTop: number, direction: DirectionType): ModeType {\n    if (this.shouldSetStatic(scrollTop, direction)) {\n      return MODE_STATIC\n    } else {\n      return direction === DIRECTION_UP ? MODE_PINNED : MODE_UNPINNED\n    }\n  }\n\n  /**\n   * @returns {TransitionType} determines the kind of transition\n   */\n  determineTransition(mode: ModeType, direction: DirectionType): TransitionType {\n    // Handle special case: If we're pinned and going to static, we need a special transition using css animation\n    if (this.state.mode === MODE_PINNED && mode === MODE_STATIC) {\n      return TRANSITION_PINNED_TO_STATIC\n    }\n    // If mode is static, then no transition, because we're already in the right spot\n    // (and want to change transform and top properties seamlessly)\n    if (mode === MODE_STATIC) {\n      return this.state.transition === TRANSITION_NONE ? TRANSITION_NONE : TRANSITION_PINNED_TO_STATIC\n    }\n    // mode is not static, transition when moving upwards or when we've lastly did the transition\n    return direction === DIRECTION_UP || this.state.transition === TRANSITION_NORMAL\n      ? TRANSITION_NORMAL\n      : TRANSITION_NONE\n  }\n\n  /**\n   * Checks the current scrollTop position and updates the state accordingly\n   */\n  update: () => void = () => {\n    const currentScrollTop = this.getScrollTop()\n    const newState: Partial<StateType> = {}\n    if (currentScrollTop === this.lastKnownScrollTop) {\n      return\n    }\n    const direction = this.lastKnownScrollTop < currentScrollTop ? DIRECTION_DOWN : DIRECTION_UP\n    newState.mode = this.determineMode(currentScrollTop, direction)\n    newState.transition = this.determineTransition(newState.mode, direction)\n\n    const { onStickyTopChanged, height, scrollHeight, pinStart } = this.props\n    if (this.state.mode === MODE_PINNED && newState.mode === MODE_STATIC) {\n      // animation in the special case from pinned to static\n      newState.animateUpFrom = currentScrollTop - pinStart\n    }\n    if (onStickyTopChanged && newState.mode !== this.state.mode && height) {\n      onStickyTopChanged(Headroom.calcStickyTop(newState.mode, height, scrollHeight))\n    }\n    this.setState(newState as StateType)\n    this.lastKnownScrollTop = currentScrollTop\n  }\n\n  handleEvent: () => void = () => {\n    window.requestAnimationFrame(this.update)\n  }\n\n  static calcStickyTop(mode: ModeType, height: number, scrollHeight: number): number {\n    return mode === MODE_PINNED ? height : height - scrollHeight\n  }\n\n  render(): React.ReactElement {\n    const { children, scrollHeight, positionStickyDisabled, zIndex, className } = this.props\n    const { mode, transition, animateUpFrom } = this.state\n    const transform = mode === MODE_UNPINNED ? -scrollHeight : 0\n    const ownStickyTop = mode === MODE_STATIC ? -scrollHeight : 0\n    return (\n      <HeaderWrapper\n        className={className}\n        $translateY={transform}\n        $top={ownStickyTop}\n        $transition={transition}\n        $positionStickyDisabled={!!positionStickyDisabled}\n        $static={mode === MODE_STATIC}\n        $animateUpFrom={animateUpFrom}\n        $zIndex={zIndex}>\n        {children}\n      </HeaderWrapper>\n    )\n  }\n}\n\nexport default Headroom\n"],"names":["DIRECTION_UP","DIRECTION_DOWN","MODE_UNPINNED","MODE_PINNED","MODE_STATIC","TRANSITION_NONE","TRANSITION_NORMAL","TRANSITION_PINNED_TO_STATIC","HeaderWrapper","styled","props","$positionStickyDisabled","$top","$zIndex","$translateY","$transition","$static","$animateUpFrom","keyframesMoveUpFrom","from","keyframes","Math","max","React","Headroom","PureComponent","getScrollTop","parent","scrollTop","undefined","document","documentElement","console","warn","window","pageYOffset","error","componentDidMount","addScrollListener","addEventListener","handleEvent","debug","removeScrollListener","removeEventListener","componentDidUpdate","prevProps","componentWillUnmount","shouldSetStatic","direction","state","mode","pinStart","scrollHeight","determineMode","determineTransition","transition","calcStickyTop","height","render","children","positionStickyDisabled","zIndex","className","animateUpFrom","transform","ownStickyTop","lastKnownScrollTop","update","currentScrollTop","newState","onStickyTopChanged","setState","requestAnimationFrame","defaultProps"],"mappings":"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"}