poprawkiv2

This commit is contained in:
wrzesinski-hubert 2020-06-09 16:27:32 +02:00
parent cbc7c6fcfa
commit a08345b756
4 changed files with 59 additions and 31 deletions

View File

@ -8,7 +8,6 @@ import RightBar from "./components/RightBar";
function App() {
const [isOpenTransfer, setOpenTransfer] = useState(false);
const [isPolish, setLanguage] = useState(true);
const [text, setText] = useState("");
return (
@ -20,11 +19,9 @@ function App() {
handleTransfer={(e) => {
setOpenTransfer(!isOpenTransfer);
}}
handleLanguage={(e) => {
setLanguage(!isPolish);
onLangChange={(e) => {
console.log(e);
}}
isOpenTransfer={isOpenTransfer}
isPolish={isPolish}
/>
<Transfer
isOpen={isOpenTransfer}

View File

@ -12,16 +12,14 @@ import MenuItem from "@material-ui/core/MenuItem";
interface TopBarProps {
handleTransfer: (e: React.MouseEvent) => void;
handleLanguage: (e: React.MouseEvent) => void;
onLangChange: (lang:boolean) => void;
textChangeHandler: (e: React.ChangeEvent<HTMLInputElement>) => void;
isOpenTransfer: boolean;
isPolish: boolean;
}
interface TopBarState {
isOpenProfile: boolean;
anchorEl: null | HTMLElement;
isPolish: boolean;
}
export default class TopBar extends React.Component<TopBarProps, TopBarState> {
@ -29,11 +27,12 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
super(props);
this.handleProfile = this.handleProfile.bind(this);
this.handleClose = this.handleClose.bind(this);
this.handleLanguage = this.handleLanguage.bind(this);
this.onLangChange = this.onLangChange.bind(this);
this.handleTransfer = this.handleTransfer.bind(this);
this.state = {
isOpenProfile: false,
anchorEl:null,
isPolish:true,
};
}
@ -45,8 +44,11 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
this.props.handleTransfer(e);
}
handleLanguage(e: React.MouseEvent) {
this.props.handleLanguage(e);
onLangChange(e: React.MouseEvent) {
this.setState({
isPolish:!this.state.isPolish,
})
this.props.onLangChange(this.state.isPolish);
}
handleProfile(e: React.MouseEvent) {
@ -95,8 +97,8 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
<img
className="top-bar__icon"
alt="change_language"
src={this.props.isPolish ? UK : PL}
onClick={this.handleLanguage}
src={this.state.isPolish ? UK : PL}
onClick={this.onLangChange}
/>
<img
className="top-bar__icon"

View File

@ -1,16 +1,38 @@
.wrapper{
display: flex;
justify-content: center;
text-align: center;
align-items: center;
height: 80vh;
.wrapper {
display: flex;
justify-content: center;
text-align: center;
align-items: center;
}
.transfer{
display: flex;
width: 80%;
height: 70%;
background-color: purple;
align-items: center;
justify-content: center;
}
.transfer {
display: flex;
flex-wrap: wrap;
width: 80%;
height: 70%;
padding-top: 40px;
background: rgba(255, 220, 97, 0.48);
border: 1px solid #000000;
justify-content: center;
&__text {
font-family: Lato;
font-size: 50px;
}
&__input{
width: 300px;
height: 45px;
background: #D7A700;
}
&__give{
flex-grow: 1;
}
&__recieve{
flex-grow: 1;
}
&__proposition{
flex-grow: 4;
}
&__add{
}
}

View File

@ -34,9 +34,16 @@ export default class Transfer extends React.Component<
aria-describedby="simple-modal-description"
>
<div className="transfer">
<button type="button" onClick={this.handleClose}>
Close Modal
</button>
<div className="transfer__give">
<div className="transfer__text">Oddam</div>
<input className="transfer__input"></input>
</div>
<div className="transfer__receive">
<div className="transfer__text">Przyjmę</div>
<input className="transfer__input"></input>
</div>
<div className="transfer__proposition"></div>
<button className="transfer__add">chuj</button>
</div>
</Modal>
</div>