-
Notifications
You must be signed in to change notification settings - Fork 982
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Revert "updates the expandable component" (#5556)
the expandables aren't appearing correctly on the live site so this reverts this pr https://docs.getdbt.com/docs/collaborate/dbt-explorer-faqs Reverts #5531 
- Loading branch information
Showing
4 changed files
with
37 additions
and
132 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,88 +1,51 @@ | ||
| /* eslint-disable */ | ||
|
|
||
| import React, { useState, useEffect } from 'react'; | ||
| import React, { useState } from 'react'; | ||
| import styles from './styles.module.css'; | ||
|
|
||
| function slugify(text) { | ||
| return text.toString().toLowerCase() | ||
| .normalize('NFD') // normalize to nfd unicode form | ||
| .replace(/[\u0300-\u036f]/g, '') // remove diacritics | ||
| .replace(/\s+/g, '-') // replace spaces with - | ||
| .replace(/[^\w\-]+/g, '') // remove all non-word chars | ||
| .replace(/\-\-+/g, '-') // replace multipl - with a single - | ||
| .replace(/^-+/, '') // trim - from the start | ||
| .replace(/-+$/, ''); // trim - from the end | ||
| .normalize('NFD') // Normalize to NFD Unicode form | ||
| .replace(/[\u0300-\u036f]/g, '') // Remove diacritics | ||
| .replace(/\s+/g, '-') // Replace spaces with - | ||
| .replace(/[^\w\-]+/g, '') // Remove all non-word chars | ||
| .replace(/\-\-+/g, '-') // Replace multiple - with single - | ||
| .replace(/^-+/, '') // Trim - from start | ||
| .replace(/-+$/, ''); // Trim - from end | ||
| } | ||
|
|
||
| function Expandable({ children, alt_header = null }) { | ||
| if (!alt_header) { return null; } | ||
| function expandable({ children, alt_header = null }) { | ||
| if(!alt_header) { return null; } | ||
| const [isOn, setOn] = useState(false); | ||
| // generate a slug from the alt_header | ||
| const anchorId = slugify(alt_header); | ||
|
|
||
| const handleToggleClick = (event) => { | ||
| event.preventDefault(); | ||
| setOn(current => !current); | ||
| }; | ||
|
|
||
| const handleCopyClick = (event) => { | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| const url = `${window.location.href.split('#')[0]}#${anchorId}`; | ||
| navigator.clipboard.writeText(url).then(() => { | ||
| showCopyPopup(); | ||
| }); | ||
| }; | ||
|
|
||
| const showCopyPopup = () => { | ||
| const popup = document.createElement('div'); | ||
| popup.classList.add('copy-popup'); | ||
| popup.innerText = 'Link copied!'; | ||
|
|
||
| // Add close button ('x') | ||
| const closeButton = document.createElement('span'); | ||
| closeButton.classList.add('close-button'); | ||
| closeButton.innerHTML = ' ×'; // '×' symbol for 'x' | ||
| closeButton.addEventListener('click', () => { | ||
| if (document.body.contains(popup)) { | ||
| document.body.removeChild(popup); | ||
| } | ||
| }); | ||
| popup.appendChild(closeButton); | ||
|
|
||
| document.body.appendChild(popup); | ||
|
|
||
| setTimeout(() => { | ||
| if (document.body.contains(popup)) { | ||
| document.body.removeChild(popup); | ||
| } | ||
| }, 3000); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| if (window.location.hash === `#${anchorId}`) { | ||
| setOn(true); | ||
| const element = document.getElementById(anchorId); | ||
| if (element) { | ||
| element.scrollIntoView({ behavior: 'smooth' }); | ||
| } | ||
| } | ||
| }, [anchorId]); | ||
|
|
||
| return ( | ||
| <div id={anchorId} className={`${styles.expandableContainer} `}> | ||
| <div className={styles.header} onClick={handleToggleClick}> | ||
| <div id={anchorId} className={`${styles.expandableContainer} ${styles.local} expandable-anchor anchor`}> | ||
| <a | ||
| href={`#${anchorId}`} | ||
| className={styles.link} | ||
| onClick={handleToggleClick} | ||
| role="button" | ||
| tabIndex="0" | ||
| > | ||
| <span className={`${styles.toggle} ${isOn ? styles.toggleDown : styles.toggleRight}`}></span> | ||
| | ||
| <span className={styles.headerText}> | ||
| {alt_header} | ||
| </span> | ||
| <span onClick={handleCopyClick} className={styles.copyIcon}></span> | ||
| </div> | ||
| <div style={{ display: isOn ? 'block' : 'none' }} className={styles.body}> | ||
| <span className={styles.headerText}>{alt_header}</span> | ||
| </a> | ||
| <div | ||
| style={{ display: isOn ? 'block' : 'none' }} | ||
| className={styles.body} | ||
| > | ||
| {children} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default Expandable; | ||
| export default expandable; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters