Joplin
/
joplin
mirror of https://github.com/laurent22/joplin.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Mobile: Resolves #10883: Remove slider component module and replace integer settings with new validated component (#11822)

pull/12020/head^2
mrjo118 2025-03-27 21:01:09 +00:00 committed by GitHub
parent ff0321e906
commit 1f05a3212f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 166 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintignore
View File

@ -750,6 +750,8 @@ packages/app-mobile/components/screens/ConfigScreen/SettingItem.js
packages/app-mobile/components/screens/ConfigScreen/SettingTextInput.js
packages/app-mobile/components/screens/ConfigScreen/SettingsButton.js
packages/app-mobile/components/screens/ConfigScreen/SettingsToggle.js
packages/app-mobile/components/screens/ConfigScreen/ValidatedIntegerInput.test.js
packages/app-mobile/components/screens/ConfigScreen/ValidatedIntegerInput.js
packages/app-mobile/components/screens/ConfigScreen/configScreenStyles.js
packages/app-mobile/components/screens/ConfigScreen/plugins/EnablePluginSupportPage.js
packages/app-mobile/components/screens/ConfigScreen/plugins/InstalledPluginBox.js

2
.gitignore vendored
View File

@ -725,6 +725,8 @@ packages/app-mobile/components/screens/ConfigScreen/SettingItem.js
packages/app-mobile/components/screens/ConfigScreen/SettingTextInput.js
packages/app-mobile/components/screens/ConfigScreen/SettingsButton.js
packages/app-mobile/components/screens/ConfigScreen/SettingsToggle.js
packages/app-mobile/components/screens/ConfigScreen/ValidatedIntegerInput.test.js
packages/app-mobile/components/screens/ConfigScreen/ValidatedIntegerInput.js
packages/app-mobile/components/screens/ConfigScreen/configScreenStyles.js
packages/app-mobile/components/screens/ConfigScreen/plugins/EnablePluginSupportPage.js
packages/app-mobile/components/screens/ConfigScreen/plugins/InstalledPluginBox.js

62
.yarn/patches/@react-native-community-slider-npm-4.4.4-d78e472f48.patch
View File

@ -1,62 +0,0 @@
diff --git a/android/src/newarch/java/com/reactnativecommunity/slider/ReactSliderManager.java b/android/src/newarch/java/com/reactnativecommunity/slider/ReactSliderManager.java
index a5bb95eec3337b93a2338a2869a2bda176c91cae..87817688eb280c2f702c26dc35558c6a0a4db1ea 100644
--- a/android/src/newarch/java/com/reactnativecommunity/slider/ReactSliderManager.java
+++ b/android/src/newarch/java/com/reactnativecommunity/slider/ReactSliderManager.java
@@ -42,12 +42,20 @@ public class ReactSliderManager extends SimpleViewManager<ReactSlider> implement
public void onProgressChanged(SeekBar seekbar, int progress, boolean fromUser) {
ReactSlider slider = (ReactSlider)seekbar;
- if(progress < slider.getLowerLimit()) {
- progress = slider.getLowerLimit();
- seekbar.setProgress(progress);
- } else if (progress > slider.getUpperLimit()) {
- progress = slider.getUpperLimit();
- seekbar.setProgress(progress);
+ // During initialization, lowerLimit can be greater than upperLimit.
+ //
+ // If a change event is received during this, we need a check to prevent
+ // infinite recursion.
+ //
+ // Issue: https://github.com/callstack/react-native-slider/issues/571
+ if (slider.getLowerLimit() <= slider.getUpperLimit()) {
+ if(progress < slider.getLowerLimit()) {
+ progress = slider.getLowerLimit();
+ seekbar.setProgress(progress);
+ } else if (progress > slider.getUpperLimit()) {
+ progress = slider.getUpperLimit();
+ seekbar.setProgress(progress);
+ }
}
ReactContext reactContext = (ReactContext) seekbar.getContext();
diff --git a/android/src/oldarch/java/com/reactnativecommunity/slider/ReactSliderManager.java b/android/src/oldarch/java/com/reactnativecommunity/slider/ReactSliderManager.java
index 3ff5930f85a3cd92c2549925f41058abb188a57e..ab3681fdfe0b736c97020e1434e450c8183e6f18 100644
--- a/android/src/oldarch/java/com/reactnativecommunity/slider/ReactSliderManager.java
+++ b/android/src/oldarch/java/com/reactnativecommunity/slider/ReactSliderManager.java
@@ -30,12 +30,20 @@ public class ReactSliderManager extends SimpleViewManager<ReactSlider> {
public void onProgressChanged(SeekBar seekbar, int progress, boolean fromUser) {
ReactSlider slider = (ReactSlider)seekbar;
- if(progress < slider.getLowerLimit()) {
- progress = slider.getLowerLimit();
- seekbar.setProgress(progress);
- } else if(progress > slider.getUpperLimit()) {
- progress = slider.getUpperLimit();
- seekbar.setProgress(progress);
+ // During initialization, lowerLimit can be greater than upperLimit.
+ //
+ // If a change event is received during this, we need a check to prevent
+ // infinite recursion.
+ //
+ // Issue: https://github.com/callstack/react-native-slider/issues/571
+ if (slider.getLowerLimit() <= slider.getUpperLimit()) {
+ if(progress < slider.getLowerLimit()) {
+ progress = slider.getLowerLimit();
+ seekbar.setProgress(progress);
+ } else if (progress > slider.getUpperLimit()) {
+ progress = slider.getUpperLimit();
+ seekbar.setProgress(progress);
+ }
}
ReactContext reactContext = (ReactContext) seekbar.getContext();

1
package.json
View File

@ -108,7 +108,6 @@
"app-builder-lib@24.4.0": "patch:app-builder-lib@npm%3A24.4.0#./.yarn/patches/app-builder-lib-npm-24.4.0-05322ff057.patch",
"nanoid": "patch:nanoid@npm%3A3.3.7#./.yarn/patches/nanoid-npm-3.3.7-98824ba130.patch",
"pdfjs-dist": "patch:pdfjs-dist@npm%3A3.11.174#./.yarn/patches/pdfjs-dist-npm-3.11.174-67f2fee6d6.patch",
"@react-native-community/slider": "patch:@react-native-community/slider@npm%3A4.4.4#./.yarn/patches/@react-native-community-slider-npm-4.4.4-d78e472f48.patch",
"husky": "patch:husky@npm%3A3.1.0#./.yarn/patches/husky-npm-3.1.0-5cc13e4e34.patch",
"chokidar@^2.0.0": "3.5.3",
"react-native@0.74.1": "patch:react-native@npm%3A0.74.1#./.yarn/patches/react-native-npm-0.74.1-754c02ae9e.patch",

41
packages/app-mobile/components/screens/ConfigScreen/SettingComponent.tsx
View File

@ -5,13 +5,12 @@ import { View, Text } from 'react-native';
import Setting, { AppType } from '@joplin/lib/models/Setting';
import Dropdown from '../../Dropdown';
import { ConfigScreenStyles } from './configScreenStyles';
import Slider from '@react-native-community/slider';
import SettingsToggle from './SettingsToggle';
import FileSystemPathSelector from './FileSystemPathSelector';
import ValidatedIntegerInput from './ValidatedIntegerInput';
import SettingTextInput from './SettingTextInput';
import shim from '@joplin/lib/shim';
import { themeStyle } from '../../global-style';
import { useId } from 'react';
interface Props {
settingId: string;
@ -41,8 +40,6 @@ const SettingComponent: React.FunctionComponent<Props> = props => {
const descriptionComp = !settingDescription ? null : <Text style={styleSheet.settingDescriptionText}>{settingDescription}</Text>;
const containerStyles = props.styles.getContainerStyle(!!settingDescription);
const labelId = useId();
if (md.isEnum) {
const value = props.value?.toString();
@ -93,34 +90,16 @@ const SettingComponent: React.FunctionComponent<Props> = props => {
/>
);
} else if (md.type === Setting.TYPE_INT) {
const unitLabel = md.unitLabel ? md.unitLabel(props.value) : props.value;
const minimum = 'minimum' in md ? md.minimum : 0;
const maximum = 'maximum' in md ? md.maximum : 10;
const label = md.label();
// Note: Do NOT add the minimumTrackTintColor and maximumTrackTintColor props
// on the Slider as they are buggy and can crash the app on certain devices.
// https://github.com/laurent22/joplin/issues/2733
// https://github.com/react-native-community/react-native-slider/issues/161
return (
<View key={props.settingId} style={styleSheet.settingContainer}>
<Text key="label" style={styleSheet.settingText} nativeID={labelId}>
{label}
</Text>
<View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', flex: 1 }}>
<Text style={styleSheet.sliderUnits}>{unitLabel}</Text>
<Slider
key="control"
style={{ flex: 1 }}
step={md.step}
minimumValue={minimum}
maximumValue={maximum}
value={props.value}
onValueChange={newValue => void props.updateSettingValue(props.settingId, newValue)}
accessibilityHint={label}
/>
</View>
</View>
<ValidatedIntegerInput
settingId={props.settingId}
value={props.value}
themeId={props.themeId}
styles={props.styles}
label={md.label()}
updateSettingValue={props.updateSettingValue}
description={descriptionComp}
/>
);
} else if (md.type === Setting.TYPE_STRING) {
if (['sync.2.path', 'plugins.devPluginPaths'].includes(md.key) && (shim.fsDriver().isUsingAndroidSAF() || shim.mobilePlatform() === 'web')) {

52
packages/app-mobile/components/screens/ConfigScreen/ValidatedIntegerInput.test.tsx Normal file
View File

@ -0,0 +1,52 @@
import { validate } from './ValidatedIntegerInput';
import Setting from '@joplin/lib/models/Setting';
describe('ValidatedIntegerInput', () => {
test.each(
['aaa', '1a1', '1a', '1.1', '1-1', '1-', '', null],
)('should return error message for invalid value or empty value for setting without range', async (input) => {
const md = Setting.settingMetadata('style.editor.contentMaxWidth');
const value = validate(input, md, md.label());
expect(value).toBe('Editor maximum width must be a valid whole number');
});
test.each(
['aaa', '1a1', '1a', '1.1', '1-1', '1-', '', null],
)('should return error message for invalid or empty value for setting with range', async (input) => {
const md = Setting.settingMetadata('revisionService.ttlDays');
const value = validate(input, md, md.label());
expect(value).toBe('Keep note history for must be a valid whole number');
});
test.each(
['0', '-1'],
)('should return error message for too low integer values', async (input) => {
const md = Setting.settingMetadata('revisionService.ttlDays');
const value = validate(input, md, md.label());
expect(value).toBe('Keep note history for cannot be less than 1');
});
test.each(
['731', '1e20'],
)('should return error message for too high integer values', async (input) => {
const md = Setting.settingMetadata('revisionService.ttlDays');
const value = validate(input, md, md.label());
expect(value).toBe('Keep note history for cannot be greater than 730');
});
test.each(
['-999999999999999', '0', '999999999999999', '0.0'],
)('should return empty string for valid integer values for setting without range', async (input) => {
const md = Setting.settingMetadata('style.editor.contentMaxWidth');
const value = validate(input, md, md.label());
expect(value).toBe('');
});
test.each(
['1', '300', '730', '1.0'],
)('should return empty string for valid integer values for setting with range', async (input) => {
const md = Setting.settingMetadata('revisionService.ttlDays');
const value = validate(input, md, md.label());
expect(value).toBe('');
});
});

91
packages/app-mobile/components/screens/ConfigScreen/ValidatedIntegerInput.tsx Normal file
View File

@ -0,0 +1,91 @@
import * as React from 'react';
import { View, Text, TextInput } from 'react-native';
import Setting, { AppType, SettingItem } from '@joplin/lib/models/Setting';
import { ConfigScreenStyles } from './configScreenStyles';
import { UpdateSettingValueCallback } from './types';
import { themeStyle } from '../../global-style';
import { HelperText } from 'react-native-paper';
import { FunctionComponent, ReactNode, useId, useState } from 'react';
import { _ } from '@joplin/lib/locale';
interface Props {
settingId: string;
value: number;
styles: ConfigScreenStyles;
themeId: number;
label: string;
updateSettingValue: UpdateSettingValueCallback;
description?: ReactNode;
}
export const validate = (newValue: string, md: SettingItem, label: string) => {
const minimum = 'minimum' in md ? md.minimum : null;
const maximum = 'maximum' in md ? md.maximum : null;
if (!newValue || !Number.isInteger(Number(newValue))) {
return _('%s must be a valid whole number', label);
}
const newValueInt = Number(newValue);
if (maximum && newValueInt > maximum) {
return _('%s cannot be greater than %s', label, maximum);
}
if (minimum && newValueInt < minimum) {
return _('%s cannot be less than %s', label, minimum);
}
return '';
};
const ValidatedIntegerInput: FunctionComponent<Props> = props => {
const [valueState, setValueState] = useState(props.value?.toString());
const md = Setting.settingMetadata(props.settingId);
const themeId = props.themeId;
const theme = themeStyle(themeId);
const settingDescription = md.description ? md.description(AppType.Mobile) : '';
const styleSheet = props.styles.styleSheet;
const containerStyles = props.styles.getContainerStyle(!!settingDescription);
const labelId = useId();
const label = md.unitLabel?.toString() !== undefined ? `${props.label} (${md.unitLabel(md.value)})` : `${props.label}`;
const hasErrors = () => {
return validate(valueState, md, props.label) !== '';
};
return (
<View key={props.settingId} style={containerStyles.outerContainer}>
<View key={props.settingId} style={containerStyles.innerContainer}>
<Text key="label" style={styleSheet.settingText} nativeID={labelId}>
{label}
</Text>
<TextInput
keyboardType="numeric"
autoCorrect={false}
autoComplete="off"
selectionColor={theme.textSelectionColor}
keyboardAppearance={theme.keyboardAppearance}
autoCapitalize="none"
key="control"
style={hasErrors() ? { ...styleSheet.settingControl, ...styleSheet.invalidInput } : styleSheet.settingControl}
value={valueState}
onChangeText={newValue => {
setValueState(newValue);
void props.updateSettingValue(props.settingId, validate(newValue, md, props.label) === '' ? newValue : Setting.value(props.settingId));
}}
maxLength={15}
secureTextEntry={!!md.secure}
aria-labelledby={labelId}
disableFullscreenUI={true}
/>
</View>
{hasErrors() ? <HelperText type="error" style={styleSheet.invalidMessage} visible={true}>
{validate(valueState, md, props.label)}
</HelperText> : null}
{props.description}
</View>
);
};
export default ValidatedIntegerInput;

9
packages/app-mobile/components/screens/ConfigScreen/configScreenStyles.ts
View File

@ -40,6 +40,8 @@ export interface ConfigScreenStyleSheet {
sidebarHeaderText: TextStyle;
settingControl: TextStyle;
invalidMessage: TextStyle;
invalidInput: TextStyle;
}
interface ContainerStyles {
@ -237,6 +239,13 @@ const configScreenStyles = (themeId: number): ConfigScreenStyles => {
fontWeight: 'bold',
fontSize: theme.fontSize,
},
invalidMessage: {
color: theme.colorError,
fontSize: theme.fontSize * 0.9,
},
invalidInput: {
borderBottomColor: theme.colorWarn,
},
});
return {

25
packages/app-mobile/ios/Podfile.lock
View File

@ -1063,27 +1063,6 @@ PODS:
- React-Core
- react-native-safe-area-context (4.10.8):
- React-Core
- react-native-slider (4.4.4):
- DoubleConversion
- glog
- hermes-engine
- RCT-Folly (= 2024.01.01.00)
- RCTRequired
- RCTTypeSafety
- React-Codegen
- React-Core
- React-debug
- React-Fabric
- React-featureflags
- React-graphics
- React-ImageManager
- React-NativeModulesApple
- React-RCTFabric
- React-rendererdebug
- React-utils
- ReactCommon/turbomodule/bridging
- ReactCommon/turbomodule/core
- Yoga
- react-native-sqlite-storage (6.0.1):
- React-Core
- react-native-version-info (1.1.1):
@ -1446,7 +1425,6 @@ DEPENDENCIES:
- react-native-rsa-native (from `../node_modules/react-native-rsa-native`)
- "react-native-saf-x (from `../node_modules/@joplin/react-native-saf-x`)"
- react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
- "react-native-slider (from `../node_modules/@react-native-community/slider`)"
- react-native-sqlite-storage (from `../node_modules/react-native-sqlite-storage`)
- react-native-version-info (from `../node_modules/react-native-version-info`)
- react-native-webview (from `../node_modules/react-native-webview`)
@ -1600,8 +1578,6 @@ EXTERNAL SOURCES:
:path: "../node_modules/@joplin/react-native-saf-x"
react-native-safe-area-context:
:path: "../node_modules/react-native-safe-area-context"
react-native-slider:
:path: "../node_modules/@react-native-community/slider"
react-native-sqlite-storage:
:path: "../node_modules/react-native-sqlite-storage"
react-native-version-info:
@ -1737,7 +1713,6 @@ SPEC CHECKSUMS:
react-native-rsa-native: a7931cdda1f73a8576a46d7f431378c5550f0c38
react-native-saf-x: 318d0cdb38f4618bd7ef5840d4f5c12e097dfbe7
react-native-safe-area-context: b72c4611af2e86d80a59ac76279043d8f75f454c
react-native-slider: 921ce51608bfd0680d64617bfff286f747e27160
react-native-sqlite-storage: 0c84826214baaa498796c7e46a5ccc9a82e114ed
react-native-version-info: f0b04e16111c4016749235ff6d9a757039189141
react-native-webview: a71525b1ab760230fbf37303d8371fbe72051c7d

1
packages/app-mobile/package.json
View File

@ -33,7 +33,6 @@
"@react-native-community/geolocation": "3.3.0",
"@react-native-community/netinfo": "11.3.3",
"@react-native-community/push-notification-ios": "1.11.0",
"@react-native-community/slider": "4.5.5",
"assert-browserify": "2.0.0",
"buffer": "6.0.3",
"color": "3.2.1",

30
readme/licenses.md
View File

@ -3201,36 +3201,6 @@ From https://github.com/react-native-community/push-notification-ios.
**MIT**:
```
MIT License
Copyright (c) 2020 react-native-community
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.%
```
### @react-native-community/slider@4.4.4
From https://github.com/callstack/react-native-slider.
**MIT**:
Copyright: Copyright (c) 2019 react-native-community
See [Appendix B](#appendix-b-the-mit-license) for the full MIT license.

15
yarn.lock
View File

@ -8369,7 +8369,6 @@ __metadata:
"@react-native-community/geolocation": 3.3.0
"@react-native-community/netinfo": 11.3.3
"@react-native-community/push-notification-ios": 1.11.0
"@react-native-community/slider": 4.5.5
"@react-native/babel-preset": 0.74.86
"@react-native/metro-config": 0.74.87
"@sqlite.org/sqlite-wasm": 3.46.0-build2
@ -11231,20 +11230,6 @@ __metadata:
languageName: node
linkType: hard
"@react-native-community/slider@npm:4.4.4":
version: 4.4.4
resolution: "@react-native-community/slider@npm:4.4.4"
checksum: 65d79b72d100aab75e9051315798935a2419202e157f5e35dedb4e2843ccdd93816b553c9a7a41642f5140e5a05e20326a27ef65e9ed9c53efc59d8755a5d91f
languageName: node
linkType: hard
"@react-native-community/slider@patch:@react-native-community/slider@npm%3A4.4.4#./.yarn/patches/@react-native-community-slider-npm-4.4.4-d78e472f48.patch::locator=root%40workspace%3A.":
version: 4.4.4
resolution: "@react-native-community/slider@patch:@react-native-community/slider@npm%3A4.4.4#./.yarn/patches/@react-native-community-slider-npm-4.4.4-d78e472f48.patch::version=4.4.4&hash=1120f2&locator=root%40workspace%3A."
checksum: c4397dd2e914f52e3d9b4058d3cf850e67d99c85a59492835647513af85ba62ba182c5c7655fd35d6f768155d45c0c8b5eb0adaad803165d9fec508b77b19a2b
languageName: node
linkType: hard
"@react-native/assets-registry@npm:0.74.83":
version: 0.74.83
resolution: "@react-native/assets-registry@npm:0.74.83"