From 433d81130e9b4ced5c77e6f0a51b0aa0e0920fde Mon Sep 17 00:00:00 2001 From: Ibrahim Sulaiman Date: Sun, 24 Nov 2019 22:47:31 +0530 Subject: [PATCH 1/3] Implemented the minheight property for the container --- .../src/components/containers/container.js | 23 +++++++++++++++---- .../reactnative/src/models/container-model.js | 7 +++--- .../payloads/Container.MinHeight.json | 19 +++++++++++++++ .../src/visualizer/payloads/payloads/index.js | 4 ++++ 4 files changed, 45 insertions(+), 8 deletions(-) create mode 100644 source/community/reactnative/src/visualizer/payloads/payloads/Container.MinHeight.json diff --git a/source/community/reactnative/src/components/containers/container.js b/source/community/reactnative/src/components/containers/container.js index 0c72e649a0..3a9155587f 100644 --- a/source/community/reactnative/src/components/containers/container.js +++ b/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,21 @@ export class Container extends React.Component { internalRenderer = () => { const payload = this.payload; + let containerStyle; + let minHeight = payload.minHeight; + if (minHeight) { + if (typeof (minHeight) == 'string') { + const lastIndex = minHeight.lastIndexOf('px'); + minHeight = lastIndex != -1 ? parseInt(minHeight.substring(0, lastIndex)) : minHeight + } + //If it is number, then directly we can assign minHeight + containerStyle = [styles.container, { minHeight }]; + } else { + containerStyle = [styles.container]; + } var containerContent = ( - + {this.parsePayload()} diff --git a/source/community/reactnative/src/models/container-model.js b/source/community/reactnative/src/models/container-model.js index 36acf5cc42..ca06e59d30 100644 --- a/source/community/reactnative/src/models/container-model.js +++ b/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; diff --git a/source/community/reactnative/src/visualizer/payloads/payloads/Container.MinHeight.json b/source/community/reactnative/src/visualizer/payloads/payloads/Container.MinHeight.json new file mode 100644 index 0000000000..1bb75a4e1a --- /dev/null +++ b/source/community/reactnative/src/visualizer/payloads/payloads/Container.MinHeight.json @@ -0,0 +1,19 @@ +{ + "$schema": "http://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" + } + ] + } + ] +} \ No newline at end of file diff --git a/source/community/reactnative/src/visualizer/payloads/payloads/index.js b/source/community/reactnative/src/visualizer/payloads/payloads/index.js index 43eb410b03..c6edeec74a 100644 --- a/source/community/reactnative/src/visualizer/payloads/payloads/index.js +++ b/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') From 63c818adbd6a0a3d6d70d61400fe93e7f6beb10e Mon Sep 17 00:00:00 2001 From: Ibrahim Sulaiman Date: Tue, 26 Nov 2019 02:43:44 +0530 Subject: [PATCH 2/3] Addde the method to convert string to number to handle the minheight value --- .../src/components/containers/container.js | 14 ++---------- .../community/reactnative/src/utils/util.js | 22 +++++++++++++++++++ 2 files changed, 24 insertions(+), 12 deletions(-) diff --git a/source/community/reactnative/src/components/containers/container.js b/source/community/reactnative/src/components/containers/container.js index 3a9155587f..70e4869790 100644 --- a/source/community/reactnative/src/components/containers/container.js +++ b/source/community/reactnative/src/components/containers/container.js @@ -52,18 +52,8 @@ export class Container extends React.Component { internalRenderer = () => { const payload = this.payload; - let containerStyle; - let minHeight = payload.minHeight; - if (minHeight) { - if (typeof (minHeight) == 'string') { - const lastIndex = minHeight.lastIndexOf('px'); - minHeight = lastIndex != -1 ? parseInt(minHeight.substring(0, lastIndex)) : minHeight - } - //If it is number, then directly we can assign minHeight - containerStyle = [styles.container, { minHeight }]; - } else { - containerStyle = [styles.container]; - } + const minHeight = Utils.convertStringToNumber(payload.minHeight); + const containerStyle = [styles.container, minHeight && { minHeight }]; var containerContent = ( diff --git a/source/community/reactnative/src/utils/util.js b/source/community/reactnative/src/utils/util.js index 5e983ea35e..c167f7bb25 100644 --- a/source/community/reactnative/src/utils/util.js +++ b/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 From 390b5f4c8ba7ae00b32616b11cf63e1c4bc38a2c Mon Sep 17 00:00:00 2001 From: Ibrahim Sulaiman Date: Wed, 27 Nov 2019 01:38:24 +0530 Subject: [PATCH 3/3] Resolved review comment - updated the conatiner style assignment --- .../reactnative/src/components/containers/container.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/community/reactnative/src/components/containers/container.js b/source/community/reactnative/src/components/containers/container.js index 70e4869790..f617a95bfb 100644 --- a/source/community/reactnative/src/components/containers/container.js +++ b/source/community/reactnative/src/components/containers/container.js @@ -53,7 +53,7 @@ export class Container extends React.Component { internalRenderer = () => { const payload = this.payload; const minHeight = Utils.convertStringToNumber(payload.minHeight); - const containerStyle = [styles.container, minHeight && { minHeight }]; + const containerStyle = typeof minHeight === "number" ? [styles.container, { minHeight }] : [styles.container]; var containerContent = (