add:react-scroll

README.ru-RU.md

@@ -49,7 +49,7 @@ UI-решение "из коробки" для корпоративных при
   - Monitor
   - Workspace
 - Form
-  - Basic Form
+  - ColoredScrollbars Form
   - Step Form
   - Advanced From
 - List

README.zh-CN.md

@@ -45,7 +45,7 @@ We need your help: https://github.com/ant-design/ant-design-pro/issues/120
   - Monitor
   - Workspace
 - Form
-  - Basic Form
+  - ColoredScrollbars Form
   - Step Form
   - Advanced From
 - List

config/router.config.js

@@ -40,6 +40,11 @@ export default [
             name: 'react-color',
             component: './Libraries/ReactColor',
           },
+          {
+            path: '/libraries/scrollbars',
+            name: 'scrollbars',
+            component: './Libraries/ScrollBars/index',
+          }
         ],
       },
       // Component

package.json

@@ -58,6 +58,7 @@
     "react-color": "^2.17.2",
     "react-container-query": "^0.11.0",
     "react-copy-to-clipboard": "^5.0.1",
+    "react-custom-scrollbars": "^4.2.1",
     "react-document-title": "^2.0.3",
     "react-dom": "^16.6.3",
     "react-fittext": "^1.0.0",

src/components/Authorized/demo/basic.md

@@ -2,10 +2,10 @@
 order: 0
 title: 
   zh-CN: 基本使用
-  en-US: Basic use
+  en-US: ColoredScrollbars use
 ---
 
-Basic use
+ColoredScrollbars use
 
 ```jsx
 import RenderAuthorized from 'ant-design-pro/lib/Authorized';

src/components/Authorized/demo/secured.md

@@ -2,7 +2,7 @@
 order: 3
 title: 
   zh-CN: 注解基本使用
-  en-US: Basic use secured
+  en-US: ColoredScrollbars use secured
 ---
 
 secured demo used

src/components/AvatarList/demo/simple.md

@@ -2,7 +2,7 @@
 order: 0
 title: 
   zh-CN: 基础样例 
-  en-US: Basic Usage
+  en-US: ColoredScrollbars Usage
 ---
 
 Simplest of usage.

src/components/CountDown/demo/simple.md

@@ -2,7 +2,7 @@
 order: 0
 title:
   zh-CN: 基本
-  en-US: Basic
+  en-US: ColoredScrollbars
 ---
 
 ## zh-CN

src/components/DescriptionList/demo/basic.md

@@ -2,7 +2,7 @@
 order: 0
 title:
   zh-CN: 基本
-  en-US: Basic
+  en-US: ColoredScrollbars
 ---
 
 ## zh-CN
@@ -11,7 +11,7 @@ title:
 
 ## en-US
 
-Basic DescriptionList.
+ColoredScrollbars DescriptionList.
 
 ````jsx
 import DescriptionList from 'ant-design-pro/lib/DescriptionList';

src/locales/en-US/menu.js

@@ -4,6 +4,7 @@ export default {
   'menu.libraries.drag': '拖拽',
   'menu.libraries.braft-editor': '富文本编译器',
   'menu.libraries.react-color': '拾色器',
+  'menu.libraries.scrollbars': '滚动条',
   'menu.component': '组件封装',
   'menu.component.table': '多功能Table',
   'menu.component.select-tree': 'SelectTree',

src/locales/pt-BR/menu.js

@@ -4,6 +4,7 @@ export default {
   'menu.libraries.drag': '拖拽',
   'menu.libraries.braft-editor': '富文本编译器',
   'menu.libraries.react-color': '拾色器',
+  'menu.libraries.scrollbars': '滚动条',
   'menu.component': '组件封装',
   'menu.component.table': '多功能Table',
   'menu.component.select-tree': 'SelectTree',

src/locales/zh-CN/menu.js

@@ -4,6 +4,7 @@ export default {
   'menu.libraries.drag': '拖拽',
   'menu.libraries.braft-editor': '富文本编译器',
   'menu.libraries.react-color': '拾色器',
+  'menu.libraries.scrollbars': '滚动条',
   'menu.component': '组件封装',
   'menu.component.table': '多功能Table',
   'menu.component.select-tree': 'SelectTree',

src/locales/zh-TW/menu.js

@@ -4,6 +4,7 @@ export default {
   'menu.libraries.drag': '拖拽',
   'menu.libraries.braft-editor': '富文本编译器',
   'menu.libraries.react-color': '拾色器',
+  'menu.libraries.scrollbars': '滚动条',
   'menu.component': '组件封装',
   'menu.component.table': '多功能Table',
   'menu.component.select-tree': 'SelectTree',

src/pages/Home/home.json

@@ -20,6 +20,13 @@
     "IconUrl": "image/react-color.png",
     "init_enable": true
   },
+  {
+    "fd_fsid": "7",
+    "key":"/libraries/scrollbars",
+    "Name": "滚动条",
+    "IconUrl": "image/scroll.png",
+    "init_enable": true
+  },
   {
     "fd_fsid": "4",
     "key":"/component/table",

src/pages/Libraries/ScrollBars/ColoredScrollbars.js

@@ -0,0 +1,57 @@
+
+import React, { Component } from 'react';
+import { Scrollbars } from 'react-custom-scrollbars';
+
+export default class ColoredScrollbars extends Component {
+
+  constructor(props, ...rest) {
+    super(props, ...rest);
+    this.state = { top: 0 };
+    this.handleUpdate = this.handleUpdate.bind(this);
+    this.renderView = this.renderView.bind(this);
+    this.renderThumb = this.renderThumb.bind(this);
+  }
+
+  handleUpdate(values) {
+    const { top } = values;
+    this.setState({ top });
+  }
+
+  renderView({ style, ...props }) {
+    const { top } = this.state;
+    const viewStyle = {
+      padding: 15,
+      backgroundColor: `rgb(${Math.round(255 - (top * 255))}, ${Math.round(top * 255)}, ${Math.round(255)})`,
+      color: `rgb(${Math.round(255 - (top * 255))}, ${Math.round(255 - (top * 255))}, ${Math.round(255 - (top * 255))})`
+    };
+    return (
+      <div
+        className="box"
+        style={{ ...style, ...viewStyle }}
+        {...props}/>
+    );
+  }
+
+  renderThumb({ style, ...props }) {
+    const { top } = this.state;
+    const thumbStyle = {
+      backgroundColor: `rgb(${Math.round(255 - (top * 255))}, ${Math.round(255 - (top * 255))}, ${Math.round(255 - (top * 255))})`
+    };
+    return (
+      <div
+        style={{ ...style, ...thumbStyle }}
+        {...props}/>
+    );
+  }
+
+  render() {
+    return (
+      <Scrollbars
+        renderView={this.renderView}
+        renderThumbHorizontal={this.renderThumb}
+        renderThumbVertical={this.renderThumb}
+        onUpdate={this.handleUpdate}
+        {...this.props}/>
+    );
+  }
+}