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 <shunhahaha@live.com>",
  "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==