Fixed #39 Added a copy button to the required codes in the docs section #42
Conversation
src/pages/Docs.js
Outdated
| await navigator.clipboard | ||
| .writeText(copyText) | ||
| .then(() => { | ||
| alert('Successfully Copied') |
There was a problem hiding this comment.
I don't think we need alert for this.
There was a problem hiding this comment.
ok I will update this
src/pages/Docs.js
Outdated
| const copyToClipboard = async (value) => { | ||
| let copyText | ||
| linkData.map((val) => { | ||
| if (val.classname === value) { |
There was a problem hiding this comment.
We are already having copy button and it has the logic of copying a string, can we reuse that function. If it is made in a component, move it to some global level for whole app to reuse it
There was a problem hiding this comment.
Sir can you confirm this copy button ?
There was a problem hiding this comment.
there is also one more in customize icon modal. My point is we shouldn't rewrite the code. Let's try to reuse what's already been written
There was a problem hiding this comment.
I saw the code which was written for these. Actually we here we are using input tags and while copying the select() is used to copy for which input tag is necessary. But in the docs sections we have used code tag so it is throwing error when I am trying that way.
This is the code which is used to copy before in the customize model.
If we use the input tag it looks like this which does not look good
One thing we can do is we can use input tags inside code tag and make them display none so that they won't be displayed and also perform the functionality like the other one's are doing.
Please help me regarding this
There was a problem hiding this comment.
Maybe this is a good opportunity to refactor the copy comppnent and separate, as much as possible, the logic from the view. Can you try this approach?
The method could depend on a state that's passed or returned to any view component.
|
can you also add a screenshot @AnshumanDhiman ? |
|
This is the current state of the EOS Icons page This is the EOS Icons page after the recent changes added |
|
The design looks good @AnshumanDhiman, let me know once you resolve the comments |
|
@cyntss @kbhutani0001 I have added a new function file copyToClipboard.js , now if we add an input tag we just have to add "id=copy-code" and it will copy the code and if we use the code tag we have to add the link to be copied in linkData.js file and it will copy it. Also issue #45 specifies to show notification when an item is copied, so I have not removed the alert() functionality, but as @kbhutani0001 sir said if it is not necessary I will remove it. |
|
@AnshumanDhiman Can you resolve the conflicts? |
|
I have asked @kbhutani0001 sir actually I tried manually resolving the conflicts, but it is still showing conflicts and then I tried to push updated code thorough vscode but it is throwing me error of rejected |
|
@AnshumanDhiman let's connect for this. can you share the errors with me on slack? |
Fixes #39
I have added copy button (copy icon basically imported from the eos-library) working as a button.
When a user clicks on the icon it copies the text written in the code section.
I have to create a separate file named as linksData.js which keeps all the links available on the docs page and I have mapped them to copy.