fixes copy bug and changes button

This commit is contained in:
jessop 2019-11-04 07:50:51 -05:00 committed by Sean Yesmunt
parent c0640012a9
commit f5be136d95
2 changed files with 7 additions and 6 deletions

View file

@ -154,7 +154,7 @@ export class FormField extends React.PureComponent<Props> {
input = ( input = (
<fieldset-section> <fieldset-section>
<label htmlFor={name}>{label}</label> <label htmlFor={name}>{label}</label>
<textarea type={type} id={name} maxLength={textAreaMaxLength} {...inputProps} /> <textarea type={type} id={name} maxLength={textAreaMaxLength} ref={this.input} {...inputProps} />
{countInfo} {countInfo}
</fieldset-section> </fieldset-section>
); );

View file

@ -21,17 +21,20 @@ export default function EmbedArea(props: Props) {
const streamUrl = generateStreamUrl(name, claimId, LBRY_TV_API); const streamUrl = generateStreamUrl(name, claimId, LBRY_TV_API);
let embedText = `<iframe width="560" height="315" src="${streamUrl}" allowfullscreen></iframe>`; let embedText = `<iframe width="560" height="315" src="${streamUrl}" allowfullscreen></iframe>`;
function copyToClipboard() { function copyToClipboard() {
const topRef = input.current; const topRef = input.current;
console.log(topRef);
if (topRef && topRef.input && topRef.input.current) { if (topRef && topRef.input && topRef.input.current) {
topRef.input.current.select(); topRef.input.current.select();
document.execCommand('copy');
doToast({ message: snackMessage || 'Embed link copied' });
} }
document.execCommand('copy');
} }
function onFocus() { function onFocus() {
// We have to go a layer deep since the input is inside the form component // We have to go a layer deep since the input is inside the form component
const topRef = input.current; const topRef = input && input.current;
if (topRef && topRef.input && topRef.input.current) { if (topRef && topRef.input && topRef.input.current) {
topRef.input.current.select(); topRef.input.current.select();
} }
@ -45,16 +48,14 @@ export default function EmbedArea(props: Props) {
label={label} label={label}
value={embedText || ''} value={embedText || ''}
ref={input} ref={input}
readOnly
onFocus={onFocus} onFocus={onFocus}
/> />
<div className="card__actions card__actions--center"> <div className="card__actions card__actions--center">
<Button <Button
icon={ICONS.COPY} icon={ICONS.COPY}
button="inverse" button="link"
onClick={() => { onClick={() => {
copyToClipboard(); copyToClipboard();
doToast({ message: snackMessage || 'Embed link copied' });
}} }}
/> />
</div> </div>