guziki
This commit is contained in:
wrzesinski-hubert
parent
28b6869ad5
commit
8990ee2837
5
package-lock.json
generated
5
package-lock.json
generated
@ -3133,11 +3133,6 @@
|
||||
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
|
||||
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
|
||||
},
|
||||
"bootstrap": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.0.tgz",
|
||||
"integrity": "sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA=="
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||
|
||||
35
src/App.tsx
35
src/App.tsx
@ -1,15 +1,32 @@
|
||||
import React from "react";
|
||||
import TopBar from "./components/TopBar/"
|
||||
import Transfer from "./components/Transfer/"
|
||||
import React, { useState } from "react";
|
||||
import TopBar from "./components/TopBar/";
|
||||
import Transfer from "./components/Transfer/";
|
||||
import "./App.scss";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<TopBar/>
|
||||
<Transfer/>
|
||||
</div>
|
||||
);
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
const [text, setText] = useState("");
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<TopBar
|
||||
textChangeHandler={(e) => {
|
||||
setText(e.target.value);
|
||||
}}
|
||||
handleOpen={(e) => {
|
||||
setOpen(!isOpen);
|
||||
}}
|
||||
isOpen={isOpen}
|
||||
/>
|
||||
<Transfer
|
||||
isOpen={isOpen}
|
||||
handleClose={(e) => {
|
||||
setOpen(!isOpen);
|
||||
}}
|
||||
/>
|
||||
<h1>{text}</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@ -13,36 +13,37 @@
|
||||
align-items: center;
|
||||
flex-grow: 0.5;
|
||||
justify-content: flex-start;
|
||||
|
||||
&-image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
&__logo-image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
&__input {
|
||||
&-div {
|
||||
width: 70%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 3;
|
||||
}
|
||||
|
||||
&__input-div {
|
||||
width: 70%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 3;
|
||||
}
|
||||
|
||||
&__input-field {
|
||||
width: 96%;
|
||||
}
|
||||
|
||||
&__icon-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
flex-grow: 1.5;
|
||||
&-field {
|
||||
width: 96%;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 50px;
|
||||
cursor: pointer;
|
||||
&-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
flex-grow: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 870px) {
|
||||
.top-bar__tekst {
|
||||
display: none;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -3,13 +3,12 @@ import Modal from "@material-ui/core/Modal";
|
||||
import "./index.scss";
|
||||
|
||||
interface TransferProps {
|
||||
names?: string;
|
||||
}
|
||||
|
||||
interface TransferState {
|
||||
handleClose: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
||||
isOpen: boolean;
|
||||
}
|
||||
|
||||
interface TransferState {}
|
||||
|
||||
export default class Transfer extends React.Component<
|
||||
TransferProps,
|
||||
TransferState
|
||||
@ -17,20 +16,14 @@ export default class Transfer extends React.Component<
|
||||
constructor(props: TransferProps) {
|
||||
super(props);
|
||||
|
||||
this.handleOpen = this.handleOpen.bind(this);
|
||||
this.handleClose = this.handleClose.bind(this);
|
||||
this.state = {
|
||||
isOpen: false,
|
||||
isOpen: true,
|
||||
};
|
||||
}
|
||||
|
||||
handleOpen(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
|
||||
this.setState({
|
||||
isOpen: true,
|
||||
});
|
||||
}
|
||||
|
||||
handleClose(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
|
||||
this.props.handleClose(e);
|
||||
this.setState({
|
||||
isOpen: false,
|
||||
});
|
||||
@ -39,22 +32,18 @@ export default class Transfer extends React.Component<
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<button type="button" onClick={this.handleOpen}>
|
||||
Open Modal
|
||||
</button>
|
||||
<Modal
|
||||
className="wrapper"
|
||||
open={this.state.isOpen}
|
||||
className="wrapper"
|
||||
open={this.props.isOpen}
|
||||
onClose={this.handleClose}
|
||||
aria-labelledby="simple-modal-title"
|
||||
aria-describedby="simple-modal-description"
|
||||
>
|
||||
<div className="transfer">
|
||||
<button type="button" onClick={this.handleClose}>
|
||||
Close Modal
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="transfer">
|
||||
<button type="button" onClick={this.handleClose}>
|
||||
Close Modal
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1 +0,0 @@
|
||||
dupa
|
||||
Loading…
Reference in New Issue
Block a user