release: 1.0.1 (#6)

- 更新：`<Stepper />` 组件，支持主题切换； - 修复：重构 `<Select />` 支持自定义 option； - 文档：更新 README； - 文档：支持主题、语言切换。
XiaoMi · Nov 1, 2018 · f6b03e4 · f6b03e4
1 parent 7172ac7
commit f6b03e4
Show file tree

Hide file tree

Showing 103 changed files with 2,080 additions and 3,189 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,13 @@
 > 1. 修订号：当你做了向下兼容的问题修正。
 > 先行版本号及版本编译信息可以加到“主版本号.次版本号.修订号”的后面，作为延伸。
 
+## 1.0.1
+
+- 更新：`<Stepper />` 组件，支持主题切换；
+- 修复：重构 `<Select />` 支持自定义 option；
+- 文档：更新 README；
+- 文档：支持主题、语言切换。
+
 ## 1.0.0
 
 - 第一个公开版本，发布基本组件；

diff --git a/README-zh.md b/README-zh.md
@@ -1,35 +1,74 @@
-# HIUI
+<div align="center">
+
+[![HIUI Logo](https://raw.githubusercontent.com/XiaoMi/hiui/master/site/static/img/logo.png)](https://xiaomi.github.io/hiui/)
+
+<h1 align="center">HIUI</h1>
 
 [![JavaScript Style Guide](https://camo.githubusercontent.com/58fbab8bb63d069c1e4fb3fa37c2899c38ffcd18/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f636f64655f7374796c652d7374616e646172642d627269676874677265656e2e737667)](https://github.com/standard/standard)
 
+[English](https://github.com/XiaoMi/hiui/blob/master/README.md) | [中文](https://github.com/XiaoMi/hiui/blob/master/README-zh.md)
+</div>
+
+---
+
+HIUI 是一个面向中后台系统的前端组件库，可以帮助开发人员快速实现交互一致、界面美观的界面开发。
+
 ## 特性
 
 - 精于中后台产品的交互与视觉设计
-- 全面的流程、数据展示模板，覆盖大多数中后台系统需求
-- 数据结构分离的单组件设计，无需学习，开箱即用
+- 全面的流程、数据展示模板，从业务中来，模板、组件覆盖大多数中后台系统需求
+- 数据结构分离的单组件设计，无需学习，升级方便，开箱即用
 
 ## 安装
 
 ```sh
 npm install @hi-ui/hiui
 ```
 
-## 贡献指南
+组件使用详见[官方文档](https://xiaomi.github.io/hiui/#/zh-CN/components/quick-start)。
+
+
+## 贡献
 
-### 开发
+### 项目结构
+
+```
+.
+├── build                   # 构建命令
+├── components              # 组件
+├── docs                    # 使用文档
+│   ├── en-US
+│   └── zh-CN
+├── libs                    # 第三方依赖
+├── locales                 # 语言配置
+├── site                    # 文档页模板
+├── CHANGELOG.md
+├── commitlint.config.js    # Commit 检查
+├── gulpfile.js             # 构建配置项
+├── LICENSE
+├── README-zh.md
+├── README.md
+├── package.json
+└── postcss.config.js
+```
+
+### 配置环境
 
 ```sh
-# install dependencies
+# 安装依赖
 $ yarn
 
-# serve in dev mode, with hot reload at localhost:4200
+# 开启本地开发环境 localhost:4200
 $ yarn dev
 
-# build for production
+# 编译代码
+$ yarn compile
+
+# 构造文档
 $ yarn build
 ```
 
-open http://localhost:4200
+打开 http://localhost:4200
 
 #### 添加展示/文档模块
 
@@ -49,11 +88,12 @@ open http://localhost:4200
 
 ### 规范
 
-[![JavaScript Style Guide](https://cdn.rawgit.com/standard/standard/master/badge.svg)](https://github.com/standard/standard)
-
- - [JavaScript Standard Style](https://github.com/standard/standard)：**提交文件时候会自动进行代码检查，如有问题则需要修复后才可以提交**
+ - [BEM](https://en.bem.info/)
+ - [git-flow (AVH Edition)](https://github.com/petervanderdoes/gitflow-avh)
+ - [JavaScript Standard Style](https://github.com/standard/standard)
 
 ## License
+
 MIT
 
 -- EOF --
diff --git a/README.md b/README.md
@@ -1,27 +1,82 @@
-# HIUI
+<div align="center">
+
+[![HIUI Logo](https://raw.githubusercontent.com/XiaoMi/hiui/master/site/static/img/logo.png)](https://xiaomi.github.io/hiui/)
+
+<h1 align="center">HIUI</h1>
 
 [![JavaScript Style Guide](https://camo.githubusercontent.com/58fbab8bb63d069c1e4fb3fa37c2899c38ffcd18/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f636f64655f7374796c652d7374616e646172642d627269676874677265656e2e737667)](https://github.com/standard/standard)
 
+[English](https://github.com/XiaoMi/hiui/blob/master/README.md) | [中文](https://github.com/XiaoMi/hiui/blob/master/README-zh.md)
+</div>
+
+---
+
+HIUI is a solution that is adequate for the fomulation and implementation of interaction and UI design standard for front, middle and backend .
+
 ## Features
 
 - Highly minimize user perception of interaction costs and predictability of interactions
 - Build outstanding vitual style and get vitual design and interface specification for typical scenario
 - Highly refined design experience in OA, warehousing and after-sales systems, BI systems, and corporate mid-station projects
 
-## Setup
+## Install
 
 ```sh
 npm install @hi-ui/hiui
 ```
 
-### Style Guide
+For components usage, see more at [HIUI Documents](https://xiaomi.github.io/hiui/#/en-US/components).
+
+## Contribute
+
+### Structure
+
+```
+.
+├── build                   # build command
+├── components              # component source
+├── docs                    # markdown docs
+│   ├── en-US
+│   └── zh-CN
+├── libs                    # third-party libraries
+├── locales                 # i18n config
+├── site                    # doc site source
+├── CHANGELOG.md
+├── commitlint.config.js
+├── gulpfile.js
+├── LICENSE
+├── README-zh.md
+├── README.md
+├── package.json
+└── postcss.config.js
+```
 
-[![JavaScript Style Guide](https://cdn.rawgit.com/standard/standard/master/badge.svg)](https://github.com/standard/standard)
+### Setup
 
+```sh
+# install dependencies
+$ yarn
+
+# serve in dev mode, with hot reload at localhost:4200
+$ yarn dev
+
+# compile for production
+$ yarn compile
+
+# build for production
+$ yarn build
+```
+
+Open http://localhost:4200
+
+### Style Guide
+
+ - [BEM](https://en.bem.info/)
+ - [git-flow (AVH Edition)](https://github.com/petervanderdoes/gitflow-avh)
  - [JavaScript Standard Style](https://github.com/standard/standard)
- - [Git Flow](https://nvie.com/posts/a-successful-git-branching-model/)
 
 ## License
+
 MIT
 
 -- EOF --
diff --git a/components/checkbox/Base.js b/components/checkbox/Base.js
@@ -110,13 +110,14 @@ class Base extends Component {
     )
     let _value = trueValue || value || text || children
     return (
-      <label
+      <div
         className={labelClass}
       >
         <span
           className={checkedClass}
         >
           <input
+            ref={node => { this.checkboxRef = node }}
             type='checkbox'
             className='hi-checkbox-origin-input'
             value={_value}
@@ -127,8 +128,16 @@ class Base extends Component {
             onChange={this.handleChange}
           />
         </span>
-        <span className='hi-checkbox-label'>{text || children}</span>
-      </label>
+        <span className='hi-checkbox-label'
+          onClick={
+            () => {
+              this.checkboxRef.click()
+            }
+          }
+        >
+          {text || children}
+        </span>
+      </div>
     )
   }
 }

diff --git a/components/popper/index.js b/components/popper/index.js
@@ -0,0 +1,88 @@
+import React, { Component } from 'react'
+import { render } from 'react-dom'
+import classNames from 'classnames'
+import './index.scss'
+
+export default class Popper extends Component {
+  container = undefined
+
+  // static propTypes = {
+  //   attachEle: PropTypes.oneOfType([
+  //     PropTypes.node
+  //   ]).isRequired,
+  //   className: PropTypes.string,
+  //   show: PropTypes.bool
+  // }
+
+  static defaultProps = {
+    show: false,
+    topGap: 2,
+    leftGap: 0
+  }
+
+  componentDidUpdate () {
+    render(this.renderChildren(), this.container)
+  }
+
+  componentDidMount () {
+    this.getContainer()
+  }
+
+  componentWillUnmount () {
+    document.body.removeChild(this.container)
+  }
+
+  getOffset (ele) {
+    let offset = {
+      left: 0,
+      top: 0
+    }
+    while (ele && ele !== document.body) {
+      offset.top += ele.offsetTop
+      offset.left += ele.offsetLeft
+      ele = ele.offsetParent
+    }
+
+    return offset
+  }
+
+  renderChildren () {
+    const {
+      children,
+      className,
+      show,
+      attachEle,
+      topGap,
+      leftGap
+    } = this.props
+    const width = attachEle.offsetWidth
+    const height = attachEle.offsetHeight
+    const offset = this.getOffset(attachEle)
+    const left = offset.left + leftGap + 'px'
+    const top = offset.top + topGap + height + 'px'
+    window.attachEle = attachEle
+
+    return (
+      <div className={classNames(className, 'hi-popper__container', {hide: !show})} style={{left, top, width}}>
+        { children }
+      </div>
+    )
+  }
+
+  getContainer () {
+    const container = document.createElement('div')
+    container.style.position = 'absolute'
+    container.style.top = '0'
+    container.style.left = '0'
+    container.style.width = '100%'
+    // const child = React.Children.only(this.props.children)
+
+    document.body.appendChild(container)
+
+    this.container = container
+  }
+
+  render () {
+    return null
+  }
+}
diff --git a/components/popper/index.scss b/components/popper/index.scss
@@ -0,0 +1,7 @@
+
+.hi-popper__container {
+  position: absolute;
+  .hide {
+    display: none;
+  }
+}
diff --git a/components/select/Option.js b/components/select/Option.js
@@ -0,0 +1,34 @@
+/* @flow */
+
+import { Component } from 'react'
+import PropTypes from 'prop-types'
+
+class Option extends Component {
+  componentWillMount () {
+    const {
+      name,
+      id,
+      children
+    } = this.props
+
+    this.parent().addOption({
+      name,
+      id,
+      children
+    })
+  }
+
+  parent () {
+    return this.context.component
+  }
+
+  render () {
+    return null
+  }
+}
+
+Option.contextTypes = {
+  component: PropTypes.any
+}
+
+export default Option