40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
|
import * as React from "react";
|
||
|
|
import styled from "styled-components";
|
||
|
|
|
||
|
|
import { ComponentProps } from "components/designSystems/appsmith/BaseComponent";
|
||
|
|
import { hexToRgba } from "components/ads/common";
|
||
|
|
|
||
|
|
function Iframe(props: IframeComponentProps) {
|
||
|
|
return <iframe {...props} src={props.source} />;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const IframeWithBorder = styled(Iframe)<IframeComponentProps>`
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
border-color: ${(props) =>
|
||
|
|
hexToRgba(
|
||
|
|
props.borderColor || "#f2f2f2",
|
||
|
|
(props.borderOpacity && !isNaN(props.borderOpacity)
|
||
|
|
? props.borderOpacity
|
||
|
|
: 100) / 100,
|
||
|
|
)};
|
||
|
|
border-width: ${(props) =>
|
||
|
|
props.borderWidth ? Number(props.borderWidth) : 0}px;
|
||
|
|
`;
|
||
|
|
|
||
|
|
export interface IframeComponentProps extends ComponentProps {
|
||
|
|
source: string;
|
||
|
|
title?: string;
|
||
|
|
onURLChanged?: (url: string) => void;
|
||
|
|
onMessageReceived?: (message: MessageEvent) => void;
|
||
|
|
borderColor?: string;
|
||
|
|
borderOpacity?: number;
|
||
|
|
borderWidth?: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
function IframeComponent(props: IframeComponentProps) {
|
||
|
|
return <IframeWithBorder {...props} />;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default IframeComponent;
|