The documentation of Fluent UI v9's SplitButton is not clear on how to add a click handler to the primary button.
Can anyone show me an example of how that is done?
I have tried finding examples on their GitHub page and I've googled for possible examples and I found one GitHub issue noting that this is a problem with their documentation.
Figured it out:
<Menu positioning="below-end">
<MenuTrigger disableButtonEnhancement>
{(triggerProps: MenuButtonProps) => (
<SplitButton
primaryActionButton={{ onClick: handleClick }}
menuButton={triggerProps}
>
Example
</SplitButton>
)}
</MenuTrigger>
<MenuPopover>
<MenuList>
<MenuItem>
Remove file
</MenuItem>
</MenuList>
</MenuPopover>
</Menu>
Related
I'm using react-admin with data that I get from a restAPI data source that I can customize for my needs, I've added a standard resource with only a list and an edit attributes:
<Resource name="topic" edit={TopicsEdit} list={TopicsList} />
When I look at the network tab of Chrome dev tools I see that I use the right endpoints:
For the list:
GET request for http://api.loc/topic
And for the edit:
GET request for http://api.loc/topic/{{topic_id}}
Up to this point everything works just fine.
My problem starts when I try to have the edit screen split into two tabs, one of them will be for editing the topic (This works just fine), and the other tab should use data from a different endpoint:
http://api.loc/topic/{{topic_id}}/modifiers
The code for my TopicsEdit file:
<Show {...props}>
<TabbedShowLayout>
<Tab label='topic'>
<Edit {...props}>
<SimpleForm>
<TextInput source="id"/>
<TextInput source="title"/>
</SimpleForm>
</Edit>
</Tab>
<Tab label='modifiers' path='modifiers'>
<List {...props}>
<Datagrid>
<TextField source="id"/>
<TextField source="name"/>
</Datagrid>
</List>
</Tab>
</TabbedShowLayout>
</Show>
In the topic tab everything is working as I mentioned before, but when I switch to the modifiers tab I see in the network dev tool that the data arrives from
http://api.loc/topic
instead of
http://api.loc/topic/{{topic_id}}/modifiers
How can I customize the URL that the modifiers tab will pull the data from?
The only thing I did find was to use a <ReferenceInput> but the problem here is that the reference="" attribute will only get the info from a predefined structure, meaning that if I use reference="modifiers" it tries to fetch the data from:
http://api.loc/modifiers
And not from the desired URL.
I'm setting an admin panel and listing the users that are registered in a platform.
In the listing page, when I click over the row I am linked to edit page. However, one of the fields is 'email' and I use EmailField to get advantage of validations, what it automatically creates an anchor tag with a mailto functionality.
For all the fields I am showing, 'email' is the unique field that has a link so, from the UX point of view, it invites to click it. And when I click over the link, the email client is opened. That is why I want to disable the link.
I could change to TextField, but I want to keep EmailField's validations. So, is there a way to avoid creating a mailto anchor over the email? I can't find it in the docs or in google.
export const UserList = props => (
<List bulkActionButtons={false} {...props} filters=
{<UserFilter/>} perPage={10} sort={{ field: 'email', order: 'ASC'
}} pagination={<UserPagination />} >
<Datagrid rowClick="edit">
<EmailField source="email" />
<BooleanField source="isAdmin" />
<EditButton />
<DeleteButton />
</Datagrid>
</List>
);
Thanks for your help.
I have a ListView a bit like this:
<ListView>
<Templates>
<ItemTemplate name="example">
<View id="wrapper" onClick="onClickExampleButton">
<Label>Click Me</Label>
</View>
</ItemTemplate>
</Templates>
<ListSection id="ls">
<ListItem template="example"></ListItem>
<ListItem template="example"></ListItem>
<ListItem template="example"></ListItem>
</ListSection>
</ListView>
I want to prevent double click on the onClickExampleButton function.
So far in the controller I have code like this:
function onClickExampleButton(e) {
var item = $.ls.getItemAt(e.itemIndex);
// TODO: I want to disable the onClick eventListener here
someLongAsyncFuncToServer(function() {
// TODO: I want to re-enable the onClick eventListener here
})
}
Usually removing event listeners is as simple as
$.objId.removeEventListener(onClickExampleButton)
and re-adding it is as simple as:
$.objId.addEventListener(onClickExampleButton)
However, I am not sure how to achieve this on a ListItem
I believe you can achieve this by using source id of event fired by element. The only thing you need to take care of that since events are bubbled up to parent hierarchy, so any child-view can also invoke click event giving you unexpected source ids.
To resolve your query, you can safely use this code:
function onClickExampleButton(e) {
var item = $.ls.getItemAt(e.itemIndex);
// TODO: I want to disable the onClick eventListener here
e.source.touchEnabled = false;
someLongAsyncFuncToServer(function() {
// TODO: I want to re-enable the onClick eventListener here
e.source.touchEnabled = true;
})
}
And make a little change in your XML code like this:
<ListView>
<Templates>
<ItemTemplate name="example">
<View id="wrapper" onClick="onClickExampleButton">
<Label touchEnabled="false">Click Me</Label>
</View>
</ItemTemplate>
</Templates>
<ListSection id="ls">
<ListItem template="example"></ListItem>
<ListItem template="example"></ListItem>
<ListItem template="example"></ListItem>
</ListSection>
</ListView>
The catch here is that first of all you set touchEnabled = 'false' on Label inside View (with id = wrapper), it will make sure that click event won't be fired by Label, and will be bubbled up & fired by parent only.
Next thing is that, in click event method, you are using e.source which is now your wrapper View.
If you do not set touchEnabled=false on Label, then e.source can also contain Label reference. You can read more about events bubbling which will help you understand how you can work with event handling in Titanium efficiently.
I would put a property on the object and use it to determine status. For example,
set a variable when you click the button and then change it after the long running Async function... This way, if the status is running, then ignore the click. Once it is not running any longer, then accept the click.
I've struggling for two days to styling components on Native Base with <StyleProvider>. I want to change background color of header and add custom style property on the button.
<Container>
<Header /> /*change backgroundColor*/
<Content>
<Button viewDetail block> /*add 'viewDetail' as custom style property */
<Text>Button</Text>
</Button>
</Content>
</Container>
I think, I have the answer for my own question.
Import all components from 'native-base-theme/components/' instead of variables.
The code will be like this
import getTheme from './native-base-theme/components';
and add <StyleProvider>, then add prop style <StyleProvider style={getTheme()}>.
There are many ways of doing this. One way would be to follow the instructions given here. Alternatively, you can change the button theme file and add a similar style property like success shown here.
I hope this will help you,
You must be using NativeBase2
<StyleProvider style={getTheme(commonColor)}>
<Header>
<Left>
<Button transparent>
<Icon name="arrow-back" onPress={() => this.props.routerActions.pop()} />
</Button>
</Left>
<Body>
<Title>Profile</Title>
</Body>
<Right></Right>
</Header>
</StyleProvider>
For ejecting theme,
Just open this link and follow
http://nativebase.io/docs/v2.0.0/customize#themingNativeBaseApp
Now If you want to customise just look for
native-base-theme/components/Header.js
native-base-theme/variables/commonColor.js
In XUL you can use create a status bar panel icon, similar to the ones used by Firebug and Greasemonkey, with the <statusbarpanel> tag. If you set the right class, you can throw a <menupop> inside, and then have a pop-up menu when the user clicks on the icon, like so ...
<statusbarpanel class="statusbarpanel-menu-iconic"
src="chrome://YourExtension/content/icon.png">
<menupopup>
<menuitem label="whatever" oncommand="doSomething();">
<menuitem label="whatever else" oncommand="doSomethingElse();">
</menupopup>
</statusbarpanel>
Now, with other pop-up menus, you can nest a series of menus using the menu tag:
<statusbarpanel class="statusbarpanel-menu-iconic"
src="chrome://YourExtension/content/icon.png">
<menu value="Old">
<menupopup>
<menuitem label="whatever" oncommand="doSomething();">
<menuitem label="whatever else" oncommand="doSomethingElse();">
</menupopup>
</menu>
<menu value="New>
<menupopup>
<menuitem label="yet another" oncommand="doYetAnotherSomething();">
</menupopup>
</menu>
</statusbarpanel>
but the above code doesn't actually work, because <statusbarpanel> won't allow a <menu> child (well, it will allow it, but not create the desired effect).
So, what I was wondering was ... is there any way I can make a status bar panel icon-triggered menu with multiple layers of menu items?
* EDIT *
Since I can't post this in the comment to the answer (and get syntax coloring and such), here's what finally worked for me (thanks Sathish!):
<statusbarpanel class="statusbarpanel-menu-iconic"
src="chrome://YourExtension/content/icon.png" popup="stausBarPanelMenu">
</statusbarpanel>
<popup id="statusBarPanelMenu" position="start_before">
<menu value="Old">
<menupopup>
<menuitem label="whatever" oncommand="doSomething();">
<menuitem label="whatever else" oncommand="doSomethingElse();">
</menupopup>
</menu>
<menu value="New>
<menupopup>
<menuitem label="yet another" oncommand="doYetAnotherSomething();">
</menupopup>
</menu>
</popop>
Oh, and as a side note to any XUL devs who might read this: you should really eliminate the "menupopup inside a statusbarpanel" style of pop-up. The style that answered this question is just as easy to learn/use, significantly more powerful, and it relies on the same popup mechanisms that can be used with the other XUL elements. This whole "menupopup inside a statusbarpanel" this is just a confusing, un-needed, anomaly.
Try this:
create a popup element like this:
<popup ... >
<menu ... >
<menupopup ... >
<menuitem ... >
</menupopup ... >
</menu>
</popup>
assign the id of popup element to the oncontextmenu attribute or show it dynamically using onclick event of the statusbarpanel element.