102 lines
2.4 KiB
JavaScript
102 lines
2.4 KiB
JavaScript
/**
|
|
* 应用主入口
|
|
**/
|
|
|
|
// React Libs
|
|
import React, {Fragment} from 'react'
|
|
import PropTypes from 'prop-types'
|
|
// Components
|
|
import {showImage} from './components/Wrapper'
|
|
// Config
|
|
import {imageType} from './config'
|
|
// Utils
|
|
import {generateUUID} from './utils'
|
|
|
|
export {showImage, ReactZmage}
|
|
export default class ReactZmage extends React.Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
uid: generateUUID()
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const {uid} = this.state
|
|
const {
|
|
id, className, // 避免意外 id 覆盖
|
|
src, hiResSrc, alt, text, // 基本属性
|
|
lazyLoad, indicator, // 配置参数
|
|
imageSet, // 图片列表
|
|
onClick, // 用于单独执行 onClick
|
|
style, // 样式
|
|
page,
|
|
...props // 剩余参数
|
|
} = this.props
|
|
const uuid = `u${uid}`
|
|
return (
|
|
<img
|
|
id={uuid} className={className}
|
|
src={src} alt={alt}
|
|
onClick={() => {
|
|
// 执行绑定的函数
|
|
onClick && onClick.constructor === Function && onClick()
|
|
// 显示幻灯片叠层
|
|
showImage({
|
|
id: uuid,
|
|
lazyLoad, indicator,
|
|
imageSet: imageSet && imageSet.constructor === Array ?
|
|
imageSet : [{
|
|
src: hiResSrc || src,
|
|
alt,
|
|
text
|
|
}],
|
|
page: page
|
|
})
|
|
}}
|
|
style={Object.assign({cursor: 'zoom-in'}, style)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
}
|
|
|
|
|
|
// 默认参数
|
|
ReactZmage.defaultProps = {
|
|
// 图片链接
|
|
src: "",
|
|
// 高分原图链接
|
|
hiResSrc: "",
|
|
// 图片标题
|
|
alt: "",
|
|
// 图片描述
|
|
text: "",
|
|
// 图片列表参数
|
|
imageSet: null,
|
|
// 懒加载
|
|
lazyLoad: true,
|
|
// 指示器
|
|
indicator: true
|
|
}
|
|
|
|
// 参数类型
|
|
ReactZmage.propTypes = {
|
|
// 图片链接
|
|
src: PropTypes.string,
|
|
// 高分原图链接
|
|
hiResSrc: PropTypes.string,
|
|
// 图片标题
|
|
alt: PropTypes.string,
|
|
// 图片描述文字==
|
|
text: PropTypes.string,
|
|
// 图片列表参数, 可以传入单独的图片类型或数组包裹的图片类型
|
|
imageSet: PropTypes.oneOfType([
|
|
PropTypes.arrayOf(imageType),
|
|
imageType
|
|
]),
|
|
// 懒加载 (图片切换时)
|
|
lazyLoad: PropTypes.bool,
|
|
// 指示器 (图片切换时)
|
|
indicator: PropTypes.bool
|
|
} |