i created simple FlatList in React Native that display data from Axios fetch
i could search it by 1 Attribute
For example ( item.name ) or ( name.description)
const searchFilter=(text)=>{
if(text){
const newData=masterData.filter((item)=>{
const itemData=item.description_translate ? item.description_translate.toUpperCase():''.toUpperCase() ;
const textData=text.toUpperCase();
return itemData.indexOf(textData)>-1;
});
setfilteredData(newData);
setsearch(text)
}else{
setfilteredData(masterData);
setsearch(text);
}
}
But i need to use the search box to search in many Attrubites , for Example item.description || item.number || item .category
how can i do this in my search function please
Related
I've tried about everything I could find on the forums etc, re this error, but no success.
Most solutions seem to be
format="DD/MM/YYYY HH:mm"
or
Moment (being locale driven)
I return the selected date into a chip which displays fine, but the 'RangeError.Invalid time value' issue persists into the chip after the correct selected date is rendered in it.
const [effectiveSelectedDate, setEffSelectedDate] = useState();
const handleEffDateChange = (date,name) =>{
setEffSelectedDate(date);
}
export const makeColumns = (columns, language, rawFilters, filters, format_functions) => {
return columns.map((item, i) => {
if (data.className.search("date_time") > -1) {
logic: (.......... ),
display: (filterList, onChange, index, column) => (
<MuiPickersUtilsProvider
utils={DateFnsUtils}
locale={localeMap[i18next.language]} >
<KeyboardDatePicker
fullWidth
variant='inline'
placeholder='yyyy-MM-dd'
format='yyyy-MM-dd'
margin='normal'
id='date-picker-inline'
name='effectiveDate'
value={effectiveSelectedDate}
onChange={handleEffDateChange}
KeyboardButtonProps={{ 'aria-label': 'change date', }}
/>
</MuiPickersUtilsProvider>
)
}
}
);
What am I missing?
Thanks
try this one
const [effectiveSelectedDate, setEffSelectedDate] = useState();
const handleEffDateChange = (date,name) =>{
setEffSelectedDate(date);
}
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
fullWidth
variant='inline'
placeholder='yyyy-MM-dd'
format='yyyy-MM-dd'
margin='normal'
id='date-picker-inline'
name='effectiveDate'
value={effectiveSelectedDate}
onChange={handleEffDateChange}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
/>
</MuiPickersUtilsProvider>
How can I excatly do a similar Date system like the one in the Whatsapp chat screen?
As you can see the messages are in a group by date, I mean they are separated by date.
Here is a ScreenShot that i found for better explanation:
I do this in a FlatList, while rendering the messages one by one.
Here is what i did
let previousDate = "";
if (index > 0) {
previousDate = moment(this.state.messages[index - 1].created_at).format(
"L"
);
} else {
previousDate = moment(this.state.messages.created_at).format("L");
}
let currentDate = moment(item.created_at).format("L");
So, i created a functional component for renderItem prop of the FlatList, so item and index comes from the actual data from the FlatList.
What i'm trying to do here is, basically grabbing the current rendering item's created_at and compare it with the previous item's created_at, and to do that, i'm using the original data which is stored in the state. But unfortunately when the FlatList rendering the very first item which has index number 0 there is no previous element to compare in the original data in state, that's why i checking if is greater than 0 go and grab date from previous indexed item. And in the Else case, which means when rendering the first item, do not look for previous item and just get the created_at.
And below i check if the currentDate and previousDates are NOT the same, render a custom component else do not render anything.
{previousDate && !moment(currentDate).isSame(previousDate, "day") ? ( // custom component) : null}
It's should work like that, but the major problem is, i used inverted FlatList for to able to messages go from bottom of the screen to the top. But now, becouse of it's a inverted flatlist the items being rendering from bottom to the top and it gives me result like this:
NOTE: At the beginning the messages were coming also reversed but i fixed this with sending them also reversed from the DB.
So, i don't know how do i able to achieve my goal, and do it like on the first picture.
Thank you!
I use a helper function (generateItems) to address the problem that you are describing. Here is the code that I use to group my messages by day and then render either a <Message /> or a <Day /> in the renderItem prop. This is using an inverted FlatList as you described.
import moment from 'moment';
function groupedDays(messages) {
return messages.reduce((acc, el, i) => {
const messageDay = moment(el.created_at).format('YYYY-MM-DD');
if (acc[messageDay]) {
return { ...acc, [messageDay]: acc[messageDay].concat([el]) };
}
return { ...acc, [messageDay]: [el] };
}, {});
}
function generateItems(messages) {
const days = groupedDays(messages);
const sortedDays = Object.keys(days).sort(
(x, y) => moment(y, 'YYYY-MM-DD').unix() - moment(x, 'YYYY-MM-DD').unix()
);
const items = sortedDays.reduce((acc, date) => {
const sortedMessages = days[date].sort(
(x, y) => new Date(y.created_at) - new Date(x.created_at)
);
return acc.concat([...sortedMessages, { type: 'day', date, id: date }]);
}, []);
return items;
}
export default generateItems;
For reference here is my list as well as the renderItem function:
<MessageList
data={generatedItems}
extraData={generatedItems}
inverted
keyExtractor={item => item.id.toString()}
renderItem={renderItem}
/>
function renderItem({ item }) {
if (item.type && item.type === 'day') {
return <Day {...item} />;
}
return <Message {...item} />;
}
This is how i did it in react,
Create a new Set() to store dates uniquely
const dates = new Set();
When looping through chats array, check if date already exists in unique Set before rendering date
chats.map((chat) => {
// For easier uniqueness check,
// Formated date string example '16082021'
const dateNum = format(chat.timestamp, 'ddMMyyyy');
return (
<React.Fragment key={chat.chat_key}>
// Do not render date if it already exists in set
{dates.has(dateNum) ? null : renderDate(chat, dateNum)}
<ChatroomChatBubble chat={chat} />
</React.Fragment>
);
});
Finally, when date has been rendered, add date num into array so it doesn't render again
const renderDate = (chat, dateNum) => {
const timestampDate = format(chat.timestamp, 'EEEE, dd/MM/yyyy');
// Add to Set so it does not render again
dates.add(dateNum);
return <Text>{timestampDate}</Text>;
};
I have a custom component that provides the rendered list of data when the data is available.
But when the data is not available in the example case below where data=[], I want to apply a different style to it.
return (
<FollowableArticleListTemplate
style={hasData}
title={ title }
data={ [] }
isFollowing={ isFollowing }
onToggleFollow={ id ? () => toggleSourceFollow(id, isFollowing, title) : null }
setListRef={ this.setListRef }
contentType="source"
/>
);
What I'm looking for is something like this:
style={hasData}
i.e if the data.length > 0
use this style for this component: style={hasData}
otherwise use this style component: style={noData}
This is easily achieved by using the ternary operator. First, you have to conditionally use data using state, not by giving its value directly into the component.
return (
<FollowableArticleListTemplate
style={myData.length > 0 ? hasData : noData}
title={ title }
data={myData}//this is your state
isFollowing={ isFollowing }
onToggleFollow={ id ? () => toggleSourceFollow(id, isFollowing, title) : null }
setListRef={ this.setListRef }
contentType="source"
/>
);
```
hey guys im using react native ImageCarahousal in that. I want to show my array of image in this they can be multiple or many . I need to show that in my imagecarahousal...
that is showing normally static image like this [{uri:'https://images.pexels.com/photos/889087/pexels-photo-889087.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'}]
how can I make it based on array of multiple images
<ImageCarousel
height={300}
delay={7000}
animate= "true"
indicatorSize={10}
indicatorColor="white"
images={
[this.props.navigation.state.params.itemimage.map
( ( item,i)=> {
{uri:item}
} ) ]
}
/>
Try this:
const { params } = this.props.navigation.state;
<ImageCarousel
height={300}
delay={7000}
animate= "true"
indicatorSize={10}
indicatorColor="white"
images={params.itemimage && params.itemimage.map(item => {uri:item})}
/>
Is there any way to provide the translate-default value while using the filter instead of directive?
e.g:
How to achieve the same results as this
<h3 translate="TEST" translate-default="Not present"></h3>
with filter format
{{ 'TEST' | translate }}
How do i put the "translate-default" attribute when using the translate filter?
What i need to do is show the original text if the key is not present.
I have created a wrapping filter for that purpose:
.filter('txf', ['$translate', ($translate: angular.translate.ITranslateService) => {
return (input: string, stringIfNotAvailable: string = '') => {
const translation = $translate.instant(input);
return translation === input ? stringIfNotAvailable : translation;
};
}]);