Add clipboard hooks - first approach #85
Conversation
| .then((permissionStatus: any) => { | ||
| // Will be 'granted', 'denied' or 'prompt': | ||
| if (permissionStatus.state === 'granted') { | ||
| resolve('Permission granted.'); |
There was a problem hiding this comment.
I think that the resolved value should be a boolean, returning false on failure.
| @@ -0,0 +1,72 @@ | |||
| export default function useClipboard() { | |||
| const checkForPermission = (type: PermissionName): Promise<string> => { | |||
There was a problem hiding this comment.
This function may be put outside of the useClipboard function (just above it), in order to avoid re-instantiating it on every render.
There was a problem hiding this comment.
On a second thought, checkForPermission may be moved to 'utils.ts', in order to be reused by useDeviceMotion.
| @@ -0,0 +1,72 @@ | |||
| export default function useClipboard() { | |||
| const checkForPermission = (type: PermissionName): Promise<string> => { | |||
| return new Promise((resolve, reject) => { | |||
| navigator.permissions | ||
| .query({ | ||
| name: type, | ||
| }) |
There was a problem hiding this comment.
This should be put on a single line to improve legibility.
| const cut = (element: HTMLInputElement) => { | ||
| checkForPermission('clipboard-write' as PermissionName) | ||
| .then(() => { | ||
| element.select(); | ||
| document.execCommand('cut'); | ||
| element.value = ''; | ||
| element.blur(); | ||
| }) | ||
| .catch((error: string) => console.error(error)); | ||
| }; | ||
|
|
||
| const paste = (element: HTMLInputElement) => { | ||
| checkForPermission('clipboard-read' as PermissionName) | ||
| .then(() => { | ||
| element.focus(); | ||
| document.execCommand('paste'); | ||
| }) | ||
| .catch((error: string) => console.error(error)); | ||
| }; | ||
|
|
||
| const copy = (text: string) => { | ||
| checkForPermission('clipboard-write' as PermissionName) | ||
| .then(() => { | ||
| if (navigator.clipboard) { | ||
| navigator.clipboard.writeText(text); | ||
| } else { | ||
| const tempInput = document.createElement('input'); | ||
| document.body.appendChild(tempInput); | ||
| tempInput.setAttribute('id', 'temp-input'); | ||
| (document.getElementById( | ||
| 'temp-input', | ||
| ) as HTMLInputElement).value = text; | ||
| tempInput.select(); | ||
| document.execCommand('copy'); | ||
| document.body.removeChild(tempInput); | ||
| } | ||
| }) | ||
| .catch((error: string) => console.error(error)); | ||
| }; |
There was a problem hiding this comment.
Please prefer using async/await and add an optional errorCallback parameter instead of printing on the console.
There was a problem hiding this comment.
Hey @kripod I've made the amends you've mentioned in the comments. Let me know if it's all good :)
|
Hey @kripod any chance you had some time to look into it? |
Codecov Report
@@ Coverage Diff @@
## master #85 +/- ##
==========================================
- Coverage 89.27% 79.88% -9.39%
==========================================
Files 29 31 +2
Lines 289 348 +59
Branches 32 40 +8
==========================================
+ Hits 258 278 +20
- Misses 26 66 +40
+ Partials 5 4 -1
Continue to review full report at Codecov.
|
I apologize for the radio silence, I've been working on a thesis for university, and most of the code I push or accept towards OSS are focused around that. I'll try my best to review and merge this over the weekend. Thank you for the patience! |
|
Ok no worries, I thought you finished that :) don't worry about it now then. And good luck with your thesis :) |
|
Thanks, I appreciate you understand. |
Hey, I've added useClipboard hook. No tests yet as I wanted to see if that's good direction with the code. I had some problems with Permission API, as it's still working draft, and types from TS are not exactly valid, but I've managed to figure it out. Let me know what do you think.