12066806302

Committed 28 Nov 2024 09:54AM UTC coverage: 51.456%. Remained the same

Build # 12066806302

Build Type

push

github

Committed by

twinh

Commit Message

feat(a-table): `Table` 增加 loading 延迟显示

Run Details

17 of 38 branches covered (44.74%)

Branch coverage included in aggregate %.

1 of 1 new or added line in 1 file covered. (100.0%)

11 existing lines in 1 file now uncovered.

36 of 65 relevant lines covered (55.38%)

5.35 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

63.29

/Table.jsx

import { useEffect, useRef, useState } from 'react';
import { ProTable } from '@ant-design/pro-components';
import appendUrl from 'append-url';
import $ from 'miaoxing';
import curUrl from '@mxjs/cur-url';
import { Typography } from 'antd';
import { useTable } from './TableProvider';
import PropTypes from 'prop-types';
import { Ret } from '@mxjs/a-ret';

const LOADING_DELAY = 300;

const { Text } = Typography;

const getSortPrams = (querySorter) => {
  // 取消排序后，field 是点击的字段，order 是 undefined
  // 因此判断 order 无值则无需排序
  if (!querySorter.order) {
    return {};
  }

  let { field: sort, order } = querySorter;
  order = order === 'ascend' ? 'asc' : 'desc';

  return { sort, order };
};

const columnEmptyText = <Text type="secondary">-</Text>;

const Table = (
  { url, tableApi, tableRef, columns = [], postData, result, ...restProps }
) => {
  const table = useTable();

  let querySorter = {};

  const ref = useRef();
  url || (url = curUrl.apiData());

  // 默认不显示搜索，列设置了搜索才开启搜索
  let search = false;
  columns.map((column) => {
    column.search = column.search || false;
    if (column.search) {
      search = true;
    }

    if (typeof column.dataIndex === 'undefined') {
      column.dataIndex = column.title;
    }
  });

  useEffect(() => {
    if (table) {
      table.reload = ref.current.reload;
    }

    if (tableRef) {
      tableRef.current = table;
    }

    if (tableApi) {
      tableApi.hook(table);
    }
  }, []);

  const [ready, setReady] = useState(false);
  const handleRequest = async ({ current: page, pageSize: limit, ...params }, sort) => {
    table.sort = sort;

    const fullUrl = appendUrl(url, { page, limit, ...getSortPrams(querySorter), ...params, ...table.search });
    const { ret } = await $.get(fullUrl);
    if (ret.isErr()) {
      $.ret(ret);
      return;
    }

    return {
      data: ret.data,
      success: ret.isSuc(),
      total: ret.total,
    };
  };

  let isPending = !ready ||
    result && (Array.isArray(result) ? result : [result]).find(request => request.isLoading || request.error);

  return (
    <>
      {result && <Ret result={result}/>}
      <ProTable
        postData={(data) => {
          setReady(true);
          return postData ? postData(data) : data;
        }}
        style={{ display: isPending ? 'none' : '' }}
        columns={columns}
        columnEmptyText={columnEmptyText}
        actionRef={ref}
        request={handleRequest}
        options={false}
        search={search}
        rowKey="id"
        loading={{
          delay: LOADING_DELAY,
        }}
        onChange={(pagination, filters, sorter) => {
          querySorter = sorter;
          ref.current.reload();
        }}
        cardBordered
        cardProps={{
          style: {
            marginBottom: 24,
          },
          bodyStyle: {
            paddingBlock: 24,
          },
        }}
        {...restProps}
      />
    </>
  );
};

Table.propTypes = {
  url: PropTypes.string,
  tableApi: PropTypes.object,
  tableRef: PropTypes.object,
  columns: PropTypes.array,
  postData: PropTypes.func,
  /**
   * @experimental
   */
  result: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
};

export default Table;

1	import { useEffect, useRef, useState } from 'react';
2	import { ProTable } from '@ant-design/pro-components';
3	import appendUrl from 'append-url';
4	import $ from 'miaoxing';
5	import curUrl from '@mxjs/cur-url';
6	import { Typography } from 'antd';
7	import { useTable } from './TableProvider';
8	import PropTypes from 'prop-types';
9	import { Ret } from '@mxjs/a-ret';
10
11	const LOADING_DELAY = 300;	4✔
12
13	const { Text } = Typography;	4✔
14
15	const getSortPrams = (querySorter) => {	4✔
16	// 取消排序后，field 是点击的字段，order 是 undefined
17	// 因此判断 order 无值则无需排序
18	if (!querySorter.order) {	4!
19	return {};	4✔
20	}
21
UNCOV 22	let { field: sort, order } = querySorter;	×
UNCOV 23	order = order === 'ascend' ? 'asc' : 'desc';	×
24
25	return { sort, order };	×
26	};
27
28	const columnEmptyText = <Text type="secondary">-</Text>;	4✔
29
30	const Table = (	4✔
31	{ url, tableApi, tableRef, columns = [], postData, result, ...restProps }	×
32	) => {
33	const table = useTable();	16✔
34
35	let querySorter = {};	16✔
36
37	const ref = useRef();	16✔
38	url \|\| (url = curUrl.apiData());	16✔
39
40	// 默认不显示搜索，列设置了搜索才开启搜索
41	let search = false;	16✔
42	columns.map((column) => {	16✔
43	column.search = column.search \|\| false;	16✔
44	if (column.search) {	16!
UNCOV 45	search = true;	×
46	}
47
48	if (typeof column.dataIndex === 'undefined') {	16!
UNCOV 49	column.dataIndex = column.title;	×
50	}
51	});
52
53	useEffect(() => {	16✔
54	if (table) {	8!
55	table.reload = ref.current.reload;	8✔
56	}
57
58	if (tableRef) {	8!
UNCOV 59	tableRef.current = table;	×
60	}
61
62	if (tableApi) {	8!
UNCOV 63	tableApi.hook(table);	×
64	}
65	}, []);
66
67	const [ready, setReady] = useState(false);	16✔
68	const handleRequest = async ({ current: page, pageSize: limit, ...params }, sort) => {	16✔
69	table.sort = sort;	4✔
70
71	const fullUrl = appendUrl(url, { page, limit, ...getSortPrams(querySorter), ...params, ...table.search });	4✔
72	const { ret } = await $.get(fullUrl);	4✔
73	if (ret.isErr()) {	4!
UNCOV 74	$.ret(ret);	×
UNCOV 75	return;	×
76	}
77
78	return {	4✔
79	data: ret.data,
80	success: ret.isSuc(),
81	total: ret.total,
82	};
83	};
84
85	let isPending = !ready \|\|	16!
UNCOV 86	result && (Array.isArray(result) ? result : [result]).find(request => request.isLoading \|\| request.error);	×
87
88	return (	16✔
89	<>
90	{result && <Ret result={result}/>}	16!
91	<ProTable
92	postData={(data) => {
93	setReady(true);	8✔
94	return postData ? postData(data) : data;	8!
95	}}
96	style={{ display: isPending ? 'none' : '' }}	16✔
97	columns={columns}
98	columnEmptyText={columnEmptyText}
99	actionRef={ref}
100	request={handleRequest}
101	options={false}
102	search={search}
103	rowKey="id"
104	loading={{
105	delay: LOADING_DELAY,
106	}}
107	onChange={(pagination, filters, sorter) => {
UNCOV 108	querySorter = sorter;	×
UNCOV 109	ref.current.reload();	×
110	}}
111	cardBordered
112	cardProps={{
113	style: {
114	marginBottom: 24,
115	},
116	bodyStyle: {
117	paddingBlock: 24,
118	},
119	}}
120	{...restProps}
121	/>
122	</>
123	);
124	};
125
126	Table.propTypes = {	4✔
127	url: PropTypes.string,
128	tableApi: PropTypes.object,
129	tableRef: PropTypes.object,
130	columns: PropTypes.array,
131	postData: PropTypes.func,
132	/**
133	* @experimental
134	*/
135	result: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
136	};
137
138	export default Table;

miaoxing / mxjs-a-table / 12066806302

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous