Have added a tooltip and trigger to my component, how can i get it to fire the tooltip?
required modules like this:
var Icon = require('./Icon'),
Tooltip = require('./Tooltip'),
Button = require('react-bootstrap').Button,
OverlayTrigger = require('react-bootstrap').OverlayTrigger;
getTooltip: function() {
return <Tooltip text="sample text" />;
},
Rendering trigger like this:
<OverlayTrigger placement="right" overlay={this.getTooltip()}>
<Button bsStyle="default">Button text to trigger</Button>
</OverlayTrigger>
But nothing happens?
How can I get this to fire?
Thanks
Tooltip component is:
var TooltipBS = require('react-bootstrap').Tooltip;
var Tooltip = React.createClass({
render: function() {
return (
<TooltipBS>
{this.props.text}
</TooltipBS>
)
}
});
module.exports = Tooltip;
I assume you are using react-bootstrap tooltip?
If you read the documentation here http://react-bootstrap.github.io/components.html#tooltips-in-text you can see how to use it in your code.
<OverlayTrigger placement="right" overlay={this.getTooltip()} trigger="click">
<Button bsStyle="default">Button text to trigger</Button>
</OverlayTrigger>
You can add preferred trigger event with trigger property.
It should be:
getTooltip: function() {
return <Tooltip id="tooltip">sample text</Tooltip>;
},
I believe you will need a render() within the component class. Then you will need a ReactDOM.render(<Tooltip />, document.getElementById('app'); outside of the class.
Related
I am trying to toggle between the dark and light themes using icon, i have tried using the radio buttons and it works absolutely fine i don't know where i am going wrong with icons.
Here is the code that works with vs-radio buttons:
<vs-radio v-model="changeTheme" vs-value="light" vs-name="theme-mode-light">Light</vs-radio>
<vs-radio v-model="changeTheme" vs-value="dark" vs-name="theme-mode-dark">Dark</vs-radio>
...
<script>
watch: {
layoutType (val) {
// Reset unsupported options
if (val === 'horizontal') {
if (this.changeTheme === 'semi-dark') this.changeTheme = 'light'
if (this.navbarType === 'hidden') this.navbarTypeLocal = 'floating'
this.$emit('updateNavbarColor', '#fff')
}
}
},
computed: {
changeTheme: {
get () { return this.$store.state.themecolr},
set (val) { this.$store.dispatch('updateTheme', val) }
},
}
</script>
Here is the code which i am trying to achieve currently:
<div class="con-img ml-3">
<feather-icon v-if="this.$store.state.themecolr=== 'light'" icon="Icon" v-model="changeTheme" vs-name="theme-mode-light"/>
</div>
<div class="con-img ml-3">
<feather-icon v-if="this.$store.state.themecolr=== 'dark'" icon="Icon" v-model="changeTheme" vs-value="dark" vs-name="theme-mode-light"/>
</div>
...
methods: {
changeTheme: {
get () { return this.$store.state.themecolr},
set (val) { this.$store.dispatch('updateTheme', val) }
},
}
I tried adding #change and #click to the feather icon but that did not work out, and i also tried adding the function like this :
changeTheme (){
if(this.$store.state.themecolr=== 'light'){
return this.$store.state.themecolr=== 'dark'
}else if(this.$store.state.themecolr=== 'dark'){
this.$store.state.themecolr=== 'light'
}
}
Please someone help me to achieve this, i want to toggle the theme using the feather icons, but i am able to do it with the radio buttons, but that s not what i want.
I looked at the implementation of the vue-feather-icons here
and it is missing the event handlers.
If that is the case, it means those components don't emit any events.
I would suggest you move your event handler to the surrounding div for the icons. see what I did here for an example: https://codesandbox.io/s/distracted-noether-gud0p?file=/src/App.vue
Using Fabric React, I am working on a component that uses the Pivot element.
When the component is first shown, no tabs should be selected, and some content must be shown under the tab headers. Once a tab is clicked, related content will be shown there.
The example "No Pivots Selected" in the documentation page is pretty close to what I want. In the first render, no tabs are selected. I am thinking that the prop selectedKey={null} should give that result.
Following code is based on that example, yet even when the component is shown first time, a tab (first one) is shown as selected (e.g. there is a blue underline under it).
What is the problem?
import * as React from "react";
import { Pivot, PivotItem } from "office-ui-fabric-react";
export interface MainProps {}
export const Main: React.FC<MainProps> = () => {
const [selectedKey, setSelectedKey] = React.useState(null);
const pivotItems: { [key: string]: React.ReactElement<any> } = {
Settings: <div>Settings</div>,
Controls: <div>Controls</div>
};
const _getTabId = (itemKey: string): string => {
return `ShapeColorPivot_${itemKey}`;
};
const _handleLinkClick = (item: PivotItem): void => {
setSelectedKey(item.props.itemKey);
};
return (
<>
<Pivot
headersOnly
selectedKey={selectedKey}
getTabId={_getTabId}
onLinkClick={_handleLinkClick}
style={{ flexGrow: 1 }}
>
{Object.keys(pivotItems).map(name => (
<PivotItem
key={`pivotItemKey_${name}`}
headerText={name}
itemKey={name}
/>
))}
</Pivot>
{selectedKey ? pivotItems[selectedKey] : <div>Start</div>}
</>
);
};
I did a quick codepen using
<Pivot selectedKey={null} >
and it worked just fine. Are you sure you're on the most recent version of Fabric?
When I define a button in React Native as:
<Button ref="buttonRef" title="Button" onPress={this.buttonPressed}/>
And its onPress function as:
buttonPressed(){
this.refs.buttonRef.setNativeProps({color:"#ffffff"});
}
I get the following error:
this.refs.buttonRef.setNativeProps is not a function. (In
'this.refs.buttonRef.setNativeProps({
color: "#ffffff"
})', 'this.refs.buttonRef.setNativeProps' is undefined)
However, if I were to define any other type of component, e.g. text input as
<TextInput ref="userInputRef" value={"this is text"} />
With the function changing its props:
buttonPressed(){
this.refs.textRef.setNativeProps({color:"#ffffff"});
}
Everything changes correctly.
Is there a reason that the button component is unable to have its native props set through setNativeProps?
Button component is a simple custom component created from Touchable components and it doesn't have a ref property. You can check the source code of Button component here.
If you need to change properties of a component you should use state values for that.
Sample
buttonPressed = () => {
this.setState({color:"#ffffff"});
}
//....
<Button ref="buttonRef" color={this.state.color} title="Button" onPress={this.buttonPressed}/>
My Problem is that I would like to navigateBack() from the BountyDetailsScreen to the LoyaltyScreen, but the navigateBack() function call does not trigger any action. When I log the function it says:
The only thing I notice is, that the navigationStack is empty. When I do the same with the navigateTo function it is working, but then I have a messed up navigation stack.
In my LoyaltyScreen.js I am displaying a ListView. It is a RN ListView (not imported from shoutem).
LoyaltyScreen.js
renderRow(bounty) {
return (
<ListBountiesView
key={bounty.id}
bounty={bounty}
onDetailPress={this.openDetailsScreen}
redeemBounty={this.redeemBounty}
/>
);
}
ListBountiesView.js
The ListBountiesView renders each ListView Row and opens a Detail Screen when clicked on the Row.
render() {
const { bounty } = this.props;
return (
<TouchableOpacity onPress={this.onDetailPress}>
{bounty.type == 0 ? this.renderInShopBounty() : this.renderContestBounty()}
<Divider styleName="line" />
</TouchableOpacity>
);
}
BountyDetailsScreen.js
In the BountyDetailsScreen I display detailed information and would like to navigateBack() to the Loyalty Screen when I press a button.
<Button styleName="full-width" onPress={() => this.onRedeemClick()}>
<Icon name="add-to-cart" />
<Text>Einlösen</Text>
</Button>
onRedeemClick() {
const { bounty, onRedeemPress } = this.props;
onRedeemPress(bounty);
navigateBack();
}
navigateBack is an action creator. You need to map it to props and read it from props in your redeemClick function. Just executing the imported action creator won't do anything since it's not connected to Redux.
Here's an example of you map it to props:
export default connect(mapStateToProps, { navigateBack })(SomeScreen));
Here's how you use it:
const { navigateBack } = this.props;
navigateBack();
I can see that airmiha's answer is what you're looking for, but I just wanted to add onto it.
You can also use hasHistory to set up your #shoutem/ui NavigationBar (if you're using it) with a simple back button that utilises navigateBack().
<NavigationBar
styleName="no-border"
hasHistory
title="The Orange Tabbies"
share={{
link: 'http://the-orange-tabbies.org',
text: 'I was underwhelmed by The Orange Tabbies, but then I looked at that
sweet, sweet back button on the Nav Bar.
#MakeNavBarsGreatAgain',
title: 'Nevermind the cats, check the Nav Bar!',
}}
/>
You can find more examples with the NavigationBar component here.
I've been creating my views this way:
var SettingsView = React.createClass({
render: function() {
return (
<View>
<TouchableHighlight onPress={this.donePressed}>
//left out styling code for simplicity
</TouchableHighlight>
</View>
);
},
donePressed: function() {
this.props.navigator.pop();
},
});
This is working fine. donePressed is an event handler that's hooked up with a TouchableHighlight in render (not shown).
Today I tried to refactor it to this:
class SettingsView extend React.Component {
render() {
//same stuff as above
}
donePressed() {
this.props.navigator.pop();
}
}
This rendered the settings screen as normal. But when donePressed triggered, screen turned red saying they can't find this.props.navigator.
I'm not sure what is going on here, please help me out!
Edit:
This screen is brought up via another touch event handler from a different page via this method:
settingsTapped: function() {
this.props.navigator.push({
name: 'SettingsView',
component: SettingsView,
})
},
I've also tried to add passProps: this.props.navigator within settingsTapped too. What I'm most confused is why changing the way I create the class could suddenly make this.props.navigator invisible.
I think the reason it wasn't working is that because you are using Classes as opposed to the createClass function, this is no longer bound to the correct scope. You may need to use an es6 fat arrow function to get this lexically bound to the correct scope, like so:
onPress={ () => this.donePressed() }
You could also do this to get it to work:
onPress={ this.donePressed.bind(this) }