diff --git a/docs/app/Examples/modules/Embed/Usage/EmbedExampleIframe.js b/docs/app/Examples/modules/Embed/Usage/EmbedExampleIframe.js new file mode 100644 index 0000000000..8032af95dd --- /dev/null +++ b/docs/app/Examples/modules/Embed/Usage/EmbedExampleIframe.js @@ -0,0 +1,22 @@ +import React from 'react' +import { Embed } from 'semantic-ui-react' + +const EmbedExampleIframe = () => ( + +) + +export default EmbedExampleIframe diff --git a/docs/app/Examples/modules/Embed/Usage/index.js b/docs/app/Examples/modules/Embed/Usage/index.js index a101188b19..b178149f20 100644 --- a/docs/app/Examples/modules/Embed/Usage/index.js +++ b/docs/app/Examples/modules/Embed/Usage/index.js @@ -10,6 +10,11 @@ const EmbedUsageExamples = () => ( description='Settings to configure video behavior.' examplePath='modules/Embed/Usage/EmbedExampleSettings' /> + ) diff --git a/src/index.d.ts b/src/index.d.ts index 75e0b27fb3..c7c6258d32 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -17,6 +17,11 @@ export interface HtmlLabelProps { children?: React.ReactNode; } +export interface HtmlIframeProps { + [key: string]: any; + src?: string; +} + export interface HtmlImageProps { [key: string]: any; src?: string; diff --git a/src/lib/factories.js b/src/lib/factories.js index 4ce9ca5768..02b5078999 100644 --- a/src/lib/factories.js +++ b/src/lib/factories.js @@ -125,6 +125,7 @@ export function createShorthandFactory(Component, mapValueToProps) { // HTML Factories // ============================================================ export const createHTMLDivision = createShorthandFactory('div', val => ({ children: val })) +export const createHTMLIframe = createShorthandFactory('iframe', src => ({ src })) export const createHTMLImage = createShorthandFactory('img', val => ({ src: val })) export const createHTMLInput = createShorthandFactory('input', val => ({ type: val })) export const createHTMLLabel = createShorthandFactory('label', val => ({ children: val })) diff --git a/src/modules/Embed/Embed.d.ts b/src/modules/Embed/Embed.d.ts index 7dc6fd936a..c06601a2ec 100644 --- a/src/modules/Embed/Embed.d.ts +++ b/src/modules/Embed/Embed.d.ts @@ -1,6 +1,6 @@ import * as React from 'react'; -import { SemanticShorthandItem } from '../..'; +import { HtmlIframeProps, SemanticShorthandItem } from '../..'; import { IconProps } from '../../elements/Icon'; export interface EmbedProps { @@ -42,6 +42,9 @@ export interface EmbedProps { /** Specifies an id for source. */ id?: string; + /** Shorthand for HTML iframe. */ + iframe?: SemanticShorthandItem; + /** * Сalled on click. * diff --git a/src/modules/Embed/Embed.js b/src/modules/Embed/Embed.js index 6d79bb39af..dcc372b146 100644 --- a/src/modules/Embed/Embed.js +++ b/src/modules/Embed/Embed.js @@ -5,6 +5,7 @@ import React from 'react' import { AutoControlledComponent as Component, childrenUtils, + createHTMLIframe, customPropTypes, getElementType, getUnhandledProps, @@ -60,7 +61,7 @@ export default class Embed extends Component { PropTypes.bool, ]), - /** Specifies an icon to use with placeholder content. */ + /** Specifies an icon to use with placeholder content. */ icon: customPropTypes.itemShorthand, /** Specifies an id for source. */ @@ -69,6 +70,12 @@ export default class Embed extends Component { PropTypes.string, ]), + /** Shorthand for HTML iframe. */ + iframe: customPropTypes.every([ + customPropTypes.demand(['source']), + customPropTypes.itemShorthand, + ]), + /** * Сalled on click. * @@ -176,7 +183,7 @@ export default class Embed extends Component { } renderEmbed() { - const { children, source } = this.props + const { children, iframe, source } = this.props const { active } = this.state if (!active) return null @@ -184,15 +191,17 @@ export default class Embed extends Component { return (
-