feat: support id/name in non-bold form

Update the nameRender in the column, to support id/name in non-bold form, usually only the name of the first id/name column is shown in bold, and the id/name of the other associated resource columns does not need to be shown in bold, such as the volume backup list page: the backup name is bold, but the releated volume name is non-bold

Change-Id: I2cff14d64d4a4aa2521b2147f478518fd5203617
This commit is contained in:
Jingwei.Zhang 2022-10-11 10:09:14 +08:00
parent c3abea1572
commit 6371effd7c
2 changed files with 16 additions and 7 deletions

View File

@ -257,6 +257,7 @@ export class FloatingIps extends Base {
dataIndex: 'floating_ip_address',
isLink: true,
routeName: this.getRouteName('fipDetail'),
boldName: true,
},
{
title: t('QoS Policy'),

View File

@ -179,10 +179,12 @@ export const getIdRender = (value, copyable = true, isLink = true) => {
);
};
export const getNameRenderWithStyle = (name) => {
const style = {
export const getNameRenderWithStyle = (name, isBold) => {
const style = isBold
? {
fontWeight: 'bold',
};
}
: {};
return <div style={style}>{name || '-'}</div>;
};
@ -198,6 +200,8 @@ export const getNameRender = (render, column, rowKey) => {
linkFunc,
hasNoDetail = false,
copyable = true,
boldName,
title,
} = column;
return (value, record) => {
const idValue = get(record, idKey || rowKey);
@ -210,8 +214,9 @@ export const getNameRender = (render, column, rowKey) => {
: linkPrefix;
url = getLinkUrl(linkValue, idValue);
}
const isBold = boldName || title === t('ID/Name') || dataIndex === 'name';
const nameValue = value || get(record, dataIndex) || '-';
const nameRender = getNameRenderWithStyle(nameValue);
const nameRender = getNameRenderWithStyle(nameValue, isBold);
const idRender = getIdRender(idValue, copyable, !!url);
if (hasNoDetail) {
return (
@ -248,10 +253,13 @@ export const getNameRenderByRouter = (render, column, rowKey) => {
routeParamsFunc,
withoutName = false,
copyable = true,
boldName,
title,
} = column;
return (value, record) => {
const nameValue = value || get(record, dataIndex) || '-';
const nameRender = getNameRenderWithStyle(nameValue);
const isBold = boldName || title === t('ID/Name') || dataIndex === 'name';
const nameRender = getNameRenderWithStyle(nameValue, isBold);
if (!routeName) {
return nameValue;
}
@ -284,7 +292,7 @@ export const idNameColumn = {
dataIndex: 'name',
render: (value, record) => {
const idRender = getIdRender(record.id, true, false);
const nameRender = getNameRenderWithStyle(value);
const nameRender = getNameRenderWithStyle(value, true);
return (
<>
<div>{idRender}</div>