Pannel API break change

ZhongAnTech · Sep 7, 2017 · 7f3bfbd · 7f3bfbd
1 parent 9daa684
commit 7f3bfbd
Show file tree

Hide file tree

Showing 35 changed files with 235 additions and 295 deletions.
diff --git a/components/Panel/Panel.jsx b/components/Panel/Panel.jsx
@@ -4,14 +4,14 @@ import classnames from 'classnames';
 
 class Panel extends PureComponent {
   render() {
-    const { prefixCls, className, children, ...others } = this.props;
+    const { prefixCls, className, children } = this.props;
 
     const cls = classnames({
       [`${prefixCls}`]: true,
       [className]: !!className,
     });
 
-    return <div {...others} className={cls}>{children}</div>;
+    return <div className={cls}>{children}</div>;
   }
 }
 
@@ -22,7 +22,6 @@ Panel.propTypes = {
 
 Panel.defaultProps = {
   prefixCls: 'za-panel',
-  className: null,
 };
 
 export default Panel;
diff --git a/components/Panel/PanelFooter.jsx b/components/Panel/PanelFooter.jsx
@@ -4,14 +4,19 @@ import classnames from 'classnames';
 
 class PanelFooter extends PureComponent {
   render() {
-    const { prefixCls, className, children, ...others } = this.props;
+    const { prefixCls, className, title, more } = this.props;
 
     const cls = classnames({
-      [`${prefixCls}`]: true,
+      [`${prefixCls}-footer`]: true,
       [className]: !!className,
     });
 
-    return <div {...others} className={cls}>{children}</div>;
+    return (
+      <div className={cls}>
+        { title && <div className={`${prefixCls}-title`}>{title}</div> }
+        { more && <div className={`${prefixCls}-more`}>{more}</div> }
+      </div>
+    );
   }
 }
 
@@ -21,8 +26,7 @@ PanelFooter.propTypes = {
 };
 
 PanelFooter.defaultProps = {
-  prefixCls: 'za-panel-footer',
-  className: null,
+  prefixCls: 'za-panel',
 };
 
 export default PanelFooter;
diff --git a/components/Panel/PanelHeader.jsx b/components/Panel/PanelHeader.jsx
@@ -4,14 +4,19 @@ import classnames from 'classnames';
 
 class PanelHeader extends PureComponent {
   render() {
-    const { prefixCls, className, children, ...others } = this.props;
+    const { prefixCls, className, title, more } = this.props;
 
     const cls = classnames({
-      [`${prefixCls}`]: true,
+      [`${prefixCls}-header`]: true,
       [className]: !!className,
     });
 
-    return <div {...others} className={cls}>{children}</div>;
+    return (
+      <div className={cls}>
+        { title && <div className={`${prefixCls}-title`}>{title}</div> }
+        { more && <div className={`${prefixCls}-more`}>{more}</div> }
+      </div>
+    );
   }
 }
 
@@ -21,8 +26,7 @@ PanelHeader.propTypes = {
 };
 
 PanelHeader.defaultProps = {
-  prefixCls: 'za-panel-header',
-  className: null,
+  prefixCls: 'za-panel',
 };
 
 export default PanelHeader;
diff --git a/components/Panel/PanelMore.jsx b/components/Panel/PanelMore.jsx
diff --git a/components/Panel/PanelTitle.jsx b/components/Panel/PanelTitle.jsx
diff --git a/components/Panel/__tests__/__snapshots__/index.test.jsx.snap b/components/Panel/__tests__/__snapshots__/index.test.jsx.snap
@@ -25,6 +25,17 @@ exports[`Panel renders correctly 1`] = `
   </div>
   <div
     class="za-panel-footer"
-  />
+  >
+    <div
+      class="za-panel-title"
+    >
+      title
+    </div>
+    <div
+      class="za-panel-more"
+    >
+      more
+    </div>
+  </div>
 </div>
 `;
diff --git a/components/Panel/__tests__/index.test.jsx b/components/Panel/__tests__/index.test.jsx
@@ -7,12 +7,9 @@ describe('Panel', () => {
   it('renders correctly', () => {
     const wrapper = render(
       <Panel>
-        <Panel.Header>
-          <Panel.Title>title</Panel.Title>
-          <Panel.More>more</Panel.More>
-        </Panel.Header>
+        <Panel.Header title="title" more="more" />
         <Panel.Body>body</Panel.Body>
-        <Panel.Footer />
+        <Panel.Footer title="title" more="more" />
       </Panel>
     );
     expect(toJson(wrapper)).toMatchSnapshot();

diff --git a/components/Panel/index.js b/components/Panel/index.js
@@ -2,13 +2,9 @@ import Panel from './Panel';
 import PanelHeader from './PanelHeader';
 import PanelBody from './PanelBody';
 import PanelFooter from './PanelFooter';
-import PanelTitle from './PanelTitle';
-import PanelMore from './PanelMore';
 
 Panel.Header = PanelHeader;
 Panel.Body = PanelBody;
 Panel.Footer = PanelFooter;
-Panel.Title = PanelTitle;
-Panel.More = PanelMore;
 
 export default Panel;
diff --git a/docs/zh-cn/components/Panel.md b/docs/zh-cn/components/Panel.md
@@ -0,0 +1,73 @@
+# 面板 Panel
+
+[demo页面](https://zhongantecheng.github.io/zarm/#/panel)
+
+### 引入
+
+```js
+import { Panel } from 'zarm';
+```
+
+### 代码演示
+
+#### 基本用法
+
+###### 普通
+```jsx
+<Panel>
+  <Panel.Header title="普通" />
+  <Panel.Body>body</Panel.Body>
+</Panel>
+```
+
+###### 带更多按钮
+```jsx
+<Panel>
+  <Panel.Header title="带更多按钮" more={<a onClick={() => alert('click more')}>更多</a>} />
+  <Panel.Body>body</Panel.Body>
+</Panel>
+```
+
+###### 带底部
+```jsx
+<Panel>
+  <Panel.Header title="带底部" />
+  <Panel.Body>body</Panel.Body>
+  <Panel.Footer title="左侧文案" more="右侧文案" />
+</Panel>
+```
+
+
+### API
+
+#### Panel
+
+| 属性 | 类型 | 默认值 | 可选值／参数 | 说明 |
+| :--- | :--- | :--- | :--- | :--- |
+| prefixCls | string | za-panel | | 类名前缀 |
+| className | string | | | 追加类名 |
+| children | React.element | | | 内容 |
+
+
+#### Panel.Header
+
+| 属性 | 类型 | 默认值 | 可选值／参数 | 说明 |
+| :--- | :--- | :--- | :--- | :--- |
+| prefixCls | string | za-panel | | 类名前缀 |
+| className | string | | | 追加类名 |
+| title | React.element | | | 标题 |
+| more | React.element | | | 更多 |
+
+
+#### Panel.Footer
+
+| 属性 | 类型 | 默认值 | 可选值／参数 | 说明 |
+| :--- | :--- | :--- | :--- | :--- |
+| prefixCls | string | za-panel | | 类名前缀 |
+| className | string | | | 追加类名 |
+| title | React.element | | | 标题 |
+| more | React.element | | | 更多 |
+
+
+
+
diff --git a/examples/index.js b/examples/index.js
@@ -162,6 +162,14 @@ const rootRoute = {
         });
       },
     },
+    {
+      path: 'panel',
+      getComponent(location, cb) {
+        require.ensure([], (require) => {
+          cb(null, require('./pages/PanelPage'));
+        });
+      },
+    },
     {
       path: 'progress',
       getComponent(location, cb) {

diff --git a/examples/pages/district.js → examples/mock/district.js b/examples/pages/district.js → examples/mock/district.js
diff --git a/examples/pages/ActionSheetPage.jsx b/examples/pages/ActionSheetPage.jsx
@@ -26,9 +26,7 @@ class Page extends Component {
         <Header title="动作面板 ActionSheet" />
         <main>
           <Panel>
-            <Panel.Header>
-              <Panel.Title>提示信息</Panel.Title>
-            </Panel.Header>
+            <Panel.Header title="提示信息" />
             <Panel.Body>
 
               <Cell

diff --git a/examples/pages/BadgePage.jsx b/examples/pages/BadgePage.jsx
@@ -13,9 +13,7 @@ class Page extends Component {
         <Header title="徽标 Badge" />
         <main>
           <Panel>
-            <Panel.Header>
-              <Panel.Title>基本</Panel.Title>
-            </Panel.Header>
+            <Panel.Header title="基本" />
             <Panel.Body>
               <Cell hasArrow title="点状" description={<Badge shape="dot" />} onClick={() => {}} />
               <Cell hasArrow title="直角" description={<Badge text="免费" />} onClick={() => {}} />
@@ -26,9 +24,7 @@ class Page extends Component {
           </Panel>
 
           <Panel>
-            <Panel.Header>
-              <Panel.Title>上标位置</Panel.Title>
-            </Panel.Header>
+            <Panel.Header title="上标位置" />
             <Panel.Body className="custom-panel">
               <div className="box">
                 <Badge sup shape="dot"><div className="box-item" /></Badge>

diff --git a/examples/pages/ButtonPage.jsx b/examples/pages/ButtonPage.jsx
@@ -13,9 +13,7 @@ class Page extends Component {
         <Header title="按钮 Button" />
         <main>
           <Panel>
-            <Panel.Header>
-              <Panel.Title>基本</Panel.Title>
-            </Panel.Header>
+            <Panel.Header title="基本" />
             <Panel.Body>
               <Button theme="primary">普通按钮</Button>
               <Button theme="primary" block>块级按钮</Button>
@@ -25,9 +23,7 @@ class Page extends Component {
           </Panel>
 
           <Panel>
-            <Panel.Header>
-              <Panel.Title>幽灵按钮</Panel.Title>
-            </Panel.Header>
+            <Panel.Header title="幽灵按钮" />
             <Panel.Body>
               <Button block bordered>幽灵按钮</Button>
               <Button block bordered active>激活状态的按钮</Button>
@@ -39,9 +35,7 @@ class Page extends Component {
           </Panel>
 
           <Panel>
-            <Panel.Header>
-              <Panel.Title>多主题</Panel.Title>
-            </Panel.Header>
+            <Panel.Header title="主题" />
             <Panel.Body>
               <Button>default</Button>
               <Button theme="primary">primary</Button>
@@ -53,9 +47,7 @@ class Page extends Component {
           </Panel>
 
           <Panel>
-            <Panel.Header>
-              <Panel.Title>按钮大小</Panel.Title>
-            </Panel.Header>
+            <Panel.Header title="大小" />
             <Panel.Body>
               <Button theme="primary" size="xl">xl</Button>
               <Button theme="primary" size="lg">lg</Button>
@@ -66,9 +58,7 @@ class Page extends Component {
           </Panel>
 
           <Panel>
-            <Panel.Header>
-              <Panel.Title>多形状</Panel.Title>
-            </Panel.Header>
+            <Panel.Header title="形状" />
             <Panel.Body>
               <Button bordered shape="radius">圆角按钮</Button>
               <Button bordered shape="round">椭圆角按钮</Button>
@@ -78,9 +68,7 @@ class Page extends Component {
           </Panel>
 
           <Panel>
-            <Panel.Header>
-              <Panel.Title>带icon的按钮</Panel.Title>
-            </Panel.Header>
+            <Panel.Header title="带Icon" />
             <Panel.Body>
               <Button bordered shape="radius" icon={<Icon type="right-round" theme="success" />}>正确</Button>
               <Button bordered shape="radius" icon={<Icon type="wrong-round" theme="error" />}>错误</Button>