init

Author: progrape

Diff for: .DS_Store

@@ -0,0 +1,4 @@
+{
+  "stage": 2,
+  "optional": ["es7.classProperties"]
+}

Diff for: .babelrc

@@ -0,0 +1,21 @@
+{
+  "ecmaFeatures": {
+    "jsx": true,
+    "modules": true
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "parser": "babel-eslint",
+  "rules": {
+    "quotes": [2, "single"],
+    "strict": [2, "never"],
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/react-in-jsx-scope": 2
+  },
+  "plugins": [
+    "react"
+  ]
+}

Diff for: .eslintrc

@@ -0,0 +1,5 @@
+.idea
+coverage
+lib
+node_modules
+npm-debug.log

Diff for: .gitignore

@@ -0,0 +1,8 @@
+.*rc
+.*.yml
+.idea
+webpack.config.*
+docs
+test
+example
+coverage

Diff for: .npmignore

@@ -0,0 +1,5 @@
+language: node_js
+node_js:
+  - "stable"
+script:
+  - npm test

Diff for: .travis.yml

@@ -0,0 +1,99 @@
+WeUI 为微信 Web 服务量身设计  [![Build Status](https://travis-ci.org/weui/react-weui.svg?branch=master)](https://travis-ci.org/weui/react-weui) [![npm version](https://img.shields.io/npm/v/react-weui.svg)](https://www.npmjs.org/package/react-weui)
+====
+
+
+### WeUI
+
+WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含`button`、`cell`、`dialog`、 `progress`、`toast`、`article`、`icon`等各式组件。
+
+[https://github.com/weui/weui](https://github.com/weui/weui)
+
+### React-WeUI
+
+使用`react`的方式来构建界面
+
+### 目录结构
+
+```
+react-weui
+├── README.md
+├── docs                    # 文档说明
+├── example                 # 示例代码
+├── index.js                # react-weui
+├── package.json            # package.json
+├── src                     # react-weui组件源码
+├── test                    # 测试文件
+└── webpack.config.js       # webpack配置文件
+```
+
+### 安装
+
+```
+npm install weui react-weui --save
+```
+
+### 使用
+
+```javascript
+// app.js
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import WeUI from 'react-weui';
+import 'weui';
+
+const {Button} = WeUI;
+
+class App extends React.Component {
+    render() {
+        return (
+            <Button>hello wechat</Button>
+        );
+    }
+}
+
+ReactDOM.render((
+    <App/>
+), document.getElementById('container'));
+
+```
+
+### 开发
+
+```
+git clone https://github.com/weui/react-weui
+cd react-weui
+npm install
+npm start
+```
+
+
+### 文档
+
+- [快速上手](./docs/installation.md)
+- [ActionSheet](./docs/actionsheet.md)
+- [Button](./docs/button.md)
+- [Cell](./docs/cell.md)
+- [Dialog](./docs/dialog.md)
+- [Form](./docs/form.md)
+- [Icon](./docs/icon.md)
+- [Mask](./docs/mask.md)
+- [Msg](./docs/msg.md)
+- [Progress](./docs/progress.md)
+- [Toast](./docs/toast.md)
+
+### 体验
+
+![react-weui](./docs/qrcode.png)
+
+[https://weui.github.io/react-weui](https://weui.github.io/react-weui)
+
+### License
+
+The MIT License([http://opensource.org/licenses/MIT](http://opensource.org/licenses/MIT))
+ 
+请自由地享受和参与开源
+
+### 贡献
+
+如果你有好的意见或建议，欢迎给我们提 issue 或 pull request，为提升微信 web 体验贡献力量

Diff for: README.md

@@ -0,0 +1,14 @@
+
+
+### 目录
+- [快速上手](./installation.md)
+- [ActionSheet](./actionsheet.md)
+- [Button](./button.md)
+- [Cell](./cell.md)
+- [Dialog](./dialog.md)
+- [Form](./form.md)
+- [Icon](./icon.md)
+- [Mask](./mask.md)
+- [Msg](./msg.md)
+- [Progress](./progress.md)
+- [Toast](./toast.md)

Diff for: docs/README.md

@@ -0,0 +1,87 @@
+
+
+### ActionSheet
+
+用于显示包含一系列可交互的动作集合，包括说明、跳转等。由底部弹出，一般用于响应用户对页面的点击。
+
+#### 属性
+
+属性名| 类型 | 默认值 | 可选值 | 备注 |
+------|------|--------|--------|------|
+menus |array |[ ]      |        |菜单描述，至少包含`label`属性|
+actions|array|[ ]      |        |动作描述，至少包含`label`属性|
+
+例如：
+```javascript
+const menus = [{
+        label: '拍照',
+        onClick: ()=>{
+    
+        }
+    }, {
+        label: '从手机相册中选择',
+        onClick: ()=>{
+    
+        }
+    }];
+
+const actions = [{
+        label: '取消',
+        onClick: ()=>{
+            this.refs.actionsheet.hide();
+        }
+    }];
+```
+
+#### 方法
+
+- show 显示ActionSheet
+
+- hide 隐藏ActionSheet
+
+#### 示例
+
+```javascript
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {ActionSheet, Button} from '../../index';
+
+class App extends React.Component {
+
+    state = {
+        menus: [{
+            label: '拍照',
+            onClick: ()=>{
+
+            }
+        }, {
+            label: '从手机相册中选择',
+            onClick: ()=>{
+
+            }
+        }],
+        actions: [{
+            label: '取消',
+            onClick: ()=>{
+                this.refs.actionsheet.hide();
+            }
+        }]
+    };
+
+    handleClick() {
+        this.refs.actionsheet.show();
+    }
+    render() {
+        return (
+            <section style={{padding: `15px`}}>
+                <Button onClick={this.handleClick.bind(this)}>选择</Button>
+                <ActionSheet ref="actionsheet" menus={this.state.menus} actions={this.state.actions} />
+            </section>
+        );
+    }
+}
+
+ReactDOM.render((
+    <App/>
+), document.getElementById('container'));
+```

Diff for: docs/actionsheet.md

@@ -0,0 +1,67 @@
+
+
+### 按钮
+
+按钮常见的操作场景：确定(primary)、取消(default)、警示(warn).
+
+### 属性
+
+属性名称  | 类型 | 默认值 | 可选值
+------------- | ------------- | --------| -------------
+type  | string | primary | primary, default, warn
+size  | string   | normal| normal, small
+plain | bool | false | false, true | 是否为空心按钮
+disabled | bool | false | false, true | 是否为禁用状态
+
+
+### 示例：
+
+```javascript
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {Button} from 'react-weui';
+
+ReactDOM.render((
+    <section>
+        <Button type="primary">确认</Button>
+        <Button type="default">取消</Button>
+        <Button type="warn">警告</Button>
+        
+        <Button type="primary" size="small">警告</Button>
+    </section>
+), document.getElementById('container'));
+```
+
+
+### 按钮组
+
+按钮组(ButtonArea), 通常用在Form, Msg底部,包裹1个或多个按钮. 排列方向可以分为水平排列(horizontal)和垂直排列(vertical).
+
+
+### 属性
+
+属性名称  | 类型 | 默认值 | 可选值
+------------- | ------------- | --------| -------------
+direction  | string | vertical | vertical, horizontal | 按钮排列方向
+
+### 示例
+
+```javascript
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {ButtonArea, Button} from 'react-weui';
+
+ReactDOM.render((
+    <section>
+        <ButtonArea>
+            <Button>确定</Button>
+            <Button type="default">取消</Button>
+        </ButtonArea>
+        
+        <ButtonArea direction="horizontal">
+            <Button>确定</Button>
+            <Button type="default">取消</Button>
+        </ButtonArea>
+    </section>
+), document.getElementById('container'));
+```