Skip to content
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

New preferences page layout #21852

Merged
merged 47 commits into from
Jul 17, 2023
Merged
Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
47 commits
Select commit Hold shift + click to select a range
1dac0bc
Add asset for PreferencesDJ.json
roryabraham Jun 29, 2023
7c9774b
Aggregate LottieAnimations in a single file
roryabraham Jun 29, 2023
0d94495
Extract HeaderWithBackButton propTypes to separate file
roryabraham Jun 29, 2023
7b28fe4
Convert to functional component
roryabraham Jun 29, 2023
122f2c2
Implement useDelayToggleButtonState hook
roryabraham Jun 29, 2023
44ff6c8
Create IllustratedHeaderPageLayout component
roryabraham Jun 29, 2023
b8d6631
Implement IllustratedHeaderPageLayout for the PreferencesPage
roryabraham Jun 29, 2023
33c8378
Use useLocalize hook
roryabraham Jun 29, 2023
090ae41
Create useEnvironment hook
roryabraham Jun 29, 2023
9ab59ba
Merge branch 'main' into Rory-PreferencesNewLayout
roryabraham Jun 29, 2023
ccaaa31
Use canvas renderer instead of svg
roryabraham Jun 29, 2023
4dfd392
Merge branch 'main' into Rory-PreferencesNewLayout
roryabraham Jul 11, 2023
11df205
use CONST for accessibilityRoleg
roryabraham Jul 11, 2023
72b663d
Use prop destructuring for IllustratedHeaderPageLayout
roryabraham Jul 11, 2023
7c8f8d0
Use prop destructuring for HeaderWithBackButton
roryabraham Jul 11, 2023
1f59a03
Remove unused defaultProps
roryabraham Jul 11, 2023
74f2c76
alphabetize props
roryabraham Jul 11, 2023
e3631d5
Wrap header with ScrollView
roryabraham Jul 11, 2023
81c199e
Fix overscroll bottom issue
roryabraham Jul 11, 2023
91f34ac
Create useOverscrollMeasurement hook
roryabraham Jul 11, 2023
0628574
Remove unused import
roryabraham Jul 11, 2023
d0ba9ca
Remove inline style
roryabraham Jul 11, 2023
8ed11f9
Merge branch 'main' into Rory-PreferencesNewLayout
roryabraham Jul 12, 2023
de3a9ca
Implement layout adjustments
roryabraham Jul 12, 2023
d6a5698
Hide scroll indicators (for macOS safari)
roryabraham Jul 12, 2023
32617a0
Fix overscroll issue on iOS
roryabraham Jul 12, 2023
707af5d
Fix header color regression
roryabraham Jul 12, 2023
cae0636
Add ivory for icon and title color
roryabraham Jul 12, 2023
4626110
Use opacity 0.8
roryabraham Jul 13, 2023
3a651ba
Merge branch 'main' into Rory-PreferencesNewLayout
roryabraham Jul 14, 2023
c547243
Create context for environment
roryabraham Jul 14, 2023
a5ba02f
Remove shiftUpOnePixel style
roryabraham Jul 14, 2023
8fd8fc0
Add missing useEffect dependency
roryabraham Jul 14, 2023
c95d408
Improve clarity of hook, now called useThrottledButtonState
roryabraham Jul 14, 2023
4ce61f7
Remove unused autoReset prop
roryabraham Jul 14, 2023
551e28a
Update PressableWithDelayToggle to use new hook
roryabraham Jul 14, 2023
7f398cd
Merge branch 'main' into Rory-PreferencesNewLayout
roryabraham Jul 14, 2023
1cfad23
Use useContext in withEnvironment
roryabraham Jul 14, 2023
d6141af
Memoize contextValue
roryabraham Jul 14, 2023
8b4f639
Change propTypes name back to reduce diff
roryabraham Jul 14, 2023
9f12b10
Fix Sidebar tests
roryabraham Jul 14, 2023
dff8ab7
Add missing propType comment
roryabraham Jul 14, 2023
7612821
Remove unused useOverscrollMeasurement hook
roryabraham Jul 14, 2023
3be7917
Merge branch 'main' into Rory-PreferencesNewLayout
roryabraham Jul 14, 2023
ae9d033
Apply changes from HeaderWithBackButton
roryabraham Jul 14, 2023
377e4e6
Remove outdated localization props from PreferencesPage
roryabraham Jul 14, 2023
1e2a9a3
Remove unused prop
roryabraham Jul 14, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions assets/animations/PreferencesDJ.json

Large diffs are not rendered by default.

21 changes: 21 additions & 0 deletions patches/react-native-web-lottie+1.4.4.patch
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
diff --git a/node_modules/react-native-web-lottie/dist/index.js b/node_modules/react-native-web-lottie/dist/index.js
index 7cd6b42..d0a405b 100644
--- a/node_modules/react-native-web-lottie/dist/index.js
+++ b/node_modules/react-native-web-lottie/dist/index.js
@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf3=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _react=_interopRequireWildcard(require("react"));var _reactDom=_interopRequireDefault(require("react-dom"));var _View=_interopRequireDefault(require("react-native-web/dist/exports/View"));var _lottieWeb=_interopRequireDefault(require("lottie-web"));var _jsxFileName="/Users/louislagrange/Documents/Projets/react-native-web-community/react-native-web-lottie/src/index.js";var Animation=function(_PureComponent){(0,_inherits2.default)(Animation,_PureComponent);function Animation(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,Animation);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(Animation)).call.apply(_getPrototypeOf2,[this].concat(args)));_this.animationDOMNode=null;_this.loadAnimation=function(props){if(_this.anim){_this.anim.destroy();}_this.anim=_lottieWeb.default.loadAnimation({container:_this.animationDOMNode,animationData:props.source,renderer:'svg',loop:props.loop||false,autoplay:props.autoPlay,rendererSettings:props.rendererSettings||{}});if(props.onAnimationFinish){_this.anim.addEventListener('complete',props.onAnimationFinish);}};_this.setAnimationDOMNode=function(ref){return _this.animationDOMNode=_reactDom.default.findDOMNode(ref);};_this.play=function(){if(!_this.anim){return;}for(var _len2=arguments.length,frames=new Array(_len2),_key2=0;_key2<_len2;_key2++){frames[_key2]=arguments[_key2];}_this.anim.playSegments(frames,true);};_this.reset=function(){if(!_this.anim){return;}_this.anim.stop();};return _this;}(0,_createClass2.default)(Animation,[{key:"componentDidMount",value:function componentDidMount(){var _this2=this;this.loadAnimation(this.props);if(typeof this.props.progress==='object'&&this.props.progress._listeners){this.props.progress.addListener(function(progress){var value=progress.value;var frame=value/(1/_this2.anim.getDuration(true));_this2.anim.goToAndStop(frame,true);});}}},{key:"componentWillUnmount",value:function componentWillUnmount(){if(typeof this.props.progress==='object'&&this.props.progress._listeners){this.props.progress.removeAllListeners();}}},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(this.props.source&&nextProps.source&&this.props.source.nm!==nextProps.source.nm){this.loadAnimation(nextProps);}}},{key:"render",value:function render(){return _react.default.createElement(_View.default,{style:this.props.style,ref:this.setAnimationDOMNode,__source:{fileName:_jsxFileName,lineNumber:71}});}}]);return Animation;}(_react.PureComponent);var _default=_react.default.forwardRef(function(props,ref){return _react.default.createElement(Animation,(0,_extends2.default)({},props,{ref:typeof ref=='function'?function(c){return ref(c&&c.anim);}:ref,__source:{fileName:_jsxFileName,lineNumber:76}}));});exports.default=_default;
\ No newline at end of file
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf3=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _react=_interopRequireWildcard(require("react"));var _reactDom=_interopRequireDefault(require("react-dom"));var _View=_interopRequireDefault(require("react-native-web/dist/exports/View"));var _lottieWeb=_interopRequireDefault(require("lottie-web"));var _jsxFileName="/Users/louislagrange/Documents/Projets/react-native-web-community/react-native-web-lottie/src/index.js";var Animation=function(_PureComponent){(0,_inherits2.default)(Animation,_PureComponent);function Animation(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,Animation);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(Animation)).call.apply(_getPrototypeOf2,[this].concat(args)));_this.animationDOMNode=null;_this.loadAnimation=function(props){if(_this.anim){_this.anim.destroy();}_this.anim=_lottieWeb.default.loadAnimation({container:_this.animationDOMNode,animationData:props.source,renderer:'canvas',loop:props.loop||false,autoplay:props.autoPlay,rendererSettings:props.rendererSettings||{}});if(props.onAnimationFinish){_this.anim.addEventListener('complete',props.onAnimationFinish);}};_this.setAnimationDOMNode=function(ref){return _this.animationDOMNode=_reactDom.default.findDOMNode(ref);};_this.play=function(){if(!_this.anim){return;}for(var _len2=arguments.length,frames=new Array(_len2),_key2=0;_key2<_len2;_key2++){frames[_key2]=arguments[_key2];}_this.anim.playSegments(frames,true);};_this.reset=function(){if(!_this.anim){return;}_this.anim.stop();};return _this;}(0,_createClass2.default)(Animation,[{key:"componentDidMount",value:function componentDidMount(){var _this2=this;this.loadAnimation(this.props);if(typeof this.props.progress==='object'&&this.props.progress._listeners){this.props.progress.addListener(function(progress){var value=progress.value;var frame=value/(1/_this2.anim.getDuration(true));_this2.anim.goToAndStop(frame,true);});}}},{key:"componentWillUnmount",value:function componentWillUnmount(){if(typeof this.props.progress==='object'&&this.props.progress._listeners){this.props.progress.removeAllListeners();}}},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(this.props.source&&nextProps.source&&this.props.source.nm!==nextProps.source.nm){this.loadAnimation(nextProps);}}},{key:"render",value:function render(){return _react.default.createElement(_View.default,{style:this.props.style,ref:this.setAnimationDOMNode,__source:{fileName:_jsxFileName,lineNumber:71}});}}]);return Animation;}(_react.PureComponent);var _default=_react.default.forwardRef(function(props,ref){return _react.default.createElement(Animation,(0,_extends2.default)({},props,{ref:typeof ref=='function'?function(c){return ref(c&&c.anim);}:ref,__source:{fileName:_jsxFileName,lineNumber:76}}));});exports.default=_default;
diff --git a/node_modules/react-native-web-lottie/src/index.js b/node_modules/react-native-web-lottie/src/index.js
index da0e363..f37104a 100644
--- a/node_modules/react-native-web-lottie/src/index.js
+++ b/node_modules/react-native-web-lottie/src/index.js
@@ -38,7 +38,7 @@ class Animation extends PureComponent {
this.anim = lottie.loadAnimation({
container: this.animationDOMNode,
animationData: props.source,
- renderer: 'svg',
+ renderer: 'canvas',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I found this seems to yield better framerates and also fixes a display but on iOS Safari with different animation (not yet included in the app)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed that on android web, the animation was extremely janky. When running it against localhost, it did not simply load.

Screen.Recording.2023-07-17.at.1.06.53.AM.mov
Screenshot 2023-07-17 at 1 05 14 AM

loop: props.loop || false,
autoplay: props.autoPlay,
rendererSettings: props.rendererSettings || {},
3 changes: 3 additions & 0 deletions src/SCREENS.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,7 @@ export default {
REPORT: 'Report',
NOT_FOUND: 'not-found',
TRANSITION_FROM_OLD_DOT: 'TransitionFromOldDot',
SETTINGS: {
PREFERENCES: 'Settings_Preferences',
},
};
Loading