Fix #3124: Warn if a code sandbox demo is not available (#3165)

* Fix #3124: Warn if a code sandbox demo is not available * Fix #3124: Ability to hide certain code sandbox props
primefaces · Aug 18, 2022 · 3ca820b · 3ca820b
1 parent ae93645
commit 3ca820b
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 9 deletions.
diff --git a/components/doc/common/docactions.js b/components/doc/common/docactions.js
@@ -2,12 +2,14 @@ import React, { useEffect, useContext } from 'react';
 import { useRef } from 'react';
 import { Button } from '../../lib/button/Button';
 import { Menu } from '../../lib/menu/Menu';
+import { Toast } from '../../lib/toast/Toast';
 import DomHandler from '../../lib/utils/DomHandler';
 import { useLiveEditor } from './liveeditor';
 import AppContentContext from '../../../components/layout/appcontentcontext';
 
 export const DocActions = (props) => {
     const menu = useRef(null);
+    const toast = useRef(null);
     const liveEditor = useRef(null);
     const context = useContext(AppContentContext);
 
@@ -20,19 +22,23 @@ export const DocActions = (props) => {
     const items = [
         {
             label: 'Hooks Source Demo',
-            command: () => liveEditor.current.postSandboxParameters('hooks')
+            className: props.showHooksSource === false ? 'hidden' : '',
+            command: () => liveEditor.current.postSandboxParameters('hooks', toast)
         },
         {
             label: 'Class Source Demo',
-            command: () => liveEditor.current.postSandboxParameters('class')
+            className: props.showClassSource === false ? 'hidden' : '',
+            command: () => liveEditor.current.postSandboxParameters('class', toast)
         },
         {
             label: 'TS Source Demo',
-            command: () => liveEditor.current.postSandboxParameters('ts')
+            className: props.showTsSource === false ? 'hidden' : '',
+            command: () => liveEditor.current.postSandboxParameters('ts', toast)
         },
         {
             label: 'Browser Source Demo',
-            command: () => liveEditor.current.postSandboxParameters('browser')
+            className: props.showBrowserSource === false ? 'hidden' : '',
+            command: () => liveEditor.current.postSandboxParameters('browser', toast)
         }
     ];
 
@@ -61,6 +67,8 @@ export const DocActions = (props) => {
     }
 
     return (
+        <>
+        <Toast ref={toast} />
         <div className="app-demoactions flex align-items-end justify-content-end mt-3">
             <Button className="p-button-text p-button-rounded p-button-plain p-button-lg p-button-icon-only" onClick={toggleMenu}>
                 <svg role="img" viewBox="0 0 24 24" width={17} height={17} fill={'var(--text-color-secondary)'} style={{ display: 'block' }}>
@@ -76,6 +84,7 @@ export const DocActions = (props) => {
             <Button icon="pi pi-info-circle" className="p-button-text p-button-rounded p-button-plain p-button-lg ml-2" onClick={scrollToDocs} ></Button>
             <Menu ref={menu} model={items} popup style={{ width: '14rem' }} />
         </div>
+        </>
     )
 }
 
diff --git a/components/doc/common/liveeditor.js b/components/doc/common/liveeditor.js
@@ -382,6 +382,9 @@ ${extIndexCSS}
 
     const getSandboxParameters = (sourceType) => {
         let { name, sources, dependencies } = props;
+        if (!sources[sourceType]) {
+            return null;
+        }
         let extension = '.js';
         let serviceExtension = extension;
         let extDependencies = dependencies || {};
@@ -485,14 +488,19 @@ ${extIndexCSS}
     }
 
     return {
-        postSandboxParameters(sourceType) {
+        postSandboxParameters(sourceType, toast) {
+            const sandboxParameters = getSandboxParameters(sourceType);
+            if (!sandboxParameters) {
+                toast.current.show({severity: 'warn', summary: 'Not Available', detail: 'That code sandbox demonstration is not available!'});
+                return;
+            }
             fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', {
                 method: "POST",
                 headers: {
                     'Content-Type': 'application/json',
                     'Accept': 'application/json'
                 },
-                body: JSON.stringify(getSandboxParameters(sourceType))
+                body: JSON.stringify(sandboxParameters)
             })
                 .then(response => response.json())
                 .then(data => window.open(`https://codesandbox.io/s/${data.sandbox_id}`, '_blank'));

diff --git a/pages/formik/index.js b/pages/formik/index.js
@@ -98,7 +98,7 @@ const FormikFormDemo = () => {
                     <p>PrimeReact components can be easily used/integrated with <a href="https://formik.org/">Formik</a>. In this example, a register panel is simulated using Formik.</p>
                 </div>
 
-                <DocActions github="formik/index.js" />
+                <DocActions github="formik/index.js" showClassSource={false} showBrowserSource={false}/>
             </div>
             <div className="content-section implementation form-demo">
                 <Dialog visible={showMessage} onHide={() => setShowMessage(false)} position="top" footer={dialogFooter} showHeader={false} breakpoints={{ '960px': '80vw' }} style={{ width: '30vw' }}>

diff --git a/pages/reactfinalform/index.js b/pages/reactfinalform/index.js
@@ -90,7 +90,7 @@ const ReactFinalFormDemo = () => {
 
                 </div>
 
-                <DocActions github="validate/index.js" />
+                <DocActions github="validate/index.js" showClassSource={false} showBrowserSource={false}/>
             </div>
 
             <div className="content-section implementation form-demo">

diff --git a/pages/reacthookform/index.js b/pages/reacthookform/index.js
@@ -73,7 +73,7 @@ const ReactHookFormDemo = () => {
                     <p>PrimeReact components can be easily used/integrated with <a href="https://react-hook-form.com/">React Hook Form</a>. In this example, a register panel is simulated using React Hook Form.</p>
                 </div>
 
-                <DocActions github="validate/index.js" />
+                <DocActions github="validate/index.js" showClassSource={false} showBrowserSource={false} />
             </div>
 
             <div className="content-section implementation form-demo">