Merge branch 'feature-1.7'

README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://nsfi.github.io/ppfish-components/#/home">
-    <img width="150" height="150" src="http://ysf.nosdn.127.net/kornketgjocydxcldzywnyfdtclwugdl">
+    <img width="150" height="150" src="//ysf.qiyukf.net/kornketgjocydxcldzywnyfdtclwugdl">
   </a>
 </p>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ppfish",
-  "version": "1.7.7-beta.1",
+  "version": "1.7.7-beta.2",
   "description": "fish design ui components",
   "scripts": {
     "precommit": "lint-staged",

site/docs/upgradeNotes/1.7/1.7.7.md

@@ -2,10 +2,17 @@
 
 ### 1.7.7-alpha.3
 - TreeSelect
-  - 🎊 新增doCheckChildInSearch API，用于在搜索出部分子节点情况下，只回传这些子节点的value。
+  - 🎊 新增 API `doCheckChildInSearch`，用于在搜索出部分子节点情况下，只回传这些子节点的value。
 
 ### 1.7.7-beta.1
 - 🔨 依赖包quill、marked安全性升级
 - RichEditor
   - 🔨 设置align、direction时，默认用内联样式控制，不再使用class
   - 🔨 API `getHTML` 和 `getRawHTML` 安全性提升，过滤满足 `/javascript\s*:/ig` 匹配的字符，减少xss攻击
+
+### 1.7.7-beta.2
+- 🔨 静态资源的CDN域名替换为 `ysf.qiyukf.net`
+- AudioPlayer
+  - 🎊 新增 API `rateOptions`，用于支持调节播放速度
+- TreeSelect
+  - 🔨 优化不可编辑的多选模式下，未选择时的鼠标样式

site/docs/upgradeNotes/版本升级说明.md

@@ -1068,3 +1068,13 @@
 - RichEditor
   - 🔨 设置align、direction时，默认用内联样式控制，不再使用class
   - 🔨 API `getHTML` 和 `getRawHTML` 安全性提升，过滤满足 `/javascript\s*:/ig` 匹配的字符，减少xss攻击
+
+---
+`2020.11.09`
+
+## 1.7.7-beta.2
+- 🔨 静态资源的CDN域名替换为 `ysf.qiyukf.net`
+- AudioPlayer
+  - 🎊 新增 API `rateOptions`，用于支持调节播放速度
+- TreeSelect
+  - 🔨 优化不可编辑的多选模式下，未选择时的鼠标样式

site/docs/zh-CN/audioPlayer.md

@@ -15,7 +15,7 @@ render() {
   return(
     <div style={{width:400}}>
       <AudioPlayer
-        src="https://ysf.nosdn.127.net/26952087D69B79839F17040A5DC2E775.wav"
+        src="//ysf.qiyukf.net/26952087D69B79839F17040A5DC2E775.wav"
         title="这是一个demo"
       />
     </div>
@@ -49,7 +49,7 @@ render() {
         <br /><br />
         <AudioPlayer
           size={size}
-          src="https://ysf.nosdn.127.net/26952087D69B79839F17040A5DC2E775.wav"
+          src="//ysf.qiyukf.net/26952087D69B79839F17040A5DC2E775.wav"
           title="这是一个demo"
         />
       </div>
@@ -67,7 +67,7 @@ render() {
   return(
     <div style={{width:56}}>
       <AudioPlayer
-        src="https://ysf.nosdn.127.net/6DB6A44FF040D96551EC00507730FC4D.wav"
+        src="//ysf.qiyukf.net/6DB6A44FF040D96551EC00507730FC4D.wav"
         controlVolume={false}
         controlProgress={false}
         displayTime={false}
@@ -79,6 +79,30 @@ render() {
 ```
 :::
 
+## 支持调节播放速度
+:::demo 通过设置 `playbackRate="1.0"` 设置默认播放速度
+通过设置 `playbackRates=["2.0", "1.0", "0.5"]` 设置播放速度选择列表
+
+```js
+render() {
+  return(
+    <div style={{width:350}}>
+      <AudioPlayer
+        src="//ysf.qiyukf.net/6DB6A44FF040D96551EC00507730FC4D.wav"
+        download={true}
+        size={"small"}
+        rateOptions={{
+          decimal: 1,
+          range: [2, 1, 0.5]
+        }}
+      />
+    </div>
+
+  )
+}
+```
+:::
+
 ## 支持下载
 :::demo 通过设置 `download=true` 设置音频可下载
 
@@ -87,7 +111,7 @@ render() {
   return(
     <div style={{width:350}}>
       <AudioPlayer
-        src="https://ysf.nosdn.127.net/6DB6A44FF040D96551EC00507730FC4D.wav"
+        src="//ysf.qiyukf.net/6DB6A44FF040D96551EC00507730FC4D.wav"
         download={true}
       />
     </div>
@@ -127,5 +151,6 @@ render() {
 | onSeeked  | 当用户已移动/跳跃到音频中的新位置时的回调   | 	(e) => Void   | -  |
 | preload  | 音频是否应该在页面加载后进行加载。 可选值有：`auto`指示一旦页面加载，则开始加载音频；`metadata`指示当页面加载后仅加载音频的元数据；`none` 指示页面加载后不应加载音频。 | Enum {'auto', 'metadata', 'none'} | 'metadata' |
 | volume  | 设置音频的当前音量, 必须是介于 0.0 与 1.0 之间的数字。例如：1.0 是最高音量（默认）0.5 是一半音量 （50%）0.0 是静音  | Number |  1.0  |
+| rateOptions | rateOptions.value，设置音频的默认播放速度，值为假值时播放速度为 1 ，但不展示播放速度；rateOptions.suffix，设置展示的播放速度的单位；rateOptions.decimal，设置展示的播放速度的数字精度；rateOptions.range，设置音频播放速度的选择范围，值为[]时不展示选择范围| {value: Number, suffix: String, decimal: Number, range: Array\<Number\>} |  {value: 0, suffix: 'x', decimal: 1, range: []}  |
 
 其他H5 audio属性和事件配置参见 [H5 audio属性说明](http://www.w3school.com.cn/jsref/dom_obj_audio.asp)。

site/docs/zh-CN/avatar.md

@@ -46,7 +46,7 @@ render(){
     <Avatar icon="user-line" />
     <Avatar>U</Avatar>
     <Avatar>USER</Avatar>
-    <Avatar src="https://ysf.nosdn.127.net/ausunifcvhchdzbexjvxcswemqeojqdf" />
+    <Avatar src="//ysf.qiyukf.net/ausunifcvhchdzbexjvxcswemqeojqdf" />
     <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
     <Avatar style={{ backgroundColor: '#87d068' }} icon="user-line" />
   </div>)

site/docs/zh-CN/imageLoader.md

@@ -154,7 +154,7 @@ render(){
   };
   return(
     <ImageLoader
-      src="https://ysf.nosdn.127.net/45689D5A40BE0BCB962C8878CFDEEFA8"
+      src="//ysf.qiyukf.net/45689D5A40BE0BCB962C8878CFDEEFA8"
       preLoader={preLoader}
       style={{'maxWidth': '100%'}}
       imgProps={{style : {'width': '100%'}}}

site/docs/zh-CN/videoViewer.md

@@ -16,7 +16,7 @@
   render() {
     return(
       <VideoViewer.Video
-        poster='http://ysf.nosdn.127.net/rygnbxiwcgoudyqnzzpypmtxlwpixigf'
+        poster='//ysf.qiyukf.net/rygnbxiwcgoudyqnzzpypmtxlwpixigf'
         sources={[{
           src: "http://vjs.zencdn.net/v/oceans.mp4",
           type:'video/mp4'
@@ -64,7 +64,7 @@
       <div className="source">
         <div className="block">
           <VideoViewer
-            poster="http://ysf.nosdn.127.net/rygnbxiwcgoudyqnzzpypmtxlwpixigf"
+            poster="//ysf.qiyukf.net/rygnbxiwcgoudyqnzzpypmtxlwpixigf"
             modalProps={{
               width: 640
             }}
@@ -112,7 +112,7 @@
         <div className="block">
           <VideoViewer
             failedMessage="已过期"
-            poster="http://ysf.nosdn.127.net/rygnbxiwcgoudyqnzzpypmtxlwpixigf"
+            poster="//ysf.qiyukf.net/rygnbxiwcgoudyqnzzpypmtxlwpixigf"
             modalProps={{
               width: 640
             }}

site/pages/common/layout.js

@@ -92,7 +92,7 @@ export default class Layout extends React.Component {
         <Row>
           <Col xs={24} sm={24} md={24} lg={6} xl={5} xxl={4} className="header-title">
             <Link to="/home" rel="noopener noreferrer">
-              <img src={'//ysf.nosdn.127.net/unanqvsjrxhnpwqrulcuumqxicpwsojh'} alt="fish-design"/>
+              <img src={'//ysf.qiyukf.net/unanqvsjrxhnpwqrulcuumqxicpwsojh'} alt="fish-design"/>
             </Link>
           </Col>
           <Col xs={24} sm={24} md={24} lg={18} xl={19} xxl={20} className="header-navbar">
@@ -122,7 +122,7 @@ export default class Layout extends React.Component {
     const CommonFooter = (!hideFooter &&
       <footer className="footer">
         <div className="logo">
-          <img src={'//ysf.nosdn.127.net/cipiqsfpsbyreuwspfkybadithmnnlmc'} alt="logo"/>
+          <img src={'//ysf.qiyukf.net/cipiqsfpsbyreuwspfkybadithmnnlmc'} alt="logo"/>
           <h3>Fish Design</h3>
           <p className="version">- {this.getLocale('misc.version')} -</p>
         </div>

site/pages/components/index.less

@@ -10,7 +10,7 @@
     height: 100%;
   }
   .content {
-    background: url("//ysf.nosdn.127.net/zeenqqdsasgclvvedsbvueqvkzpufgoj") top right no-repeat;
+    background: url("//ysf.qiyukf.net/zeenqqdsasgclvvedsbvueqvkzpufgoj") top right no-repeat;
   }
 }
 

site/pages/home/index.js

@@ -59,7 +59,7 @@ export default class Home extends React.Component {
         <div className="m-home-page">
           <div className="banner">
             <div className="left-logo">
-              <img className="logo" src={'//ysf.nosdn.127.net/kornketgjocydxcldzywnyfdtclwugdl'} alt="logo"/>
+              <img className="logo" src={'//ysf.qiyukf.net/kornketgjocydxcldzywnyfdtclwugdl'} alt="logo"/>
             </div>
             <div className="right-desc">
               <h1 className="title">Fish Design</h1>
@@ -104,25 +104,25 @@ export default class Home extends React.Component {
             <div className="resource-list">
               <div className="resource-item">
                 <Link to="/components/contributing/">
-                  <img src={'//ysf.nosdn.127.net/xjupeqkvqvzvofkzalfzyfhpqmjvofrw'} alt="贡献指南"/>
+                  <img src={'//ysf.qiyukf.net/xjupeqkvqvzvofkzalfzyfhpqmjvofrw'} alt="贡献指南"/>
                   贡献指南
                 </Link>
               </div>
               <div className="resource-item">
                 <Link to="/components/changelog/">
-                  <img src={'//ysf.nosdn.127.net/zespbluoxdooiuwbodfuzzniuikphxzu'} alt="更新日志"/>
+                  <img src={'//ysf.qiyukf.net/zespbluoxdooiuwbodfuzzniuikphxzu'} alt="更新日志"/>
                   更新日志
                 </Link>
               </div>
               <div className="resource-item">
                 <Link to="/components/">
-                  <img src={'//ysf.nosdn.127.net/cwknzqyaxbjnbwsldapbridnbtwqzcho'} alt="组件库"/>
+                  <img src={'//ysf.qiyukf.net/cwknzqyaxbjnbwsldapbridnbtwqzcho'} alt="组件库"/>
                   组件库
                 </Link>
               </div>
               <div className="resource-item">
                 <a href="//axure.yixin.im/view?id=11388&pid=4&mid=434#fishdesign___" target="_blank">
-                  <img src={'//ysf.nosdn.127.net/pdkitmnnpikavbkzscsxsgoilftykxza'} alt="资源下载"/>
+                  <img src={'//ysf.qiyukf.net/pdkitmnnpikavbkzscsxsgoilftykxza'} alt="资源下载"/>
                   资源下载
                 </a>
               </div>

site/pages/home/index.less

@@ -1,12 +1,12 @@
 @import (reference)'../../styles/mixin';
 
 .m-home-page {
-  background: url("//ysf.nosdn.127.net/vuewbfdvoyaojqoeaaefhjskpwpbloor") 0 400px no-repeat;
+  background: url("//ysf.qiyukf.net/vuewbfdvoyaojqoeaaefhjskpwpbloor") 0 400px no-repeat;
   background-size: 100px;
   .banner {
     height: 640px;
     padding: 82px;
-    background: url("//ysf.nosdn.127.net/zeenqqdsasgclvvedsbvueqvkzpufgoj") top right no-repeat;
+    background: url("//ysf.qiyukf.net/zeenqqdsasgclvvedsbvueqvkzpufgoj") top right no-repeat;
   }
   .left-logo {
     width: 50%;

source/components/AudioPlayer/AudioPlayer.js

@@ -20,6 +20,7 @@ class AudioPlayer extends React.Component {
     controlVolume: PropTypes.bool,
     controlProgress: PropTypes.bool,
     displayTime: PropTypes.bool,
+    rateOptions: PropTypes.object,
     download: PropTypes.bool,
     onLoadedMetadata: PropTypes.func,
     onCanPlay: PropTypes.func,
@@ -46,6 +47,9 @@ class AudioPlayer extends React.Component {
     controlVolume: true,
     controlProgress: true,
     displayTime: true,
+    rateOptions:{
+      value: 0,
+    },
     download: false,
     onLoadedMetadata: () => {},  // 当浏览器已加载音频的元数据时的回调
     onCanPlay: () => {},         // 当浏览器能够开始播放音频时的回调
@@ -65,15 +69,25 @@ class AudioPlayer extends React.Component {
       isMuted: this.props.muted,                        // 是否静音
       currentVolume: parseInt(this.props.volume * 100), // 当前音量
       volumeOpen: false,                                // 是否打开音量控制
+      rateOpen: false,                                  // 是否打开播放速度调节
       allTime: 0,
       currentTime: 0,
-      disabled: !this.props.src                        // 初始src为空时禁用组件
+      disabled: !this.props.src,                        // 初始src为空时禁用组件
+      rate: this.props.rateOptions.value || 1           // 播放速度
     };
     this.audioInstance = null;
   }
 
+  componentDidMount(){
+    this.controlAudio('changeRate',this.state.rate);
+    if(this.props.autoPlay){
+      this.audioInstance.play();
+    }
+  }
+
   controlAudio = (type, value) => {
     const audio = this.audioInstance;
+    const numberValue = Number(value);
     switch(type) {
       case 'allTime':
         this.setState({
@@ -129,6 +143,17 @@ class AudioPlayer extends React.Component {
           isMuted: !value
         });
         break;
+      case 'changeRate':
+        if(Number.isNaN(numberValue)){
+          throw(new Error(`rateOptions props error:
+          rateOptions.value or item of rateOptions.range can not convert to number`));
+        }
+        audio.playbackRate = numberValue;
+        this.setState({
+          rate: value,
+          rateOpen: false
+        });
+        break;
     }
   }
 
@@ -172,13 +197,20 @@ class AudioPlayer extends React.Component {
       volumeOpen: state
     });
   }
+  // 调节播放速度板状态变化
+  onRateVisibleChange = (state) => {
+    this.setState({
+      rateOpen: state
+    });
+  };
 
   render() {
-    const { isPlay, isMuted, allTime, currentTime, currentVolume, volumeOpen, disabled } = this.state;
+    const { isPlay, isMuted, allTime, currentTime, currentVolume, volumeOpen, rateOpen, disabled, rate } = this.state;
     const {
       prefixCls,
       title,
       src,
+      autoPlay,
       className,
       size,
       loop,
@@ -187,12 +219,16 @@ class AudioPlayer extends React.Component {
       controlProgress,
       displayTime,
       download,
+      rateOptions,
       onCanPlay,
       onLoadedMetadata,
       onCanPlayThrough,
       onAbort,onEnded, onError, onPause, onPlay, onSeeked, ...otherProps
     } = this.props;
 
+    const {value:rateValue = 0, suffix:rateSuffix = 'x', decimal:rateDecimal = 1, range:rateRange = []}=rateOptions;
+    const getRateText = (number) => `${Number(number).toFixed(rateDecimal)}${rateSuffix}`;
+
     const sizeCls = size === 'small' ? 'sm' : '';
     const pausePlayIcon = !isPlay ? 'play' : 'stop';
     const volumeIcon = () => {
@@ -288,6 +324,31 @@ class AudioPlayer extends React.Component {
               :
               null
           }
+
+          {rateRange.length ? (
+            <Popover
+              overlayClassName="change-audio-rate"
+              trigger="click"
+              placement="top"
+              visible={rateOpen}
+              onVisibleChange={this.onRateVisibleChange}
+              getPopupContainer={node => node.parentNode}
+              content={rateRange.map(rateItem => (
+                <p
+                  className="change-audio-rate-item"
+                  key={`rate-${rateItem}`}
+                  onClick={() => {
+                    this.controlAudio("changeRate", rateItem);
+                  }}
+                >{getRateText(rateItem)}</p>
+              ))}
+            >
+              {<p className="box rate-box">{getRateText(rate)}</p>}
+            </Popover>
+          ) : rateValue ? (
+            <p className="box rate-box">{getRateText(rateValue)}</p>
+          ) : null}
+
           {
             download ?
               <div className="box download-box">