Comments (11)
const enhancedWithRowData = ({ griddleKey }, data, callback) => {
const rowData = data.find((row, index) => index === griddleKey);
return callback({ rowData });
};
Can't find any solution so I apply my own solution
from griddle.
Possible Reason :
Passing store as a prop to a connected component is no longer supported. Instead, you may pass a custom context={MyContext} prop to both and . You may also pass {context : MyContext} as an option to connect.
Ref : https://github.com/reduxjs/react-redux/releases
from griddle.
Similar problem, since I updated react-redux to v6 I get this error: Error: Could not find "store" in the context of "Connect(Component)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React cont
with this code:
<ColumnDefinition
id="buttons"
title=" "
customComponent={griddleColumnExtendComponent(this.getButtonsComponent())}
/>
import { connect } from 'react-redux';
const rowDataSelector = (state: any, { griddleKey }: { griddleKey: string }) => state.get('data')
.find((rowMap: any) => rowMap.get('griddleKey') === griddleKey)
.toJSON();
export const griddleColumnExtendComponent = connect((state, props: any) => ({
rowData: rowDataSelector(state, props)
}));
from griddle.
any updates?
from griddle.
Is there any update?
from griddle.
@juniorzed what'd you end up going with as a solution?
from griddle.
Anyone has an answer on this one ?
tip
#761 is a must read
from griddle.
Interestingly the ability to pass a store as a prop was re-instated in react-redux v7.01
from griddle.
React-Redux v7 connect
actually returns an object and not a function or component anymore, like it is specified in this issue: reduxjs/react-redux#1300
So even with v7 straight passing the result of connect
to prop customComponent
will not work.
from griddle.
I know for the most won't be a solution, but in my case I proceeded with the following.
We had a scenario where we were enhancing one component with the rowData and some props provided by the parent component that was instantiating Griddle itself, as per code extracted below.
<Griddle
data={this.state.stateVariablesTableData}
// other code not relevant, removed for this extract
>
<RowDefinition>
<ColumnDefinition
title="Name"
id="name"
/>
<ColumnDefinition
title="Watch"
id="toggled"
customComponent={enhancedWithRowData(
this.props.onCheck,
this.props.onUncheck,
this.props.disabled
)(
ChooseVarComponent
)}
/>
and then
export const rowDataSelector = (state, { griddleKey }) => state
.get("data")
.find(rowMap => rowMap.get("griddleKey") === griddleKey)
.toJSON();
export const enhancedWithRowData = (onCheck, onUncheck, disabled) => connect((state, props) => ({
rowData: rowDataSelector(state, props),
onCheck,
onUncheck,
disabled
}));
This is where we were before to move to new react-redux, react and other libraries that have been upgraded.
At this stage the need I had was to have the rowData.name prop since this was used in the ChooseVarComponent to trigger an action in our redux store since this variable had to be listed or not.
What I ended up doing (not ideal, but still a solution for us) was to replicate the data required per cell, so the function that was building the data to be given to Griddle, as per below
convertToStateVariablesTableData () {
let tableData = [];
this.state.stateVariables.map(item => {
tableData.push({
name: item,
toggled: this.state.watchedVariables.includes(item)
});
});
this.setState({
stateVariablesTableData: tableData
});
}
has been modified in the following (this is the NOT efficient part since we have redundant information, but still, for now it address the problem and the information size on our side is negligible)
convertToStateVariablesTableData () {
let tableData = [];
this.state.stateVariables.map(item => {
tableData.push({
name: item,
toggled: {
status: this.state.watchedVariables.includes(item),
item: item
}
});
});
this.setState({ stateVariablesTableData: tableData });
}
so that we can import the customComponent as below
<ColumnDefinition
title="Watch"
id="toggled"
headerCssClassName="toggleHeaderClass"
customComponent={(props) => {
return (
<ChooseVarComponent
onCheck={this.props.onCheck}
onUncheck={this.props.onUncheck}
disabled={this.props.disabled}
{...props}
/>)}}
from griddle.
@juniorzed what'd you end up going with as a solution?
that was a temporary solution for me at that time like a year ago @followbl
from griddle.
Related Issues (20)
- Griddle ignoring Custom columnMeta and my custom LinkComponent. HOT 3
- Getting started example doesn't work HOT 2
- Incorrect docs example for custom filter component HOT 1
- Griddle columnMetaData not being used
- "Customization section" link in "Getting started" docs doesn't work if accessed directly via nav
- Cannot Filter on Nested Data using LocalPlugin HOT 1
- Need help maintaining Griddle HOT 8
- Directly Only Show Rows Per Page instead of whole settings component HOT 1
- add link in a row HOT 1
- No results found wording
- RowEnhancer Dynamic Content Causing Re-render HOT 1
- Use only the parts of lodash that are used HOT 1
- Question: package.lock and yarn.lock both exist HOT 1
- Storybook has a failing case on master HOT 2
- Leak of memory HOT 1
- How to set the filter text externally HOT 1
- Column headings should not be selectable on double-click
- `customComponent` of type `object` supplied to `ColumnDefinition`, expected `function`. in ColumnDefinition in new griddle-react HOT 1
- Financing HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from griddle.