Implemented the minheight property for the container (#3641)

* Implemented the minheight property for the container

* Addde the method to convert string to number to handle the minheight value

* Resolved review comment - updated the conatiner style assignment

source/community/reactnative/src/components/containers/container.js

@@ -13,6 +13,7 @@ import ElementWrapper from '../elements/element-wrapper';
 import { Registry } from '../registration/registry';
 import { SelectAction } from '../actions';
 import * as Constants from '../../utils/constants';
+import * as Utils from '../../utils/util';
 import { HostConfigManager } from '../../utils/host-config';
 import { InputContext } from '../../utils/context';
 import { ContainerWrapper } from './';
@@ -37,11 +38,11 @@ export class Container extends React.Component {
  return children;
  }
 
- if (this.payload.isFallbackActivated){
- if(this.payload.fallbackType == "drop"){
+ if (this.payload.isFallbackActivated) {
+ if (this.payload.fallbackType == "drop") {
  return null;
- }else if(!Utils.isNullOrEmpty(element.fallback)){
- return Registry.getManager().parseComponent(this.payload.fallback,this.context.onParseError);
+ } else if (!Utils.isNullOrEmpty(element.fallback)) {
+ return Registry.getManager().parseComponent(this.payload.fallback, this.context.onParseError);
  }
  }
 
@@ -51,9 +52,11 @@ export class Container extends React.Component {
 
  internalRenderer = () => {
  const payload = this.payload;
+ const minHeight = Utils.convertStringToNumber(payload.minHeight);
+ const containerStyle = typeof minHeight === "number" ? [styles.container, { minHeight }] : [styles.container];
 
  var containerContent = (
- <ContainerWrapper json={this.payload} style={[styles.container]} containerStyle={this.props.containerStyle}>
+ <ContainerWrapper json={this.payload} style={containerStyle} containerStyle={this.props.containerStyle}>
  <ElementWrapper json={this.payload} style={[styles.defaultBGStyle, { flexGrow: 0 }]} isFirst={this.props.isFirst}>
  {this.parsePayload()}
  </ElementWrapper>

source/community/reactnative/src/models/container-model.js

@@ -1,7 +1,7 @@
 import { BaseModel } from './base-model'
 import { ModelFactory } from './model-factory';
 import { ElementType } from '../utils/enums'
-import {ImageModel} from './element-model'
+import { ImageModel } from './element-model'
 
 class BaseContainerModel extends BaseModel {
  constructor(payload, parent) {
@@ -37,9 +37,10 @@ export class ContainerModel extends BaseContainerModel {
  this.children = [];
  this.children.push(...ModelFactory.createGroup(payload.items, this));
  this.height = payload.height;
+ this.minHeight = payload.minHeight;
  }
 
- get items(){
+ get items() {
  return this.children;
  }
 }
@@ -136,7 +137,7 @@ export class ImageSetModel extends BaseContainerModel {
  }
 }
 
-export class ActionSetModel extends BaseContainerModel{
+export class ActionSetModel extends BaseContainerModel {
  constructor(payload, parent) {
  super(payload, parent);
  this.type = ElementType.ActionSet;

source/community/reactnative/src/utils/util.js

@@ -21,6 +21,28 @@ export function isaNumber(value) {
  return false;
 }
 
+/**
+ * @description
+ * This function will return the Number for the specified pixel string / number
+ * it will return null, if it is not an number.
+ * for example..convertStringToNumber('100') // 100
+ convertStringToNumber('100px') // 100
+ convertStringToNumber('100a5') // 100
+ convertStringToNumber(100) // 100
+ convertStringToNumber('ABC') // null
+ convertStringToNumber(null) // null
+ convertStringToNumber('ABC100') // null 
+ * @param {string/number} value 
+ */
+export function convertStringToNumber(value) {
+ let intValue = parseInt(value);
+ if (isNaN(intValue)) {
+ return null;
+ } else {
+ return intValue;
+ }
+}
+
 /**
  * @description
  * This function will return the Enum value for the specified Key if its present or

source/community/reactnative/src/visualizer/payloads/payloads/Container.MinHeight.json

@@ -0,0 +1,19 @@
+{
+ "$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
+ "type": "AdaptiveCard",
+ "version": "1.2",
+ "body": [
+ {
+ "type": "Container",
+ "minHeight": "100px",
+ "style": "emphasis",
+ "items": [
+ {
+ "type": "TextBlock",
+ "wrap": true,
+ "text": "This textblock is inside a container with a min height of 100px"
+ }
+ ]
+ }
+ ]
+}

source/community/reactnative/src/visualizer/payloads/payloads/index.js

@@ -67,6 +67,10 @@ export default payloads = [
  "title": "Bleed.json",
  "json": require('./Bleed.json')
  },
+ {
+ "title": "Container.MinHeight.json",
+ "json": require('./Container.MinHeight.json')
+ },
  {
  "title": "Container.BackgroundImageRepeatHorizontally.json",
  "json": require('./Container.BackgroundImageRepeatHorizontally.json')