Web:Components:Selector: disable braed crumbs click while body is loading
This commit is contained in:
parent
5351178713
commit
cb0795ea76
@ -123,6 +123,7 @@ const Body = ({
|
|||||||
<BreadCrumbs
|
<BreadCrumbs
|
||||||
breadCrumbs={breadCrumbs}
|
breadCrumbs={breadCrumbs}
|
||||||
onSelectBreadCrumb={onSelectBreadCrumb}
|
onSelectBreadCrumb={onSelectBreadCrumb}
|
||||||
|
isLoading={isLoading}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
) : null}
|
) : null}
|
||||||
|
@ -19,4 +19,5 @@ export type DisplayedItem = {
|
|||||||
export type BreadCrumbsProps = {
|
export type BreadCrumbsProps = {
|
||||||
breadCrumbs?: BreadCrumb[];
|
breadCrumbs?: BreadCrumb[];
|
||||||
onSelectBreadCrumb?: (item: BreadCrumb) => void;
|
onSelectBreadCrumb?: (item: BreadCrumb) => void;
|
||||||
|
isLoading?: boolean;
|
||||||
};
|
};
|
||||||
|
@ -29,13 +29,13 @@ const StyledBreadCrumbs = styled.div<{
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledItemText = styled(Text)<{ isCurrent: boolean }>`
|
const StyledItemText = styled(Text)<{ isCurrent: boolean; isLoading: boolean }>`
|
||||||
${(props) =>
|
${(props) =>
|
||||||
!props.isCurrent &&
|
!props.isCurrent &&
|
||||||
css`
|
css`
|
||||||
color: ${props.theme.selector.breadCrumbs.prevItemColor};
|
color: ${props.theme.selector.breadCrumbs.prevItemColor};
|
||||||
|
|
||||||
cursor: pointer;
|
${!props.isLoading && `cursor: pointer`};
|
||||||
`}
|
`}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -14,16 +14,21 @@ import {
|
|||||||
StyledArrowRightSvg,
|
StyledArrowRightSvg,
|
||||||
} from "./StyledBreadCrumbs";
|
} from "./StyledBreadCrumbs";
|
||||||
|
|
||||||
const BreadCrumbs = ({ breadCrumbs, onSelectBreadCrumb }: BreadCrumbsProps) => {
|
const BreadCrumbs = ({
|
||||||
|
breadCrumbs,
|
||||||
|
onSelectBreadCrumb,
|
||||||
|
isLoading,
|
||||||
|
}: BreadCrumbsProps) => {
|
||||||
const [displayedItems, setDisplayedItems] = React.useState<DisplayedItem[]>(
|
const [displayedItems, setDisplayedItems] = React.useState<DisplayedItem[]>(
|
||||||
[]
|
[]
|
||||||
);
|
);
|
||||||
|
|
||||||
const onClickItem = React.useCallback(
|
const onClickItem = React.useCallback(
|
||||||
(e, open, item: BreadCrumb) => {
|
(e, open, item: BreadCrumb) => {
|
||||||
|
if (isLoading) return;
|
||||||
onSelectBreadCrumb && onSelectBreadCrumb(item);
|
onSelectBreadCrumb && onSelectBreadCrumb(item);
|
||||||
},
|
},
|
||||||
[breadCrumbs]
|
[breadCrumbs, isLoading]
|
||||||
);
|
);
|
||||||
|
|
||||||
const calculateDisplayedItems = React.useCallback(
|
const calculateDisplayedItems = React.useCallback(
|
||||||
@ -173,8 +178,9 @@ const BreadCrumbs = ({ breadCrumbs, onSelectBreadCrumb }: BreadCrumbsProps) => {
|
|||||||
noSelect
|
noSelect
|
||||||
truncate
|
truncate
|
||||||
isCurrent={index === displayedItems.length - 1}
|
isCurrent={index === displayedItems.length - 1}
|
||||||
|
isLoading={isLoading}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (index === displayedItems.length - 1) return;
|
if (index === displayedItems.length - 1 || isLoading) return;
|
||||||
|
|
||||||
onSelectBreadCrumb &&
|
onSelectBreadCrumb &&
|
||||||
onSelectBreadCrumb({
|
onSelectBreadCrumb({
|
||||||
|
Loading…
Reference in New Issue
Block a user