How can I change the font size and padding of the title cell in details list. I am using onRenderDetailsHeader prop to customize header render.
private renderDetailsHeader = (detailsHeaderProps: IDetailsHeaderProps) => {
return (
<DetailsHeader
{...detailsHeaderProps}
onRenderColumnHeaderTooltip={this.renderCustomHeaderTooltip}
/>
);
}
private renderCustomHeaderTooltip = (tooltipHostProps: ITooltipHostProps) => {
return (
<span
style={{
display: "flex",
fontFamily: "Tahoma",
fontSize: "10px",
justifyContent: "left",
paddingLeft: '0 px'
}}
>
{tooltipHostProps.children}
</span>
);
}
Codepen
In IDetailsHeaderProps['columns'] or simply IColumn[] => IColumn has 'headerClassName' key where you can specify the necessary styles to each of the column.
You can use the IDetailsColumnStyles interface to style the header cells.
Example:
...
const headerStyle: Partial<IDetailsColumnStyles> = {
cellTitle: {
color: theme.palette.orange,
}
}
const columns: IColumn[] = [
{ styles: headerStyle, key: 'name', name: 'Name', fieldName: 'name', minWidth: 100,},
...
Style the Row:
...
const renderRow: IDetailsListProps['onRenderRow'] = props => {
const rowStyles: Partial<IDetailsRowStyles> = {
root: {
borderBottomColor: theme.semanticColors.buttonBorder,
fontSize: theme.fonts.medium.fontSize,
},
cell: { paddingLeft: 0, },
}
if (!props) return null
return <DetailsRow {...props} styles={rowStyles} />
}
return (
<DetailsList
compact
items={items}
columns={columns}
selectionMode={SelectionMode.none}
layoutMode={DetailsListLayoutMode.justified}
constrainMode={ConstrainMode.horizontalConstrained}
onRenderRow={renderRow}
onRenderDetailsHeader={renderHeader}
onRenderItemColumn={renderItemColumn}
setKey="set"
ariaLabelForSelectionColumn="Toggle selection"
ariaLabelForSelectAllCheckbox="Toggle selection for all items"
checkButtonAriaLabel="Row Checkbox"
/>
)
...
Related
I want year to be displayed on selection from dropdown list.
In this, selected item is being shown as alert I want to set text to the search box.
Here is the code:
import React, { useState, useEffect } from "react";
import {
StyleSheet,
SafeAreaView,
Text,
View,
TextInput,
Image,
Button,
FlatList,
TouchableOpacity,
} from "react-native";
import SearchableDropdown from "react-native-searchable-dropdown";
const years = [
{ id: 1, name: "2021" },
{ id: 2, name: "2020" },
{ id: 3, name: "2019" },
{ id: 4, name: "2018" },
{ id: 5, name: "2017" },
{ id: 6, name: "2016" },
{ id: 7, name: "2015" },
];
export default function Year() {
console.log("App Executed");
return (
<SafeAreaView>
<Text style={styles.headingText}>Select Year</Text>
<SearchableDropdown
onTextChange={(text) => console.log(text)}
// On text change listner on the searchable input
onItemSelect={(year) => alert(JSON.stringify(year))}
// onItemSelect called after the selection from the dropdown
containerStyle={{ padding: 5 }}
// suggestion container style
textInputStyle={{
// inserted text style
padding: 12,
borderWidth: 1,
borderColor: "#ccc",
backgroundColor: "#FAF7F6",
}}
itemStyle={{
// single dropdown item style
padding: 10,
marginTop: 2,
backgroundColor: "#FAF9F8",
borderColor: "#bbb",
borderWidth: 1,
}}
itemTextStyle={{
// text style of a single dropdown item
color: "#222",
}}
itemsContainerStyle={{
// items container style you can pass maxHeight
// to restrict the items dropdown hieght
maxHeight: "50%",
}}
items={years}
// mapping of item array
defaultIndex={"eg:2021"}
// default selected item index
placeholder="eg:2021"
// place holder for the search input
resetValue={false}
// reset textInput Value with true and false state
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "white",
padding: 10,
},
titleText: {
padding: 8,
fontSize: 16,
textAlign: "center",
fontWeight: "bold",
},
headingText: {
padding: 10,
},
});
I was unable to use state
here is the solution
const years = [
{ id: 1, name: "2021" },
{ id: 2, name: "2020" },
{ id: 3, name: "2019" },
{ id: 4, name: "2018" },
{ id: 5, name: "2017" },
{ id: 6, name: "2016" },
{ id: 7, name: "2015" },
];
export default function Year() {
const [selectedItems, setSelectedItems] = useState();
console.log("App Executed");
return (
<SafeAreaView>
<SearchableDropdown
onTextChange={(text) => console.log(text)}
// On text change listner on the searchable input
selectedItems={selectedItems}
onItemSelect={(year) => setSelectedItems(year)}
// onItemSelect called after the selection from the dropdown
containerStyle={{ padding: 5 }}
// suggestion container style
textInputStyle={{
// inserted text style
padding: 12,
borderWidth: 1,
borderColor: "#ccc",
backgroundColor: "#FAF7F6",
}}
itemStyle={{
// single dropdown item style
padding: 10,
marginTop: 2,
backgroundColor: "#FAF9F8",
borderColor: "#bbb",
borderWidth: 1,
}}
itemTextStyle={{
// text style of a single dropdown item
color: "#222",
}}
itemsContainerStyle={{
// items container style you can pass maxHeight
// to restrict the items dropdown hieght
maxHeight: "50%",
}}
items={years}
// mapping of item array
defaultIndex={"eg:2021"}
// default selected item index
placeholder="eg:2021"
// place holder for the search input
resetValue={false}
// reset textInput Value with true and false state
/>
</SafeAreaView>
);
}
I SLOVED THAT BY THIS TRICK WAY:
const getTypeNameById_func = async id => {
const dataa = await accountsType.find(item => {
if (item.ID == id)
return item.NAME;
});
setTextSearchable(dataa.NAME);
};
AND IN SEARCHABLE DROPDOWN :
<SearchableDropdown
items={filterData}
placeholder={String(**textSearchable**)}
resetValue={false}
underlineColorAndroid="transparent"
onTextChange={text => console.log(text)}
onItemSelect={item => {
getTypeNameById_func(item.id);
setAccountType(item.id);
}}
defaultIndex={1}
/>
u can use useState variable and pass that variable in placeholder like:-
placeholder={variableName}
I use react-native-gifted-chat for my chat. I want to change time font color. I changed it as the doc said, but its not changing. I want both time colors are black.
using "react-native-gifted-chat": "^0.16.1"
const renderTime = (props) => {
return (
<Time
{...props}
textStyle={{
left: {
color: 'black',
},
right: {
color: 'black',
},
}}
/>
);
};
Looks like you need to pass timeTextStyle instead of textStyle.
Try:
const renderTime = (props) => {
return (
<Time
{...props}
timeTextStyle={{
left: {
color: 'black',
},
right: {
color: 'black',
},
}}
/>
);
};
I am looking to only toggle the focus state on one of the inputs instead of both when onFocus is fired.
With both inputs having the 'onFocus' and 'onBlur' events I was expecting the state to update on only the current element that is focussed.
Should I be using refs instead of state for this sort of event handling?
class SignInScreen extends Component {
state = {
isFocused: false,
style: {
inputContainer: styles.input
}
}
onFocus = () => {
if(!this.state.isFocused) {
this.setState({
isFocused: true,
style: {
inputContainer: styles.inputDifferent
}
})
}
}
onBlur = () => {
if(this.state.isFocused) {
this.setState({
isFocused: false,
style: {
inputContainer: styles.input
}
})
}
}
render() {
return (
<Input
containerStyle={[styles.input, this.state.style.inputContainer]}
onFocus={this.onFocus}
onBlur={this.onBlur}
/>
<Input
containerStyle={[styles.input, this.state.style.inputContainer]}
onFocus={this.onFocus}
onBlur={this.onBlur}
/>
)
}
}
const styles = StyleSheet.create({
input: {
borderWidth: 1,
borderColor: 'white,
marginBottom: 16,
maxWidth: '90%',
marginLeft: 'auto',
marginRight: 'auto'
},
inputDifferent: {
backgroundColor: 'gray',
}
});
Modify your code Like This:
Edited:
class SignInScreen extends Component {
state = {
isFocused: false,
firstLoad: true
}
onFocus = () => {
this.setState({
isFocused: !this.state.isFocused,
firstLoad: false
})
}
render() {
const {isFocused} = this.state
return (
<View>
<Input
containerStyle={isFocused || firstLoad ? styles.input : styles.inputDifferent}
onFocus={this.onFocus}
/>
<Input
containerStyle={!isFocused || firstLoad ? styles.input : styles.inputDifferent}
onFocus={this.onFocus}
/>
</View>
)
}
}
const styles = StyleSheet.create({
input: {
borderWidth: 1,
borderColor: 'white',
marginBottom: 16,
maxWidth: '90%',
marginLeft: 'auto',
marginRight: 'auto'
},
inputDifferent: {
backgroundColor: 'gray',
}
});
its unnecessary to include styles on state. it is better to only use this.state.isFocus to make code simplier. just used this to make a condition on what style the inputs will be using.
you can also disregard onBlur. because all we need on the conditions is isFocus.
the key factor here is the exclamation symbol that will make the state toggle.
Edited: firstLoad state added to make the style of both inputs the same on load. that will be used on the condition inside input styles.
note: it can only work with two inputs
How can i get selected value from RadioGroup.
state = {
gender: '',
data: [
{
label: 'male',
value: "Male",
},
{
label: 'female',
value: "Female",
}
],
}
render() {
return (
<View style={styles.radioGroupContainer}>
<Text style={styles.textLableStyle}>Select Gender</Text>
<RadioGroup style={alignItems = 'flex-start'}
radioButtons={this.state.data}
onPress={
this.onPress
} />
</View>
)
}
Note: On selection of radio button i want value in gender variable.
Install the package by entering the below command in your project root directory.
npm i react-native-radio-buttons-group --save
Basic Usage
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import RadioGroup from 'react-native-radio-buttons-group';
export default class Vertical extends Component {
state = {
data: [
{
label: 'Default value is same as label',
},
{
label: 'Value is different',
value: "I'm not same as label",
},
{
label: 'Color',
color: 'green',
},
{
disabled: true,
label: 'Disabled',
},
{
label: 'Size',
size: 32,
},
],
};
// update state
onPress = data => this.setState({ data });
render() {
let selectedButton = this.state.data.find(e => e.selected == true);
selectedButton = selectedButton ? selectedButton.value : this.state.data[0].label;
return (
<View style={styles.container}>
<Text style={{ fontSize: 18, marginBottom: 50 }}>
Value = {selectedButton}
</Text>
<RadioGroup radioButtons={this.state.data} onPress={this.onPress} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
Output
make the RadioGroup like that , only giving the RadioGroup tag . by putting that code you will get the value in gender state.
<RadioGroup style={alignItems = 'flex-start'}
radioButtons={this.state.data}
onPress={data => this.setState({gender: data })} />
Getting a strange error when trying to apply conditional styling to a custom component. Whenever the style change should appear the text completely disappears. If I start typing again, the new styling appears but once the style would change again, the text disappears again. If I apply the styling as static, the custom styling works completely fine. I'm not sure what the issue could be. Thanks in advance for the help.
<UserInput
style = {!this.state.isValidEmail ? styles.errorInline : styles.default}
placeholder="Email"
autoCapitalize={'none'}
returnKeyType={'next'}
autoCorrect={false}
onSubmitEditing={() => this.focusNextField('password')}
updateState={(email) => {
let formattedEmail = email.trim();
this.state.initialValidationChecked? this.validate(formattedEmail) : this.setState({formattedEmail})}
}
blurOnSubmit={true}
onBlur2={(event) => this.validate(event.nativeEvent.text.trim())}
/>
errorInline: {
color: 'red',
},
default : {
color: '#777777'
}
export default class UserInput extends Component {
componentDidMount() {
if (this.props.onRef != null) {
this.props.onRef(this)
}
}
onSubmitEditing() {
if(this.props.onSubmitEditing){
this.props.onSubmitEditing();
}
}
focus() {
this.textInput.focus();
}
render() {
return (
<View style={styles.inputWrapper}>
<TextInput
style={[styles.input, this.props.style]}
placeholder={this.props.placeholder}
secureTextEntry={this.props.secureTextEntry}
autoCorrect={this.props.autoCorrect}
autoCapitalize={this.props.autoCapitalize}
returnKeyType={this.props.returnKeyType}
onChangeText={(value) => this.props.updateState(value)}
onEndEditing={(value) => { if(this.props.onBlur2) return this.props.onBlur2(value)}}
ref={input => this.textInput = input}
blurOnSubmit={this.props.blurOnSubmit}
onSubmitEditing={this.onSubmitEditing.bind(this)}
underlineColorAndroid='transparent'
/>
</View>
);
}
}
UserInput.propTypes = {
placeholder: PropTypes.string.isRequired,
secureTextEntry: PropTypes.bool,
autoCorrect: PropTypes.bool,
autoCapitalize: PropTypes.string,
returnKeyType: PropTypes.string,
};
const DEVICE_WIDTH = Dimensions.get('window').width;
const styles = StyleSheet.create({
input: {
width: DEVICE_WIDTH - 70,
height: 40,
marginHorizontal: 20,
marginBottom: 30,
color: '#777777',
borderBottomWidth: 1,
borderBottomColor: '#0099cc'
},
inputWrapper: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
});
Styles are given as object (key-value pair).
But looking at your codes in the following line
style = {!this.state.isValidEmail ? styles.errorInline : 'none'}
When this.state.isValidEmail returns true, you're just giving 'none' to the style, which is a syntax error, you should return something like this
style = {!this.state.isValidEmail ? styles.errorInline : {display: 'none'}}