Skip to content
Snippets Groups Projects
Unverified Commit 8f4e2d31 authored by Dalton's avatar Dalton Committed by GitHub
Browse files

Add DimensionInfoPopover component (#19281)

* Add DimensionInfoPopover component

* convert DimensionInfoPopover into ts
parent 20b514c0
No related merge requests found
import React from "react";
import PropTypes from "prop-types";
import Dimension from "metabase-lib/lib/Dimension";
import TippyPopver, {
ITippyPopoverProps,
} from "metabase/components/Popover/TippyPopover";
import DimensionInfo from "metabase/components/MetadataInfo/DimensionInfo";
export const POPOVER_DELAY: [number, number] = [1000, 300];
const propTypes = {
dimension: PropTypes.instanceOf(Dimension),
children: PropTypes.node,
placement: PropTypes.string,
};
type Props = { dimension: Dimension } & Pick<
ITippyPopoverProps,
"children" | "placement"
>;
function DimensionInfoPopover({ dimension, children, placement }: Props) {
return dimension ? (
<TippyPopver
delay={POPOVER_DELAY}
interactive
placement={placement || "left-start"}
content={<DimensionInfo dimension={dimension} />}
>
{children}
</TippyPopver>
) : (
children
);
}
DimensionInfoPopover.propTypes = propTypes;
export default DimensionInfoPopover;
export { default } from "./DimensionInfoPopover";
import React, { useState, useMemo } from "react";
import PropTypes from "prop-types";
import * as Tippy from "@tippyjs/react";
import { isReducedMotionPreferred } from "metabase/lib/dom";
......@@ -7,19 +8,25 @@ import EventSandbox from "metabase/components/EventSandbox";
const TippyComponent = Tippy.default;
type TippyProps = Tippy.TippyProps;
interface TippyPopoverProps extends TippyProps {
export interface ITippyPopoverProps extends TippyProps {
disableContentSandbox?: boolean;
lazy?: boolean;
}
const OFFSET: [number, number] = [0, 5];
const propTypes = {
disablContentSandbox: PropTypes.bool,
lazy: PropTypes.bool,
...TippyComponent.propTypes,
};
function TippyPopover({
disableContentSandbox,
lazy = true,
content,
...props
}: TippyPopoverProps) {
}: ITippyPopoverProps) {
const animationDuration = isReducedMotionPreferred() ? 0 : undefined;
const [mounted, setMounted] = useState(!lazy);
const plugins = useMemo(
......@@ -61,4 +68,6 @@ function TippyPopover({
);
}
TippyPopover.propTypes = propTypes;
export default TippyPopover;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment