commit
e23f71b36e
@ -0,0 +1,47 @@
|
||||
import React, { useState, useEffect, memo } from 'react'
|
||||
import ImageLayer from '../../modules/page/layers/ImageLayer'
|
||||
import { isImageExtension } from 'educoder'
|
||||
function ImageLayerHook(props) {
|
||||
const [showImage, setShowImage] = useState(false)
|
||||
const [imageSrc, setImageSrc] = useState('')
|
||||
|
||||
const { parentSel, childSel, watchPropsArray } = props
|
||||
|
||||
const onImageLayerClose = () => {
|
||||
setShowImage(false)
|
||||
setImageSrc('')
|
||||
}
|
||||
const onDelegateClick = (event) => {
|
||||
const imageSrc = event.target.src || event.target.getAttribute('src') || event.target.getAttribute('href')
|
||||
// 判断imageSrc是否是图片
|
||||
const fileName = event.target.innerHTML.trim()
|
||||
if (isImageExtension(imageSrc.trim()) || isImageExtension(fileName) || event.target.tagName == 'IMG' || imageSrc.indexOf('base64,') != -1) {
|
||||
// 非回复里的头像图片; 非emoticons
|
||||
if (imageSrc.indexOf('/images/avatars/User') === -1 &&
|
||||
imageSrc.indexOf('kindeditor/plugins/emoticons') === -1 ) {
|
||||
setShowImage(true)
|
||||
setImageSrc(imageSrc)
|
||||
}
|
||||
event.stopPropagation()
|
||||
event.preventDefault && event.preventDefault()
|
||||
event.originalEvent.preventDefault()
|
||||
// event.originalEvent.stopPropagation()
|
||||
// event.originalEvent.cancelBubble = true
|
||||
return false;
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
$(parentSel)
|
||||
.delegate(childSel, "click", onDelegateClick);
|
||||
|
||||
return () => {
|
||||
$(parentSel).undelegate(childSel, "click", onDelegateClick )
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<ImageLayer showImage={showImage} imageSrc={imageSrc} onImageLayerClose={onImageLayerClose}></ImageLayer>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(ImageLayerHook)
|
||||
@ -0,0 +1,117 @@
|
||||
.searchinput{
|
||||
width: 800px;
|
||||
margin-top: 53px;
|
||||
}
|
||||
.headersear{
|
||||
height: 160px;
|
||||
background: #EAF2F9;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.packinput .ant-input{
|
||||
height: 55px;
|
||||
width:663px !important;
|
||||
font-size: 18px;
|
||||
color: #681616 !important;
|
||||
border-color: #E1EDF8 !important;
|
||||
}
|
||||
|
||||
.packinput .ant-input-group-addon .ant-btn{
|
||||
width:137px !important;
|
||||
font-size: 18px;
|
||||
height: 53px;
|
||||
background:rgba(76,172,255,1);
|
||||
|
||||
}
|
||||
.tabtitle{
|
||||
height: 62px !important;
|
||||
box-shadow: 3px 10px 21px 0px rgba(76, 76, 76, 0.15);
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.tabtitles2{
|
||||
background: #fff;
|
||||
height: 62px !important;
|
||||
width: 1200px;
|
||||
}
|
||||
|
||||
.tabtitless{
|
||||
height: 62px !important;
|
||||
line-height: 62px !important;
|
||||
|
||||
}
|
||||
.tabtitle1{
|
||||
|
||||
}
|
||||
.tabtitle2{
|
||||
margin-left: 30px !important;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.counttit{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.counttittext{
|
||||
text-align: left;
|
||||
width: 1200px;
|
||||
height: 18px;
|
||||
color: #888888;
|
||||
font-size: 13px;
|
||||
margin-top: 24px;
|
||||
|
||||
|
||||
}
|
||||
.counttittexts{
|
||||
color: #4CACFF !important;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.mainx{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 17px;
|
||||
}
|
||||
.project-packages-list{
|
||||
|
||||
}
|
||||
.project-package-item{
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
background: white;
|
||||
/* box-shadow: 1px 3px 3px 1px rgba(156,156,156,0.16); */
|
||||
|
||||
}
|
||||
.xuxianpro{
|
||||
height: 20px;
|
||||
border-bottom: 1px dashed;
|
||||
border-color: #EAEAEA;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.magr11{
|
||||
margin-top: 11px;
|
||||
}
|
||||
.highlight{
|
||||
color: #4CACFF;
|
||||
}
|
||||
.fonttext{
|
||||
font-size: 20px;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.fontextcolor{
|
||||
color: #777777;
|
||||
}
|
||||
.tzbq{
|
||||
margin-left: 68px;
|
||||
}
|
||||
.tzbqx{
|
||||
margin-left: 24px;
|
||||
}
|
||||
Loading…
Reference in new issue