microsoft
/
react-native-adaptivecards
зеркало из https://github.com/microsoft/react-native-adaptivecards.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Merged PR 763287: Make the BackgroundImage response the mode setting. 

Make the BackgroundImage response the mode setting.
This commit is contained in:
Dongyu Zhao 2018-09-10 15:11:23 +00:00
Родитель f8a4cbf783
Коммит bca631af4e
11 изменённых файлов: 186 добавлений и 35 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

Двоичные данные
dist/Assets/Images/Placeholders/avatar_default@3x.png поставляемый
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом" Свайп Оверлей

До

Ширина:  |  Высота:  |  Размер: 13 KiB

После

Ширина:  |  Высота:  |  Размер: 13 KiB

45
dist/Components/Basic/ImageBackground.js поставляемый
Просмотреть файл

@ -1,8 +1,8 @@
import React from 'react';
import { Image, StyleSheet, View, } from 'react-native';
export class ImageBackground extends React.PureComponent {
constructor() {
super(...arguments);
export class ImageBackground extends React.Component {
constructor(props) {
super(props);
this.onLoad = (data) => {
if (this.props.onLoad) {
this.props.onLoad(data);
@ -13,9 +13,27 @@ export class ImageBackground extends React.PureComponent {
this.props.onError(error);
}
};
this.state = {
ratio: 1,
};
}
componentDidMount() {
const { url } = this.props;
if (url) {
Image.getSize(url, (width, height) => {
if (width > 0 && height > 0) {
this.setState({
ratio: width / height,
});
}
}, (error) => {
this.props.onError(error);
});
}
}
render() {
return (React.createElement(View, { style: [{
return (React.createElement(View, { style: [
{
flex: this.props.flex,
position: 'relative',
marginTop: this.props.marginTop,
@ -26,11 +44,26 @@ export class ImageBackground extends React.PureComponent {
paddingRight: this.props.paddingRight,
paddingBottom: this.props.paddingBottom,
paddingLeft: this.props.paddingLeft
}, this.props.containerStyle] },
}, this.props.containerStyle
] },
React.createElement(Image, { source: { uri: this.props.url }, style: [
StyleSheet.absoluteFill,
this.props.imageStyle
], onLoad: this.onLoad, onError: this.onError }),
], onLoad: this.onLoad, onError: this.onError, resizeMethod: 'auto', resizeMode: this.resizeMethod }),
this.props.children));
}
get resizeMethod() {
switch (this.props.resizeMode) {
case 'repeat':
return 'repeat';
case 'stretch':
default:
if (this.state.ratio > 1) {
return 'contain';
}
else {
return 'cover';
}
}
}
}

2
dist/Views/CardElements/BackgroundImage.js поставляемый
Просмотреть файл

@ -39,6 +39,6 @@ export class BackgroundImageView extends React.Component {
if (!model || !model.isSchemaCheckPassed) {
return DebugOutputFactory.createDebugOutputBanner(model.type + '>>' + model.url + ' is not valid', theme, 'error');
}
return (React.createElement(ImageBackground, { url: model.url, flex: 1, onLoad: this.onImageLoad, onError: this.onError }, this.props.children));
return (React.createElement(ImageBackground, { url: model.url, flex: 1, resizeMode: model.mode, onLoad: this.onImageLoad, onError: this.onError }, this.props.children));
}
}

Двоичные данные
examples/AdaptiveCards/Assets/Images/Placeholders/avatar_default@3x.png
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом" Свайп Оверлей

До

Ширина:  |  Высота:  |  Размер: 13 KiB

После

Ширина:  |  Высота:  |  Размер: 13 KiB

45
examples/AdaptiveCards/Components/Basic/ImageBackground.js
Просмотреть файл

@ -1,8 +1,8 @@
import React from 'react';
import { Image, StyleSheet, View, } from 'react-native';
export class ImageBackground extends React.PureComponent {
constructor() {
super(...arguments);
export class ImageBackground extends React.Component {
constructor(props) {
super(props);
this.onLoad = (data) => {
if (this.props.onLoad) {
this.props.onLoad(data);
@ -13,9 +13,27 @@ export class ImageBackground extends React.PureComponent {
this.props.onError(error);
}
};
this.state = {
ratio: 1,
};
}
componentDidMount() {
const { url } = this.props;
if (url) {
Image.getSize(url, (width, height) => {
if (width > 0 && height > 0) {
this.setState({
ratio: width / height,
});
}
}, (error) => {
this.props.onError(error);
});
}
}
render() {
return (React.createElement(View, { style: [{
return (React.createElement(View, { style: [
{
flex: this.props.flex,
position: 'relative',
marginTop: this.props.marginTop,
@ -26,11 +44,26 @@ export class ImageBackground extends React.PureComponent {
paddingRight: this.props.paddingRight,
paddingBottom: this.props.paddingBottom,
paddingLeft: this.props.paddingLeft
}, this.props.containerStyle] },
}, this.props.containerStyle
] },
React.createElement(Image, { source: { uri: this.props.url }, style: [
StyleSheet.absoluteFill,
this.props.imageStyle
], onLoad: this.onLoad, onError: this.onError }),
], onLoad: this.onLoad, onError: this.onError, resizeMethod: 'auto', resizeMode: this.resizeMethod }),
this.props.children));
}
get resizeMethod() {
switch (this.props.resizeMode) {
case 'repeat':
return 'repeat';
case 'stretch':
default:
if (this.state.ratio > 1) {
return 'contain';
}
else {
return 'cover';
}
}
}
}

2
examples/AdaptiveCards/Views/CardElements/BackgroundImage.js
Просмотреть файл

@ -39,6 +39,6 @@ export class BackgroundImageView extends React.Component {
if (!model || !model.isSchemaCheckPassed) {
return DebugOutputFactory.createDebugOutputBanner(model.type + '>>' + model.url + ' is not valid', theme, 'error');
}
return (React.createElement(ImageBackground, { url: model.url, flex: 1, onLoad: this.onImageLoad, onError: this.onError }, this.props.children));
return (React.createElement(ImageBackground, { url: model.url, flex: 1, resizeMode: model.mode, onLoad: this.onImageLoad, onError: this.onError }, this.props.children));
}
}

79
src/Components/Basic/ImageBackground.tsx
Просмотреть файл

@ -11,6 +11,7 @@ import {
interface IProps {
url: string;
flex?: number;
resizeMode?: 'stretch' | 'repeat' | 'repeatHorizontally' | 'repeatVertically';
marginTop?: number;
marginBottom?: number;
marginLeft?: number;
@ -25,22 +26,56 @@ interface IProps {
onError?: (error: any) => void;
}
export class ImageBackground extends React.PureComponent<IProps> {
interface IState {
ratio: number;
}
export class ImageBackground extends React.Component<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {
ratio: 1,
};
}
public componentDidMount() {
const { url } = this.props;
if (url) {
Image.getSize(
url,
(width, height) => {
if (width > 0 && height > 0) {
this.setState({
ratio: width / height,
});
}
},
(error) => {
this.props.onError(error);
}
);
}
}
public render() {
return (
<View style={[{
flex: this.props.flex,
position: 'relative',
marginTop: this.props.marginTop,
marginRight: this.props.marginRight,
marginBottom: this.props.marginBottom,
marginLeft: this.props.marginLeft,
paddingTop: this.props.paddingTop,
paddingRight: this.props.paddingRight,
paddingBottom: this.props.paddingBottom,
paddingLeft: this.props.paddingLeft
}, this.props.containerStyle]}
<View
style={[
{
flex: this.props.flex,
position: 'relative',
marginTop: this.props.marginTop,
marginRight: this.props.marginRight,
marginBottom: this.props.marginBottom,
marginLeft: this.props.marginLeft,
paddingTop: this.props.paddingTop,
paddingRight: this.props.paddingRight,
paddingBottom: this.props.paddingBottom,
paddingLeft: this.props.paddingLeft
}, this.props.containerStyle
]}
>
<Image
source={{ uri: this.props.url }}
@ -50,6 +85,8 @@ export class ImageBackground extends React.PureComponent<IProps> {
]}
onLoad={this.onLoad}
onError={this.onError}
resizeMethod='auto'
resizeMode={this.resizeMethod}
/>
{this.props.children}
</View>
@ -67,4 +104,18 @@ export class ImageBackground extends React.PureComponent<IProps> {
this.props.onError(error);
}
}
private get resizeMethod() {
switch (this.props.resizeMode) {
case 'repeat':
return 'repeat';
case 'stretch':
default:
if (this.state.ratio > 1) {
return 'contain';
} else {
return 'cover';
}
}
}
}

1
src/Views/CardElements/BackgroundImage.tsx
Просмотреть файл

@ -34,6 +34,7 @@ export class BackgroundImageView extends React.Component<IProps> {
<ImageBackground
url={model.url}
flex={1}
resizeMode={model.mode}
onLoad={this.onImageLoad}
onError={this.onError}
>

Двоичные данные
tool/src/assets/AdaptiveCards/Assets/Images/Placeholders/avatar_default.png
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом" Свайп Оверлей

До

Ширина:  |  Высота:  |  Размер: 13 KiB

После

Ширина:  |  Высота:  |  Размер: 13 KiB

45
tool/src/assets/AdaptiveCards/Components/Basic/ImageBackground.js
Просмотреть файл

@ -1,8 +1,8 @@
import React from 'react';
import { Image, StyleSheet, View, } from 'react-native';
export class ImageBackground extends React.PureComponent {
constructor() {
super(...arguments);
export class ImageBackground extends React.Component {
constructor(props) {
super(props);
this.onLoad = (data) => {
if (this.props.onLoad) {
this.props.onLoad(data);
@ -13,9 +13,27 @@ export class ImageBackground extends React.PureComponent {
this.props.onError(error);
}
};
this.state = {
ratio: 1,
};
}
componentDidMount() {
const { url } = this.props;
if (url) {
Image.getSize(url, (width, height) => {
if (width > 0 && height > 0) {
this.setState({
ratio: width / height,
});
}
}, (error) => {
this.props.onError(error);
});
}
}
render() {
return (React.createElement(View, { style: [{
return (React.createElement(View, { style: [
{
flex: this.props.flex,
position: 'relative',
marginTop: this.props.marginTop,
@ -26,11 +44,26 @@ export class ImageBackground extends React.PureComponent {
paddingRight: this.props.paddingRight,
paddingBottom: this.props.paddingBottom,
paddingLeft: this.props.paddingLeft
}, this.props.containerStyle] },
}, this.props.containerStyle
] },
React.createElement(Image, { source: { uri: this.props.url }, style: [
StyleSheet.absoluteFill,
this.props.imageStyle
], onLoad: this.onLoad, onError: this.onError }),
], onLoad: this.onLoad, onError: this.onError, resizeMethod: 'auto', resizeMode: this.resizeMethod }),
this.props.children));
}
get resizeMethod() {
switch (this.props.resizeMode) {
case 'repeat':
return 'repeat';
case 'stretch':
default:
if (this.state.ratio > 1) {
return 'contain';
}
else {
return 'cover';
}
}
}
}

2
tool/src/assets/AdaptiveCards/Views/CardElements/BackgroundImage.js
Просмотреть файл

@ -39,6 +39,6 @@ export class BackgroundImageView extends React.Component {
if (!model || !model.isSchemaCheckPassed) {
return DebugOutputFactory.createDebugOutputBanner(model.type + '>>' + model.url + ' is not valid', theme, 'error');
}
return (React.createElement(ImageBackground, { url: model.url, flex: 1, onLoad: this.onImageLoad, onError: this.onError }, this.props.children));
return (React.createElement(ImageBackground, { url: model.url, flex: 1, resizeMode: model.mode, onLoad: this.onImageLoad, onError: this.onError }, this.props.children));
}
}