@cdc/editor 4.22.10-alpha.1 → 4.22.11

package/src/components/PreviewDataTable.js

@@ -1,121 +1,105 @@
-import React, { useState, useContext, useMemo, useCallback, useEffect, memo } from 'react';
-import {
-  useTable,
-  useBlockLayout,
-  useGlobalFilter,
-  useSortBy,
-  useResizeColumns,
-  usePagination
-} from 'react-table';
-import GlobalState from '../context';
-import { useDebounce } from 'use-debounce';
+import React, { useState, useContext, useMemo, useCallback, useEffect, memo } from 'react'
+import { useTable, useBlockLayout, useGlobalFilter, useSortBy, useResizeColumns, usePagination } from 'react-table'
+import GlobalState from '../context'
+import { useDebounce } from 'use-debounce'
 
 // Core
-import validateFipsCodeLength from '@cdc/core/helpers/validateFipsCodeLength';
+import validateFipsCodeLength from '@cdc/core/helpers/validateFipsCodeLength'
 
-const TableFilter = memo(({globalFilter, setGlobalFilter, disabled = false}) => {
-  const [filterValue, setFilterValue ] = useState(globalFilter);
+const TableFilter = memo(({ globalFilter, setGlobalFilter, disabled = false }) => {
+  const [filterValue, setFilterValue] = useState(globalFilter)
 
-  const [ debouncedValue ] = useDebounce(filterValue, 200);
+  const [debouncedValue] = useDebounce(filterValue, 200)
 
   useEffect(() => {
-    if('string' === typeof debouncedValue && debouncedValue !== globalFilter ) {
+    if ('string' === typeof debouncedValue && debouncedValue !== globalFilter) {
       setGlobalFilter(debouncedValue ?? '')
     }
   }, [debouncedValue])
 
-  const onChange = (e) => {
-    setFilterValue(e.target.value);
+  const onChange = e => {
+    setFilterValue(e.target.value)
   }
 
-  return (
-    <input
-    className="filter"
-    value={filterValue}
-    onChange={onChange}
-    type="search"
-    placeholder='Filter...'
-    disabled={disabled}
-    />
-  )
-});
+  return <input className='filter' value={filterValue} onChange={onChange} type='search' placeholder='Filter...' disabled={disabled} />
+})
 
-const Header = memo(({ globalFilter, data, setGlobalFilter}) => (
-  <header className="data-table-header">
+const Header = memo(({ globalFilter, data, setGlobalFilter }) => (
+  <header className='data-table-header'>
     <h2>Data Preview</h2>
     <TableFilter globalFilter={globalFilter || ''} setGlobalFilter={setGlobalFilter} disabled={null === data} />
   </header>
 ))
 
-const Footer = memo(({previousPage, nextPage, canPreviousPage, canNextPage, pageNumber, totalPages}) => (
-  <footer className="data-table-pagination">
+const Footer = memo(({ previousPage, nextPage, canPreviousPage, canNextPage, pageNumber, totalPages }) => (
+  <footer className='data-table-pagination'>
     <ul>
       <li>
-        <button onClick={() => previousPage()} className="btn btn-prev" disabled={!canPreviousPage} title="Previous Page"></button>
+        <button onClick={() => previousPage()} className='btn btn-prev' disabled={!canPreviousPage} title='Previous Page'></button>
       </li>
       <li>
-        <button onClick={() => nextPage()} className="btn btn-next" disabled={!canNextPage} title="Next Page"></button>
+        <button onClick={() => nextPage()} className='btn btn-next' disabled={!canNextPage} title='Next Page'></button>
       </li>
     </ul>
     <span>
-      Page{' '} {pageNumber} of {totalPages}
+      Page {pageNumber} of {totalPages}
     </span>
   </footer>
 ))
 
 const PreviewDataTable = ({ data }) => {
-  const [tableData, setTableData] = useState(data ?? []);
-  const {setErrors, errorMessages, config} = useContext(GlobalState);
+  const [tableData, setTableData] = useState(data ?? [])
+  const { setErrors, errorMessages, config } = useContext(GlobalState)
 
   const tableColumns = useMemo(() => {
-    const columns = tableData.columns ?? [];
-    if ( columns.length > 0 && columns.includes("") ) {
+    const columns = tableData.columns ?? []
+    if (columns.length > 0 && columns.includes('')) {
       // todo find a way to call the errors. Currently they are in DataImport.js
       // maybe these can be moved to a file? but then we need a way to add settings like size...
-      setErrors([errorMessages.emptyCols]);
+      setErrors([errorMessages.emptyCols])
     }
-    
-    return columns.map((columnName, idx) => {
-        const columnConfig = {
-          id: `column-${columnName}`,
-          accessor: row => row[columnName],
-          Header: columnName,
-          width: 250
-        };
 
-        return columnConfig
-    });
-  }, [tableData]);
+    return columns.map((columnName, idx) => {
+      const columnConfig = {
+        id: `column-${columnName}`,
+        accessor: row => row[columnName],
+        Header: columnName,
+        width: 250
+      }
+
+      return columnConfig
+    })
+  }, [tableData])
 
   // This adds a columns property just like the D3 function for JSON parsing.
-  const generateColumns = useCallback((data) => {
+  const generateColumns = useCallback(data => {
     let columns = []
 
-    data.forEach( (rowObj) => {
-      Object.keys(rowObj).forEach( (columnHeading) => {
-        if(false === columns.includes(columnHeading)) {
+    data.forEach(rowObj => {
+      Object.keys(rowObj).forEach(columnHeading => {
+        if (false === columns.includes(columnHeading)) {
           columns.push(columnHeading)
         }
       })
     })
 
     // D3 uses a weird quirk where it attaches a named property to an array. Replicating here.
-    const newData = [...data];
+    const newData = [...data]
 
-    if(Array.isArray(newData)) {
-      newData.columns = columns;
-      return newData;
+    if (Array.isArray(newData)) {
+      newData.columns = columns
+      return newData
     }
   }, [])
 
   useEffect(() => {
-    if(!data) {
-      return;
+    if (!data) {
+      return
     }
 
-    let newData = [...data];
+    let newData = [...data]
 
-    newData = generateColumns(newData);
+    newData = generateColumns(newData)
     validateFipsCodeLength(newData)
     setTableData(newData)
   }, [data, generateColumns])
@@ -132,11 +116,11 @@ const PreviewDataTable = ({ data }) => {
     canNextPage,
     pageOptions,
     nextPage,
-    previousPage,
-  } = useTable({ columns: tableColumns, data: tableData, initialState: { pageSize: 25 } }, useBlockLayout, useGlobalFilter, useSortBy, useResizeColumns, usePagination);
+    previousPage
+  } = useTable({ columns: tableColumns, data: tableData, initialState: { pageSize: 25 } }, useBlockLayout, useGlobalFilter, useSortBy, useResizeColumns, usePagination)
 
   const NoData = () => (
-    <section className="no-data-message">
+    <section className='no-data-message'>
       <section>
         <h3>No Data</h3>
         <p>Import data to preview</p>
@@ -146,121 +130,118 @@ const PreviewDataTable = ({ data }) => {
 
   const PlaceholderTable = () => {
     return (
-      <section className="no-data">
+      <section className='no-data'>
         <NoData />
-        <div className="table-container">
-          <table className="editor data-table" role="table">
-          <thead>
-              <tr role="row">
-                  <th scope="col" colSpan="1" role="columnheader">
-                  </th>
-                  <th scope="col" colSpan="1" role="columnheader">
-                  </th>
-                  <th scope="col" colSpan="1" role="columnheader">
-                  </th>
+        <div className='table-container'>
+          <table className='editor data-table' role='table'>
+            <thead>
+              <tr role='row'>
+                <th scope='col' colSpan='1' role='columnheader'></th>
+                <th scope='col' colSpan='1' role='columnheader'></th>
+                <th scope='col' colSpan='1' role='columnheader'></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr role='row'>
+                <td role='cell'></td>
+                <td role='cell'></td>
+                <td role='cell'></td>
+              </tr>
+              <tr role='row'>
+                <td role='cell'></td>
+                <td role='cell'></td>
+                <td role='cell'></td>
+              </tr>
+              <tr role='row'>
+                <td role='cell'></td>
+                <td role='cell'></td>
+                <td role='cell'></td>
               </tr>
-          </thead>
-          <tbody>
-            <tr role="row">
-                <td role="cell"></td>
-                <td role="cell"></td>
-                <td role="cell"></td>
-            </tr>
-            <tr role="row">
-                <td role="cell"></td>
-                <td role="cell"></td>
-                <td role="cell"></td>
-            </tr>
-            <tr role="row">
-                <td role="cell"></td>
-                <td role="cell"></td>
-                <td role="cell"></td>
-            </tr>
-            <tr role="row">
-                <td role="cell"></td>
-                <td role="cell"></td>
-                <td role="cell"></td>
-            </tr>
-            <tr role="row">
-                <td role="cell"></td>
-                <td role="cell"></td>
-                <td role="cell"></td>
-            </tr>
-            <tr role="row">
-                <td role="cell"></td>
-                <td role="cell"></td>
-                <td role="cell"></td>
-            </tr>
-            <tr role="row">
-                <td role="cell"></td>
-                <td role="cell"></td>
-                <td role="cell"></td>
-            </tr>
-            <tr role="row">
-                <td role="cell"></td>
-                <td role="cell"></td>
-                <td role="cell"></td>
-            </tr>
-            <tr role="row">
-                <td role="cell"></td>
-                <td role="cell"></td>
-                <td role="cell"></td>
-            </tr>
-                    <tr role="row">
-                <td role="cell"></td>
-                <td role="cell"></td>
-                <td role="cell"></td>
-            </tr>
-          </tbody>
-        </table>
+              <tr role='row'>
+                <td role='cell'></td>
+                <td role='cell'></td>
+                <td role='cell'></td>
+              </tr>
+              <tr role='row'>
+                <td role='cell'></td>
+                <td role='cell'></td>
+                <td role='cell'></td>
+              </tr>
+              <tr role='row'>
+                <td role='cell'></td>
+                <td role='cell'></td>
+                <td role='cell'></td>
+              </tr>
+              <tr role='row'>
+                <td role='cell'></td>
+                <td role='cell'></td>
+                <td role='cell'></td>
+              </tr>
+              <tr role='row'>
+                <td role='cell'></td>
+                <td role='cell'></td>
+                <td role='cell'></td>
+              </tr>
+              <tr role='row'>
+                <td role='cell'></td>
+                <td role='cell'></td>
+                <td role='cell'></td>
+              </tr>
+              <tr role='row'>
+                <td role='cell'></td>
+                <td role='cell'></td>
+                <td role='cell'></td>
+              </tr>
+            </tbody>
+          </table>
         </div>
       </section>
     )
   }
 
-  if(!data) return [<Header key="header" />, <PlaceholderTable key="table" />]
+  if (!data) return [<Header key='header' />, <PlaceholderTable key='table' />]
 
-  const footerProps = {previousPage, nextPage, canPreviousPage, canNextPage, pageNumber: pageIndex + 1, totalPages: pageOptions.length}
+  const footerProps = { previousPage, nextPage, canPreviousPage, canNextPage, pageNumber: pageIndex + 1, totalPages: pageOptions.length }
 
   const Table = () => (
     <>
-      <section className="data-table-container">
-        <div className="table-container">
-          <table className="data-table" {...getTableProps()} aria-hidden="true">
+      <section className='data-table-container'>
+        <div className='table-container'>
+          <table className='data-table' {...getTableProps()} aria-hidden='true'>
             <thead>
-              {headerGroups.map((headerGroup) => (
+              {headerGroups.map(headerGroup => (
                 <tr {...headerGroup.getHeaderGroupProps()}>
-                  {headerGroup.headers.map((column) => (
-                    <th scope="col" {...column.getHeaderProps(column.getSortByToggleProps())} className={column.isSorted ? column.isSortedDesc ? 'sort sort-desc' : 'sort sort-asc' : ''} title={column.Header}>
+                  {headerGroup.headers.map(column => (
+                    <th scope='col' {...column.getHeaderProps(column.getSortByToggleProps())} className={column.isSorted ? (column.isSortedDesc ? 'sort sort-desc' : 'sort sort-asc') : ''} title={column.Header}>
                       {column.render('Header')}
-                      <div {...column.getResizerProps()} className="resizer" />
+                      <div {...column.getResizerProps()} className='resizer' />
                     </th>
                   ))}
                 </tr>
               ))}
             </thead>
             <tbody {...getTableBodyProps()}>
-              {page.map((row) => {
-                prepareRow(row);
+              {page.map(row => {
+                prepareRow(row)
                 return (
                   <tr {...row.getRowProps()}>
-                    {row.cells.map((cell) => (
+                    {row.cells.map(cell => (
                       <td {...cell.getCellProps()} title={cell.value}>
                         {cell.render('Cell')}
                       </td>
                     ))}
                   </tr>
-                );
+                )
               })}
             </tbody>
           </table>
         </div>
       </section>
       <Footer {...footerProps} />
-  </>
+    </>
   )
 
-  return [<Header key="header" data={data} setGlobalFilter={setGlobalFilter} globalFilter={globalFilter} />, <Table key="table" />]
-};
+  return [<Header key='header' data={data} setGlobalFilter={setGlobalFilter} globalFilter={globalFilter} />, <Table key='table' />]
+}
 
-export default PreviewDataTable;
+export default PreviewDataTable

package/src/components/TabPane.js

@@ -1,5 +1,5 @@
-import React from 'react';
+import React from 'react'
 
-const TabPane = ({ children, className = '' }) => <div className={`tab-content ${className}`}>{children}</div>;
+const TabPane = ({ children, className = '' }) => <div className={`tab-content ${className}`}>{children}</div>
 
-export default TabPane;
+export default TabPane

package/src/components/Tabs.js

@@ -1,62 +1,55 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState, useContext, useEffect } from 'react'
 
 const Tabs = ({ children, startingTab = 0, className, changeTab = null }) => {
-  const [active, setActive] = useState(startingTab);
+  const [active, setActive] = useState(startingTab)
 
-  let containerClassName = 'tabs';
+  let containerClassName = 'tabs'
 
-  if(className) {
-    containerClassName = `tabs ${className}`;
+  if (className) {
+    containerClassName = `tabs ${className}`
   }
 
   const setActiveTab = (disabled, index) => {
-    if(false === disabled) {
+    if (false === disabled) {
       setActive(index)
     }
   }
 
   useEffect(() => {
-    if(startingTab > -1) {
+    if (startingTab > -1) {
       setActive(startingTab)
     }
   }, [startingTab])
 
-  const tabs = children.map(({props}, i) => {
-    
+  const tabs = children.map(({ props }, i) => {
     let classes = 'nav-item'
 
     let disabled = props.disableRule || false
 
-    if(disabled) {
-      classes += ' disabled';
+    if (disabled) {
+      classes += ' disabled'
     }
 
-    if(i === active) {
-      classes += ' active';
+    if (i === active) {
+      classes += ' active'
     }
 
     return (
-    <li
-      onClick={() => setActiveTab(disabled, i)}
-      key={props.title}
-      className={classes}
-    >
-      {props.icon}
-      {props.title}
-    </li>
+      <li onClick={() => setActiveTab(disabled, i)} key={props.title} className={classes}>
+        {props.icon}
+        {props.title}
+      </li>
     )
   })
 
   return (
     <>
       <nav className={containerClassName}>
-        <ul className="nav nav-fill">
-          {tabs}
-        </ul>
+        <ul className='nav nav-fill'>{tabs}</ul>
       </nav>
       {children[active]}
     </>
-  );
-};
+  )
+}
 
-export default Tabs;
+export default Tabs

package/src/components/modal/Confirmation.js

@@ -1,14 +1,17 @@
-import React from 'react';
+import React from 'react'
 
-export const ConfirmationModal
- = (props) => {
-	return (
-		<>
-            <p className="message">{props.message}</p>
-            <div className="confirmation-buttons">
-                <div className="btn btn-inline" onClick={props.onCancel}>No</div>
-                <div className="btn btn-inline" onClick={props.onConfirm}>Yes</div>
-            </div>
-		</>
-	);
-};
+export const ConfirmationModal = props => {
+  return (
+    <>
+      <p className='message'>{props.message}</p>
+      <div className='confirmation-buttons'>
+        <div className='btn btn-inline' onClick={props.onCancel}>
+          No
+        </div>
+        <div className='btn btn-inline' onClick={props.onConfirm}>
+          Yes
+        </div>
+      </div>
+    </>
+  )
+}

package/src/components/modal/Modal.js

@@ -1,51 +1,39 @@
-import React, { useEffect } from "react";
+import React, { useEffect } from 'react'
 // import FocusLock from "react-focus-lock";
-import ReactDOM from "react-dom";
-import CloseIcon from '../../assets/icons/close.svg';
+import ReactDOM from 'react-dom'
+import CloseIcon from '../../assets/icons/close.svg'
 
-export const Modal = ({
-  isShown,
-  hide,
-  modalContent,
-  headerText
-}) => {
-  const onKeyDown = (event) => {
+export const Modal = ({ isShown, hide, modalContent, headerText }) => {
+  const onKeyDown = event => {
     if (event.keyCode === 27 && isShown) {
-      hide();
+      hide()
     }
-  };
+  }
 
   useEffect(() => {
-    isShown
-      ? (document.body.style.overflow = "hidden")
-      : (document.body.style.overflow = "unset");
-    document.addEventListener("keydown", onKeyDown, false);
+    isShown ? (document.body.style.overflow = 'hidden') : (document.body.style.overflow = 'unset')
+    document.addEventListener('keydown', onKeyDown, false)
     return () => {
-      document.removeEventListener("keydown", onKeyDown, false);
-    };
-  }, [isShown]);
+      document.removeEventListener('keydown', onKeyDown, false)
+    }
+  }, [isShown])
 
   const modal = (
     <>
-      <div className="modal-backdrop" onClick={hide} />
+      <div className='modal-backdrop' onClick={hide} />
       {/* <FocusLock> */}
-        <div className="modal-wrapper"
-          aria-modal
-          aria-labelledby={headerText}
-          tabIndex={-1}
-          role="dialog"
-        >
-          <div className="modal">
-            <div className="modal-header">
-              <strong>{headerText}</strong>
-              <CloseIcon className="modal-close" onClick={hide} />
-            </div>
-            <div className="modal-content">{modalContent}</div>
+      <div className='modal-wrapper' aria-modal aria-labelledby={headerText} tabIndex={-1} role='dialog'>
+        <div className='modal'>
+          <div className='modal-header'>
+            <strong>{headerText}</strong>
+            <CloseIcon className='modal-close' onClick={hide} />
           </div>
+          <div className='modal-content'>{modalContent}</div>
         </div>
+      </div>
       {/* </FocusLock> */}
     </>
-  );
+  )
 
-  return isShown ? ReactDOM.createPortal(modal, document.body) : null;
-};
+  return isShown ? ReactDOM.createPortal(modal, document.body) : null
+}

package/src/components/modal/UseModal.js

@@ -1,10 +1,10 @@
-import { useState } from 'react';
+import { useState } from 'react'
 
 export const useModal = () => {
-	const [isShown, setIsShown] = useState(false);
-	const toggle = () => setIsShown(!isShown);
-	return {
-		isShown,
-		toggle,
-	};
-};
+  const [isShown, setIsShown] = useState(false)
+  const toggle = () => setIsShown(!isShown)
+  return {
+    isShown,
+    toggle
+  }
+}

package/src/context.js

@@ -1,7 +1,7 @@
-import { createContext } from 'react';
+import { createContext } from 'react'
 
-const GlobalState = createContext();
+const GlobalState = createContext()
 
-GlobalState.displayName = 'GlobalState';
+GlobalState.displayName = 'GlobalState'
 
-export default GlobalState;
+export default GlobalState

package/src/index.html

@@ -2,10 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <style type="text/css">
       body {
         margin: 0;

package/src/index.js

@@ -1,17 +1,16 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import CdcEditor from './CdcEditor';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import CdcEditor from './CdcEditor'
 
 // Allow URL query to preselect a tab in standalone mode
-const standaloneParams = new URLSearchParams(window.location.search);
+const standaloneParams = new URLSearchParams(window.location.search)
 
-let activeTab = Number.parseInt( standaloneParams.get('active') ) - 1 || null;
+let activeTab = Number.parseInt(standaloneParams.get('active')) - 1 || null
 const domContainer = document.querySelector('.react-container')
 
-
 ReactDOM.render(
   <React.StrictMode>
     <CdcEditor startingTab={activeTab} containerEl={domContainer} />
   </React.StrictMode>,
   document.querySelector('.react-container')
-);
+)