react-admin-base-bootstrap 0.5.1 → 0.5.2

package/lib/esm/Components/ThemeProvider.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare function useTheme(): any;
+export declare function useAllThemes(): any;
+export default function ThemeProvider({ themes, defaultTheme, children }: {
+    themes: any;
+    defaultTheme: any;
+    children: any;
+}): JSX.Element;

package/lib/esm/Components/ThemeProvider.js

@@ -0,0 +1,37 @@
+import React, { createContext, useContext, useEffect, useMemo, useReducer } from "react";
+import { useApp } from "react-admin-base";
+const ThemeContext = createContext(null);
+const AllThemesContext = createContext(null);
+export function useTheme() {
+    return useContext(ThemeContext);
+}
+export function useAllThemes() {
+    return useContext(AllThemesContext);
+}
+function useLocalStorage(key) {
+    const app = useApp();
+    const _key = app.id + '_' + key;
+    const previousValue = useMemo(() => localStorage.getItem(_key), [_key]);
+    return useReducer((_, newValue) => {
+        localStorage.setItem(_key, newValue);
+        return newValue;
+    }, previousValue);
+}
+export default function ThemeProvider({ themes, defaultTheme, children }) {
+    const state = useLocalStorage('theme');
+    const [theme, setTheme] = state;
+    const rTheme = theme || defaultTheme || 'light';
+    useEffect(function () {
+        const promise = (themes[rTheme] || themes[defaultTheme]).css()
+            .then(css => {
+            css.default.use();
+            return css;
+        });
+        return function () {
+            promise.then(css => css.default.unuse());
+        };
+    }, [theme]);
+    const val = useMemo(() => [rTheme, setTheme], [rTheme, setTheme]);
+    return React.createElement(AllThemesContext.Provider, { value: themes },
+        React.createElement(ThemeContext.Provider, { value: val }, children));
+}

package/lib/esm/index.d.ts

@@ -16,4 +16,5 @@ import CheckBox from './Components/CheckBox';
 import ErrorBoundary from './Components/ErrorBoundary';
 import { useMenuState, useIsMobile } from './Components/MenuState';
 import TopProgressBar from './Components/TopProgressBar';
-export { useIsMobile, useMenuState, TopProgressBar, CRUD, ModalEntityEditor, CRUDActions, Relative, ApiSelect, Preview, ExcelExportButton, ExternalLoginButton, SingleFilePicker, MultiFilePicker, ImagePicker, BootstrapTable, EntityEditor, GoToTop, Validator, ValueValidator, ValidationErrors, LoadingButton, BootstrapDataTable, IdColumn, Column, ActionsColumn, Actions, useDataTableContext, LanguageProvider, useLanguage, LanguageSwitcher, ErrorBoundary, CheckBox };
+import ThemeProvider, { useTheme, useAllThemes } from './Components/ThemeProvider';
+export { ThemeProvider, useTheme, useAllThemes, useIsMobile, useMenuState, TopProgressBar, CRUD, ModalEntityEditor, CRUDActions, Relative, ApiSelect, Preview, ExcelExportButton, ExternalLoginButton, SingleFilePicker, MultiFilePicker, ImagePicker, BootstrapTable, EntityEditor, GoToTop, Validator, ValueValidator, ValidationErrors, LoadingButton, BootstrapDataTable, IdColumn, Column, ActionsColumn, Actions, useDataTableContext, LanguageProvider, useLanguage, LanguageSwitcher, ErrorBoundary, CheckBox };

package/lib/esm/index.js

@@ -16,4 +16,5 @@ import CheckBox from './Components/CheckBox';
 import ErrorBoundary from './Components/ErrorBoundary';
 import { useMenuState, useIsMobile } from './Components/MenuState';
 import TopProgressBar from './Components/TopProgressBar';
-export { useIsMobile, useMenuState, TopProgressBar, CRUD, ModalEntityEditor, CRUDActions, Relative, ApiSelect, Preview, ExcelExportButton, ExternalLoginButton, SingleFilePicker, MultiFilePicker, ImagePicker, BootstrapTable, EntityEditor, GoToTop, Validator, ValueValidator, ValidationErrors, LoadingButton, BootstrapDataTable, IdColumn, Column, ActionsColumn, Actions, useDataTableContext, LanguageProvider, useLanguage, LanguageSwitcher, ErrorBoundary, CheckBox };
+import ThemeProvider, { useTheme, useAllThemes } from './Components/ThemeProvider';
+export { ThemeProvider, useTheme, useAllThemes, useIsMobile, useMenuState, TopProgressBar, CRUD, ModalEntityEditor, CRUDActions, Relative, ApiSelect, Preview, ExcelExportButton, ExternalLoginButton, SingleFilePicker, MultiFilePicker, ImagePicker, BootstrapTable, EntityEditor, GoToTop, Validator, ValueValidator, ValidationErrors, LoadingButton, BootstrapDataTable, IdColumn, Column, ActionsColumn, Actions, useDataTableContext, LanguageProvider, useLanguage, LanguageSwitcher, ErrorBoundary, CheckBox };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-admin-base-bootstrap",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -27,8 +27,8 @@
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^5.3.0",
-    "react-intl": "^5.21.0"
+    "react-intl": "^5.21.0",
+    "react-router-dom": "^5.3.0"
   },
   "dependencies": {
     "@emotion/react": "^11.5.0",
@@ -42,14 +42,15 @@
     "react-responsive": "^8.2.0",
     "react-select": "^5.2.1",
     "reactstrap": "^9.0.0",
+    "rewire": "^6.0.0",
     "sweetalert2": "^11.1.9"
   },
   "devDependencies": {
     "@types/react": "^17.0.34",
     "@types/react-router-dom": "^5.3.2",
-    "react-intl": "^5.21.0",
     "cross-env": "^7.0.3",
     "nodemon": "^2.0.14",
+    "react-intl": "^5.21.0",
     "typescript": "^4.4.4"
   }
 }

package/src/Components/ThemeProvider.tsx

@@ -0,0 +1,53 @@
+import React, { createContext, Dispatch, useContext, useEffect, useMemo, useReducer, useRef } from "react";
+import { useApp } from "react-admin-base";
+
+const ThemeContext = createContext(null as any);
+const AllThemesContext = createContext(null as any);
+
+export function useTheme() {
+	return useContext(ThemeContext);	
+}
+
+export function useAllThemes() {
+	return useContext(AllThemesContext);	
+}
+
+function useLocalStorage(key: string) : [string, Dispatch<string>] {
+	const app = useApp();
+	
+	const _key = app.id + '_' + key;
+	
+	const previousValue = useMemo(() => localStorage.getItem(_key), [_key]);
+	
+	return useReducer((_: string, newValue) => {
+		localStorage.setItem(_key, newValue);
+		return newValue;
+	}, previousValue);
+}
+
+export default function ThemeProvider({ themes, defaultTheme, children }) {
+	const state = useLocalStorage('theme');
+	const [ theme, setTheme ] = state;
+	
+	const rTheme = theme || defaultTheme || 'light';
+	
+	useEffect(function() {
+		const promise = (themes[rTheme] || themes[defaultTheme]).css()
+			.then(css => {
+				css.default.use();
+				return css;
+			});
+		
+		return function() {
+			promise.then(css => css.default.unuse());
+		};
+	}, [ theme ]);
+	
+	const val = useMemo(() => [rTheme, setTheme], [rTheme, setTheme]);
+	
+	return <AllThemesContext.Provider value={themes}>
+		<ThemeContext.Provider value={val}>
+			{ children }
+		</ThemeContext.Provider>
+	</AllThemesContext.Provider>;
+}

package/src/index.ts

@@ -17,8 +17,10 @@ import CheckBox from './Components/CheckBox';
 import ErrorBoundary from './Components/ErrorBoundary';
 import { useMenuState, useIsMobile } from './Components/MenuState';
 import TopProgressBar from './Components/TopProgressBar';
+import ThemeProvider, { useTheme, useAllThemes } from './Components/ThemeProvider';
 
 export {
+    ThemeProvider, useTheme, useAllThemes,
     useIsMobile, useMenuState,
     TopProgressBar,
     CRUD, ModalEntityEditor, CRUDActions,

package/watch.js

@@ -0,0 +1,58 @@
+
+const rewire = require('rewire');
+const webpackConfig = rewire('react-scripts/scripts/start');
+const oldConfigFactory = webpackConfig.__get__('configFactory');
+const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+const fs = require('fs');
+const path = require('path');
+
+webpackConfig.__set__('configFactory', function(env) {
+	const config = oldConfigFactory(env);
+	
+	// disable use modules outside of src
+	config.resolve.plugins = config.resolve.plugins.filter(plugin => !(plugin instanceof ModuleScopePlugin));
+	
+	// disable local node_modules/ path
+	config.resolve.modules.shift();
+	
+	// add aliased packages from /opt/packages
+	for (const alias of find_custom_packages('/opt/packages')){
+		config.resolve.alias[alias.name] = alias.path;
+	}
+
+	addLazyLoadingStyleLoader(config.module);
+	
+	console.log(config);
+	//process.exit(0);
+	
+	return config;
+});
+
+function* find_custom_packages(location) {
+	const dir = fs.opendirSync(location, { withFileTypes: true });
+	let dirent;
+	while ((dirent = dir.readSync()) !== null) {
+	  if (dirent.isSymbolicLink()) {
+		  yield {name: dirent.name, path: fs.realpathSync(path.join(location, dirent.name))};
+	  }
+	}
+	dir.closeSync();
+}
+
+function addLazyLoadingStyleLoader(config) {
+	const cssLoader = config.rules[1].oneOf[5];
+	
+	config.rules[1].oneOf.splice(5, 2, {
+		...cssLoader,
+		use: [
+			{
+				loader: cssLoader.use[0],
+				options: {
+					injectType: 'lazyStyleTag'
+				}
+			},
+			cssLoader.use[1],
+			cssLoader.use[2]
+		]
+	});
+}