Created
February 28, 2019 16:34
-
-
Save tomaash/0c9b2f6dadf712c7229914facc00f4c1 to your computer and use it in GitHub Desktop.
inverted boolean input for react-admin (does not work XD)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from 'react'; | |
import PropTypes from 'prop-types'; | |
import FormControlLabel from '@material-ui/core/FormControlLabel'; | |
import FormGroup from '@material-ui/core/FormGroup'; | |
import Switch from '@material-ui/core/Switch'; | |
import { addField, FieldTitle } from 'ra-core'; | |
const sanitizeRestProps = ({ | |
alwaysOn, | |
basePath, | |
component, | |
defaultValue, | |
formClassName, | |
initializeForm, | |
input, | |
isRequired, | |
label, | |
limitChoicesToValue, | |
locale, | |
meta, | |
options, | |
optionText, | |
optionValue, | |
record, | |
resource, | |
allowEmpty, | |
source, | |
textAlign, | |
translate, | |
translateChoice, | |
...rest | |
}) => rest | |
// NOTE: This could be theoretically used to display inverse value compared to data model, but it does not work | |
class InverseBooleanInput extends Component { | |
handleChange = (event, value) => { | |
this.props.input.onChange(!value) | |
}; | |
render() { | |
if (!this.props) return | |
console.log('props', this.props) | |
const { | |
className, | |
id, | |
input, | |
isRequired, | |
label, | |
source, | |
resource, | |
options, | |
fullWidth, | |
...rest | |
} = this.props; | |
if (!input) return <span /> | |
const { value, ...inputProps } = input; | |
const inversedValue = !value | |
return ( | |
<FormGroup className={className} {...sanitizeRestProps(rest)}> | |
<FormControlLabel | |
htmlFor={id} | |
control={ | |
<Switch | |
id={id} | |
color="primary" | |
checked={inversedValue} | |
onChange={this.handleChange} | |
{...inputProps} | |
{...options} | |
/> | |
} | |
label={ | |
<FieldTitle | |
label={label} | |
source={source} | |
resource={resource} | |
isRequired={isRequired} | |
/> | |
} | |
/> | |
</FormGroup> | |
); | |
} | |
} | |
InverseBooleanInput.propTypes = { | |
className: PropTypes.string, | |
id: PropTypes.string, | |
input: PropTypes.object, | |
isRequired: PropTypes.bool, | |
label: PropTypes.string, | |
resource: PropTypes.string, | |
source: PropTypes.string, | |
options: PropTypes.object, | |
}; | |
InverseBooleanInput.defaultProps = { | |
options: {}, | |
}; | |
export default addField(InverseBooleanInput); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment