opt out of "move out of the way" functionality? - reactjs

I'm using react-beautiful-dnd for my project.
I'm trying to make two draggables swap places (between droppables). Basically I only allow 1 draggable per droppable.
Everything is working fine, except for one part. The feature "move out of the way" keeps moving draggables away when I drag over them, but I don't want that.
Does anyone know a way of NOT moving draggables out of the way?

I managed to find a solution myself! It's a hacky one, so if anyone knows a more clean way of doing it, please let me know.
If anyone else wonders how to do this, here's how I did it:
I created a class non-stranslatable:
.non-translatable {
-webkit-transform: unset !important;
transform: unset !important;
}
Then in my draggable component I added this:
className={cx('my-draggable', { // cx is from the classnames package
'non-translatable': !snapshot.isDragging,
})}
If you don't want to use classnames package, this is pretty much the same:
className={`my-draggable${!snapshot.isDragging ? ' non-translatable' : ''}`}
Like I said, this is pretty hacky, so if there's a more "correct" way, let me know!

Related

smooth horizontal scroll - REACT THREE FIBER

I've been trying to make a small horizontal scroll with react three fiber so I can later add some WebGL Distorsion on the elements and even though i succeeded in the most basic way, there are still some things that need improvement :
(here is the codesandbox corresponding :https://codesandbox.io/s/horizontal-scroll-with-react-three-fiber-c0okfu?file=/src/Scene.js)
first and foremost I want a smooth scroll and can't seem to be able to make it, I used the lerp function to make it but the result doesn't work very well :
let scroll = 0;
scroll = (scroll - scrollTargetMapped) * 0.03;
// any other frame, groupRef.current is undefined, don't really know why
// but because of it, i must put my logic inside an if loop
if (groupRef.current) {
groupRef.current.position.x = THREE.MathUtils.lerp(
scroll,
-scrollTarget,
0.01
);
}
secondly, the elements on my scene are placed kind of in a random way and the scene is not at all responsive. I would love to mimic the html logic and put my first element like 50px away from the left side of the screen but not sure if it's really possible with react threejs :)
If someone has any answer to one of those question, I take it 🙂
Thanks in advance !
For those interested, I managed to find a solution, using one of drei components : ScrollControl, it works perfectly !
https://codesandbox.io/s/horizontal-scroll-with-react-three-fiber-c0okfu?file=/src/Scene.js
For more info on the said component, check out the doc : https://docs.pmnd.rs/drei/controls/scroll-controls

How to click element with zero height with Capybara?

The error I'm getting is: element not interactable: element has zero size
I have an element with a button tag with text. However, the element.style has two attributes of 0px height (and 0px padding, if that matters).
The only workaround I've found is to interact with some other element that I can find (higher up in the hierarchy of the markup), and then use x and y offsets to click this button. However that ends up flaky because the size of the element can change, and the button is off to the lower right corner.
I'm willing to go the extra mile and calculate the proper coordinates, but I'm not able to figure out how to get the width of the element either. I'm also willing to just use some javascript to click as a last resort. Ideally I'd love to know if there is something more clean and elegant for this problem.
Thank you!
I think you can enable js for this test and use a trick for it.
Smth like that:
page.execute_script("$('#container img').css('height', '10px;')")
find('#container img').click
page.execute_script("$('#container img').css('height', '0')")
I ended up using actionbuilder to work around this problem, like this:
el = find('button', :text => '+ 1').native
actionbuilder = page.driver.browser.action # Use actionbuilder to workaround zero height button
actionbuilder.click(el).perform
I'm not sure if this is the way to go but that seems to have helped and maybe might help someone else out there.

React Native - Is it possible to control the speed at which the ScrollView scrolls

I have looked at many posts and they seem to suggest that it is not possible. However, they are very old posts. I am curious if this is possible now.
I am using expo in my project and referred the below,
https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz
I don't seem to find the duration variable as suggested in the below pull request that is requested as a feature.
https://github.com/facebook/react-native/pull/17422
Any help would be appreciated.Any workarounds if this is not possible? I am thinking of setting a time interval and wrap the scrollview around but I am not sure if that works.
would like to know why you need to do this. Maybe understand we'll can help with other way.
I got this working by having setInterval call a function(in which you define the logic or the pace at which the scroll should move).
this.interval= setInterval(this.scrollwithSpeed, 100); // Set the function to this timer
scrollwithSpeed() {
position = this.state.currentPosition + x; // x decides the speed and currentPosition is set to 0 initially.
this.scrollObject.scrollTo(
{ y: position, animated: true }
);
this.setState({ currentPosition: position });
}
Make sure you call clearInterval(this.interval) after it is done.

Creating a GroupBox with _createChildControlImpl()

I tryed to create a group box with the _createChildControlImpl()-Methode but the layout looks like crap as you can see her http://tinyurl.com/odzgy3v
But when I implement it without _createChildControlImpl() it works fine: http://tinyurl.com/kwzvdm2
Could anybody please tell me what's the reason for this? Thanks in advance!
Have a look at your browser console - there is already a hint.
When you introduce child controls qooxdoo can't reuse the former default appearance of widgets because the appearance id changed (from "groupbox" to "widget/groupBox"). So you have to add your own appearance theme (which can simply forward by using an alias):
qx.Theme.define("test.myAwesomeTheme", {
extend : playground.theme.Appearance,
appearances :
{
"widget/groupBox" : "groupbox",
}
});
qx.theme.manager.Appearance.getInstance().setTheme(test.myAwesomeTheme);
I'm extending playground.theme.Appearance here which extends qx.theme.indigo.Appearance which again extends qx.theme.simple.Appearance. And their you have the groubox definition we are forwarding to.
Here is the complete playground sample.
You are supposed to implement _createChildControl, but not call it directly. Instead call getChildControl in your constructor and let it call _createChildControl, if needed, since it is also caching the result.
GroupBox seems to be a bad fit for what you want - it seems to assume identically sized and shaped elements inside its frame sub-widget, when filled from within the implementation of _createChildControl().
Use another Composite() inside the main container instead, add "Registration" as yet another child control of type label as the first child of the custom widget, and things will look much better (although not identical).
Quick and sloppy proof of concept: http://tinyurl.com/m7ykhta

Is there a way to identify bolded (<b></b>) with Celerity

I'm using celerity to do some screen scraping and have come across the need to identify text elements that are in bold. Celerity offers a strong method but does not offer a bold method. Has anyone figured out a clever way around this with Celerity or other tool. I tried using:
browser.html.gsub!(<b>,<strong>)
browser.html.gsub!(</b>,</strong>)
I though I could replace the bold elements with strong elements and then simply use celerity's strong method, but this didn't seem to work.
Thanks in advance for your help.
It seems strange that b is missing but you can try:
browser.elements_by_xpath('//b').each do |b|
puts "#{b} is a bold tag"
end

Resources