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

Merge branch 'release_0.1.x' of https://github.com/microsoft/react-native-adaptivecards into release_0.1.x

This commit is contained in:
Dongyu Zhao 2019-05-30 18:28:51 +08:00
Родитель c09a634087 c965c00ded
Коммит e0a7e123b2
21 изменённых файлов: 327 добавлений и 230 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

23
README.md
Просмотреть файл

@ -11,16 +11,16 @@ React Native renderer for [AdaptiveCards](http://adaptivecards.io/).
1. Installation
```bash
$ npm install git+https://msasg.visualstudio.com/DefaultCollection/Bing_Cortana/_git/react-native-adaptivecards
$ npm install react-native-adaptivecards
```
or by Yarn
```bash
$ yarn add git+https://msasg.visualstudio.com/DefaultCollection/Bing_Cortana/_git/react-native-adaptivecards
$ yarn add react-native-adaptivecards
```
2. Impementation
2. Implementation
- Import to the component where you want to show an AdaptiveCards
@ -36,15 +36,24 @@ import AdaptiveCard from 'react-native-adaptivecards';
### Properties
| Prop | default | Type | Description |
| Prop | Required | Type | Description |
| ------------- | -------------------------------------------:| ---------:| ------------------------:|
| adaptiveCard | - | object | Json object based on AdaptiveCards schema |
| overrideStyle | [{...}](./src/View/Styles/styleConfig.d.ts) | object | Customized styles |
| adaptiveCard | Yes | object | Json object based on AdaptiveCards schema |
| style | No | object | Customized styles |
| config | No, default[{...}](./src/Config/Types.ts) | object | Customized config |
| onSubmit | No | function | Submit Action |
| onOpenUrl | No | function | OpenUrl Action |
| onCallback | No | function | Callback Action |
| onFocus | No | function | Focus Action |
| onBlur | No | function | Blur Action |
| onError | No | function | Error Action |
| onInfo | No | function | Info Action |
| onWarning | No | function | Warning Action |
### Examples
```bash
$ cd examples
$ yarn
$ react-native run-ios
$ yarn ios
```

2
dist/Components/Inputs/InputBox.d.ts поставляемый
Просмотреть файл

@ -24,8 +24,10 @@ interface IState {
focused: boolean;
}
export declare class InputBox extends React.Component<IProps, IState> {
private textInputRef;
constructor(props: IProps);
render(): JSX.Element;
private focusInput;
private onValueChange;
private onBlur;
private onFocus;

57
dist/Components/Inputs/InputBox.js поставляемый
Просмотреть файл

@ -1,9 +1,14 @@
import * as React from 'react';
import { TextInput, } from 'react-native';
import { TextInput, TouchableWithoutFeedback, View, } from 'react-native';
import { StyleManager } from '../../Styles/StyleManager';
export class InputBox extends React.Component {
constructor(props) {
super(props);
this.focusInput = () => {
if (this.textInputRef) {
this.textInputRef.focus();
}
};
this.onValueChange = (value) => {
if (this.props.onValueChange) {
this.props.onValueChange(value);
@ -31,30 +36,32 @@ export class InputBox extends React.Component {
};
}
render() {
return (React.createElement(TextInput, { accessibilityLabel: this.props.placeholder, style: [
{
flex: this.props.flex,
color: this.color,
fontSize: this.fontSize,
lineHeight: this.lineHeight,
fontWeight: this.fontWeight,
backgroundColor: this.backgroundColor,
width: this.props.width,
height: this.props.height || this.height,
borderColor: this.borderColor,
borderWidth: 0,
borderBottomWidth: 1,
marginTop: this.props.marginTop,
marginRight: this.props.marginRight,
marginBottom: this.props.marginBottom,
marginLeft: this.props.marginLeft,
paddingTop: this.paddingVertical,
paddingRight: this.paddingHorizontal,
paddingBottom: this.paddingVertical,
paddingLeft: this.paddingHorizontal,
},
this.props.style
], multiline: this.isMultiLine, numberOfLines: this.props.numberOfLines, keyboardType: this.props.keyboardType, blurOnSubmit: !this.isMultiLine, placeholder: this.props.placeholder, placeholderTextColor: this.placeholderColor, value: this.props.value, returnKeyType: this.props.returnKeyType, underlineColorAndroid: 'transparent', importantForAccessibility: 'no-hide-descendants', onChangeText: this.onValueChange, onFocus: this.onFocus, onBlur: this.onBlur }));
return (React.createElement(TouchableWithoutFeedback, { onPress: this.focusInput, accessibilityLabel: this.props.value ? this.props.value : this.props.placeholder, accessibilityHint: 'double tap to activate' },
React.createElement(View, null,
React.createElement(TextInput, { style: [
{
flex: this.props.flex,
color: this.color,
fontSize: this.fontSize,
lineHeight: this.lineHeight,
fontWeight: this.fontWeight,
backgroundColor: this.backgroundColor,
width: this.props.width,
height: this.props.height || this.height,
borderColor: this.borderColor,
borderWidth: 0,
borderBottomWidth: 1,
marginTop: this.props.marginTop,
marginRight: this.props.marginRight,
marginBottom: this.props.marginBottom,
marginLeft: this.props.marginLeft,
paddingTop: this.paddingVertical,
paddingRight: this.paddingHorizontal,
paddingBottom: this.paddingVertical,
paddingLeft: this.paddingHorizontal,
},
this.props.style
], multiline: this.isMultiLine, numberOfLines: this.props.numberOfLines, keyboardType: this.props.keyboardType, blurOnSubmit: !this.isMultiLine, placeholder: this.props.placeholder, placeholderTextColor: this.placeholderColor, value: this.props.value, returnKeyType: this.props.returnKeyType, underlineColorAndroid: 'transparent', importantForAccessibility: 'no-hide-descendants', onChangeText: this.onValueChange, onFocus: this.onFocus, onBlur: this.onBlur, ref: (ref) => this.textInputRef }))));
}
validateInput() {
if (this.props.validateInput) {

1
dist/Components/Inputs/LabelInput.d.ts поставляемый
Просмотреть файл

@ -43,6 +43,7 @@ export declare class LabelInput extends React.Component<IProps, IState> {
private onKeyPress;
private onSubmitEditing;
private onBlur;
private focusInput;
private onFocus;
private validateInput;
private readonly labelLength;

41
dist/Components/Inputs/LabelInput.js поставляемый
Просмотреть файл

@ -1,5 +1,5 @@
import * as React from 'react';
import { ScrollView, TextInput, View } from 'react-native';
import { ScrollView, TextInput, TouchableWithoutFeedback, View } from 'react-native';
import { StyleManager } from '../../Styles/StyleManager';
import { EmailUtils } from '../../Utils/EmailUtils';
import { Label } from '../Basic/Label';
@ -62,6 +62,11 @@ export class LabelInput extends React.Component {
}
});
};
this.focusInput = () => {
if (this.inputBox) {
this.inputBox.focus();
}
};
this.onFocus = () => {
this.setState({
focused: true
@ -124,23 +129,29 @@ export class LabelInput extends React.Component {
return undefined;
}
renderInputBox() {
return (React.createElement(TextInput, { ref: ref => this.inputBox = ref, style: [
{
return (React.createElement(TouchableWithoutFeedback, { style: {
flex: 1,
}, onPress: this.focusInput, accessible: true, accessibilityLabel: this.props.value ? this.props.value : this.props.placeholder, accessibilityHint: 'double tap to activate' },
React.createElement(View, { style: {
flex: 1,
color: this.color,
fontSize: this.fontSize,
lineHeight: this.lineHeight,
fontWeight: this.fontWeight,
backgroundColor: this.backgroundColor,
borderRadius: 4,
height: this.height - 2,
paddingTop: this.paddingVertical,
paddingRight: this.paddingHorizontal,
paddingBottom: this.paddingVertical,
paddingLeft: this.paddingHorizontal,
},
this.props.style
], autoCorrect: false, autoCapitalize: 'none', multiline: this.isMultiLine, numberOfLines: this.props.numberOfLines, keyboardType: this.props.keyboardType, blurOnSubmit: !this.isMultiLine, placeholder: this.props.placeholder, placeholderTextColor: this.placeholderColor, value: this.props.value, returnKeyType: this.props.returnKeyType, underlineColorAndroid: 'transparent', importantForAccessibility: 'no-hide-descendants', onChangeText: this.onValueChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.onKeyPress, onSubmitEditing: this.onSubmitEditing }));
} },
React.createElement(TextInput, { ref: ref => this.inputBox = ref, style: [
{
flex: 1,
color: this.color,
fontSize: this.fontSize,
lineHeight: this.lineHeight,
fontWeight: this.fontWeight,
backgroundColor: this.backgroundColor,
borderRadius: 4,
height: this.height,
paddingTop: this.paddingVertical,
paddingBottom: this.paddingVertical,
},
this.props.style
], autoCorrect: false, autoCapitalize: 'none', multiline: this.isMultiLine, numberOfLines: this.props.numberOfLines, keyboardType: this.props.keyboardType, blurOnSubmit: !this.isMultiLine, placeholder: this.props.placeholder, placeholderTextColor: this.placeholderColor, value: this.props.value, returnKeyType: this.props.returnKeyType, underlineColorAndroid: 'transparent', importantForAccessibility: 'no-hide-descendants', onChangeText: this.onValueChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.onKeyPress, onSubmitEditing: this.onSubmitEditing }))));
}
renderSuggestions() {
if (this.props.suggestionView) {

11
dist/Models/Containers/Column.js поставляемый
Просмотреть файл

@ -11,15 +11,12 @@ export class ColumnModel extends ScopeModel {
this.width = 'auto';
this.verticalContentAlignment = json.verticalContentAlignment;
if (json.width) {
if (typeof json.width === 'string') {
let columnWidth = parseInt(json.width, 10);
if (isNaN(columnWidth)) {
this.width = json.width.toLowerCase() === 'stretch' ? 'stretch' : 'auto';
}
else if (typeof json.width === 'number') {
let columnWidth = parseInt(json.width, 10);
if (columnWidth < 0) {
columnWidth = 0;
}
this.width = columnWidth;
else {
this.width = columnWidth < 0 ? 0 : columnWidth;
}
}
if (json.backgroundImage) {

0
examples/AdaptiveCards/Components/Inputs/Checkbox.js → examples/AdaptiveCards/Components/Inputs/CheckBox.js
Просмотреть файл

2
examples/AdaptiveCards/Components/Inputs/InputBox.d.ts поставляемый
Просмотреть файл

@ -24,8 +24,10 @@ interface IState {
focused: boolean;
}
export declare class InputBox extends React.Component<IProps, IState> {
private textInputRef;
constructor(props: IProps);
render(): JSX.Element;
private focusInput;
private onValueChange;
private onBlur;
private onFocus;

57
examples/AdaptiveCards/Components/Inputs/InputBox.js
Просмотреть файл

@ -1,9 +1,14 @@
import * as React from 'react';
import { TextInput, } from 'react-native';
import { TextInput, TouchableWithoutFeedback, View, } from 'react-native';
import { StyleManager } from '../../Styles/StyleManager';
export class InputBox extends React.Component {
constructor(props) {
super(props);
this.focusInput = () => {
if (this.textInputRef) {
this.textInputRef.focus();
}
};
this.onValueChange = (value) => {
if (this.props.onValueChange) {
this.props.onValueChange(value);
@ -31,30 +36,32 @@ export class InputBox extends React.Component {
};
}
render() {
return (React.createElement(TextInput, { accessibilityLabel: this.props.placeholder, style: [
{
flex: this.props.flex,
color: this.color,
fontSize: this.fontSize,
lineHeight: this.lineHeight,
fontWeight: this.fontWeight,
backgroundColor: this.backgroundColor,
width: this.props.width,
height: this.props.height || this.height,
borderColor: this.borderColor,
borderWidth: 0,
borderBottomWidth: 1,
marginTop: this.props.marginTop,
marginRight: this.props.marginRight,
marginBottom: this.props.marginBottom,
marginLeft: this.props.marginLeft,
paddingTop: this.paddingVertical,
paddingRight: this.paddingHorizontal,
paddingBottom: this.paddingVertical,
paddingLeft: this.paddingHorizontal,
},
this.props.style
], multiline: this.isMultiLine, numberOfLines: this.props.numberOfLines, keyboardType: this.props.keyboardType, blurOnSubmit: !this.isMultiLine, placeholder: this.props.placeholder, placeholderTextColor: this.placeholderColor, value: this.props.value, returnKeyType: this.props.returnKeyType, underlineColorAndroid: 'transparent', importantForAccessibility: 'no-hide-descendants', onChangeText: this.onValueChange, onFocus: this.onFocus, onBlur: this.onBlur }));
return (React.createElement(TouchableWithoutFeedback, { onPress: this.focusInput, accessibilityLabel: this.props.value ? this.props.value : this.props.placeholder, accessibilityHint: 'double tap to activate' },
React.createElement(View, null,
React.createElement(TextInput, { style: [
{
flex: this.props.flex,
color: this.color,
fontSize: this.fontSize,
lineHeight: this.lineHeight,
fontWeight: this.fontWeight,
backgroundColor: this.backgroundColor,
width: this.props.width,
height: this.props.height || this.height,
borderColor: this.borderColor,
borderWidth: 0,
borderBottomWidth: 1,
marginTop: this.props.marginTop,
marginRight: this.props.marginRight,
marginBottom: this.props.marginBottom,
marginLeft: this.props.marginLeft,
paddingTop: this.paddingVertical,
paddingRight: this.paddingHorizontal,
paddingBottom: this.paddingVertical,
paddingLeft: this.paddingHorizontal,
},
this.props.style
], multiline: this.isMultiLine, numberOfLines: this.props.numberOfLines, keyboardType: this.props.keyboardType, blurOnSubmit: !this.isMultiLine, placeholder: this.props.placeholder, placeholderTextColor: this.placeholderColor, value: this.props.value, returnKeyType: this.props.returnKeyType, underlineColorAndroid: 'transparent', importantForAccessibility: 'no-hide-descendants', onChangeText: this.onValueChange, onFocus: this.onFocus, onBlur: this.onBlur, ref: (ref) => this.textInputRef }))));
}
validateInput() {
if (this.props.validateInput) {

1
examples/AdaptiveCards/Components/Inputs/LabelInput.d.ts поставляемый
Просмотреть файл

@ -43,6 +43,7 @@ export declare class LabelInput extends React.Component<IProps, IState> {
private onKeyPress;
private onSubmitEditing;
private onBlur;
private focusInput;
private onFocus;
private validateInput;
private readonly labelLength;

41
examples/AdaptiveCards/Components/Inputs/LabelInput.js
Просмотреть файл

@ -1,5 +1,5 @@
import * as React from 'react';
import { ScrollView, TextInput, View } from 'react-native';
import { ScrollView, TextInput, TouchableWithoutFeedback, View } from 'react-native';
import { StyleManager } from '../../Styles/StyleManager';
import { EmailUtils } from '../../Utils/EmailUtils';
import { Label } from '../Basic/Label';
@ -62,6 +62,11 @@ export class LabelInput extends React.Component {
}
});
};
this.focusInput = () => {
if (this.inputBox) {
this.inputBox.focus();
}
};
this.onFocus = () => {
this.setState({
focused: true
@ -124,23 +129,29 @@ export class LabelInput extends React.Component {
return undefined;
}
renderInputBox() {
return (React.createElement(TextInput, { ref: ref => this.inputBox = ref, style: [
{
return (React.createElement(TouchableWithoutFeedback, { style: {
flex: 1,
}, onPress: this.focusInput, accessible: true, accessibilityLabel: this.props.value ? this.props.value : this.props.placeholder, accessibilityHint: 'double tap to activate' },
React.createElement(View, { style: {
flex: 1,
color: this.color,
fontSize: this.fontSize,
lineHeight: this.lineHeight,
fontWeight: this.fontWeight,
backgroundColor: this.backgroundColor,
borderRadius: 4,
height: this.height - 2,
paddingTop: this.paddingVertical,
paddingRight: this.paddingHorizontal,
paddingBottom: this.paddingVertical,
paddingLeft: this.paddingHorizontal,
},
this.props.style
], autoCorrect: false, autoCapitalize: 'none', multiline: this.isMultiLine, numberOfLines: this.props.numberOfLines, keyboardType: this.props.keyboardType, blurOnSubmit: !this.isMultiLine, placeholder: this.props.placeholder, placeholderTextColor: this.placeholderColor, value: this.props.value, returnKeyType: this.props.returnKeyType, underlineColorAndroid: 'transparent', importantForAccessibility: 'no-hide-descendants', onChangeText: this.onValueChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.onKeyPress, onSubmitEditing: this.onSubmitEditing }));
} },
React.createElement(TextInput, { ref: ref => this.inputBox = ref, style: [
{
flex: 1,
color: this.color,
fontSize: this.fontSize,
lineHeight: this.lineHeight,
fontWeight: this.fontWeight,
backgroundColor: this.backgroundColor,
borderRadius: 4,
height: this.height,
paddingTop: this.paddingVertical,
paddingBottom: this.paddingVertical,
},
this.props.style
], autoCorrect: false, autoCapitalize: 'none', multiline: this.isMultiLine, numberOfLines: this.props.numberOfLines, keyboardType: this.props.keyboardType, blurOnSubmit: !this.isMultiLine, placeholder: this.props.placeholder, placeholderTextColor: this.placeholderColor, value: this.props.value, returnKeyType: this.props.returnKeyType, underlineColorAndroid: 'transparent', importantForAccessibility: 'no-hide-descendants', onChangeText: this.onValueChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.onKeyPress, onSubmitEditing: this.onSubmitEditing }))));
}
renderSuggestions() {
if (this.props.suggestionView) {

11
examples/AdaptiveCards/Models/Containers/Column.js
Просмотреть файл

@ -11,15 +11,12 @@ export class ColumnModel extends ScopeModel {
this.width = 'auto';
this.verticalContentAlignment = json.verticalContentAlignment;
if (json.width) {
if (typeof json.width === 'string') {
let columnWidth = parseInt(json.width, 10);
if (isNaN(columnWidth)) {
this.width = json.width.toLowerCase() === 'stretch' ? 'stretch' : 'auto';
}
else if (typeof json.width === 'number') {
let columnWidth = parseInt(json.width, 10);
if (columnWidth < 0) {
columnWidth = 0;
}
this.width = columnWidth;
else {
this.width = columnWidth < 0 ? 0 : columnWidth;
}
}
if (json.backgroundImage) {

2
examples/README.md
Просмотреть файл

@ -1,6 +1,6 @@
This project was bootstrapped with [Create React Native App](https://github.com/react-community/create-react-native-app).
Below you'll find information about performing common tasks. The most recent version of this guide is available [here](https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md).
Below you'll find information about performing common tasks. The most recent version of this guide is available [here](https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/README.md).
## Table of Contents

96
src/Components/Inputs/InputBox.tsx
Просмотреть файл

@ -5,6 +5,8 @@ import {
StyleProp,
TextInput,
TextStyle,
TouchableWithoutFeedback,
View,
} from 'react-native';
import { StyleManager } from '../../Styles/StyleManager';
@ -34,6 +36,7 @@ interface IState {
}
export class InputBox extends React.Component<IProps, IState> {
private textInputRef: TextInput;
constructor(props: IProps) {
super(props);
@ -44,49 +47,62 @@ export class InputBox extends React.Component<IProps, IState> {
public render() {
return (
<TextInput
accessibilityLabel={this.props.placeholder}
style={[
{
flex: this.props.flex,
color: this.color,
fontSize: this.fontSize,
lineHeight: this.lineHeight,
fontWeight: this.fontWeight,
backgroundColor: this.backgroundColor,
width: this.props.width,
height: this.props.height || this.height,
borderColor: this.borderColor,
borderWidth: 0,
borderBottomWidth: 1,
marginTop: this.props.marginTop,
marginRight: this.props.marginRight,
marginBottom: this.props.marginBottom,
marginLeft: this.props.marginLeft,
paddingTop: this.paddingVertical,
paddingRight: this.paddingHorizontal,
paddingBottom: this.paddingVertical,
paddingLeft: this.paddingHorizontal,
},
this.props.style
]}
multiline={this.isMultiLine}
numberOfLines={this.props.numberOfLines}
keyboardType={this.props.keyboardType}
blurOnSubmit={!this.isMultiLine}
placeholder={this.props.placeholder}
placeholderTextColor={this.placeholderColor}
value={this.props.value}
returnKeyType={this.props.returnKeyType}
underlineColorAndroid='transparent'
importantForAccessibility='no-hide-descendants'
onChangeText={this.onValueChange}
onFocus={this.onFocus}
onBlur={this.onBlur}
/>
<TouchableWithoutFeedback
onPress={this.focusInput}
accessibilityLabel={this.props.value ? this.props.value : this.props.placeholder}
accessibilityHint={'double tap to activate'} >
<View >
<TextInput
style={[
{
flex: this.props.flex,
color: this.color,
fontSize: this.fontSize,
lineHeight: this.lineHeight,
fontWeight: this.fontWeight,
backgroundColor: this.backgroundColor,
width: this.props.width,
height: this.props.height || this.height,
borderColor: this.borderColor,
borderWidth: 0,
borderBottomWidth: 1,
marginTop: this.props.marginTop,
marginRight: this.props.marginRight,
marginBottom: this.props.marginBottom,
marginLeft: this.props.marginLeft,
paddingTop: this.paddingVertical,
paddingRight: this.paddingHorizontal,
paddingBottom: this.paddingVertical,
paddingLeft: this.paddingHorizontal,
},
this.props.style
]}
multiline={this.isMultiLine}
numberOfLines={this.props.numberOfLines}
keyboardType={this.props.keyboardType}
blurOnSubmit={!this.isMultiLine}
placeholder={this.props.placeholder}
placeholderTextColor={this.placeholderColor}
value={this.props.value}
returnKeyType={this.props.returnKeyType}
underlineColorAndroid='transparent'
importantForAccessibility='no-hide-descendants'
onChangeText={this.onValueChange}
onFocus={this.onFocus}
onBlur={this.onBlur}
ref={(ref) => this.textInputRef}
/>
</View>
</TouchableWithoutFeedback>
);
}
private focusInput = () => {
if (this.textInputRef) {
this.textInputRef.focus();
}
}
private onValueChange = (value: string) => {
if (this.props.onValueChange) {
this.props.onValueChange(value);

89
src/Components/Inputs/LabelInput.tsx
Просмотреть файл

@ -8,6 +8,7 @@ import {
TextInput,
TextInputKeyPressEventData,
TextStyle,
TouchableWithoutFeedback,
View
} from 'react-native';
import { StyleManager } from '../../Styles/StyleManager';
@ -131,43 +132,57 @@ export class LabelInput extends React.Component<IProps, IState> {
private renderInputBox() {
return (
<TextInput
ref={ref => this.inputBox = ref}
style={[
{
<TouchableWithoutFeedback
style={{
flex: 1,
}}
onPress={this.focusInput}
accessible={true}
accessibilityLabel={this.props.value ? this.props.value : this.props.placeholder}
accessibilityHint={'double tap to activate'} >
<View
style={{
flex: 1,
color: this.color,
fontSize: this.fontSize,
lineHeight: this.lineHeight,
fontWeight: this.fontWeight,
backgroundColor: this.backgroundColor,
borderRadius: 4,
height: this.height - 2,
paddingTop: this.paddingVertical,
paddingRight: this.paddingHorizontal,
paddingBottom: this.paddingVertical,
paddingLeft: this.paddingHorizontal,
},
this.props.style
]}
autoCorrect={false}
autoCapitalize='none'
multiline={this.isMultiLine}
numberOfLines={this.props.numberOfLines}
keyboardType={this.props.keyboardType}
blurOnSubmit={!this.isMultiLine}
placeholder={this.props.placeholder}
placeholderTextColor={this.placeholderColor}
value={this.props.value}
returnKeyType={this.props.returnKeyType}
underlineColorAndroid='transparent'
importantForAccessibility='no-hide-descendants'
onChangeText={this.onValueChange}
onFocus={this.onFocus}
onBlur={this.onBlur}
onKeyPress={this.onKeyPress}
onSubmitEditing={this.onSubmitEditing}
/>
}}>
<TextInput
ref={ref => this.inputBox = ref}
style={[
{
flex: 1,
color: this.color,
fontSize: this.fontSize,
lineHeight: this.lineHeight,
fontWeight: this.fontWeight,
backgroundColor: this.backgroundColor,
borderRadius: 4,
height: this.height,
paddingTop: this.paddingVertical,
paddingBottom: this.paddingVertical,
},
this.props.style
]}
autoCorrect={false}
autoCapitalize='none'
multiline={this.isMultiLine}
numberOfLines={this.props.numberOfLines}
keyboardType={this.props.keyboardType}
blurOnSubmit={!this.isMultiLine}
placeholder={this.props.placeholder}
placeholderTextColor={this.placeholderColor}
value={this.props.value}
returnKeyType={this.props.returnKeyType}
underlineColorAndroid='transparent'
importantForAccessibility='no-hide-descendants'
onChangeText={this.onValueChange}
onFocus={this.onFocus}
onBlur={this.onBlur}
onKeyPress={this.onKeyPress}
onSubmitEditing={this.onSubmitEditing}
/>
</View>
</TouchableWithoutFeedback>
);
}
@ -250,6 +265,12 @@ export class LabelInput extends React.Component<IProps, IState> {
});
}
private focusInput = () => {
if (this.inputBox) {
this.inputBox.focus();
}
}
private onFocus = () => {
this.setState({
focused: true

11
src/Models/Containers/Column.ts
Просмотреть файл

@ -22,14 +22,11 @@ export class ColumnModel extends ScopeModel {
this.width = 'auto';
this.verticalContentAlignment = json.verticalContentAlignment;
if (json.width) {
if (typeof json.width === 'string') {
let columnWidth = parseInt(json.width, 10);
if (isNaN(columnWidth)) {
this.width = json.width.toLowerCase() === 'stretch' ? 'stretch' : 'auto';
} else if (typeof json.width === 'number') {
let columnWidth = parseInt(json.width, 10);
if (columnWidth < 0) {
columnWidth = 0;
}
this.width = columnWidth;
} else {
this.width = columnWidth < 0 ? 0 : columnWidth;
}
}

2
tool/src/assets/AdaptiveCards/Components/Inputs/InputBox.d.ts поставляемый
Просмотреть файл

@ -24,8 +24,10 @@ interface IState {
focused: boolean;
}
export declare class InputBox extends React.Component<IProps, IState> {
private textInputRef;
constructor(props: IProps);
render(): JSX.Element;
private focusInput;
private onValueChange;
private onBlur;
private onFocus;

57
tool/src/assets/AdaptiveCards/Components/Inputs/InputBox.js
Просмотреть файл

@ -1,9 +1,14 @@
import * as React from 'react';
import { TextInput, } from 'react-native';
import { TextInput, TouchableWithoutFeedback, View, } from 'react-native';
import { StyleManager } from '../../Styles/StyleManager';
export class InputBox extends React.Component {
constructor(props) {
super(props);
this.focusInput = () => {
if (this.textInputRef) {
this.textInputRef.focus();
}
};
this.onValueChange = (value) => {
if (this.props.onValueChange) {
this.props.onValueChange(value);
@ -31,30 +36,32 @@ export class InputBox extends React.Component {
};
}
render() {
return (React.createElement(TextInput, { accessibilityLabel: this.props.placeholder, style: [
{
flex: this.props.flex,
color: this.color,
fontSize: this.fontSize,
lineHeight: this.lineHeight,
fontWeight: this.fontWeight,
backgroundColor: this.backgroundColor,
width: this.props.width,
height: this.props.height || this.height,
borderColor: this.borderColor,
borderWidth: 0,
borderBottomWidth: 1,
marginTop: this.props.marginTop,
marginRight: this.props.marginRight,
marginBottom: this.props.marginBottom,
marginLeft: this.props.marginLeft,
paddingTop: this.paddingVertical,
paddingRight: this.paddingHorizontal,
paddingBottom: this.paddingVertical,
paddingLeft: this.paddingHorizontal,
},
this.props.style
], multiline: this.isMultiLine, numberOfLines: this.props.numberOfLines, keyboardType: this.props.keyboardType, blurOnSubmit: !this.isMultiLine, placeholder: this.props.placeholder, placeholderTextColor: this.placeholderColor, value: this.props.value, returnKeyType: this.props.returnKeyType, underlineColorAndroid: 'transparent', importantForAccessibility: 'no-hide-descendants', onChangeText: this.onValueChange, onFocus: this.onFocus, onBlur: this.onBlur }));
return (React.createElement(TouchableWithoutFeedback, { onPress: this.focusInput, accessibilityLabel: this.props.value ? this.props.value : this.props.placeholder, accessibilityHint: 'double tap to activate' },
React.createElement(View, null,
React.createElement(TextInput, { style: [
{
flex: this.props.flex,
color: this.color,
fontSize: this.fontSize,
lineHeight: this.lineHeight,
fontWeight: this.fontWeight,
backgroundColor: this.backgroundColor,
width: this.props.width,
height: this.props.height || this.height,
borderColor: this.borderColor,
borderWidth: 0,
borderBottomWidth: 1,
marginTop: this.props.marginTop,
marginRight: this.props.marginRight,
marginBottom: this.props.marginBottom,
marginLeft: this.props.marginLeft,
paddingTop: this.paddingVertical,
paddingRight: this.paddingHorizontal,
paddingBottom: this.paddingVertical,
paddingLeft: this.paddingHorizontal,
},
this.props.style
], multiline: this.isMultiLine, numberOfLines: this.props.numberOfLines, keyboardType: this.props.keyboardType, blurOnSubmit: !this.isMultiLine, placeholder: this.props.placeholder, placeholderTextColor: this.placeholderColor, value: this.props.value, returnKeyType: this.props.returnKeyType, underlineColorAndroid: 'transparent', importantForAccessibility: 'no-hide-descendants', onChangeText: this.onValueChange, onFocus: this.onFocus, onBlur: this.onBlur, ref: (ref) => this.textInputRef }))));
}
validateInput() {
if (this.props.validateInput) {

1
tool/src/assets/AdaptiveCards/Components/Inputs/LabelInput.d.ts поставляемый
Просмотреть файл

@ -43,6 +43,7 @@ export declare class LabelInput extends React.Component<IProps, IState> {
private onKeyPress;
private onSubmitEditing;
private onBlur;
private focusInput;
private onFocus;
private validateInput;
private readonly labelLength;

41
tool/src/assets/AdaptiveCards/Components/Inputs/LabelInput.js
Просмотреть файл

@ -1,5 +1,5 @@
import * as React from 'react';
import { ScrollView, TextInput, View } from 'react-native';
import { ScrollView, TextInput, TouchableWithoutFeedback, View } from 'react-native';
import { StyleManager } from '../../Styles/StyleManager';
import { EmailUtils } from '../../Utils/EmailUtils';
import { Label } from '../Basic/Label';
@ -62,6 +62,11 @@ export class LabelInput extends React.Component {
}
});
};
this.focusInput = () => {
if (this.inputBox) {
this.inputBox.focus();
}
};
this.onFocus = () => {
this.setState({
focused: true
@ -124,23 +129,29 @@ export class LabelInput extends React.Component {
return undefined;
}
renderInputBox() {
return (React.createElement(TextInput, { ref: ref => this.inputBox = ref, style: [
{
return (React.createElement(TouchableWithoutFeedback, { style: {
flex: 1,
}, onPress: this.focusInput, accessible: true, accessibilityLabel: this.props.value ? this.props.value : this.props.placeholder, accessibilityHint: 'double tap to activate' },
React.createElement(View, { style: {
flex: 1,
color: this.color,
fontSize: this.fontSize,
lineHeight: this.lineHeight,
fontWeight: this.fontWeight,
backgroundColor: this.backgroundColor,
borderRadius: 4,
height: this.height - 2,
paddingTop: this.paddingVertical,
paddingRight: this.paddingHorizontal,
paddingBottom: this.paddingVertical,
paddingLeft: this.paddingHorizontal,
},
this.props.style
], autoCorrect: false, autoCapitalize: 'none', multiline: this.isMultiLine, numberOfLines: this.props.numberOfLines, keyboardType: this.props.keyboardType, blurOnSubmit: !this.isMultiLine, placeholder: this.props.placeholder, placeholderTextColor: this.placeholderColor, value: this.props.value, returnKeyType: this.props.returnKeyType, underlineColorAndroid: 'transparent', importantForAccessibility: 'no-hide-descendants', onChangeText: this.onValueChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.onKeyPress, onSubmitEditing: this.onSubmitEditing }));
} },
React.createElement(TextInput, { ref: ref => this.inputBox = ref, style: [
{
flex: 1,
color: this.color,
fontSize: this.fontSize,
lineHeight: this.lineHeight,
fontWeight: this.fontWeight,
backgroundColor: this.backgroundColor,
borderRadius: 4,
height: this.height,
paddingTop: this.paddingVertical,
paddingBottom: this.paddingVertical,
},
this.props.style
], autoCorrect: false, autoCapitalize: 'none', multiline: this.isMultiLine, numberOfLines: this.props.numberOfLines, keyboardType: this.props.keyboardType, blurOnSubmit: !this.isMultiLine, placeholder: this.props.placeholder, placeholderTextColor: this.placeholderColor, value: this.props.value, returnKeyType: this.props.returnKeyType, underlineColorAndroid: 'transparent', importantForAccessibility: 'no-hide-descendants', onChangeText: this.onValueChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.onKeyPress, onSubmitEditing: this.onSubmitEditing }))));
}
renderSuggestions() {
if (this.props.suggestionView) {

11
tool/src/assets/AdaptiveCards/Models/Containers/Column.js
Просмотреть файл

@ -11,15 +11,12 @@ export class ColumnModel extends ScopeModel {
this.width = 'auto';
this.verticalContentAlignment = json.verticalContentAlignment;
if (json.width) {
if (typeof json.width === 'string') {
let columnWidth = parseInt(json.width, 10);
if (isNaN(columnWidth)) {
this.width = json.width.toLowerCase() === 'stretch' ? 'stretch' : 'auto';
}
else if (typeof json.width === 'number') {
let columnWidth = parseInt(json.width, 10);
if (columnWidth < 0) {
columnWidth = 0;
}
this.width = columnWidth;
else {
this.width = columnWidth < 0 ? 0 : columnWidth;
}
}
if (json.backgroundImage) {