I am using latest version of Microsoft ChatBot, when i send or receive messages,
the display does not scroll down to the latest one
the entry bar is starting at the top of the window(not from the bottom of the window, attached image) not sure if this is the intended behaviour.
react component
class Layout extends Component {
render() {
return(
<Aux>
<main className="Container">
<ReactWebChat
botAvatarInitials= 'BOT'
userAvatarInitials= 'USER'
directLine={secret}
styleSet={styleSet}
/>
</main>
</Aux>
)
}}
You need to wrap your ReactWebChat component in a div and set the height and width of the div and its children in the css to get the conversation to scroll to the bottom and have the entry bar start at the bottom. See below for how your code should look.
React Webchat Component
class Layout extends Component {
render() {
return(
<Aux>
<main className="Container">
<div id="webchat">
<ReactWebChat
botAvatarInitials= 'BOT'
userAvatarInitials= 'USER'
directLine={secret}
styleSet={styleSet}
/>
</div>
</main>
</Aux>
)
}}
CSS
#webchat,
#webchat>* {
height: 750px;
width: 400px;
}
Screenshot
Hope this helps!
Related
I have been developing a multi-level dropdown menu component for the intranet I am building. Deciding to go with React on this I thought that I multi-level menu would be simple. Apparently not :)
What I have developed so far works quite well with one exception: When clicking on a NavLink the open menu items do not collapse.
All the CSS classes I have added are appearance only with no positioning statements. I have built this using a JSON source file and Reactstrap.
Here is the code for my component.
class MenuBar extends Component {
constructor(props) {
this.NavListItem = this.NavListItem.bind(this);
}
NavListItem = (item, level) => {
if (item.children.length > 0) {
return (
<UncontrolledDropdown direction={level!==0?"right":"down"} nav inNavbar className="menu menu-UncontrolledDropdown" key={"UCD_" + item.pageId}>
<DropdownToggle nav caret
className="menu menu-dropdown-toggle item title"
key={"DDToggle_" + item.pageId}
id={"DDToggle_" + item.pageId}
>
{item.title}
</DropdownToggle>
<DropdownMenu className="menu menu-dropdown-container">
<Nav>
{item.children.map((listItem) => this.NavListItem(listItem, level + 1))}
</Nav>
</DropdownMenu>
</UncontrolledDropdown>
)
}
else {
return (
<NavItem className="menu menu-item-container" key={"DDNavItem_" + item.pageId}>
<NavLink onClick={() => { this.props.updateCurrentPage(item) }} className="menu menu-link" key={"DDNavLink_" + item.pageId}>{item.title}</NavLink>
</NavItem>
)
}
}
render() {
const setIsOpen = (value) => {
this.setState({ isOpen: value })
}
const toggle = () => setIsOpen(!this.state.isOpen);
return (
<div className="row">
<div className="col-2 p-3 menu">
<div onClick={() => this.props.updateCurrentPage(null)}
className="align-top met-logo">
</div>
</div>
<div className="col col-md-6 offset-1 menu ">
<Navbar color="light" light expand="md" className="menu menu-bar">
<NavbarToggler onClick={toggle} className="menu menu-toggler" />
<Nav className="mr-auto" navbar>
{this.props.siteMap.siteMapData.map((link) => this.NavListItem(link, 0))}
</Nav>
</Navbar>
</div>
</div>
);
}
}
The only problem I have now is the open items do not close when an option is clicked. I would like preferably to make this stateless and put it in as a functional component ultimately but for now I am pulling Sitemap from Redux.
Thanks.
I could not find a solution but did come up with a functional workaround that takes very little resource.
In my MainComponent of the SPA I am hosting both the component as well as the current page component. What I did, when I realized that clicking off of the menu closed it, was to add a little snippet into the componentDidUpdate() function:
componentDidUpdate(){
//work around for menu not closing.
document.getElementById("rootDiv").click();
}
This effectively causes the menu to close once the new page has begun loading. Problem solved.
I am newbie to react js.
After couple of hours finally I have some login box code rendering.
But the issue is I am unable to bind click event on button.
What i am using.
Laravel 5.6
react js (16.3.1)
What i have tried until now is
https://www.tutorialspoint.com/reactjs/reactjs_events.htm
https://reactjs.org/docs/handling-events.html
This is my final code
import React, {Component} from 'react';
import {Page, Card, Button,List,TextField} from '#shopify/polaris';
export default class Login extends React.Component {
constructor() {
super();
this.loginBtbClicked = this.loginBtbClicked.bind(this);
}
loginBtbClicked() {
debugger;
console.log('Hello');
}
render() {
debugger;
/* Some css code has been removed for brevity */
var divStyle = {
width: '500px'
};
return (
<div className="mt-5 mx-auto" style={ divStyle }>
<Card title="Login" subdued sectioned>
<div>
<TextField label="Store Url" type="text" helpText='ex. store.myshopify.com'></TextField>
</div>
<div className="mt-5">
<Button size="large" fullWidth primary onClick = {this.loginBtbClicked} >Login</Button>
</div>
</Card>
</div>
);
}
}
Also help me with best practice in react js for form submit and click event.
Here is the link for github project
https://github.com/little-isaac/shopify-polaris-laravel-test.git
I have changed webpack.mix.js file's path
From
mix.react('resources/assets/js/app.js', 'public/app.js')
to
mix.react('resources/assets/js/app.js', 'js/app.js')
And forget to change public path
mix.setPublicPath('');
I am currently learning and practicing React.
I am trying to achieve a react web app that allows you to display and scroll through Nasa's picture of the day based on what date you choose. here's the api: api.nasa.gov/
the project is simple BUT. sometimes the url that the api returns, leads to an img and sometimes a youtube video. for example:
https://apod.nasa.gov/apod/image/1708/PerseidsTurkey_Tezel_960.jpg
or
https://www.youtube.com/embed/Zy9jIikX62o?rel=0
I have managed to display both cases using an iframe. I know this is not ideal for the imgs because I cannot format it properly with css and it just looks bad with the scroll bars, sizing etc..but won't display the video..
this is what the react component looks like (using bootstrap)
detail.js
import React, { Component } from 'react';
export default class Detail extends Component {
render() {
return (
<div className="video-detail col-md-12">
<div className="embed-responsive embed-responsive-16by9">
<iframe className="embed-responsive-item" src={this.props.url}>
</iframe>
</div>
</div>
);
}
}
I would like to images also to display responsively, centered and original aspect ratio but also still have the videos display properly as they are.
I have tried putting an additional <img> underneath the <iframe> but that just renders the image twice. Is there a way to render an <img> or <iframe> conditionally?
I am wondering what strategy should I try next? Any ideas?
Thanks!
you should use conditional rendering
const isImage = this.props.url.split().pop() === 'jpg';
return (
{
isImage ? <img src={this.props.url} />
: <iframe className="embed-responsive-item" src={this.props.url}>
</iframe>
}
)
or
const isImage = this.props.url.split().pop() === 'jpg';
return (
{
isImage && <img src={this.props.url} />
}
{
!isImage && <iframe className="embed-responsive-item" src={this.props.url}>
</iframe>
}
)
Yon don't even have to use a split().pop(). Just scan the API return for a media type (much simpler, really):
const Photo = props => (
<div>
<h3 className="m-5 text-center">{props.photo.title}</h3>
{props.photo.media_type === "image" ? (
<img className="rounded mx-auto d-block" src={props.photo.url} alt={props.photo.title} />
) : (
<iframe
title="space-video"
src={props.photo.url}
frameBorder="0"
gesture="media"
allow="encrypted-media"
allowFullScreen
className="mx-auto d-block"
/>
)}
<p className="col-md-8 offset-md-2 mt-5 pb-5">{props.photo.explanation}</p>
</div>
In plain Bootstrap 3 I would do something like
<div class="panel">
<div class="panel-body bg-info">
Contents
</div>
</div>
But in React Bootstrap we don't have a separate panel body. Is there a way to set the background color?
You have to set a custom style for the panel :
render() {
return (
var color = {
backgroundColor: red,
}
<Panel header={header} eventKey={i} style={color}>
</Panel>
);
}
:D
I am currently having much trouble with a jQuery animation. Basically, a button click will quickly start a short animation and collapse a sidebar, widening the main content box to full width (and back again if wanted). The issue is that with quick consecutive clicks, the layout goes all crazy. I have tried this condition:
if (!$(this).is(":animated"))
{
// Code
}
But it doesn't work. So I have tried .off(), and it shuts off, but I cannot find out how to turn it back .on(). Can someone help me please? Here is what I have:
<script type="text/javascript">
$(document).ready(function(){
var $button = $("a#toggle");
var $content = $("div#index_main-content");
var $sidebar = $("div#sidebar");
// Disable quicky clicky
$button.click(function() {
$button.off().delay(1000).on();
});
// Hide sidebar
$button.toggle(function sidebarToggle() {
$sidebar.fadeOut(500, function() {
$content.animate({width: '100%'}, 500, function() {
$button.attr("title", "Click to show the sidebar!").addClass("hiding").removeClass("showing");
});
});
},
// Show sidebar
function sidebarToggle() {
$content.animate({width: '69.5%'}, 500, function() {
$sidebar.fadeIn(500, function() {
$button.attr("title", "Click to hide the sidebar!").addClass("showing").removeClass("hiding");
});
});
});
});
</script>
<div id="index_content">
<a title="Click to hide the sidebar" class="showing" id="toggle"></a>
<div id="sidebar">
<!-- Sidebar: float-right/width-28.5% -->
</div>
<div id="index_main-content">
<!-- Content: float-left/width-69.5% -->
</div>
</div>
Also, there is a live demo here. Like I said before, for some reason, the .on() does not happen. :(
Thank you. :)
$content.stop(true,true).animate({ //code });
Try using stop before issuing the animation the second time, for example:
$content.stop().animate(
This will stop and previous animations before starting the new one.
Also use true in the stop statement to cancel other animation and complete the animations.
$content.stop(true,true).animate(
See:
http://api.jquery.com/stop/
stop() to stop the current animation,
clear the animation queue and go to the end of the animation .stop(true,true)
or
turn the button to OFF before you start the animation
turn the button to ON within the animation callback function, so that
is turned on again after the animation finished
OR more easy
<div id="index_content">
<a title="Click to hide the sidebar" class="showing" id="toggle">Click me</a>
<div id="sidebar">sidebar
<!-- Sidebar: float-right/width-28.5% -->
</div>
<div id="index_main-content">content
<!-- Content: float-left/width-69.5% -->
</div>
</div>
$(document).ready(function(){
$('#toggle').click(function(){
$('#sidebar:visible').fadeOut('slow')
$('#sidebar:hidden').fadeIn('slow')
})
})
take a look#
http://jsfiddle.net/jdFrR/