12eb6015de
* refactor: migrate web Avatar to @makeplane/propel Avatar
Replace @plane/ui Avatar and AvatarGroup with the published Propel
components across apps/web. 41 files, 51 Avatar sites, 4 group sites.
Propel's size scale is @plane/ui's shifted one step, so every enum maps
with no pixel change: sm(16)->2xs, md(20)->xs, base(24)->sm, lg(28)->md.
Unsized avatars took the old md default and become xs.
Notable mapping decisions:
- name -> alt plus fallback={name?.[0]?.toUpperCase()}, preserving the
initial that @plane/ui derived internally.
- Six numeric px sizes mapped to the nearest enum step. Five are exact;
the notification card avatar moves 42px -> xl (40px).
- Ten classNames removed, as published Propel takes no className. Seven
were already redundant with Propel's base class (shrink-0, bg-layer-1);
the remaining three overrode initials typography, which Propel now sets
per size.
- shape="circle" and fallback colour props dropped; Propel is always
circular and picks initials colours from a fixed palette.
AvatarGroup needs app chrome. @plane/ui defaulted to max={2}, rendering
two avatars plus a +N counter, while Propel's AvatarGroup renders every
child. No call site passed max explicitly, so all four relied on that
default and would have rendered entire member lists. The new
common/avatar-group-overflow.tsx restores the cap around Propel's group.
ButtonAvatars' size prop is narrowed to AvatarGroupSize accordingly;
no caller passes size.
Tooltips are intentionally not migrated. @plane/ui Avatar wrapped itself
in a Tooltip defaulting to on, and Propel has no built-in tooltip, so
roughly 29 direct sites plus the ButtonAvatars subtree lose a tooltip.
ButtonAvatars additionally inverted the flag (showTooltip={!showTooltip}),
so its callers passing false were the ones showing tooltips. Restoring
these is deliberately deferred to a follow-up.
* refactor: use Propel Avatar for AvatarGroup overflow count
Replace the custom CSS +N counter with a Propel Avatar fallback,
matching the Avatar Group overflow pattern. Size still comes from
the group context.
113 lines
3.3 KiB
TypeScript
113 lines
3.3 KiB
TypeScript
/**
|
|
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
* See the LICENSE file for details.
|
|
*/
|
|
|
|
import React from "react";
|
|
import { observer } from "mobx-react";
|
|
import { useParams } from "next/navigation";
|
|
import { Ban } from "lucide-react";
|
|
import { Avatar } from "@makeplane/propel/components/avatar";
|
|
import { EUserProjectRoles } from "@plane/types";
|
|
// plane ui
|
|
import { CustomSearchSelect } from "@plane/ui";
|
|
// helpers
|
|
import { getFileURL } from "@plane/utils";
|
|
// hooks
|
|
import { useMember } from "@/hooks/store/use-member";
|
|
|
|
type Props = {
|
|
value: any;
|
|
onChange: (val: string) => void;
|
|
isDisabled?: boolean;
|
|
};
|
|
|
|
export const MemberSelect = observer(function MemberSelect(props: Props) {
|
|
const { value, onChange, isDisabled = false } = props;
|
|
// router
|
|
const { projectId } = useParams();
|
|
// store hooks
|
|
const {
|
|
project: { projectMemberIds, getProjectMemberDetails },
|
|
} = useMember();
|
|
|
|
const options = projectMemberIds
|
|
?.map((userId) => {
|
|
const memberDetails = projectId ? getProjectMemberDetails(userId, projectId.toString()) : null;
|
|
|
|
if (!memberDetails?.member) return;
|
|
const isGuest = memberDetails.role === EUserProjectRoles.GUEST;
|
|
if (isGuest) return;
|
|
|
|
return {
|
|
value: `${memberDetails?.member.id}`,
|
|
query: `${memberDetails?.member.display_name}`,
|
|
content: (
|
|
<div className="flex items-center gap-2">
|
|
<Avatar
|
|
alt={memberDetails?.member.display_name}
|
|
fallback={memberDetails?.member.display_name?.[0]?.toUpperCase()}
|
|
src={getFileURL(memberDetails?.member.avatar_url)}
|
|
size="xs"
|
|
/>
|
|
{memberDetails?.member.display_name}
|
|
</div>
|
|
),
|
|
};
|
|
})
|
|
.filter((option) => !!option) as
|
|
| {
|
|
value: string;
|
|
query: string;
|
|
content: React.ReactNode;
|
|
}[]
|
|
| undefined;
|
|
const selectedOption = projectId ? getProjectMemberDetails(value, projectId.toString()) : null;
|
|
|
|
return (
|
|
<CustomSearchSelect
|
|
value={value}
|
|
label={
|
|
<div className="flex h-3.5 items-center gap-2">
|
|
{selectedOption && (
|
|
<Avatar
|
|
alt={selectedOption.member?.display_name}
|
|
fallback={selectedOption.member?.display_name?.[0]?.toUpperCase()}
|
|
src={getFileURL(selectedOption.member?.avatar_url)}
|
|
size="xs"
|
|
/>
|
|
)}
|
|
{selectedOption ? (
|
|
selectedOption.member?.display_name
|
|
) : (
|
|
<div className="flex items-center gap-2">
|
|
<Ban className="h-3.5 w-3.5 rotate-90 text-placeholder" />
|
|
<span className="text-13 text-placeholder">None</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
}
|
|
buttonClassName="!px-3 !py-2 bg-surface-1"
|
|
options={
|
|
options &&
|
|
options && [
|
|
...options,
|
|
{
|
|
value: "none",
|
|
query: "none",
|
|
content: (
|
|
<div className="flex items-center gap-2">
|
|
<Ban className="h-3.5 w-3.5 rotate-90 text-placeholder" />
|
|
<span className="py-0.5 text-13 text-placeholder">None</span>
|
|
</div>
|
|
),
|
|
},
|
|
]
|
|
}
|
|
maxHeight="md"
|
|
onChange={onChange}
|
|
disabled={isDisabled}
|
|
/>
|
|
);
|
|
});
|