fix: replace incorrect or bad usages on styled-components (#222)

Some warning appears on browser's developer tools when opening console. Replace some codes with styled-components practices.
ueokande · Oct 1, 2023 · a0cfea1 · a0cfea1
1 parent 8e0f987
commit a0cfea1
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 18 deletions.
diff --git a/src/console/completion/components/CompletionItem.tsx b/src/console/completion/components/CompletionItem.tsx
@@ -2,17 +2,17 @@ import React from "react";
 import styled from "styled-components";
 
 const Container = styled.li<{
-  shown: boolean;
-  icon?: string;
-  highlight: boolean;
+  $shown: number;
+  $icon?: string;
+  $highlight: number;
 }>`
-  background-image: ${({ icon }) =>
-    typeof icon !== "undefined" ? "url(" + icon + ")" : "unset"};
-  background-color: ${({ highlight, theme }) =>
-    highlight ? theme.select?.background : theme.background};
-  color: ${({ highlight, theme }) =>
-    highlight ? theme.select?.foreground : theme.foreground};
-  display: ${({ shown }) => (shown ? "block" : "none")};
+  background-image: ${({ $icon }) =>
+    typeof $icon !== "undefined" ? "url(" + $icon + ")" : "unset"};
+  background-color: ${({ $highlight, theme }) =>
+    $highlight ? theme.select?.background : theme.background};
+  color: ${({ $highlight, theme }) =>
+    $highlight ? theme.select?.foreground : theme.foreground};
+  display: ${({ $shown }) => ($shown ? "block" : "none")};
   padding-left: 1.8rem;
   background-position: 0 center;
   background-size: contain;
@@ -43,10 +43,23 @@ interface Props extends React.HTMLAttributes<HTMLElement> {
   icon?: string;
 }
 
-const CompletionItem: React.FC<Props> = (props) => (
-  <Container aria-labelledby={`completion-item-${props.primary}`} {...props}>
-    <Primary id={`completion-item-${props.primary}`}>{props.primary}</Primary>
-    <Secondary>{props.secondary}</Secondary>
+const CompletionItem: React.FC<Props> = ({
+  shown,
+  highlight,
+  primary,
+  secondary,
+  icon,
+  ...props
+}) => (
+  <Container
+    aria-labelledby={`completion-item-${primary}`}
+    $shown={Number(shown)}
+    $icon={icon}
+    $highlight={Number(highlight)}
+    {...props}
+  >
+    <Primary id={`completion-item-${primary}`}>{primary}</Primary>
+    <Secondary>{secondary}</Secondary>
   </Container>
 );
 

diff --git a/src/console/completion/components/CompletionTitle.tsx b/src/console/completion/components/CompletionTitle.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import styled from "styled-components";
 
-const Li = styled.li<{ shown: boolean }>`
-  display: ${({ shown }) => (shown ? "display" : "none")};
+const Li = styled.li<{ $shown: number }>`
+  display: ${({ $shown }) => ($shown ? "block" : "none")};
   background-color: ${({ theme }) => theme.title?.background};
   color: ${({ theme }) => theme.title?.foreground};
   list-style: none;
@@ -16,8 +16,10 @@ interface Props extends React.HTMLAttributes<HTMLElement> {
   title: string;
 }
 
-const CompletionTitle: React.FC<Props> = (props) => (
-  <Li {...props}>{props.title}</Li>
+const CompletionTitle: React.FC<Props> = ({ shown, title, ...props }) => (
+  <Li $shown={Number(shown)} {...props}>
+    {title}
+  </Li>
 );
 
 export default CompletionTitle;