Merge pull request #24 from i3thuan5/播放鈕標題

播放鈕標題

demo/Demo.jsx

@@ -45,8 +45,11 @@ class Demo extends React.Component {
 
           <section>
             <h3>PlayButton</h3>
-            <p><PlayButton src={src}/></p>
-            <p><PlayButton src={errSrc}/></p>
+            <p>
+              <PlayButton src={src}/>
+              <PlayButton src={src}>點我播放</PlayButton>
+              <PlayButton src={errSrc}/>
+            </p>
             <p>播放合成的句子。使用
               <a href='http://xn--v0qr21b.xn--kpry57d/'>意傳.台灣</a>
               的語音合成服務，只接收分詞後的語句。<br/>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "demo-ui",
-  "version": "1.11.6",
+  "version": "1.12.6",
   "description": "demo網頁中常用的版面元素",
   "main": "lib/index.js",
   "scripts": {

src/component/PlayButton.jsx

@@ -55,7 +55,7 @@ class PlayButton extends React.Component {
   }
 
   render() {
-    const { src } = this.props;
+    const { src, children } = this.props;
     return (
         <span>
           <audio ref={(a) => { this.合成音檔 = a; }}
@@ -67,6 +67,7 @@ class PlayButton extends React.Component {
           <button onClick={this.play.bind(this)}
             className={this.btnStyle()}>
             <i className={this.iconStyle()}/>
+            {children}
           </button>
         </span>
     );
@@ -75,7 +76,8 @@ class PlayButton extends React.Component {
 
 
 PlayButton.propTypes = {
-  src: PropTypes.string.isRequired
+  src: PropTypes.string.isRequired,
+  children: PropTypes.node
 };
 
 export default PlayButton;

test/component/PlayButton.spec.js

@@ -55,11 +55,20 @@ describe("Component", () => {
       const wrapper = shallowSetup();
       expect(wrapper.find("button")).to.have.length(1);
     });
-    it("passes src to source", () => {
+    it("passes prop src to source", () => {
       const wrapper = shallowSetup();
       expect(wrapper.find("source").get(0).props.src)
       .to.equal(initArgv.src);
     });
+    it("passes prop children to title", () => {
+      const title = 'Hello button';
+      const wrapper = shallowSetup({
+        ...initArgv,
+        children: title
+      });
+      expect(wrapper.find("button").first().text())
+      .to.equal(title);
+    });
     it("reloads audio when update props", () => {
       const { wrapper, onload } = mountSetup();
       wrapper.setProps({ src: hakkaArgv.src });