@cdc/core 4.24.2 → 4.24.4

package/components/Layout/components/Responsive.tsx

@@ -0,0 +1,184 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react'
+import '../styles/editor-utils.scss'
+import '../styles/editor.scss'
+
+import Icon from '../../ui/Icon'
+
+const breakpoints = [
+  '360', // xxs (mobile) 0 - 360
+  '480', // xs
+  '768', // sm
+  '960', // md
+  '1170', // lg
+  '1280' // xl
+]
+
+const os = navigator.userAgent.indexOf('Win') !== -1 ? 'Win' : navigator.userAgent.indexOf('Mac') !== -1 ? 'MacOS' : null
+
+const Responsive = ({ children, isEditor }) => {
+  const [displayPanel, setDisplayPanel] = useState(false)
+  const [displayGrid, setDisplayGrid] = useState(false)
+  const [viewportPreview, setViewportPreview] = useState(null)
+  const [rotateAnimation, setRotateAnimation] = useState(false)
+  const [showConfirm, setShowConfirm] = useState(false)
+  const [previewDimensions, setPreviewDimensions] = useState<{ width: number; height: number }>(null)
+
+  const resetIcon = useRef(null)
+  const editorPanelRef = useRef(null)
+  const componentContainerRef = useRef(null)
+
+  const viewportPreviewController = useCallback(
+    breakpoint => {
+      return setViewportPreview(prevState => (prevState !== breakpoint ? breakpoint : null))
+    },
+    [viewportPreview]
+  )
+
+  const onKeypress = key => {
+    if (key.code === 'KeyL' && key.ctrlKey) setDisplayPanel(display => !display)
+    const viewportCommandKey = os === 'MacOS' ? key.metaKey : key.altKey
+    if (viewportCommandKey) {
+      let keyIndex = key.key
+
+      // Validates that the hotkey pressed is a number, and that
+      // the number is within the range of the provided breakpoint list range.
+      if (!isNaN(keyIndex)) {
+        if (keyIndex <= breakpoints.length) {
+          key.preventDefault()
+          viewportPreviewController(breakpoints[keyIndex - 1])
+        }
+      }
+    }
+
+    if (!viewportCommandKey) {
+      if (key.code === 'KeyG') setDisplayGrid(display => !display)
+      if (key.code === 'KeyR') resetPreview()
+    }
+  }
+
+  // Set and clean up the event listener for the hotkeys
+  useEffect(() => {
+    document.addEventListener('keydown', onKeypress)
+    return () => document.removeEventListener('keydown', onKeypress)
+  }, [])
+
+  //Reset Viewport Preview
+  const resetPreview = useCallback(() => {
+    if (!rotateAnimation && resetIcon.current) {
+      setViewportPreview(null)
+      setRotateAnimation(true)
+      setDisplayGrid(false)
+      resetIcon.current.style.transition = 'transform 800ms cubic-bezier(0.16, 1, 0.3, 1)'
+      resetIcon.current.style.transform = 'rotate(-360deg)'
+
+      const timeoutShow = setTimeout(() => {
+        setRotateAnimation(false)
+        resetIcon.current.style.transition = null
+        resetIcon.current.style.transform = 'rotate(0deg)'
+        resetIcon.current.style.transform = null
+      }, 400)
+
+      return () => clearTimeout(timeoutShow)
+    }
+  }, [rotateAnimation])
+
+  // Toggle the grid display with the viewport preview
+  useEffect(() => {
+    return viewportPreview ? setDisplayGrid(true) : setDisplayGrid(false)
+  }, [viewportPreview])
+
+  // Observe and set editor component widths
+  useEffect(() => {
+    if (!componentContainerRef.current) return
+
+    let resizeObserver = new ResizeObserver(entries => {
+      for (let entry of entries) {
+        let { width, height } = entry.contentRect
+        setPreviewDimensions({ width, height })
+      }
+    })
+
+    resizeObserver.observe(componentContainerRef.current)
+
+    return () => {
+      if (!resizeObserver) return
+      resizeObserver.disconnect()
+      resizeObserver = null
+    }
+  })
+
+  const onBackClick = () => setDisplayPanel(!displayPanel)
+
+  if (!isEditor || !displayPanel) return children
+
+  return (
+    <div className='cove-editor__content' data-grid={displayGrid || null}>
+      <div className='cove-editor__content-wrap--x' style={viewportPreview ? { maxWidth: viewportPreview + 'px', minWidth: 'unset' } : null}>
+        <div className='cove-editor__content-wrap--y'>
+          <div className='cove-editor-utils__breakpoints--px'>
+            {displayGrid && displayPanel && (
+              <>
+                {Math.round(previewDimensions.width)}
+                <span className='mx-1' style={{ fontSize: '0.675rem' }}>
+                  ✕
+                </span>
+                {Math.round(previewDimensions.height)}
+              </>
+            )}
+          </div>
+          <div className='cove-editor__grid-caret--top' ref={componentContainerRef}>
+            <div className='cove-editor__grid-caret--bottom'>{children}</div>
+          </div>
+        </div>
+      </div>
+      <div className='cove-editor-utils__hotkeys'>
+        <div className='cove-editor-utils__hotkeys--left'>
+          <p className={displayPanel ? 'hotkey--active' : null}>Editor</p>
+          <p className={displayGrid ? 'hotkey--active' : null}>Grid</p>
+          <p className={rotateAnimation ? 'hotkey--active' : null}>Reset</p>
+          <p className={viewportPreview ? 'hotkey--active' : null}>View</p>
+        </div>
+        <div className='cove-editor-utils__hotkeys--right'>
+          <p className={displayPanel ? 'hotkey--active' : null}>esc</p>
+          <p className={displayGrid ? 'hotkey--active' : null}>G</p>
+          <p className={rotateAnimation ? 'hotkey--active' : null}>R</p>
+          <p className={viewportPreview ? 'hotkey--active' : null}>
+            {os === 'MacOS' ? <Icon style={{ marginRight: '0.25rem' }} display='command' size={12} /> : 'Alt'} + {viewportPreview ? breakpoints.indexOf(viewportPreview) + 1 : `[1 - ${breakpoints.length}]`}
+          </p>
+        </div>
+      </div>
+
+      <div className='cove-editor-utils__breakpoints'>
+        <ul className={`cove-editor-utils__breakpoints-list${viewportPreview ? ' has-active' : ''}`}>
+          <button
+            className='cove-editor-utils__breakpoints-item'
+            onClick={() => {
+              setDisplayGrid(display => !display)
+            }}
+          >
+            <div className='cove-editor-utils__breakpoints-grid'>
+              <Icon display='grid' />
+            </div>
+          </button>
+          {breakpoints.map((breakpoint, index) => (
+            <button className={`cove-editor-utils__breakpoints-item${viewportPreview === breakpoint ? ' active' : ''}`} onClick={() => viewportPreviewController(breakpoint)} key={index}>
+              {breakpoint}px
+            </button>
+          ))}
+          <button
+            className='cove-editor-utils__breakpoints-item'
+            onClick={() => {
+              resetPreview()
+            }}
+          >
+            <div className='cove-editor-utils__breakpoints-reset' ref={resetIcon}>
+              <Icon display='rotateLeft' />
+            </div>
+          </button>
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+export default Responsive

package/components/Layout/components/Sidebar/components/Sidebar.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import './sidebar.styles.scss'
+
+type SidebarProps = {
+  // whether or not the viz is within a dashboard
+  isDashboard: boolean
+  // show/hide the sidebar
+  displayPanel: boolean
+  // sidebarTitle
+  title: string
+  // inner content
+  children: React.ReactNode
+  // on arrow toggle
+  onBackClick: () => void
+}
+
+const Sidebar: React.FC<SidebarProps> = props => {
+  const { displayPanel = false, isDashboard = false, title = 'Configure Visualization', children, onBackClick } = props
+
+  const getSectionClasses = () => {
+    const sectionClasses = ['editor-panel', 'cove', 'sidebar']
+    if (!displayPanel) sectionClasses.push('hidden')
+    if (isDashboard) sectionClasses.push('dashboard')
+    return sectionClasses
+  }
+
+  const getButtonClasses = () => {
+    const buttonClasses = []
+    if (displayPanel) buttonClasses.push('editor-panel__toggle')
+    if (!displayPanel) buttonClasses.push('collapsed', 'editor-panel__toggle')
+    return buttonClasses
+  }
+
+  return (
+    <>
+      <button className={getButtonClasses().join(' ')} title={displayPanel ? `Collapse Editor` : `Expand Editor`} onClick={onBackClick}></button>
+      <section className={getSectionClasses().join(' ')}>
+        <h2 className='editor-panel__title'>{title}</h2>
+        <section className='form-container' data-html2canvas-ignore>
+          {children}
+        </section>
+      </section>
+    </>
+  )
+}
+
+export default Sidebar