mirror of
https://github.com/outline/outline.git
synced 2026-06-13 11:25:03 +03:00
Tom Moor
0139b91b5d
* chore: Replace lodash with es-toolkit Migrate all direct lodash imports to es-toolkit/compat for a smaller, faster, lodash-compatible utility library. Transitive lodash usage from other packages remains unchanged. * fix: Restore isPlainObject semantics in CanCan policy The lodash migration aliased `isObject` to `lodash/isPlainObject` and the codemod incorrectly mapped the local name to es-toolkit's `isObject`, which also returns true for arrays and functions. This caused condition objects in policy definitions to be skipped, breaking authorization checks across the codebase. * fix: Restore unicode-aware length counting in validators es-toolkit/compat's size() returns string.length, while lodash's _.size() counts unicode code points. Switch to [...value].length to preserve the previous behavior so multi-byte characters like emoji count as one.
88 lines
2.3 KiB
TypeScript
88 lines
2.3 KiB
TypeScript
import { compact } from "es-toolkit/compat";
|
|
import { observer } from "mobx-react";
|
|
import * as React from "react";
|
|
import type Comment from "~/models/Comment";
|
|
import useHover from "~/hooks/useHover";
|
|
import useStores from "~/hooks/useStores";
|
|
import Logger from "~/utils/Logger";
|
|
import Flex from "../Flex";
|
|
import { ResizingHeightContainer } from "../ResizingHeightContainer";
|
|
import Reaction from "./Reaction";
|
|
|
|
type Props = {
|
|
/** Model for which to show the reactions. */
|
|
model: Comment;
|
|
/** Callback when the user intends to add a reaction. */
|
|
onAddReaction: (emoji: string) => Promise<void>;
|
|
/** Callback when the user intends to remove a reaction. */
|
|
onRemoveReaction: (emoji: string) => Promise<void>;
|
|
/** classname generated by styled-components. */
|
|
className?: string;
|
|
/** Picker to render as the last element */
|
|
picker?: React.ReactElement;
|
|
};
|
|
|
|
const ReactionList: React.FC<Props> = ({
|
|
model,
|
|
onAddReaction,
|
|
onRemoveReaction,
|
|
className,
|
|
picker,
|
|
}) => {
|
|
const { users } = useStores();
|
|
const listRef = React.useRef<HTMLDivElement>(null);
|
|
|
|
const hovered = useHover({
|
|
ref: listRef,
|
|
duration: 250,
|
|
});
|
|
|
|
React.useEffect(() => {
|
|
const loadReactedUsersData = async () => {
|
|
try {
|
|
await model.loadReactedUsersData();
|
|
} catch (_err) {
|
|
Logger.warn("Could not prefetch reaction data");
|
|
}
|
|
};
|
|
|
|
if (hovered) {
|
|
void loadReactedUsersData();
|
|
}
|
|
}, [hovered, model]);
|
|
|
|
const hasReactions = !!model.reactions.length;
|
|
const style = React.useMemo(() => {
|
|
if (hasReactions) {
|
|
return { minHeight: 28 };
|
|
}
|
|
return undefined;
|
|
}, [hasReactions]);
|
|
|
|
return (
|
|
<ResizingHeightContainer style={style}>
|
|
<Flex ref={listRef} className={className} align="center" gap={6} wrap>
|
|
{model.reactions.map((reaction) => {
|
|
const reactedUsers = compact(
|
|
reaction.userIds.map((id) => users.get(id))
|
|
);
|
|
|
|
return (
|
|
<Reaction
|
|
key={reaction.emoji}
|
|
reaction={reaction}
|
|
reactedUsers={reactedUsers}
|
|
disabled={model.isResolved}
|
|
onAddReaction={onAddReaction}
|
|
onRemoveReaction={onRemoveReaction}
|
|
/>
|
|
);
|
|
})}
|
|
{picker}
|
|
</Flex>
|
|
</ResizingHeightContainer>
|
|
);
|
|
};
|
|
|
|
export default observer(ReactionList);
|