[RNMobile] Update Slider to reflect changes immediately

[dratwas]

Description

This PR fixes wordpress-mobile/gutenberg-mobile#2192
gutenberg-mobile PR: wordpress-mobile/gutenberg-mobile#2286

In this PR i use onValueChange instead of onSlidingComplete to set the value.

Outdated

Unfortunately in the current state, it is laggy because of performance issues in block-list. (The whole app is re-rendered on every change). I tried these changes with that PR (https://github.com//pull/22144) - and it works much better. I suggest merging the PR with optimization first.

I need to NOTE that it is not a performant way of doing that kind of thing in React Native since the communication is async and we can lose frames. Especially in our case, because there are a lot of things that happen on each change of attribute. We shouldn't rely on the value from redux when we "animate" the height etc. It doesn't mean that we shouldn't use onValueChange instead of onSlidingComplete but we should change how it is handled in Block. As an example, In the spacer block, we could rely on the local state and set the attribute with a debounce effect. Thanks to that the height should be more responsive because right now I can feel the delay.

There is also an issue with the undo mechanism that I described here - wordpress-mobile/gutenberg-mobile#2192 (comment)

This issue was fixed, however it introduced a regression and had to be reverted.

How has this been tested?

• open mobile app

• add spacer block
• open settings of the spacer block
• change the height of spacer - change should be visible while moving the slider
• change the height a few time more
• press on the undo button - the height should be reset to initial one
• the undo level should be created only when we change a different attribute

• add button block
• open settings of that button
• change the border-radius - change should be visible while moving the slider
• the undo level should be created only when we change a different attribute

• add spacer block and open settings
• change the input value to less than minimum value i.e 2
• the slider should show the minimum value (20)
• the height of the block should be changed to the minimum value (20)
• there should be a possibility to change the input value
• after return, if the input value is lower than the minimum value then is set to minimum and the same with the maximum limit

Outdated

In the current state, the undo level is created for every change that means 10 undo levels will be created when sliding from 0 to 10 (https://github.com/wordpress-mobile/gutenberg-mobile/issues/2192#issuecomment-630010164)

Screenshots

without optimization	with optimimsation

Types of changes

Update Range Control to reflect changes immediately

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[github-actions]

Size Change: 0 B

Total Size: 1.16 MB

ℹ️ View Unchanged

Filename	Size	Change
build/a11y/index.js	1.14 kB	0 B
build/annotations/index.js	3.67 kB	0 B
build/api-fetch/index.js	3.44 kB	0 B
build/autop/index.js	2.82 kB	0 B
build/blob/index.js	620 B	0 B
build/block-directory/index.js	7.96 kB	0 B
build/block-directory/style-rtl.css	953 B	0 B
build/block-directory/style.css	952 B	0 B
build/block-editor/index.js	126 kB	0 B
build/block-editor/style-rtl.css	10.7 kB	0 B
build/block-editor/style.css	10.7 kB	0 B
build/block-library/editor-rtl.css	8.5 kB	0 B
build/block-library/editor.css	8.5 kB	0 B
build/block-library/index.js	133 kB	0 B
build/block-library/style-rtl.css	7.42 kB	0 B
build/block-library/style.css	7.43 kB	0 B
build/block-library/theme-rtl.css	729 B	0 B
build/block-library/theme.css	730 B	0 B
build/block-serialization-default-parser/index.js	1.88 kB	0 B
build/block-serialization-spec-parser/index.js	3.1 kB	0 B
build/blocks/index.js	47.7 kB	0 B
build/components/index.js	200 kB	0 B
build/components/style-rtl.css	15.7 kB	0 B
build/components/style.css	15.7 kB	0 B
build/compose/index.js	9.68 kB	0 B
build/core-data/index.js	12.3 kB	0 B
build/data-controls/index.js	1.29 kB	0 B
build/data/index.js	8.55 kB	0 B
build/date/index.js	5.38 kB	0 B
build/deprecated/index.js	772 B	0 B
build/dom-ready/index.js	568 B	0 B
build/dom/index.js	4.47 kB	0 B
build/edit-navigation/index.js	11.5 kB	0 B
build/edit-navigation/style-rtl.css	1.16 kB	0 B
build/edit-navigation/style.css	1.16 kB	0 B
build/edit-post/index.js	304 kB	0 B
build/edit-post/style-rtl.css	5.61 kB	0 B
build/edit-post/style.css	5.61 kB	0 B
build/edit-site/index.js	17 kB	0 B
build/edit-site/style-rtl.css	3.06 kB	0 B
build/edit-site/style.css	3.06 kB	0 B
build/edit-widgets/index.js	11.8 kB	0 B
build/edit-widgets/style-rtl.css	2.45 kB	0 B
build/edit-widgets/style.css	2.45 kB	0 B
build/editor/editor-styles-rtl.css	537 B	0 B
build/editor/editor-styles.css	539 B	0 B
build/editor/index.js	45.3 kB	0 B
build/editor/style-rtl.css	3.8 kB	0 B
build/editor/style.css	3.79 kB	0 B
build/element/index.js	4.65 kB	0 B
build/escape-html/index.js	733 B	0 B
build/format-library/index.js	7.71 kB	0 B
build/format-library/style-rtl.css	547 B	0 B
build/format-library/style.css	548 B	0 B
build/hooks/index.js	2.13 kB	0 B
build/html-entities/index.js	621 B	0 B
build/i18n/index.js	3.56 kB	0 B
build/is-shallow-equal/index.js	711 B	0 B
build/keyboard-shortcuts/index.js	2.52 kB	0 B
build/keycodes/index.js	1.94 kB	0 B
build/list-reusable-blocks/index.js	3.11 kB	0 B
build/list-reusable-blocks/style-rtl.css	476 B	0 B
build/list-reusable-blocks/style.css	476 B	0 B
build/media-utils/index.js	5.33 kB	0 B
build/notices/index.js	1.79 kB	0 B
build/nux/index.js	3.4 kB	0 B
build/nux/style-rtl.css	671 B	0 B
build/nux/style.css	668 B	0 B
build/plugins/index.js	2.56 kB	0 B
build/primitives/index.js	1.41 kB	0 B
build/priority-queue/index.js	789 B	0 B
build/redux-routine/index.js	2.85 kB	0 B
build/rich-text/index.js	13.9 kB	0 B
build/server-side-render/index.js	2.77 kB	0 B
build/shortcode/index.js	1.7 kB	0 B
build/token-list/index.js	1.27 kB	0 B
build/url/index.js	4.06 kB	0 B
build/viewport/index.js	1.85 kB	0 B
build/warning/index.js	1.14 kB	0 B
build/wordcount/index.js	1.17 kB	0 B

_{compressed-size-action}

[geriux]

LGTM!

One thing to mention for future references is that the PR description is a bit outdated because both the block list optimization and the transient edits issues were addressed. ✅

I need to NOTE that it is not a performant way of doing that kind of thing in React Native since the communication is async and we can lose frames. Especially in our case, because there are a lot of things that happen on each change of attribute. We shouldn't rely on the value from redux when we "animate" the height etc.

I agree with this, luckily after the optimizations you did in the other PRs it is working fine for these cases. But definitely something to keep in mind.

I tested the Spacer Buttons and Cover blocks on both main apps and demo for iOS and Android.

Great work @dratwas !

[lukewalczak]

Observing changes immediately looks good in blocks such as Spacer or Button 🎉
However, I have found one issue - using input next to the slider value cannot be changed to eg. 22, gif for the reference:

[dratwas]

Thanks for your review!

@lukewalczak I pushed new changes that fix the issue you mentioned. Could you please check it? :)

[lukewalczak]

Input issue is fixed! 🎉

[dratwas]

Hey @lukewalczak could you please re-check that one more time? After a long time all blockers are resolved and I updated this PR :)

[lukewalczak]

I've observed one more issue: there is an option to add mutiple dots in input next to the slider. Please check that

[dratwas]

Hey, @geriux could you please check this PR one more time? Luke is on holidays now :) I already fixed the issue with multiple dots. Now adding of dots is not allowed if the toFixed prop is not set.

[geriux]

Hey, @geriux could you please check this PR one more time? Luke is on holidays now :) I already fixed the issue with multiple dots. Now adding of dots is not allowed if the toFixed prop is not set.

Of course! will do 👍

[geriux]

LGTM!

Tested it on both iOS and Android, following the test cases and also different tests with Cover, Columns / Column (Using decimals), Latest posts, and Buttons block.

Nice work!