文档完善,修复Mask、Icon组件bug,Progress组件type属性更名为shape

ZhongAnTech · Aug 25, 2017 · 8a00b59 · 8a00b59
1 parent 999d5f5
commit 8a00b59
Show file tree

Hide file tree

Showing 45 changed files with 1,046 additions and 154 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1 +1,5 @@
-node_modules/
+node_modules/
+assets/
+dist/
+lib/
+coverage/
diff --git a/components/Alert/Alert.jsx b/components/Alert/Alert.jsx
@@ -25,13 +25,15 @@ class Alert extends PureComponent {
 
 Alert.propTypes = {
   prefixCls: PropTypes.string,
+  animationType: Modal.propTypes.animationType,
   message: PropTypes.string,
   cancelText: PropTypes.string,
   onCancel: PropTypes.func,
 };
 
 Alert.defaultProps = {
   prefixCls: 'za-alert',
+  animationType: 'zoom',
   message: '',
   cancelText: '关闭',
   onCancel() {},

diff --git a/components/Badge/Badge.jsx b/components/Badge/Badge.jsx
@@ -4,7 +4,7 @@ import classnames from 'classnames';
 
 class Badge extends PureComponent {
   render() {
-    const { prefixCls, className, theme, shape, sup, text, children } = this.props;
+    const { prefixCls, className, theme, shape, sup, text, children, ...others } = this.props;
 
     const cls = classnames({
       [`${prefixCls}`]: true,
@@ -19,7 +19,7 @@ class Badge extends PureComponent {
     });
 
     return (
-      <span className={cls}>
+      <span className={cls} {...others}>
         {children}
         <sup className={supCls}>{text}</sup>
       </span>

diff --git a/components/Confirm/Confirm.jsx b/components/Confirm/Confirm.jsx
@@ -26,6 +26,7 @@ class Confirm extends PureComponent {
 
 Confirm.propTypes = {
   prefixCls: PropTypes.string,
+  animationType: Modal.propTypes.animationType,
   message: PropTypes.string,
   okText: PropTypes.string,
   cancelText: PropTypes.string,
@@ -35,6 +36,7 @@ Confirm.propTypes = {
 
 Confirm.defaultProps = {
   prefixCls: 'za-confirm',
+  animationType: 'zoom',
   message: '',
   okText: '确定',
   cancelText: '取消',

diff --git a/components/Mask/Mask.jsx b/components/Mask/Mask.jsx
@@ -4,15 +4,15 @@ import classnames from 'classnames';
 
 class Mask extends PureComponent {
   render() {
-    const { prefixCls, className, visible, type, onClose } = this.props;
+    const { prefixCls, className, visible, type, onClose, ...others } = this.props;
     const markCls = classnames({
       [`${prefixCls}`]: true,
       [className]: !!className,
       [type]: !!type,
     });
 
     return visible
-      ? <div className={markCls} onClick={onClose} />
+      ? <div className={markCls} onClick={onClose} {...others} />
       : null;
   }
 }

diff --git a/components/Modal/Modal.jsx b/components/Modal/Modal.jsx
@@ -64,14 +64,14 @@ class Modal extends PureComponent {
   }
 
   render() {
-    const { prefixCls, className, animationType, animationDuration, width, minWidth, radius, onMaskClick, children } = this.props;
+    const { prefixCls, className, shape, animationType, animationDuration, width, onMaskClick, children } = this.props;
     const { isShow, isPending, animationState } = this.state;
 
     const cls = {
       modal: classnames({
         [`${prefixCls}`]: true,
         [className]: !!className,
-        radius,
+        [`shape-${shape}`]: !!shape,
         [`fade-${animationState}`]: isPending,
       }),
       dialog: classnames({
@@ -91,7 +91,6 @@ class Modal extends PureComponent {
       },
       dialog: {
         width,
-        minWidth,
         WebkitAnimationDuration: `${animationDuration}ms`,
         animationDuration: `${animationDuration}ms`,
       },
@@ -129,6 +128,7 @@ class Modal extends PureComponent {
 Modal.propTypes = {
   prefixCls: PropTypes.string,
   className: PropTypes.string,
+  shape: PropTypes.oneOf(['radius']),
   visible: PropTypes.bool,
   animationType: PropTypes.oneOf([
     'fade', 'door', 'flip', 'rotate', 'zoom',
@@ -137,20 +137,17 @@ Modal.propTypes = {
   ]),
   animationDuration: PropTypes.number,
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  minWidth: PropTypes.number,
-  radius: PropTypes.bool,
   onMaskClick: PropTypes.func,
 };
 
 Modal.defaultProps = {
   prefixCls: 'za-modal',
   className: null,
+  shape: null,
   visible: false,
-  animationType: 'zoom',
+  animationType: 'fade',
   animationDuration: 200,
   width: '70%',
-  minWidth: 270,
-  radius: false,
   onMaskClick() {},
 };
 

diff --git a/components/Progress/Progress.jsx b/components/Progress/Progress.jsx
@@ -6,16 +6,16 @@ import Spinner from '../Spinner';
 class Progress extends PureComponent {
 
   render() {
-    const { prefixCls, className, theme, type, strokeWidth, percent, children, ...others } = this.props;
+    const { prefixCls, className, theme, shape, strokeWidth, percent, children, ...others } = this.props;
 
     const cls = classnames({
       [`${prefixCls}`]: true,
       [`theme-${theme}`]: !!theme,
-      [`${prefixCls}-${type}`]: !!type,
+      [`shape-${shape}`]: !!shape,
       [className]: !!className,
     });
 
-    const innerRender = type === 'circle'
+    const innerRender = shape === 'circle'
       ? <div className={`${prefixCls}-inner`}><Spinner theme={theme} strokeWidth={strokeWidth} percent={percent} /></div>
       : <div className={`${prefixCls}-inner`} style={{ height: strokeWidth }}><div className={`${prefixCls}-bg`} style={{ width: `${percent}%` }} /></div>
       ;
@@ -33,7 +33,7 @@ Progress.propTypes = {
   prefixCls: PropTypes.string,
   className: PropTypes.string,
   theme: Spinner.propTypes.theme,
-  type: PropTypes.oneOf(['line', 'circle']),
+  shape: PropTypes.oneOf(['line', 'circle']),
   strokeWidth: Spinner.propTypes.strokeWidth,
   percent: Spinner.propTypes.percent,
 
@@ -43,7 +43,7 @@ Progress.defaultProps = {
   prefixCls: 'za-progress',
   className: null,
   theme: Spinner.defaultProps.theme,
-  type: 'line',
+  shape: 'line',
   strokeWidth: Spinner.defaultProps.strokeWidth,
   percent: Spinner.defaultProps.percent,
 };

diff --git a/components/SwipeAction/SwipeAction.jsx b/components/SwipeAction/SwipeAction.jsx
@@ -257,7 +257,7 @@ SwipeAction.propTypes = {
 };
 
 SwipeAction.defaultProps = {
-  prefixCls: 'za-swipeAction',
+  prefixCls: 'za-swipeaction',
   left: [],
   right: [],
   moveTimeDuration: 300,

diff --git a/docs/zh-cn/SUMMARY.md b/docs/zh-cn/SUMMARY.md
@@ -19,4 +19,22 @@
 * 操作反馈
   * [动作面板 ActionSheet](components/ActionSheet.md)
   * [按钮 Button](components/Button.md)
+  * [模态框 Modal](components/Modal.md)
+  * [弹出框 Popup](components/Popup.md)
+  * [滑动操作 SwipeAction](components/SwipeAction.md)
+  * [轻提示 Toast](components/Toast.md)
+
+* 数据展示
+  * [徽标 Badge](components/Badge.md)
+  * [列表项 Cell](components/Cell.md)
+  * [图标 Icon](components/Icon.md)
+  * [消息 Message](components/Message.md)
+  * [通告栏 NoticeBar](components/NoticeBar.md)
+  * [进度条 Progress](components/Progress.md)
+  * [指示器 Spinner](components/Spinner.md)
+  * [图片轮播 Swipe](components/Swipe.md)
+  * [标签页 Tab](components/Tab.md)
+
+
+
 
diff --git a/docs/zh-cn/components/ActionSheet.md b/docs/zh-cn/components/ActionSheet.md
@@ -1,6 +1,6 @@
 # 动作面板 ActionSheet
 
-[demo页面](https://zhongantecheng.github.io/zarm/#/actionsheet)
+[demo页面](https://zhongantecheng.github.io/zarm/#/action-sheet)
 
 ### 引入
 
@@ -72,12 +72,12 @@ import { ActionSheet } from 'zarm';
 | 属性 | 类型 | 默认值 | 可选值／参数 | 说明 |
 | :--- | :--- | :--- | :--- | :--- |
 | prefixCls | string | za-switch | | 类名前缀 |
-| className | string | null | | 追加类名 |
-| shape | string | null | 'radius' | 形状 |
+| className | string | | | 追加类名 |
+| shape | string | | 'radius' | 形状 |
 | visible | bool | false | | 是否显示 |
 | actions | arrayOf(object) | [ ] | object: { theme, text, onClick } | 动作列表 |
 | onMaskClick | func | noop | | 点击遮罩层时触发的回调函数 |
-| onCancel | func | null | void | 显示取消菜单，点击时触发的回调函数 |
+| onCancel | func | | void | 显示取消菜单，点击时触发的回调函数 |
 | cancelText | string | '取消' |  | 取消菜单的文案 |
 
 

diff --git a/docs/zh-cn/components/Badge.md b/docs/zh-cn/components/Badge.md
@@ -0,0 +1,61 @@
+# 徽标 Badge
+
+[demo页面](https://zhongantecheng.github.io/zarm/#/badge)
+
+### 引入
+
+```js
+import { Badge } from 'zarm';
+```
+
+### 代码演示
+
+#### 基本用法
+
+###### 点状
+```jsx
+<Badge shape="dot" />
+```
+
+###### 直角
+```jsx
+<Badge text="免费" />
+```
+
+###### 圆角
+```jsx
+<Badge shape="radius" text="new" />
+```
+
+###### 椭圆形
+```jsx
+<Badge shape="round" text="999+" />
+```
+
+###### 圆形
+```jsx
+<Badge shape="circle" text={3} />
+```
+
+#### 上标位置
+```jsx
+<Badge sup shape="dot">
+  <div style={{ width: 30, height: 30, background: '#ddd' }}></div>
+</Badge>
+```
+
+
+### API
+
+| 属性 | 类型 | 默认值 | 可选值／参数 | 说明 |
+| :--- | :--- | :--- | :--- | :--- |
+| prefixCls | string | za-badge | | 类名前缀 |
+| className | string | | | 追加类名 |
+| theme | string | 'error' | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 |
+| shape | string | | 'dot', 'radius', 'round', 'circle' | 形状 |
+| text | any | | | 显示文字 |
+| sup | bool | false | | 是否上标位置 |
+
+
+
+
diff --git a/docs/zh-cn/components/Button.md b/docs/zh-cn/components/Button.md
@@ -71,16 +71,16 @@ import { Button } from 'zarm';
 | 属性 | 类型 | 默认值 | 可选值／参数 | 说明 |
 | :--- | :--- | :--- | :--- | :--- |
 | prefixCls | string | za-button | | 类名前缀 |
-| className | string | null | | 追加类名 |
-| theme | string | primary | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 |
-| size | string | null | 'xl', 'lg', 'sm', 'xs' | 大小 |
-| shape | string | null | 'radius', 'round', 'circle' | 形状 |
+| className | string | | | 追加类名 |
+| theme | string | 'default' | 'default', 'primary', 'info', 'success', 'warning', 'error' | 主题 |
+| size | string | | 'xl', 'lg', 'sm', 'xs' | 大小 |
+| shape | string | | 'radius', 'round', 'circle' | 形状 |
 | block | bool | false | | 是否为块级元素 |
 | bordered | bool | false | | 是否是幽灵按钮 |
 | disabled | bool | false | | 是否禁用 |
 | loading | bool | false | | 是否显示加载中 |
-| icon | React.element | null | | icon |
-| onChange | func | noop | \(value: bool\) | 值变化时触发的回调函数 |
+| icon | React.element | | | icon |
+| onClick | func | noop | | 点击后触发的回调函数 |
 
 
 

diff --git a/docs/zh-cn/components/Cell.md b/docs/zh-cn/components/Cell.md
@@ -0,0 +1,72 @@
+# 列表项 Cell
+
+[demo页面](https://zhongantecheng.github.io/zarm/#/cell)
+
+### 引入
+
+```js
+import { Cell } from 'zarm';
+```
+
+### 代码演示
+
+#### 基本用法
+
+###### 普通
+```jsx
+<Cell title="标题文字" />
+<Cell
+  title={
+    <div className="box">
+      <div className="box-title">标题文字</div>
+      <div className="box-description">描述文字</div>
+    </div>
+  }
+  />
+```
+
+###### 带描述
+```jsx
+<Cell title="标题文字" description="描述文字" />
+<Cell title="标题文字" description={<Icon type="right" />} />
+```
+
+###### 带图标、描述
+```jsx
+<Cell title="标题文字" icon={<Icon type="right" />} />
+<Cell title="标题文字" icon={<img alt="" src={require('../images/icons/state.png')} />} />
+```
+
+###### 带跳转
+```jsx
+<Cell hasArrow title="标题文字" onClick={() => {}} />
+```
+
+#### 提示信息
+```jsx
+<Cell
+  title="标题"
+  help={<Message theme="error" icon={<Icon type="info-round" />}>标题不能为空</Message>}>
+  <Input type="text" placeholder="请输入标题" />
+</Cell>
+```
+
+
+### API
+
+| 属性 | 类型 | 默认值 | 可选值／参数 | 说明 |
+| :--- | :--- | :--- | :--- | :--- |
+| prefixCls | string | za-cell | | 类名前缀 |
+| className | string | | | 追加类名 |
+| icon | any | | | 显示的图标 |
+| titile | any | | | 标题 |
+| description | any | | | 描述 |
+| hasArrow | bool | false | | 是否显示箭头 |
+| onClick | func | noop | | 点击后触发的回调函数 |
+| help | any | | | 下方提示信息，通常配合`Message`组件使用 |
+
+
+
+
+
+