I made a custom component that doesn't rely on Input (it is actually showing a path selection within a tree)
I want to integrate this component in my application with the very same look and feel than any other input component. What I actually want is the floating label that takes place within the editor if the value is null or undefined, and floats above the editor if the editor has a value.
I can't find any way that permits to achieve this on components that are not based on an Input. Am I missing something in material ui documentation?
Here is the code sandbox of my development: https://codesandbox.io/s/treeviewselect-dj4j5?file=/demo.tsx
Edit: the boolean property shrink that should help to do the trick, but still, the position of the label is still off.
Edit2: it seems that the related control must have a height of 64px for the position of the label to be fine. Needs to pilot the whole behavior depending on the value. Will post the fully corrected codesandbox later.
Related
I am trying to use a parent component to control animations in a child Canvas element. Specifically I want an animation to happen when a user inputs a correct answer.
It works until the user changes the state in the parent component, and then it no longer works.
I've made a stripped-back, minimal version of my code here to show my issue: https://codesandbox.io/s/epic-leaf-08jqvy?file=/src/App.js
My desired behaviour is that the red box bounces when a user clicks submit. That happens if they don't type anything in the input box, but as soon as you enter anything into there - changing state and re-rendering the component - the button no longer triggers the animation in the Canvas child component.
As far as I can tell, the issue is to do with changing the state when inputing text. If I make a version where the input is just assigned to a variable, it works fine, but I need to be able to use state and re-render other parts of it.
I have put a console.log in the jump() function, so I can see that it is being called, but no animation is taking place in the canvas.
I assume that what's happening is that everything is being re-rendered when the state changes, and so the useRef is no longer tracking to the right thing.
Things I've tried:
putting the canvas in a memoized component to prevent it from re-rendering
using eventlisteners to see if I can trigger the animations in other ways - keydown ones work, but I need the user to be able to type, so I tried other ones (like hashchange or audio.play) but neither of those worked.
You can see the thing I'm actually trying to build here: https://papaya-platypus-86565f.netlify.app/play Basically users answer questions and an animation plays depending on whether they're right or wrong, to give it a game-y feel.
Thanks!
I like your red box as well as your reasoning. Yes, the input state changing on keystroke is causing the entire App component to re-render. Note that your App.js component has a lot going on (all good stuff), such as your Box class instantiation, your canvas instantiation, etc.
The key is to break your components into smaller parts, particularly separating stateful components from non-stateful components. We don't want your canvas re-mounting on every input change, so we make them sibling components!
Here's a working example of your code, just in smaller components:
https://codesandbox.io/s/strange-julien-d3n4zm
I hope this helps.
I'm trying to find a reliable way to find out if the slate editor is currenty focused or not. The editor should be in a focused state even when nested elements are selected.
I've tried
ReactEditor.isFocused(editor)
But am seing really inconsistent results. Often this will yield true even if the editor is not selected. Also, no rerender seems to be triggered when the editor focus changes.
Is there a reliable way to do this?
Have you tried useFocused hook from Slate?
https://docs.slatejs.org/libraries/slate-react#usefocused
I'm working with React Force Graph (2D - https://github.com/vasturiano/react-force-graph) and trying to display custom tooltip on node hover.
This custom Tooltip (dummy component) would display data that's not returned by node - I'd like to add some details to the tooltip, and those are not stored in node data that's returned for example by onNodeHover).
I've seen that I could use nodeLabel which displays simple text label... but it accepts only strings and some simple string interpolations. Unfortunately I can't pass a component as params.
Does anyone know what would be a good approach to this? How this could be handled? Extra points for working examples :D
So here's the answer:
nodeLabel doesn't accept React Node but can easily accept string. So workaround for that problem is just passing the whole stringified html code to nodeLabel and RFG will handle that! This is the best solution I believe (althou native RFG tooltip doesn't support left/right - top/bottom switching in case tooltip would be cut by the edge of screen, but thats minor problem).
other solution that I wouldn't recommend would be to create useCursorPosition and whenever onNodeHover returns something else than null we can set state of displayNode to true (and display it conditionally based on this state) in positions returned by useCursorPosition. This solution is flaky thou, because sometimes onNodeHover doesn't return null I user scrolls fast outside the canvas boundaries (hence the tooltip stays displayed forever). In this solution it's also recommended to use requestAnimationFrame to limit the listener on cursor position.
My question is based on the image here
The above uses the angular plugin br-fullpage (angular version of the jquery's fullpage.js plugin) to create a vertical scrolling website. However unlike fullpage.js, br-fullpage is somewhat lacking, and makes it hard for me to determine the current page being displayed on the screen. The only way that i can possibly use (unless if i didn't aware of other methods) to determine which page is being displayed right now, is by using the margin-top value (yellow highlighted).
However everytime i tried to get the margin-top value, i always get 0px instead of the highlighted value. I don't understand what is the problem with this, and it makes me hard to do the animation if i don't know which page that i am currently on when the page is refreshed.
So how can i get the correct margin-top value below? Or is there any other method that i can use to know the current active page displayed on the screen?
Thanks
Can you use sessionStorage.getItem('br-fullpage-index')? This won't give you the margin, but should contain the current page index.
I'm not sure if this is a bug or just something I'm missing.
I've added 2 multi-images to the constants "RadioSelectedImage" and "RadioUnselectedImage", and they work fine except in their pressed state. For example: the custom image I added to the unselected constant appears just fine in my RadioButton before any interaction, but when I press it, the image changes to the native image, and when I release it, it changes to my custom selected image as expected.
I thought the problem was with RadioButton's pressed UIID, but I don't see anything that could be changing its image. I'm deriving everything in the pressed state from the unselected state.
Furthermore, if I set the constant "IncludeNativeBool" to false, then it all works as expected, and my custom image appears even in the pressed state. I'd rather not do that though, since I rely on the native theme for some components in my app.
Am I missing something here or is this a bug? If it's the latter, is there a workaround?
It should be radioSelectedImage, radioUnselectedImage, radioSelectedFocusImage & radioUnselectedFocusImage.