From 81ef21a0c802f1d905f37a2a818544a8b400793c Mon Sep 17 00:00:00 2001 From: Renaud Chaput Date: Sat, 25 Feb 2023 14:34:32 +0100 Subject: [Glitch] Rename JSX files with proper `.jsx` extension Port 44a7d87cb1f5df953b6c14c16c59e2e4ead1bcb9 to glitch-soc Signed-off-by: Claire --- .../features/ui/util/react_router_helpers.js | 101 --------------------- .../features/ui/util/react_router_helpers.jsx | 101 +++++++++++++++++++++ .../glitch/features/ui/util/reduced_motion.js | 44 --------- .../glitch/features/ui/util/reduced_motion.jsx | 44 +++++++++ 4 files changed, 145 insertions(+), 145 deletions(-) delete mode 100644 app/javascript/flavours/glitch/features/ui/util/react_router_helpers.js create mode 100644 app/javascript/flavours/glitch/features/ui/util/react_router_helpers.jsx delete mode 100644 app/javascript/flavours/glitch/features/ui/util/reduced_motion.js create mode 100644 app/javascript/flavours/glitch/features/ui/util/reduced_motion.jsx (limited to 'app/javascript/flavours/glitch/features/ui/util') diff --git a/app/javascript/flavours/glitch/features/ui/util/react_router_helpers.js b/app/javascript/flavours/glitch/features/ui/util/react_router_helpers.js deleted file mode 100644 index b1c952d87..000000000 --- a/app/javascript/flavours/glitch/features/ui/util/react_router_helpers.js +++ /dev/null @@ -1,101 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { Switch, Route } from 'react-router-dom'; -import StackTrace from 'stacktrace-js'; -import ColumnLoading from 'flavours/glitch/features/ui/components/column_loading'; -import BundleColumnError from 'flavours/glitch/features/ui/components/bundle_column_error'; -import BundleContainer from 'flavours/glitch/features/ui/containers/bundle_container'; - -// Small wrapper to pass multiColumn to the route components -export class WrappedSwitch extends React.PureComponent { - - render () { - const { multiColumn, children } = this.props; - - return ( - - {React.Children.map(children, child => React.cloneElement(child, { multiColumn }))} - - ); - } - -} - -WrappedSwitch.propTypes = { - multiColumn: PropTypes.bool, - children: PropTypes.node, -}; - -// Small Wraper to extract the params from the route and pass -// them to the rendered component, together with the content to -// be rendered inside (the children) -export class WrappedRoute extends React.Component { - - static propTypes = { - component: PropTypes.func.isRequired, - content: PropTypes.node, - multiColumn: PropTypes.bool, - componentParams: PropTypes.object, - }; - - static defaultProps = { - componentParams: {}, - }; - - static getDerivedStateFromError () { - return { - hasError: true, - }; - } - - state = { - hasError: false, - stacktrace: '', - }; - - componentDidCatch (error) { - StackTrace.fromError(error).then(stackframes => { - this.setState({ stacktrace: error.toString() + '\n' + stackframes.map(frame => frame.toString()).join('\n') }); - }).catch(err => { - console.error(err); - }); - } - - renderComponent = ({ match }) => { - const { component, content, multiColumn, componentParams } = this.props; - const { hasError, stacktrace } = this.state; - - if (hasError) { - return ( - - ); - } - - return ( - - {Component => {content}} - - ); - }; - - renderLoading = () => { - const { multiColumn } = this.props; - - return ; - }; - - renderError = (props) => { - return ; - }; - - render () { - const { component: Component, content, ...rest } = this.props; - - return ; - } - -} diff --git a/app/javascript/flavours/glitch/features/ui/util/react_router_helpers.jsx b/app/javascript/flavours/glitch/features/ui/util/react_router_helpers.jsx new file mode 100644 index 000000000..b1c952d87 --- /dev/null +++ b/app/javascript/flavours/glitch/features/ui/util/react_router_helpers.jsx @@ -0,0 +1,101 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Switch, Route } from 'react-router-dom'; +import StackTrace from 'stacktrace-js'; +import ColumnLoading from 'flavours/glitch/features/ui/components/column_loading'; +import BundleColumnError from 'flavours/glitch/features/ui/components/bundle_column_error'; +import BundleContainer from 'flavours/glitch/features/ui/containers/bundle_container'; + +// Small wrapper to pass multiColumn to the route components +export class WrappedSwitch extends React.PureComponent { + + render () { + const { multiColumn, children } = this.props; + + return ( + + {React.Children.map(children, child => React.cloneElement(child, { multiColumn }))} + + ); + } + +} + +WrappedSwitch.propTypes = { + multiColumn: PropTypes.bool, + children: PropTypes.node, +}; + +// Small Wraper to extract the params from the route and pass +// them to the rendered component, together with the content to +// be rendered inside (the children) +export class WrappedRoute extends React.Component { + + static propTypes = { + component: PropTypes.func.isRequired, + content: PropTypes.node, + multiColumn: PropTypes.bool, + componentParams: PropTypes.object, + }; + + static defaultProps = { + componentParams: {}, + }; + + static getDerivedStateFromError () { + return { + hasError: true, + }; + } + + state = { + hasError: false, + stacktrace: '', + }; + + componentDidCatch (error) { + StackTrace.fromError(error).then(stackframes => { + this.setState({ stacktrace: error.toString() + '\n' + stackframes.map(frame => frame.toString()).join('\n') }); + }).catch(err => { + console.error(err); + }); + } + + renderComponent = ({ match }) => { + const { component, content, multiColumn, componentParams } = this.props; + const { hasError, stacktrace } = this.state; + + if (hasError) { + return ( + + ); + } + + return ( + + {Component => {content}} + + ); + }; + + renderLoading = () => { + const { multiColumn } = this.props; + + return ; + }; + + renderError = (props) => { + return ; + }; + + render () { + const { component: Component, content, ...rest } = this.props; + + return ; + } + +} diff --git a/app/javascript/flavours/glitch/features/ui/util/reduced_motion.js b/app/javascript/flavours/glitch/features/ui/util/reduced_motion.js deleted file mode 100644 index 1123b80ed..000000000 --- a/app/javascript/flavours/glitch/features/ui/util/reduced_motion.js +++ /dev/null @@ -1,44 +0,0 @@ -// Like react-motion's Motion, but reduces all animations to cross-fades -// for the benefit of users with motion sickness. -import React from 'react'; -import Motion from 'react-motion/lib/Motion'; -import PropTypes from 'prop-types'; - -const stylesToKeep = ['opacity', 'backgroundOpacity']; - -const extractValue = (value) => { - // This is either an object with a "val" property or it's a number - return (typeof value === 'object' && value && 'val' in value) ? value.val : value; -}; - -class ReducedMotion extends React.Component { - - static propTypes = { - defaultStyle: PropTypes.object, - style: PropTypes.object, - children: PropTypes.func, - }; - - render() { - - const { style, defaultStyle, children } = this.props; - - Object.keys(style).forEach(key => { - if (stylesToKeep.includes(key)) { - return; - } - // If it's setting an x or height or scale or some other value, we need - // to preserve the end-state value without actually animating it - style[key] = defaultStyle[key] = extractValue(style[key]); - }); - - return ( - - {children} - - ); - } - -} - -export default ReducedMotion; diff --git a/app/javascript/flavours/glitch/features/ui/util/reduced_motion.jsx b/app/javascript/flavours/glitch/features/ui/util/reduced_motion.jsx new file mode 100644 index 000000000..1123b80ed --- /dev/null +++ b/app/javascript/flavours/glitch/features/ui/util/reduced_motion.jsx @@ -0,0 +1,44 @@ +// Like react-motion's Motion, but reduces all animations to cross-fades +// for the benefit of users with motion sickness. +import React from 'react'; +import Motion from 'react-motion/lib/Motion'; +import PropTypes from 'prop-types'; + +const stylesToKeep = ['opacity', 'backgroundOpacity']; + +const extractValue = (value) => { + // This is either an object with a "val" property or it's a number + return (typeof value === 'object' && value && 'val' in value) ? value.val : value; +}; + +class ReducedMotion extends React.Component { + + static propTypes = { + defaultStyle: PropTypes.object, + style: PropTypes.object, + children: PropTypes.func, + }; + + render() { + + const { style, defaultStyle, children } = this.props; + + Object.keys(style).forEach(key => { + if (stylesToKeep.includes(key)) { + return; + } + // If it's setting an x or height or scale or some other value, we need + // to preserve the end-state value without actually animating it + style[key] = defaultStyle[key] = extractValue(style[key]); + }); + + return ( + + {children} + + ); + } + +} + +export default ReducedMotion; -- cgit