0.4.2 - add scss styles

Add SCSS styles when the property `highighlight_selected == False`. This change make the cursor become normal if the grid elements are not selectable.

Author: cainmagi

Changelog.md

@@ -9,6 +9,7 @@
 #### :mega: New
 
 1. Add tests for passing an empty value to the `data` property.
+2. Add SCSS styles when the property `highighlight_selected == False`. This change make the cursor become normal if the grid elements are not selectable.
 
 #### :wrench: Fix
 

package.json

@@ -49,6 +49,7 @@
  "@plotly/webpack-dash-dynamic-import": "^1.2.0",
  "babel-eslint": "^10.1.0",
  "babel-loader": "^9.1.2",
+ "clsx": "^2.1.1",
  "copyfiles": "^2.1.1",
  "css-loader": "^6.8.1",
  "eslint": "^6.0.1",
@@ -59,6 +60,8 @@
  "react": "^17.0.2",
  "react-docgen": "^5.4.0",
  "react-dom": "^17.0.2",
+ "sass": "^1.80.7",
+ "sass-loader": "^16.0.3",
  "style-loader": "^3.3.3",
  "styled-jsx": "^4.0.1",
  "webpack": "^5.84.1",

src/lib/fragments/DashJsonGrid.module.scss

@@ -0,0 +1,26 @@
+.js-grid-container {
+ overflow-x: auto;
+ width: 100%;
+
+ & > div > table {
+ margin-bottom: 0;
+
+ :global {
+ tr:not(.highlight) {
+ background-color: transparent;
+
+ &:nth-child(2n) {
+ background-color: transparent;
+ }
+ }
+ }
+ }
+
+ &.no-select {
+ & > div:global(.json-grid-container) {
+ :global(.obj) {
+ cursor: initial;
+ }
+ }
+ }
+}

src/lib/fragments/DashJsonGrid.react.js

@@ -13,12 +13,15 @@
 
 import React, {Component} from "react";
 import {type} from "ramda";
+import clsx from "clsx/lite";
 
 import JSONGrid from "@redheadphone/react-json-grid";
 
 import {propTypes, defaultProps} from "../components/DashJsonGrid.react";
 import {isArray, sanitizeData} from "../utils";
 
+import styles from "./DashJsonGrid.module.scss";
+
 /**
  * DashJsonGrid is a Dash porting version for the React component:
  * `react-json-grid/JSONGrid`
@@ -144,7 +147,11 @@ export default class DashJsonGrid extends Component {
  return (
  <div
  id={id}
- className={class_name}
+ className={clsx(
+ styles["js-grid-container"],
+ !highlight_selected && styles["no-select"],
+ class_name
+ )}
  style={style}
  data-dash-is-loading={
  (loading_state && loading_state.is_loading) || undefined

webpack.config.js

@@ -1,113 +1,142 @@
-const path = require('path');
-const webpack = require('webpack');
-const WebpackDashDynamicImport = require('@plotly/webpack-dash-dynamic-import');
-const packagejson = require('./package.json');
+const path = require("path");
+const webpack = require("webpack");
+const WebpackDashDynamicImport = require("@plotly/webpack-dash-dynamic-import");
+const packagejson = require("./package.json");
 
-const dashLibraryName = packagejson.name.replace(/-/g, '_');
+const dashLibraryName = packagejson.name.replace(/-/g, "_");
 
 module.exports = (env, argv) => {
+ let mode;
 
-  let mode;
+ const overrides = module.exports || {};
 
- const overrides = module.exports || {};
+ // if user specified mode flag take that value
+ if (argv && argv.mode) {
+ mode = argv.mode;
+ }
 
-  // if user specified mode flag take that value
-  if (argv && argv.mode) {
-  mode = argv.mode;
-  }
+ // else if configuration object is already set (module.exports) use that value
+ else if (overrides.mode) {
+ mode = overrides.mode;
+ }
 
-  // else if configuration object is already set (module.exports) use that value
-  else if (overrides.mode) {
-  mode = overrides.mode;
-  }
+ // else take webpack default (production)
+ else {
+ mode = "production";
+ }
 
- // else take webpack default (production)
- else {
- mode = 'production';
- }
+ let filename = (overrides.output || {}).filename;
+ if (!filename) {
+ const modeSuffix = mode === "development" ? "dev" : "min";
+ filename = `${dashLibraryName}.${modeSuffix}.js`;
+ }
 
- let filename = (overrides.output || {}).filename;
- if(!filename) {
- const modeSuffix = mode === 'development' ? 'dev' : 'min';
- filename = `${dashLibraryName}.${modeSuffix}.js`;
- }
+ const entry = overrides.entry || {main: "./src/lib/index.js"};
 
-  const entry = overrides.entry || {main: './src/lib/index.js'};
+ const devtool = overrides.devtool || "source-map";
 
- const devtool = overrides.devtool || 'source-map';
+ const externals =
+ "externals" in overrides
+ ? overrides.externals
+ : {
+ react: "React",
+ "react-dom": "ReactDOM",
+ "plotly.js": "Plotly",
+ "prop-types": "PropTypes",
+ };
 
- const externals = ('externals' in overrides) ? overrides.externals : ({
- react: 'React',
- 'react-dom': 'ReactDOM',
- 'plotly.js': 'Plotly',
- 'prop-types': 'PropTypes',
- });
-
- return {
- mode,
- entry,
- output: {
- path: path.resolve(__dirname, dashLibraryName),
- chunkFilename: '[name].js',
- filename,
- library: dashLibraryName,
- libraryTarget: 'window',
- },
- devtool,
- devServer: {
- static: {
- directory: path.join(__dirname, '/')
- }
+ return {
+ mode,
+ entry,
+ output: {
+ path: path.resolve(__dirname, dashLibraryName),
+ chunkFilename: "[name].js",
+ filename,
+ library: dashLibraryName,
+ libraryTarget: "window",
+ },
+ devtool,
+ devServer: {
+ static: {
+ directory: path.join(__dirname, "/"),
+ },
+ },
+ externals,
+ module: {
+ rules: [
+ {
+ test: /\.jsx?$/,
+ exclude: /node_modules/,
+ use: {
+ loader: "babel-loader",
+ },
  },
- externals,
- module: {
- rules: [
- {
- test: /\.jsx?$/,
- exclude: /node_modules/,
- use: {
- loader: 'babel-loader',
- },
+ {
+ test: /\.css$/,
+ use: [
+ {
+ loader: "style-loader",
+ },
+ {
+ loader: "css-loader",
+ options: {
+ modules: {
+ localIdentHashSalt: "dash-json-grid",
+ localIdentName: "djg-[local]__[hash:base64:8]",
  },
- {
- test: /\.css$/,
- use: [
- {
- loader: 'style-loader',
- },
- {
- loader: 'css-loader',
- },
- ],
+ },
+ },
+ ],
+ },
+ {
+ test: /\.s[ac]ss$/i,
+ use: [
+ {
+ loader: "style-loader",
+ },
+ {
+ loader: "css-loader",
+ options: {
+ modules: {
+ localIdentHashSalt: "dash-json-grid",
+ localIdentName: "djg-[local]__[hash:base64:8]",
  },
- ],
+ },
+ },
+ // Compiles Sass to CSS
+ {
+ loader: "sass-loader",
+ },
+ ],
  },
-  optimization: {
-  splitChunks: {
-  name: '[name].js',
-  cacheGroups: {
-  async: {
-  chunks: 'async',
-  minSize: 0,
-  name(module, chunks, cacheGroupKey) {
-  return `${cacheGroupKey}-${chunks[0].name}`;
-  }
-  },
-  shared: {
-  chunks: 'all',
-  minSize: 0,
-  minChunks: 2,
-  name: 'dash_json_grid-shared'
-  }
-  }
-  }
+ ],
+ },
+ optimization: {
+ splitChunks: {
+ name: "[name].js",
+ cacheGroups: {
+ async: {
+ chunks: "async",
+ minSize: 0,
+ name(module, chunks, cacheGroupKey) {
+ return `${cacheGroupKey}-${chunks[0].name}`;
+ },
+ },
+ shared: {
+ chunks: "all",
+ minSize: 0,
+ minChunks: 2,
+ name: "dash_json_grid-shared",
+ },
  },
- plugins: [
- new WebpackDashDynamicImport(),
- new webpack.SourceMapDevToolPlugin({
- filename: '[file].map',
- exclude: ['async-plotlyjs']
- })
- ]
- }
+ },
+ },
+ plugins: [
+ new WebpackDashDynamicImport(),
+ new webpack.SourceMapDevToolPlugin({
+ filename: "[file].map",
+ exclude: ["async-plotlyjs"],
+ }),
+ ],
+ };
 };