hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Convert a class component to functional component

Browse Source 
Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>
Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
This commit is contained in:
Janne Savolainen 2021-12-28 12:35:47 +02:00
parent 41aacb3db2
commit ab4a8c8a1d
No known key found for this signature in database
GPG Key ID: 5F465B5672372402
1 changed files with 90 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
src/renderer/components/+welcome/welcome.tsx
View File

@ -30,70 +30,103 @@ import { WelcomeBannerRegistry } from "../../../extensions/registries";
export const defaultWidth = 320; export const defaultWidth = 320;
@observer export const Welcome: React.FC = observer(() => {
export class Welcome extends React.Component { const welcomeBanner = WelcomeBannerRegistry.getInstance().getItems();
render() {
const welcomeBanner = WelcomeBannerRegistry.getInstance().getItems();
// if there is banner with specified width, use it to calculate the width of the container // if there is banner with specified width, use it to calculate the width of the container
const maxWidth = welcomeBanner.reduce((acc, curr) => { const maxWidth = welcomeBanner.reduce((acc, curr) => {
const currWidth = curr.width ?? 0; const currWidth = curr.width ?? 0;
if (acc > currWidth) { if (acc > currWidth) {
return acc; return acc;
} }
return currWidth; return currWidth;
}, defaultWidth); }, defaultWidth);
return ( return (
<div className="flex justify-center Welcome align-center"> <div className="flex justify-center Welcome align-center">
<div style={{ width: `${maxWidth}px` }} data-testid="welcome-banner-container"> <div
{welcomeBanner.length > 0 ? ( style={{ width: `${maxWidth}px` }}
<Carousel data-testid="welcome-banner-container"
stopAutoPlayOnHover={true} >
indicators={welcomeBanner.length > 1} {welcomeBanner.length > 0 ? (
autoPlay={true} <Carousel
navButtonsAlwaysInvisible={true} stopAutoPlayOnHover={true}
indicatorIconButtonProps={{ indicators={welcomeBanner.length > 1}
style: { autoPlay={true}
color: "var(--iconActiveBackground)", navButtonsAlwaysInvisible={true}
}, indicatorIconButtonProps={{
}} style: {
activeIndicatorIconButtonProps={{ color: "var(--iconActiveBackground)",
style: { },
color: "var(--iconActiveColor)", }}
}, activeIndicatorIconButtonProps={{
}} style: {
interval={8000} color: "var(--iconActiveColor)",
},
}}
interval={8000}
>
{welcomeBanner.map((item, index) => (
<item.Banner key={index} />
))}
</Carousel>
) : (
<Icon svg="logo-lens" className="logo" />
)}
<div className="flex justify-center">
<div
style={{ width: `${defaultWidth}px` }}
data-testid="welcome-text-container"
>
<h2>Welcome to {productName} 5!</h2>
<p>
To get you started we have auto-detected your clusters in your
kubeconfig file and added them to the catalog, your centralized
view for managing all your cloud-native resources.
<br />
<br />
If you have any questions or feedback, please join our{" "}
<a
href={slackUrl}
target="_blank"
rel="noreferrer"
className="link"
>
Lens Community slack channel
</a>
.
</p>
<ul
className="block"
style={{ width: `${defaultWidth}px` }}
data-testid="welcome-menu-container"
> >
{welcomeBanner.map((item, index) => {WelcomeMenuRegistry.getInstance()
<item.Banner key={index} />, .getItems()
)} .map((item, index) => (
</Carousel> <li
) : <Icon svg="logo-lens" className="logo" />} key={index}
className="flex grid-12"
<div className="flex justify-center"> onClick={() => item.click()}
<div style={{ width: `${defaultWidth}px` }} data-testid="welcome-text-container"> >
<h2>Welcome to {productName} 5!</h2> <Icon material={item.icon} className="box col-1" />
<a className="box col-10">
<p> {typeof item.title === "string"
To get you started we have auto-detected your clusters in your kubeconfig file and added them to the catalog, your centralized view for managing all your cloud-native resources. ? item.title
<br /><br /> : item.title()}
If you have any questions or feedback, please join our <a href={slackUrl} target="_blank" rel="noreferrer" className="link">Lens Community slack channel</a>. </a>
</p> <Icon material="navigate_next" className="box col-1" />
<ul className="block" style={{ width: `${defaultWidth}px` }} data-testid="welcome-menu-container">
{WelcomeMenuRegistry.getInstance().getItems().map((item, index) => (
<li key={index} className="flex grid-12" onClick={() => item.click()}>
<Icon material={item.icon} className="box col-1" /> <a className="box col-10">{typeof item.title === "string" ? item.title : item.title()}</a> <Icon material="navigate_next" className="box col-1" />
</li> </li>
))} ))}
</ul> </ul>
</div>
</div> </div>
</div> </div>
</div> </div>
); </div>
} );
} });