mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-03-04 00:37:08 +00:00
75 lines
1.8 KiB
JavaScript
75 lines
1.8 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classNames from 'classnames';
|
|
import ConfigProvider from '../config-provider';
|
|
import { log } from '../util';
|
|
|
|
const { warning } = log;
|
|
|
|
const MEDIA_COMPONENTS = ['video', 'audio', 'picture', 'iframe', 'img'];
|
|
|
|
/**
|
|
* Card.Media
|
|
* @order 1
|
|
*/
|
|
class CardMedia extends Component {
|
|
static propTypes = {
|
|
prefix: PropTypes.string,
|
|
/**
|
|
* 设置标签类型
|
|
*/
|
|
component: PropTypes.elementType,
|
|
/**
|
|
* 背景图片地址
|
|
*/
|
|
image: PropTypes.string,
|
|
/**
|
|
* 媒体源文件地址
|
|
*/
|
|
src: PropTypes.string,
|
|
style: PropTypes.object,
|
|
className: PropTypes.string,
|
|
};
|
|
|
|
static defaultProps = {
|
|
prefix: 'next-',
|
|
component: 'div',
|
|
style: {},
|
|
};
|
|
|
|
render() {
|
|
const {
|
|
prefix,
|
|
style,
|
|
className,
|
|
component: Component,
|
|
image,
|
|
src,
|
|
...others
|
|
} = this.props;
|
|
|
|
if (!('children' in others || Boolean(image || src))) {
|
|
warning(
|
|
'either `children`, `image` or `src` prop must be specified.'
|
|
);
|
|
}
|
|
|
|
const isMediaComponent = MEDIA_COMPONENTS.indexOf(Component) !== -1;
|
|
const composedStyle =
|
|
!isMediaComponent && image
|
|
? { backgroundImage: `url("${image}")`, ...style }
|
|
: style;
|
|
|
|
return (
|
|
<Component
|
|
{...others}
|
|
style={composedStyle}
|
|
className={classNames(`${prefix}card-media`, className)}
|
|
src={isMediaComponent ? image || src : undefined}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default ConfigProvider.config(CardMedia);
|