Merge pull request #63 from catchonme/master

audio 增加在table中显示

examples/components/CRUD/Fields.jsx

@@ -10,6 +10,11 @@ export default {
                 label: "ID",
                 type: "text"
             },
+            {
+              name: "audio",
+              label: "音频",
+              type: "audio"
+            },
             {
                 name: "carousel",
                 label: "轮播图",

examples/components/Video.jsx

@@ -6,6 +6,7 @@ export default {
         {
             "type": "video",
             "autoPlay": false,
+            "rates": [1.0, 1.5, 2.0],
             "src": "https://media.w3.org/2010/05/sintel/trailer_hd.mp4",
             "poster": "https://video-react.js.org/assets/poster.png"
         }

mock/crud/list.js

@@ -24,6 +24,7 @@ module.exports = function(req, res) {
                     title: '{{name.title}}',
                     description: '{{lorem.words}}'
                 }), Math.round(Math.random() * 10)),
+                audio: 'https://news-bos.cdn.bcebos.com/mvideo/%E7%9A%87%E5%90%8E%E5%A4%A7%E9%81%93%E4%B8%9C.aac',
                 carousel: [
                     {
                         image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "amis",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.3",
   "description": "一种MIS页面生成工具",
   "main": "lib/index.js",
   "scripts": {

scss/components/form/_select.scss

@@ -30,6 +30,7 @@
         position: relative;
         flex-grow: 1;
         line-height: 1;
+        max-width: 100%;
     }
 
     &-placeholder {
@@ -170,7 +171,6 @@
     }
 
     &-option {
-        min-width: px2rem(100px);
         padding: (
                 $Form-select-menu-height - $Form-input-lineHeight *
                     $Form-input-fontSize - px2rem(2px)

src/Scoped.tsx

@@ -16,7 +16,7 @@ import { RendererData, Action } from './types';
 interface ScopedComponentType extends React.Component<RendererProps> {
     doAction?: (action: Action, data: RendererData, throwErrors?: boolean) => void;
     receive?: (values: RendererData, subPath?: string) => void;
-    reload?: (subPpath?:string, query?:RendererData | null, ctx?: RendererData) => void;
+    reload?: (subPath?:string, query?:RendererData | null, ctx?: RendererData) => void;
 }
 
 

src/renderers/Audio.tsx

@@ -15,6 +15,7 @@ export interface AudioProps extends RendererProps {
 }
 
 export interface AudioState {
+    src?: string;
     isReady?: boolean;
     muted?: boolean;
     playing?: boolean;
@@ -47,6 +48,7 @@ export class Audio extends React.Component<AudioProps, AudioState> {
     };
 
     state: AudioState = {
+        src: this.props.value || this.props.src || '',
         isReady: false,
         muted: false,
         playing: false,
@@ -79,7 +81,7 @@ export class Audio extends React.Component<AudioProps, AudioState> {
     @autobind
     progress() {
         clearTimeout(this.progressTimeout);
-        if (this.props.src && this.audio) {
+        if (this.state.src && this.audio) {
             const currentTime = this.audio.currentTime || 0;
             const duration = this.audio.duration;
             const played = currentTime / duration;
@@ -116,7 +118,7 @@ export class Audio extends React.Component<AudioProps, AudioState> {
 
     @autobind
     handleMute() {
-        if (!this.props.src) {
+        if (!this.state.src) {
             return;
         }
         const {muted, prevVolume} = this.state;
@@ -130,7 +132,7 @@ export class Audio extends React.Component<AudioProps, AudioState> {
 
     @autobind
     handlePlaying() {
-        if (!this.props.src) {
+        if (!this.state.src) {
             return;
         }
         let playing = this.state.playing;
@@ -142,7 +144,7 @@ export class Audio extends React.Component<AudioProps, AudioState> {
 
     @autobind
     getCurrentTime() {
-        if (!this.audio || !this.props.src || !this.state.isReady) {
+        if (!this.audio || !this.state.src || !this.state.isReady) {
             return '0:00';
         }
         const duration = this.audio.duration;
@@ -152,7 +154,7 @@ export class Audio extends React.Component<AudioProps, AudioState> {
 
     @autobind
     getDuration() {
-        if (!this.audio || !this.props.src) {
+        if (!this.audio || !this.state.src) {
             return '0:00';
         }
         if (!this.state.isReady) {
@@ -180,7 +182,7 @@ export class Audio extends React.Component<AudioProps, AudioState> {
 
     @autobind
     onSeekChange(e: any) {
-        if (!this.props.src) {
+        if (!this.state.src) {
             return;
         }
         const played = e.target.value;
@@ -212,7 +214,7 @@ export class Audio extends React.Component<AudioProps, AudioState> {
 
     @autobind
     setVolume(e: any) {
-        if (!this.props.src) {
+        if (!this.state.src) {
             return;
         }
         const volume = e.target.value;
@@ -242,7 +244,7 @@ export class Audio extends React.Component<AudioProps, AudioState> {
 
     @autobind
     toggleHandlePlaybackRate() {
-        if (!this.props.src) {
+        if (!this.state.src) {
             return;
         }
         this.setState({
@@ -252,7 +254,7 @@ export class Audio extends React.Component<AudioProps, AudioState> {
 
     @autobind
     toggleHandleVolume(type: boolean) {
-        if (!this.props.src) {
+        if (!this.state.src) {
             return;
         }
         this.setState({
@@ -370,13 +372,12 @@ export class Audio extends React.Component<AudioProps, AudioState> {
         const {
             className,
             inline,
-            src,
             autoPlay,
             loop,
             controls,
             classnames: cx
         } = this.props;
-        const {muted} = this.state;
+        const {muted, src} = this.state;
 
         return (
             <div className={cx('Audio', className, inline ? 'Audio--inline' : '')}>