@douyinfe/semi-ui 2.1.0-alpha.1 → 2.1.0-beta.3

package/lib/cjs/notification/useNotification/index.js

@@ -1,161 +0,0 @@
-"use strict";
-
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.default = useNotification;
-
-var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
-
-var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
-
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-
-var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/entries"));
-
-var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
-
-var _map2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/map"));
-
-var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _constants = require("@douyinfe/semi-foundation/lib/cjs/notification/constants");
-
-var _HookNotice = _interopRequireDefault(require("./HookNotice"));
-
-require("@douyinfe/semi-foundation/lib/cjs/notification/notification.css");
-
-var _uuid = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/uuid"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-// TODO: Automatic folding + unfolding function when there are more than N
-const defaultConfig = {
-  duration: 3,
-  position: 'topRight',
-  motion: true,
-  content: '',
-  title: '',
-  zIndex: 1010
-};
-
-function usePatchElement() {
-  const [elements, setElements] = (0, _react.useState)([]);
-
-  function patchElement(element, config) {
-    setElements(originElements => [{
-      element,
-      config
-    }, ...originElements]);
-    return id => {
-      setElements(originElements => (0, _filter.default)(originElements).call(originElements, _ref => {
-        let {
-          config: configOfCurrentElement
-        } = _ref;
-        return configOfCurrentElement.id !== id;
-      }));
-    };
-  }
-
-  function renderList() {
-    var _context;
-
-    const noticesInPosition = {
-      top: [],
-      topLeft: [],
-      topRight: [],
-      bottom: [],
-      bottomLeft: [],
-      bottomRight: []
-    };
-    (0, _forEach.default)(elements).call(elements, _ref2 => {
-      let {
-        element,
-        config
-      } = _ref2;
-      const {
-        position
-      } = config;
-      noticesInPosition[position].push(element);
-    });
-    return (0, _map.default)(_context = (0, _entries.default)(noticesInPosition)).call(_context, obj => {
-      const pos = obj[0];
-      const notices = obj[1]; // @ts-ignore
-
-      return (0, _isArray.default)(notices) && notices.length ? /*#__PURE__*/_react.default.createElement("div", {
-        key: pos,
-        className: (0, _classnames.default)(_constants.cssClasses.LIST),
-        placement: pos
-      }, notices) : null;
-    });
-  }
-
-  return [renderList(), patchElement];
-}
-
-function useNotification() {
-  const [elements, patchElement] = usePatchElement();
-  const noticeRef = new _map2.default();
-  const id = (0, _uuid.default)('semi_notice_');
-
-  const addNotice = config => {
-    const mergeConfig = (0, _assign.default)((0, _assign.default)({}, config), {
-      id
-    }); // eslint-disable-next-line prefer-const
-
-    let closeFunc;
-
-    const ref = ele => {
-      noticeRef.set(id, ele);
-    };
-
-    const notice = /*#__PURE__*/_react.default.createElement(_HookNotice.default, (0, _assign.default)({
-      key: id
-    }, mergeConfig, {
-      afterClose: instanceID => closeFunc(instanceID),
-      ref: ref
-    }));
-
-    closeFunc = patchElement(notice, (0, _assign.default)({}, mergeConfig));
-    return id;
-  };
-
-  const removeElement = instanceID => {
-    const ele = noticeRef.get(instanceID);
-    ele && ele.close();
-  };
-
-  return [{
-    success: config => addNotice((0, _assign.default)((0, _assign.default)((0, _assign.default)({}, defaultConfig), config), {
-      type: 'success'
-    })),
-    info: config => addNotice((0, _assign.default)((0, _assign.default)((0, _assign.default)({}, defaultConfig), config), {
-      type: 'info'
-    })),
-    error: config => addNotice((0, _assign.default)((0, _assign.default)((0, _assign.default)({}, defaultConfig), config), {
-      type: 'error'
-    })),
-    warning: config => addNotice((0, _assign.default)((0, _assign.default)((0, _assign.default)({}, defaultConfig), config), {
-      type: 'warning'
-    })),
-    open: config => addNotice((0, _assign.default)((0, _assign.default)((0, _assign.default)({}, defaultConfig), config), {
-      type: 'default'
-    })),
-    close: removeElement
-  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, elements)];
-}

package/lib/cjs/overflowList/index.d.ts

@@ -1,87 +0,0 @@
-import React, { CSSProperties, ReactNode, MutableRefObject, RefCallback, Key, ReactElement } from 'react';
-import BaseComponent from '../_base/baseComponent';
-import PropTypes from 'prop-types';
-import { ResizeEntry } from '../resizeObserver';
-import { OverflowListAdapter } from '@douyinfe/semi-foundation/lib/cjs/overflowList/foundation';
-import '@douyinfe/semi-foundation/lib/cjs/overflowList/overflowList.css';
-declare const OverflowDirection: {
-    NONE: number;
-    GROW: number;
-    SHRINK: number;
-};
-export { ReactIntersectionObserverProps } from './intersectionObserver';
-export declare type OverflowItem = Record<string, any>;
-export interface OverflowListProps {
-    className?: string;
-    collapseFrom?: 'start' | 'end';
-    items?: Array<OverflowItem>;
-    minVisibleItems?: number;
-    onIntersect?: (res: {
-        [key: string]: IntersectionObserverEntry;
-    }) => void;
-    onOverflow?: (overflowItems: Array<OverflowItem>) => void;
-    overflowRenderer?: (overflowItems: Array<OverflowItem>) => ReactNode | ReactNode[];
-    renderMode?: 'collapse' | 'scroll';
-    style?: CSSProperties;
-    threshold?: number;
-    visibleItemRenderer?: (item: OverflowItem, index: number) => ReactElement;
-    wrapperClassName?: string;
-    wrapperStyle?: CSSProperties;
-}
-export interface OverflowListState {
-    direction?: typeof OverflowDirection.GROW;
-    lastOverflowCount?: number;
-    overflow?: Array<OverflowItem>;
-    visible?: Array<OverflowItem>;
-    visibleState?: Map<string, boolean>;
-    prevProps?: OverflowListProps;
-}
-declare class OverflowList extends BaseComponent<OverflowListProps, OverflowListState> {
-    static defaultProps: {
-        collapseFrom: string;
-        minVisibleItems: number;
-        overflowRenderer: () => ReactElement;
-        renderMode: string;
-        threshold: number;
-        visibleItemRenderer: () => ReactElement;
-    };
-    static propTypes: {
-        className: PropTypes.Requireable<string>;
-        collapseFrom: PropTypes.Requireable<string>;
-        direction: PropTypes.Requireable<string>;
-        items: PropTypes.Requireable<any[]>;
-        minVisibleItems: PropTypes.Requireable<number>;
-        onIntersect: PropTypes.Requireable<(...args: any[]) => any>;
-        onOverflow: PropTypes.Requireable<(...args: any[]) => any>;
-        overflowRenderer: PropTypes.Requireable<(...args: any[]) => any>;
-        renderMode: PropTypes.Requireable<string>;
-        style: PropTypes.Requireable<object>;
-        threshold: PropTypes.Requireable<number>;
-        visibleItemRenderer: PropTypes.Requireable<(...args: any[]) => any>;
-        wrapperClassName: PropTypes.Requireable<string>;
-        wrapperStyle: PropTypes.Requireable<object>;
-    };
-    constructor(props: OverflowListProps);
-    static getDerivedStateFromProps(props: OverflowListProps, prevState: OverflowListState): OverflowListState;
-    get adapter(): OverflowListAdapter;
-    itemRefs: Record<string, any>;
-    scroller: HTMLDivElement;
-    spacer: HTMLDivElement;
-    previousWidths: Map<Element, number>;
-    itemSizeMap: Map<string, any>;
-    isScrollMode: () => boolean;
-    componentDidMount(): void;
-    shouldComponentUpdate(_nextProps: OverflowListProps, nextState: OverflowListState): boolean;
-    componentDidUpdate(prevProps: OverflowListProps, prevState: OverflowListState): void;
-    resize: (entries?: Array<ResizeEntry>) => void;
-    repartition: (growing: boolean) => void;
-    reintersect: (entries: Array<IntersectionObserverEntry>) => void;
-    mergeRef: (ref: RefCallback<any> | MutableRefObject<any> | null, node: Element, key: Key) => void;
-    renderOverflow: () => ReactNode | ReactNode[];
-    renderItemList: () => React.DetailedReactHTMLElement<{
-        className: string;
-        style: React.CSSProperties;
-    }, HTMLElement>;
-    render(): ReactNode;
-}
-export default OverflowList;

package/lib/cjs/overflowList/index.js

@@ -1,296 +0,0 @@
-"use strict";
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.default = void 0;
-
-var _some = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/some"));
-
-var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
-
-var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
-
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-
-var _map2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/map"));
-
-var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
-
-var _isNull2 = _interopRequireDefault(require("lodash/isNull"));
-
-var _omit2 = _interopRequireDefault(require("lodash/omit"));
-
-var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _constants = require("@douyinfe/semi-foundation/lib/cjs/overflowList/constants");
-
-var _resizeObserver = _interopRequireDefault(require("../resizeObserver"));
-
-var _intersectionObserver = _interopRequireDefault(require("./intersectionObserver"));
-
-var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/overflowList/foundation"));
-
-require("@douyinfe/semi-foundation/lib/cjs/overflowList/overflowList.css");
-
-/* eslint-disable arrow-body-style */
-const prefixCls = _constants.cssClasses.PREFIX;
-const Boundary = _constants.strings.BOUNDARY_MAP;
-const OverflowDirection = _constants.strings.OVERFLOW_DIR;
-const RenderMode = _constants.strings.MODE_MAP; // reference to https://github.com/palantir/blueprint/blob/1aa71605/packages/core/src/components/overflow-list/overflowList.tsx#L34
-
-class OverflowList extends _baseComponent.default {
-  constructor(props) {
-    var _this;
-
-    super(props);
-    _this = this;
-    this.scroller = null;
-    this.spacer = null;
-
-    this.isScrollMode = () => {
-      const {
-        renderMode
-      } = this.props;
-      return renderMode === RenderMode.SCROLL;
-    };
-
-    this.resize = function () {
-      let entries = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-      // if any parent is growing, assume we have more room than before
-      const growing = (0, _some.default)(entries).call(entries, entry => {
-        const previousWidth = _this.previousWidths.get(entry.target) || 0;
-        return entry.contentRect.width > previousWidth;
-      });
-
-      _this.repartition(growing);
-
-      (0, _forEach.default)(entries).call(entries, entry => _this.previousWidths.set(entry.target, entry.contentRect.width));
-    };
-
-    this.repartition = growing => {
-      // if not mounted or scroll mode, we do not
-      if ((0, _isNull2.default)(this.spacer) || (0, _isUndefined2.default)(this.spacer) || this.isScrollMode()) {
-        return;
-      } // spacer has flex-shrink and width 1px so if it's much smaller then we know to shrink
-
-
-      const state = growing ? OverflowDirection.GROW : this.spacer.getBoundingClientRect().width < 0.9 ? OverflowDirection.SHRINK : OverflowDirection.NONE;
-      this.foundation.handlePartition(state);
-    };
-
-    this.reintersect = entries => {
-      this.foundation.handleIntersect(entries);
-    };
-
-    this.mergeRef = (ref, node, key) => {
-      this.itemRefs[key] = node;
-
-      if (typeof ref === 'function') {
-        ref(node);
-      } else if (typeof ref === 'object' && ref && 'current' in ref) {
-        ref.current = node;
-      }
-    };
-
-    this.renderOverflow = () => {
-      const overflow = this.foundation.getOverflowItem();
-      return this.props.overflowRenderer(overflow);
-    };
-
-    this.renderItemList = () => {
-      var _context;
-
-      const {
-        className,
-        wrapperClassName,
-        wrapperStyle,
-        style,
-        visibleItemRenderer,
-        renderMode,
-        collapseFrom
-      } = this.props;
-      const {
-        visible
-      } = this.state;
-      const overflow = this.renderOverflow();
-      const inner = renderMode === RenderMode.SCROLL ? [overflow[0], /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(wrapperClassName, "".concat(prefixCls, "-scroll-wrapper")),
-        ref: ref => {
-          this.scroller = ref;
-        },
-        style: (0, _assign.default)({}, wrapperStyle),
-        key: "".concat(prefixCls, "-scroll-wrapper")
-      }, (0, _map.default)(_context = (0, _map.default)(visible).call(visible, visibleItemRenderer)).call(_context, (item, ind) => {
-        const {
-          forwardRef,
-          key
-        } = item;
-        return /*#__PURE__*/_react.default.cloneElement(item, {
-          ref: node => this.mergeRef(forwardRef, node, key),
-          'data-scrollkey': "".concat(key),
-          key
-        });
-      })), overflow[1]] : [collapseFrom === Boundary.START ? overflow : null, (0, _map.default)(visible).call(visible, visibleItemRenderer), collapseFrom === Boundary.END ? overflow : null, /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(prefixCls, "-spacer"),
-        ref: ref => this.spacer = ref,
-        key: "".concat(prefixCls, "-spacer")
-      })];
-
-      const list = /*#__PURE__*/_react.default.createElement('div', {
-        className: (0, _classnames.default)("".concat(prefixCls), className),
-        style
-      }, ...inner);
-
-      return list;
-    };
-
-    this.state = {
-      direction: OverflowDirection.GROW,
-      lastOverflowCount: 0,
-      overflow: [],
-      visible: props.items,
-      visibleState: new _map2.default()
-    };
-    this.foundation = new _foundation.default(this.adapter);
-    this.previousWidths = new _map2.default();
-    this.itemRefs = {};
-    this.itemSizeMap = new _map2.default();
-  }
-
-  static getDerivedStateFromProps(props, prevState) {
-    const {
-      prevProps
-    } = prevState;
-    const newState = {};
-    newState.prevProps = props;
-
-    const needUpdate = name => {
-      return !prevProps && name in props || prevProps && !(0, _isEqual2.default)(prevProps[name], props[name]);
-    };
-
-    if (needUpdate('items') || needUpdate('style')) {
-      // reset visible state if the above props change.
-      newState.direction = OverflowDirection.GROW;
-      newState.lastOverflowCount = 0;
-      newState.overflow = [];
-      newState.visible = props.items;
-    }
-
-    return newState;
-  }
-
-  get adapter() {
-    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
-      updateVisibleState: visibleState => {
-        this.setState({
-          visibleState
-        });
-      },
-      updateStates: states => {
-        this.setState((0, _assign.default)({}, states));
-      },
-      notifyIntersect: res => {
-        this.props.onIntersect && this.props.onIntersect(res);
-      }
-    });
-  }
-
-  componentDidMount() {
-    this.repartition(false);
-  }
-
-  shouldComponentUpdate(_nextProps, nextState) {
-    // We want this component to always re-render, even when props haven't changed, so that
-    // changes in the renderers' behavior can be reflected.
-    // The following statement prevents re-rendering only in the case where the state changes
-    // identity (i.e. setState was called), but the state is still the same when
-    // shallow-compared to the previous state.
-    const currState = (0, _omit2.default)(this.state, 'prevProps');
-    const comingState = (0, _omit2.default)(nextState, 'prevProps');
-    return !(currState !== comingState && (0, _isEqual2.default)(currState, comingState));
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    if (!(0, _isEqual2.default)(prevProps.items, this.props.items)) {
-      this.itemRefs = {};
-    }
-
-    if (!(0, _isEqual2.default)((0, _omit2.default)(prevState, 'prevProps'), (0, _omit2.default)(this.state, 'prevProps'))) {
-      this.repartition(false);
-    }
-
-    const {
-      direction,
-      overflow,
-      lastOverflowCount
-    } = this.state;
-
-    if ( // if a resize operation has just completed (transition to NONE)
-    direction === OverflowDirection.NONE && direction !== prevState.direction && overflow.length !== lastOverflowCount) {
-      this.props.onOverflow && this.props.onOverflow(overflow);
-    }
-  }
-
-  render() {
-    const list = this.renderItemList();
-    const {
-      renderMode
-    } = this.props;
-
-    if (renderMode === RenderMode.SCROLL) {
-      return /*#__PURE__*/_react.default.createElement(_intersectionObserver.default, {
-        onIntersect: this.reintersect,
-        root: this.scroller,
-        threshold: this.props.threshold,
-        items: this.itemRefs
-      }, list);
-    }
-
-    return /*#__PURE__*/_react.default.createElement(_resizeObserver.default, {
-      onResize: this.resize
-    }, list);
-  }
-
-}
-
-OverflowList.defaultProps = {
-  collapseFrom: 'end',
-  minVisibleItems: 0,
-  overflowRenderer: () => null,
-  renderMode: 'collapse',
-  threshold: 0.75,
-  visibleItemRenderer: () => null
-};
-OverflowList.propTypes = {
-  // if render in scroll mode, key is required in items
-  className: _propTypes.default.string,
-  collapseFrom: _propTypes.default.oneOf(_constants.strings.BOUNDARY_SET),
-  direction: _propTypes.default.oneOf(_constants.strings.POSITION_SET),
-  items: _propTypes.default.array,
-  minVisibleItems: _propTypes.default.number,
-  onIntersect: _propTypes.default.func,
-  onOverflow: _propTypes.default.func,
-  overflowRenderer: _propTypes.default.func,
-  renderMode: _propTypes.default.oneOf(_constants.strings.MODE_SET),
-  style: _propTypes.default.object,
-  threshold: _propTypes.default.number,
-  visibleItemRenderer: _propTypes.default.func,
-  wrapperClassName: _propTypes.default.string,
-  wrapperStyle: _propTypes.default.object
-};
-var _default = OverflowList;
-exports.default = _default;

package/lib/cjs/overflowList/intersectionObserver.d.ts

@@ -1,34 +0,0 @@
-import React, { ReactNode } from 'react';
-import PropTypes from 'prop-types';
-export interface ReactIntersectionObserverProps {
-    onIntersect?: IntersectionObserverCallback;
-    option?: IntersectionObserverInit;
-    root?: IntersectionObserverInit['root'];
-    threshold?: IntersectionObserverInit['threshold'];
-    rootMargin?: IntersectionObserverInit['rootMargin'];
-    items?: Record<string, Element>;
-}
-export default class ReactIntersectionObserver extends React.PureComponent<ReactIntersectionObserverProps> {
-    static propTypes: {
-        onIntersect: PropTypes.Requireable<(...args: any[]) => any>;
-        option: PropTypes.Requireable<object>;
-        root: PropTypes.Requireable<any>;
-        threshold: PropTypes.Requireable<number>;
-        rootMargin: PropTypes.Requireable<string>;
-        items: PropTypes.Requireable<object>;
-    };
-    static defaultProps: {
-        onIntersect: () => void;
-        threshold: number;
-        rootMargin: string;
-        option: {};
-        items: {};
-    };
-    observer: IntersectionObserver;
-    cachedKeys: Array<string>;
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    componentWillUnmount(): void;
-    observeElement(force?: boolean): void;
-    render(): ReactNode;
-}

package/lib/cjs/overflowList/intersectionObserver.js

@@ -1,121 +0,0 @@
-"use strict";
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.default = void 0;
-
-var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
-
-var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
-
-var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
-
-var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));
-
-var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-class ReactIntersectionObserver extends _react.default.PureComponent {
-  componentDidMount() {
-    const {
-      items
-    } = this.props;
-    this.cachedKeys = (0, _keys.default)(items);
-    const {
-      root,
-      threshold,
-      rootMargin,
-      option,
-      onIntersect
-    } = this.props;
-    this.observer = new IntersectionObserver(onIntersect, (0, _assign.default)({
-      root,
-      threshold,
-      rootMargin
-    }, option));
-    this.observeElement();
-  }
-
-  componentDidUpdate() {
-    const {
-      items
-    } = this.props;
-    const itemKeys = (0, _keys.default)(items);
-
-    if (!(0, _isEqual2.default)(this.cachedKeys, itemKeys)) {
-      this.observeElement(true);
-      this.cachedKeys = itemKeys;
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.observer) {
-      this.observer.disconnect();
-      this.observer = null;
-    }
-  }
-
-  observeElement() {
-    var _context;
-
-    let force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    const {
-      items
-    } = this.props;
-
-    if ((0, _isEmpty2.default)(items)) {
-      // stop everything if not defined
-      this.observer.disconnect();
-      return;
-    }
-
-    if (force) {
-      this.observer.disconnect();
-    } // observer callback is invoked immediately when observing new elements
-
-
-    (0, _forEach.default)(_context = (0, _keys.default)(items)).call(_context, key => {
-      const node = items[key];
-
-      if (!node) {
-        return;
-      }
-
-      this.observer.observe(node);
-    });
-  }
-
-  render() {
-    const {
-      children
-    } = this.props;
-    return children;
-  }
-
-}
-
-exports.default = ReactIntersectionObserver;
-ReactIntersectionObserver.propTypes = {
-  onIntersect: _propTypes.default.func,
-  option: _propTypes.default.object,
-  root: _propTypes.default.any,
-  threshold: _propTypes.default.number,
-  rootMargin: _propTypes.default.string,
-  items: _propTypes.default.object
-};
-ReactIntersectionObserver.defaultProps = {
-  onIntersect: () => undefined,
-  threshold: 0.75,
-  rootMargin: '0px',
-  option: {},
-  items: {}
-};