All:
I am pretty new to React. What I am trying to build is a component which can detect mouse status like mousedown, mouseup, mousemove, mousedrag, mouse dblclick.
This component actually has nothing with UI, so I wonder what should I return in render function? Say I have a class like:
class MouseActionMonitor {
constructor(){
}
render(){
return (
)
}
}
And I want to use it like( it does not have to be like this, this is just my guess of its usage):
ReactDOM.render( <MouseActionMonitor><App state={state} /></MouseActionMonitor>, document.getElementById("content"));
Here the App is the actually application components, #content is a div fill the whole window. MouseActionMonitor can update certain part in the state tree to indicate current mouse action( also still wondering how to use this component to detect mouse action ).
The reason I want to do this is because I want to drage and drop item between "drag/drop-able" component(this component has a text label in it, when drag it, it will give you a copy of that text, and when u hover other component of this kind, it should allow u to drop this text and replace the one current in it)
Thanks
Related
I want to be able to click on one of the bars to open a new window, but it seems like the tremor library doesn't have the functionality to have some kind of onclick. Could someone help me with that?
my barchart code
I have tried changing it from a functional component to a class component so I can use this.state, but I did not manage to make it work.
I am trying to write a react component to render a menu, but I need to use just CSS for controlling the visibility, but I have a problem that I cannot able to solve.
I have set a hover on the element with the class menu, then it set the child called wrapSubMenu to visible but it is setting all menu's children. I pretend to Do it just on the first wrapSubMenu of the menu.
Playground here
They have the same class style, you cannot complete that on this way.
Try to do it with state toggling on hover, instead of css
Background
For React Leaflet v2, there was an NPM plugin, react-leaflet-control, that allowed you to create any kind of control and place it into the react-leaflet control container. Obviously with the introduction of RL-v3, this no longer works in v3 with the API changes. I want to create a custom control wrapper to allow me to place in it any type of React Node.
Current status
The code that I have currently works...but doesn't. I pulled from the example in this Stack Overflow post: React Leaflet V3 Custom Control that gets me to the 99% solution of creating a custom control. However, my use case is a toolbar on the map with buttons that are interactable (colors to designate active tool). With this code, however, I have that functionality, but because every render causes a new control to be created, the Tooltip flickers as it is losing its anchor element.
Desired behavior
I want a toolbar that allows users to select tools to perform actions on the map (think old-school leaflet-draw. And to provide feedback, I want the button to change color when the tool is active and for UX, I want tooltips to describe the action of the button.
Actual behavior
The toolbar exists, users can select tools and there is UI feedback, however, the tooltips lose their anchor element as the control is removed and re-added on every render when selecting a tool.
Code Sandbox
https://codesandbox.io/s/react-leaflet-custom-control-n1xpv
I ended up with an answer that kind of takes in what #teddybeard was saying. If I just created my new div with the class as suggested, it would be placed on top of any default controls such as ZoomControl or ScaleControl. Instead, what I did was grab the actual position div container from the DOM, and then created a ReactDOM portal into that container and added my control in that way.
It works, doesn't have the issues with visual flashing due to the React Effect removing and re-adding the control on every render and I still get the same positioning.
It's live on npm and github at https://github.com/chris-m92/react-leaflet-custom-control and https://npmjs.com/package/react-leaflet-custom-control
const POSITION_CLASSES = {
bottomleft: 'leaflet-bottom leaflet-left',
bottomright: 'leaflet-bottom leaflet-right',
topleft: 'leaflet-top leaflet-left',
topright: 'leaflet-top leaflet-right',
}
const Control = (props: Props): JSX.Element => {
const [container, setContainer] = React.useState<any>(document.createElement('div'))
const positionClass = (props.position && POSITION_CLASSES[props.position] || POSITION_CLASSES.topright)
React.useEffect(() => {
const targetDiv = document.getElementsByClassName(positionClass)
setContainer(targetDiv[0])
}, [])
const controlContainer = (
<div className='leaflet-control leaflet-bar'>{props.children}</div>
)
L.DomEvent.disableClickPropagation(container)
return ReactDOM.createPortal(
controlContainer,
container
)
}
export default Control
I am unable to make a focus inside a searchbox of Office UI Fabric React component.
I have a DialogBox where I am having a searchbox. This dialog box I trigger on button click and I wants the focus to be inside the searchbox once the dialog is there.
I have tried the mostly what is mentioned in the documentation of Office UI Fabric.
So, what I have tried uptill now:
private _searchBoxRef = React.createRef<ISearchBox>();
My SearchBox component looks like:
<SearchBox
componentRef={this._searchBoxRef}
placeholder="Ask a question"
iconProps={{ iconName: 'Chat' }} />
And in the componentDidMount hook:
this._searchBoxRef.current.focus();
I am trying to make a focus inside the searchBox.
I have followed the documentation under the link:
React Guidelines for Ref Usage
Does someboby have a clue what I am doing wrong here or something I am missing??
So, I found the answer after trying out few things.
The problem was, even though I was trying to make focus inside componentDidMount(), I found that the DOM was still not ready and my searchbox inside my modal was not there.
Two things could be done here,
Either, wait for some time with SetTimeout and then tried to make focus
Can use componentDidUpdate, if setting the state which is re-rendering the component. This might also give hickups if DOM is not ready, so keep this in mind.
Hope this will help someone.
I'm using react-list to display lists data within Material-UI Tab components.
I'm using the simple type in the list, e.g.
<ReactList itemRenderer={::this.renderItem}
length={this.props.contacts.length}
pageSize={20}
type="simple"
useTranslate3d={true} />
I have to use simple as I don't know the size of the rendered items.
This means I can't use scrollTo fully. From the docs
Note that if you aren't using type='uniform' or an itemSizeGetter, you will only be able to scroll to an element that has already been rendered.
When I'm work with the list on one tab and scrolled, say, half way down, when I switch to another tab, I'm scrolled some way down the list that has been updated with the new data.
What I'd like is to have the react-list reset to display the first item when I switch tabs.
I've tried putting a ref in ReactList component and then calling scrollTo---like this
ref={c => this.list = c}
componentDidUpdate() {
this.list.scrollTo(0, 0);
}
Had no effect.