From 370fbf643080796d8aab2f3e7de0dde007462e85 Mon Sep 17 00:00:00 2001
From: ShanaMaid <uestczeng@gmail.com>
Date: Sun, 27 May 2018 18:34:35 +0800
Subject: [PATCH] =?UTF-8?q?feat(ripple):=20=E6=B7=BB=E5=8A=A0Ripple?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=96=87=E6=A1=A3=E5=AE=9E=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Ripple/Ripple.tsx            |  5 ++---
 docs/pages/Ripple/api.tsx               | 25 +++++++++++++++++++++
 docs/pages/Ripple/demo/rippleCustom.md  |  2 ++
 docs/pages/Ripple/demo/rippleCustom.tsx | 13 +++++++++++
 docs/pages/Ripple/demo/rippleDemo.md    |  2 ++
 docs/pages/Ripple/demo/rippleDemo.tsx   | 21 +++++++++++++++++
 docs/pages/Ripple/index.md              |  4 ++++
 docs/pages/Ripple/index.tsx             | 30 +++++++++++++++++++++++++
 docs/pages/menu.tsx                     | 10 +++++++++
 docs/pages/routes.tsx                   | 11 ++++-----
 10 files changed, 115 insertions(+), 8 deletions(-)
 create mode 100644 docs/pages/Ripple/api.tsx
 create mode 100644 docs/pages/Ripple/demo/rippleCustom.md
 create mode 100644 docs/pages/Ripple/demo/rippleCustom.tsx
 create mode 100644 docs/pages/Ripple/demo/rippleDemo.md
 create mode 100644 docs/pages/Ripple/demo/rippleDemo.tsx
 create mode 100644 docs/pages/Ripple/index.md
 create mode 100644 docs/pages/Ripple/index.tsx

diff --git a/components/Ripple/Ripple.tsx b/components/Ripple/Ripple.tsx
index d357090..2860787 100644
--- a/components/Ripple/Ripple.tsx
+++ b/components/Ripple/Ripple.tsx
@@ -13,11 +13,11 @@ export interface IRippleProps extends IBaseComponent {
   /**
    * 波纹透明度
    */
-  opacity: number;
+  opacity?: number;
   /**
    * 波纹直径
    */
-  diameter: number;
+  diameter?: number;
 }
 
 export interface IRippleState {
@@ -29,7 +29,6 @@ export interface IRippleState {
  */
 export class Ripple extends Component<IRippleProps, IRippleState> {
   static defaultProps = {
-    color: '#4285f4',
     opacity: 0.3,
     diameter: 10,
   };
diff --git a/docs/pages/Ripple/api.tsx b/docs/pages/Ripple/api.tsx
new file mode 100644
index 0000000..003f9ca
--- /dev/null
+++ b/docs/pages/Ripple/api.tsx
@@ -0,0 +1,25 @@
+export default [
+  {
+    title: "API",
+    json: [
+      {
+        props: "color",
+        intro: "波纹颜色",
+        type: "string",
+        defaultValue: "-",
+      },
+      {
+        props: "opacity",
+        intro: "透明度",
+        type: "number",
+        defaultValue: "0.3",
+      },
+      {
+        props: "diameter",
+        intro: "波纹半径",
+        type: "number",
+        defaultValue: "10",
+      },
+    ]
+  }
+]
diff --git a/docs/pages/Ripple/demo/rippleCustom.md b/docs/pages/Ripple/demo/rippleCustom.md
new file mode 100644
index 0000000..219d30c
--- /dev/null
+++ b/docs/pages/Ripple/demo/rippleCustom.md
@@ -0,0 +1,2 @@
+#### 配合其他组件使用
+推荐配合`button`使用，可以提高交互体验。
diff --git a/docs/pages/Ripple/demo/rippleCustom.tsx b/docs/pages/Ripple/demo/rippleCustom.tsx
new file mode 100644
index 0000000..2a03b85
--- /dev/null
+++ b/docs/pages/Ripple/demo/rippleCustom.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Ripple, Icon, Button } from '../../../../components/';
+
+export default function () {
+  return (
+    <div>
+      <Ripple color="red" opacity={0.6}><Button type="primary"><Icon type="play"/>播放</Button></Ripple>
+      <Ripple color="blue"><Button type="primary"><Icon type="pause"/>暂停</Button></Ripple>
+      <Ripple color="yellow"><Button type="primary"><Icon type="skip-backward"/>上一首</Button></Ripple>
+      <Ripple color="green"><Button type="primary">下一首<Icon type="skip-forward"/></Button></Ripple>
+    </div>
+  )
+}
diff --git a/docs/pages/Ripple/demo/rippleDemo.md b/docs/pages/Ripple/demo/rippleDemo.md
new file mode 100644
index 0000000..f147052
--- /dev/null
+++ b/docs/pages/Ripple/demo/rippleDemo.md
@@ -0,0 +1,2 @@
+#### 简单的使用
+简单的波纹特效使用
diff --git a/docs/pages/Ripple/demo/rippleDemo.tsx b/docs/pages/Ripple/demo/rippleDemo.tsx
new file mode 100644
index 0000000..b633771
--- /dev/null
+++ b/docs/pages/Ripple/demo/rippleDemo.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Ripple, Card, Icon } from '../../../../components/';
+
+export default function () {
+  return (
+    <div>
+    <Ripple style={{width: '200px'}}color="red">
+      <Card 
+        title="标题"
+        extra={(
+        <div><span>更多</span><Icon type="more"/></div>
+        )}
+        border
+        shadow
+      >
+        <div>波纹包裹的card</div>
+      </Card>
+    </Ripple>
+  </div>
+  )
+}
diff --git a/docs/pages/Ripple/index.md b/docs/pages/Ripple/index.md
new file mode 100644
index 0000000..10e791f
--- /dev/null
+++ b/docs/pages/Ripple/index.md
@@ -0,0 +1,4 @@
+## Ripple 波纹
+用于包裹子组件，点击后有波纹特效。
+
+## 代码演示
diff --git a/docs/pages/Ripple/index.tsx b/docs/pages/Ripple/index.tsx
new file mode 100644
index 0000000..0b5776e
--- /dev/null
+++ b/docs/pages/Ripple/index.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Component } from 'react';
+import * as md from './index.md';
+import Markdown from '../../components/Markdown/';
+import CodeBox from '../../components/CodeBox/';
+import ApiBox from '../../components/ApiBox/';
+import Api from './api';
+
+import RippleDemo from './demo/rippleDemo';
+import * as rippleDemoMd from './demo/rippleDemo.md';
+const rippleDemoCode = require('!raw-loader!./demo/rippleDemo');
+
+import RippleCustom from './demo/rippleCustom';
+import * as rippleCustomMd from './demo/rippleCustom.md';
+const rippleCustomCode = require('!raw-loader!./demo/rippleCustom');
+
+export default class RipplePage extends Component {
+  render() {
+    return (
+      <div>
+        <Markdown text={md}/>
+        <CodeBox text={rippleDemoMd} demo={<RippleDemo/>} code={rippleDemoCode}/>
+
+        <CodeBox text={rippleCustomMd} demo={<RippleCustom/>} code={rippleCustomCode}/>
+        <ApiBox api={Api}/>
+      </div>
+    )
+  }
+};
+  
diff --git a/docs/pages/menu.tsx b/docs/pages/menu.tsx
index e293614..4b9cc3c 100644
--- a/docs/pages/menu.tsx
+++ b/docs/pages/menu.tsx
@@ -135,4 +135,14 @@ export default [
       },
     ],
   },
+  {
+    name: '特效组件',
+    keyId: 'effects',
+    children: [
+      {
+        name: 'Ripple(波纹)',
+        keyId: 'ripple',
+      },
+    ],
+  },
 ];
diff --git a/docs/pages/routes.tsx b/docs/pages/routes.tsx
index 1530f6a..c9f401f 100644
--- a/docs/pages/routes.tsx
+++ b/docs/pages/routes.tsx
@@ -27,10 +27,7 @@ import Loading from './Loading';
 import Progress from './Progress';
 import BackTop from './BackTop';
 import Divider from './Divider';
-
-
-
-
+import Ripple from './Ripple';
 
 export default [
   {
@@ -149,5 +146,9 @@ export default [
   {
     component: Divider,
     path: '/components/divider',
-  }
+  },
+  {
+    component: Ripple,
+    path: '/components/ripple',
+  },
 ];
\ No newline at end of file