mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-30 10:59:42 +08:00
Merge pull request #1964 from 2betop/images
fix: 修复图片表单项 disabled 影响放大功能的问题
This commit is contained in:
吴多益
GitHub
commit
e5943f5303
@ -33,6 +33,7 @@ exports[`Renderer:carousel 1`] = `
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div
|
||||
class="description block"
|
||||
@ -62,6 +63,7 @@ exports[`Renderer:carousel 1`] = `
|
||||
/>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</span>
|
||||
|
||||
@ -9,12 +9,16 @@ exports[`Renderer:image 1`] = `
|
||||
class="a-Image"
|
||||
>
|
||||
<div
|
||||
class="a-Image-thumb a-Image-thumb--contain a-Image-thumb--1-1"
|
||||
class="a-Image-thumbWrap"
|
||||
>
|
||||
<img
|
||||
class="b"
|
||||
src="https://www.baidu.com/img/bd_logo1.png"
|
||||
/>
|
||||
<div
|
||||
class="a-Image-thumb a-Image-thumb--contain a-Image-thumb--1-1"
|
||||
>
|
||||
<img
|
||||
class="b"
|
||||
src="https://www.baidu.com/img/bd_logo1.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="a-Image-info"
|
||||
|
||||
@ -14,12 +14,16 @@
|
||||
border: var(--borderWidth) solid var(--borderColor);
|
||||
padding: var(--gap-xs);
|
||||
|
||||
&-thumbWrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-thumb {
|
||||
width: px2rem(108px);
|
||||
height: px2rem(108px);
|
||||
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwMCIgaGVpZ2h0PSI0MDAiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIG9wYWNpdHk9IjAuMSIgLz4KICAgICAgICAgICAgPHJlY3QgZmlsbD0id2hpdGUiIHg9IjEwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIC8+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIxMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgb3BhY2l0eT0iMC4xIiAvPgogICAgICAgICAgICA8cmVjdCBmaWxsPSJ3aGl0ZSIgeD0iMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgLz4KICAgICAgICA8L3BhdHRlcm4+CiAgICA8L2RlZnM+CiAgICA8cmVjdCBmaWxsPSJ1cmwoI2dyaWQpIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiAvPgo8L3N2Zz4=');
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
> img {
|
||||
position: absolute;
|
||||
@ -129,7 +133,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&-thumb:hover &-overlay {
|
||||
&-thumbWrap:hover &-overlay {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,10 +5,6 @@
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&-dropzone.is-disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&-addBtn {
|
||||
margin: 0;
|
||||
width: px2rem(80px);
|
||||
@ -92,42 +88,6 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
&-itemOverlay {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
position: absolute;
|
||||
width: px2rem(108px);
|
||||
height: px2rem(108px);
|
||||
display: none;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
color: #fff;
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
> a {
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
padding: 0 5px;
|
||||
line-height: 1;
|
||||
font-size: px2rem(16px);
|
||||
}
|
||||
}
|
||||
|
||||
&-item:hover &-itemOverlay {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&-itemClear {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
|
||||
@ -1188,6 +1188,7 @@ export default class ImageControl extends React.Component<
|
||||
onDropRejected={this.handleDropRejected}
|
||||
accept={accept}
|
||||
multiple={multiple}
|
||||
disabled={disabled}
|
||||
>
|
||||
{({
|
||||
getRootProps,
|
||||
@ -1324,79 +1325,87 @@ export default class ImageControl extends React.Component<
|
||||
alt={file.name}
|
||||
thumbMode={thumbMode}
|
||||
thumbRatio={thumbRatio}
|
||||
/>
|
||||
|
||||
<div
|
||||
key="overlay"
|
||||
className={cx('ImageControl-itemOverlay')}
|
||||
>
|
||||
{file.info ? (
|
||||
[
|
||||
<div key="info">
|
||||
{file.info.width} x {file.info.height}
|
||||
</div>,
|
||||
file.info.len ? (
|
||||
<div key="size">
|
||||
{ImageControl.formatFileSize(
|
||||
file.info.len
|
||||
)}
|
||||
</div>
|
||||
) : null
|
||||
]
|
||||
) : (
|
||||
<div>...</div>
|
||||
)}
|
||||
|
||||
<a
|
||||
data-tooltip={__('Image.zoomIn')}
|
||||
data-position="bottom"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
href={file.url || file.preview}
|
||||
onClick={this.previewImage.bind(
|
||||
this,
|
||||
file,
|
||||
key
|
||||
)}
|
||||
>
|
||||
<Icon icon="view" className="icon" />
|
||||
</a>
|
||||
|
||||
{!!crop &&
|
||||
reCropable !== false &&
|
||||
!disabled ? (
|
||||
<a
|
||||
data-tooltip={__('Image.crop')}
|
||||
data-position="bottom"
|
||||
onClick={this.editImage.bind(this, key)}
|
||||
>
|
||||
<Icon icon="pencil" className="icon" />
|
||||
</a>
|
||||
) : null}
|
||||
{!disabled ? (
|
||||
<a
|
||||
data-tooltip={__('Select.clear')}
|
||||
data-position="bottom"
|
||||
onClick={this.removeFile.bind(
|
||||
this,
|
||||
file,
|
||||
key
|
||||
overlays={
|
||||
<>
|
||||
{file.info ? (
|
||||
[
|
||||
<div key="info">
|
||||
{file.info.width} x{' '}
|
||||
{file.info.height}
|
||||
</div>,
|
||||
file.info.len ? (
|
||||
<div key="size">
|
||||
{ImageControl.formatFileSize(
|
||||
file.info.len
|
||||
)}
|
||||
</div>
|
||||
) : null
|
||||
]
|
||||
) : (
|
||||
<div>...</div>
|
||||
)}
|
||||
>
|
||||
<Icon icon="remove" className="icon" />
|
||||
</a>
|
||||
) : null}
|
||||
<a
|
||||
data-tooltip={
|
||||
file.name ||
|
||||
getNameFromUrl(file.value || file.url)
|
||||
}
|
||||
data-position="bottom"
|
||||
target="_blank"
|
||||
>
|
||||
<Icon icon="info" className="icon" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<a
|
||||
data-tooltip={__('Image.zoomIn')}
|
||||
data-position="bottom"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
href={file.url || file.preview}
|
||||
onClick={this.previewImage.bind(
|
||||
this,
|
||||
file,
|
||||
key
|
||||
)}
|
||||
>
|
||||
<Icon icon="view" className="icon" />
|
||||
</a>
|
||||
|
||||
{!!crop &&
|
||||
reCropable !== false &&
|
||||
!disabled ? (
|
||||
<a
|
||||
data-tooltip={__('Image.crop')}
|
||||
data-position="bottom"
|
||||
onClick={this.editImage.bind(
|
||||
this,
|
||||
key
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
icon="pencil"
|
||||
className="icon"
|
||||
/>
|
||||
</a>
|
||||
) : null}
|
||||
{!disabled ? (
|
||||
<a
|
||||
data-tooltip={__('Select.clear')}
|
||||
data-position="bottom"
|
||||
onClick={this.removeFile.bind(
|
||||
this,
|
||||
file,
|
||||
key
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
icon="remove"
|
||||
className="icon"
|
||||
/>
|
||||
</a>
|
||||
) : null}
|
||||
<a
|
||||
data-tooltip={
|
||||
file.name ||
|
||||
getNameFromUrl(file.value || file.url)
|
||||
}
|
||||
data-position="bottom"
|
||||
target="_blank"
|
||||
>
|
||||
<Icon icon="info" className="icon" />
|
||||
</a>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -108,6 +108,7 @@ export interface ImageThumbProps
|
||||
onEnlarge?: (info: ImageThumbProps) => void;
|
||||
index?: number;
|
||||
onLoad?: React.EventHandler<any>;
|
||||
overlays?: JSX.Element;
|
||||
}
|
||||
|
||||
export class ImageThumb extends React.Component<ImageThumbProps> {
|
||||
@ -133,37 +134,42 @@ export class ImageThumb extends React.Component<ImageThumbProps> {
|
||||
caption,
|
||||
onLoad,
|
||||
enlargeAble,
|
||||
translate: __
|
||||
translate: __,
|
||||
overlays
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div className={cx('Image', className)}>
|
||||
<div
|
||||
className={cx(
|
||||
'Image-thumb',
|
||||
thumbClassName,
|
||||
thumbMode ? `Image-thumb--${thumbMode}` : '',
|
||||
thumbRatio ? `Image-thumb--${thumbRatio.replace(/:/g, '-')}` : ''
|
||||
)}
|
||||
style={{height: height, width: width}}
|
||||
>
|
||||
<img
|
||||
onLoad={onLoad}
|
||||
className={cx(imageClassName)}
|
||||
src={src}
|
||||
alt={alt}
|
||||
/>
|
||||
|
||||
{enlargeAble ? (
|
||||
<div className={cx('Image-thumbWrap')}>
|
||||
<div
|
||||
className={cx(
|
||||
'Image-thumb',
|
||||
thumbClassName,
|
||||
thumbMode ? `Image-thumb--${thumbMode}` : '',
|
||||
thumbRatio ? `Image-thumb--${thumbRatio.replace(/:/g, '-')}` : ''
|
||||
)}
|
||||
style={{height: height, width: width}}
|
||||
>
|
||||
<img
|
||||
onLoad={onLoad}
|
||||
className={cx(imageClassName)}
|
||||
src={src}
|
||||
alt={alt}
|
||||
/>
|
||||
</div>
|
||||
{enlargeAble || overlays ? (
|
||||
<div key="overlay" className={cx('Image-overlay')}>
|
||||
<a
|
||||
data-tooltip={__('Image.zoomIn')}
|
||||
data-position="bottom"
|
||||
target="_blank"
|
||||
onClick={this.handleEnlarge}
|
||||
>
|
||||
<Icon icon="view" className="icon" />
|
||||
</a>
|
||||
{enlargeAble ? (
|
||||
<a
|
||||
data-tooltip={__('Image.zoomIn')}
|
||||
data-position="bottom"
|
||||
target="_blank"
|
||||
onClick={this.handleEnlarge}
|
||||
>
|
||||
<Icon icon="view" className="icon" />
|
||||
</a>
|
||||
) : null}
|
||||
{overlays}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user