style component theme

[fobbyal]

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

• We currently use yarn and not npm
• After installation 'yarn storybook' will launch storybook that can be used for demo and development.
• when you commit you need to use https://github.com/commitizen/cz-cli to enable auto release. Visit https://github.com/semantic-release/semantic-release to see how the auto publish is triggered.
• ci server is here https://circleci.com/gh/fobbyal/grid-tools/tree/master

Specification

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

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.

[fraindz]

@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]

@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

grid-tools/src/stories/flex/flex.stories.js

Lines 69 to 83 in 64ef1f2

	<GridToolContext.Provider value={{ debug: true }}>
	<Grid
	data={data}
	headers={debugHeaders}
	isEditable
	editMode="cell"
	{...createControlledEditProps({ data, setData, processEdit })}
	render={flexGridRenderer({
	headerRowHeight: 60,
	width: 1100,
	height: 400,
	autoFixColByKey: true,
	})}
	/>
	</GridToolContext.Provider>

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]

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