Changed the bg color for selected div

maddhruv · Oct 17, 2020 · b89e4cf · b89e4cf
1 parent a776c81
commit b89e4cf
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/src/panel/OperationSection.tsx b/src/panel/OperationSection.tsx
@@ -1,21 +1,28 @@
-import React from "react";
+import React, {useState} from "react";
 
 import { Header, Body, Operation } from "./styled";
 import { useRequestLog } from "./useRequestLog";
 
 const OperationSection = () => {
   const requestsLog = useRequestLog();
+  const [selectedIndex, setSelectedIndex] = useState<number>(null)
 
   const { requests, handleSelect } = requestsLog;
 
+  const handleOperationSelect = (index: number) => {
+    handleSelect(index)
+    setSelectedIndex(index)
+  }
+
   return (
     <div>
       <Header>Operations</Header>
       <Body>
         {requests.map((req, index) => (
           <Operation
             key={`${req.operation}-${index}`}
-            onClick={() => handleSelect(index)}
+            onClick={() => handleOperationSelect(index)}
+            selected={selectedIndex === index}
           >
             {index + 1}. {req.operation}
           </Operation>

diff --git a/src/panel/styled.ts b/src/panel/styled.ts
@@ -1,4 +1,4 @@
-import styled, { createGlobalStyle } from "styled-components";
+import styled, { createGlobalStyle, css } from "styled-components";
 
 const colors = {
   D200: "#505050",
@@ -63,7 +63,7 @@ export const Body = styled.div`
   padding: 6px;
 `;
 
-export const Operation = styled.div`
+export const Operation = styled.div<{ selected: boolean }>`
   padding-left: 6px;
   padding: 3px;
   border-bottom: 1px solid #000;
@@ -74,6 +74,12 @@ export const Operation = styled.div`
   &:active {
     background: ${colors.D300} !important;
   }
+  ${({ selected }) => css`
+  ${selected &&
+  css`
+  background: ${colors.D300};
+  `}
+`}
 `;
 
 export const ToolbarWrapper = styled.div`