Skip to content

Commit

Permalink
[ui] Switch MiddleTruncate back to immediate useLayoutEffect for compat
Browse files Browse the repository at this point in the history
  • Loading branch information
bengotow committed Nov 25, 2024
1 parent 4db6e7e commit 3a2bf15
Show file tree
Hide file tree
Showing 4 changed files with 72 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export const MiddleTruncate = ({text, showTitle = true}: Props) => {

// Use a layout effect to trigger the process of calculating the truncated text, for the
// initial render.
React.useEffect(() => {
React.useLayoutEffect(() => {
window.requestAnimationFrame(calculateTargetStyle);
}, [calculateTargetStyle]);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,5 +48,6 @@ const PageHeaderContainer = styled(Box)`
*/
.bp5-breadcrumbs {
height: auto;
min-height: 30px;
}
`;
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
// eslint-disable-next-line no-restricted-imports
import {Breadcrumbs2 as Breadcrumbs} from '@blueprintjs/popover2';
import {Meta} from '@storybook/react';
import faker from 'faker';
import {useMemo, useRef, useState} from 'react';
import styled from 'styled-components';

import {Box} from '../Box';
import {Colors} from '../Color';
import {Icon} from '../Icon';
import {MiddleTruncate} from '../MiddleTruncate';
import {Slider} from '../Slider';
import {Tag} from '../Tag';
import {Heading, Title} from '../Text';

// eslint-disable-next-line import/no-default-export
export default {
Expand Down Expand Up @@ -240,3 +244,62 @@ export const Containers = () => {
</>
);
};

export const BreadcrumbsScenario = () => {
const breadcrumbs = [
{text: 's3', href: '#'},
{text: 'superdomain_1', href: '#'},
{text: 'subdomain_1', href: '#'},
{text: 'subsubsubsubdosubsubsubsubdoma', href: '#'},
{text: 'asset1', href: '#'},
];
return (
<Title>
<Box flex={{alignItems: 'center', gap: 4}} style={{maxWidth: '500px'}}>
<BreadcrumbsWithSlashes
items={breadcrumbs}
currentBreadcrumbRenderer={({text, href}) => (
<span key={href}>
<TruncatedHeading>
<MiddleTruncate text={text as string} />
</TruncatedHeading>
</span>
)}
$numHeaderBreadcrumbs={breadcrumbs.length}
breadcrumbRenderer={({text, href}) => (
<span key={href}>
<TruncatedHeading>
<MiddleTruncate text={text as string} />
</TruncatedHeading>
</span>
)}
popoverProps={{
minimal: true,
modifiers: {offset: {enabled: true, options: {offset: [0, 8]}}},
popoverClassName: 'dagster-popover',
}}
/>
</Box>
</Title>
);
};

const TruncatedHeading = styled(Heading)`
max-width: 200px;
overflow: hidden;
`;

// Only add slashes within the asset key path
const BreadcrumbsWithSlashes = styled(Breadcrumbs)<{$numHeaderBreadcrumbs: number}>`
height: auto;
& li:nth-child(n + ${(p) => p.$numHeaderBreadcrumbs + 1})::after {
background: none;
font-size: 20px;
font-weight: bold;
color: ${Colors.textLighter()};
content: '/';
width: 8px;
line-height: 16px;
}
`;
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,13 @@ const BreadcrumbsWithSlashes = styled(Breadcrumbs)<{$numHeaderBreadcrumbs: numbe
width: 8px;
line-height: 16px;
}
/**
* Blueprint breadcrumbs annoyingly have a built-in height.
*/
.bp5-breadcrumbs {
height: auto;
min-height: 30px;
}
`;

const BreadcrumbLink = styled(Link)`
Expand Down

0 comments on commit 3a2bf15

Please sign in to comment.