We Keep Coding

How to draw separater in giftedchat?

I would like to draw separator such like "---- alredy read ----" with
giftedchat (https://github.com/FaridSafi/react-native-gifted-chat).
I think it is basic function for chat program, and can do with giftedchat.
I googled a lot, but can't find the way.
Would you teach me how to? I wolud like to draw like below.
|----------|
| Hello |
|----------|
--------- alredy read --------
|----------|
| Hi |
|----------|

I think you may use System Message to achieve this. The example is already shows in the React-Native-Gifted-Chat.
e.g. System Message
{
_id: 1,
text: 'This is a system message',
createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
system: true,
// Any additional custom parameters are passed through
}
Then you may use the props renderSystemMessage to style your message.
const renderSystemMessage = (props) => {
return <Text>-----{props.currentMessage.text}-----</Text>;
};

Conditional typing for redux reducer

I am trying to create a re-usable component that renders a 'select' form item and its associated options. It accepts redux prop that is an action creator that is responsible for passing the selected option into the redux store to be used throughout the application.
I have two action creators that are possible options:
The first is :
setCompany: (state, action: PayloadAction<string>) => {
state.selectedCompany = action.payload;
},
The second is:
setStatus: (state, action: PayloadAction<SelectStatus['status']>) => {
state.status = action.payload;
},
The JobState['status'] type is: status: 'success' | 'error' | 'default' | 'processing' | 'warning';
In the Select component, I attempt to do the following:
interface SelectsProps {
fetchOptionData?: () => void;
optionsArray?: [];
placeholder: string;
showSearch: boolean;
badges: boolean;
redux?: ActionCreatorWithPayload<string | SelectStatus['status']>;
// I also tried ActionCreatorWithPayload<string> | //ActionCreatorWithPayload<SelectStatus['status']> but neither is working
}
In my parent component, i try to pass in a redux action of setStatus, defined above. However, I receive an error of :
`Type 'ActionCreatorWithPayload<"success" | "error" | "default" | "processing" | "warning", string>' is not assignable to type 'ActionCreatorWithPayload<string, string>'.`
<Selects
redux={setStatus}
placeholder='Default'
showSearch={false}
badges={true}
optionsArray={badges}
/>
};
If I do it as a union, it seems to default to string and not accept a status to be passed if valid. Is there a way I can allow the correct payload type to be selected?
Thank you

Solution
You need a union of the two action creator types rather than an action creator of the union.
redux?: ActionCreatorWithPayload<string> | ActionCreatorWithPayload<SelectStatus["status"]>;
Explanation
ActionCreatorWithPayload<string | SelectStatus['status']> means an action creator that can be called with an argument of either string OR SelectStatus['status']. setCompany is ok because SelectStatus['status'] is a subset of string. But setStatus is an error because it can only accept SelectStatus['status']. It cannot accept the union.
You need the union of the two action creators which is ActionCreatorWithPayload<string> | ActionCreatorWithPayload<SelectStatus["status"]>. This means that you can have a function that accepts string or a function that accepts SelectStatus['status']. It no longer needs to accept the union of the two.
You may have problems when you call this union since you don't know which argument type it accepts.
Note: I don't know why you use SelectStatus["status"] is one place and JobState["status"] in the other. I am assuming that they are the same. I would extract that type to a named type:
export type JobStatus = JobState["status"]

MS Teams adaptive card "herocard" not work on mobile

I`m creating bot for MS Teams and using JS Microsoft Bot Framework V4 SDK.
In my work, I use search message extension and to work with it, I implemented the onSelectItem method that returns a adaptive card. I will give an example of the code below.
return Promise.resolve({
type: "result",
attachmentLayout: "list",
attachments: [CardFactory.heroCard(
`${file.name}`,
`${text}`,
undefined,
CardFactory.actions([
{
type: "openUrl",
title: "Open",
value: `${openLink}`
},
{
type: "openUrl",
title: "Download",
value: `${downloadLink}`
},
]),
)]
});
Where I pass undefined, this should be the path to the picture, but in my implementation I don't need it. So and this code works great in the browser and on the desktop version here is a screenshot
however, on the mobile version, I get the following result
this is absolutely not the right card, it has no content or buttons

I think I found the answer myself. When the message extension search is triggered, the onQuery method is called and suppose you made a query and received an array of values ​​that you want to display. And here, in the same method, iterating over the array, you must draw two cards at once. For example
files.forEach((file: IDocumentInfo): void => {
const card: any = CardFactory.heroCard(
cutString(file.name, LIMIT),
text,
undefined,
[
{
type: "openUrl",
title: "Open",
value: "", // some value
},
{
type: "openUrl",
title: "Download",
value: "" //some value,
},
]
);
const preview: any = {
contentType: "application/vnd.microsoft.card.thumbnail",
content: {
title: `${cutString(file.name, LIMIT)}`,
text: "", // some text
}
};
And here the variable preview in my case will respond to a small view of information after the search and the variable card will be responsible for the view after selection. And after the card is selected, the onSelectItem method is triggered, which I need to get more information about the document
It turns out that the adaptive heroCard is not to blame here, the onSelectItem method is not called in the mobile application, or I am doing something wrong

How to implement ngx-select-dropdown with typescript objects array not with single type of elements such strings

I wanted to implement mat select box or just html select box with live search functionality and found mat-select-search project implemented in https://stackblitz.com/github/bithost-gmbh/ngx-mat-select-search-example?file=src%2Fapp%2Fapp.component.html.
It is working perfectly fine but it requires a lot of configuration and in my project I have more than 5 mat-selects with pretty large data set, then found "ngx-select-dropdown" it has minimum configuration but I couldn't configure it for typscript objects, it is working with single type string array.
Here is code
export class AppComponent {
public items: string[] = ['Amsterdam', 'Antwerp', 'Athens','Barcelona',
'Berlin', 'Birmingham', 'Bradford', 'Bremen', 'Brussels', 'Bucharest',
'Zagreb', 'Zaragoza', 'Łódź'];
public ngxControl = new FormControl();
public inputTyped = (source: string, text: string) =>
console.log('SingleDemoComponent.inputTyped', source, text);}
html
<ngx-select [formControl]="ngxControl"
[allowClear]="true"
[defaultValue]="doNgxDefault()"
[items]="items"
placeholder="No city selected"
(typed)="inputTyped('ngx-select', $event)"
</ngx-select>
However I wanted to implement it with this type of items
interface Bank {
bank_id: number;
name: string;
code: string;
ord: number;}
private items: Bank[] = [
{bank_id: 1, name: 'Bank A (Switzerland)', code: 'ARM', ord:10},
{bank_id: 2, name: 'Bank B (Switzerland)', code: 'ARM', ord:11},
{bank_id: 3, name: 'Bank C (Switzerland)', code: 'HIO', ord:12},
{bank_id: 4, name: 'Bank D (Switzerland)', code: 'ARM', ord:13},
{bank_id: 5, name: 'Bank E (Switzerland)', code: 'ARM', ord:14},];
Is it possible use typscript objects with ngx-select for items, because I need to populate the names of each object and get the id's as value property to integrate with database. I am sure that it is possible extracting the names with loop and searching matching options with names but it is not best practice I think.
Updated Answer
Since items:[] gets array of objects property names of items should be exactly as documentation of ngx-select
interface Bank {
id: string;
text: string;
}

Yes its possible. you need see API document https://optimistex.github.io/ngx-select-ex/
optionValueField string 'id' Provide an opportunity to change the name an id property of objects in the items
optionTextField string 'text' Provide an opportunity to change the name a text property of objects in the items
<ngx-select [formControl]="ngxControl"
[allowClear]="true"
[defaultValue]="doNgxDefault()"
[items]="items"
[optionValueField]="bank_id"
[optionTextField]="name"
placeholder="No city selected"
(typed)="inputTyped('ngx-select', $event)"
</ngx-select>

<ngx-select
[(ngModel)]="Value Which You Selected"
[allowClear]="true"
[items]="Bank"
optionTextField="bank_id"
placeholder="Type your Value Here">
<ng-template ngx-select-option ngx-select-option-selected let-option let-text="text">
<span class="color-box" [style]="option.value"></span>
<span [innerHtml]="text" style="color: black"></span>
/ {{option.data.name}} / {{option.data.code}} / {{option.data.ord}}
</ng-template>
</ngx-select>
Assign your Full array in [Items]="" and use the another key values in ngx Template
{{option.data.name}}
{{option.data.code}}
{{option.data.ord}}

If you want to stay with angular material, you can also create your custom wrapper component to avoid boilerplate code, see e.g. Angular ngx-mat-select-search Custom Component.
The wrapper component behaves like a form control and you can adjust it to your needs.

Meteor JS Autoform Custom Input - There is no current view

I'm creating my own custom input type for autoform in meteor js. Everything works as it should, but I get a weird error in browser's console. This custom input is a bootstrap dropdown multi checkbox with possibility of being nested in other bootstrap dropdowns. Error occurs when you check any field inside dropdown.
Uncaught Error: There is no current view
Blaze._getCurrentView
Blaze.getView
AutoForm.templateInstanceForForm
_validateField
_.throttle.later
Here is my coffee file used for custom input.
AutoForm.addInputType "dropdownMultiCheckbox",
template: "afDropdownMultiCheckbox"
valueOut: () ->
grabInput = $(#).children().children('input:checked')
holder = []
grabInput.each ->
holder.push $(#).val()
if $(grabInput[0]).hasClass('all-selector')
holder.shift()
holder
SimpleSchema.messages
'atLeastOne': 'You need to select at least one field'
Template.afDropdownMultiCheckbox.helpers
options: ->
options = #.selectOptions
options
dsk: () ->
#.atts["data-schema-key"]
Template.afDropdownMultiCheckbox.events
'click div.dropdown-toggle': (event) ->
$(event.target).siblings("ul.dropdown-menu").toggle()
'click .all-selector': (event) ->
if event.target.checked
$(event.target).parent().siblings().children(".checkbox-options").prop('checked',true)
else
$(event.target).parent().siblings().children(".checkbox-options").prop('checked',false)
'click .checkbox-options': (event,templateInstance) ->
if !(event.target.checked)
$(event.target).parent().siblings().children(".all-selector").prop('checked',false)
if $(".check-onclick-#{#.class}:checked").length == $(".check-onclick-#{#.class}").length
$("#checkbox-all-#{templateInstance.data.atts.id}").prop('checked',true)
'click div.btn.btn-default.dropdown-toggle,ul,ul *': (event) ->
event.stopPropagation()
Template.afDropdownMultiCheckbox.rendered = ->
instanceOfTemplate = #
$("*").on "click", (event) ->
if !($(event.target)[0] == $(".class-#{instanceOfTemplate.data.atts.id}")[0] ||
$(event.target)[0] == $("##{instanceOfTemplate.data.atts.id}")[0] ||
$(event.target).hasClass("close-dropdown-multi"))
$(".class-#{instanceOfTemplate.data.atts.id}").hide()
jade file below:
template(name="afDropdownMultiCheckbox")
.dropdown
.btn.btn-default.dropdown-toggle(type="button", id="{{atts.id}}", aria-expanded="false")
| {{atts.buttonText}}
span.caret
ul.dropdown-menu(role="menu", aria-labelledby="{{atts.id}}",class="class-{{atts.id}}")
form
div(data-schema-key="{{dsk}}")
if atts.allOption.presence
li.close-dropdown-multi(role="presentation")
input.all-selector.close-dropdown-multi(type="checkbox", value="{{atts.allOption.value}}", id="checkbox-all-{{atts.id}}", role="menuItem")
label.close-dropdown-multi(for="checkbox-all-{{atts.id}}") {{atts.allOption.value}}
+each options
li.close-dropdown-multi(role="presentation")
input.close-dropdown-multi.checkbox-options(class="check-onclick-#{this.class}", role="menuItem", type="checkbox", value="#{this.text}", id="checkbox-#{this.text}")
label.close-dropdown-multi(for="checkbox-#{this.text}") {{this.text}}
br
Schema file I use:
categories:
type: [String]
optional: false
custom: ->
if this.value.length == 0
'atLeastOne'
autoform:
buttonText: 'Categories'
label: false
id: 'dropdown-nr-1'
options: -> _.map CampaignCategories, (arg1) ->
option =
text: t "campaign.categories.#{arg1}"
class: 'dropdown-vol-1'
allOption:
presence: false
value: 'All'
afFieldInput:
type: 'dropdownMultiCheckbox'
locations:
type: [String]
optional: false
custom: ->
if this.length == 0
'atLeastOne'
autoform:
buttonText: 'Locations'
label: false
id: 'dropdown-nr-2'
allOption:
presence: true
value: 'All'
options: -> _.map CampaignLocations, (arg1) ->
option =
text: t "campaign.locations.#{arg1}"
class: 'dropdown-vol-2'
afFieldInput:
type: 'dropdownMultiCheckbox'
EDITED:
Error is caused by CampaignLocations array in schema which is used for i18n in meteor app. It's global variable, maybe someway it's changing meteor context (and this value) because it loads variable outside current template. If I return static value like this below:
[{text: 'test',class: 'test'},{text: 'test',class: 'test'},{text: 'test',class: 'test'}]
Everything is ok and there is no error.

I solved the problem. The problem was very simple but "thanks" to the way that javascript (and meteor) shows errors I didn't notice that I tried to nest form inside form, this is why "Uncaught Error: There is no current view" occured.
What caught me completely off guard was the moment when error appeared in my chrome console. Meteor will not complain with errors when using autoform and nesting form tag inside form tag when "options" property is generated with static data like this
[{text: 'test',class: 'test'},{text: 'test',class: 'test'},{text: 'test',class: 'test'}]
But if you will use for example this kind of code inside options property:
options: -> _.map CampaignLocations, (arg1) ->
option =
text: t "campaign.locations.#{arg1}"
class: 'dropdown-vol-2'
Which is using interpolation or string concatenation then Meteor will throw the error.