Merge pull request #933 from jbetancur/feature/fix-theme-inheritance

createTheme | createStyle should allow inheriting default themes
jbetancur · Oct 6, 2021 · 2c89db7 · 2c89db7
2 parents ec2b161 + fd0b278
commit 2c89db7
Show file tree

Hide file tree

Showing 8 changed files with 790 additions and 754 deletions.
diff --git a/package.json b/package.json
@@ -42,38 +42,38 @@
   "devDependencies": {
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
-    "@storybook/addon-a11y": "^6.3.8",
-    "@storybook/addon-essentials": "^6.3.8",
-    "@storybook/addon-storysource": "^6.3.8",
-    "@storybook/addons": "^6.3.8",
-    "@storybook/react": "^6.3.8",
-    "@storybook/theming": "^6.3.8",
-    "@testing-library/react": "^12.1.1",
+    "@storybook/addon-a11y": "^6.3.9",
+    "@storybook/addon-essentials": "^6.3.9",
+    "@storybook/addon-storysource": "^6.3.9",
+    "@storybook/addons": "^6.3.9",
+    "@storybook/react": "^6.3.9",
+    "@storybook/theming": "^6.3.9",
+    "@testing-library/react": "^12.1.2",
     "@types/faker": "^5.5.8",
     "@types/jest": "^27.0.2",
     "@types/lodash-es": "^4.17.5",
     "@types/lodash.orderby": "^4.6.6",
-    "@types/node": "^16.10.1",
-    "@types/react": "^17.0.24",
+    "@types/node": "^16.10.3",
+    "@types/react": "^17.0.27",
     "@types/react-dom": "^17.0.9",
     "@types/styled-components": "^5.1.14",
-    "@typescript-eslint/eslint-plugin": "^4.32.0",
-    "@typescript-eslint/parser": "^4.32.0",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
     "axios": "^0.21.4",
     "babel-eslint": "^10.1.0",
     "codecov": "^3.8.3",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jest": "^24.4.2",
+    "eslint-plugin-jest": "^24.5.2",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.26.0",
+    "eslint-plugin-react": "^7.26.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "faker": "^5.5.3",
     "gh-pages": "^3.2.3",
-    "jest": "^27.2.2",
+    "jest": "^27.2.4",
     "jest-styled-components": "^7.0.5",
     "jest-watch-typeahead": "^0.6.4",
     "lodash-es": "^4.17.21",
@@ -84,7 +84,7 @@
     "react-app-polyfill": "^2.0.0",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
-    "rollup": "^2.57.0",
+    "rollup": "^2.58.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-terser": "^7.0.2",

diff --git a/src/DataTable/styles.ts b/src/DataTable/styles.ts
@@ -216,8 +216,12 @@ export const defaultStyles = (theme: Theme): TableStyles => ({
 	},
 });
 
-export const createStyles = (customStyles: TableStyles = {}, themeName: Themes = 'default'): TableStyles => {
-	const themeType = defaultThemes[themeName] ? themeName : 'default';
+export const createStyles = (
+	customStyles: TableStyles = {},
+	themeName = 'default',
+	inherit: Themes = 'default',
+): TableStyles => {
+	const themeType = defaultThemes[themeName] ? themeName : inherit;
 
 	return merge(defaultStyles(defaultThemes[themeType]), customStyles);
 };
diff --git a/src/DataTable/themes.ts b/src/DataTable/themes.ts
@@ -5,42 +5,45 @@ type ThemeMapping = {
 	[propertyName: string]: Theme;
 };
 
-export const defaultThemes: ThemeMapping = {
-	default: {
-		text: {
-			primary: 'rgba(0, 0, 0, 0.87)',
-			secondary: 'rgba(0, 0, 0, 0.54)',
-			disabled: 'rgba(0, 0, 0, 0.38)',
-		},
-		background: {
-			default: '#FFFFFF',
-		},
-		context: {
-			background: '#e3f2fd',
-			text: 'rgba(0, 0, 0, 0.87)',
-		},
-		divider: {
-			default: 'rgba(0,0,0,.12)',
-		},
-		button: {
-			default: 'rgba(0,0,0,.54)',
-			focus: 'rgba(0,0,0,.12)',
-			hover: 'rgba(0,0,0,.12)',
-			disabled: 'rgba(0, 0, 0, .18)',
-		},
-		selected: {
-			default: '#e3f2fd',
-			text: 'rgba(0, 0, 0, 0.87)',
-		},
-		highlightOnHover: {
-			default: '#EEEEEE',
-			text: 'rgba(0, 0, 0, 0.87)',
-		},
-		striped: {
-			default: '#FAFAFA',
-			text: 'rgba(0, 0, 0, 0.87)',
-		},
+const defaultTheme = {
+	text: {
+		primary: 'rgba(0, 0, 0, 0.87)',
+		secondary: 'rgba(0, 0, 0, 0.54)',
+		disabled: 'rgba(0, 0, 0, 0.38)',
+	},
+	background: {
+		default: '#FFFFFF',
+	},
+	context: {
+		background: '#e3f2fd',
+		text: 'rgba(0, 0, 0, 0.87)',
+	},
+	divider: {
+		default: 'rgba(0,0,0,.12)',
+	},
+	button: {
+		default: 'rgba(0,0,0,.54)',
+		focus: 'rgba(0,0,0,.12)',
+		hover: 'rgba(0,0,0,.12)',
+		disabled: 'rgba(0, 0, 0, .18)',
 	},
+	selected: {
+		default: '#e3f2fd',
+		text: 'rgba(0, 0, 0, 0.87)',
+	},
+	highlightOnHover: {
+		default: '#EEEEEE',
+		text: 'rgba(0, 0, 0, 0.87)',
+	},
+	striped: {
+		default: '#FAFAFA',
+		text: 'rgba(0, 0, 0, 0.87)',
+	},
+};
+
+export const defaultThemes: ThemeMapping = {
+	default: defaultTheme,
+	light: defaultTheme,
 	dark: {
 		text: {
 			primary: '#FFFFFF',
@@ -78,8 +81,13 @@ export const defaultThemes: ThemeMapping = {
 	},
 };
 
-export function createTheme<T>(name: Themes = 'default', customTheme?: T): Theme {
-	defaultThemes[name] = merge(defaultThemes.default, customTheme || {});
+export function createTheme<T>(name = 'default', customTheme?: T, inherit: Themes = 'default'): Theme {
+	if (!defaultThemes[name]) {
+		defaultThemes[name] = merge(defaultThemes[inherit], customTheme || {});
+	}
+
+	// allow tweaking default or light themes if the theme passed in matches
+	defaultThemes[name] = merge(defaultThemes[inherit], customTheme || {});
 
 	return defaultThemes[name];
 }
diff --git a/src/DataTable/types.ts b/src/DataTable/types.ts
@@ -129,7 +129,7 @@ export interface TableColumn<T> extends TableColumnBase {
 	cell?: (row: T, rowIndex: number, column: TableColumn<T>, id: string | number) => React.ReactNode;
 	conditionalCellStyles?: ConditionalStyles<T>[];
 	format?: Format<T> | undefined;
-	selector?: string | Selector<T>;
+	selector?: Selector<T>;
 	sortFunction?: ColumnSortFunction<T>;
 }
 
@@ -283,7 +283,7 @@ type ThemeStriped = {
 	text: string;
 };
 
-export type Themes = 'default' | 'dark' | string | undefined;
+export type Themes = 'default' | 'light' | 'dark';
 
 export interface Theme {
 	text: ThemeText;

diff --git a/stories/DataTable/ThemeCustom.stories.js b/stories/DataTable/ThemeCustom.stories.js
@@ -2,31 +2,36 @@ import React from 'react';
 import data from '../constants/sampleMovieData';
 import DataTable, { createTheme } from '../../src/index';
 
-createTheme('solarized', {
-	text: {
-		primary: '#268bd2',
-		secondary: '#2aa198',
-	},
-	background: {
-		default: '#002b36',
-	},
-	context: {
-		background: '#cb4b16',
-		text: '#FFFFFF',
-	},
-	divider: {
-		default: '#073642',
-	},
-	button: {
-		default: '#2aa198',
-		hover: 'rgba(0,0,0,.08)',
-		focus: 'rgba(255,255,255,.12)',
-		disabled: 'rgba(255, 255, 255, .34)',
-	},
-	sortFocus: {
-		default: '#2aa198',
-	},
-});
+// createTheme creates a new theme named solarized that overrides the build in dark theme
+createTheme(
+	'solarized',
+	{
+		text: {
+			primary: '#268bd2',
+			secondary: '#2aa198',
+		},
+		background: {
+			default: '#002b36',
+		},
+		context: {
+			background: '#cb4b16',
+			text: '#FFFFFF',
+		},
+		divider: {
+			default: '#073642',
+		},
+		button: {
+			default: '#2aa198',
+			hover: 'rgba(0,0,0,.08)',
+			focus: 'rgba(255,255,255,.12)',
+			disabled: 'rgba(255, 255, 255, .34)',
+		},
+		sortFocus: {
+			default: '#2aa198',
+		},
+	},
+	'dark',
+);
 
 const columns = [
 	{

diff --git a/stories/customStyles.stories.mdx b/stories/customStyles.stories.mdx
@@ -37,4 +37,4 @@ const customStyles = {
 const MyComponent = () => <DataTable title="Arnold Movies" columns={columns} customStyles={customStyles} />;
 ```
 
-View [styles.js](https://github.com/jbetancur/react-data-table-component/blob/master/src/DataTable/styles.ts) for a detailed catalog of RDT styles that you can override or extend using css-in-js objects.
+View [styles.ts](https://github.com/jbetancur/react-data-table-component/blob/master/src/DataTable/styles.ts) for a detailed catalog of RDT styles that you can override or extend using css-in-js objects.
diff --git a/stories/theming.stories.mdx b/stories/theming.stories.mdx
@@ -4,16 +4,18 @@ import { Meta } from '@storybook/addon-docs';
 
 # Defining Your Own Theme
 
-By default RDT comes with a `light` and `dark` theme, however, you can create your very own theme using the `createTheme` helper or tweak the existing built in `light` and `dark` themes.
+By default RDT comes with a `light` and `dark` theme that can be set on the `theme` property, however, you can create your very own theme using the `createTheme` helper or tweak the existing built in `light` and `dark` themes.
 
-Refer to [themes.js](https://github.com/jbetancur/react-data-table-component/blob/master/src/DataTable/themes.js) for properties you can use to create your own color theme.
+Refer to [themes.ts](https://github.com/jbetancur/react-data-table-component/blob/master/src/DataTable/themes.ts) for properties you can use to create your own color theme.
 
-Let's create a `solarized` theme:
+# Custom Solarized Theme
+
+Let's create a `solarized` theme that inherits from the build in `dark` theme:
 
 ```js
 import DataTable, { createTheme } from 'react-data-table-component';
 
-// createTheme inherits from the default `light` theme.
+// createTheme creates a new theme named solarized that overrides the build in dark theme
 createTheme('solarized', {
   text: {
     primary: '#268bd2',
@@ -34,6 +36,29 @@ createTheme('solarized', {
     hover: 'rgba(0,0,0,.08)',
     disabled: 'rgba(0,0,0,.12)',
   },
+}, 'dark');
+
+const MyComponent = () => (
+  <DataTable
+    title="Arnold Movies"
+    columns={columns}
+    theme="solarized"
+  />
+);
+```
+
+## Tweaking the built in light and dark themes
+
+You can also take an existing theme and tweak the colors without much effort:
+
+```js
+import DataTable, { createTheme } from 'react-data-table-component';
+
+// createTheme creates a new theme named solarized that overrides the build in dark theme
+createTheme('dark', {
+  background: {
+    default: 'transparent',
+  },
 });
 
 const MyComponent = () => (