import * as React from 'react' ; import { memo , FC } from 'react' ; import PropTypes from 'prop-types' ; import get from 'lodash/get' ; import { ChoicesProps , useChoices , useRecordContext } from 'ra-core' ; import { Typography , TypographyProps } from '@material-ui/core' ; import sanitizeFieldRestProps from './sanitizeFieldRestProps' ; import { PublicFieldProps , InjectedFieldProps , fieldPropTypes } from './types' ; example example example example example example export const SelectField = memo ( props => { const { className , emptyText , source , choices , optionValue , optionText , translateChoice , ... rest } = props ; const record = useRecordContext ( props ) ; const value = get ( record , source ) ; const { getChoiceText , getChoiceValue } = useChoices ( { optionText , optionValue , translateChoice , } ) ; const choice = choices . find ( choice => getChoiceValue ( choice ) === value ) ; if ( ! choice ) { return emptyText ? ( < Typography component = "span" variant = "body2" className = { className } { ... sanitizeFieldRestProps ( rest ) } > { emptyText } < /Typography>) : null; } let choiceText = getChoiceText ( choice ) ; return ( < Typography component = "span" variant = "body2" className = { className } { ... sanitizeFieldRestProps ( rest ) } > { choiceText } < /Typography>); } ) ; SelectField . defaultProps = { optionText : 'name' , optionValue : 'id' , translateChoice : true , } ; SelectField . defaultProps = { addLabel : true , } ; SelectField . propTypes = { ... Typography . propTypes , ... fieldPropTypes , choices : PropTypes . arrayOf ( PropTypes . object ) . isRequired , optionText : PropTypes . oneOfType ( [ PropTypes . string , PropTypes . func , PropTypes . element , ] ) , optionValue : PropTypes . string , translateChoice : PropTypes . bool , } ; export interface SelectFieldProps extends ChoicesProps , PublicFieldProps , InjectedFieldProps , TypographyProps { } SelectField . displayName = 'SelectField' ; export default SelectField ;