[#160521227] Add withLoadingSpinner HOC #511

fpersico · 2018-09-18T08:08:07Z

/**

A HOC to display and overlay spinner conditionally
@param WrappedComponent The react component you want to wrap
@param isLoadingSelector A redux selector that returns true when the spinner need to be visible
@param spinnerProps Props to pass to the spinner component
*/

digitalcitizenship · 2018-09-18T08:17:45Z

	Warnings
⚠️	Remember to fix the PR title by removing WIP wording when ready

Affected stories

🌟 #160521227: L'app deve mostrare uno spinner di caricamento quando vengono effettuate azioni bloccanti durante un pagamento

New dependencies added: hoist-non-react-statics, react-native-loading-spinner-overlay, @types/hoist-non-react-statics and @types/react-native-loading-spinner-overlay.

hoist-non-react-statics

Author: Michael Ridgway

Description: Copies non-react specific statics from a child component to a parent component

Homepage: https://github.com/mridgway/hoist-non-react-statics#readme


Created	over 3 years ago
Last Updated	about 2 months ago
License	BSD-3-Clause
Maintainers	1
Releases	27
Direct Dependencies	`react-is`
Keywords	react

README

hoist-non-react-statics

Copies non-react specific statics from a child component to a parent component.
Similar to Object.assign, but with React static keywords blacklisted from
being overridden.

$ npm install --save hoist-non-react-statics

Usage

import hoistNonReactStatics from 'hoist-non-react-statics';

hoistNonReactStatics(targetComponent, sourceComponent);

If you have specific statics that you don't want to be hoisted, you can also pass a third parameter to exclude them:

hoistNonReactStatics(targetComponent, sourceComponent, { myStatic: true, myOtherStatic: true });

What does this module do?

See this explanation from the React docs.

Compatible React Versions

Please use latest 3.x unless you need to support react@0.13. Versions prior to 3.x will not support ForwardRefs.

hoist-non-react-statics Version	Compatible React Version
3.x	0.14-16.x With ForwardRef Support
2.x	0.13-16.x Without ForwardRef Support
1.x	0.13-16.2

Browser Support

This package uses Object.defineProperty which has a broken implementation in IE8. In order to use this package in IE8, you will need a polyfill that fixes this method.

License

This software is free to use under the Yahoo Inc. BSD license.
See the LICENSE file for license text and copyright information.

Third-party open source code used are listed in our package.json file.

react-native-loading-spinner-overlay

Author: Nick Baugh

Description: The only pure React Native Native iOS and Android loading spinner (progress bar indicator) overlay

Homepage: https://github.com/joinspontaneous/react-native-loading-spinner-overlay


Created	over 2 years ago
Last Updated	8 months ago
License	MIT
Maintainers	1
Releases	20
Keywords	activity, android, bar, full, indicator, ios, loading, modal, native, pop-up, popup, progress, react, react-native, screen, spinner and view

README

React Native Loading Spinner Overlay

tldr; The only pure React Native Native iOS and Android loading spinner (progress bar indicator) overlay

Install

For React Native version >=0.28.x use version >=0.3.x (0.2.x is broken, sorry!):

npm install --save react-native-loading-spinner-overlay@latest

For React Native version <=0.27.x use version 0.1.x:

npm install --save react-native-loading-spinner-overlay@0.1.x

Usage

This usage shows the default styles and properties.

Property	Type	Default	Description
cancelable	`boolean`	`false`	Android: If set to false, it will prevent spinner from hiding when pressing the hardware back button. If set to true, it will allow spinner to hide if the hardware back button is pressed.
color	`string`	`white`	Changes the spinner's color (example values are `red`, `#ff0000`, etc). For adjusting the contrast see `overlayColor` prop below.
animation	`none`, `slide`, `fade`	`none`	Changes animation on show and hide spinner's view.
overlayColor	`string`	`rgba(0, 0, 0, 0.25)`	Changes the color of the overlay.
size	`small`, `normal`, `large`	`large`	Sets the spinner's size. No other cross-platform sizes are supported right now.
textContent	`string`	`""`	Optional text field to be shown.
textStyle	`style`	`-`	The style to be applied to the `<Text>` that displays the `textContent`.
visible	`boolean`	`false`	Controls the visibility of the spinner.

You can also add a child view to act as a custom activity indicator.

import React, { View, Text } from 'react-native';

import Spinner from 'react-native-loading-spinner-overlay';

class MyComponent extends React.Component {

  constructor(props) {
    super();
    this.state = {
      visible: false
    };
  }

  /* eslint react/no-did-mount-set-state: 0 */
  componentDidMount() {
    setInterval(() => {
      this.setState({
        visible: !this.state.visible
      });
    }, 3000);
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <Spinner visible={this.state.visible} textContent={"Loading..."} textStyle={{color: '#FFF'}} />
      </View>
    );
  }
}

To use a custom activity indicator just pass it as child of the component:

<Spinner visible={this.state.visible}>
  <Text>This is my custom spinner</Text>
</Spinner>

Platforms

For >= 0.3.x:

We use ActivityIndicator now!

For 0.2.x:

Do not use this version due to #22, use >= 0.3.x please!

For <= 0.1.x:

iOS: this platform uses Modal (docs/source) to overlay and ActivityIndicatorIOS (docs) for the loading spinner
Android: this platform uses Portal (source) to overlay and ActivityIndicator (docs) for the loading spinner

Notes

For >= 0.3.x:

We use ActivityIndicator now!

For 0.2.x:

This version is broken due to a dependency issue, see issue #22

For <= 0.1.x:

Docs don't exist yet for Portal, see this issue on GitHub; once those are in, then we can add a link to the source in Platforms
Until a release of React Native is shipped for this pull request, Android's ProgressBarAndroid will not have support for a StyleAttr value of "Normal" - therefore we only support a size prop of "small" or "large" right now (defaulting to "large") - in other words, we can only support Android's inverse styling with a styleAttr of "Inverse", "SmallInverse" (for a size prop of "small"), and "LargeInverse" (for a size prop of "large") (since there is no "Normal" support right now for "size" of "normal").

Development

Fork/clone this repository
Run npm install
Make changes in src directory
Run npm test when you're done
Submit a pull request

Contributors

Nick Baugh niftylettuce@gmail.com

License

MIT

@types/hoist-non-react-statics

Author: Unknown

Description: TypeScript definitions for hoist-non-react-statics

Homepage: http://npmjs.com/package/@types/hoist-non-react-statics


Created	about 2 months ago
Last Updated	about 2 months ago
License	MIT
Maintainers	1
Releases	2
Direct Dependencies	`@types/react`

README

Installation

npm install --save @types/hoist-non-react-statics

Summary

This package contains type definitions for hoist-non-react-statics (https://github.com/mridgway/hoist-non-react-statics#readme).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/hoist-non-react-statics

Additional Details

Last updated: Thu, 02 Aug 2018 01:35:11 GMT
Dependencies: react
Global values: none

Credits

These definitions were written by JounQin https://github.com/JounQin.

@types/react-native-loading-spinner-overlay

Author: Unknown

Description: TypeScript definitions for react-native-loading-spinner-overlay

Homepage: http://npmjs.com/package/@types/react-native-loading-spinner-overlay


Created	7 months ago
Last Updated	about 1 month ago
License	MIT
Maintainers	1
Releases	2
Direct Dependencies	`@types/react` and `@types/react-native`

README

Installation

npm install --save @types/react-native-loading-spinner-overlay

Summary

This package contains type definitions for react-native-loading-spinner-overlay (https://github.com/joinspontaneous/react-native-loading-spinner-overlay).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-native-loading-spinner-overlay

Additional Details

Last updated: Mon, 06 Aug 2018 21:55:27 GMT
Dependencies: react, react-native
Global values: none

Credits

These definitions were written by fhelwanger https://github.com/fhelwanger.

Generated by 🚫 dangerJS

cloudify · 2018-09-18T08:30:25Z

I think we need the ability to add some text that explains what's going on - the use has to (potentially) wait for several seconds and we need to tell him to wait

fpersico · 2018-09-18T08:37:49Z

spinnerProps has textContent to display the message

export interface SpinnerProps {
cancelable?: boolean;
color?: string;
animation?: "none" | "slide" | "fade";
overlayColor?: string;
size?: "normal" | "small" | "large";
textContent?: string;
textStyle?: ReactNative.StyleProp<ReactNative.TextStyle>;
visible?: boolean;
}

example usage

withLoadingSpinner(Mycomponent, myIsLoadingSelector, { textContent: "I am loading data please wait" })

cloudify · 2018-09-18T08:41:37Z

ts/components/helpers/withLoadingSpinner.tsx

+ * @param isLoadingSelector A redux selector that returns true when the spinner need to be visible
+ * @param spinnerProps Props to pass to the spinner component
+ */
+export function withLoadingSpinner<P>(


no components with State ?

What you exactly mean?

export function withLoadingSpinner<P, S>

i think we don't need it because

WrappedComponent: React.ComponentType<P>

ComponentType only needs P

what I mean is that this HOC discards the State type, but perhaps that's by design since State is not exposed outside of the component.

Yes exactly.

fgiobergia

Looks good to me. @fpersico let us know if you are still working on this, just so we can merge this to master and proceed with the integration in the payment process

fpersico requested review from cloudify and fgiobergia September 18, 2018 08:08

fpersico force-pushed the 160521227-withLoadingSpinner-hoc branch from 7f8220f to 1004ddf Compare September 18, 2018 08:15

cloudify requested a review from matteodesanti September 18, 2018 08:29

cloudify reviewed Sep 18, 2018

View reviewed changes

Add withLoadingSpinner HOC

afff95f

fpersico force-pushed the 160521227-withLoadingSpinner-hoc branch from 1004ddf to afff95f Compare September 18, 2018 10:15

cloudify approved these changes Sep 18, 2018

View reviewed changes

fgiobergia approved these changes Sep 18, 2018

View reviewed changes

cloudify changed the title ~~[#160521227] [WIP] Add withLoadingSpinner HOC~~ [#160521227] Add withLoadingSpinner HOC Sep 19, 2018

cloudify merged commit 2ec9225 into master Sep 19, 2018

cloudify deleted the 160521227-withLoadingSpinner-hoc branch September 19, 2018 12:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[#160521227] Add withLoadingSpinner HOC #511

[#160521227] Add withLoadingSpinner HOC #511

fpersico commented Sep 18, 2018

digitalcitizenship commented Sep 18, 2018 •

edited

Loading

hoist-non-react-statics

Usage

What does this module do?

Compatible React Versions

Browser Support

License

React Native Loading Spinner Overlay

Index

Install

Usage

Platforms

Notes

Development

Contributors

License

Installation

Summary

Details

Credits

Installation

Summary

Details

Credits

cloudify commented Sep 18, 2018 •

edited

Loading

fpersico commented Sep 18, 2018

cloudify Sep 18, 2018

fpersico Sep 18, 2018

cloudify Sep 18, 2018

fpersico Sep 18, 2018

fgiobergia left a comment

[#160521227] Add withLoadingSpinner HOC #511

[#160521227] Add withLoadingSpinner HOC #511

Conversation

fpersico commented Sep 18, 2018

digitalcitizenship commented Sep 18, 2018 • edited Loading

Affected stories

hoist-non-react-statics

Usage

What does this module do?

Compatible React Versions

Browser Support

License

React Native Loading Spinner Overlay

Index

Install

Usage

Platforms

Notes

Development

Contributors

License

Installation

Summary

Details

Credits

Installation

Summary

Details

Credits

cloudify commented Sep 18, 2018 • edited Loading

fpersico commented Sep 18, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fgiobergia left a comment

Choose a reason for hiding this comment

digitalcitizenship commented Sep 18, 2018 •

edited

Loading

cloudify commented Sep 18, 2018 •

edited

Loading