@douyinfe/semi-ui 2.1.0-beta.2 → 2.1.0-next.2

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

@@ -0,0 +1,161 @@
+"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

@@ -0,0 +1,87 @@
+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

@@ -0,0 +1,296 @@
+"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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,121 @@
+"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: {}
+};