Commit 74edcc97 authored by Laura, Jason R's avatar Laura, Jason R
Browse files

Merge branch 'portal' into 'main' 

Side panel fixes: Portal, MUI-X Date

Closes #8, #16, and #12

See merge request asc/geostac!5
parents deb46355 cbb13ccc

package.json

+2 −1
Original line number Diff line number Diff line
@@ -81,8 +81,8 @@ 
    "@fortawesome/free-brands-svg-icons": "^6.2.0",

    "@fortawesome/react-fontawesome": "^0.2.0",

    "@mui/icons-material": "^5.4.1",

    "@mui/lab": "^5.0.0-alpha.68",

    "@mui/material": "^5.4.1",

    "@mui/x-date-pickers": "^5.0.4",

    "@svgr/webpack": "^6.2.1",

    "@trussworks/react-uswds": "^3.1.0",

    "autoprefixer": "^10.4.2",
@@ -93,6 +93,7 @@ 
    "proj4leaflet": "^1.0.2",

    "react": "^17.0.2",

    "react-dom": "^17.0.2",

    "react-reverse-portal": "^2.1.1",

    "wicket": "^1.3.8"

  }

}

src/components/container/GeoStacApp.jsx

+0 −4
Original line number Diff line number Diff line
@@ -2,10 +2,6 @@ import React from "react"; 
import ConsoleAppBar from "../presentational/ConsoleAppBar.jsx";

import MapContainer from "./MapContainer.jsx";

import QueryConsole from "../presentational/QueryConsole.jsx";

import CreditsDisplay from "../presentational/CreditsDisplay.jsx";

import SearchAndFilterInput from "../presentational/SearchAndFilterInput.jsx";

import ArrowLeftIcon from "@mui/icons-material/ArrowLeft";

import FootprintResults from "../presentational/FootprintResults.jsx";

import { getFeatures } from "../../js/ApiJsonCollection";

import DisplayGeoTiff from "../presentational/DisplayGeoTiff.jsx";

import Sidebar from "../presentational/Sidebar.jsx";

src/components/presentational/FootprintResults.jsx

+0 −1
Original line number Diff line number Diff line
@@ -69,7 +69,6 @@ export default function FootprintResults(props) { 
        <span id="panelSectionTitle">Footprint Results</span>

        <span className="resultHeaderCheck">

          <Checkbox

            defaultChecked

            onChange={props.changeLayout}

            icon={<CloseFullscreenIcon />}

            checkedIcon={<OpenInFullIcon />}

src/components/presentational/SearchAndFilterInput.jsx

+4 −4
Original line number Diff line number Diff line
@@ -9,9 +9,9 @@ import TextField from "@mui/material/TextField"; 
// CSS

import { alpha } from "@mui/material/styles";

// Date Range

import AdapterDateFns from "@mui/lab/AdapterDateFns";

import LocalizationProvider from "@mui/lab/LocalizationProvider";

import DatePicker from "@mui/lab/DatePicker";

import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";

import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";

import { DatePicker } from "@mui/x-date-pickers/DatePicker";

// Filter By "This" checkboxes

import Checkbox from "@mui/material/Checkbox";

// Sort By Drop Down
@@ -422,7 +422,7 @@ export default function SearchAndFilterInput(props) { 
        </div>

      </div>

      <div className="panelSectionHeader">

        <div>

        <div className="panelItem">

          Displaying {numberReturned} of {maxNumberFootprints} Results

        </div>

      </div>

src/components/presentational/Sidebar.jsx

+28 −37
Original line number Diff line number Diff line
@@ -2,6 +2,11 @@ import React from "react"; 
import SearchAndFilterInput from "./SearchAndFilterInput.jsx";

import ArrowLeftIcon from "@mui/icons-material/ArrowLeft";

import FootprintResults from "./FootprintResults.jsx";

import {

  createHtmlPortalNode,

  InPortal,

  OutPortal,

} from "react-reverse-portal";



const css = {

  expanded: {
@@ -30,6 +35,16 @@ const css = { 
 * @component

 */

export default function Sidebar(props) {

  const footprintResultPortalNode = React.useMemo(

    () =>

      createHtmlPortalNode({

        attributes: {

          style: "min-height: 0; display: flex;",

        },

      }),

    []

  );



  const [showSidePanel, setShowSidePanel] = React.useState(true);

  const [sidePanelSubStyle, setSidePanelSubStyle] = React.useState(css.shown);
@@ -43,55 +58,31 @@ export default function Sidebar(props) { 
    setExpandResults((expandResults) => !expandResults);

  };



  if (showSidePanel) {

    if (expandResults) {

  return (

    <>

      <div id="right-bar" className="scroll-parent">

        <div id="sidebar-collapsed" onClick={showHideSort}>

          <ArrowLeftIcon />

          Sort and Filter

          <ArrowLeftIcon />

        </div>

        <div

          style={showSidePanel ? css.stacked : css.hidden}

          className="scroll-parent"

        >

          <SearchAndFilterInput

            target={props.target}

            footprintNavClick={props.footprintNavClick}

          />

          <FootprintResults changeLayout={handlePanelLayout} />

          {!expandResults && <OutPortal node={footprintResultPortalNode} />}

        </div>

      );

    }

    return (

      <div id="right-bar" className="scroll-parent">

        <div id="sidebar-collapsed" onClick={showHideSort}>

          <ArrowLeftIcon />

          Sort and Filter

          <ArrowLeftIcon />

        {expandResults && showSidePanel && (

          <OutPortal node={footprintResultPortalNode} />

        )}

      </div>

        <div style={css.stacked} className="scroll-parent">

          <SearchAndFilterInput

            target={props.target}

            footprintNavClick={props.footprintNavClick}

          />

      <InPortal node={footprintResultPortalNode}>

        <FootprintResults changeLayout={handlePanelLayout} />

        </div>

      </div>

    );

  }



  return (

    <div id="right-bar" className="scroll-parent">

      <div id="sidebar-collapsed" onClick={showHideSort}>

        <ArrowLeftIcon />

        Sort and Filter

        <ArrowLeftIcon />

      </div>

      <div style={css.hidden} className="scroll-parent">

        <SearchAndFilterInput

          target={props.target}

          footprintNavClick={props.footprintNavClick}

        />

        <FootprintResults changeLayout={handlePanelLayout} />

      </div>

    </div>

      </InPortal>

    </>

  );

}