microsoft / react-native-adaptivecards Goto Github PK

View Code? Open in Web Editor NEW

80.0 10.0 21.0 10.01 MB

React Native renderer for AdaptiveCards

Home Page: https://microsoft.github.io/react-native-adaptivecards/

JavaScript 47.10% TypeScript 52.09% HTML 0.05% CSS 0.76%

react-native adaptive-cards

react-native-adaptivecards's Introduction

DEPRECATION NOTICE

This package is no longer in development.

Please migrate to adaptivecards-reactnative

============================================

Introduction

React Native renderer for AdaptiveCards.

Online renderer and debugging tool can be found here

Getting Started

Basic Usage

Installation

$ npm install react-native-adaptivecards

or by Yarn

$ yarn add react-native-adaptivecards

Implementation

Import to the component where you want to show an AdaptiveCards

import AdaptiveCard from 'react-native-adaptivecards';

Send initial props

    <AdaptiveCard adaptiveCard={} overrideStyle={} />

Properties

Prop	Required	Type	Description
adaptiveCard	Yes	object	Json object based on AdaptiveCards schema
style	No	object	Customized styles
config	No, default{...}	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

$ cd examples
$ yarn
$ yarn ios

react-native-adaptivecards's People

Contributors

Stargazers

Watchers

react-native-adaptivecards's Issues

Out of sync with NPM published version

The repository's master branch has code that's ahead of what is currently published on NPM. Anyway we can get this to either be reverted, or have the version on NPM be updated to be in sync?

textInput cannot focus under accessibility mode

"style" prop to AdaptiveCards root component should apply to corresponding card only, but now apply to all cards

Custom Config for styles

I see no proper documentation provided on how to use this custom config for themes and styles of buttons, etc.

Please help me in understanding how to specify and use a custom config

"placeholder" property doesn't show in the input.date and input.time

There will still have interaction when you click button the second time

TextBlock failed to handle wrap and chunk.

Describe the bug
TextBlock failed to handle wrap and chunk.

Expected behavior
If the wrap properties is set to true, TextBlock should wrap the code at any time, otherwise, it should chunk the text and end with ...

FactSet is not aligned and no wraps in it.

We suppose FactSet should be aligned in a flavor as table and to align with other platforms, wrap needs to be support.

Styles should be case insensitive

sampleAdaptiveCard.txt

Please refer to attached text file which contains JSON I am trying out.
this is not working..complete block is not showing up
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "Tell us about yourself"
},

same if I change it to -
{
"type": "TextBlock",
"size": "medium",
"weight": "bolder",
"text": "Tell us about yourself"
},

shows up the text as expected.

The same issue exists with other params as well.
For e.g -"email", "tel", "small", "default".

It should work irrespective of text case. I verified the same JSON with upper case text in https://adaptivecards.io/designer website and everything works perfectly and in react-native it misses out if we use upper case text.

Adaptive Cards support a subset of Markdown syntax

support "bold" "italic" "Bullet list" "Numbered list" "Hyperlinks" text style.

not case sensitive

ignore case when it is a string type

date/time placeholder doesn't show

Adaptive Card Version Support

Hi there,

I can't seem to find any documentation on which version of Adaptive Cards this library is supporting. I see there are a lot of new 1.2 features listed at https://adaptivecards.io/explorer/ but obviously not all of these are currently supported by this library. Any guidance where to look for this information?

Support more than two actions

Currently, the render only support to show two actions on Card. As a card author, higher capacity is preferred.

Support fontFamily for textBlock

textBlock currently has no fontFamily causing the text to be truncated in some cases.

please add the fontFamily prop to the textBlock component
https://github.com/microsoft/react-native-adaptivecards/blob/release_0.1.x/src/Views/CardElements/TextBlock.tsx#L25
fontFamily: StyleManager.fontFamily,

Style "emphasis" is not supported

adaptivecard.txt

if column or columnset has style set to "emphasis" view looks cluttered when compared to web
https://adaptivecards.io/designer/

convert time to 12 hour format

Support local File with "file" URI scheme

Is your feature request related to a problem? Please describe.
Adaptive Cards can't show local images with "file" URI scheme

Describe the solution you'd like
Whitelist "file" URI scheme

Describe alternatives you've considered

Additional context

Image not supporting height and width

adaptivecard.txt

Refer to above data.
Image loads fine in web (https://adaptivecards.io/designer/) but fails to pick size exact height and width and saw inside the code base that image is not accepting height and width.

It should support height and width which will taken priority over size.

Placeholder not showing up in input.choice

sampleJSON.txt
Please refer to the attached text file for JSON response I am trying out.
"type": "Input.ChoiceSet",
"id": "ptoInput",
"placeholder": "Select Type ...",
"style": "compact",

Placeholder is not working if I use in Input.ChoiceSet. Same works in web when i try the same JSON here -
https://adaptivecards.io/designer

Is this only support adaptive cards? how about Video,Hero,Thumbnail cards?

Hello,

the adaptive card is working fine on my chatting apps, but not for Video,Hero,Thumbnail cards.
may i know if they is others plugin for that?

from the example, it all about adaptive card only.

Validate and improve documents

Submit button click not call onSubmit method after changing form input

scenario 1:
If I change any Date or Time, then click Submit button. It does not calling obSubmit method.

scenario 2:
But If I doe not change any Date or Time, and directly click Submit button. It call obSubmit method for first time. Second time click submit not call obSubmit method.