Implemented Custom Input Component

Author: sasank-tadepalli

package-lock.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "chart.js": "^3.3.2",
+    "font-awesome": "^4.7.0",
     "react": "^17.0.2",
     "react-chartjs-2": "^3.0.3",
     "react-dom": "^17.0.2",

package.json

@@ -17,7 +17,7 @@ function App() {
   const [color, setColor] = useState("red");
   const [completed, setCompleted] = useState([]);
   const [size, setSize] = useState(10);
-  const [speed, setSpeed] = useState(1);
+  const [speed, setSpeed] = useState(3);
   const [algType, setAlgType] = useState(0);
 
   useEffect(() => {
@@ -44,7 +44,7 @@ function App() {
           setIsSorting(false);
         }
       },
-      (500 * c) / speed,
+      200 * c * speed,
       [...arr],
       i,
       j,

src/App.js

@@ -3,13 +3,9 @@
   height: 3rem;
   border-radius: 10px;
   border: none;
-  background-color: rgba(199, 199, 204, 0.8);
   cursor: pointer;
   font-size: 1rem;
-}
-
-.button:hover {
-  background-color: rgba(199, 199, 204, 1);
+  background-color: transparent;
 }
 
 .sort {
@@ -23,7 +19,5 @@
 }
 
 .button:disabled {
-  background-color: rgb(142, 142, 147);
-  color: black;
   cursor: not-allowed;
 }

src/components/Button/Button.css

@@ -11,19 +11,25 @@
 }
 
 .navbar div {
-  width: 60%;
+  width: 70%;
   display: flex;
   align-items: center;
-  justify-content: space-around;
+  justify-content: space-evenly;
+}
+
+.navbar div * {
+  margin: 1%;
 }
 
 @media (max-width: 800px) {
   .navbar {
     display: block;
     text-align: left;
+    padding-top: 2%;
   }
 
   .navbar div {
+    margin: 3% auto;
     display: grid;
     width: 100%;
     grid-template-columns: 1fr 1fr;

src/components/Navbar/Navbar.css

@@ -16,6 +16,7 @@ const Navbar = (props) => {
           value={props.algType}
           onChangeHandler={props.algChangeHandler}
           values={[0, 1, 2]}
+          index="0"
           options={["Bubble Sort", "Selection Sort", "Insertion Sort"]}
           isDisabled={props.isSorting}
         />
@@ -24,14 +25,18 @@ const Navbar = (props) => {
           onChangeHandler={props.sizeChangeHandler}
           values={[5, 10, 25, 50, 75, 100]}
           options={[5, 10, 25, 50, 75, 100]}
+          index="1"
           isDisabled={props.isSorting}
+          title="Size"
         />
         <Select
           value={props.speed}
           onChangeHandler={props.speedChangeHandler}
-          values={[0.25, 0.5, 1, 2, 4]}
+          values={[5, 4, 3, 2, 1]}
+          index="2"
           options={["0.25x", "0.5x", "1x", "2x", "4x"]}
           isDisabled={props.isSorting}
+          title="Speed"
         />
       </div>
     </div>

src/components/Navbar/Navbar.js

@@ -1,17 +1,50 @@
-.select {
-  /* background-color: rgb(218, 218, 218); */
-  background-color: transparent;
-  border-radius: 10px;
-  padding-left: 1%;
+.select button:disabled {
+  cursor: not-allowed;
+}
+
+#select {
+  width: 10rem;
   height: 3rem;
+  position: relative;
+  text-align: center;
+}
+
+#select button:disabled {
+  cursor: not-allowed;
+}
+
+#select button {
+  width: 99%;
+  height: 100%;
+  background-color: transparent;
+  border: none;
   font-size: 1rem;
-  width: 10rem;
-  border: 1px solid rgb(218, 218, 218);
-  margin: 1%;
-  outline: none;
   cursor: pointer;
+  padding: 0;
 }
 
-.select:disabled {
-  cursor: not-allowed;
+.options {
+  position: absolute;
+  background-color: rgb(255, 255, 255);
+  z-index: 10;
+  width: 100%;
+  top: 100%;
+  left: 10%;
+}
+
+.options li {
+  list-style: none;
+  width: 100%;
+  height: 3rem;
+  cursor: pointer;
+  border-top: 1px solid black;
+  text-align: left;
+  padding: 10%;
+}
+
+.options li:hover {
+  background-color: lightgreen;
+}
+
+@media (max-width: 400px) {
 }

src/components/Select/Select.css

@@ -1,22 +1,56 @@
 import "./Select.css";
+import { useState, useRef, useEffect } from "react";
+import "font-awesome/css/font-awesome.min.css";
 
 const Select = (props) => {
+  const [showList, setShowList] = useState(false);
+  const [index, setIndex] = useState(props.index);
+  const ref = useRef();
+
+  useEffect(() => {
+    document.addEventListener("click", outsideClickHandler);
+    return () => {
+      document.removeEventListener("click", outsideClickHandler);
+    };
+  });
+
+  const outsideClickHandler = (e) => {
+    if (ref.current && !ref.current.contains(e.target)) {
+      setShowList(false);
+    }
+  };
+
+  const showListHandler = () => {
+    setShowList((prevState) => !prevState);
+  };
+
+  const listClickHandler = (e, i) => {
+    setIndex(i);
+    setShowList(false);
+    props.onChangeHandler(e);
+    console.log(e.target.value);
+  };
+
   let options = props.options.map((option, i) => {
     return (
-      <option value={props.values[i]} key={option}>
+      <li
+        value={props.values[i]}
+        key={option}
+        onClick={(e) => listClickHandler(e, i)}
+      >
         {option}
-      </option>
+      </li>
     );
   });
+
   return (
-    <select
-      value={props.value}
-      onChange={props.onChangeHandler}
-      disabled={props.isDisabled}
-      className="select"
-    >
-      {options}
-    </select>
+    <div id="select" ref={ref}>
+      <button onClick={showListHandler} disabled={props.isDisabled}>{`${
+        props.title ? props.title + ":" : ""
+      } ${props.options[index]}`}</button>
+      <i className="fa fa-caret-down"></i>
+      {showList && <ul className="options">{options}</ul>}
+    </div>
   );
 };