improve link

RaoHai · Dec 23, 2016 · 0b63de2 · 0b63de2
1 parent b73fb6a
commit 0b63de2
Show file tree

Hide file tree

Showing 32 changed files with 172 additions and 204 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,24 +1,32 @@
 {
   "parser": "babel-eslint",
-  "extends": "eslint-config-airbnb",
+  "extends": "airbnb",
   "rules": {
-    "spaced-comment": [0],
-    "no-unused-vars": [0],
-    "no-empty": [0],
-    "react/wrap-multilines": [0],
-    "react/no-multi-comp": [0],
-    "no-constant-condition": [0],
+    "generator-star-spacing": [0],
+    "consistent-return": [0],
+    "react/forbid-prop-types": [0],
+    "react/jsx-filename-extension": [1, { "extensions": [".js"] }],
+    "global-require": [1],
+    "import/prefer-default-export": [0],
     "react/jsx-no-bind": [0],
     "react/prop-types": [0],
-    "arrow-body-style": [0],
     "react/prefer-stateless-function": [0],
-    "semi": [0],
-    "global-require": [0],
-    "no-shadow": [0],
-    "no-useless-computed-key": [0],
-    "no-underscore-dangle": [0]
+    "no-else-return": [0],
+    "no-restricted-syntax": [0],
+    "import/no-extraneous-dependencies": [0],
+    "no-use-before-define": [0],
+    "jsx-a11y/no-static-element-interactions": [0],
+    "no-nested-ternary": [0],
+    "arrow-body-style": [0],
+    "import/extensions": [0],
+    "no-bitwise": [0],
+    "no-cond-assign": [0],
+    "import/no-unresolved": [0],
+    "require-yield": [1]
   },
-  "ecmaFeatures": {
-    "experimentalObjectRestSpread": true
+  "parserOptions": {
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true
+    }
   }
-}
+}
diff --git a/package.json b/package.json
@@ -30,12 +30,21 @@
     "gh-pages": "^0.12.0",
     "gulp": "^3.9.1",
     "gulp-cli": "^1.2.2",
-    "redbox-react": "^1.3.2"
+    "redbox-react": "^1.3.2",
+    "@kadira/storybook": "^2.21.0",
+    "eslint": "^3.12.2",
+    "eslint-config-airbnb": "^13.0.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^2.2.3",
+    "eslint-plugin-react": "^6.8.0"
   },
   "scripts": {
     "start": "dora --plugins \"proxy?watchDirs=./mock,webpack,webpack-hmr\"",
     "build": "atool-build",
     "test": "atool-test-mocha ./src/**/*-test.js",
-    "pub": "npm run build && gulp"
+    "pub": "npm run build && gulp",
+    "lint": "eslint --ext .js src test",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   }
 }
diff --git a/src/components/Conversations/ChatHeader.js b/src/components/Conversations/ChatHeader.js
@@ -6,7 +6,7 @@ import styles from './ChatHeader.less';
 
 export default connect()(({ userId, userName, sessionType, avatar, dispatch }) => {
   const nameSub = userName.substr(0, 1).toUpperCase();
-  return <div className={styles.header}>
+  return (<div className={styles.header}>
     <span className={styles.avatar} style={{ backgroundColor: getColorByChar(nameSub) }}>
       {avatar ? <img src={avatar} /> : <span className={styles.nameSub}>{nameSub}</span>}
     </span>
@@ -18,5 +18,5 @@ export default connect()(({ userId, userName, sessionType, avatar, dispatch }) =
     >
       <Icon type="close" />
     </div>
-  </div>
+  </div>);
 });
diff --git a/src/components/Conversations/ChatInput.js b/src/components/Conversations/ChatInput.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { Input } from 'antd';
 import styles from './ChatInput.less';
 
@@ -33,17 +32,17 @@ export default class ChatInput extends React.Component {
     });
   }
   render() {
-    return <div className={styles.input}>
+    return (<div className={styles.input}>
     <Input
       value={this.state.value}
       onChange={this.handleChange}
-      ref={c => this.inputElement = c}
+      ref={c => { this.inputElement = c; }}
       onKeyDown={this.onKeyDown}
       type="textarea"
     />
     <span className={styles.suffix} onClick={this.sendMessage}>
       <span className={styles.send}>发送</span>
     </span>
-  </div>
+    </div>);
   }
 }
diff --git a/src/components/Conversations/ChatPresent.js b/src/components/Conversations/ChatPresent.js
@@ -7,7 +7,13 @@ import moment from 'moment';
 const reqAnimFrame = getRequestAnimationFrame();
 
 class ChatPresent extends React.Component {
+  componentDidMount() {
+    this.scrollIntoView();
+  }
   componentDidUpdate() {
+    this.scrollIntoView();
+  }
+  scrollIntoView = () => {
     const startTime = Date.now();
     const scrollTop = this.container.scrollTop;
     const targetScrollTop = this.container.scrollHeight;
@@ -22,30 +28,42 @@ class ChatPresent extends React.Component {
     reqAnimFrame(frameFunc);
   }
   render() {
-    return <div
-      ref={c => this.container = c}
+    const { user } = this.props;
+    return (<div
+      ref={c => {this.container = c;}}
       className={styles.chatPresent}
     >
     {this.props.conversations.map((conversation, idx) => {
-      const isMe = this.props.user && conversation.user && conversation.user.uid === this.props.user.uid;
+      const isMe = user && conversation.user && conversation.user.uid === this.props.user.uid;
       const from = isMe ? 'me' : conversation.from;
-      return <div key={`present-${idx}`} className={styles[from]}>
+      return (<div key={`present-${idx}`} className={styles[from]}>
         {conversation.user && !isMe ? <img src={conversation.user.photoURL} /> : null }
+
         <span className={styles.meta}>
-          {conversation.user && !isMe ? <span className={styles.userName}>{conversation.user.displayName}</span> : null}
+
+          {conversation.user && !isMe ?
+            <span className={styles.userName}>
+              {conversation.user.displayName}
+            </span>
+          : null}
+
           {conversation.from !== 'system' && conversation.from !== 'chat' ?
-            <span className={styles.time}> {moment(conversation.time).format('YYYY-MM-DD HH:mm:ss')} </span>
+            <span className={styles.time}>
+              {moment(conversation.time).format('YYYY-MM-DD HH:mm:ss')}
+            </span>
           : null }
+
         </span>
+
         <div className={styles.bubble}>
         <span dangerouslySetInnerHTML={{ __html: conversation.content }} />
         </div>
-      </div>
+      </div>);
     })}
-    </div>
+    </div>);
   }
 }
 
 export default connect(props => ({
   user: props.auth.user,
-}))(ChatPresent)
+}))(ChatPresent);
diff --git a/src/components/Conversations/ChatUsers.js b/src/components/Conversations/ChatUsers.js
@@ -7,7 +7,7 @@ import styles from './ChatUser.css';
 export default connect(props => ({
   users: props.users.users,
 }))(props => {
-  return <div className={styles.chatUser}>
+  return (<div className={styles.chatUser}>
     <ul>
     <Icon type="right-square-o" /> Member: {props.users.length}
     {props.users.map(user =>
@@ -16,6 +16,5 @@ export default connect(props => ({
       </li>
     )}
     </ul>
-  </div>
-})
-
+  </div>);
+});
diff --git a/src/components/Conversations/Conversation.Chat.js b/src/components/Conversations/Conversation.Chat.js
@@ -10,7 +10,7 @@ export default connect(props => ({
   user: props.auth.user,
 }))(props => {
   const { cid, robotParams, active, user } = props;
-  return <div className={styles.panel} style={active ? { display: 'flex' } : { display: 'none' }}>
+  return (<div className={styles.panel} style={active ? { display: 'flex' } : { display: 'none' }}>
     <ChatHeader {...props} />
     <ChatPresent conversations={props.conversations} />
     {user ? <ChatInput onSendMessage={(message) =>
@@ -19,5 +19,5 @@ export default connect(props => ({
         payload: { message, cid, robotParams, user },
       })}
     /> : <Login />}
-  </div>
+  </div>);
 });
diff --git a/src/components/Conversations/Conversation.Robot.js b/src/components/Conversations/Conversation.Robot.js
@@ -6,13 +6,13 @@ import styles from './Conversation.css';
 
 export default function RobotConversation(props) {
   const { cid, robotParams, active } = props;
-  return <div className={styles.panel} style={active ? { display: 'flex' } : { display: 'none' }}>
+  return (<div className={styles.panel} style={active ? { display: 'flex' } : { display: 'none' }}>
     <ChatHeader {...props} />
     <ChatPresent conversations={props.conversations} />
     <ChatInput onSendMessage={(message) => props.dispatch({
       type: 'robot/sendMessage',
       payload: { message, cid, robotParams },
     })}
     />
-  </div>
+  </div>);
 }
diff --git a/src/components/Conversations/SpinnerAvatar.js b/src/components/Conversations/SpinnerAvatar.js
@@ -13,7 +13,7 @@ export default function SpinnerAvatar(props) {
     active: true,
   });
   return (<div className={cls}>
-    <span className={styles['avatar-spinner-mask']} style={style}/>
+    <span className={styles['avatar-spinner-mask']} style={style} />
     <span className={styles['avatar-spinner-mask2']} style={style} />
     <span className={styles['avatar-spinner-mask3']} style={style} />
     <span className={styles['avatar-image']} style={{ backgroundColor }}>

diff --git a/src/components/Conversations/VisitorList.js b/src/components/Conversations/VisitorList.js
@@ -21,7 +21,7 @@ function highlight(text, highlightValue) {
 }
 
 export default connect(select)(({ filterValue, dispatch, conversations, active }) => {
-  return <div>
+  return (<div>
     {conversations
       .filter(({ userName }) => !filterValue || userName.indexOf(filterValue) !== -1)
       .map((conversation, idx) => {
@@ -31,7 +31,7 @@ export default connect(select)(({ filterValue, dispatch, conversations, active }
           [styles.conversation]: true,
           [styles.active]: active === idx,
         });
-        return <div
+        return (<div
           onClick={() => dispatch({ type: 'conversations/setActive', idx })}
           className={conversationCls}
           key={idx}
@@ -49,8 +49,8 @@ export default connect(select)(({ filterValue, dispatch, conversations, active }
           >
             <Icon type="close" />
           </span>
-        </div>
+        </div>);
       })
     }
-  </div>
+  </div>);
 });
diff --git a/src/components/CustomerService/CustomerServiceStatus.js b/src/components/CustomerService/CustomerServiceStatus.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { connect } from 'dva';
-import classNames from 'classnames';
 import { ONLINE } from '../../services/customerService';
 import { Menu, Dropdown, Icon } from 'antd';
 import styles from './CustomerServiceStatus.less';
@@ -9,30 +8,32 @@ const select = props => ({
   user: props.auth.user,
   serviceName: props.customerService.serviceName,
   status: props.customerService.status,
-})
+});
 
 export default connect(select)(({ user, status, serviceName, dispatch }) => {
-  const menu = <Menu>
+  const menu = (<Menu>
     <Menu.Item>
       <a onClick={() => dispatch({ type: 'customerService/online' })}> 上线 </a>
     </Menu.Item>
     <Menu.Item>
       <a onClick={() => dispatch({ type: 'customerService/offline' })}> 离线 </a>
     </Menu.Item>
-  </Menu>;
+  </Menu>);
   const avatarColor = status === ONLINE ? '#57C6F7' : '#999';
   const statusColor = status === ONLINE ? '#87D068' : '#ccc';
 
-  return <div className={styles.server}>
+  return (<div className={styles.server}>
     <Dropdown overlay={menu}>
       <div className={styles.avatar} style={{ backgroundColor: avatarColor }}>
-        {user && user.photoURL ? <img src={user.photoURL} /> : <Icon type="customer-service" className={styles.anticon}/> }
+        {user && user.photoURL ?
+          <img src={user.photoURL} /> :
+          <Icon type="customer-service" className={styles.anticon} />
+        }
         <span className={styles.status} style={{ backgroundColor: statusColor }} />
       </div>
     </Dropdown>
     <div className={styles.serviceName}>
-      {user ? user.displayName : null}
+      {user ? user.displayName : serviceName}
     </div>
-  </div>
-})
-
+  </div>);
+});
diff --git a/src/components/Example.js b/src/components/Example.js
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -7,7 +7,7 @@ import CusomterServiceStatus from './CustomerService/CustomerServiceStatus';
 const Search = Input.Search;
 
 export default connect()(props => {
-  return <div className={styles.header}>
+  return (<div className={styles.header}>
     <Search
       style={{ width: 200 }}
       onChange={(e) => props.dispatch({
@@ -16,5 +16,5 @@ export default connect()(props => {
       })}
     />
     <CusomterServiceStatus />
-  </div>
+  </div>);
 });
diff --git a/src/components/Login.js b/src/components/Login.js
@@ -6,7 +6,7 @@ import styles from './MainPanel.less';
 export default connect(props =>
   ({ auth: props.auth })
 )(props => {
-  return <div className={styles.input}>
+  return (<div className={styles.input}>
     <h3> LOGIN TO CHAT </h3>
     <Button.Group className={styles.button}>
       <Button
@@ -26,5 +26,5 @@ export default connect(props =>
         <Icon type="smile" /> ANONYMOUSLY LOGIN
       </Button>
     </Button.Group>
-  </div>
+  </div>);
 });
diff --git a/src/components/MainPanel.js b/src/components/MainPanel.js
@@ -9,15 +9,17 @@ export default connect(props => ({
   active: props.conversations.active,
   robotParams: props.robotParams,
 }))(props => {
-  return <div className={styles.mainPanel}>
+  return (<div className={styles.mainPanel}>
     {props.list.map((conversation, idx) => {
-      const PanelComponent = conversation.sessionType === 'robot' ? RobotConversation : ChatConversation;
-      return <PanelComponent
+      const PanelComponent = conversation.sessionType === 'robot'
+      ? RobotConversation
+      : ChatConversation;
+      return (<PanelComponent
         {...props}
         {...conversation}
         key={conversation.cid}
         active={idx === props.active}
-      />;
+      />);
     })}
-  </div>;
+  </div>);
 });