diff --git a/src/components/controls/panelChevron.tsx b/src/components/controls/panelChevron.tsx
deleted file mode 100644
index 087864f70..000000000
--- a/src/components/controls/panelChevron.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from "react";
-import styled from 'styled-components';
-import { FaChevronRight, FaChevronDown } from "react-icons/fa";
-
-const Container = styled.span`
- padding-right: 6px;
- color: ${(props) => props.theme.color};
-`
-
-type Props = {
- show: boolean
-
- /** Run this callback only and ignore any parent callbacks. */
- onClick: () => void
-}
-
-/**
- * An interactive chevron to show/hide a panel's options.
- */
-export const PanelChevron = ({ show, onClick: isolatedOnClick }: Props) => {
- const icon = show ? :
-
- function onClick(event: React.MouseEvent) {
- event.stopPropagation();
- isolatedOnClick();
- }
-
- return (
-
- {icon}
-
- )
-}
diff --git a/src/components/controls/panelHeader.tsx b/src/components/controls/panelHeader.tsx
index a74185c64..7e0f5d821 100644
--- a/src/components/controls/panelHeader.tsx
+++ b/src/components/controls/panelHeader.tsx
@@ -4,7 +4,6 @@ import { togglePanelDisplay } from "../../actions/panelDisplay";
import { HeaderContainer } from "./styles";
import { PanelToggle, On } from "./panelToggle";
import { AnnotatedTitle, Mobile, Title, Tooltip } from "./annotatedTitle";
-import { PanelChevron } from "./panelChevron";
/** Panel identifier used internally. */
export type PanelId = string;
@@ -15,44 +14,25 @@ type Props = {
tooltip?: Tooltip
panelIsVisible: On
mobile: Mobile
-
- /** Indicates whether there are options for the panel. */
- hasOptions: boolean
-
- /** Indicates options visibility. */
- optionsAreVisible: boolean
-
- /** Update options visibility. */
- setOptionsAreVisible: React.Dispatch>
}
/**
* A header used by all panel controls, containing an interactive title.
*/
-export const PanelHeader = ({ panel, title, tooltip, panelIsVisible, hasOptions, optionsAreVisible, setOptionsAreVisible, mobile }: Props) => {
+export const PanelHeader = ({ panel, title, tooltip, panelIsVisible, mobile }: Props) => {
const dispatch = useAppDispatch();
function togglePanelVisibility() {
dispatch(togglePanelDisplay(panel))
}
- function toggleOptionsVisibility() {
- setOptionsAreVisible(!optionsAreVisible);
- }
-
return (
// Clicking anywhere in the element, even whitespace, will toggle panel visibility.
-
- {hasOptions && !mobile &&
- }
-
-
+
diff --git a/src/components/controls/panelSection.tsx b/src/components/controls/panelSection.tsx
index 9c5a11f82..1826da855 100644
--- a/src/components/controls/panelSection.tsx
+++ b/src/components/controls/panelSection.tsx
@@ -24,14 +24,6 @@ export const PanelSection = ({ panel, title, tooltip, options=undefined, mobile
const panelIsVisible = panelsToDisplay.includes(panel)
- // Initially, panel visibility determines options visibility.
- const [optionsAreVisible, setOptionsAreVisible] = React.useState(panelIsVisible);
-
- // Subsequent panel visibility updates also determines options visibility.
- React.useEffect(() => {
- setOptionsAreVisible(panelIsVisible)
- }, [panelIsVisible])
-
return (
- {optionsAreVisible && options}
+ {panelIsVisible && options}
);
};
diff --git a/src/components/controls/styles.js b/src/components/controls/styles.js
index dff8554db..8e4dcbae9 100644
--- a/src/components/controls/styles.js
+++ b/src/components/controls/styles.js
@@ -50,7 +50,7 @@ export const PanelSectionContainer = styled.div`
`;
export const TitleAndIconContainer = styled.span`
- display: inline-flex;
+ display: flex;
align-items: center;
`;