Oak-Team
/
oak-frontend-base
13
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases 37 Wiki Activity

listPro支持locale，渲染空数据时支持自定义组件传入

This commit is contained in:
wkj 2024-03-31 00:49:57 +08:00
parent ca458f6930
commit 7942b6a0b9
9 changed files with 111 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
es/components/list/index.d.ts vendored
View File

@ -20,5 +20,6 @@ declare const _default: <ED2 extends ED, T2 extends keyof ED2>(props: ReactCompo
hideHeader: boolean;
size?: "small" | "large" | "middle" | undefined;
scroll?: TableProps<RowWithActions<ED, keyof ED>[]>['scroll'];
locale?: TableProps<RowWithActions<ED, keyof ED>[]>['locale'];
}>) => React.ReactElement;
export default _default;

22
es/components/list/index.js
View File

@ -5,16 +5,17 @@ export default OakComponent({
properties: {
entity: '',
extraActions: [],
onAction: (() => { }),
onAction: () => {},
disabledOp: false,
attributes: [],
data: [],
loading: false,
tablePagination: {},
rowSelection: {},
tablePagination: undefined,
rowSelection: undefined,
hideHeader: false,
size: 'large',
scroll: {},
scroll: undefined,
locale: undefined,
},
formData({ props }) {
const { converter } = this.state;
@ -46,8 +47,17 @@ export default OakComponent({
assert(!!entity, 'list属性entity不能为空');
// assert(attributes?.length, 'attributes不能为空');
const ttt = this.t.bind(this);
const converter = analyzeAttrMobileForCard(schema, entity, ttt, attributes);
const judgeAttributes = translateAttributes(schema, entity, attributes);
const converter = analyzeAttrMobileForCard(
schema,
entity,
ttt,
attributes
);
const judgeAttributes = translateAttributes(
schema,
entity,
attributes
);
this.setState({
converter,
schema,

1
es/components/list/web.pc.d.ts vendored
View File

@ -22,4 +22,5 @@ export default function Render(props: WebComponentProps<ED, keyof ED, false, {
judgeAttributes: OakAbsAttrJudgeDef[];
size?: 'large' | 'middle' | 'small';
scroll?: TableProps<any[]>['scroll'];
locale?: TableProps<any[]>['locale'];
}, {}>): React.JSX.Element;

4
es/components/list/web.pc.js
View File

@ -9,7 +9,7 @@ import { TableContext } from '../listPro';
export default function Render(props) {
const { methods, data: oakData } = props;
const { t } = methods;
const { loading, entity, schema, extraActions, data, colorDict, disabledOp = false, tablePagination, onAction, rowSelection, attributes, i18n, hideHeader, judgeAttributes, size = 'large', scroll, } = oakData;
const { loading, entity, schema, extraActions, data, colorDict, disabledOp = false, tablePagination, onAction, rowSelection, attributes, i18n, hideHeader, judgeAttributes, size = 'large', scroll, locale } = oakData;
const [tableColumns, setTableColumns] = useState([]);
const { tableAttributes, setSchema } = useContext(TableContext);
// 为了i18更新时能够重新渲染
@ -112,7 +112,7 @@ export default function Render(props) {
rowSelection?.onChange &&
rowSelection?.onChange(selectedRowKeys, row, info);
},
}} size={size} loading={loading} dataSource={data} columns={tableColumns} pagination={tablePagination} scroll={Object.assign({}, showScroll && {
}} size={size} loading={loading} dataSource={data} columns={tableColumns} pagination={tablePagination} locale={locale} scroll={Object.assign({}, showScroll && {
scrollToFirstRowOnChange: true,
x: 1200,
}, scroll)} onRow={(record) => {

1
es/components/listPro/index.d.ts vendored
View File

@ -27,6 +27,7 @@ type Props<ED2 extends ED, T extends keyof ED2> = {
disableSerialNumber?: boolean;
size?: 'large' | 'middle' | 'small';
scroll?: TableProps<RowWithActions<ED2, T>[]>['scroll'];
locale?: TableProps<RowWithActions<ED2, T>[]>['locale']
};
export type TableAttributeType = {
attribute: OakAbsAttrJudgeDef;

92
es/components/listPro/index.js
View File

@ -15,7 +15,7 @@ export const TableContext = createContext({
onReset: undefined,
});
const ProList = (props) => {
const { buttonGroup, entity, extraActions, onAction, disabledOp, attributes, data, loading, tablePagination, rowSelection, onReload, disableSerialNumber, title, hideDefaultButtons = false, extraContent, size = 'large', scroll, } = props;
const { buttonGroup, entity, extraActions, onAction, disabledOp, attributes, data, loading, tablePagination, rowSelection, onReload, disableSerialNumber, title, hideDefaultButtons = false, extraContent, size = 'large', scroll, locale } = props;
const features = useFeatures();
const [tableAttributes, setTableAttributes] = useState([]);
const [schema, setSchema] = useState(undefined);
@ -53,39 +53,65 @@ const ProList = (props) => {
useEffect(() => {
initTableAttributes();
}, [attributes, schema]);
const showTotal = (total) => {
const totalStr = features.locales.t('total number of rows');
return `${totalStr}：${total > 999 ? `${total} +` : total}`;
};
return (<TableContext.Provider value={{
tableAttributes,
entity: entity,
schema,
setTableAttributes,
setSchema,
onReset: () => {
initTableAttributes();
},
}}>
// const showTotal = (total) => {
// const totalStr = features.locales.t('total number of rows');
// return `${totalStr}：${total > 999 ? `${total} +` : total}`;
// };
return (
<TableContext.Provider
value={{
tableAttributes,
entity: entity,
schema,
setTableAttributes,
setSchema,
onReset: () => {
initTableAttributes();
},
}}
>
<div className={Style.container}>
{!isMobile && !hideDefaultButtons && (<ToolBar title={title} extraContent={extraContent} buttonGroup={buttonGroup} reload={onReload}/>)}
{isMobile && <ButtonGroup items={buttonGroup}/>}
<List entity={entity} extraActions={extraActions} onAction={onAction} disabledOp={disabledOp} attributes={attributes} scroll={scroll} data={!disableSerialNumber
? data?.map((ele, index) => {
if (tablePagination) {
const total = tablePagination.total || 0;
const pageSize = tablePagination.pageSize || 20; //条数
const current = tablePagination.current || 1; //当前页
ele['#'] =
pageSize * (current - 1) +
(index + 1);
}
return ele;
})
: data} loading={loading} size={size} tablePagination={Object.assign({
showTotal,
}, tablePagination)} rowSelection={rowSelection}/>
{!isMobile && !hideDefaultButtons && (
<ToolBar
title={title}
extraContent={extraContent}
buttonGroup={buttonGroup}
reload={onReload}
/>
)}
{isMobile && <ButtonGroup items={buttonGroup} />}
<List
entity={entity}
extraActions={extraActions}
onAction={onAction}
disabledOp={disabledOp}
attributes={attributes}
scroll={scroll}
locale={locale}
data={
!disableSerialNumber
? data?.map((ele, index) => {
if (tablePagination) {
const total = tablePagination.total || 0;
const pageSize =
tablePagination.pageSize || 20; //条数
const current =
tablePagination.current || 1; //当前页
ele['#'] =
pageSize * (current - 1) +
(index + 1);
}
return ele;
})
: data
}
loading={loading}
size={size}
tablePagination={tablePagination}
rowSelection={rowSelection}
/>
</div>
</TableContext.Provider>);
</TableContext.Provider>
);
};
export default ProList;

34
src/components/list/index.ts
View File

@ -16,21 +16,26 @@ export default OakComponent({
attributes: [] as OakAbsAttrDef[],
data: [] as RowWithActions<ED, keyof ED>[],
loading: false,
tablePagination: {} as TableProps<
RowWithActions<ED, keyof ED>[]
>['pagination'],
rowSelection: {} as {
type: 'checkbox' | 'radio';
selectedRowKeys?: string[];
onChange: (
selectedRowKeys: string[],
selectedRows: RowWithActions<ED, keyof ED>[],
info?: { type: 'single' | 'multiple' | 'none' }
) => void;
},
tablePagination: undefined as
| TableProps<RowWithActions<ED, keyof ED>[]>['pagination']
| undefined,
rowSelection: undefined as
| {
type: 'checkbox' | 'radio';
selectedRowKeys?: string[];
onChange: (
selectedRowKeys: string[],
selectedRows: RowWithActions<ED, keyof ED>[],
info?: { type: 'single' | 'multiple' | 'none' }
) => void;
}
| undefined,
hideHeader: false,
size: 'large',
scroll: {} as TableProps<RowWithActions<ED, keyof ED>[]>['scroll'],
scroll: undefined as
| TableProps<RowWithActions<ED, keyof ED>[]>['scroll']
| undefined,
locale: undefined as TableProps<RowWithActions<ED, keyof ED>[]>['locale'] | undefined;
},
formData({ props }) {
const { converter } = this.state;
@ -122,7 +127,8 @@ export default OakComponent({
};
hideHeader: boolean;
size?: 'large' | 'middle' | 'small';
scroll?: TableProps<RowWithActions<ED, keyof ED>[]>['scroll'],
scroll?: TableProps<RowWithActions<ED, keyof ED>[]>['scroll'];
locale?: TableProps<RowWithActions<ED, keyof ED>[]>['locale'];
}
>
) => React.ReactElement;

3
src/components/list/web.pc.tsx
View File

@ -41,6 +41,7 @@ export default function Render(
judgeAttributes: OakAbsAttrJudgeDef[];
size?: 'large' | 'middle' | 'small';
scroll?: TableProps<any[]>['scroll'];
locale?: TableProps<any[]>['locale'];
},
{}
>
@ -64,6 +65,7 @@ export default function Render(
judgeAttributes,
size = 'large',
scroll,
locale,
} = oakData;
const [tableColumns, setTableColumns] = useState([] as ColumnsType<any>);
const { tableAttributes, setSchema } = useContext(TableContext);
@ -232,6 +234,7 @@ export default function Render(
dataSource={data}
columns={tableColumns}
pagination={tablePagination}
locale={locale}
scroll={Object.assign(
{},
showScroll && {

18
src/components/listPro/index.tsx
View File

@ -47,6 +47,7 @@ type Props<ED2 extends ED, T extends keyof ED2> = {
disableSerialNumber?: boolean; //是否禁用序号 默认启用
size?: 'large' | 'middle' | 'small';
scroll?: TableProps<RowWithActions<ED2, T>[]>['scroll'];
locale?: TableProps<RowWithActions<ED2, T>[]>['locale'];
};
export type TableAttributeType = {
@ -93,6 +94,7 @@ const ProList = <ED2 extends ED, T extends keyof ED2>(props: Props<ED2, T>) => {
extraContent,
size = 'large',
scroll,
locale,
} = props;
const features = useFeatures<{
locales: Locales<any, any, any, any>;
@ -144,10 +146,10 @@ const ProList = <ED2 extends ED, T extends keyof ED2>(props: Props<ED2, T>) => {
initTableAttributes();
}, [attributes, schema]);
const showTotal: PaginationProps['showTotal'] = (total) => {
const totalStr = features.locales.t('total number of rows');
return `${totalStr}：${total > 999 ? `${total} +` : total}`;
};
// const showTotal: PaginationProps['showTotal'] = (total) => {
// const totalStr = features.locales.t('total number of rows');
// return `${totalStr}：${total > 999 ? `${total} +` : total}`;
// };
return (
<TableContext.Provider
@ -179,6 +181,7 @@ const ProList = <ED2 extends ED, T extends keyof ED2>(props: Props<ED2, T>) => {
disabledOp={disabledOp}
attributes={attributes}
scroll={scroll}
locale={locale}
data={
!disableSerialNumber
? data?.map((ele, index) => {
@ -198,12 +201,7 @@ const ProList = <ED2 extends ED, T extends keyof ED2>(props: Props<ED2, T>) => {
}
loading={loading}
size={size}
tablePagination={Object.assign(
{
showTotal,
},
tablePagination
)}
tablePagination={tablePagination}
rowSelection={rowSelection}
/>
</div>