I have the TooltipHost component listed below. After callout is shown, if I move the mouse to gapspace, e.g. to the area between button and callout, callout stays visible.
I want the callout to be closed when mouse gets out of button, even if it is inside the gapspace.
import * as React from "react";
import {
TooltipHost,
DefaultButton,
DirectionalHint
} from "office-ui-fabric-react";
export const ButtonWithTooltip: React.FC<any> = () => {
return (
<>
<TooltipHost
content="tooltip content"
calloutProps={{
gapSpace: 60,
calloutMaxWidth: 150,
isBeakVisible: false,
directionalHint: DirectionalHint.bottomLeftEdge
}}
>
<DefaultButton styles={{ root: { width: "100%" } }} allowDisabledFocus>
Submit
</DefaultButton>
</TooltipHost>
</>
);
};
This appears to be expected behavior since the tooltip is getting closed once the mouse leaves tooltip container
To control TooltipHost component visibility the following methods could be utilized:
ITooltipHost.show - Shows the tooltip
ITooltipHost.dismiss - Dismisses the tooltip
The following example demonstrates how to hide a tooltip once mouse leaves a button
import {
DefaultButton,
DirectionalHint,
ITooltipHost,
TooltipHost
} from "office-ui-fabric-react";
import * as React from "react";
import { useRef } from "react";
const ButtonWithTooltip: React.FC<any> = () => {
const tooltipRef = useRef<ITooltipHost>(null);
function handleMouseLeave(e: any): void {
if (tooltipRef.current) {
tooltipRef.current.dismiss();
}
}
return (
<>
<TooltipHost
componentRef={tooltipRef}
content="tooltip content"
calloutProps={{
gapSpace: 90,
calloutMaxWidth: 150,
isBeakVisible: true,
directionalHint: DirectionalHint.bottomLeftEdge
}}
>
<DefaultButton
onMouseLeave={handleMouseLeave}
styles={{ root: { width: "100%" } }}
allowDisabledFocus={true}
>
Submit
</DefaultButton>
</TooltipHost>
</>
);
};
Demo
Related
I want the text color of the dropdown to change just after switching to/from dark mode. My code is changing the color of the text by switching to/from dark mode but for that, I have to restart the application. I want this to happen without restarting the application.
import React, { useState, useRef, useEffect } from 'react'
import { Picker } from '#react-native-picker/picker'
import { CgView } from './CgView'
import { CgText } from './CgText'
import Colors from '../Theme/Colors'
import { Appearance } from 'react-native'
const colorScheme = Appearance.getColorScheme();
const MonthtPicker = props => {
const { selectedMonth, onMonthChange } = props
const monthRef = useRef()
const dayRef = useRef()
const [textColor, setTextColor] = useState(Colors.commonTextColor)
useEffect(()=> {
const changeMode = () =>{
if (colorScheme === 'dark') {
// Use dark color scheme
setTextColor('white')
}
else{
setTextColor(Colors.commonTextColor)
}
}
changeMode()
}, [colorScheme])
return (
<CgView>
<CgText bdayLabel>Birthday</CgText>
<CgView row>
<CgView pickerContainer>
<Picker
ref={monthRef}
selectedValue={selectedMonth}
onValueChange={onMonthChange}
dropdownIconColor={Colors.commonTextColor}
itemStyle={{ color: Colors.commonTextColor }}
style={{ color: Colors.commonTextColor }}>
<Picker.Item
label='Select month'
value=' '
color={textColor}
/>
<Picker.Item
label='January'
value='January'
color={textColor}
/>
<Picker.Item
label='February'
value='February'
color={textColor}
/>
<Picker.Item
label='March'
value='March'
color={textColor}
/>
</Picker>
</CgView>
}
export default MonthPicker
Please explain me why my code is not working as expected and try to provide solution using useEffect.
Thank you in advance.
I've setup a simple app store with a single numeric value, which I increment on every button click. My UI is simple: a single app <div> which contains a MyChild component that renders the number next to an increment button.
The app's autorun seems to behave correctly BUT every time I increment the value, MyChild's autorun fire extra times i.e. on page load it fires once. If I click the button, it fires twice. I click again, it fires 3 times, and so on. I expect that on every increment, autorun would fire once. What am I missing here?
Code is available on CodeSandbox
Here it is here as well:
import "./styles.css";
import * as React from "react";
import { observer } from "mobx-react-lite";
import { action, autorun, makeAutoObservable } from "mobx";
class AppStore {
v;
constructor() {
this.v = 0;
makeAutoObservable(this);
}
}
const appStore = new AppStore();
const MyChild = observer(() => {
console.log("MyChild render", appStore.v);
autorun(() => { // <------------------------ this gets fired extra times
console.log("mychild autorun " + appStore.v);
});
return (
<div style={{ backgroundColor: "lightBlue" }}>
mychild {appStore.v}
{": "}
<button
onClick={action(() => {
appStore.v += 1;
})}
>
INC
</button>
</div>
);
});
export default observer(function App() {
console.log("app render");
autorun(() => {
console.log("app autorun " + appStore.v);
});
return (
<>
<div style={{ backgroundColor: "gray", padding: "10px" }}>
main
<MyChild />
</div>
</>
);
})
I have found the reason (I'm new to Mobx-React, guess I should have figured it out)
According to this tip, I need to setup autorun inside a useEffect that happens on first render. I changed all my autoruns to:
React.useEffect(() => {
return autorun(...);
}, []);
and now they get fired once every render.
I have a component. It has a button. Upon pressing the button, I am changing the style of the button text (color) using setState function. When I am testing the changed component, the test is failing because the change happens asynchronously. I want to do something as is given here (https://testing-library.com/docs/dom-testing-library/api-async/)
const button = screen.getByRole('button', { name: 'Click Me' })
fireEvent.click(button)
await screen.findByText('Clicked once')
fireEvent.click(button)
await screen.findByText('Clicked twice')
But rather than waiting for the text to change. I want to wait for the text color to change. Thanks
This is the code for my button
<Button onPress = {() => {this.setState({state : 1});}}>
<Text style = {style}>Button Text</Text>
</Button>
So when this button is pressed. state is set to 1. And in render :
if(this.state.state === 1) style = style1
else style = style2;
But it can be seen from logs that render is called after the test checks for the styles. So How can I wait for the render to complete before checking if the font color has been changed?
Here is the testing code
test('The button text style changes after press', () => {
const {getByText} = render(<Component/>);
fireEvent.press(getByText('button'));
expect(getByText('button')).toHaveStyle({
color : '#ffffff'
});
})
It looks like you have a custom button, not a native button. I'm guessing your component is something like this:
import React from "react";
import {Text, TouchableOpacity} from "react-native";
const Button = ({pressHandler, children}) => (
<TouchableOpacity onPress={pressHandler}>
{children}
</TouchableOpacity>
);
const ColorChangingButton = ({text}) => {
const [color, setColor] = React.useState("red");
const toggleColor = () => setTimeout(() =>
setColor(color === "green" ? "red" : "green"), 1000
);
return (
<Button pressHandler={toggleColor}>
<Text style={{color}}>{text}</Text>
</Button>
);
};
export default ColorChangingButton;
If so, you can test it with waitFor as described here:
import React from "react";
import {
fireEvent,
render,
waitFor,
} from "#testing-library/react-native";
import ColorChangingButton from "../src/components/ColorChangingButton";
it("should change the button's text color", async () => {
const text = "foobar";
const {getByText} = render(<ColorChangingButton text={text} />);
fireEvent.press(getByText(text));
await waitFor(() => {
expect(getByText(text)).toHaveStyle({color: "green"});
});
});
For a native button which has rigid semantics for changing colors and doesn't accept children, instead using title="foo", a call to debug() shows that it expands to a few nested elements. You can use
const text = within(getByRole("button")).getByText(/./);
expect(text).toHaveStyle({color: "green"});
inside the waitFor callback to dip into the button's text child and wait for it to have the desired color.
I used the same packages/versions for this post as shown in React Testing Library: Test if Elements have been mapped/rendered.
You can try
<Text style = {this.state.state === 1 ? style1 : style2}>Button Text</Text>
This will consequently lead to the style being defined all time. So you don't have to wait for the setState to complete.
Edit
You can use the callback provided by setState function to perform your tests for styles.
this.setState({
state : 1
} , () => {
//this is called only after the state is changed
//perform your test here
})
I am currently trying to re-style a Fabric UI Button in React by changing its shape, background color and hovering color. I managed to change the first two, but i'm still having troubles in accessing the hover color, since the selectors property does not seem to work.
My code is the following:
import React, { Component, Props } from 'react';
import { PrimaryButton as FluentPrimaryButton, IButtonStyles, IStyle} from 'office-ui-fabric-react';
interface MyPrimaryButtonProps {
label?: string
}
const MyPrimaryButton = ({label}: MyPrimaryButtonProps) => {
const styles: IButtonStyles = {
root: [
{
fontSize: '16px',
background: '#525CA3 ',
border: '1px solid #525CA3',
borderRadius: '20px',
padding: '0px 30px',
height: '40px',
selectors: { // <---
':hover': { // <--- this part doesn't work.
backgroundColor: 'red' // <---
},
}
}
]
};
return (
<div>
<FluentPrimaryButton styles={styles} text={label} />
</div>
);
};
export default MyPrimaryButton;
I get a custom button, but still the hover color remains default blue, instead of switching to red.
You can change the styling of the button when hovered like this:
const btnStyles = {
rootHovered: {
backgroundColor: "red"
}
};
// ...
<FluentPrimaryButton text = {label} styles = {btnStyles} />;
I was wondering, is it possible to add a react component as the content?
I added the component inside the overlay like so -
this.player.overlay({
content: <SomeReactComponent />,
align: 'bottom-left',
overlays: [{
start: 'play',
end: 'end'
}]
});
and the SomeReactComponent is just a react component for a dynamic image renderer that looks like this
import like from './like.png';
import love from './love.png';
import neutral from './neutral.png';
class SomeReactComponent extends Component {
getImage(pic) {
const image = pic;
return image;
}
render() {
const pic = [love, like, neutral];
return (
<div>
{ sentimentsArray.map(sentiment =>
<img src={this.getImage(pic)} style={{ width: '75%', height: '75%', objectFit: 'scale-down' }} />
)}
</div>
);
}
}
When i call this.player.overlay in my console, it says the overlays.options.content is a Symbol of React.element, however, I'm not getting anything as an overlay
It's not possible to use React component for this property unfortunately, but only string or node element. Take a look to the doc for more information.