Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
@skava/packages / ui / Image / ImageResizeObserver.js
Size: Mime:
// @note - fun to play with - could use in plp
// const HAS_RESIZE_OBSERVER = typeof ResizeObserver !== 'undefined'
// // import ResizeObserver from '@skava/react-dom-observable/dist/polyfill/ResizeObserver'
// export default class ImageResizeObserver extends React.PureComponent {
//   get target() {
//     return this.wrapperRef.current
//   }
//   wrapperRef = React.createRef<any>()
//   observer: IntersectionObserver
//   state = {
//     isIntersecting: false,
//     height: 0,
//     width: 0,
//   }
//   private resizeObserver: ResizeObserver =
//     HAS_RESIZE_OBSERVER &&
//     new ResizeObserver(() => {
//       this.measure()
//     })
//   observe() {
//     if (HAS_RESIZE_OBSERVER) {
//       this.resizeObserver.observations_ = new Map()
//       this.resizeObserver.observe(this.target)
//     }
//   }
//   unobserve() {
//     if (HAS_RESIZE_OBSERVER) {
//       this.resizeObserver.disconnect()
//     }
//   }
//   measure = (entries?: Array<{ [key: string]: unknown; contentRect: unknown }>) => {
//     console.log('___measure___')
//     const contentRect = fromTargetToContentRect(this.target)
//     this.setState(contentRect.bounds)
//   }
//   render() {
//     const url = `https://raderain.sirv.com/rue21/Barbie/Barbie_HP_Banner_01.jpg?format=webp&w=${
//       this.state.width
//     }`
//     return (
//       <Wrap ref={this.wrapperRef} isIntersecting={this.state.isIntersecting}>
//         {this.state.isIntersecting === true && <img src={url} />}
//       </Wrap>
//     )
//   }
// }
//# sourceMappingURL=ImageResizeObserver.js.map