Skip to content

Instantly share code, notes, and snippets.

@tomaash
Created February 28, 2019 16:34
Show Gist options
  • Save tomaash/0c9b2f6dadf712c7229914facc00f4c1 to your computer and use it in GitHub Desktop.
Save tomaash/0c9b2f6dadf712c7229914facc00f4c1 to your computer and use it in GitHub Desktop.
inverted boolean input for react-admin (does not work XD)
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