Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | 142x | import { css, useTheme } from '@emotion/react';
import { IconWorld } from '@tabler/icons-react';
import { memo } from 'react';
import { FormattedMessage } from 'react-intl';
import { match } from 'ts-pattern';
import { Group, Tooltip, Typography, UnstyledButton } from '@allshares/studio-design-system';
import { TokenType, type Variable } from '@amalia/amalia-lang/tokens/types';
import { type Plan } from '@amalia/payout-definition/plans/types';
import { AssignedPlansDropdownList, type OnClickPlan } from '../assigned-plans-dropdown-list/AssignedPlansDropdownList';
import { useUsedInPlans } from './useUsedInPlans';
export type UsedInPlansIconProps = {
readonly tokenId: Variable['id'] | null;
readonly tokenType: TokenType | null;
readonly isGlobalToken: boolean;
readonly plansList: Plan[];
readonly onClickPlan?: OnClickPlan;
};
export const UsedInPlansIcon = memo(function UsedInPlansIcon({
isGlobalToken,
plansList,
tokenId,
tokenType,
onClickPlan,
}: UsedInPlansIconProps) {
const theme = useTheme();
const usedInPlans = useUsedInPlans(tokenId, plansList);
if (!tokenId || !tokenType || !isGlobalToken) {
return null;
}
const isUsedInAtLeastAPlan = usedInPlans.length;
return (
<AssignedPlansDropdownList
plans={usedInPlans}
onClickPlan={onClickPlan}
>
{({ isOpen: isDropdownOpen }) => (
<UnstyledButton
css={css`
flex: none;
padding: 2px 4px;
border-radius: ${theme.ds.borderRadiuses.squared};
background-color: ${isDropdownOpen ? theme.ds.colors.primary[50] : 'inherit'};
color: ${isUsedInAtLeastAPlan ? theme.ds.colors.primary[500] : theme.ds.colors.gray[800]};
transition: ${theme.ds.transitions.default('background-color', 'color')};
&:hover {
background-color: ${theme.ds.colors.primary[50]};
}
[data-color-scheme='dark'] & {
background-color: ${isDropdownOpen ? theme.ds.colors.primary[700] : 'inherit'};
color: ${isUsedInAtLeastAPlan ? theme.ds.colors.primary[300] : theme.ds.colors.gray[400]};
&:hover {
background-color: ${isDropdownOpen ? theme.ds.colors.primary[700] : theme.ds.colors.dark[700]};
}
}
`}
>
<Tooltip
content={match(tokenType)
.with(TokenType.FIELD, () => (
<FormattedMessage defaultMessage="This calculated column is usable in multiple plans.{br}Any change made will apply to those plans." />
))
.with(TokenType.FILTER, () => (
<FormattedMessage defaultMessage="This table is usable in multiple plans.{br}Any change made will apply to those plans." />
))
.with(TokenType.QUOTA, () => (
<FormattedMessage defaultMessage="This quota is usable in multiple plans.{br}Any change made will apply to those plans." />
))
.with(TokenType.RULE, () => (
<FormattedMessage defaultMessage="This rule is usable in multiple plans.{br}Any change made will apply to those plans." />
))
.with(TokenType.VARIABLE, () => (
<FormattedMessage defaultMessage="This variable is usable in multiple plans.{br}Any change made will apply to those plans." />
))
.with(TokenType.LINK, () => (
<FormattedMessage defaultMessage="This link is usable in multiple plans.{br}Any change made will apply to those plans." />
))
.otherwise(() => (
<FormattedMessage defaultMessage="This variable is usable in multiple plans.{br}Any change made will apply to those plans." />
))}
>
<Group
align="center"
gap={4}
>
<IconWorld size={14} />
{!!isUsedInAtLeastAPlan && <Typography variant="bodySmallRegular">{usedInPlans.length}</Typography>}
</Group>
</Tooltip>
</UnstyledButton>
)}
</AssignedPlansDropdownList>
);
});
|