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.
Related
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
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.
Many React Testing Library examples show how to find and click a button using the getByText query, as in:
fireEvent.click(getByText("Create"))
OR
userEvent.click(getByText("Create"))
However, it's common to have buttons with no text and only SVG icons, like Material UI's icon buttons or floating action buttons. Is there a recommended way to query for and click buttons like these? For context, I'm using the higher-level events provided by the companion user-event library.
For icon buttons, add an aria-label attribute like below:
<button aria-label='edit'>
<edit-icon />
</button>
Then in your test, pass the accessible name when calling getByRole()
screen.getByRole('button', {
name: /edit/i
})
From the docs:
The accessible name is for simple cases equal to e.g. the label of a
form element, or the text content of a button, or the value of the
aria-label attribute.
There are several ways to query an element, without seeing your hierarchy of elements, it's hard to say. But, there are several ways to query an element, an alternative to using getByText() could be getByRole('button'). If you want to add a data-testid to the element you could use getByTestId(). There are some more available queries found here: https://testing-library.com/docs/dom-testing-library/api-queries
There are a bunch of different ways to do it, including everyone's favorite fallback, data-tested. But if you're using Material UI, you might be looking for the most "MUI" way to do this. Two ideas:
The MUI documentation shows all its buttons wrapped with a label element with an htmlFor property. You could do this and then use getByLabelText()
Your icon buttons probably have (and should!) a tooltip, and the tooltip text is probably coming from a title property. Then you can get the button with getByTitle().
For me non of above answers works, what is worked for me is:
screen.getByRole('button', { name: /<icon-file-name>/i });
In my case the button with only svg file.
The best possible way of finding an element is to simulate the most User oriented approach. So probably User expects the role button and then searches for an icon in your case. That's where semantic HTML plays a role for elements structure inside your component.
MUI buttons also implement a name attribute for some icon buttons used inside another component e.g. Select and I strongly recommend using this attribute for testing purpose.
Please remember that, your tests should be unaware of implementation, so identification should rely on name, role, label and other "natural" attributes. But if that is not possible using data-testid should be your last resort.
A very good overall approach (not only for icon buttons) is to specify a name property alongside role in getByRole query:
const listOpenButton = screen.getByRole("button", { name: /open/i });
Also a data-testid approach:
const listOpenButton = screen.getByTestId("myButtonId");
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.
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.