frontend-utils-core v1.1.0

frontend-utils-core

前端通用工具库

Usage

TODO

Options

TODO

Development

# install dependencies
$ pnpm install

# develop library by docs demo
$ pnpm start

# build library source code
$ pnpm run build

# build library source code in watch mode
$ pnpm run build:watch

# build docs
$ pnpm run docs:build

# check your project for potential problems
$ pnpm run doctor

LICENSE

MIT

import React, { memo } from 'react';
import './index.css';

interface ListResponse<T> {
  total: number;
  per_page: number;
  current_page: number;
  last_page: number;
  data: T[];
}

type ScrollListProps = {
  list?: ListResponse<any> | null;
  children?: (item: any, index: number) => JSX.Element | null;
  method: (page: number, limit: number, other?: number) => void;
  itemKey: string;
  other?: number;
  textColor?: string;
  i18NoMore: string;
  i18LoadMore: string;
};
const ScrollList: React.FC<ScrollListProps> = ({
  list,
  other,
  children,
  method,
  itemKey,
  textColor,
  i18NoMore,
  i18LoadMore,
}) => {
  console.log('ScrollList', list);
  if (list === null) {
    return (
      <div style={{ color: textColor }} className={'no-more'}>
        {i18NoMore}
      </div>
    );
  }
  if (list !== null && list!.data.length === 0) {
    return (
      <div style={{ color: textColor }} className={'no-more'}>
        {i18NoMore}
      </div>
    );
  }
  return (
    <div>
      {list?.data.length !== 0 ? (
        <>
          <div>
            {list?.data?.map((item: any, index: any) => {
              return (
                <div key={item[itemKey as string] || index}>
                  <React.Fragment key={item[itemKey as string] || index}>
                    {children && children(item, index)}
                  </React.Fragment>
                </div>
              );
            })}
          </div>
          {Number(list?.current_page) === Number(list?.last_page) ? (
            <div className={'no-more'} style={{ color: textColor }}>
              {i18NoMore}
            </div>
          ) : (
            <div
              style={{ color: textColor }}
              className={'load-more'}
              onClick={() => method(1, (list!.per_page += 10), other)}
            >
              {i18LoadMore}
            </div>
          )}
        </>
      ) : (
        <div style={{ color: textColor }} className={'no-more'}>
          {i18NoMore}
        </div>
      )}
    </div>
  );
};

export default memo(ScrollList);