Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-14 13:25:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(core): adjust property table's style to match design (#10849)

Browse Source 
![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/278b9dbf-a089-4007-bf35-088301a29d89.png)
This commit is contained in:
CatsJuice
2025-03-20 23:20:57 +00:00
parent e4bc43df67
commit 48f79d6467
12 changed files with 122 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
packages/frontend/core/src/modules/integration/views/properties-table.tsx
View File

@@ -6,13 +6,17 @@ import {
} from '@affine/component';
import { useI18n } from '@affine/i18n';
import { useLiveData, useService } from '@toeverything/infra';
import { useMemo } from 'react';
import { type ReactNode, useMemo } from 'react';
import { IntegrationPropertyService } from '../services/integration-property';
import type { IntegrationProperty } from '../type';
import { ValueRenderer } from './property-values';
export const DocIntegrationPropertiesTable = () => {
export const DocIntegrationPropertiesTable = ({
divider,
}: {
divider?: ReactNode;
}) => {
const t = useI18n();
const integrationPropertyService = useService(IntegrationPropertyService);
@@ -36,31 +40,37 @@ export const DocIntegrationPropertiesTable = () => {
if (!schema || !integrationType) return null;
return (
<PropertyCollapsibleSection
title={t['com.affine.integration.properties']()}
>
<PropertyCollapsibleContent>
{properties.map(property => {
const Icon = property.icon;
const key = property.key as string;
const label = property.label;
const displayName =
typeof label === 'string'
? t[label]()
: t.t(label?.i18nKey, label?.options);
<>
<PropertyCollapsibleSection
title={t['com.affine.integration.properties']()}
>
<PropertyCollapsibleContent>
{properties.map(property => {
const Icon = property.icon;
const key = property.key as string;
const label = property.label;
const displayName =
typeof label === 'string'
? t[label]()
: t.t(label?.i18nKey, label?.options);
return (
<PropertyRoot key={key}>
<PropertyName name={displayName} icon={Icon ? <Icon /> : null} />
<ValueRenderer
integration={integrationType}
type={property.type}
propertyKey={key}
/>
</PropertyRoot>
);
})}
</PropertyCollapsibleContent>
</PropertyCollapsibleSection>
return (
<PropertyRoot key={key}>
<PropertyName
name={displayName}
icon={Icon ? <Icon /> : null}
/>
<ValueRenderer
integration={integrationType}
type={property.type}
propertyKey={key}
/>
</PropertyRoot>
);
})}
</PropertyCollapsibleContent>
</PropertyCollapsibleSection>
{divider}
</>
);
};