I see how to set the styles of quick reply options in React Native Gifted Chat using quickReplyStyle, but no styles set there seem to have any effect on the color of the quick reply text itself.
How do I set the color of quick reply text in Gifted Chat?
The text color is a property on the QuickReplies component [source], so you'll need to change it in the renderQuickReplies property like so:
<GiftedChat
...
renderQuickReplies={(props) => <QuickReplies color='red' {...props} />}
...
/>
Note: the text will always be white when the quick reply is selected.
You may need to add the import for QuickReplies like so:
import QuickReplies from 'react-native-gifted-chat/lib/QuickReplies';
Helpful, related issue here.
Related
My RN 0.61.5 app is running the react-native-gifted-chat 0.13.0. Here is the render which is pretty plain:
render() {
console.log("In GiftedChat render : ");
return (
<GiftedChat
messages={this.state.messages}
onSend={messages => this._onSend(messages)}
user={{_id: this.state.myself.id,
name: this.state.myself.name,
avatar: this.state.myself.user_data.avatar}}
/>
);
}
I would like to add a file upload button (which can open gallery or file manager) by the typing text box allowing user to upload an image or video file. How can I do that? I have searched online and gone over the doc but did not find a way/hook to add a button to the chat screen. Many thank.
There is a prop called renderActions() in gifted chat docs. It adds a custom action button on the left of the message composer. I have implemented image uploading button by using this.
<GiftedChat
messages={this.state.messages}
onSend={this.send}
...
renderActions={() => (
<React.Fragment>
<ImgPicker setmsgImgUrl={this.setmsgImgUrl} />
</React.Fragment>
)}
/>
I have created the ImgPicker component by using codes in the expo docs image picker.
If you want to see the ImgPicker component code, here is the link.
Github link for the ImgPicker Component Code
Is it possible to disable the text input including the send button completely for the react-native-gifted-chat component?
This is my current component:
<GiftedChat text={emergencyText} onInputTextChanged={this.setEmergencyText} />
I could override the render methods, but how do I then render the original input?
Since React-native-gifted-chat does not have the disable props for it provides one more component, that is InputToolbar, if we render null value to we can almost disable the sending feature. just try the below code.
<InputToolbar
render={null}
text={emergencyText}
onInputTextChanged={this.setEmergencyText}
/>
It serves your purpose.
You can use the disableComposer prop.
<GiftedChat disableComposer={true} text={emergencyText} onInputTextChanged={this.setEmergencyText} />
I need to do a webpage to finish my uni, and im about 90% done with it, however, im struggling with getting custom Iterators and Charts to work.
Im trying to use Recharts, but i have no idea on how to make it gather the info i want (I need it to get the number of users registered and the number of vaccines they took), but all i see on the documentation is ready results, im not sure if ChartJS will make it any better, and even if it does, im confused on how custom iterators work since i took my "Analytics" one from another StackOverflow question, however that's the least of my worries, since this seems to be simplier than getting the ACTUAL charts to work.
Help would be appreciated since i have 2 weeks to deliver it and im stuck on that, and its CRUCIAL i get that to work.
Oh yes, im also very bad at Javascript so every info is welcome.
EDIT:Forgot to say i've looked around but lots of them are for simplier and static stuff instead of database counts or stuff like that.
Welcome to SO.
1) Recharts wants an array that it needs to iterate over and display. So what I usually do is make the Chart Component a child of a List component.
2) I use the Filter on the List page to select different chart components when the user selects different options from the dropdown (in case your analytics page needs to show different charts from the same page)
^^this is a bit tricky for peeps new to JS but is quite straightforward if you want to get into it.
3) For you i think the best bet will be that you make different List components and resources for each page and just display different charts on their own page.
export const AnalyticsList = (props) => {
return (
<List title="Analytics" {...props} perPage={20} sort={{ field: 'id', order: 'ASC' }}>
<Analytics />
</List>
)
}
here is how the Analytics Component is
import React from 'react';
import {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend} from 'recharts';
export const Analytics = (props) => {
return (
<BarChart width={800} height={400} data={Object.values(props.data)} margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<XAxis dataKey="name"/>
<YAxis dataKey="charLimit" />
<CartesianGrid strokeDasharray="3 3"/>
<Tooltip/>
<Legend />
<Bar dataKey="charLimit" fill="#82ca9d" />
</BarChart>
);
}
Hope this helps.
Im writing a python script which reads from a file and plots graphs in seperate html files with plotly.I would like to have a button to redirect from one page to another(load from disc).I've come across this :
updatemenus = list([
dict(type="buttons",
buttons=list([dict(label = 'Next',method = 'update', args = ['shapes', []])])
)])
layout=go.Layout(title="Iteration_Number:"+str(counter_iter),updatemenus=updatemenus)
But this is used for updating data or changing layout. What i want is open another html page from disc on button click. Is that possible ?
I have also seen this :
import webbrowser
url = "file:///home/tinyOS/Simulation_"+str(counter_iter+1)+".html"
webbrowser.open(url)
Which helps me open a new page but again i want it to happen when clicking on the button.Any ideas? Thanks a lot !
From the question I understand that you want a group of buttons on the plotly graph, that are going to open a plotly graph in new tab.
So you need not use plotly buttons for this requirements.because they are mainly used for restyle, relayout, etc., so there is no relation between these buttons and opening links in new tabs.
I would recommend having simple html buttons which on click are going to take you to the new tab.
A simple way to do it will be, wrap the plot in a div set to relative positioning and make the div wrapping the button absolute positioned and position it anywhere over the graph, please refer the below example and let me know if this solves your issue!
Solution:
import plotly.plotly as py
import plotly.graph_objs as go
import plotly.offline as py_offline
from IPython.core.display import display, HTML
py_offline.init_notebook_mode()
display(HTML("""
<style>
.wrapper{
position:relative;
}
.button-group{
position:absolute;
top:40px;
left:90%;
z-index: 30000;
}
.button-group a{
display:block;
}
</style>
"""))
What is happening in the above piece of code is, first we include the necessary packages, then styles needed!
data = [go.Bar(
x=['giraffes', 'orangutans', 'monkeys'],
y=[20, 14, 23]
)]
display(HTML("""
<div class="wrapper">
<div class="button-group">
Google It
Yahoo It
</div>"""
+str(py_offline.plot(data, filename='plot_name' ,output_type="div", include_plotlyjs=False))
+ '</div>'))
The main piece of code, with which we embed the buttons is shown above, first we define the plotly plot , then using display and html functions, we can embed the buttons inside a div with class button-group and with CSS we position that button.
Please do try the above code and let me know if there are any doubts regarding the working!
I have a component that includes a single Rich Text field. In the sublayout, the field is rendered as an Html.Editable with Glass so that it can be edited on the page in PageEditor. It looks like this:
public override void Initialize()
{
litBodyContent.Text = Html.Editable(GlassItem, item => item.Body);
}
<div style="min-height: 38px">
<asp:Literal runat="server" ID="litBodyContent" />
</div>
However, when I insert links using the Rich Text editor, when the page is rendered (in normal view after being published, not in page editor), the links are rendered with the item ID rather than the user friendly path, like this:
Go to another page
I am pretty sure that this is an issue with Glass. How can I keep the field editable in the Page Editor but make it render the link correctly?
You can check if you have proper attribute in the model.
If you have SitecoreFieldSettings.RichTextRaw attribute, it will NOT pass through render pipeline and returns the RAW HTML. Instead if you use Default (SitecoreFieldSettings.Default), rich text content will go through render pipeline and url will be in friendly format.
http://docs.glass.lu/html/d44739b2-5f0e-d862-f62c-86c50f0b262f.htm
Can you try to change it from using literal to use Editable() method directly, Something like:
<%= Editable(GlassItem, x => x.Body) %>
I think Initialize() is too soon in the page life cycle. Try moving it further along, like to Page_Load() or so.