I am creating a complex template and I need new lines to break up the code so I can see it better. How do I break up a template without having it render new lines when the template is called?
Here's a snippet of code
{{#if: {{{value|}}}
|'''Market value: '''{{{value}}}
}}
{{#if: {{{damage|}}}
|'''Damage: '''{{{damage}}}
}}
{{#if: {{{identified|}}}
|'''Description (sufficiently identified): '''"{{{identified}}}"
}}
{{#if: {{{unidentified|}}}
|'''Description (insufficiently identified): '''"{{{unidentified}}}"
}}
{{#if: {{{weight|}}}
|'''Weight: '''{{{weight}}} lb
}}
{{#if: {{{durability|}}}
|'''Durability: '''{{{durability}}}
}}
{{#if: {{{quality|}}}
|'''Quality rank: '''{{{quality}}}
}}
{{#if: {{{requirements|}}}
|'''Requirements: '''{{{requirements}}}
}}
{{#if: {{{materials|}}}
|'''Materials: '''{{{materials}}}
}}
{{#if: {{{materials|}}}
|'''Materials: '''{{{materials}}}
}}
You can use HTML style comments in MediaWiki templates:
}}<!--
-->{{#if: {{{durability|}}} |'''Durability: '''{{{durability}}}
}}<!--
-->{{#if: {{{quality|}}} |'''Quality rank: '''{{{quality}}}
}}<!--
-->
Related
I want to test a checkbox that has no label. The point is that there are other checkboxes as well so I cant use getByRole.
I have tried to use data-testid, but apparently, it's not working.
How am I supposed to check if that checkbox is checked(toBeChecked())?
<Checkbox
data-testid={item?.id}
key={item?.id}
id={item?.id.toString()}
color="secondary"
checked={item?.checked}
disabled={hasAll}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
if (item) {
item.checked = e.target.checked;
setFinalData(updateItemInArray(finalData, {
item,
index,
}));
}
}}
/>
The proper way to do this would be to add an aria-label to your checkbox, so it's announced correctly by screen readers:
<Checkbox inputProps={{ 'aria-label': 'Select row 1' }} />
This way, you'll be able to select it in your tests using getByLabelText.
If you want to use data-testid, you can place it on the checkbox similarly to aria-label:
<Checkbox inputProps={{ 'data-testid': 'checkbox1' }} />
Note that if you're using Typescript, you'd have to cast the inputProps to React.InputHTMLAttributes<HTMLInputElement> as data attributes are not a part of InputHTMLAttributes:
<Checkbox inputProps={{ 'data-testid': 'checkbox1' } as React.InputHTMLAttributes<HTMLInputElement>} />
I have this code in my React Native app that renders a list of types. Selected and not selected types have different backgrounds. Is it okay to make accessibility label text conditional?
<View style={styles.typesList}>
{types.map(type => {
return (
<TouchableOpacity
key={type}
style={[
styles.type,
{
backgroundColor: filterTypes.includes(type)
? Colors.white
: Colors.lightYellow
}
]}
onPress={() => {
handleFilterTypesChange(type);
}}
testID='type'
accessibilityLabel={`${
filterTypes.includes(type) ? 'Unselect' : 'Select'
} ${type} filter`}
>
<Text>{type}</Text>
</TouchableOpacity>
);
})}
</View>
The screen readers by default read-out if a checkbox is selected or not. So no need to put conditional text to just read out it. If you have multiple select boxes it is advised to use fieldsel and legend which will give details to visually challenged persons.
<fieldset>
<legend>Select your pizza toppings:</legend>
<input id="ham" type="checkbox" name="toppings" value="ham">
<label for="ham">Ham</label><br>
<input id="pepperoni" type="checkbox" name="toppings" value="pepperoni">
<label for="pepperoni">Pepperoni</label><br>
</fieldset>
The contains the group of checkboxes, and the labels the group. Screen readers may repeat the legend for each control in the group, so the legend text should be brief and descriptive.
I am making a react native application which needs the GooglePlacesSuggestion in react native. So I used a package:
react-native-google-places-autocomplete
And here is the code :
<View style = {{margin:10,padding:20,flex:1}}>
<GooglePlacesAutocomplete
placeholder='Search'
minLength={2} // minimum length of text to search
autoFocus={false}
returnKeyType={'search'} // Can be left out for default return key https://facebook.github.io/react-native/docs/textinput.html#returnkeytype
listViewDisplayed='auto' // true/false/undefined
fetchDetails={true}
renderDescription={row => row.description} // custom description render
onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true
// ToastAndroid.show(JSON.stringify(data),ToastAndroid.LONG)
let city = details.address_components[0].long_name
let lat = details.geometry.location.lat
let lng = details.geometry.location.lng
let full_addr= details.formatted_address
}}
getDefaultValue={() => ''}
query={{
key: 'AIzaSyB-q60XaNf5nsz5678e1jaRg0KTs5Q1nPi2Zk',
language: 'en', // language of the results
types: 'geocode' // default: 'geocode'
}}
styles={{
textInputContainer: {
width: '100%'
},
description: {
fontWeight: 'bold'
}
}}
nearbyPlacesAPI='GooglePlacesSearch' // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
GoogleReverseGeocodingQuery={{
}}
GooglePlacesSearchQuery={{
rankby: 'distance',
types: 'food'
}}
filterReverseGeocodingByTypes={[ 'political','administrative_area_level_3']} // filter the reverse geocoding results by types - ['locality', 'administrative_area_level_3'] if you want to display only cities
debounce={200} // debounce the requests in ms. Set to 0 to remove debounce. By default 0ms.
/>
</View>
But there arise two problems from the above code. While typing any places I get a very slow response, I mean that after typing a character or word for places it took 2-3 second to display the result and sometimes it does not display any result why? Also if I want to search address based on road name and area name then it doesn't give me any suggestions. Why? I am stuck I both these problem kindly help me in both the issue. Thanks in advance
I just follow and example of the repository and it did not show/hide, it just stay there, over half the screen, it is very annoying.
<GooglePlacesAutocomplete
placeholder='Search'
minLength={2} // minimum length of text to search
autoFocus={false}
returnKeyType={'search'} // Can be left out for default return key https://facebook.github.io/react-native/docs/textinput.html#returnkeytype
keyboardAppearance={'light'} // Can be left out for default keyboardAppearance https://facebook.github.io/react-native/docs/textinput.html#keyboardappearance
listViewDisplayed='undefined' // true/false/undefined
fetchDetails={true}
renderDescription={row => row.description} // custom description render
onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true
console.log(data, details);
}}
getDefaultValue={() => ''}
query={{
// available options: https://developers.google.com/places/web-service/autocomplete
key: 'YOUR API KEY',
language: 'en', // language of the results
types: '(cities)' // default: 'geocode'
}}
styles={{
textInputContainer: {
width: '100%'
},
description: {
fontWeight: 'bold'
},
predefinedPlacesDescription: {
color: '#1faadb'
}
}}
currentLocation={true} // Will add a 'Current location' button at the top of the predefined places list
currentLocationLabel="Current location"
nearbyPlacesAPI='GooglePlacesSearch' // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
GoogleReverseGeocodingQuery={{
// available options for GoogleReverseGeocoding API : https://developers.google.com/maps/documentation/geocoding/intro
}}
GooglePlacesSearchQuery={{
// available options for GooglePlacesSearch API : https://developers.google.com/places/web-service/search
rankby: 'distance',
type: 'cafe'
}}
GooglePlacesDetailsQuery={{
// available options for GooglePlacesDetails API : https://developers.google.com/places/web-service/details
fields: 'formatted_address',
}}
filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3']} // filter the reverse geocoding results by types - ['locality', 'administrative_area_level_3'] if you want to display only cities
predefinedPlaces={[homePlace, workPlace]}
debounce={200} // debounce the requests in ms. Set to 0 to remove debounce. By default 0ms.
renderLeftButton={() => <Image source={require('path/custom/left-icon')} />}
renderRightButton={() => <Text>Custom text after the input</Text>}
/>
I'd like to show/hide it whenever the user choose an option of the list or touch another part of the app.
Also I'd like to know how to get the info of the choosen option to pass to a method to create routes
I see you have set listViewDisplayed to undefined.
You should set it to auto. That's it.
Hope it helps you.
Hello i'm trying to change background color of multiselect dropdown in react native. There is no attribute to change color in list.
Here is my code :
<MultiSelect
hideTags
style={{backgroundColor:'rgba(52, 52, 52, 0.1)',color:'#d1d0cf'}}
items={this.state.serviceCategories}
uniqueKey="id"
ref={(component) => { this.multiSelect = component }}
onSelectedItemsChange={selectedCategory => this.setState({ selectedCategory })}
selectedItems={this.state.selectedCategory}
selectText="Pick Items"
searchInputPlaceholderText="Search Items..."
onChangeInput={ (text)=> console.log(text)}
altFontFamily="ProximaNova-Light"
tagRemoveIconColor="#CCC"
tagBorderColor="#CCC"
tagTextColor="#CCC"
selectedItemTextColor="#f673d7"
selectedItemIconColor="#f673d7"
itemTextColor="#d1d0cf"
displayKey="name"
searchInputStyle={{ backgroundColor:'rgba(52, 52, 52, 0.1)',color:'#d1d0cf' }}
submitButtonColor="#f673d7"
submitButtonText="Submit"
/>
It is already submitted in issues of that library unable to change multiselect background color
So now you have 2 options.
Either wait for someone to do that task and update the library
Or you yourself do some changes in library, add backgroundcolor parameter and generate PR.
If it is not urgent for you, let me generate PR for you tonight, and than you can use that in your project.