I have implemented a clear button in the filter component. Clear button is working as expected but the button displays twice in the Page.
This is the code
import * as React from 'react';
import { List, Datagrid, TextField, ReferenceField, NumberField, DateField } from 'react-admin';
import { Filter, ReferenceInput, SelectInput, TextInput, DateInput } from 'react-admin';
import Button from '#material-ui/core/Button';
const FilterComponent = props => (
<div>
<Filter {...props} >
<TextInput
label="Search"
source="name"
alwaysOn
/>
<DateInput source="start_date" alwaysOn />
<DateInput source="end_date" alwaysOn />
</Filter>
<Button id="clearButton" variant="outlined" onClick={() => props.setFilters({})}>Clear fields</Button>
</div>
);
export const ProjectList = props => (
<List {...props} filters={<FilterComponent />}>
<Datagrid rowClick="edit">
// Here is the fields
</Datagrid>
</List>
);
But the problem is button displays twice in the filter component
Please share your answers. Thanks in advance
You shall have the Button hide when props.context === 'button'
Related
For some reason there's no nativeBase api or documentation on this. I can not get a menu.item to respond to press/click no matter what I try.
Attempts
putting Text/Button elements from react-native into the menu. item
putting the menu in multiple different screens
creating a separate function instead of just arrow function
import React from "react"
import {
Menu,
HamburgerIcon,
Box,
Center,
NativeBaseProvider,
usePropsResolution,
Text,
Pressable
} from "native-base"
import {Alert, } from "react-native";
import { logout } from "../_redux/_actions/authentication.actions";
export const NavMenu = (props) => {
const menuItems = ['Profile','Sign Out'];
return (
<Box h="80%" w="95%" alignItems="flex-start">
<Menu w="150" top="-85" h="100%"
trigger={(triggerProps) => {
return (
<Pressable accessibilityLabel="More options menu" {...triggerProps}>
<HamburgerIcon color="black" />
</Pressable>
)
}}
>
**<Menu.Item onPress={()=>alert("Alert Title")}>**
Logout
</Menu.Item>
</Menu>
</Box>
)
}
export default () => {
return (
<NativeBaseProvider>
<Center flex={1} px="1">
<NavMenu />
</Center>
</NativeBaseProvider>
)
}
I found workaround around this problem. Would be interested in better solution, but this should work (it is also not very clean solution):
<Menu.Item onPress={()=>alert("Alert Title")}>
<Pressable onPress={()=>alert("Alert Title")}><Text>Logout</Text></Pressable>
</Menu.Item>
Basically what I am doing here is putting onPress to the Menu.Item and then same onPress to the child. You can use this approach for more complicated situations like adding button to the menu like this:
<Menu.Group title="Účet">
<Menu.Item onPress={() => console.log('log')}>
<Button colorScheme="red" onPress={() => console.log('log')} leftIcon={<Icon size="s" as={<MaterialIcons name='logout' />} />}>
Logout
</Button>
</Menu.Item>
</Menu.Group>
I'd like to know what are the data I'm working with, when using react-admin. (see them in the console to help debug)
For instance, when I'm working with a List:
import React from 'react';
import { Datagrid, List, TextField } from 'react-admin';
import { ListProps } from '../../types/admin/ListProps';
const ProductList = (props: ListProps): JSX.Element => {
console.log('ProductList.props', props);
return (
<List
{...props}
sort={{
field: 'titleEN',
order: 'DESC',
}}
>
<Datagrid rowClick="edit">
<TextField source="title" />
<TextField source="titleEN" label={'Title (EN)'} />
<TextField source="titleFR" label={'Title (FR)'} />
{/*<ArrayField source="images"><SingleFieldList><ChipField source="id" /></SingleFieldList></ArrayField>*/}
{/*<ReferenceArrayField source="imagesIds" reference="images"><TextField source="id" /></ReferenceArrayField>*/}
<TextField source="customer.label" label={'Customer'} />
<TextField source="price" />
</Datagrid>
</List>
);
};
export default ProductList;
How can I do that? I haven't found anything in the official doc https://marmelab.com/react-admin/List.html
This kind of logging can be displayed through the Data Provider. See https://marmelab.com/react-admin/DataProviders.html
For instance, with https://github.com/marcantoine/ra-data-graphql-prisma data provider, one such implementation could be https://github.com/UnlyEd/ra-data-graphql-prisma/commit/4031c5c3f2e97c479a9714df56da06653a908444
When using a custom field as a child of Datagrid, there appears to be no way to style the column header.
Specifically, I would like to add a left margin to the column header text.
The docs say to use headerClassName, but this has no effect when used with a custom component.
import React from 'react';
import { List, Datagrid, TextField } from 'react-admin';
const TextField = ({ source, record = {} }) => <span>{record[source]}</span>;
export const UserList = (props) => (
<List {...props}>
<Datagrid>
<TextField source="lastName" label="Last Name" />
</Datagrid>
</List>
);
In the code sample, how can I add style to the Last Name column header?
You can use CSS API: https://marmelab.com/react-admin/List.html#the-datagrid-component
Tip: If you want to override the header and cell styles independently for each column, use the headerClassName and cellClassName props in components. For instance, to hide a certain column on small screens:
Example from documentation:
import { withStyles } from '#material-ui/core/styles';
const styles = theme => ({
hiddenOnSmallScreens: {
[theme.breakpoints.down('md')]: {
display: 'none',
},
},
});
const PostList = ({ classes, ...props }) => (
<List {...props}>
<Datagrid>
<TextField source="id" />
<TextField source="title" />
<TextField
source="views"
headerClassName={classes.hiddenOnSmallScreens}
cellClassName={classes.hiddenOnSmallScreens}
/>
</Datagrid>
</List>
);
export default withStyles(styles)(PostList);
I am using react elements components in my react-native application.
import React,{ Component } from 'react';
import { Field,reduxForm } from 'redux-form';
import { Text,Input } from 'react-native-elements';
import { View,Button } from 'react-native';
import {Icon,CheckBox} from 'react-native-elements';
const renderField=({label,keyboardType,name,icon,iconType,input:{onChange,...restInput}}) => {
return(
<View style={{flexDirection:'row'}}>
<Input onChangeText={onChange} {...restInput} keyboardType={keyboardType} placeholder={label} inputContainerStyle={{borderWidth:2,borderColor:'lightgrey',borderRadius:20}} inputStyle={{color:'grey'}} leftIcon={<Icon size={25} type={iconType} name={icon} color="grey" />} errorStyle={{fontSize:15}} errorMessage="error" />
</View>
)
}
const checkBoxField=({label,keyboardType,name}) => {
var val=true;
return(
<View >
<View style={{flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
<Text style={{fontSize:18}}>{label}</Text>
<CheckBox title='Male' checkedIcon='dot-circle-o' uncheckedIcon='circle-o' containerStyle={{backgroundColor:'transparent',borderWidth:0,padding:0}} textStyle={{fontSize:18}} />
<CheckBox title='Female' checkedIcon='dot-circle-o' uncheckedIcon='circle-o' containerStyle={{backgroundColor:'transparent',borderWidth:0,padding:0}} textStyle={{fontSize:18}} />
</View>
<View><Text style={{fontSize:15,color:'red'}}>error</Text></View>
</View>
)
}
const submit = values => {
console.log('submitting form', values)
}
const RegisterForm=props => {
const {handleSubmit}=props;
return(
<View style={{flex:1,flexDirection:'column',margin:20,justifyContent:'flex-start',alignItems:'center'}}>
<Field label="Username" component={renderField} name="username" icon="user" iconType="font-awesome" />
<Field label="Email" component={renderField} name="email" icon="email" iconType="zocial" />
<Field label="Gender" component={checkBoxField} name="gender" />
<Button title='SUBMIT' onPress={handleSubmit(submit)} />
</View>
)
}
const Register=reduxForm({
form:'register',
})(RegisterForm);
export default Register;
in the above code I am using redux form in my react-native application,by passing onChange() I can retrieve values of text input,but how can I retrieve the values of a radio button?currently the form contains text input values only,I need to add radio button values also. If the user select one value in the radio button I need to unselect other radio button how it will be possible?
You can use react-native-radio-input.
Its very simple to use.
import RadioGroup,{Radio} from "react-native-radio-input";
.
.
.
//Receive the checked value (ES6 syntax)
getChecked = (value) => {
// value = our checked value
alert(value)
}
<RadioGroup getChecked={this.getChecked}>
<Radio iconName={"lens"} label={"The first option"} value={"A"} />
<Radio iconName={"lens"} label={"The first option"} value={"B"} />
<Radio iconName={"lens"} label={"I need numbers"} value={1} />
<Radio label={"Is IconName Optional?"} value={"Yes"} />
<Radio label={"Show Sentence Value"} value={"This is a Sentence"} />
</RadioGroup>
.
.
I have problem with nativebase Footer
I have Container and if I include MyFooter, it give me this error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
// main.js
import MyFooter from './MyFooter';
...
<Container>
<MyHeader title="Оплаты" />
<Content></Content>
<MyFooter />
</Container>
And Footer component
// MyFooter.js
const MyFooter = props => {
return (
<Footer>
<FooterTab>
<Button vertical active>
<Text>Info</Text>
</Button>
<Button vertical >
<Text>Remove</Text>
</Button>
</FooterTab>
</Footer>
);
}
export default MyFooter;
But if I change render method of MyFooter like this:
// MyFooter.js
return (
<View>
<Text>
Test
</Text>
</View>
)
So problem not in export/import, because with another render in MyFooter all work perfectly.
Can anybody help with this, please?
Answer - import { Text, Footer, FooterTab, Button, Icon } from 'react-native'; ('react-native' instead 'native-base')
Is this your MyFooter component try to export your component first export default MyFooter like these following:
const MyFooter = () => (
<Footer>
<FooterTab>
<Button vertical active>
<Icon name="information" />
<Text>Инфо</Text>
</Button>
<Button vertical >
<Icon name="add" />
<Text>Оплаты</Text>
</Button>
<Button vertical >
<Icon name="remove" />
<Text>Снятия</Text>
</Button>
</FooterTab>
</Footer>
);
export default MyFooter;
If you pasted your code exactly as is, then you're missing your closing brace after your return statement in MyFooter.js