guziki

src/components/TopBar/index.tsx

@@ -1,10 +1,42 @@
-import React from "react";
+import React, { ChangeEvent } from "react";
 import "./index.scss";
 import Input from "@material-ui/core/Input";
 import SearchIcon from "@material-ui/icons/Search";
 import CloseIcon from "@material-ui/icons/Close";
 
-export default class TopBar extends React.Component {
+interface TopBarProps {
+  handleOpen: (e: React.MouseEvent) => void;
+  textChangeHandler: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  isOpen: boolean;
+}
+
+interface TopBarState {}
+
+export default class TopBar extends React.Component<TopBarProps, TopBarState> {
+  constructor(props: TopBarProps) {
+    super(props);
+
+    this.handleOpen = this.handleOpen.bind(this);
+    this.state = {
+      isOpen: false,
+    };
+  }
+
+  handleOpen(e: React.MouseEvent) {
+    this.props.handleOpen(e);
+    this.setState({
+      isOpen: true,
+    });
+  }
+
+  handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    this.props.textChangeHandler(e);
+  }
+
+  funkcja() {
+    alert("chuj");
+  }
+
   render() {
     return (
       <div className="top-bar">
@@ -17,29 +49,35 @@ export default class TopBar extends React.Component {
           <div className="top-bar__tekst"> plan na plan </div>
         </div>
         <div className="top-bar__input-div">
-            <SearchIcon fontSize="large"></SearchIcon>
-            <Input
-              placeholder="Wyszukaj..."
-              inputProps={{ "aria-label": "description" }}
-              className="top-bar__input-field"
-            />
-            <CloseIcon fontSize="large"></CloseIcon>
+          <SearchIcon fontSize="large"></SearchIcon>
+          <Input
+            placeholder="Wyszukaj..."
+            inputProps={{ "aria-label": "description" }}
+            className="top-bar__input-field"
+            onChange={(e) =>
+              this.handleChange(e as ChangeEvent<HTMLInputElement>)
+            }
+          />
+          <CloseIcon fontSize="large"></CloseIcon>
         </div>
         <div className="top-bar__icon-box">
           <img
             className="top-bar__icon"
-            alt="logo"
+            alt="transfer"
             src="https://plannaplan.pl/img/transfer.png"
+            onClick={this.handleOpen}
           />
           <img
             className="top-bar__icon"
-            alt="logo"
+            alt="change_language"
             src="https://plannaplan.pl/img/UK.png"
+            onClick={this.funkcja}
           />
           <img
             className="top-bar__icon"
-            alt="logo"
+            alt="profile"
             src="https://plannaplan.pl/img/user.png"
+            onClick={this.funkcja}
           />
         </div>
       </div>