mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-04-21 10:35:21 +08:00
[change] modernize ActivityIndicator
Rewrite ActivityIndicator to use function components and hooks. Rewrite the tests to replace enzyme with testing-library.
This commit is contained in:
Nicolas Gallagher
@@ -1,47 +1,14 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`components/ActivityIndicator prop "animating" is "false" 1`] = `
|
||||
<View
|
||||
accessibilityRole="progressbar"
|
||||
<div
|
||||
aria-valuemax="1"
|
||||
aria-valuemin="0"
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "center",
|
||||
"justifyContent": "center",
|
||||
}
|
||||
}
|
||||
class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
|
||||
role="progressbar"
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"animationDuration": "0.75s",
|
||||
"animationIterationCount": "infinite",
|
||||
"animationKeyframes": Array [
|
||||
Object {
|
||||
"0%": Object {
|
||||
"transform": Array [
|
||||
Object {
|
||||
"rotate": "0deg",
|
||||
},
|
||||
],
|
||||
},
|
||||
"100%": Object {
|
||||
"transform": Array [
|
||||
Object {
|
||||
"rotate": "360deg",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
"animationPlayState": "paused",
|
||||
"animationTimingFunction": "linear",
|
||||
"height": 20,
|
||||
"visibility": "hidden",
|
||||
"width": 20,
|
||||
}
|
||||
}
|
||||
<div
|
||||
class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationPlayState-1abnn5w r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-visibility-11j9u27 r-width-19wmn03"
|
||||
>
|
||||
<svg
|
||||
height="100%"
|
||||
@@ -53,73 +20,31 @@ exports[`components/ActivityIndicator prop "animating" is "false" 1`] = `
|
||||
cy="16"
|
||||
fill="none"
|
||||
r="14"
|
||||
strokeWidth="4"
|
||||
style={
|
||||
Object {
|
||||
"opacity": 0.2,
|
||||
"stroke": "#1976D2",
|
||||
}
|
||||
}
|
||||
stroke-width="4"
|
||||
style="stroke: #1976D2; opacity: 0.2;"
|
||||
/>
|
||||
<circle
|
||||
cx="16"
|
||||
cy="16"
|
||||
fill="none"
|
||||
r="14"
|
||||
strokeWidth="4"
|
||||
style={
|
||||
Object {
|
||||
"stroke": "#1976D2",
|
||||
"strokeDasharray": 80,
|
||||
"strokeDashoffset": 60,
|
||||
}
|
||||
}
|
||||
stroke-width="4"
|
||||
style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
|
||||
/>
|
||||
</svg>
|
||||
</View>
|
||||
</View>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`components/ActivityIndicator prop "animating" is "true" 1`] = `
|
||||
<View
|
||||
accessibilityRole="progressbar"
|
||||
<div
|
||||
aria-valuemax="1"
|
||||
aria-valuemin="0"
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "center",
|
||||
"justifyContent": "center",
|
||||
}
|
||||
}
|
||||
class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
|
||||
role="progressbar"
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"animationDuration": "0.75s",
|
||||
"animationIterationCount": "infinite",
|
||||
"animationKeyframes": Array [
|
||||
Object {
|
||||
"0%": Object {
|
||||
"transform": Array [
|
||||
Object {
|
||||
"rotate": "0deg",
|
||||
},
|
||||
],
|
||||
},
|
||||
"100%": Object {
|
||||
"transform": Array [
|
||||
Object {
|
||||
"rotate": "360deg",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
"animationTimingFunction": "linear",
|
||||
"height": 20,
|
||||
"width": 20,
|
||||
}
|
||||
}
|
||||
<div
|
||||
class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-width-19wmn03"
|
||||
>
|
||||
<svg
|
||||
height="100%"
|
||||
@@ -131,31 +56,20 @@ exports[`components/ActivityIndicator prop "animating" is "true" 1`] = `
|
||||
cy="16"
|
||||
fill="none"
|
||||
r="14"
|
||||
strokeWidth="4"
|
||||
style={
|
||||
Object {
|
||||
"opacity": 0.2,
|
||||
"stroke": "#1976D2",
|
||||
}
|
||||
}
|
||||
stroke-width="4"
|
||||
style="stroke: #1976D2; opacity: 0.2;"
|
||||
/>
|
||||
<circle
|
||||
cx="16"
|
||||
cy="16"
|
||||
fill="none"
|
||||
r="14"
|
||||
strokeWidth="4"
|
||||
style={
|
||||
Object {
|
||||
"stroke": "#1976D2",
|
||||
"strokeDasharray": 80,
|
||||
"strokeDashoffset": 60,
|
||||
}
|
||||
}
|
||||
stroke-width="4"
|
||||
style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
|
||||
/>
|
||||
</svg>
|
||||
</View>
|
||||
</View>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
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;"
|
||||
/>
|
||||
<circle
|
||||
cx="16"
|
||||
cy="16"
|
||||
fill="none"
|
||||
r="14"
|
||||
strokeWidth="4"
|
||||
style={
|
||||
Object {
|
||||
"stroke": "red",
|
||||
"strokeDasharray": 80,
|
||||
"strokeDashoffset": 60,
|
||||
}
|
||||
}
|
||||
stroke-width="4"
|
||||
style="stroke: red; stroke-dasharray: 80; stroke-dashoffset: 60;"
|
||||
/>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
exports[`components/ActivityIndicator prop "hidesWhenStopped" is "false" 1`] = `
|
||||
<View
|
||||
accessibilityRole="progressbar"
|
||||
<div
|
||||
aria-valuemax="1"
|
||||
aria-valuemin="0"
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "center",
|
||||
"justifyContent": "center",
|
||||
}
|
||||
}
|
||||
class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
|
||||
role="progressbar"
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"animationDuration": "0.75s",
|
||||
"animationIterationCount": "infinite",
|
||||
"animationKeyframes": Array [
|
||||
Object {
|
||||
"0%": Object {
|
||||
"transform": Array [
|
||||
Object {
|
||||
"rotate": "0deg",
|
||||
},
|
||||
],
|
||||
},
|
||||
"100%": Object {
|
||||
"transform": Array [
|
||||
Object {
|
||||
"rotate": "360deg",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
"animationPlayState": "paused",
|
||||
"animationTimingFunction": "linear",
|
||||
"height": 20,
|
||||
"width": 20,
|
||||
}
|
||||
}
|
||||
<div
|
||||
class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationPlayState-1abnn5w r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-width-19wmn03"
|
||||
>
|
||||
<svg
|
||||
height="100%"
|
||||
@@ -246,75 +117,31 @@ exports[`components/ActivityIndicator prop "hidesWhenStopped" is "false" 1`] = `
|
||||
cy="16"
|
||||
fill="none"
|
||||
r="14"
|
||||
strokeWidth="4"
|
||||
style={
|
||||
Object {
|
||||
"opacity": 0.2,
|
||||
"stroke": "#1976D2",
|
||||
}
|
||||
}
|
||||
stroke-width="4"
|
||||
style="stroke: #1976D2; opacity: 0.2;"
|
||||
/>
|
||||
<circle
|
||||
cx="16"
|
||||
cy="16"
|
||||
fill="none"
|
||||
r="14"
|
||||
strokeWidth="4"
|
||||
style={
|
||||
Object {
|
||||
"stroke": "#1976D2",
|
||||
"strokeDasharray": 80,
|
||||
"strokeDashoffset": 60,
|
||||
}
|
||||
}
|
||||
stroke-width="4"
|
||||
style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
|
||||
/>
|
||||
</svg>
|
||||
</View>
|
||||
</View>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`components/ActivityIndicator prop "hidesWhenStopped" is "true" 1`] = `
|
||||
<View
|
||||
accessibilityRole="progressbar"
|
||||
<div
|
||||
aria-valuemax="1"
|
||||
aria-valuemin="0"
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "center",
|
||||
"justifyContent": "center",
|
||||
}
|
||||
}
|
||||
class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
|
||||
role="progressbar"
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"animationDuration": "0.75s",
|
||||
"animationIterationCount": "infinite",
|
||||
"animationKeyframes": Array [
|
||||
Object {
|
||||
"0%": Object {
|
||||
"transform": Array [
|
||||
Object {
|
||||
"rotate": "0deg",
|
||||
},
|
||||
],
|
||||
},
|
||||
"100%": Object {
|
||||
"transform": Array [
|
||||
Object {
|
||||
"rotate": "360deg",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
"animationPlayState": "paused",
|
||||
"animationTimingFunction": "linear",
|
||||
"height": 20,
|
||||
"visibility": "hidden",
|
||||
"width": 20,
|
||||
}
|
||||
}
|
||||
<div
|
||||
class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationPlayState-1abnn5w r-animationTimingFunction-1ldzwu0 r-height-z80fyv r-visibility-11j9u27 r-width-19wmn03"
|
||||
>
|
||||
<svg
|
||||
height="100%"
|
||||
@@ -326,73 +153,31 @@ exports[`components/ActivityIndicator prop "hidesWhenStopped" is "true" 1`] = `
|
||||
cy="16"
|
||||
fill="none"
|
||||
r="14"
|
||||
strokeWidth="4"
|
||||
style={
|
||||
Object {
|
||||
"opacity": 0.2,
|
||||
"stroke": "#1976D2",
|
||||
}
|
||||
}
|
||||
stroke-width="4"
|
||||
style="stroke: #1976D2; opacity: 0.2;"
|
||||
/>
|
||||
<circle
|
||||
cx="16"
|
||||
cy="16"
|
||||
fill="none"
|
||||
r="14"
|
||||
strokeWidth="4"
|
||||
style={
|
||||
Object {
|
||||
"stroke": "#1976D2",
|
||||
"strokeDasharray": 80,
|
||||
"strokeDashoffset": 60,
|
||||
}
|
||||
}
|
||||
stroke-width="4"
|
||||
style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
|
||||
/>
|
||||
</svg>
|
||||
</View>
|
||||
</View>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`components/ActivityIndicator prop "size" is "large" 1`] = `
|
||||
<View
|
||||
accessibilityRole="progressbar"
|
||||
<div
|
||||
aria-valuemax="1"
|
||||
aria-valuemin="0"
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "center",
|
||||
"justifyContent": "center",
|
||||
}
|
||||
}
|
||||
class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
|
||||
role="progressbar"
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"animationDuration": "0.75s",
|
||||
"animationIterationCount": "infinite",
|
||||
"animationKeyframes": Array [
|
||||
Object {
|
||||
"0%": Object {
|
||||
"transform": Array [
|
||||
Object {
|
||||
"rotate": "0deg",
|
||||
},
|
||||
],
|
||||
},
|
||||
"100%": Object {
|
||||
"transform": Array [
|
||||
Object {
|
||||
"rotate": "360deg",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
"animationTimingFunction": "linear",
|
||||
"height": 36,
|
||||
"width": 36,
|
||||
}
|
||||
}
|
||||
<div
|
||||
class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-height-1r8g8re r-width-1acpoxo"
|
||||
>
|
||||
<svg
|
||||
height="100%"
|
||||
@@ -404,73 +189,32 @@ exports[`components/ActivityIndicator prop "size" is "large" 1`] = `
|
||||
cy="16"
|
||||
fill="none"
|
||||
r="14"
|
||||
strokeWidth="4"
|
||||
style={
|
||||
Object {
|
||||
"opacity": 0.2,
|
||||
"stroke": "#1976D2",
|
||||
}
|
||||
}
|
||||
stroke-width="4"
|
||||
style="stroke: #1976D2; opacity: 0.2;"
|
||||
/>
|
||||
<circle
|
||||
cx="16"
|
||||
cy="16"
|
||||
fill="none"
|
||||
r="14"
|
||||
strokeWidth="4"
|
||||
style={
|
||||
Object {
|
||||
"stroke": "#1976D2",
|
||||
"strokeDasharray": 80,
|
||||
"strokeDashoffset": 60,
|
||||
}
|
||||
}
|
||||
stroke-width="4"
|
||||
style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
|
||||
/>
|
||||
</svg>
|
||||
</View>
|
||||
</View>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`components/ActivityIndicator prop "size" is a number 1`] = `
|
||||
<View
|
||||
accessibilityRole="progressbar"
|
||||
<div
|
||||
aria-valuemax="1"
|
||||
aria-valuemin="0"
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "center",
|
||||
"justifyContent": "center",
|
||||
}
|
||||
}
|
||||
class="css-view-1dbjc4n r-alignItems-1awozwy r-justifyContent-1777fci"
|
||||
role="progressbar"
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Object {
|
||||
"animationDuration": "0.75s",
|
||||
"animationIterationCount": "infinite",
|
||||
"animationKeyframes": Array [
|
||||
Object {
|
||||
"0%": Object {
|
||||
"transform": Array [
|
||||
Object {
|
||||
"rotate": "0deg",
|
||||
},
|
||||
],
|
||||
},
|
||||
"100%": Object {
|
||||
"transform": Array [
|
||||
Object {
|
||||
"rotate": "360deg",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
"animationTimingFunction": "linear",
|
||||
"height": 30,
|
||||
"width": 30,
|
||||
}
|
||||
}
|
||||
<div
|
||||
class="css-view-1dbjc4n r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
|
||||
style="height: 30px; width: 30px;"
|
||||
>
|
||||
<svg
|
||||
height="100%"
|
||||
@@ -482,29 +226,18 @@ exports[`components/ActivityIndicator prop "size" is a number 1`] = `
|
||||
cy="16"
|
||||
fill="none"
|
||||
r="14"
|
||||
strokeWidth="4"
|
||||
style={
|
||||
Object {
|
||||
"opacity": 0.2,
|
||||
"stroke": "#1976D2",
|
||||
}
|
||||
}
|
||||
stroke-width="4"
|
||||
style="stroke: #1976D2; opacity: 0.2;"
|
||||
/>
|
||||
<circle
|
||||
cx="16"
|
||||
cy="16"
|
||||
fill="none"
|
||||
r="14"
|
||||
strokeWidth="4"
|
||||
style={
|
||||
Object {
|
||||
"stroke": "#1976D2",
|
||||
"strokeDasharray": 80,
|
||||
"strokeDashoffset": 60,
|
||||
}
|
||||
}
|
||||
stroke-width="4"
|
||||
style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
|
||||
/>
|
||||
</svg>
|
||||
</View>
|
||||
</View>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -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(<ActivityIndicator animating={true} />);
|
||||
expect(component).toMatchSnapshot();
|
||||
const { container } = render(<ActivityIndicator animating={true} />);
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('is "false"', () => {
|
||||
const component = shallow(<ActivityIndicator animating={false} />);
|
||||
expect(component).toMatchSnapshot();
|
||||
const { container } = render(<ActivityIndicator animating={false} />);
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
test('prop "color"', () => {
|
||||
const component = shallow(<ActivityIndicator color="red" />).find('svg');
|
||||
expect(component).toMatchSnapshot();
|
||||
const { container } = render(<ActivityIndicator color="red" />);
|
||||
const svg = container.firstChild.querySelector('svg');
|
||||
expect(svg).toMatchSnapshot();
|
||||
});
|
||||
|
||||
describe('prop "hidesWhenStopped"', () => {
|
||||
test('is "true"', () => {
|
||||
const component = shallow(<ActivityIndicator animating={false} hidesWhenStopped={true} />);
|
||||
expect(component).toMatchSnapshot();
|
||||
const { container } = render(<ActivityIndicator animating={false} hidesWhenStopped={true} />);
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('is "false"', () => {
|
||||
const component = shallow(<ActivityIndicator animating={false} hidesWhenStopped={false} />);
|
||||
expect(component).toMatchSnapshot();
|
||||
const { container } = render(
|
||||
<ActivityIndicator animating={false} hidesWhenStopped={false} />
|
||||
);
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('prop "size"', () => {
|
||||
test('is "large"', () => {
|
||||
const component = shallow(<ActivityIndicator size="large" />);
|
||||
expect(component).toMatchSnapshot();
|
||||
const { container } = render(<ActivityIndicator size="large" />);
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('is a number', () => {
|
||||
const component = shallow(<ActivityIndicator size={30} />);
|
||||
expect(component).toMatchSnapshot();
|
||||
const { container } = render(<ActivityIndicator size={30} />);
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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 => (
|
||||
<circle cx="16" cy="16" fill="none" r="14" strokeWidth="4" style={style} />
|
||||
@@ -27,54 +26,53 @@ type ActivityIndicatorProps = {
|
||||
size?: 'small' | 'large' | number
|
||||
};
|
||||
|
||||
class ActivityIndicator extends React.Component<ActivityIndicatorProps> {
|
||||
static displayName = 'ActivityIndicator';
|
||||
const ActivityIndicator = forwardRef<ActivityIndicatorProps, *>((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 = (
|
||||
<svg height="100%" viewBox="0 0 32 32" width="100%">
|
||||
{createSvgCircle({
|
||||
stroke: color,
|
||||
opacity: 0.2
|
||||
})}
|
||||
{createSvgCircle({
|
||||
stroke: color,
|
||||
strokeDasharray: 80,
|
||||
strokeDashoffset: 60
|
||||
})}
|
||||
</svg>
|
||||
);
|
||||
|
||||
const svg = (
|
||||
<svg height="100%" viewBox="0 0 32 32" width="100%">
|
||||
{createSvgCircle({
|
||||
stroke: color,
|
||||
opacity: 0.2
|
||||
})}
|
||||
{createSvgCircle({
|
||||
stroke: color,
|
||||
strokeDasharray: 80,
|
||||
strokeDashoffset: 60
|
||||
})}
|
||||
</svg>
|
||||
);
|
||||
|
||||
return (
|
||||
return (
|
||||
<View
|
||||
{...other}
|
||||
accessibilityRole="progressbar"
|
||||
aria-valuemax="1"
|
||||
aria-valuemin="0"
|
||||
ref={ref}
|
||||
style={[styles.container, style]}
|
||||
>
|
||||
<View
|
||||
{...other}
|
||||
accessibilityRole="progressbar"
|
||||
aria-valuemax="1"
|
||||
aria-valuemin="0"
|
||||
style={[styles.container, style]}
|
||||
>
|
||||
<View
|
||||
children={svg}
|
||||
style={[
|
||||
typeof size === 'number' ? { height: size, width: size } : indicatorSizes[size],
|
||||
styles.animation,
|
||||
!animating && styles.animationPause,
|
||||
!animating && hidesWhenStopped && styles.hidesWhenStopped
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
children={svg}
|
||||
style={[
|
||||
typeof size === 'number' ? { height: size, width: size } : indicatorSizes[size],
|
||||
styles.animation,
|
||||
!animating && styles.animationPause,
|
||||
!animating && hidesWhenStopped && styles.hidesWhenStopped
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
});
|
||||
|
||||
ActivityIndicator.displayName = 'ActivityIndicator';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
@@ -111,4 +109,4 @@ const indicatorSizes = StyleSheet.create({
|
||||
}
|
||||
});
|
||||
|
||||
export default applyNativeMethods(ActivityIndicator);
|
||||
export default ActivityIndicator;
|
||||
|
||||
Reference in New Issue
Block a user