fobbyal / grid-tools

Tools for creating editable grids in react
MIT License
1 stars 6 forks source link

style component theme #26

Open fobbyal opened 6 years ago

fobbyal commented 6 years ago

Project Background

This is a project that utilized react-virtualized, downshft,react-popper to create a excel-like react component. ( without the function stuff)

Environment

Specification

Header styles are currently hardcoded. We want to make it so that we can customize the header render first. image

We want to make it customizable via Context Api. This project currently does support hooks feel free to use useContext. Utilize existing src/context.js to handle theme based states.

Grid Renders

We currently support 2 types of grids that are rendered by src/flexRender.js and virtualized/virtualizedRenderer.js. Theses are demoed by the following storybook links respectively. We need the style theme to work for both type of renders. image

fraindz commented 4 years ago

@fobbyal BasicColHeader appears to be the parent component that is extended by different components. ColHeader for flexRenderer & ColHeaderBase for virtualized. There are also other components like ScrollingHeaderRow which appear to be using hardcoded styles though these appear to be for specific cases.

In case of virtualizedRender, I also see Provider component that wraps the entire grid. The structure appears in place to provide default header config through this component. I could not find similar provider component for flexRenderer though. Might need to add a Provider for flexRenderer.

Let me know your thoughts on above analysis.

fobbyal commented 4 years ago

@fraindz You are correct about the analysis. There are places in both flexRender and virtualizedRender to supply custom render functions for the Headers. However that requires the implementation of the whole render, we often just want some styling changed. Our goal here is to have a Provider that is available to code that are rendering the grid so the styling can be controlled from outside of this library. please see the storybook example at https://github.com/fobbyal/grid-tools/blob/64ef1f2aad06faab52029c90966492d1638a01cf/src/stories/flex/flex.stories.js#L69-L83

By specifying the debug:true. The gird-tools code-based will log more information when rendering. What we essentially want is to add more props to GridToolContext so we can control the styles of the colHeaders without specifying complex render functions.

fraindz commented 4 years ago

@fobbyal That helps. I will make changes and create PR.