Merge pull request #131 from XiaoMi/feature/pdd

Feature/pdd

CHANGELOG.md

@@ -8,6 +8,13 @@
 > 1. 修订号：当你做了向下兼容的问题修正。
 > 先行版本号及版本编译信息可以加到“主版本号.次版本号.修订号”的后面，作为延伸。
 
+## 1.3.5
+- 新增： `<Datepicker />` 组件可通过 placeholder 自定义占位符
+- 新增：`<Select />` 组件支持 JSONP 的 origin 配置
+- 新增：`<Table />` 组件功能
+  - 可通过 `size`属性指定表格的大小，值：large normal small
+  - 可通过 `bordered` 属性指定表格是否显示线框
+
 ## 1.3.0
 - 新增：`<Select />` 异步请求时增加 loading；
 - 修改：优化 `<Form />` 组件横排时的错误文案显示；

components/select/Select.js

@@ -9,7 +9,7 @@ import Popper from '../popper'
 import SelectInput from './SelectInput'
 import SelectDropdown from './SelectDropdown'
 import Provider from '../context'
-
+import fetchJsonp from 'fetch-jsonp'
 class Select extends Component {
   autoloadFlag = true // 第一次自动加载数据标识
 
@@ -322,14 +322,14 @@ class Select extends Component {
   }
 
   remoteSearch (keyword) {
-    let dropdownItems = []
     let {
       url,
       func,
       error,
       data = {},
       type = 'GET',
       key = 'keyword',
+      jsonpCallback = 'callback',
       ...options
     } = this.props.origin
     keyword = !keyword && this.autoloadFlag && this.props.autoload ? this.props.origin.keyword : keyword
@@ -343,42 +343,49 @@ class Select extends Component {
       fetching: true
     })
 
-    /* eslint-disable */ 
-    fetch(url, {
-      method: type,
-      ...options
-    })
-    .then(response => response.json())
-    .then(res => {
-      if (func) {
-        dropdownItems = func(res)
-      } else {
-        dropdownItems = res.data
-      }
-      if (Array.isArray(dropdownItems)) {
-        const selectedItems = this.resetSelectedItems(this.props.value, dropdownItems, true)
-
+    if (type.toUpperCase() === 'JSONP') {
+      const _o = {jsonpCallback: jsonpCallback, jsonpCallbackFunction: jsonpCallback}
+      fetchJsonp(url, _o).then((res) => res.json()).then((json) => { this._setDropdownItems(json, func) })
+    } else {
+      /* eslint-disable */
+      fetch(url, {
+        method: type,
+        ...options
+      })
+      .then(response => response.json())
+      .then(res => {
+        this._setDropdownItems(res, func)
+      }, err => {
+        error && error(err)
         this.setState({
-          dropdownItems,
-          selectedItems
+          fetching: false
         })
-      }
-      this.setState({
-        fetching: false
       })
-    }, err => {
-      error && error(err)
+    }
+  }
+  _setDropdownItems(res, func) {
+    let dropdownItems = []
+    if (func) {
+      dropdownItems = func(res)
+    } else {
+      dropdownItems = res.data
+    }
+    if (Array.isArray(dropdownItems)) {
+      const selectedItems = this.resetSelectedItems(this.props.value, dropdownItems, true)
       this.setState({
-        fetching: false
+        dropdownItems,
+        selectedItems
       })
+    }
+    this.setState({
+      fetching: false
     })
   }
-
   onFilterItems (keyword) {
     this.setState({
       keyword
     }, ()=>this.resetFocusedIndex())
-    
+
     if (this.props.origin) {
       // this.setState({
       //   dropdownItems: []
@@ -511,9 +518,9 @@ class Select extends Component {
           />
         </div>
         { children }
-        <Popper 
-          show={dropdownShow} 
-          attachEle={this.selectInputContainer} 
+        <Popper
+          show={dropdownShow}
+          attachEle={this.selectInputContainer}
           zIndex={1050}
           topGap={5}
           className='hi-select__popper'

components/select/style/select-dropdown.scss

@@ -45,6 +45,9 @@
     cursor: pointer;
     list-style: none;
     transition: all 0.3s ease;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 
     &.hi-select__dropdown--item-default {
       display: flex;

docs/zh-CN/quick-start.md

@@ -9,19 +9,136 @@ HIUI 是一套适用于前中后台的交互界面设计标准与前端解决方
 > 如果你是「HIUI Template 用户」：官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的基本知识，并对组件化、模板有一定了解；
 > 如果你是「前端工程师」：在开始之前，假定你已掌握 React 全家桶的开发方式，并已正确安装和配置了 Node.js v6.5 或以上版本。
 
-### 在项目中配置 HIUI（适用于熟悉 React 开发的工程师）
+### 1.新项目
 
-### 1. 将HIUI添加到项目中
+> 我们推荐使用 [create-react-app](https://www.npmjs.com/package/create-react-app) React 官方脚手架进行快速项目搭建
+
+环境依赖
+
+- Node >= 8.10
+- Npm >= 5.2  或 Yarn >= 0.25
+
+下载并安装 Node
+
+[Node 下载地址](https://nodejs.org/zh-cn/download/)
+
+或参照如下地址选择对应的安装方式
+
+[各平台通过包管理器进行安装](https://nodejs.org/zh-cn/download/package-manager/)
+
+Node 安装完成后，npm 即可以使用
+
+#### 1.1 安装create-react-app
+
+```shell
+npm install -g create-react-app
+```
+
+#### 1.2 创建 react 应用
+
+> 在终端顺序执行以下命令：
+
+```bash
+  # 全局安装 create-react-app
+  npm install -g create-react-app
+
+  # 使用 create-react-app 创建工程目录
+  create-react-app projectName
+
+  # 切换至工程目录
+  cd projectName
+
+  # 启动项目
+  npm start 
+  # 或
+  yarn start
+```
+
+![](./static/img/docs/create-react-app.gif)
+
+完毕后，将会自动打开新的标签页 [localhost:3000](localhost:3000)，至此React项目初始化完成
+
+***目录结构***
+
+```html
+├── README.md
+├── package.json
+├── public
+│   ├── favicon.ico
+│   ├── index.html
+│   └── manifest.json
+├── src
+│   ├── App.css
+│   ├── App.js        //主模块
+│   ├── App.test.js
+│   ├── index.css     //主样式文件
+│   ├── index.js      //程序主入口
+│   ├── logo.svg
+│   └── serviceWorker.js
+└── yarn.lock
+```
+
+#### 1.3 安装 HIUI
 
 ```sh
-$ npm install @hi-ui/hiui --save
+cd yourProjectName
+npm install @hi-ui/hiui --save
 ```
 
-### 2. 使用组件
+```diff
+// package.json  
+"dependencies": {
++   "@hi-ui/hiui": "^1.3.2",
+    "react": "^16.8.3",
+    "react-dom": "^16.8.3",
+    "react-scripts": "2.1.5"
+  },
+```
 
-所有组件均在 `hiui/es` 文件夹下。在需要使用组件的文件中分别引入 `hiui/es` 下对应组件的 css 和 js 文件即可，例如使用 table 组件：
+修改 src/App.js
 
-```js
-import Table from '@hi-ui/hiui/es/table'
-import '@hi-ui/hiui/es/table/style/index.css'
+```javascript
+import React, { Component } from 'react';
+import {Button} from '@hi-ui/hiui' //引入所需组件
+import logo from './logo.svg';
+import './App.css';
+
+class App extends Component {
+  render() {
+    return (
+      <div className="App">
+
+        <header className="App-header">
+          <img src={logo} className="App-logo" alt="logo" />
+
+          {/* 使用组件 */}
+          <Button type="primary"  size="large">HIUI 按钮</Button>
+
+          <p>
+            Edit <code>src/App.js</code> and save to reload.
+          </p>
+          <a
+            className="App-link"
+            href="https://reactjs.org"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Learn React
+          </a>
+
+        </header>
+      </div>
+    );
+  }
+}
+
+export default App;
 ```
+
+浏览器将自动刷新，效果如下：
+
+<img src="./static/img/docs/effect.jpg" width="40%"/>
+
+### 2. 在现有项目中使用
+
+**同1.3**

docs/zh-CN/select.md

@@ -294,7 +294,7 @@ render () {
 | 参数 | 说明 | 类型 | 可选值 |默认值 |
 | -------- | ----- | ---- | ---- | ---- |
 | url | 请求的url | string | - | - |
-| type | 请求方法 | string | get,post | get |
+| type | 请求方法 | string | get \| post \| jsonp | get |
 | data | post请求时的参数 | object | - | - |
 | key | 搜索关键字参数key | string | - | keyword |
 | keyword | autoload为true时的默认搜索关键词 | string | - | - |

docs/zh-CN/table.md

@@ -1072,7 +1072,7 @@ constructor (props) {
 | 参数       | 说明   |  类型  | 可选值 | 默认值  |
 | --------   | -----  | ----  |  ----  | ----  |
 | size | 表格尺寸  | String |  large,small,normal  |  normal |
-| bordered | 表格尺寸  | Bollean | -  |  false |
+| bordered | 是否显示边框  | Bollean | -  |  false |
 | striped | 斑马纹 | Bollean | - | false | 
 | columns | 表格数据列对应信息  | array | - | - |
 | data | 表格数据  | array | - | - |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/hiui",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "description": "HIUI for React",
   "scripts": {
     "test": "node_modules/.bin/standard && node_modules/.bin/stylelint --config .stylelintrc 'components/**/*.scss'",
@@ -80,6 +80,7 @@
     "cssnano": "^4.0.5",
     "date-fns": "^1.29.0",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "fetch-jsonp": "^1.1.3",
     "file-loader": "^1.1.11",
     "gh-pages": "^2.0.1",
     "gulp": "^3.9.1",

site/locales/en-US.js

@@ -2,6 +2,7 @@ module.exports = {
   page: {
     'quick-start': 'Quick Start',
     'i18n': 'i18n',
+    'changelog': 'Changelog',
     'theme': 'Customize Theme',
     'template': 'Layout Theme',
     'typography': 'Typography',

site/locales/zh-CN.js

@@ -4,6 +4,7 @@ module.exports = {
     'template': '布局主题',
     'theme': '配色主题',
     'i18n': '国际化',
+    'changelog': '更新日志',
     'typography': 'Typography 排版',
     'button': 'Button 按钮',
     'dropdown': 'Dropdown 下拉',

site/pages/changelog/index.js

@@ -0,0 +1,9 @@
+import Markdown from '../../../libs/markdown'
+
+class Changelog extends Markdown {
+  document (locale) {
+    return require('../../../CHANGELOG.md')
+  }
+}
+
+export default Changelog

site/pages/index.js

@@ -3,7 +3,8 @@ export default {
     'quick-start': require('./quick-start'),
     'template': require('./template'),
     'theme': require('./theme'),
-    'i18n': require('./i18n')
+    'i18n': require('./i18n'),
+    'changelog': require('./changelog')
   },
   components: {
     '基本组件': {