fix dev build and filePanel overflow

dgeibi · Apr 3, 2018 · 883eaca · 883eaca
1 parent 22eed0e
commit 883eaca
Show file tree

Hide file tree

Showing 11 changed files with 139 additions and 147 deletions.
diff --git a/packages/p2p-chat/config/main.config.js b/packages/p2p-chat/config/main.config.js
@@ -5,15 +5,19 @@ const analyzer = require('./analyzer')
 const pkg = require('../package.json')
 
 module.exports = (env = {}) => {
-  const isProduction = env.production === true
-
-  const PUBLIC_PATH = isProduction ? '' : '/'
+  const PROD = env.production === true
+  const mode = PROD ? 'production' : 'development'
+  const PUBLIC_PATH = PROD ? '' : '/'
   const SRC_DIR = path.join(__dirname, '../main')
   const OUTPUT_DIR = path.join(__dirname, '..')
   const defaultInclude = [SRC_DIR]
 
   const config = new Config({
-    devtool: isProduction ? 'source-map' : 'cheap-module-source-map',
+    optimization: {
+      minimize: false,
+    },
+    devtool: env.debug ? 'eval' : 'source-map',
+    mode,
     entry: {
       index: `${SRC_DIR}/index.js`,
       worker: `${SRC_DIR}/worker.js`,

diff --git a/packages/p2p-chat/config/renderer.config.js b/packages/p2p-chat/config/renderer.config.js
@@ -13,16 +13,17 @@ const getLocalIdent = (context, localIdentName, localName) =>
   generateScopedName(localName, context.resourcePath)
 
 module.exports = (env = {}) => {
-  const isProduction = env.production === true
-  const isDev = !isProduction
+  const SERVE = Boolean(env.serve)
+  const PROD = env.production && !SERVE
 
-  const PUBLIC_PATH = isProduction ? '' : '/'
+  const PUBLIC_PATH = PROD ? '' : '/'
   const SRC_DIR = path.join(__dirname, '../src')
   const OUTPUT_DIR = path.join(__dirname, '../assets')
   const defaultInclude = [SRC_DIR]
 
   const config = new Config({
-    devtool: isProduction ? 'source-map' : 'cheap-module-source-map',
+    mode: SERVE || !PROD ? 'development' : 'production',
+    devtool: PROD ? 'source-map' : 'cheap-module-source-map',
     entry: {
       app: `${SRC_DIR}/index.js`,
     },
@@ -70,7 +71,7 @@ module.exports = (env = {}) => {
             'react-css-modules',
             {
               generateScopedName,
-              webpackHotModuleReloading: isDev,
+              webpackHotModuleReloading: SERVE,
               filetypes: {
                 '.scss': {
                   syntax: 'postcss-scss',
@@ -86,8 +87,8 @@ module.exports = (env = {}) => {
               style: true,
             },
           ],
-          isDev && 'react-hot-loader/babel',
-          isProduction && 'transform-react-remove-prop-types',
+          SERVE && 'react-hot-loader/babel',
+          PROD && 'transform-react-remove-prop-types',
         ].filter(Boolean),
       },
     })
@@ -121,7 +122,7 @@ module.exports = (env = {}) => {
             },
           ],
         },
-        extract: isProduction,
+        extract: PROD,
         extractOptions: 'antd.css',
       })
     )
@@ -144,7 +145,7 @@ module.exports = (env = {}) => {
             { loader: 'postcss-loader', options: { sourceMap: true } },
           ],
         },
-        extract: isProduction,
+        extract: PROD,
         extractOptions: 'main.css',
       })
     )
@@ -159,7 +160,7 @@ module.exports = (env = {}) => {
       devServer({
         contentBase: OUTPUT_DIR,
       }),
-      isDev
+      SERVE
     )
     .use(analyzer, Boolean(env.report))
 

diff --git a/packages/p2p-chat/package.json b/packages/p2p-chat/package.json
@@ -1,15 +1,15 @@
 {
   "name": "p2p-chat",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "license": "MIT",
   "description": "a P2P LAN chatting and file sharing tool",
   "main": "index.js",
   "output": "assets",
   "author": "dgeibi <png.inside@gmail.com> (blog.dgeibi.xyz)",
   "private": true,
   "scripts": {
-    "webpack:main": "webpack --config ./config/main.config.js",
-    "serve": "webpack-dev-server --progress --config ./config/renderer.config.js",
+    "webpack:main": "webpack --config ./config/main.config.js --env.debug",
+    "serve": "webpack-dev-server --progress --config ./config/renderer.config.js --env.serve",
     "start": "run-s webpack:main serve",
     "prod": "run-s clean webpack electron",
     "dist": "run-s clean webpack builder:*",
@@ -59,7 +59,7 @@
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^1.1.11",
     "history": "^4.7.2",
-    "html-webpack-plugin": "^3.0.6",
+    "html-webpack-plugin": "^3.2.0",
     "less": "^2.7.3",
     "less-loader": "^4.1.0",
     "lodash.isequal": "^4.5.0",
@@ -72,7 +72,7 @@
     "prop-types": "^15.6.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "react-hot-loader": "^4.0.0-rc.0",
+    "react-hot-loader": "^4.0.1",
     "react-redux": "^5.0.6",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
@@ -86,10 +86,10 @@
     "rimraf": "^2.6.2",
     "style-loader": "^0.20.3",
     "uglifyjs-webpack-plugin": "^1.2.4",
-    "webpack": "^4.1.1",
+    "webpack": "^4.4.1",
     "webpack-bundle-analyzer": "^2.11.1",
-    "webpack-cli": "^2.0.12",
-    "webpack-dev-server": "^2.11.1",
+    "webpack-cli": "^2.0.13",
+    "webpack-dev-server": "^3.1.1",
     "wtf-webpack-config": "^0.1.3"
   },
   "build": {

diff --git a/packages/p2p-chat/src/components/Chatting/FilePanel/FileInfo.js b/packages/p2p-chat/src/components/Chatting/FilePanel/FileInfo.js
@@ -3,31 +3,33 @@ import { Button } from 'antd'
 import PropTypes from 'prop-types'
 
 import Card from '../../Common/CustomCard'
-import { formatName, formatSize } from '../../../utils/format'
+import { formatSize } from '../../../utils/format'
 import './FileReceive.scss'
 import { fileLoadStates } from './constants'
 
 const FileInfo = ({ filename, accept, ignore, size, username, status }) => (
   <Card>
-    <span styleName="filename" title={filename}>
-      {formatName(filename)}
-    </span>
-    <br />
-    {formatSize(size)} by {formatName(username)}
-    <br />
-    <br />
-    {fileLoadStates.waitting === status ? (
-      'waiting to receive..'
-    ) : (
-      <span>
-        <Button size="small" type="primary" onClick={accept}>
-          Accept
-        </Button>{' '}
-        <Button size="small" type="danger" onClick={ignore}>
-          Ignore
-        </Button>
-      </span>
-    )}
+    <div styleName="card">
+      <div styleName="filename" title={filename}>
+        {filename}
+      </div>
+      <div>
+        {formatSize(size)} by <span title={username}>{username}</span>
+      </div>
+      {fileLoadStates.waitting === status ? (
+        'waiting to receive..'
+      ) : (
+        <div>
+          <br />
+          <Button size="small" type="primary" onClick={accept}>
+            Accept
+          </Button>{' '}
+          <Button size="small" type="danger" onClick={ignore}>
+            Ignore
+          </Button>
+        </div>
+      )}
+    </div>
   </Card>
 )
 

diff --git a/packages/p2p-chat/src/components/Chatting/FilePanel/FilePanel.scss b/packages/p2p-chat/src/components/Chatting/FilePanel/FilePanel.scss
@@ -1,7 +1,7 @@
 .filePanel {
   padding: 5px;
   display: flex;
-  height: 8.5em;
+  height: 120px;
   overflow-x: auto;
 }
 

diff --git a/packages/p2p-chat/src/components/Chatting/FilePanel/FileReceive.js b/packages/p2p-chat/src/components/Chatting/FilePanel/FileReceive.js
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types'
 
 import Card from '../../Common/CustomCard'
 import { fileLoadStates } from './constants'
-import { formatName, formatSize, formatSpeed, formatPercent } from '../../../utils/format'
+import { formatSize, formatSpeed, formatPercent } from '../../../utils/format'
 import './FileReceive.scss'
 
 const openFile = filepath => () => {
@@ -25,30 +25,29 @@ const FileReceive = ({
   percent,
   status,
   filepath,
-}) => {
-  const name = formatName(filename)
-  return (
-    <Card>
-      <span styleName="filename" title={filename}>
-        {status === success ? <a onClick={openFile(filepath)}>{name}</a> : name}
-      </span>
-      <br />
-      {formatSize(size)} by {formatName(username)}
-      <br />
-      {status === active && <span>{formatSpeed(speed)}</span>}
+}) => (
+  <Card>
+    <div styleName="card">
+      <div styleName="filename" title={filename}>
+        {status === success ? <a onClick={openFile(filepath)}>{filename}</a> : filename}
+      </div>
+      <div>
+        {formatSize(size)} by <span title={username}>{username}</span>
+      </div>
+      {status === active && <div>{formatSpeed(speed)}</div>}
       {status === exception && <div>{error.message}</div>}
-      <br />
       {status !== success && (
         <Progress percent={formatPercent(percent)} status={status} />
       )}
       {status === success && (
         <div>
+          <br />
           <a onClick={openDir(filepath)}>Show in folder</a>
         </div>
       )}
-    </Card>
-  )
-}
+    </div>
+  </Card>
+)
 
 FileReceive.propTypes = {
   username: PropTypes.string.isRequired,

diff --git a/packages/p2p-chat/src/components/Chatting/FilePanel/FileReceive.scss b/packages/p2p-chat/src/components/Chatting/FilePanel/FileReceive.scss
@@ -1,7 +1,10 @@
 .filename {
+  font-weight: 700;
+}
+
+.card > div {
   white-space: nowrap;
   word-break: break-all;
-  text-overflow: clip;
+  text-overflow: ellipsis;
   overflow: hidden;
-  font-weight: 700;
 }
diff --git a/packages/p2p-chat/src/components/Common/CustomCard/index.js b/packages/p2p-chat/src/components/Common/CustomCard/index.js
@@ -1,13 +1,9 @@
 import React from 'react'
 import { Card } from 'antd'
 
-export default props => (
-  <Card
-    bodyStyle={{
-      width: '150px',
-      padding: '8px 12px',
-      overflow: 'hidden',
-    }}
-    {...props}
-  />
-)
+const style = {
+  width: '150px',
+  padding: '8px 10px',
+  overflow: 'hidden',
+}
+export default props => <Card bodyStyle={style} {...props} />
diff --git a/packages/p2p-chat/src/utils/format.js b/packages/p2p-chat/src/utils/format.js
@@ -17,16 +17,4 @@ export function formatPercent(percent) {
   return Number((percent * 100).toPrecision(3))
 }
 
-export function formatName(str) {
-  // non-ASCII character may be wider
-  // eslint-disable-next-line
-  if (str.length > 14 && /[^\x00-\x7F]/.test(str)) {
-    return `${str.slice(0, 6)}..${str.slice(-7)}`
-  }
-  if (str.length > 22) {
-    return `${str.slice(0, 9)}..${str.slice(-9)}`
-  }
-  return str
-}
-
 export const formatTag = tag => `[${tag.slice(0, 5)}]`
diff --git a/packages/p2p-chat/webpack.config.js b/packages/p2p-chat/webpack.config.js
@@ -1,12 +1,11 @@
-module.exports = env => {
-  const mode = env.production ? 'production' : 'developement'
+module.exports = (env = {}) => {
+  const mode = env.production ? 'production' : 'development'
   process.env.NODE_ENV = mode
 
   return [require('./config/renderer.config'), require('./config/main.config')].map(x => {
     if (typeof x === 'function') {
       x = x(env) // eslint-disable-line
     }
-    x.mode = mode // eslint-disable-line
     return x
   })
 }