feat(action): 初步完成action 组件的文档

docs/markdown/action-sheet.md

@@ -0,0 +1,41 @@
+# ActionSheet 上拉菜单
+
+---
+
+## 使用指南
+
+在 Taro 文件中引入组件
+
+:::demo
+
+```js
+import { AtActionSheet } from "taro-ui"
+```
+
+:::
+
+## 一般用法
+
+:::demo
+
+```html
+<AtActionSheet
+  cancleText='取消'
+  title='清除位置信息后， 别人将不能查看到你这里最多显示两行'>
+  <AtActionSheetItem>按钮一</AtActionSheetItem>
+  <AtActionSheetItem>按钮二</AtActionSheetItem>
+  <AtActionSheetItem>
+    <Text className='danger'>清除位置信息并退出</Text>
+  </AtActionSheetItem>
+</AtActionSheet>
+```
+
+:::
+
+## AtActionSheet 参数
+
+| 参数       | 说明           | 类型    | 可选值 | 默认值 |
+| ---------- | -------------- | ------- | ------ | ------ |
+| title      | 元素的标题     | String  | -      | -      |
+| isOpened   | 是否展示元素   | Boolean | -      | -      |
+| cancleText | 取消按钮的内容 | String  | -      | -      |

docs/markdown/activity-indicator.md

@@ -0,0 +1,34 @@
+# ActivityIndicator 活动指示器
+
+---
+
+## 使用指南
+
+在 Taro 文件中引入组件
+
+:::demo
+
+```js
+import { AtActivityIndicator } from "taro-ui"
+```
+
+:::
+
+## 一般用法
+
+:::demo
+
+```html
+<AtActivityIndicator></AtActivityIndicator>
+```
+
+:::
+
+## AtActivityIndicator 参数
+
+| 参数    | 说明             | 类型   | 可选值            | 默认值 |
+| ------- | ---------------- | ------ | ----------------- | ------ |
+| mode    | 元素的类型       | String | `center`,`normal` | -      |
+| size    | loading 图的大小 | Number | -                 | -      |
+| color   | loading 图的样色 | String | -                 | -      |
+| content | 元素的内容文本   | String | -                 | -      |

docs/markdown/modal.md

@@ -0,0 +1,40 @@
+# Modal 模态框
+
+---
+
+## 使用指南
+
+在 Taro 文件中引入组件
+
+:::demo
+
+```js
+import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from "taro-ui"
+```
+
+:::
+
+## 一般用法
+
+:::demo
+
+```html
+<AtModal>
+  <AtModalHeader>标题</AtModalHeader>
+  <AtModalContent>
+    <View className='modal-content'>
+      这里是正文内容，欢迎加入京东凹凸实验室
+      这里是正文内容，欢迎加入京东凹凸实验室
+      这里是正文内容，欢迎加入京东凹凸实验室
+    </View>
+  </AtModalContent>
+  <AtModalAction>
+    <Button>取消</Button>
+    <Button className='serious-button'>
+      确定
+    </Button>
+  </AtModalAction>
+</AtModal>
+```
+
+:::

docs/markdown/progress.md

@@ -0,0 +1,35 @@
+# Progress 进度条
+
+---
+
+## 使用指南
+
+在 Taro 文件中引入组件
+
+:::demo
+
+```js
+import { AtProgress } from "taro-ui"
+```
+
+:::
+
+## 一般用法
+
+:::demo
+
+```html
+<AtProgress></AtProgress>
+```
+
+:::
+
+## AtProgress 参数
+
+| 参数          | 说明         | 类型    | 可选值                     | 默认值  |
+| ------------- | ------------ | ------- | -------------------------- | ------- |
+| color         | 元素的颜色   | String  | -                          | -       |
+| status        | 元素的状态   | String  | `active`,`fail`,`finished` | -       |
+| percent       | 元素的进度   | Number  | -                          | -       |
+| strokeWidth   | 元素的规格   | Number  | -                          | -       |
+| isHidePercent | 是否隐藏文字 | Boolean | -                          | `false` |

docs/markdown/toast.md

@@ -0,0 +1,36 @@
+# Toast 轻提示
+
+---
+
+## 使用指南
+
+在 Taro 文件中引入组件
+
+:::demo
+
+```js
+import { AtToast } from "taro-ui"
+```
+
+:::
+
+## 一般用法
+
+:::demo
+
+```html
+<AtToast></AtToast>
+```
+
+:::
+
+## AtToast 参数
+
+| 参数         | 说明          | 类型    | 可选值 | 默认值  |
+| ------------ | ------------- | ------- | ------ | ------- |
+| text         | 元素的内容    | String  | -      | -       |
+| iconType     | icon 的种类   | String  | -      | -       |
+| iconSize     | icon 的大小   | Number  | -      | -       |
+| iconColor    | icon 的颜色   | Number  | -      | -       |
+| isOpened     | 是否展现组件  | Boolean | -      | -       |
+| isHiddenIcon | 是否隐藏 icon | Boolean | -      | `false` |

docs/nav.config.yml

@@ -37,6 +37,18 @@ components:
             name: Grid
           - title: FloatLayout 浮动布局
             name: FloatLayout
+      - title: 操作反馈
+        items:
+          - title: Toast 轻提示
+            name: Toast
+          - title: Modal 模态框
+            name: Modal
+          - title: Progress 进度条
+            name: Progress
+          - title: ActionSheet 上拉菜单
+            name: ActionSheet
+          - title: ActivityIndicator 活动指示器
+            name: ActivityIndicator
           # - title: 布局
           #   name: Layout
           # - title: 标签

docs/view/ActionSheet/index.jsx

@@ -0,0 +1,10 @@
+import * as Nerv from 'nervjs'
+import ActionSheetDoc from '@md/action-sheet.md'
+
+class ActionSheetView extends Nerv.Component {
+  render () {
+    return <ActionSheetDoc />
+  }
+}
+
+export default ActionSheetView

docs/view/ActivityIndicator/index.jsx

@@ -0,0 +1,10 @@
+import * as Nerv from 'nervjs'
+import ActivityIndicatorDoc from '@md/activity-indicator.md'
+
+class ActivityIndicatorView extends Nerv.Component {
+  render () {
+    return <ActivityIndicatorDoc />
+  }
+}
+
+export default ActivityIndicatorView

docs/view/Modal/index.jsx

@@ -0,0 +1,10 @@
+import * as Nerv from 'nervjs'
+import ModalDoc from '@md/modal.md'
+
+class ModalView extends Nerv.Component {
+  render () {
+    return <ModalDoc />
+  }
+}
+
+export default ModalView

docs/view/Progress/index.jsx

@@ -0,0 +1,10 @@
+import * as Nerv from 'nervjs'
+import ProgressDoc from '@md/progress.md'
+
+class ProgressView extends Nerv.Component {
+  render () {
+    return <ProgressDoc />
+  }
+}
+
+export default ProgressView

docs/view/Toast/index.jsx

@@ -0,0 +1,10 @@
+import * as Nerv from 'nervjs'
+import ToastDoc from '@md/toast.md'
+
+class ToastView extends Nerv.Component {
+  render () {
+    return <ToastDoc />
+  }
+}
+
+export default ToastView

src/components/progress/index.js

@@ -1,12 +1,14 @@
 import Taro from '@tarojs/taro'
 import { View } from '@tarojs/components'
 
+import PropTypes from 'prop-types'
+
 import './index.scss'
 
 export default class AtProgress extends Taro.Component {
   render () {
     let { percent } = this.props
-    const { strokeWidth, color, status, hidePercent } = this.props
+    const { strokeWidth, color, status, isHidePercent } = this.props
 
     if (percent < 0) {
       percent = 0
@@ -36,10 +38,18 @@ export default class AtProgress extends Taro.Component {
             />
           </View>
         </View>
-        {!hidePercent && (
+        {!isHidePercent && (
           <View className='at-progress__content'>{percent}%</View>
         )}
       </View>
     )
   }
 }
+
+AtProgress.propTypes = {
+  color: PropTypes.string,
+  status: PropTypes.string,
+  percent: PropTypes.number,
+  strokeWidth: PropTypes.number,
+  isHidePercent: PropTypes.bool,
+}

src/components/toast/index.js

@@ -1,9 +1,11 @@
 import Taro from '@tarojs/taro'
 import { View, Icon } from '@tarojs/components'
 
+import PropTypes from 'prop-types'
+
 import './index.scss'
 
-export default class Toast extends Taro.Component {
+export default class AtToast extends Taro.Component {
   constructor (props) {
     super(...arguments)
 
@@ -69,7 +71,7 @@ export default class Toast extends Taro.Component {
 
   render () {
     const { isOpened } = this.state
-    const { text, hiddenIcon, iconSize, iconType, iconColor } = this.props
+    const { text, isHiddenIcon, iconSize, iconType, iconColor } = this.props
 
     const iconClass = [
       'at-toast-content__icon',
@@ -79,7 +81,7 @@ export default class Toast extends Taro.Component {
     return isOpened ? (
       <View className='at-toast' onClick={this.handleClick}>
         <View className='at-toast-content'>
-          {!hiddenIcon && (
+          {!isHiddenIcon && (
             <View className={iconClass}>
               <Icon type={iconType} color={iconColor} size={iconSize} />
             </View>
@@ -91,6 +93,15 @@ export default class Toast extends Taro.Component {
   }
 }
 
-Toast.defaultProps = {
+AtToast.defaultProps = {
   duration: 3000
 }
+
+AtToast.propTypes = {
+  text: PropTypes.string,
+  isOpened: PropTypes.bool,
+  iconType: PropTypes.string,
+  iconSize: PropTypes.string,
+  iconColor: PropTypes.string,
+  isHiddenIcon: PropTypes.bool
+}

src/pages/action/progress/index.js

@@ -75,7 +75,7 @@ export default class ProgressPage extends Taro.Component {
                 <AtProgress percent='25' />
               </View>
               <View className='example-item'>
-                <AtProgress percent='75' hidePercent />
+                <AtProgress percent='75' isHidePercent />
               </View>
             </View>
           </View>

src/pages/action/toast/index.js

@@ -12,7 +12,7 @@ const INIT_STATE = {
   iconSize: 100,
   iconColor: 'white',
   iconType: 'cancel',
-  hiddenIcon: false
+  isHiddenIcon: false
 }
 
 export default class ToastPage extends Component {
@@ -40,7 +40,7 @@ export default class ToastPage extends Component {
       iconSize,
       iconType,
       text,
-      hiddenIcon
+      isHiddenIcon
     } = this.state
     return (
       <View className='page'>
@@ -112,7 +112,7 @@ export default class ToastPage extends Component {
           iconSize={iconSize}
           iconType={iconType}
           iconColor={iconColor}
-          hiddenIcon={hiddenIcon}
+          isHiddenIcon={isHiddenIcon}
         />
       </View>
     )