From bc385413e671a9d17f6196e4986d2ae0e4ccddc9 Mon Sep 17 00:00:00 2001 From: Jack Reed <phillipjreed@gmail.com> Date: Wed, 29 Apr 2020 08:03:02 -0600 Subject: [PATCH] Adds the ability to define a custom jss prefix for better application namespacing and removed css-ns dependency --- package.json | 1 - src/components/App.js | 15 ++++++++++++--- src/config/css-ns.js | 10 +++++----- src/config/settings.js | 1 + src/containers/App.js | 1 + 5 files changed, 19 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 07dc95cbd..ebd3fdb19 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,6 @@ "@researchgate/react-intersection-observer": "^1.0.0", "classnames": "^2.2.6", "clsx": "^1.0.4", - "css-ns": "^1.2.2", "deepmerge": "^3.3.0", "dompurify": "^1.0.11", "downshift": "^3.2.10", diff --git a/src/components/App.js b/src/components/App.js index 1a125a4c1..2f7c67313 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,7 +1,7 @@ import React, { Component, lazy, Suspense } from 'react'; import PropTypes from 'prop-types'; import { - ThemeProvider, StylesProvider, createMuiTheme, jssPreset, + ThemeProvider, StylesProvider, createMuiTheme, jssPreset, createGenerateClassName, } from '@material-ui/core/styles'; import Fullscreen from 'react-full-screen'; import { create } from 'jss'; @@ -52,9 +52,13 @@ export class App extends Component { */ render() { const { - isFullscreenEnabled, setWorkspaceFullscreen, theme, translations, + classPrefix, isFullscreenEnabled, setWorkspaceFullscreen, theme, translations, } = this.props; + const generateClassName = createGenerateClassName({ + productionPrefix: classPrefix, + }); + Object.keys(translations).forEach((lng) => { this.i18n.addResourceBundle(lng, 'translation', translations[lng], true, true); }); @@ -69,7 +73,10 @@ export class App extends Component { <ThemeProvider theme={createMuiTheme(theme)} > - <StylesProvider jss={create({ plugins: [...jssPreset().plugins, rtl()] })}> + <StylesProvider + jss={create({ plugins: [...jssPreset().plugins, rtl()] })} + generateClassName={generateClassName} + > <AuthenticationSender /> <AccessTokenSender /> <Suspense @@ -87,6 +94,7 @@ export class App extends Component { } App.propTypes = { + classPrefix: PropTypes.string, isFullscreenEnabled: PropTypes.bool, language: PropTypes.string.isRequired, setWorkspaceFullscreen: PropTypes.func.isRequired, @@ -96,5 +104,6 @@ App.propTypes = { }; App.defaultProps = { + classPrefix: '', isFullscreenEnabled: false, }; diff --git a/src/config/css-ns.js b/src/config/css-ns.js index 77ad4b4c9..5e551b7ce 100644 --- a/src/config/css-ns.js +++ b/src/config/css-ns.js @@ -1,10 +1,10 @@ -import { createCssNs } from 'css-ns'; - +import settings from './settings' +import flatten from 'lodash/flatten'; /** * export ns - sets up css namespacing for everything to be `mirador-` */ -const ns = className => createCssNs({ - namespace: 'mirador', -})(className); +const ns = classNames => flatten([classNames]).map( + className => [settings.classPrefix, className].join('-') +).join(' '); export default ns; diff --git a/src/config/settings.js b/src/config/settings.js index 814b2c4ef..13f64480c 100644 --- a/src/config/settings.js +++ b/src/config/settings.js @@ -214,6 +214,7 @@ export default { annotations: { filteredMotivations: ['oa:commenting', 'sc:painting', 'commenting'], }, + classPrefix: 'mirador', displayAllAnnotations: false, // Configure if annotations to be displayed on the canvas by default when fetched resourceHeaders: {}, // Headers to send with IIIF Presentation API resource requests translations: { // Translations can be added to inject new languages or override existing labels diff --git a/src/containers/App.js b/src/containers/App.js index 8c11f4b23..855b83c21 100644 --- a/src/containers/App.js +++ b/src/containers/App.js @@ -13,6 +13,7 @@ import { App } from '../components/App'; */ const mapStateToProps = state => ( { + classPrefix: state.config.classPrefix, isFullscreenEnabled: state.workspace.isFullscreenEnabled, language: state.config.language, theme: getTheme(state), -- GitLab