c202198d61
* fix: Margin on floating toolbar fix: Flash of toolbar on wide screens * fix: Nesting of comment marks * fix: Post button not visible when there is a draft comment, makes it look like the comment is saved fix: Styling of link editor results now matches other menus fix: Allow small link editor in comments sidebar * fix: Cannot use arrow keys to navigate suggested links Added animation to link suggestions Added mixin for text ellipsis * fix: Link input appears non-rounded when no creation option * Accidental removal
53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
import { m, TargetAndTransition } from "framer-motion";
|
|
import * as React from "react";
|
|
import useComponentSize from "~/hooks/useComponentSize";
|
|
|
|
type Props = {
|
|
/** The children to render */
|
|
children: React.ReactNode;
|
|
/** Whether to hide overflow. */
|
|
hideOverflow?: boolean;
|
|
/** A way to calculate height */
|
|
componentSizeCalculation?: "clientRectHeight" | "scrollHeight";
|
|
/** Optional animation config. */
|
|
config?: TargetAndTransition;
|
|
/** Optional styles. */
|
|
style?: React.CSSProperties;
|
|
};
|
|
|
|
/**
|
|
* Automatically animates the height of a container based on it's contents.
|
|
*/
|
|
export function ResizingHeightContainer(props: Props) {
|
|
const {
|
|
hideOverflow,
|
|
children,
|
|
config = {
|
|
transition: {
|
|
duration: 0.1,
|
|
ease: "easeInOut",
|
|
},
|
|
},
|
|
style,
|
|
} = props;
|
|
|
|
const ref = React.useRef<HTMLDivElement>(null);
|
|
const { height } = useComponentSize(ref);
|
|
|
|
return (
|
|
<m.div
|
|
animate={{
|
|
...config,
|
|
height: Math.round(height),
|
|
}}
|
|
style={{
|
|
...style,
|
|
overflow: hideOverflow ? "hidden" : "inherit",
|
|
position: "relative",
|
|
}}
|
|
>
|
|
<div ref={ref}>{children}</div>
|
|
</m.div>
|
|
);
|
|
}
|