Trying to render a custom name above the chatBubble.
I am getting props.isSameUser not a function inside the renderBubble function. Which contradicts what others have been getting. I am not sure if its typed out properly but it shouldn't matter. Another issue is that when I render the text it gets rendered in the center and I cannot find any way to align it properly.
renderBubble = (props: Readonly<AvatarProps<IMessage>>) => {
return (
<View>
<Text>
{!props.isSameUser(props.currentMessage, props.previousMessage) &&
props.currentMessage.user.name}
</Text>
<Bubble
{...props}
/>
</View>
)
}
<GiftedChat
renderBubble={this.renderBubble}
/>
some examples where it works:
https://github.com/FaridSafi/react-native-gifted-chat/pull/448#issuecomment-451661928
Related
I have few instances of component (let's call it <Row />) with given template:
{{component #resultComponentName result=#result}}
I'm calling <Row /> component from <Terminal /> component like this:
{{#each #rows as |row|}}
<Row #result={{row.result}} #confirm={{fn this.confirm}} #resultComponentName={{this.resultComponentName}}/>
{{/each}}
<Terminal /> component has property:
#tracked resultComponentName;
which is handled in action confirm() in <Terminal /> component:
if (cmd.resultComponentName) {
this.resultComponentName = cmd.resultComponentName;
} else {
this.resultComponentName = 'result-component';
}
where cmd is some Ember Model with property:
#tracked resultComponentName = 'other-result';
now I want to change #resultComponentName in only one instance but when I am changing #resultComponentName all of the component <Row /> instances re-render.
How can I prevent that behavior and make every instance independent?
Thanks in advance!
Your problem is that #tracked resultComponentName; exists in your Terminal component, and so only once for the entire list.
Now I'm not sure how your #rows is related to cmd here, because thats the interesting question. If each row is a cmd you could just do this:
<Row #result={{row.result}} #confirm={{fn this.confirm}} #resultComponentName={{row.resultComponentName}}/>
If its different it totally depends how you want to map for which rows you want which resultComponentName and where you want to store that information. You maybe even want to move that login into the Row component itself.
I test a component contains a child component has Image. I define propTypes of Image in in child component is number. At main components I passed the image props by import. But test file run warning Invalid prop iconBack of type object supplied to HeaderVideoNavigation
This is code at HeaderVideoNavigation
const HeaderVideoNavigation = props => (
<Container>
<IconContent>
<TouchableWithoutFeedback onPress={props.onPressBackIcon}>
<IconButton isDisplay source={props.iconBack} />
</TouchableWithoutFeedback>
</IconContent>
{!!props.editText && <EditText>{props.editText}</EditText>}
</Container>
)
and at main Component
<Header>
<HeaderVideoNavigation
onPressBackIcon={closeModal}
iconBack={Images.iconBackWhite}
/>
</Header>
The warning basically says that iconBackWhite is an object rather than a number which is expected in IconButton component of its source prop.
<IconButton isDisplay source={props.iconBack} />
I got a split-app, left Hand side a master list with persons. right-hand side a Detail page with info and RatingIndicator element. Two lists on the detail-page which are bound via associations: /Master/Detail/Rating.
Whenever I use the Rating Indicator, it seems like the page is rerendering, which makes everything slow at the end. I tried both, two-way binding and one-way-binding with manually updating the model. It still rerenders/reloads the page every time I use the Rating indicator.
Any idea someone?
SAPUI5 library is on Version 1.28.31.
Edit: In the meantime I reduced complexity (no lists within lists, thought this might be the issue, but it isnt), and still the issue occurs. Even now when I use the Rating indicator the whole Detail page reloads/rerenders.
What can I do?
Before Clicking the Rating indicator:
Directly after cliking the Rating indicator, right-hand Detail page disappears and reappears withing seconds.
View:
<mvc:View controllerName="split.controller.Detail" xmlns="sap.m"
xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:footerbar="sap.ushell.ui.footerbar"
xmlns:f="sap.ui.layout.form" xmlns:l="sap.ui.layout">
<Page id="page" navButtonPress="onNavBack" showNavButton="{device>/system/phone}"
title="{i18n>detailTitle}" busy="{detailView>/busy}"
busyIndicatorDelay="{detailView>/delay}" class="sapUiResponsiveContentPadding">
<content>
<List items="{ path: 'WorklistToDocument' }">
<CustomListItem>
<VBox class="sapUiSmallMargin" }">
<Title titleStyle="H3" text="{Title}" }" />
<Text text="{Description}" }" />
</VBox>
<VBox class="sapUiSmallMargin">
<Text text="{Description}" />
<CheckBox selected="{NotApplicable}" select="onNACheckBoxSelect" />
<RatingIndicator value="{RatingValue}" maxValue="{MaxValue}" change="onRatingChanged" />
<Text
text="{ path: 'RatingValue', formatter: '.formatter.ratingText' }" />
</VBox>
</CustomListItem>
</List>
</content>
</Page>
Controller:
onRatingChanged: function(oEvent) {
var oSource = oEvent.getSource();
var oModel = this.getModel();
var sPath = oSource.getBindingContext().sPath;
var sCtxPath = sPath + "/RatingValue";
var sCtxPathNA = sPath + "/NotApplicable";
var iValue = oEvent.getParameter("value");
oModel.setProperty(sCtxPath, iValue);
oModel.setProperty(sCtxPathNA, false);
},
Is this line
var sCtxPath = sPath + "/RatingValue";
not leading to another "change" event trigger?
Additionally, is there a loop in your formatter that could cause a 'hang'?
And what about any events in your master with the same odata path?
I posted a simplified version of this question before, but I think I might have simplified it too much, so here is the actual problem.
I want to use regex (in Notepad++ or similar) to find "a_dog" in the following (sorry about the wall):
<object classid="clsid:D27CDB6E-AE6D-11cf" id="FlashID">
<param name="movie" value="../flash/words/a_dog.swf">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="6.0.65.0">
<!--[if !IE]>-->
<object data="../flash/words/a_dog.swf" type="application/x-shockwave-flash">
<!--<![endif]-->
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="6.0.65.0">
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
Then I want to use a back-reference to replace all instances of øø with a_dog in the following:
<input type="button" class="ButtonNormal" onClick="audio_func_øø()">
<script>
function audio_func_øø() {
var playAudio = document.getElementById("element_øø");
playAudio.play();
}
</script>
<audio id="element_øø">
<source src="../audio/words/øø.mp3" type='audio/mpeg'>
<source src="../audio/words/øø.wav" type='audio/wav'>
</audio>
So that only the second code is left (with a_dog instead of øø), and no trace of the first code remains.
I don't know how to do this in Notepad++, but you can do this in SublimeText using regex, snippets, and multiple selection:
First make a new snippet (guide) with the following in it:
<snippet>
<content><![CDATA[
<input type="button" class="ButtonNormal" onClick="audio_func_$1()">
<script>
function audio_func_$2() {
var playAudio = document.getElementById("element_$3");
playAudio.play();
}
</script>
<audio id="element_$4">
<source src="../audio/words/$5.mp3" type='audio/mpeg'>
<source src="../audio/words/$6.wav" type='audio/wav'>
</audio>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>audioSnippet</tabTrigger>
</snippet>
Save it as whatever you like in your User package. Follow the linked article if you have any questions on how/where to save it to get it working. I will discuss how this works later on.
Next use the following regex in Sublime Text by searching (with regex enabled) using the following pattern:
(?<=value="../flash/words/).+(?=\.swf)
And hit "Find All" - this will select all the names (e.g. 'a_dog', 'a_cat', 'a_plane') using multiple selection.
Copy the selected words (Ctrl+C or equivalent on your system)
In the menu, Selection->Expand to Paragraph (This will select where the <object> begins, to where </object> ends)
Hit Delete/Backspace to remove the <object>'s
Type in your snippet shortcut (above I've defined it to be "audioSnippet") and hit Tab
Paste in your copied text (Ctrl+V or equivalent on your system)
You will notice that you have only replaced the text in the snippet where the $1 appears. you will need to hit Tab to jump to $2, paste the text again (Ctrl+V), and repeat until you get to tab stop $6.
I've made a screen capture that you can look at here: http://youtu.be/oo2MQV3X244 (unlisted video on YouTube)
I'm having difficulty finding support on this topic, because I know how to pass parameters to a template. What I want to do is pass parameters to not be used as parameters to the template but to a component within the template.
For example, in primefaces, you can write the following logic to create a button:
<p:commandButton action="#{printBean.print}">
<f:attribute name="report" value="report.jrxml" />
</p:commandButton>
This is all fine and good when I don't need to pass parameters. However, I need to construct a template which allows me to specify parameters to pass to the report dynamically. My first attempt was to do the following:
<p:commandButton actionListener="#{printBean.print}">
<f:attribute name="report" value="report.jrxml" />
<ui:insert name="reportParams" />
</p:commandButton>
Which would allow me to use the template in the following manner:
<ui:decorate template="templates/report.xhtml" >
<ui:define name="reportParams>
<f:attribute name="reportParam1" value="paramVal1" />
<f:attribute name="reportParam2" value="paramVal2" />
<f:attribute name="reportParam3" value="paramVal3" />
...
</ui:define>
</ui:decorate>
However parameters passed in this way are not received in my action listener in printBean, yet parameter "report" is. I think the attributes passed in this way are interpreted to mean that it is referring to the ui:define tag, and not to be inserted in the template as I would want.
Is there an alternative way of achieving the same way? Keep in mind I'm using JSF 2.0 and primefaces, but not Seam or any added libraries and ideally I would not have to add any libraries to make it work.
I apologize if an answer to this question already exists, but it's maddening searching for an answer to this question.
EDIT: The number of parameters is variable, meaning I can't simply use ui:param and put the value of that parameter as an attribute value within the template, because there could be many such parameters.
Use a composite component instead of a template.
Create this file /resources/mycomponents/printReport.xhtml:
<ui:component
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:cc="http://java.sun.com/jsf/composite"
xmlns:p="http://primefaces.org/ui"
>
<cc:interface>
<!-- No attributes. -->
</cc:interface>
<cc:implementation>
...
<p:commandButton value="Print" action="#{printBean.print}" />
...
</cc:implementation>
</ui:component>
Use it as follows:
xmlns:my="http://java.sun.com/jsf/composite/mycomponents"
...
<my:printReport>
<f:attribute name="reportParam1" value="paramVal1" />
<f:attribute name="reportParam2" value="paramVal2" />
<f:attribute name="reportParam3" value="paramVal3" />
</my:printReport>
Rewrite the print method as follows:
public void print() {
UIComponent composite = UIComponent.getCurrentCompositeComponent(FacesContext.getCurrentInstance());
String reportParam1 = (String) composite.getAttributes().get("reportParam1");
String reportParam2 = (String) composite.getAttributes().get("reportParam2");
String reportParam3 = (String) composite.getAttributes().get("reportParam3");
// ...
}