Skip to content

Commit 7f2a86c

Browse files
yashovardhanyashovardhan
committed
Add condition to preview unity webgl example in a separate tab
1 parent bd8ba8d commit 7f2a86c

2 files changed

Lines changed: 84 additions & 21 deletions

File tree

‎src/pages/quick-start/builder/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ const sdks = {
110110
MPC_CORE_KIT_REACT_NATIVE: mpc_core_kit_react_native,
111111
};
112112

113-
const embed_links = {
113+
export const embed_links = {
114114
// PNP Modal SDK
115115
PNP_MODAL_ANGULAR: "https://w3a.link/pnp-angular-modal-quick-start",
116116
PNP_MODAL_HTML: "https://w3a.link/pnp-vanillajs-modal-quick-start",

‎src/pages/quick-start/index.tsx‎

Lines changed: 83 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import MoonLoader from "react-spinners/BeatLoader";
1212

1313
import SEO from "../../components/SEO";
1414
import IntegrationBuilderCodeView from "../../theme/IntegrationBuilderCodeView";
15-
import builder from "./builder";
15+
import builder, { embed_links } from "./builder";
1616
import { CORE_KIT, PNP } from "./builder/choices";
1717
import styles from "./styles.module.css";
1818

@@ -22,7 +22,9 @@ const getWindowLocation = () => {
2222
};
2323

2424
const getDefaultBuilderOptions = () => {
25-
const defaultOpts = Object.fromEntries(Object.entries(builder.options).map(([key, option]) => [key, option.default]));
25+
const defaultOpts = Object.fromEntries(
26+
Object.entries(builder.options).map(([key, option]) => [key, option.default]),
27+
);
2628
const url = new URL(getWindowLocation());
2729

2830
const urlOpts = {};
@@ -41,14 +43,21 @@ const getURLFromBuilderOptions = (opts: Record<string, string>, stepIndex): stri
4143
};
4244

4345
export default function IntegrationBuilderPage({ files }: { files: Record<string, any> }) {
44-
const [builderOptions, setBuilderOptions] = useState<Record<string, string>>(getDefaultBuilderOptions());
46+
const [builderOptions, setBuilderOptions] = useState<Record<string, string>>(
47+
getDefaultBuilderOptions(),
48+
);
4549
const [isLinkCopied, setLinkCopied] = useState<boolean>(false);
4650
const [builderView, setBuilderView] = useState<boolean>(true);
4751
const [showPreviewModal, setShowPreviewModal] = useState<boolean>(false);
4852
const url = new URL(getWindowLocation());
49-
const [stepIndex, setStepIndex] = useState(parseInt(url.searchParams.get("stepIndex") || "0", 10));
53+
const [stepIndex, setStepIndex] = useState(
54+
parseInt(url.searchParams.get("stepIndex") || "0", 10),
55+
);
5056
const [loading, setLoading] = useState<boolean>(false);
51-
const integration = useMemo(() => builder.build(builderOptions, files, stepIndex), [builderOptions, files, stepIndex]);
57+
const integration = useMemo(
58+
() => builder.build(builderOptions, files, stepIndex),
59+
[builderOptions, files, stepIndex],
60+
);
5261
const [selectedFilename, setSelectedFilename] = useState(integration.filenames[0]);
5362

5463
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
@@ -117,7 +126,11 @@ export default function IntegrationBuilderPage({ files }: { files: Record<string
117126
}
118127
};
119128

120-
const togglePreviewModal = () => {
129+
const togglePreviewModal = (link?: string) => {
130+
if (link === embed_links.PNP_UNITY_WEBGL) {
131+
window.open(link, "_blank");
132+
return;
133+
}
121134
if (showPreviewModal) {
122135
setShowPreviewModal(false);
123136
} else {
@@ -135,7 +148,9 @@ export default function IntegrationBuilderPage({ files }: { files: Record<string
135148
if (builder.options[optionKey]) {
136149
const check = builder.options[optionKey].choices.flatMap((choice) => choice.key);
137150
if (!check.includes(builderOptions[optionKey])) {
138-
const option = Object.fromEntries(Object.entries(builder.options).map(([key, optioning]) => [key, optioning.default]));
151+
const option = Object.fromEntries(
152+
Object.entries(builder.options).map(([key, optioning]) => [key, optioning.default]),
153+
);
139154
onChangeDropdown(optionKey, option[optionKey]);
140155
}
141156
}
@@ -157,7 +172,10 @@ export default function IntegrationBuilderPage({ files }: { files: Record<string
157172
return (
158173
<div key={key} className={styles.list}>
159174
<h3>{option.displayName}</h3>
160-
<select value={builderOptions[key]} onChange={(event) => onChangeDropdown(key, event.target.value)}>
175+
<select
176+
value={builderOptions[key]}
177+
onChange={(event) => onChangeDropdown(key, event.target.value)}
178+
>
161179
{option.choices.map((value) => (
162180
<option value={value.key} key={key}>
163181
{value.displayName}
@@ -174,13 +192,18 @@ export default function IntegrationBuilderPage({ files }: { files: Record<string
174192
{option.choices.map((value) => (
175193
<>
176194
{value.key === PNP && (
177-
<div className={builderOptions[key] === PNP ? styles.selectedCard : styles.card} onClick={() => onChangeDropdown(key, value.key)}>
195+
<div
196+
className={builderOptions[key] === PNP ? styles.selectedCard : styles.card}
197+
onClick={() => onChangeDropdown(key, value.key)}
198+
>
178199
<h5 className={styles.cardTitle}>{value.displayName}</h5>
179200
</div>
180201
)}
181202
{value.key === CORE_KIT && (
182203
<div
183-
className={builderOptions[key] === CORE_KIT ? styles.selectedCard : styles.card}
204+
className={
205+
builderOptions[key] === CORE_KIT ? styles.selectedCard : styles.card
206+
}
184207
onClick={() => onChangeDropdown(key, value.key)}
185208
>
186209
<h5 className={styles.cardTitle}>{value.displayName}</h5>
@@ -214,12 +237,22 @@ export default function IntegrationBuilderPage({ files }: { files: Record<string
214237
/>
215238
<div className={styles.container}>
216239
{showPreviewModal && (
217-
<div className={styles.previewModalContainer} onClick={togglePreviewModal}>
240+
<div className={styles.previewModalContainer} onClick={() => togglePreviewModal()}>
218241
<div className={styles.previewModal} onClick={handleModalClick}>
219242
<div className={styles.optionsHeader}>
220243
<h2 className={styles.optionsHeaderText}>Preview</h2>
221-
<button className={styles.hideButton} onClick={togglePreviewModal} type="button">
222-
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
244+
<button
245+
className={styles.hideButton}
246+
onClick={() => togglePreviewModal()}
247+
type="button"
248+
>
249+
<svg
250+
width="20"
251+
height="21"
252+
viewBox="0 0 20 21"
253+
fill="none"
254+
xmlns="http://www.w3.org/2000/svg"
255+
>
223256
<path
224257
fill-rule="evenodd"
225258
clip-rule="evenodd"
@@ -236,7 +269,9 @@ export default function IntegrationBuilderPage({ files }: { files: Record<string
236269
<MoonLoader
237270
loading={loading}
238271
size={20}
239-
color={getComputedStyle(document.body).getPropertyValue("--ifm-color-primary")}
272+
color={getComputedStyle(document.body).getPropertyValue(
273+
"--ifm-color-primary",
274+
)}
240275
aria-label="Loading"
241276
speedMultiplier={0.85}
242277
/>
@@ -263,7 +298,13 @@ export default function IntegrationBuilderPage({ files }: { files: Record<string
263298
{builderView ? (
264299
<>
265300
Hide
266-
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
301+
<svg
302+
width="20"
303+
height="21"
304+
viewBox="0 0 20 21"
305+
fill="none"
306+
xmlns="http://www.w3.org/2000/svg"
307+
>
267308
<path
268309
fill-rule="evenodd"
269310
clip-rule="evenodd"
@@ -275,7 +316,13 @@ export default function IntegrationBuilderPage({ files }: { files: Record<string
275316
) : (
276317
<>
277318
Expand{" "}
278-
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
319+
<svg
320+
width="20"
321+
height="21"
322+
viewBox="0 0 20 21"
323+
fill="none"
324+
xmlns="http://www.w3.org/2000/svg"
325+
>
279326
<path
280327
fill-rule="evenodd"
281328
clip-rule="evenodd"
@@ -289,16 +336,28 @@ export default function IntegrationBuilderPage({ files }: { files: Record<string
289336
</div>
290337

291338
<div className={styles.optionsContainer}>
292-
<div className={styles.builderContainer}>{Object.entries(builder.options).map(([key, option]) => optionRender(key, option))}</div>
339+
<div className={styles.builderContainer}>
340+
{Object.entries(builder.options).map(([key, option]) => optionRender(key, option))}
341+
</div>
293342

294343
<div className={styles.utilityButtonsContainer}>
295344
{integration.embedLink && (
296-
<button className={styles.previewButton} onClick={togglePreviewModal} type="button">
345+
<button
346+
className={styles.previewButton}
347+
onClick={() => togglePreviewModal(integration.embedLink)}
348+
type="button"
349+
>
297350
Preview
298351
</button>
299352
)}
300353
<button className={styles.copyButton} onClick={onClickCopyLink} type="button">
301-
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
354+
<svg
355+
width="17"
356+
height="17"
357+
viewBox="0 0 17 17"
358+
fill="none"
359+
xmlns="http://www.w3.org/2000/svg"
360+
>
302361
<path
303362
fill-rule="evenodd"
304363
clip-rule="evenodd"
@@ -337,7 +396,11 @@ export default function IntegrationBuilderPage({ files }: { files: Record<string
337396
<IntegrationBuilderCodeView
338397
filenames={integration.filenames}
339398
fileContents={integration.files}
340-
highlight={steps[stepIndex] && steps[stepIndex].pointer?.filename === selectedFilename && steps[stepIndex].pointer?.range}
399+
highlight={
400+
steps[stepIndex] &&
401+
steps[stepIndex].pointer?.filename === selectedFilename &&
402+
steps[stepIndex].pointer?.range
403+
}
341404
selectedFilename={selectedFilename}
342405
onClickFilename={(filename: string) => setSelectedFilename(filename)}
343406
/>

0 commit comments

Comments
 (0)