style(Embed): update typings and propTypes usage (#1217)

Author: layershifter

src/modules/Embed/Embed.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -12,45 +12,26 @@ import {
 } from '../../lib'
 import Icon from '../../elements/Icon'
 
-const _meta = {
-  name: 'Embed',
-  type: META.TYPES.MODULE,
-  props: {
-    aspectRatio: ['4:3', '16:9', '21:9'],
-    source: ['youtube', 'vimeo'],
-  },
-}
-
 /**
  * An embed displays content from other websites like YouTube videos or Google Maps.
  */
 export default class Embed extends Component {
-  static autoControlledProps = [
-    'active',
-  ]
-
-  static defaultProps = {
-    icon: 'video play',
-  }
-
-  static _meta = _meta
-
   static propTypes = {
     /** An element type to render as (string or function). */
     as: customPropTypes.as,
 
     /** An embed can be active. */
     active: PropTypes.bool,
 
-    /** Setting to true or false will force autoplay. */
+    /** An embed can specify an alternative aspect ratio. */
+    aspectRatio: PropTypes.oneOf(['4:3', '16:9', '21:9']),
+
+     /** Setting to true or false will force autoplay. */
     autoplay: customPropTypes.every([
       customPropTypes.demand(['source']),
       PropTypes.bool,
     ]),
 
-    /** An embed can specify an alternative aspect ratio. */
-    aspectRatio: PropTypes.oneOf(_meta.props.aspectRatio),
-
     /** Whether to show networks branded UI like title cards, or after video calls to action. */
     brandedUI: customPropTypes.every([
       customPropTypes.demand(['source']),
@@ -78,15 +59,15 @@ export default class Embed extends Component {
       PropTypes.bool,
     ]),
 
+     /** Specifies an icon to use with placeholder content. */
+    icon: customPropTypes.itemShorthand,
+
     /** Specifies an id for source. */
     id: customPropTypes.every([
       customPropTypes.demand(['source']),
       PropTypes.string,
     ]),
 
-    /** Specifies an icon to use with placeholder content. */
-    icon: customPropTypes.itemShorthand,
-
     /**
      * Сalled on click.
      *
@@ -101,7 +82,7 @@ export default class Embed extends Component {
     /** Specifies a source to use. */
     source: customPropTypes.every([
       customPropTypes.disallow(['sourceUrl']),
-      PropTypes.oneOf(_meta.props.source),
+      PropTypes.oneOf(['youtube', 'vimeo']),
     ]),
 
     /** Specifies a url to use for embed. */
@@ -111,6 +92,19 @@ export default class Embed extends Component {
     ]),
   }
 
+  static autoControlledProps = [
+    'active',
+  ]
+
+  static defaultProps = {
+    icon: 'video play',
+  }
+
+  static _meta = {
+    name: 'Embed',
+    type: META.TYPES.MODULE,
+  }
+
   state = {}
 
   getSrc() {

src/modules/Embed/index.d.ts

@@ -1,12 +1,14 @@
 import * as React from 'react';
 
 interface EmbedProps {
-  /** An embed can be active. */
-  active?: boolean;
+  [key: string]: any;
 
   /** An element type to render as (string or function). */
   as?: any;
 
+  /** An embed can be active. */
+  active?: boolean;
+
   /** An embed can specify an alternative aspect ratio. */
   aspectRatio?: '4:3' | '16:9' | '21:9';
 
@@ -16,6 +18,9 @@ interface EmbedProps {
   /** Whether to show networks branded UI like title cards, or after video calls to action. */
   brandedUI?: boolean;
 
+  /** Primary content. */
+  children?: React.ReactNode;
+
   /** Additional classes. */
   className?: string;
 
@@ -40,7 +45,7 @@ interface EmbedProps {
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
    * @param {object} data - All props and proposed value.
    */
-  onClick?: (e: React.FormEvent<HTMLVideoElement>, data: this) => void;
+  onClick?: (event: React.MouseEvent<HTMLDivElement>, data: EmbedProps) => void;
 
   /** A placeholder image for embed. */
   placeholder?: string;