FetchList

Компонент используется как список с догружаемыми элементами.

Dependencies

  "peerDependencies": {
    "prop-types": "^15.7.2",
    "react": "^16.8.2",
    "react-dom": "^16.8.2"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.0.4",
    "webpack": "^4.29.5",
    "webpack-cli": "^3.2.3"
  },
  "dependencies": {
    "react-visibility-sensor": "^5.1.0"
  }

Usage

import FetchList from '@evo/fetch-list';

const Example = () => (
    const [fetchLoading, setFetchLoading] = useState(false);
    
    const handleLoadMore = () => {
        ...
    }

    <div className={css.root}>
        <FetchList
            isLoading={fetchLoading}
            onFetch={handleLoadMore}
        >
            {list.map((item, index) => (
                <li
                    key={item}
                    className={css.item}
                >
                    {item}
                </li>
            ));
        </FetchList>
);

API

FetchList.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    offset: PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.shape({
            top: PropTypes.number,
            right: PropTypes.number,
            bottom: PropTypes.number,
            left: PropTypes.number
        })
    ]),
    loadingComponent: PropTypes.func,
    moreComponent: PropTypes.func,
    lazyLoadEnable: PropTypes.bool,
    showMoreEnable: PropTypes.bool,
    isLoading: PropTypes.bool,
    onFetch: PropTypes.func,
};

Default значения

FetchList.defaultProps = {
    offset: {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0
    },
    lazyLoadEnable: true,
    showMoreEnable: true,
};

children

Можно передавать непосредственно .map элементов, либо компонент в котором будет происходить .map Главное учитывать, что все элементы попадут в тег , потому должны быть в теге

    <FetchList>
        {list.map((item, index) => (
            <li key={item}>{item}</li>
        ));
    </FetchList>
);

    <FetchList>
        <List items={items} />
    </FetchList>
);

className (string)

Передает класс для списка .

showMoreEnable (bool)

Если больше нет возможности догружать элементы в список стоит указать значение showMoreEnable: false При этом не будет срабатывать дозагрузка при скроле и будет скрыт элемент moreComponent

lazyLoadEnable (bool)

Если нужно отключить дозагрузку э лементов при скроле, а оставить только нажатие на кнопку стоит указать значение lazyLoadEnable: false

offset

По умолчанию значение 0. Это означает что событие onFetch произойдет в момент, когда элемент moreComponent пересечет любым своим краем границы viewport. Можно указать значение с типом number - offset={-100}, в таком случае для всех сторон будет увеличена зона viewport на 100 пикселей, тоесть событие произойдет раньше появления элемента во viwport, в тот момент когда к нему останется < 100 пикселей. Также можно значением offset указывать объект с нужными нам ключами top, right, bottom, left. Например offset={{ bottom: -200 }}. В таком случае, при скроле страницы вниз событие onFetch произойдет на "200 пикселей" раньше, чем moreComponent станет видимым.

onFetch (func)

Событие, которое произойдет при появлении во viewport с учетом указанных значений offset

isLoading (bool)

После вызова события onFetch, которое инициализирует дозагрузку, нужно менять состояние isLoading на true. И возвращать isLoading={false} после окончания дозагрузки. При положительном значении повторно не будет срабатывать событие при появлении moreComponent во viewport и при указанном loadingComponent он будет отображен.

moreComponent (func)

Функция рендера контента под списком который может содержать в себе кнопку для загрузки при нажатии. При указанном moreComponent и активном lazyLoadEnable дозагрузка бует происходить при попадании именно этого контента во viewport. Если moreComponent не указан, дозагрузку будет происходить при попадании во viewport нижней границы списка

    <FetchList
        isLoading={loading}
        moreComponent={() => (
            <div style={{ textAlign: 'center' }}>
                <span onClick={!loading ? () => handleLoadMore : null}>
                    {loading ? 'загрузка' : 'показать еще'}
                </span>
            </div>
        )}
        onFetch={handleLoadMore}
    >
        ...
    </FetchList>
);

loadingComponent (func)

Функция рендера контента во время ожидания дозагрузки. Можно использовать свой sceleton или spinner

    <FetchList
        loadingComponent={() => <Spinner />}
    >
        ...
    </FetchList>
);