Skip to content

Commit e7a1af3

Browse files
AbhishekA1509AbhishekA1509
authored
Merge pull request #186 from devtron-labs/feat/iframe-container
feat: add IframeContainer
2 parents d184b7c + 3d48f9e commit e7a1af3

File tree

9 files changed

+169
-3
lines changed

9 files changed

+169
-3
lines changed

‎package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtron-labs/devtron-fe-common-lib",
3-
"version": "0.0.93",
3+
"version": "0.0.94",
44
"description": "Supporting common component library",
55
"type": "module",
66
"main": "dist/index.js",

‎src/Assets/Icon/ic-fullscreen-2.svg

Lines changed: 19 additions & 0 deletions
Loading

‎src/Shared/Components/IframeContainer/IframeContainer.component.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import IframeElement from './IframeElement'
2+
import { IframeContainerProps } from './types'
3+
4+
const IframeContainer = ({ iframeList, maxHeight = 300, maxWidth = 300 }: IframeContainerProps) => {
5+
const sortedIframeList = iframeList.sort((a, b) => (a?.order || 0) - (b?.order || 0))
6+
7+
return (
8+
<div className="flexbox dc__gap-16 flex-wrap w-100">
9+
{sortedIframeList.map((iframeData, index) => (
10+
<IframeElement
11+
// eslint-disable-next-line react/no-array-index-key
12+
key={index}
13+
URL={iframeData.URL}
14+
width={iframeData.width}
15+
height={iframeData.height}
16+
title={iframeData.title}
17+
maxHeight={maxHeight}
18+
maxWidth={maxWidth}
19+
/>
20+
))}
21+
</div>
22+
)
23+
}
24+
25+
export default IframeContainer

‎src/Shared/Components/IframeContainer/IframeElement.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.custom-panel {
2+
&--iframe-element {
3+
margin: 0 auto;
4+
margin-top: 40px;
5+
width: calc(100vw - 100px);
6+
height: calc(100vh - 100px);
7+
}
8+
}

‎src/Shared/Components/IframeContainer/IframeElement.tsx

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import { useState } from 'react'
2+
import Tippy from '@tippyjs/react'
3+
import { IframeElementProps } from './types'
4+
import { stopPropagation, VisibleModal } from '../../../Common'
5+
import { ReactComponent as ICFullScreen } from '../../../Assets/Icon/ic-fullscreen-2.svg'
6+
import { ReactComponent as ICClose } from '../../../Assets/Icon/ic-close.svg'
7+
import './IframeElement.scss'
8+
import { GenericSectionErrorState } from '../GenericSectionErrorState'
9+
10+
const IframeElement = ({ URL, width, height, title, maxHeight, maxWidth }: IframeElementProps) => {
11+
const [showFullScreen, setShowFullScreen] = useState<boolean>(false)
12+
const [hasError, setHasError] = useState<boolean>(false)
13+
14+
const handleEnterFullScreen = () => {
15+
setShowFullScreen(true)
16+
}
17+
18+
const handleExitFullScreen = () => {
19+
setShowFullScreen(false)
20+
}
21+
22+
const handleError = () => {
23+
setHasError(true)
24+
}
25+
26+
if (hasError) {
27+
return <GenericSectionErrorState description="Please try again later" />
28+
}
29+
30+
return (
31+
<>
32+
<div className="flexbox-col dc__gap-4">
33+
<div className="flexbox dc__content-space dc__gap-4">
34+
<h3 className="m-0 fs-12 cn-7 fw-6 dc__truncate">{title}</h3>
35+
36+
<Tippy content="Enter Full Screen" className="default-tt" arrow={false}>
37+
<button
38+
type="button"
39+
className="p-0 flex dc__no-border dc__no-background dc__outline-none-imp dc__tab-focus icon-dim-18 dc__tab-focus"
40+
onClick={handleEnterFullScreen}
41+
aria-label="Enter Full Screen"
42+
>
43+
<ICFullScreen className="dc__no-shrink icon-dim-18" />
44+
</button>
45+
</Tippy>
46+
</div>
47+
48+
{/* eslint-disable-next-line jsx-a11y/iframe-has-title */}
49+
<iframe
50+
src={URL}
51+
width={Math.min(maxWidth, width)}
52+
height={Math.min(maxHeight, height)}
53+
className="dc__no-border"
54+
onError={handleError}
55+
sandbox="allow-same-origin allow-scripts"
56+
referrerPolicy="no-referrer"
57+
/>
58+
</div>
59+
60+
{showFullScreen && (
61+
<VisibleModal className="" close={handleExitFullScreen}>
62+
<div
63+
className="dc__overflow-scroll br-8 dc__position-rel bcn-0 custom-panel--iframe-element flexbox-col dc__content-space"
64+
onClick={stopPropagation}
65+
>
66+
<div className="flexbox dc__align-items-center dc__content-space dc__border-bottom py-20 px-16">
67+
<h3 className="m-0 cn-9 fs-16 fw-6 lh-24 dc__truncate">{title}</h3>
68+
<button
69+
type="button"
70+
className="p-0 flex dc__no-border dc__no-background dc__outline-none-imp dc__tab-focus icon-dim-18 dc__tab-focus"
71+
onClick={handleExitFullScreen}
72+
aria-label="Close"
73+
>
74+
<ICClose className="dc__no-shrink icon-dim-18 fcn-6" />
75+
</button>
76+
</div>
77+
<div className="flex px-16 py-8 h-100">
78+
{/* eslint-disable-next-line jsx-a11y/iframe-has-title */}
79+
<iframe
80+
src={URL}
81+
width="100%"
82+
height="100%"
83+
className="dc__no-border"
84+
sandbox="allow-same-origin allow-scripts"
85+
referrerPolicy="no-referrer"
86+
/>
87+
</div>
88+
</div>
89+
</VisibleModal>
90+
)}
91+
</>
92+
)
93+
}
94+
95+
export default IframeElement

‎src/Shared/Components/IframeContainer/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as IframeContainer } from './IframeContainer.component'

‎src/Shared/Components/IframeContainer/types.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
interface IframeData {
2+
URL: string
3+
width: number
4+
height: number
5+
title: string
6+
order?: number
7+
}
8+
9+
export interface IframeContainerProps {
10+
iframeList: IframeData[]
11+
maxHeight?: number
12+
maxWidth?: number
13+
}
14+
15+
export interface IframeElementProps
16+
extends Pick<IframeData, 'URL' | 'width' | 'height' | 'title'>,
17+
Pick<IframeContainerProps, 'maxHeight' | 'maxWidth'> {}

‎src/Shared/Components/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,3 +39,4 @@ export * from './FeatureDescription'
3939
export * from './CICDHistory'
4040
export * from './GitCommitInfoGeneric'
4141
export * from './Error'
42+
export * from './IframeContainer'

0 commit comments

Comments
 (0)