build separate CSS file

Author: shunjizhan

config/webpack.config.js

@@ -31,14 +31,6 @@ module.exports = {
           loader: 'babel-loader',
         },
       },
-      {
-        test: /\.html$/,
-        use: [
-          {
-            loader: 'html-loader',
-          },
-        ],
-      },
       {
         test: /\.scss$/,
         use: [
@@ -51,6 +43,7 @@ module.exports = {
   },
   plugins: [
     // generates an HTML file by injecting automatically all our generated bundles.
+    // any css result will be automagically included as a <link>
     new HtmlWebPackPlugin({
       template: path.resolve(__dirname, '../public/index.html'),
       favicon: path.resolve(__dirname, '../public/pokeball.ico'),

config/webpack.prod.config.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const CleanTerminalPlugin = require('clean-terminal-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 
 module.exports = {
@@ -32,16 +33,17 @@ module.exports = {
       {
         test: /\.scss$/,
         use: [
-          'style-loader',   // creates style nodes from JS strings
-          'css-loader',     // translates CSS into CommonJS
-          'sass-loader',    // compiles Sass to CSS, using Node Sass by default
+          MiniCssExtractPlugin.loader,  // generate a separate style.css
+          'css-loader',                 // translates CSS into CommonJS
+          'sass-loader',                // compiles Sass to CSS, using Node Sass by default
         ],
       },
     ],
   },
   plugins: [
     // clear terminal in each build
     new CleanTerminalPlugin(),
+    new MiniCssExtractPlugin({ filename: 'style.css' }),
     // new BundleAnalyzerPlugin(),
   ],
   externals: {

package.json

@@ -4,7 +4,8 @@
   "description": "customizable react folder tree library",
   "main": "dist/react-folder-tree.bundle.js",
   "files": [
-    "dist/react-folder-tree.bundle.js"
+    "dist/react-folder-tree.bundle.js",
+    "dist/style.css"
   ],
   "author": "Shunji Zhan <[email protected]>",
   "keywords": [
@@ -82,6 +83,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "lint-staged": "^10.5.1",
+    "mini-css-extract-plugin": "^1.6.0",
     "node-sass": "^5.0.0",
     "react": "^16.8.0 || ^17",
     "react-dom": "^16.8.0 || ^17",

src/components/FolderTree/FolderTree.jsx

@@ -14,13 +14,14 @@ import './FolderTree.scss';
 
 const FolderTree = ({
   data,
-  onChange = console.log,
+  onChange = console.log,   // eslint-disable-line
   initCheckedStatus = 'unchecked',
   initOpenStatus = 'open',
   iconComponents = {},
   showCheckbox = true,
   indentPixels = 30,
   onNameClick = null,
+  readOnly = false,
 }) => {
   const options = {
     initCheckedStatus,
@@ -48,6 +49,7 @@ const FolderTree = ({
     iconComponents,
     indentPixels,
     showCheckbox,
+    readOnly,
   };
 
   /* ----------
@@ -88,8 +90,9 @@ FolderTree.propTypes = {
     CaretDownIcon: PropTypes.func,
   }),
   indentPixels: PropTypes.number,
-  showCheckbox: PropTypes.bool,
   onNameClick: PropTypes.func,
+  showCheckbox: PropTypes.bool,
+  readOnly: PropTypes.bool,
 };
 
 export {

src/components/SandBox/SandBox.jsx

@@ -1,14 +1,16 @@
 import React from 'react';
 import FolderTree, { testData } from '../FolderTree/FolderTree';
 
+/* eslint-disable */
 const SandBox = () => {
-  const onTreeStateChange = (state, e) => console.log({ state, e });
+  const onTreeStateChange = (state, e ) => console.log({ state, e });
 
   return (
     <div className='demo-sandbox'>
       <FolderTree
         data={ testData }
         onChange={ onTreeStateChange }
+        readOnly
         // showCheckbox={ false }
       />
     </div>

src/components/TreeNode/TreeNode.jsx

@@ -47,8 +47,9 @@ const TreeNode = ({
 
     iconComponents,
     indentPixels,
-    showCheckbox,
     onNameClick,
+    showCheckbox,
+    readOnly,
   } = useContext(ConfigContext);
 
   const isFolder = !!children;
@@ -87,13 +88,15 @@ const TreeNode = ({
   }
 
   const handleCheckBoxChange = e => {
+    if (readOnly) return;
+
     const newStatus = +e.target.checked;
     handleCheck(path, newStatus);
   };
 
   const onNameChange = newName => handleRename(path, newName);
 
-  const selectMe = () => (!isEditing && setIsSelected(true));
+  const selectMe = () => (!isEditing && !readOnly && setIsSelected(true));
   const unSelectMe = () => setIsSelected(false);
 
   const openMe = () => handleToggleOpen(path, true);

yarn.lock

@@ -6900,6 +6900,15 @@ mimic-response@^2.0.0, mimic-response@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-2.1.0.tgz#d13763d35f613d09ec37ebb30bac0469c0ee8f43"
   integrity sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==
 
+mini-css-extract-plugin@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.0.tgz#b4db2525af2624899ed64a23b0016e0036411893"
+  integrity sha512-nPFKI7NSy6uONUo9yn2hIfb9vyYvkFu95qki0e21DQ9uaqNKDP15DGpK0KnV6wDroWxPHtExrdEwx/yDQ8nVRw==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+    webpack-sources "^1.1.0"
+
 minimalistic-assert@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
@@ -10125,7 +10134,7 @@ webpack-merge@^4.2.2:
   dependencies:
     lodash "^4.17.15"
 
-webpack-sources@^1.4.3:
+webpack-sources@^1.1.0, webpack-sources@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
   integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==