import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
import { useContext, useRef } from 'react';
import cls from 'clsx';
import ConfigProviderContext from '../config-provider/ConfigProviderContext';
import { useInViewport } from '../hooks';
import Skeleton from '../skeleton';

const Lazyload = props => {
  const {
    prefixCls,
    createNamespace
  } = useContext(ConfigProviderContext);
  const [bem] = createNamespace('lazyload', prefixCls);
  const ref = useRef();
  const inViewPort = useInViewport(ref);
  const {
    height,
    placeholder,
    children,
    className,
    style
  } = props;
  return inViewPort ? _jsx(_Fragment, {
    children: children
  }) : _jsx("div", Object.assign({
    ref: ref,
    className: cls(bem(), className),
    style: Object.assign({
      height
    }, style)
  }, {
    children: placeholder
  }));
};

Lazyload.defaultProps = {
  placeholder: _jsx(Skeleton, {
    title: true
  })
};
export default Lazyload;