@pluve/react-basic

基于 antd-mobile 封装的 C 端 react 通用组件

Usage

# npm
npm i @pluve/react-basic

# yarn
yarn add @pluve/react-basic

PageScaffold

主要用于页面状态管理。支持页面加载状态、页面加载成功、页面加载失败、页面加载数据为空。可通过内置usePageStatus hooks 对页面状态进行管理。

export enum PageStatus {
  /** 加载中 */
  loading = 'loading',
  /** 加载成功 */
  success = 'success',
  /** 加载失败 */
  error = 'error',
  /** 空页面 */
  empty = 'empty',
}

页面加载成功示例

<PageScaffold
  pageStatus="success"
  content={() => (
    <Progress
      type="circle"
      percent={100}
      foregroundColor="#52c41a"
      title="质量"
      description="冒烟通过率"
      showCenterPercent
      size={100}
      strokeWidth={6}
      centerLabel={() => (
        <div
          style={{
            fontSize: '24px',
            fontWeight: 'bold',
            color: '#52c41a',
          }}
        >
          Done
        </div>
      )}
    />
  )}
/>

页面加载失败示例

<PageScaffold pageStatus="error" tipImg="errorImageUrl" tip="加载错误示例" />

TODO

1. 支持自定页面 loading 动画，如骨架图

SmartListView

智能列表，支持下拉刷新、上拉加载更多、支持配置化展示顶部搜索栏。

使用示例

import FetchAgent from '@pluve/fetch';
import { useCallback, useRef } from 'react';
import { default as SmartListView } from '../index';
import styles from './index.module.scss';

interface IArticleDataItem {
  articleType: string;
  author: string;
  commentTimes: number;
  content: string;
  contentType: string;
  copyright: boolean;
  fileUrl: string;
  id: string;
  imageUrl: string;
  keyword: string;
}

const whiteListArticle = `whiteListArticle`;

const emptyImageData =
  'data:image/png;base64,xxx';

const errorImageData =
  'data:image/png;base64,xxx';

const renderItem = (rowData: IArticleDataItem, index: number) => (
  <div>
    {index}: {JSON.stringify(rowData)}
  </div>
);

const ArticlePage = () => {
  const dataSourceService = useCallback(
    async (pageNo: number, pageSize: number) => {
      const dataResp = await FetchAgent.sendPost<any>({
        url: whiteListArticle,
        body: {
          article: { drugId: null, articleType: null, keyword: null },
          pageNo,
          pageSize,
        },
      });
      return dataResp.data ?? [];
    },
    [],
  );
  const smartListViewProps = useRef({
    pageNo: 1,
    pageSize: 10,
    showLoading: true,
    dataSourceName: '文章',
    dataSourceService,
    emptyImageUrl: emptyImageData,
    errorImageUrl: errorImageData,
    onRowRender: renderItem,
    showSearchHeader: true,
    maxLength: 12,
    defaultSearchKey: '免疫力',
    placeholder: '请输入搜索关键字',
  });
  return (
    <div className={styles.pageRoot}>
      <SmartListView<IArticleDataItem> {...smartListViewProps.current} />
    </div>
  );
};

export { ArticlePage };