fix: action panel icon missing when icon-only is enabled (#6773)

This commit is contained in:
Katherine 2025-04-25 15:05:26 +08:00 committed by GitHub
parent 757765228f
commit cf57be8fb4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 26 additions and 20 deletions

View File

@ -42,31 +42,35 @@ const useStyles = createStyles(({ token, css }) => ({
`,
}));
function Button() {
function Button({ onlyIcon }) {
const fieldSchema = useFieldSchema();
const icon = fieldSchema['x-component-props']?.['icon'];
const backgroundColor = fieldSchema['x-component-props']?.['iconColor'];
const { icon, iconColor: backgroundColor } = fieldSchema['x-component-props'] || {};
const { layout, ellipsis = true } = useContext(WorkbenchBlockContext);
const { styles, cx } = useStyles();
const { t } = useTranslation();
const title = t(fieldSchema.title, { ns: NAMESPACE_UI_SCHEMA });
return layout === WorkbenchLayout.Grid ? (
<div title={title} className={cx(styles.avatar)}>
<Avatar style={{ backgroundColor }} size={48} icon={<Icon type={icon} />} />
<div
className={cx(styles.title)}
style={{
whiteSpace: ellipsis ? 'nowrap' : 'normal',
textOverflow: ellipsis ? 'ellipsis' : 'clip',
overflow: ellipsis ? 'hidden' : 'visible',
}}
>
{title}
const shouldShowTitle = !onlyIcon;
if (layout === WorkbenchLayout.Grid) {
return (
<div title={title} className={cx(styles.avatar)}>
<Avatar style={{ backgroundColor }} size={48} icon={<Icon type={icon} />} />
<div
className={cx(styles.title)}
style={{
whiteSpace: ellipsis ? 'nowrap' : 'normal',
textOverflow: ellipsis ? 'ellipsis' : 'clip',
overflow: ellipsis ? 'hidden' : 'visible',
}}
>
{shouldShowTitle && title}
</div>
</div>
</div>
) : (
<span>{title}</span>
);
);
}
return <span>{shouldShowTitle && title}</span>;
}
export const WorkbenchAction = withDynamicSchemaProps((props) => {
@ -79,9 +83,10 @@ export const WorkbenchAction = withDynamicSchemaProps((props) => {
<Component
className={cx(className, styles.action, 'nb-action-panel')}
{...others}
onlyIcon={false}
type="text"
icon={null}
title={<Button />}
title={<Button onlyIcon={others?.onlyIcon} />}
confirmTitle={fieldSchema.title}
style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
/>

View File

@ -85,6 +85,7 @@ const InternalIcons = () => {
key={key}
prefix={<Avatar style={{ backgroundColor }} icon={<Icon type={icon} />} />}
onClick={() => {}}
style={{ marginTop: '5px' }}
>
<NocoBaseRecursionField name={key} schema={s} />
</List.Item>