react-scroll-into-view/dist/index.mjs.map

Simple React element that when clicked scrolls to any element on page

{"version":3,"file":"index.mjs","names":[],"sources":["../src/index.tsx"],"sourcesContent":["import React from \"react\";\n\ntype ClickHandler = (ev: React.MouseEvent<HTMLElement>) => void;\n\nexport type ScrollIntoViewProps = {\n  selector: string;\n  children: React.ReactNode;\n  smooth?: boolean;\n  style?: React.CSSProperties;\n  alignToTop?: boolean;\n  className?: string;\n  scrollOptions?: ScrollIntoViewOptions;\n  onClick?: ClickHandler;\n};\n\nconst validScrollOptions = (scrollOptions: ScrollIntoViewOptions): ScrollOptions => {\n  if (typeof scrollOptions !== \"object\") {\n    return {};\n  }\n\n  return Object.entries(scrollOptions).reduce<ScrollIntoViewOptions>((acc, [key, val]) => {\n    switch (key) {\n      case \"behavior\":\n        if (val === \"auto\" || val === \"smooth\") {\n          acc[key] = val;\n        }\n        break;\n\n      case \"block\":\n      case \"inline\":\n        if (val === \"start\" || val === \"center\" || val === \"end\" || val === \"nearest\") {\n          acc[key] = val;\n        }\n        break;\n\n      default:\n    }\n    return acc;\n  }, {});\n};\n\nexport const ScrollInto = ({\n  children,\n  selector,\n  smooth = true,\n  style = {},\n  alignToTop = false,\n  className = \"\",\n  onClick,\n  scrollOptions = {},\n}: ScrollIntoViewProps) => {\n  const scrollIntoView = () => {\n    const behavior = smooth ? \"smooth\" : \"auto\";\n    const options: ScrollIntoViewOptions = {\n      behavior,\n      // provided scrollOptions are valid - we can use them\n      ...validScrollOptions(scrollOptions),\n    };\n\n    // Scroll to top\n    if (alignToTop) {\n      options.block = \"start\";\n      options.inline = \"nearest\";\n    }\n\n    document.querySelector(selector)?.scrollIntoView(options);\n  };\n\n  /**\n   * Click event handler\n   * When provided (optional) `onClick` property which is a function it will call it and wait 16ms (single frame) to use\n   * `scrollIntoView` as e.g. MaterialUI Menu changes `body` element style to `overflow: hidden` blocking\n   * `scrollIntoView`\n   */\n  const handleClick: ClickHandler = (event) => {\n    if (typeof onClick === \"function\") {\n      onClick(event);\n      setTimeout(scrollIntoView, 1e3 / 60);\n      return;\n    }\n    scrollIntoView();\n  };\n\n  return (\n    <div style={style} className={className} onClick={handleClick}>\n      {children}\n    </div>\n  );\n};\n\nexport default ScrollInto;\n"],"mappings":";;;AAeA,MAAM,sBAAsB,kBAAwD;AAClF,KAAI,OAAO,kBAAkB,SAC3B,QAAO,EAAE;AAGX,QAAO,OAAO,QAAQ,cAAc,CAAC,QAA+B,KAAK,CAAC,KAAK,SAAS;AACtF,UAAQ,KAAR;GACE,KAAK;AACH,QAAI,QAAQ,UAAU,QAAQ,SAC5B,KAAI,OAAO;AAEb;GAEF,KAAK;GACL,KAAK;AACH,QAAI,QAAQ,WAAW,QAAQ,YAAY,QAAQ,SAAS,QAAQ,UAClE,KAAI,OAAO;AAEb;GAEF;;AAEF,SAAO;IACN,EAAE,CAAC;;AAGR,MAAa,cAAc,EACzB,UACA,UACA,SAAS,MACT,QAAQ,EAAE,EACV,aAAa,OACb,YAAY,IACZ,SACA,gBAAgB,EAAE,OACO;CACzB,MAAM,uBAAuB;EAE3B,MAAM,UAAiC;GACrC,UAFe,SAAS,WAAW;GAInC,GAAG,mBAAmB,cAAc;GACrC;AAGD,MAAI,YAAY;AACd,WAAQ,QAAQ;AAChB,WAAQ,SAAS;;AAGnB,WAAS,cAAc,SAAS,EAAE,eAAe,QAAQ;;;;;;;;CAS3D,MAAM,eAA6B,UAAU;AAC3C,MAAI,OAAO,YAAY,YAAY;AACjC,WAAQ,MAAM;AACd,cAAW,gBAAgB,MAAM,GAAG;AACpC;;AAEF,kBAAgB;;AAGlB,QACE,oCAAC;EAAW;EAAkB;EAAW,SAAS;IAC/C,SACG"}