zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-05-23 06:48:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

[fix] Image browser context menu

Browse Source 
Fix #368
This commit is contained in:
Nicolas Gallagher
2017-02-18 00:11:32 -08:00
parent eb59875bed
commit fe71c7efe5
2 changed files with 110 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Image/__tests__/__snapshots__/index-test.js.snap
+92 -36
View File
@@ -34,9 +34,9 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
rn-textDecoration:none"
rn-textDecoration:none
rn-zIndex:0"
onResponderGrant={[Function]}
role="img"
style={Object {}} />
`;
@@ -77,8 +77,8 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
rn-textDecoration:none"
role="img"
rn-textDecoration:none
rn-zIndex:0"
style={Object {}} />
`;
@@ -119,8 +119,8 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
rn-textDecoration:none"
role="img"
rn-textDecoration:none
rn-zIndex:0"
style={Object {}} />
`;
@@ -160,8 +160,8 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
rn-textDecoration:none"
role="img"
rn-textDecoration:none
rn-zIndex:0"
style={Object {}}>
<div
className="unique" />
@@ -204,15 +204,29 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
rn-textDecoration:none"
role="img"
rn-textDecoration:none
rn-zIndex:0"
style={
Object {
"backgroundImage": "url(\"https://google.com/favicon.ico\")",
"height": "20px",
"width": "40px",
}
} />
}>
<img
className="
rn-bottom:0px
rn-height:100%
rn-left:0px
rn-opacity:0
rn-position:absolute
rn-right:0px
rn-top:0px
rn-width:100%
rn-zIndex:-1"
src="https://google.com/favicon.ico"
style={Object {}} />
</div>
`;
exports[`components/Image prop "defaultSource" sets "height" and "width" styles if missing 1`] = `
@@ -251,15 +265,29 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
rn-textDecoration:none"
role="img"
rn-textDecoration:none
rn-zIndex:0"
style={
Object {
"backgroundImage": "url(\"https://google.com/favicon.ico\")",
"height": "10px",
"width": "20px",
}
} />
}>
<img
className="
rn-bottom:0px
rn-height:100%
rn-left:0px
rn-opacity:0
rn-position:absolute
rn-right:0px
rn-top:0px
rn-width:100%
rn-zIndex:-1"
src="https://google.com/favicon.ico"
style={Object {}} />
</div>
`;
exports[`components/Image prop "defaultSource" sets background image when value is a string 1`] = `
@@ -298,13 +326,27 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
rn-textDecoration:none"
role="img"
rn-textDecoration:none
rn-zIndex:0"
style={
Object {
"backgroundImage": "url(\"https://google.com/favicon.ico\")",
}
} />
}>
<img
className="
rn-bottom:0px
rn-height:100%
rn-left:0px
rn-opacity:0
rn-position:absolute
rn-right:0px
rn-top:0px
rn-width:100%
rn-zIndex:-1"
src="https://google.com/favicon.ico"
style={Object {}} />
</div>
`;
exports[`components/Image prop "defaultSource" sets background image when value is an object 1`] = `
@@ -343,13 +385,27 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
rn-textDecoration:none"
role="img"
rn-textDecoration:none
rn-zIndex:0"
style={
Object {
"backgroundImage": "url(\"https://google.com/favicon.ico\")",
}
} />
}>
<img
className="
rn-bottom:0px
rn-height:100%
rn-left:0px
rn-opacity:0
rn-position:absolute
rn-right:0px
rn-top:0px
rn-width:100%
rn-zIndex:-1"
src="https://google.com/favicon.ico"
style={Object {}} />
</div>
`;
exports[`components/Image prop "resizeMode" value "contain" 1`] = `
@@ -388,8 +444,8 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
rn-textDecoration:none"
role="img"
rn-textDecoration:none
rn-zIndex:0"
style={Object {}} />
`;
@@ -429,8 +485,8 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
rn-textDecoration:none"
role="img"
rn-textDecoration:none
rn-zIndex:0"
style={Object {}} />
`;
@@ -470,8 +526,8 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
rn-textDecoration:none"
role="img"
rn-textDecoration:none
rn-zIndex:0"
style={Object {}} />
`;
@@ -511,8 +567,8 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
rn-textDecoration:none"
role="img"
rn-textDecoration:none
rn-zIndex:0"
style={Object {}} />
`;
@@ -552,8 +608,8 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
rn-textDecoration:none"
role="img"
rn-textDecoration:none
rn-zIndex:0"
style={Object {}} />
`;
@@ -593,8 +649,8 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
rn-textDecoration:none"
role="img"
rn-textDecoration:none
rn-zIndex:0"
style={Object {}} />
`;
@@ -634,9 +690,9 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
rn-textDecoration:none"
rn-textDecoration:none
rn-zIndex:0"
data-testid="testID"
role="img"
style={Object {}} />
`;
@@ -676,7 +732,7 @@ rn-paddingBottom:0px
rn-paddingLeft:0px
rn-position:relative
rn-textAlign:inherit
rn-textDecoration:none"
role="img"
rn-textDecoration:none
rn-zIndex:0"
style={Object {}} />
`;
src/components/Image/index.js
+18 -4
View File
@@ -139,17 +139,24 @@ class Image extends Component {
// View doesn't support 'resizeMode' as a style
delete style.resizeMode;
// Allows users to trigger the browser's image context menu
const hiddenImage = displayImage ? createDOMElement('img', {
src: displayImage,
style: [ StyleSheet.absoluteFill, styles.img ]
}) : null;
return (
<View
{...other}
accessibilityLabel={accessibilityLabel}
accessibilityRole='img'
accessible={accessible}
children={children}
onLayout={onLayout}
style={style}
testID={testID}
/>
>
{hiddenImage}
{children}
</View>
);
}
@@ -224,7 +231,14 @@ const styles = StyleSheet.create({
backgroundColor: 'transparent',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover'
backgroundSize: 'cover',
zIndex: 0
},
img: {
height: '100%',
opacity: 0,
width: '100%',
zIndex: -1
}
});