-
-
Notifications
You must be signed in to change notification settings - Fork 5.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Mobile: Resolves #10883: Remove slider component module and replace integer settings with new validated component #11822
Conversation
interface Props { | ||
settingId: string; | ||
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied | ||
value: any; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Wouldn't the value always be a string? (or a number?)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You're right. I've now updated it to a number type
Thanks for fixing this @mrjo118, that looks good to me. Just running CI again and waiting to pass (probably was an unrelated random failure) |
It was a variable no longer in use due to the change being combined with PR #11821 . I've pushed up a commit now which should fix that |
All good now |
This is an alternative solution to PR #11069 which minimises the impact, so that validation is isolated to a new ValidatedIntegerInput component. This was proposed by @personalizedrefrigerator in order to reduce the scope of the change, making it easier to review and test.
On mobile, a react native slider component is used where integer values are entered as a configuration setting. This is not user friendly where the value is a large number. The desktop app instead uses a text input with the number type, which disallows restricted characters to be entered and also has increment and decrement buttons which appear when hovering over (which are capped at the min and max values for the setting). In order to improve usability on mobile, I have removed the react-native-community/slider component entirely from the project, and implemented a custom TextInput component to replace them in the mobile app, which utilises validation hints for invalid and out of bound values.
Note that in the case where the user attempts to save an invalid value, or leave the screen with an invalid value present, the value will not save / be reverted to the original saved value. Also note that if the value of an integer configuration setting is changed to invalid values only, a new change to enable the save button will not occur until a valid value which is different to the stored value has been entered.
The attached video shows the new behaviour:
https://github.com/user-attachments/assets/eb839075-fdd7-4baf-8efa-35533adfb321
This will resolve #10883