I am working on a uni project and I've installed the react-native-google places autocomplete search.
What I am trying to implement is the following:
a. I wanted to have a suggestion to appear when the user enters a city or street name... however, I am not sure how to split the Autocomplete search into multiple fields.
b. Since I might not be able to implement option a. I will let the user input the data and I was hoping I could in the code pass that data to the autocomplete (like an object) and fetch the results - basically do a search based on what the user input and select the first item returned.
However, I don't see any attribute on the autocomplete form where I could use implement option b.
The goal is to get the data through the form, pass it to the search and get the same results as I would when clicking on the dropdown.
I would really appreciate any feedback or suggestion, meanwhile, I will continue trying somethings out and do some further search.
<GooglePlacesAutocomplete
placeholder='Search'
fetchDetails={true}
GooglePlacesSearchQuery={{
rankby: "distance"
}}
onPress={(data, details = null) => {
console.log(data);
console.log(data, details);
}}
query={{
key: 'API_KEY',
language: 'en',
components: 'country:uk',
types: ["supermarket","grocery_or_supermarket","food","store", "establishment"],
nearbyPlacesAPI: 'GooglePlacesSearch',
radius: 30000
}}
enablePoweredByContainer={false}
styles={{
container: {flex:0, position: 'absolute', width: '100%', zIndex: 1},
listView: {backgroundColor:"white"}
}}
/>
Related
I am trying to pass a saved search term string to prefill into google places autocomplete's input field. The setAddressText method they offer successfully prefills the input, but it does not trigger the search, so no dropdown options open. Only once you type something does the query run, so its obviously listening for an onChangeText event before it runs the query. I therefore don't see the point in the setAddressText method, if you then have to type again anyway. Surely there must be a way to trigger the search, without having to add / takeaway characters manually with the keyboard from the existing search term.
const { googleApiKey } = config
const ref = useRef()
useEffect(() => {
ref.current?.setAddressText(initialValue)
}, [])
return (
<View sx={{ flex: 1 }}>
<GooglePlacesAutocomplete
ref={ref}
placeholder={placeholder}
listViewDisplayed="true"
fetchDetails={true}
textInputProps={{
autoFocus: true,
...sx
}}
onPress={(data, details = null) => {
console.log("data", data, "details", details)
}}
query={{
key: googleApiKey,
language: "en",
components: "country:gb",
types: types ? types : null
}}
/>
</View>
)
}
Any wisdom on this would be greatly appreciated!
Full Disclosure: I maintain this library.
This is not currently supported by the library.
There is a feature request open here.
I have a situation in which I want to display data in a FluentUI DetailsList, where column names can be very long, while the column content can be very narrow. In such a case, the header will be truncated.
See this codepen.
Is there any way to change this behavior, such that the header text wraps over multiple lines?
While I found this unanswered question from 2 years ago, I couldn't find an answer on the topic on neither Stackoverflow, Github or the offical documentation.
Here are some approaches I tried:
inject a CSS class with word-break: break-all; via the headerClassName field of IColumn
setting isMultiLine on the columns
The DetailsHeader component itself whose rendering I can override with onRenderDetailsHeader does not seem to offer any props for customizing how the text is displayed
Is there even a way to achieve the desired behaviour (wrapping over multiple lines instead of truncating long column headers)?
Most of FluentUI Components uses text-overflow: ellipsis. What you can do is to modify that "rule". Inside DetailsList you have onRenderDetailsHeader method which allows you to change header styles.
const onRenderDetailsHeader = (headerProps, defaultRender) => {
if (!headerProps || !defaultRender) {
//technically these may be undefined...
return null;
}
return defaultRender({
...headerProps,
styles: {
root: {
selectors: {
'.ms-DetailsHeader-cell': {
whiteSpace: 'normal',
textOverflow: 'clip',
lineHeight: 'normal',
},
'.ms-DetailsHeader-cellTitle': {
height: '100%',
alignItems: 'center',
},
},
},
},
})
}
<DetailsList
...
onRenderDetailsHeader={onRenderDetailsHeader}
/>
Codepen working solution
Note:
Play around with minWidth, maxWidth props inside this._columns to get expected behavior.
I have a search bar that updates the state based on user input. Components that don't match the keywords I've set up will get filtered out and will not render to the screen. How do I display a message when there are no matches in the search bar?
An example can be found on CodeSandbox here:
https://codesandbox.io/embed/search-bar-test-odxw8
I am using an array of objects to store the data. I'm using the map function to separate the data into individual components, and the filter function to perform a re-render as the user inputs a word.
I tried using logic that says "if the array length is 0, display the message". The problem with that is the array is apparently always the same length and isn't connected to the amount of items being rendered to the screen.
I also tried using logic that says "if the inputted word doesn't match the object's keywords, display the message". This doesn't throw an error, but it also does not work as expected. The message remains visible at all times.
My state:
this.state = {
AnimalList,
AnimalFilter: ""
};
An example of my conditional logic:
{/* This is where I'm trying to place the conditional logic */}
{/* For example, typing "pig" should make this appear */}
{this.state.AnimalFilter!== AnimalList.keywords && (
<h2>No Results</h2>
)}
The filter and map methods:
<div className="container">
{AnimalList.filter(animal =>
animal.keywords
.toLocaleLowerCase()
.includes(this.state.AnimalFilter.toLocaleLowerCase())
).map(({ object1, object2, object3 }, index) => (
<AnimalCard
key={index}
object1={object1}
object2={object2}
object3={object3}
/>
))}
</div>
The Data:
export default [
{
object1: "horse",
object2: "goat",
object3: "panda",
keywords: "horse goat panda"
},
{
object1: "horse",
object2: "cat",
object3: "cow",
keywords: "horse cat cow"
},
{
...
},
...
];
I expect for the message to display to the screen when a user inputs a word that "doesn't exist". As of now, the message will either display the entire time or not at all.
I see in several existing rally cardboards that some cards have discussion icons on them. When you click on the discussion icon, it displays the full discussion thread as a "popover" and you can add a comment to the discussion. I have not been able to get this icon, and its associated functionality to appear. Simply adding 'Discussion' to the card fields like this (below) does not work like it does for some members of the model HierarchicalRequirement.
var card = Ext.create('Rally.ui.cardboard.Card', {
style: {
position: 'absolute',
left: '100px',
top: '400px'
},
editable: true,
fields: ['Name', 'Owner', 'ScheduleState', 'Discussion'],
record: result
});
this.down('#main').add(card);
That functionality should be enabled by default. Your result that you are passing as the record config- is that an instance of Rally.data.wsapi.Model? As long as it's actually a record (like that you loaded from a Rally.data.wsapi.Store) and that model type has a Discussion field (like all artifacts do) it should just work...
i am developing an React Native Android App.
I am receiving data (id and name) from my API. Now i am using a ListView with MKIconToggle (react-native-material-kit) to display my list data.
With MKIconToggle i can give my displayed items two different states (clicked = color is black / unclicked = grey). Now i want to send the list of clicked items back to my server. But i just can´t figure out how i put the clicked items for example into an array or something and only send clicked items to server.
My RenderMethod with the ListView looks like this:
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderList}
horizontal={true}
renderHeader={this.renderHeader}
/>
RenderList:
<View
style={{justifyContent: 'flex-start', alignItems: 'center', padding: 10, flexDirection: 'column'}}>
<MKIconToggle
checked={this.state.initialChecked}
onCheckedChange={()=>this._onIconChecked(data)}
onPress={this._onIconClicked}
style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
<Text state_checked={this.state.checkedState}
pointerEvents="none"
style={styles.titleChecked}
numberOfLines={3}>{data.name}</Text>
<Text pointerEvents="none"
style={styles.title}
numberOfLines={3}>{data.name}</Text>
</MKIconToggle>
</View>
Now i should handle my clicked Items in _onIconChecked:
_onIconChecked: function (data) {
// Put data.id into an array, if it way clicked (state is true)
// If date.id is unclicked again, then remove from array
},
I hope i could explain my issue clearly, otherwise just let me know. I am new in programming and writing stackoverflow issues/questions, so please give me hints if i made something wrong.
From your information I will have to make a few assumptions in order to be able to answer your question.
For now I will assume that that checked handler properly returns the 'id' of an item that is the same id as in your array of items.
So assuming your array is:
[{name: 'Luke', id: 1'}, {name: 'Darth', id: 2'}]
If I were to click on 'Luke' _onIconChecked would receive a data object that at least has id: 1 in it.
The second assumption is that you have an array somewhere where you can store those clicked items. I would just put that outside of your component seeing as MK would already take care of properly rendering a checked item. So:
var _checkedItems = []
var myComponent = React.create...
The last assumption is that the data object passed to _onIconChecked also contains information on the state of the checkbox, so date.checked is either true or false.
The precise implementation might be different for all these items, but this is what I can work off of.
Now what you could do is:
_onIconChecked: function (data) {
var id = data.id;
var checked = data.checked;
var currentIndex = _checkedItems.indexOf(id)
if(checked) {
if(currentIndex == -1) { _checkedItems.push(id) }
// the 'else' would mean the item is already in the array, so no need to add
} else {
if(currentIndex > -1) {
// This means that the item is in the array, so lets remove it:
_checkedItems.splice(currentIndex, 1) // This removes the id from the array.
}
}
}
What you'd do now to only get the items from your this.state.items array that have their ids in the checked array:
getCheckedItems: function() {
return this.state.items.map(function(item) {
if(_checkedItems.indexOf(item.id) > -1){
return item
}
})
}
I am not sure about your setup so I made lots of assumptions and probably over engineered some things, but it might get you going in the right direction.