zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-05-25 15:42:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

[fix] ActivityIndicator sizing

Browse Source
This commit is contained in:
Nicolas Gallagher
2017-06-29 16:10:42 -07:00
parent 9376c72a40
commit 8b06f28281
3 changed files with 222 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap
+184 -3
View File
@@ -1,6 +1,42 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/ActivityIndicator default render 1`] = `
exports[`components/ActivityIndicator prop "animating" is "false" 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="rn-alignItems-1awozwy rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-justifyContent-1777fci rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim"
role="progressbar"
>
<div
class="rn-alignItems-1oszu61 rn-animationDuration-17bb2tj rn-animationIterationCount-1muvv40 rn-animationName-dozj4v rn-animationPlayState-1abnn5w rn-animationTimingFunction-1ldzwu0 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-height-z80fyv rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-visibility-11j9u27 rn-width-19wmn03"
>
<svg
height="100%"
viewbox="0 0 32 32"
width="100%"
>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke:#1976D2;opacity:0.2;"
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke:#1976D2;stroke-dasharray:80;stroke-dashoffset:60;"
/>
</svg>
</div>
</div>
`;
exports[`components/ActivityIndicator prop "animating" is "true" 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
@@ -36,7 +72,7 @@ exports[`components/ActivityIndicator default render 1`] = `
</div>
`;
exports[`components/ActivityIndicator other render 1`] = `
exports[`components/ActivityIndicator prop "color" 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
@@ -44,7 +80,152 @@ exports[`components/ActivityIndicator other render 1`] = `
role="progressbar"
>
<div
class="rn-alignItems-1oszu61 rn-animationDuration-17bb2tj rn-animationIterationCount-1muvv40 rn-animationName-dozj4v rn-animationPlayState-1abnn5w rn-animationTimingFunction-1ldzwu0 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-height-1r8g8re rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-width-1acpoxo"
class="rn-alignItems-1oszu61 rn-animationDuration-17bb2tj rn-animationIterationCount-1muvv40 rn-animationName-dozj4v rn-animationTimingFunction-1ldzwu0 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-height-z80fyv rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-width-19wmn03"
>
<svg
height="100%"
viewbox="0 0 32 32"
width="100%"
>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke:red;opacity:0.2;"
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke:red;stroke-dasharray:80;stroke-dashoffset:60;"
/>
</svg>
</div>
</div>
`;
exports[`components/ActivityIndicator prop "hidesWhenStopped" is "false" 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="rn-alignItems-1awozwy rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-justifyContent-1777fci rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim"
role="progressbar"
>
<div
class="rn-alignItems-1oszu61 rn-animationDuration-17bb2tj rn-animationIterationCount-1muvv40 rn-animationName-dozj4v rn-animationPlayState-1abnn5w rn-animationTimingFunction-1ldzwu0 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-height-z80fyv rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-width-19wmn03"
>
<svg
height="100%"
viewbox="0 0 32 32"
width="100%"
>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke:#1976D2;opacity:0.2;"
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke:#1976D2;stroke-dasharray:80;stroke-dashoffset:60;"
/>
</svg>
</div>
</div>
`;
exports[`components/ActivityIndicator prop "hidesWhenStopped" is "true" 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="rn-alignItems-1awozwy rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-justifyContent-1777fci rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim"
role="progressbar"
>
<div
class="rn-alignItems-1oszu61 rn-animationDuration-17bb2tj rn-animationIterationCount-1muvv40 rn-animationName-dozj4v rn-animationPlayState-1abnn5w rn-animationTimingFunction-1ldzwu0 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-height-z80fyv rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-visibility-11j9u27 rn-width-19wmn03"
>
<svg
height="100%"
viewbox="0 0 32 32"
width="100%"
>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke:#1976D2;opacity:0.2;"
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke:#1976D2;stroke-dasharray:80;stroke-dashoffset:60;"
/>
</svg>
</div>
</div>
`;
exports[`components/ActivityIndicator prop "size" is "large" 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="rn-alignItems-1awozwy rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-justifyContent-1777fci rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim"
role="progressbar"
>
<div
class="rn-alignItems-1oszu61 rn-animationDuration-17bb2tj rn-animationIterationCount-1muvv40 rn-animationName-dozj4v rn-animationTimingFunction-1ldzwu0 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-height-1r8g8re rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim rn-width-1acpoxo"
>
<svg
height="100%"
viewbox="0 0 32 32"
width="100%"
>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke:#1976D2;opacity:0.2;"
/>
<circle
cx="16"
cy="16"
fill="none"
r="14"
stroke-width="4"
style="stroke:#1976D2;stroke-dasharray:80;stroke-dashoffset:60;"
/>
</svg>
</div>
</div>
`;
exports[`components/ActivityIndicator prop "size" is a number 1`] = `
<div
aria-valuemax="1"
aria-valuemin="0"
class="rn-alignItems-1awozwy rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-justifyContent-1777fci rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim"
role="progressbar"
>
<div
class="rn-alignItems-1oszu61 rn-animationDuration-17bb2tj rn-animationIterationCount-1muvv40 rn-animationName-dozj4v rn-animationTimingFunction-1ldzwu0 rn-borderTopStyle-1efd50x rn-borderRightStyle-14skgim rn-borderBottomStyle-rull8r rn-borderLeftStyle-mm0ijv rn-borderTopWidth-13yce4e rn-borderRightWidth-fnigne rn-borderBottomWidth-ndvcnb rn-borderLeftWidth-gxnn5r rn-boxSizing-deolkf rn-display-6koalj rn-flexShrink-1qe8dj5 rn-flexBasis-1mlwlqe rn-flexDirection-eqz5dr rn-marginTop-1mnahxq rn-marginRight-61z16t rn-marginBottom-p1pxzi rn-marginLeft-11wrixw rn-minHeight-ifefl9 rn-minWidth-bcqeeo rn-paddingTop-wk8lta rn-paddingRight-9aemit rn-paddingBottom-1mdbw0j rn-paddingLeft-gy4na3 rn-position-bnwqim"
style="height:30px;width:30px;"
>
<svg
height="100%"
src/components/ActivityIndicator/__tests__/index-test.js
+36 -7
View File
@@ -5,15 +5,44 @@ import React from 'react';
import { render } from 'enzyme';
describe('components/ActivityIndicator', () => {
test('default render', () => {
const component = render(<ActivityIndicator />);
describe('prop "animating"', () => {
test('is "true"', () => {
const component = render(<ActivityIndicator animating={true} />);
expect(component).toMatchSnapshot();
});
test('is "false"', () => {
const component = render(<ActivityIndicator animating={false} />);
expect(component).toMatchSnapshot();
});
});
test('prop "color"', () => {
const component = render(<ActivityIndicator color="red" />);
expect(component).toMatchSnapshot();
});
test('other render', () => {
const component = render(
<ActivityIndicator animating={false} hidesWhenStopped={false} size="large" />
);
expect(component).toMatchSnapshot();
describe('prop "hidesWhenStopped"', () => {
test('is "true"', () => {
const component = render(<ActivityIndicator animating={false} hidesWhenStopped={true} />);
expect(component).toMatchSnapshot();
});
test('is "false"', () => {
const component = render(<ActivityIndicator animating={false} hidesWhenStopped={false} />);
expect(component).toMatchSnapshot();
});
});
describe('prop "size"', () => {
test('is "large"', () => {
const component = render(<ActivityIndicator size="large" />);
expect(component).toMatchSnapshot();
});
test('is a number', () => {
const component = render(<ActivityIndicator size={30} />);
expect(component).toMatchSnapshot();
});
});
});
src/components/ActivityIndicator/index.js
+2 -2
View File
@@ -72,12 +72,12 @@ class ActivityIndicator extends Component {
accessibilityRole="progressbar"
aria-valuemax="1"
aria-valuemin="0"
style={[styles.container, style, typeof size === 'number' && { height: size, width: size }]}
style={[styles.container, style]}
>
<View
children={svg}
style={[
indicatorSizes[size],
typeof size === 'number' ? { height: size, width: size } : indicatorSizes[size],
styles.animation,
!animating && styles.animationPause,
!animating && hidesWhenStopped && styles.hidesWhenStopped