This commit is contained in:
Will Hunt 2024-11-11 14:23:56 +00:00
parent 2c889f9b45
commit 04ff724246

View File

@ -5,13 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
Please see LICENSE in the repository root for full details. Please see LICENSE in the repository root for full details.
*/ */
import { import { Button as CpdButton, Tooltip, Alert } from "@vector-im/compound-web";
Button as CpdButton,
Tooltip,
Search,
Form,
Alert,
} from "@vector-im/compound-web";
import { import {
RaisedHandSolidIcon, RaisedHandSolidIcon,
ReactionIcon, ReactionIcon,
@ -85,8 +79,7 @@ export function ReactionPopupMenu({
const [isFullyExpanded, setExpanded] = useState(false); const [isFullyExpanded, setExpanded] = useState(false);
const filteredReactionSet = useMemo( const filteredReactionSet = useMemo(
() => () => (isFullyExpanded ? ReactionSet : ReactionSet.slice(0, 6)),
isFullyExpanded ? ReactionSet : ReactionSet.slice(0, 6),
[isFullyExpanded], [isFullyExpanded],
); );
@ -134,19 +127,27 @@ export function ReactionPopupMenu({
))} ))}
</menu> </menu>
</section> </section>
<section style={{ marginLeft: "var(--cpd-separator-spacing)" }}> <section style={{ marginLeft: "var(--cpd-separator-spacing)" }}>
<li key="search" className={styles.reactionPopupMenuItem}> <li key="search" className={styles.reactionPopupMenuItem}>
<Tooltip label={isFullyExpanded ? t("action.show_less") : t("action.show_more")}> <Tooltip
<CpdButton label={
iconOnly isFullyExpanded ? t("action.show_less") : t("action.show_more")
aria-label={isFullyExpanded ? t("action.show_less") : t("action.show_more")} }
Icon={isFullyExpanded ? ChevronUpIcon : ChevronDownIcon} >
kind="tertiary" <CpdButton
onClick={() => setExpanded(!isFullyExpanded)} iconOnly
/> aria-label={
</Tooltip> isFullyExpanded
</li> ? t("action.show_less")
</section> : t("action.show_more")
}
Icon={isFullyExpanded ? ChevronUpIcon : ChevronDownIcon}
kind="tertiary"
onClick={() => setExpanded(!isFullyExpanded)}
/>
</Tooltip>
</li>
</section>
</div> </div>
</> </>
); );