diff --git a/packages/react-native-web/src/exports/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap index ba46fa39..1083a61c 100644 --- a/packages/react-native-web/src/exports/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap +++ b/packages/react-native-web/src/exports/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap @@ -1,47 +1,14 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`components/ActivityIndicator prop "animating" is "false" 1`] = ` - - - - + + `; exports[`components/ActivityIndicator prop "animating" is "true" 1`] = ` - - - - + + `; exports[`components/ActivityIndicator prop "color" 1`] = ` @@ -169,72 +83,29 @@ exports[`components/ActivityIndicator prop "color" 1`] = ` cy="16" fill="none" r="14" - strokeWidth="4" - style={ - Object { - "opacity": 0.2, - "stroke": "red", - } - } + stroke-width="4" + style="stroke: red; opacity: 0.2;" /> `; exports[`components/ActivityIndicator prop "hidesWhenStopped" is "false" 1`] = ` - - - - + + `; exports[`components/ActivityIndicator prop "hidesWhenStopped" is "true" 1`] = ` - - - - + + `; exports[`components/ActivityIndicator prop "size" is "large" 1`] = ` - - - - + + `; exports[`components/ActivityIndicator prop "size" is a number 1`] = ` - - - - + + `; diff --git a/packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js b/packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js index 7961f00d..cfe6119c 100644 --- a/packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/ActivityIndicator/__tests__/index-test.js @@ -2,47 +2,50 @@ import ActivityIndicator from '..'; import React from 'react'; -import { shallow } from 'enzyme'; +import { render } from '@testing-library/react'; describe('components/ActivityIndicator', () => { describe('prop "animating"', () => { test('is "true"', () => { - const component = shallow(); - expect(component).toMatchSnapshot(); + const { container } = render(); + expect(container.firstChild).toMatchSnapshot(); }); test('is "false"', () => { - const component = shallow(); - expect(component).toMatchSnapshot(); + const { container } = render(); + expect(container.firstChild).toMatchSnapshot(); }); }); test('prop "color"', () => { - const component = shallow().find('svg'); - expect(component).toMatchSnapshot(); + const { container } = render(); + const svg = container.firstChild.querySelector('svg'); + expect(svg).toMatchSnapshot(); }); describe('prop "hidesWhenStopped"', () => { test('is "true"', () => { - const component = shallow(); - expect(component).toMatchSnapshot(); + const { container } = render(); + expect(container.firstChild).toMatchSnapshot(); }); test('is "false"', () => { - const component = shallow(); - expect(component).toMatchSnapshot(); + const { container } = render( + + ); + expect(container.firstChild).toMatchSnapshot(); }); }); describe('prop "size"', () => { test('is "large"', () => { - const component = shallow(); - expect(component).toMatchSnapshot(); + const { container } = render(); + expect(container.firstChild).toMatchSnapshot(); }); test('is a number', () => { - const component = shallow(); - expect(component).toMatchSnapshot(); + const { container } = render(); + expect(container.firstChild).toMatchSnapshot(); }); }); }); diff --git a/packages/react-native-web/src/exports/ActivityIndicator/index.js b/packages/react-native-web/src/exports/ActivityIndicator/index.js index c3d37f4c..bc8bfe59 100644 --- a/packages/react-native-web/src/exports/ActivityIndicator/index.js +++ b/packages/react-native-web/src/exports/ActivityIndicator/index.js @@ -10,10 +10,9 @@ import type { ViewProps } from '../View'; -import applyNativeMethods from '../../modules/applyNativeMethods'; import StyleSheet from '../StyleSheet'; import View from '../View'; -import React from 'react'; +import React, { forwardRef } from 'react'; const createSvgCircle = style => ( @@ -27,54 +26,53 @@ type ActivityIndicatorProps = { size?: 'small' | 'large' | number }; -class ActivityIndicator extends React.Component { - static displayName = 'ActivityIndicator'; +const ActivityIndicator = forwardRef((props, ref) => { + const { + animating = true, + color = '#1976D2', + hidesWhenStopped = true, + size = 'small', + style, + ...other + } = props; - render() { - const { - animating = true, - color = '#1976D2', - hidesWhenStopped = true, - size = 'small', - style, - ...other - } = this.props; + const svg = ( + + {createSvgCircle({ + stroke: color, + opacity: 0.2 + })} + {createSvgCircle({ + stroke: color, + strokeDasharray: 80, + strokeDashoffset: 60 + })} + + ); - const svg = ( - - {createSvgCircle({ - stroke: color, - opacity: 0.2 - })} - {createSvgCircle({ - stroke: color, - strokeDasharray: 80, - strokeDashoffset: 60 - })} - - ); - - return ( + return ( + - - - ); - } -} + children={svg} + style={[ + typeof size === 'number' ? { height: size, width: size } : indicatorSizes[size], + styles.animation, + !animating && styles.animationPause, + !animating && hidesWhenStopped && styles.hidesWhenStopped + ]} + /> + + ); +}); + +ActivityIndicator.displayName = 'ActivityIndicator'; const styles = StyleSheet.create({ container: { @@ -111,4 +109,4 @@ const indicatorSizes = StyleSheet.create({ } }); -export default applyNativeMethods(ActivityIndicator); +export default ActivityIndicator;