mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-29 16:19:43 +08:00
feat(core): import template (#8000)
This commit is contained in:
EYHN
@@ -1,111 +0,0 @@
|
||||
import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
|
||||
import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
|
||||
import { WorkspaceFlavour } from '@affine/env/workspace';
|
||||
import { CollaborationIcon, SettingsIcon } from '@blocksuite/icons/rc';
|
||||
import type { WorkspaceMetadata } from '@toeverything/infra';
|
||||
import { type MouseEvent, useCallback } from 'react';
|
||||
|
||||
import { Button } from '../../../ui/button';
|
||||
import { Skeleton } from '../../../ui/skeleton';
|
||||
import * as styles from './styles.css';
|
||||
|
||||
export interface WorkspaceTypeProps {
|
||||
flavour: WorkspaceFlavour;
|
||||
isOwner: boolean;
|
||||
}
|
||||
|
||||
export interface WorkspaceCardProps {
|
||||
currentWorkspaceId?: string | null;
|
||||
meta: WorkspaceMetadata;
|
||||
onClick: (metadata: WorkspaceMetadata) => void;
|
||||
onSettingClick: (metadata: WorkspaceMetadata) => void;
|
||||
onEnableCloudClick?: (meta: WorkspaceMetadata) => void;
|
||||
isOwner?: boolean;
|
||||
openingId?: string | null;
|
||||
enableCloudText?: string;
|
||||
name?: string;
|
||||
}
|
||||
|
||||
export const WorkspaceCardSkeleton = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.card} data-testid="workspace-card">
|
||||
<Skeleton variant="circular" width={28} height={28} />
|
||||
<Skeleton
|
||||
variant="rectangular"
|
||||
height={43}
|
||||
width={220}
|
||||
style={{ marginLeft: '12px' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const WorkspaceCard = ({
|
||||
onClick,
|
||||
onSettingClick,
|
||||
onEnableCloudClick,
|
||||
openingId,
|
||||
currentWorkspaceId,
|
||||
meta,
|
||||
isOwner = true,
|
||||
enableCloudText = 'Enable Cloud',
|
||||
name,
|
||||
}: WorkspaceCardProps) => {
|
||||
const isLocal = meta.flavour === WorkspaceFlavour.LOCAL;
|
||||
const displayName = name ?? UNTITLED_WORKSPACE_NAME;
|
||||
|
||||
const onEnableCloud = useCallback(
|
||||
(e: MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
onEnableCloudClick?.(meta);
|
||||
},
|
||||
[meta, onEnableCloudClick]
|
||||
);
|
||||
return (
|
||||
<div
|
||||
className={styles.card}
|
||||
data-active={meta.id === currentWorkspaceId}
|
||||
data-testid="workspace-card"
|
||||
onClick={useCallback(() => {
|
||||
onClick(meta);
|
||||
}, [onClick, meta])}
|
||||
>
|
||||
<WorkspaceAvatar
|
||||
key={meta.id}
|
||||
meta={meta}
|
||||
rounded={3}
|
||||
size={28}
|
||||
name={name}
|
||||
colorfulFallback
|
||||
/>
|
||||
<div className={styles.workspaceInfo}>
|
||||
<div className={styles.workspaceTitle}>{displayName}</div>
|
||||
|
||||
<div className={styles.actionButtons}>
|
||||
{isLocal ? (
|
||||
<Button
|
||||
loading={!!openingId && openingId === meta.id}
|
||||
disabled={!!openingId}
|
||||
className={styles.showOnCardHover}
|
||||
onClick={onEnableCloud}
|
||||
>
|
||||
{enableCloudText}
|
||||
</Button>
|
||||
) : null}
|
||||
{isOwner ? null : <CollaborationIcon />}
|
||||
<div
|
||||
className={styles.settingButton}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
onSettingClick(meta);
|
||||
}}
|
||||
>
|
||||
<SettingsIcon width={16} height={16} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,94 +0,0 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
import { displayFlex, textEllipsis } from '../../../styles';
|
||||
|
||||
export const card = style({
|
||||
width: '100%',
|
||||
cursor: 'pointer',
|
||||
padding: '8px 12px',
|
||||
borderRadius: 4,
|
||||
// border: `1px solid ${borderColor}`,
|
||||
boxShadow: 'inset 0 0 0 1px transparent',
|
||||
...displayFlex('flex-start', 'flex-start'),
|
||||
transition: 'background .2s',
|
||||
position: 'relative',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
background: 'transparent',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
|
||||
selectors: {
|
||||
'&:hover': {
|
||||
background: cssVar('hoverColor'),
|
||||
},
|
||||
'&[data-active="true"]': {
|
||||
boxShadow: 'inset 0 0 0 1px ' + cssVar('brandColor'),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const workspaceInfo = style({
|
||||
width: 0,
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
gap: 2,
|
||||
});
|
||||
|
||||
export const workspaceTitle = style({
|
||||
width: 0,
|
||||
flex: 1,
|
||||
fontSize: cssVar('fontSm'),
|
||||
fontWeight: 500,
|
||||
lineHeight: '22px',
|
||||
maxWidth: '190px',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
...textEllipsis(1),
|
||||
});
|
||||
|
||||
export const actionButtons = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
});
|
||||
|
||||
export const settingButtonWrapper = style({});
|
||||
|
||||
export const settingButton = style({
|
||||
transition: 'all 0.13s ease',
|
||||
width: 0,
|
||||
height: 20,
|
||||
overflow: 'hidden',
|
||||
marginLeft: 0,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
placeItems: 'center',
|
||||
|
||||
borderRadius: 4,
|
||||
boxShadow: 'none',
|
||||
background: 'transparent',
|
||||
cursor: 'pointer',
|
||||
|
||||
selectors: {
|
||||
[`.${card}:hover &`]: {
|
||||
width: 20,
|
||||
marginLeft: 8,
|
||||
boxShadow: cssVar('shadow1'),
|
||||
background: cssVar('white80'),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const showOnCardHover = style({
|
||||
visibility: 'hidden',
|
||||
opacity: 0,
|
||||
selectors: {
|
||||
[`.${card}:hover &`]: {
|
||||
visibility: 'visible',
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -1,8 +0,0 @@
|
||||
import { style } from '@vanilla-extract/css';
|
||||
export const workspaceItemStyle = style({
|
||||
'@media': {
|
||||
'screen and (max-width: 720px)': {
|
||||
width: '100%',
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -1,71 +0,0 @@
|
||||
import { WorkspaceFlavour } from '@affine/env/workspace';
|
||||
import type { WorkspaceMetadata } from '@toeverything/infra';
|
||||
import { Suspense } from 'react';
|
||||
|
||||
import {
|
||||
WorkspaceCard,
|
||||
WorkspaceCardSkeleton,
|
||||
} from '../../components/card/workspace-card';
|
||||
import { workspaceItemStyle } from './index.css';
|
||||
|
||||
export interface WorkspaceListProps {
|
||||
disabled?: boolean;
|
||||
currentWorkspaceId?: string | null;
|
||||
items: WorkspaceMetadata[];
|
||||
openingId?: string | null;
|
||||
onClick: (workspace: WorkspaceMetadata) => void;
|
||||
onSettingClick: (workspace: WorkspaceMetadata) => void;
|
||||
onEnableCloudClick?: (meta: WorkspaceMetadata) => void;
|
||||
useIsWorkspaceOwner: (
|
||||
workspaceMetadata: WorkspaceMetadata
|
||||
) => boolean | undefined;
|
||||
useWorkspaceName: (
|
||||
workspaceMetadata: WorkspaceMetadata
|
||||
) => string | undefined;
|
||||
}
|
||||
|
||||
interface SortableWorkspaceItemProps extends Omit<WorkspaceListProps, 'items'> {
|
||||
item: WorkspaceMetadata;
|
||||
}
|
||||
|
||||
const SortableWorkspaceItem = ({
|
||||
item,
|
||||
openingId,
|
||||
useIsWorkspaceOwner,
|
||||
useWorkspaceName,
|
||||
currentWorkspaceId,
|
||||
onClick,
|
||||
onSettingClick,
|
||||
onEnableCloudClick,
|
||||
}: SortableWorkspaceItemProps) => {
|
||||
const isOwner = useIsWorkspaceOwner?.(item);
|
||||
const name = useWorkspaceName?.(item);
|
||||
return (
|
||||
<div className={workspaceItemStyle} data-testid="draggable-item">
|
||||
<WorkspaceCard
|
||||
currentWorkspaceId={currentWorkspaceId}
|
||||
meta={item}
|
||||
onClick={onClick}
|
||||
onSettingClick={onSettingClick}
|
||||
onEnableCloudClick={onEnableCloudClick}
|
||||
openingId={openingId}
|
||||
isOwner={isOwner}
|
||||
name={name}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const WorkspaceList = (props: WorkspaceListProps) => {
|
||||
const workspaceList = props.items;
|
||||
|
||||
return workspaceList
|
||||
.filter(
|
||||
w => w.flavour !== WorkspaceFlavour.AFFINE_CLOUD || w.initialized === true
|
||||
)
|
||||
.map(item => (
|
||||
<Suspense fallback={<WorkspaceCardSkeleton />} key={item.id}>
|
||||
<SortableWorkspaceItem key={item.id} {...props} item={item} />
|
||||
</Suspense>
|
||||
));
|
||||
};
|
||||
Reference in New Issue
Block a user