fix(storybook): page tags display (#4924)

This commit is contained in:
Peng Xiao 2023-11-14 09:45:12 +08:00 committed by GitHub
parent 993974d20d
commit 76b585d1ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 51 additions and 18 deletions

View File

@ -64,14 +64,6 @@ export const innerBackdrop = style({
},
});
const range = (start: number, end: number) => {
const result = [];
for (let i = start; i < end; i++) {
result.push(i);
}
return result;
};
export const tag = style({
height: '20px',
display: 'flex',
@ -94,14 +86,6 @@ export const tagSticky = style([
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
left: 0,
selectors: range(0, 20).reduce((selectors, i) => {
return {
...selectors,
[`&:nth-last-child(${i + 1})`]: {
right: `${i * 48}px`,
},
};
}, {}),
},
]);

View File

@ -18,6 +18,7 @@ interface TagItemProps {
tag: Tag;
idx: number;
mode: 'sticky' | 'list-item';
style?: React.CSSProperties;
}
// hack: map var(--affine-tag-xxx) colors to var(--affine-palette-line-xxx)
@ -37,13 +38,14 @@ const tagColorMap = (color: string) => {
return mapping[color] || color;
};
const TagItem = ({ tag, idx, mode }: TagItemProps) => {
const TagItem = ({ tag, idx, mode, style }: TagItemProps) => {
return (
<div
data-testid="page-tag"
className={mode === 'sticky' ? styles.tagSticky : styles.tagListItem}
data-idx={idx}
title={tag.value}
style={style}
>
<div
className={styles.tagIndicator}
@ -101,8 +103,30 @@ export const PageTags = ({
const tagsNormal = useMemo(() => {
const nTags = maxItems ? tags.slice(0, maxItems) : tags;
// sort tags by length
nTags.sort((a, b) => a.value.length - b.value.length);
const tagRightCharLength = nTags.reduceRight<number[]>(
(acc, tag) => {
const curr = acc[0] + Math.min(tag.value.length, 10);
return [curr, ...acc];
},
[0]
);
tagRightCharLength.shift();
return nTags.map((tag, idx) => (
<TagItem key={tag.id} tag={tag} idx={idx} mode="sticky" />
<TagItem
key={tag.id}
tag={tag}
idx={idx}
mode="sticky"
style={{
right: `calc(${tagRightCharLength[idx]}em)`,
}}
/>
));
}, [maxItems, tags]);
return (

View File

@ -67,6 +67,31 @@ AffineNewPageButton.play = async ({ canvasElement }) => {
};
const testTags = [
{
color: 'red',
id: 'test-tag-id-cccc',
value: 'cccccccccccccccc',
},
{
color: 'red',
id: 'test-tag-id-a',
value: 'a',
},
{
color: 'red',
id: 'test-tag-id-b',
value: 'b',
},
{
color: 'red',
id: 'test-tag-id-c',
value: 'c',
},
{
color: 'red',
id: 'test-tag-id-d',
value: 'd',
},
{
color: 'red',
id: 'test-tag-id-0',