react-notifications-component custom content example - reactjs

I am using react-notifications-component and I see that I can have a custom component shown by setting .content of the iNotification object passed to Store.addNotification(). I would like to add a control to the existing component that comes with this library (I want to add a button to copy the message to the clipboard). If I could extend the existing component, this could be relatively easy, but I don't see how to do this. I don't want to "reinvent the wheel" since the 'native' component works and looks great.
Does anyone have examples of this type of functionality?
Thanks.

I dont think there is way to do it, unless you ask the author.. But honestly its fairly easy to implement own component that looks just like the original one, so I dont think it would even make sense to have this functionality, but you can ask..
Anyway I played around and made custom component which copies text ( but from input not from a div therefore the style broke a bit, but if you have a div it again looks just the same..
working example

Related

React, Component that edits the HTML of the next component?

I have a strange case.
I must use a table library that has few features. There is no way to use react-table or more popular libraries.
I need the following feature => In the first column there are icons. If someone clicks on this icon, a new <tr><td>xyz</td></tr> should appear straight after this row.
It's a sort of tooltip, but instead of appearing on top of other content it should "add itself" between the row it has been triggered from and the next row.
I have no idea how to approach that.
The only things I have access to is the row index of the row the model was triggered from.
Is it feasible in React to create a component that somehow pushes a <tr> after the current td closes?
I am wondering if in react it's possible to manipulate HTML in a similar way, no matter if it is a bad practice...
Or maybe somehow running plain JavaScript is the only solution?
Any idea that helps me find a solution would be much appreciated.

material-ui multi avatars in listItems

Is it possible to create listItems in material-ui with more than 1 avatar (or better, more than 2, since you can put one on the left and one on the right, even if I don't know why you would do that)
Or more in general, is it possible to customize the content that goes inside the listItem or are we limited to the available attributes that are specified in the documentation (primaryText, secondaryText, etc?)
Thank you!
It looks like I can use the 'children' attribute on the ListItem component to pass custom content. I am not sure whether it is a good way to handle my case, but it seems to work fine.

how to change the position of textfield in adf forms?

Hi friends i am using jdev 11g release2 (11.1.2.4.0).I want to create a registration form from dragging datas from data control and my question was how to change or move the position of textfield in that form into different areas?
You should be using various layout components to achieve the layout you want, and remember that layout components can be nested to create more complex layouts.
See some examples here:
http://jdevadf.oracle.com/adf-richclient-demo/faces/feature/layoutForm.jspx
You can use the view source menu to see how they achieved that.
http://jdevadf.oracle.com/adf-richclient-demo/faces/feature/layoutBasics.jspx
Please be a bit more clear in your query. From what I was able to make out:
You can either use the "code view" of the JDev to move the code which represents the component to a different location or use the "Design view" to drag and move the component.
I would recommend the first approach as it makes it easier to manage the code/layout
You can change the position of the fields within the form or you can drag them out. However for this you should try out some tests and see which suits you best. I think if you surround each attribute with "Panel label and message" you will have a better view of your page.

Creating Rich Text editor AngularJS

I know there are lots of great rich text editors out there that can easily be ported to angular and plenty of discussion on how to do this, but I'd like to create my own.
I have the basic idea down:
create a text area and watch the input and perform a function as the input changes. I am familiar with the ngBindhtml directive, only to the extent that I can apply it to an element.
Any idea how I might be able to create a function that would render plain text into html?
I've tried it before but ended up using textAngular.
Basically i replaced the textarea with a iframe, similar to the way tinyMCE does.
The contenteditable on a element allow you to replace the textarea and write directly on the div. You would insert all html elements like headers and text this way. You'll have to handle the cursor position on text, apply styles based on buttons and text selection, etc.
Well, I also came across this and created my own editor as I was required to add features like Table addition etc. The repo is still under development but you can some idea by taking a look at this plunkr. Unlike old answers, I have tried to keep it as a component so that it can be reused at many other places as required.
You can star this git repo to stay updated or feel free to add your inputs

Adobe CQ5.5 how to create multiple CustomMultiField to be used in a single component

I have a requirement which requires me to use a single dialog with two tabs. Each tab should have a CustomMultiField (multiple sets of four fields). I do not know anything about EXT JS. Can some one point me to right direction where I can find something about requirement as above.
I have built custom components without any explicit understanding of Ext JS. To understand how to set up a dialog with tabs, look at the code for the page component in /libs/foundation/component/page. A directory of all the xytpes you can use, like MultiField, is here.
If you need something that behave like one, but is not necessarily huge specific ExtJS component or custom xtype, and you do not want to dig hundreds of Adobe ‘support’ pages, trying to find some piece of useful doc.
You can simply use multifield xtype and write 4 pure JS listeners, that does what you need.

Resources