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

View File

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

View File

@ -1,16 +1,38 @@
.wrapper{ .wrapper {
display: flex; display: flex;
justify-content: center;
text-align: center; justify-content: center;
align-items: center; text-align: center;
height: 80vh; align-items: center;
} }
.transfer{ .transfer {
display: flex; display: flex;
width: 80%; flex-wrap: wrap;
height: 70%; width: 80%;
background-color: purple; height: 70%;
align-items: center; padding-top: 40px;
justify-content: center; 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" aria-describedby="simple-modal-description"
> >
<div className="transfer"> <div className="transfer">
<button type="button" onClick={this.handleClose}> <div className="transfer__give">
Close Modal <div className="transfer__text">Oddam</div>
</button> <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> </div>
</Modal> </Modal>
</div> </div>