So i want to pass my custom onChange function to my custom plugin in ReactJS with devextreme grid.
I have my searchPanel override like this:
import { withComponents } from '@devexpress/dx-react-core';
import { SearchPanel as SearchPanelBase } from '@devexpress/dx-react-grid';
import { SearchPanelInput as Input } from './SearchPanelInputBase';
export const SearchPanel = withComponents({ Input })(SearchPanelBase);
and then my searchPanelInputBase
import * as React from 'react';
import * as PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Input from '@material-ui/core/Input';
import InputAdornment from '@material-ui/core/InputAdornment';
import Search from '@material-ui/icons/Search';
import { Switch } from '@material-ui/core';
import StoreUsers from '../store/StoreUsers';
const styles = theme => ({
root: {
display: 'flex',
alignItems: 'center',
color: theme.palette.action.active,
},
flexSpaced: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
width: '100%',
}
});
let getActives = false
const SearchPanelInputBase = ({
myCustomFunctionFromProps, classes, onValueChange, value, getMessage, props, ...restProps
}) => (
<div className={classes.flexSpaced}>
<Switch
onChange={() => myCustomFunctionFromProps}
/>
<Input
onChange={e => onValueChange(e.target.value)}
value={value}
type="text"
placeholder={getMessage('searchPlaceholder')}
{...restProps}
startAdornment={(
<InputAdornment position="start">
<Search />
</InputAdornment>
)}
/>
</div>
);
SearchPanelInputBase.propTypes = {
myCustomFunctionFromProps: PropTypes.func.isRequired,
onValueChange: PropTypes.func.isRequired,
value: PropTypes.string,
getMessage: PropTypes.func.isRequired,
};
SearchPanelInputBase.defaultProps = {
value: '',
};
export const SearchPanelInput = withStyles(styles)(SearchPanelInputBase);
Finally i call in where i want like this
<SearchPanel
myCustomFunctionFromProps={() => this.myCustomFunctionFromProps}
/>
But this is not working, my prop types say the function is undefined, i suspect the props are not spreading correctly but i do not know how to override the other component
EDIT:
my function
myCustomFunctionFromProps = () => console.log('lel')
from How to send custom props to my custom searchPanel from devExtreme
No comments:
Post a Comment