优化 audio 组件
This commit is contained in:
catchonme
parent
3ecb343750
commit
8221c638f8
|
|
@ -77,7 +77,7 @@ Json 配置最外层是一个 `Page` 渲染器。他主要包含标题，副标
|
|||
|---|---|---|---|
|
||||
| type | `string` | | `"form"` 指定为 Form 渲染器 |
|
||||
| mode | `string` | `normal` | 表单展示方式，可以是：`normal`、`horizontal` 或者 `inline` [示例](/docs/demo/forms/mode) |
|
||||
| horizontal | `Object` | `{"left":"col-sm-2", "right":"col-sm-10", "offset":"col-sm-offset-2"}` | 当 mode 为 `horizontal` 时有用，用来控制 label |
|
||||
| horizontal | `Object` | `{"left":"col-sm-2", "right":"col-sm-10", "offset":"col-sm-offset-2"}` | 当 mode 为 `horizontal` 时有用，用来控制 label |
|
||||
| title | `string` | `"表单"` | Form 的标题 |
|
||||
| submitText | `String` | `"提交"` | 默认的提交按钮名称，如果设置成空，则可以把默认按钮去掉。 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
|
|
@ -2925,7 +2925,7 @@ Action 是一种特殊的渲染器，它本身是一个按钮，同时它能触
|
|||
"link": "/docs/index"
|
||||
}
|
||||
}
|
||||
```
|
||||
```
|
||||
* `url` 当按钮点击后，新窗口打开指定页面。
|
||||
|
||||
```schema:height="200"
|
||||
|
|
@ -2938,7 +2938,7 @@ Action 是一种特殊的渲染器，它本身是一个按钮，同时它能触
|
|||
"url": "raw:http://www.baidu.com"
|
||||
}
|
||||
}
|
||||
```
|
||||
```
|
||||
* `dialog` 当按钮点击后，弹出一个对话框。 关于 dialog 配置，请查看 [Dialog 模型](#dialog)。
|
||||
|
||||
```schema:height="200"
|
||||
|
|
@ -2964,7 +2964,7 @@ Action 是一种特殊的渲染器，它本身是一个按钮，同时它能触
|
|||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
* `drawer` 当按钮点击后，弹出一个抽出式对话框。 关于 drawer 配置，请查看 [Drawer 模型](#drawer)。
|
||||
|
||||
|
|
@ -2991,7 +2991,7 @@ Action 是一种特殊的渲染器，它本身是一个按钮，同时它能触
|
|||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
## Dialog
|
||||
|
||||
|
|
@ -3465,6 +3465,28 @@ CRUD 支持三种模式：`table`、`cards`、`list`，默认为 `table`。
|
|||
}
|
||||
```
|
||||
|
||||
## Audio
|
||||
|
||||
音频播放器
|
||||
|
||||
|属性名 | 类型 | 默认值 | 说明 |
|
||||
|---|---|---|---|
|
||||
| type | `string` | `"audio"` | 指定为 audio 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| inline | `boolean` | true | 是否是内联模式 |
|
||||
| src | `string` | | 音频地址 |
|
||||
| loop | `boolean` | false | 是否循环播放 |
|
||||
| autoPlay | `boolean` | false | 是否自动播放 |
|
||||
| rates | `array` | `[1.0, 2.0, 4.0]` | 加速播放 |
|
||||
|
||||
```schema:height="500" scope="body"
|
||||
{
|
||||
"type": "audio",
|
||||
"autoPlay": false,
|
||||
"src": ""
|
||||
}
|
||||
```
|
||||
|
||||
## Video
|
||||
|
||||
视频播放器。
|
||||
|
|
|
|||
|
|
@ -35,11 +35,16 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.#{$ns}Audio--inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.#{$ns}Audio {
|
||||
width: $Audio-width;
|
||||
height: $Audio-height;
|
||||
line-height: $Audio-lineHeight;
|
||||
border: $Audio-border;
|
||||
display: inline-block;
|
||||
&-rates {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import { volumeIcon, muteIcon, playIcon, pauseIcon} from '../components/icons';
|
|||
|
||||
export interface AudioProps extends RendererProps {
|
||||
className?: string;
|
||||
inline?: boolean,
|
||||
src?: string,
|
||||
autoPlay?: boolean,
|
||||
loop?: boolean,
|
||||
|
|
@ -32,7 +33,8 @@ export class Audio extends React.Component<AudioProps, AudioState> {
|
|||
audio: any;
|
||||
progressTimeout: any;
|
||||
|
||||
static defaultProps:Partial<AudioProps> = {
|
||||
static defaultProps:Pick<AudioProps, 'inline' | 'autoPlay' | 'playbackRate' | 'loop' | 'rates' | 'progressInterval'> = {
|
||||
inline: true,
|
||||
autoPlay: false,
|
||||
playbackRate: 1,
|
||||
loop: false,
|
||||
|
|
@ -215,6 +217,7 @@ export class Audio extends React.Component<AudioProps, AudioState> {
|
|||
render() {
|
||||
const {
|
||||
className,
|
||||
inline,
|
||||
src,
|
||||
autoPlay,
|
||||
loop,
|
||||
|
|
@ -233,7 +236,7 @@ export class Audio extends React.Component<AudioProps, AudioState> {
|
|||
} = this.state;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={cx(inline ? 'Audio--inline' : '')}>
|
||||
<audio
|
||||
className={cx('Audio-original')}
|
||||
ref={this.audioRef}
|
||||
|
|
@ -244,21 +247,21 @@ export class Audio extends React.Component<AudioProps, AudioState> {
|
|||
loop={loop}>
|
||||
<source src={src}/>
|
||||
</audio>
|
||||
{isReady ? <div className={cx('Audio', className)}>
|
||||
{rates ? <div className={cx('Audio-rates')}>
|
||||
{isReady ? (<div className={cx('Audio', className)}>
|
||||
{rates ? (<div className={cx('Audio-rates')}>
|
||||
<div className={cx('Audio-rate')}
|
||||
onClick={this.toggleHandlePlaybackRate}>
|
||||
x{playbackRate.toFixed(1)}
|
||||
</div>
|
||||
{showHandlePlaybackRate ? <div className={cx('Audio-rateControl')}>
|
||||
{showHandlePlaybackRate ? (<div className={cx('Audio-rateControl')}>
|
||||
{rates.map((rate, index) =>
|
||||
<span className={cx('Audio-rateControlItem')}
|
||||
key={index}
|
||||
onClick={() => this.handlePlaybackRate(rate)}>
|
||||
x{rate.toFixed(1)}
|
||||
</span>
|
||||
)} </div> : null}
|
||||
</div>
|
||||
)} </div>) : null}
|
||||
</div>)
|
||||
: null }
|
||||
<div className={cx('Audio-play')} onClick={this.handlePlaying}>
|
||||
{playing ? pauseIcon : playIcon}
|
||||
|
|
@ -277,7 +280,7 @@ export class Audio extends React.Component<AudioProps, AudioState> {
|
|||
onMouseEnter={() => this.toggleHandleVolume(true)}
|
||||
onMouseLeave={() => this.toggleHandleVolume(false)}>
|
||||
{showHandleVolume ?
|
||||
<div className={cx('Audio-volumeControl')}>
|
||||
(<div className={cx('Audio-volumeControl')}>
|
||||
<input
|
||||
type='range' min={0} max={1} step='any'
|
||||
value={volume}
|
||||
|
|
@ -285,10 +288,10 @@ export class Audio extends React.Component<AudioProps, AudioState> {
|
|||
<div className={cx('Audio-volumeControlIcon')}
|
||||
onClick={this.handleMute}>
|
||||
{volume > 0 ? volumeIcon : muteIcon}
|
||||
</div></div>
|
||||
</div></div>)
|
||||
: volume > 0 ? volumeIcon : muteIcon}
|
||||
</div>
|
||||
</div> : null}
|
||||
</div>) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue