-
Notifications
You must be signed in to change notification settings - Fork 18
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Room header and copy link #34
Changes from 4 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
.Share { | ||
position: absolute; | ||
top: 0; | ||
right: 0; | ||
left: 0; | ||
margin: 0.5rem; | ||
line-height: 1.5rem; | ||
|
||
h1 { | ||
display: inline-block; | ||
font-size: 1.5rem; | ||
font-weight: 100; | ||
|
||
strong { | ||
font-weight: 600; | ||
} | ||
} | ||
|
||
input { | ||
position: absolute; | ||
left: -99999px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I know why you mentioned it's hacky now... Could we use other hacky way instead of setting the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'll try those ways we discussed about, but frankly, they look pretty much the same to me. 😉 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. OK, not a big problem, just think There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
} | ||
|
||
a { | ||
display: inline-block; | ||
margin-left: 0.5rem; | ||
border-bottom: 2px solid black; | ||
color: inherit; | ||
text-decoration: none; | ||
vertical-align: top; | ||
} | ||
|
||
[aria-label] { | ||
position: relative; | ||
} | ||
|
||
[aria-label]:hover:before { | ||
content: ' '; | ||
position: absolute; | ||
top: 50%; | ||
right: -1rem; | ||
margin-top: -0.1rem; | ||
width: 0.5rem; | ||
height: 0.5rem; | ||
background: black; | ||
transform: rotate(45deg); | ||
} | ||
|
||
[aria-label]:hover:after { | ||
content: attr(aria-label); | ||
position: absolute; | ||
margin-left: 0.7rem; | ||
padding: 0.1rem 0.4rem; | ||
border-radius: 3px; | ||
background: black; | ||
font-size: 0.5rem; | ||
color: white; | ||
white-space: nowrap; | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
import React, { Component } from 'react'; | ||
import './Share.css'; | ||
|
||
class Share extends Component { | ||
constructor(props) { | ||
super(props); | ||
this.state = { | ||
tooltip: defaultTooltip | ||
}; | ||
} | ||
|
||
handleCopy = (e) => { // eslint-disable-line | ||
e.preventDefault(); | ||
this.textInput.select(); | ||
document.execCommand('copy'); | ||
this.setState({ tooltip: 'Copied!' }); | ||
}; | ||
|
||
handleDone = (e) => { // eslint-disable-line | ||
this.setState({ tooltip: defaultTooltip }); | ||
}; | ||
|
||
render() { | ||
const { roomName } = this.props; | ||
const caption = `${process.env.REACT_APP_DOMAIN}/${roomName}`; | ||
const link = `${window.location.protocol}//${caption}`; | ||
|
||
return ( | ||
<div className="Share"> | ||
<h1>Poker4<strong>Fun</strong></h1> | ||
<input type="text" value={link} ref={(input) => { this.textInput = input; }} readOnly /> | ||
<a | ||
href={link} | ||
onClick={this.handleCopy} | ||
onMouseLeave={this.handleDone} | ||
aria-label={this.state.tooltip}> | ||
{caption}</a> | ||
</div> | ||
); | ||
} | ||
} | ||
|
||
const defaultTooltip = 'Click to copy link'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Let's move the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Hmm... I put it at the bottom because this is how React Native Tutorial done with the style declaration. I'm okay with either place, top or bottom. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yeah, let's put it to the top as we usually did like this in FE routine work. |
||
|
||
export default Share; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
import Share from './Share'; | ||
|
||
it('renders without crashing', () => { | ||
const div = document.createElement('div'); | ||
ReactDOM.render(<Share />, div); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,4 +3,8 @@ | |
justify-content: center; | ||
align-items: center; | ||
height: 100%; | ||
|
||
input { | ||
border-radius: none; | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In this way, we will always add
eslint-disable-line
to bypass this line.If you don't like
.bind(this)
, I think we can move() =>
into component likeonSubmit={() => this.handleSubmit()}
.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is false-positive, and strangely it doesn't happen every time or on every machine, please check out the issue I mentioned in the PR description. This is a bug of eslint or babel-eslint and it should be fixed in the future.
As for workarounds, there are many of them, including binding them manually in constructor. Actually the method you gave looks less appealing than that, and it seems won't work.
handleSubmit
is still not bound to the class context. I'll try this when I got time.