Raphaël Bosi
c596a5e342
## Description Promotes the next-gen UI library (formerly `twenty-new-ui`) to the name **`twenty-ui`** (v0.1.0, publishable) and renames the old package to **`twenty-ui-deprecated`**. Rewrites ~1,730 `twenty-ui` imports → `twenty-ui-deprecated`, updates all configs/CI/Docker/deps, and migrates twenty-front's `Toggle` to the new package (first consumer) as a drop-in. ## Next steps - Wire the `ui/v*` publish dispatch (`cd-deploy-tag.yaml` + `.yarnrc.yml`), then tag `ui/v0.1.0` to publish. - Continue migrating components from `twenty-ui-deprecated` → `twenty-ui`.
97 lines
2.8 KiB
TypeScript
97 lines
2.8 KiB
TypeScript
import {
|
|
type SelectControlProps,
|
|
StyledControlContainer,
|
|
} from '@/ui/input/components/SelectControl';
|
|
import { styled } from '@linaria/react';
|
|
import React, { useContext } from 'react';
|
|
import { isDefined } from 'twenty-shared/utils';
|
|
import {
|
|
IconChevronDown,
|
|
type IconComponent,
|
|
OverflowingTextWithTooltip,
|
|
TintedIconTile,
|
|
} from 'twenty-ui-deprecated/display';
|
|
import { type ThemeColor } from 'twenty-ui-deprecated/theme';
|
|
import {
|
|
ThemeContext,
|
|
themeCssVariables,
|
|
} from 'twenty-ui-deprecated/theme-constants';
|
|
|
|
const StyledIconChevronDownWrapper = styled.div<{
|
|
disabled?: boolean;
|
|
}>`
|
|
color: ${({ disabled }) =>
|
|
disabled
|
|
? themeCssVariables.font.color.extraLight
|
|
: themeCssVariables.font.color.tertiary};
|
|
display: flex;
|
|
`;
|
|
|
|
type MultiSelectOptionType = {
|
|
label: string;
|
|
Icon: IconComponent;
|
|
iconThemeColor?: ThemeColor | null;
|
|
};
|
|
|
|
type MultiSelectControlProps = Omit<SelectControlProps, 'selectedOption'> & {
|
|
fixedIcon?: IconComponent;
|
|
fixedText?: string;
|
|
selectedOptions: MultiSelectOptionType[];
|
|
};
|
|
|
|
export const MultiSelectControl = ({
|
|
fixedIcon,
|
|
fixedText,
|
|
selectedOptions,
|
|
isDisabled,
|
|
selectSizeVariant,
|
|
textAccent = 'default',
|
|
hasRightElement,
|
|
}: MultiSelectControlProps) => {
|
|
const { theme } = useContext(ThemeContext);
|
|
const firstSelectedOption = selectedOptions?.[0];
|
|
return (
|
|
<StyledControlContainer
|
|
disabled={isDisabled}
|
|
hasIcon={isDefined(fixedIcon) || isDefined(firstSelectedOption?.Icon)}
|
|
selectSizeVariant={selectSizeVariant}
|
|
textAccent={textAccent}
|
|
hasRightElement={hasRightElement}
|
|
>
|
|
{isDefined(fixedIcon) ? (
|
|
React.createElement(fixedIcon, {
|
|
color: isDisabled ? theme.font.color.light : theme.font.color.primary,
|
|
size: theme.icon.size.md,
|
|
stroke: theme.icon.stroke.sm,
|
|
})
|
|
) : isDefined(firstSelectedOption?.Icon) ? (
|
|
isDefined(firstSelectedOption.iconThemeColor) ? (
|
|
<TintedIconTile
|
|
Icon={firstSelectedOption.Icon}
|
|
color={firstSelectedOption.iconThemeColor}
|
|
size={theme.icon.size.md}
|
|
stroke={theme.icon.stroke.sm}
|
|
/>
|
|
) : (
|
|
<firstSelectedOption.Icon
|
|
color={
|
|
isDisabled ? theme.font.color.light : theme.font.color.primary
|
|
}
|
|
size={theme.icon.size.md}
|
|
stroke={theme.icon.stroke.sm}
|
|
/>
|
|
)
|
|
) : null}
|
|
{isDefined(fixedText) ? (
|
|
<OverflowingTextWithTooltip text={fixedText} />
|
|
) : (
|
|
<OverflowingTextWithTooltip text={firstSelectedOption?.label ?? ''} />
|
|
)}
|
|
|
|
<StyledIconChevronDownWrapper disabled={isDisabled}>
|
|
<IconChevronDown size={theme.icon.size.md} />
|
|
</StyledIconChevronDownWrapper>
|
|
</StyledControlContainer>
|
|
);
|
|
};
|