fk-react-ui-components/lib/InfiniteScroll/index.js

Step 1 : Create a file in [ Seeds / Plants / Trees ] <br> Step 2 : It should export an Object with component name and story Component [Refer other components] <br> Step 3 : Story Component should return a react component <br> Step 3 : Created file should

import styled from "styled-components";
import React from "react";
import _ from 'lodash';
const ScrollBox = styled.div`
    height: ${props => props.height || "520px"};
    overflow: auto;
    &::-webkit-scrollbar {
        display: none;
    }
`;

var listenScrollEvent = _.throttle(function (event) {
    var target = event && event.currentTarget;
    var props = this,
        delta;
    const scrollTop = target && target.scrollTop + target.clientHeight,
          containerHeight = target && target.scrollHeight,
          scrollPercentage = scrollTop > 0 && containerHeight > 0 && scrollTop / containerHeight;
    if (event.wheelDelta) {
        delta = event.wheelDelta;
    } else {
        delta = -1 * event.deltaY;
    }
    if (scrollPercentage > 0.8 && delta < 0) {
        props.onScrollCallback();
    }
}, 200);

export default class Paginator extends React.Component {
    render() {
        return React.createElement(
            ScrollBox,
            { height: this.props.height, onWheel: listenScrollEvent.bind(this.props) },
            this.props.children
        );
    }
}
//# sourceMappingURL=index.js.map