test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 10:59:42 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Merge pull request #1964 from 2betop/images

Browse Source 
fix: 修复图片表单项 disabled 影响放大功能的问题
This commit is contained in:
吴多益 2021-05-14 17:38:08 +08:00 committed by GitHub
commit e5943f5303
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 130 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
__tests__/renderers/__snapshots__/Carousel.test.tsx.snap
View File

@ -34,6 +34,7 @@ exports[`Renderer:carousel 1`] = `
<div
class="description block"
>
@ -64,6 +65,7 @@ exports[`Renderer:carousel 1`] = `
</span>
</span>
</div>

4
__tests__/renderers/__snapshots__/Image.test.tsx.snap
View File

@ -7,6 +7,9 @@ exports[`Renderer:image 1`] = `
>
<div
class="a-Image"
>
<div
class="a-Image-thumbWrap"
>
<div
class="a-Image-thumb a-Image-thumb--contain a-Image-thumb--1-1"
@ -16,6 +19,7 @@ exports[`Renderer:image 1`] = `
src="https://www.baidu.com/img/bd_logo1.png"
/>
</div>
</div>
<div
class="a-Image-info"
>

8
scss/components/_images.scss
View File

@ -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;
}
}

40
scss/components/form/_image.scss
View File

@ -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;

31
src/renderers/Form/Image.tsx
View File

@ -1188,6 +1188,7 @@ export default class ImageControl extends React.Component<
onDropRejected={this.handleDropRejected}
accept={accept}
multiple={multiple}
disabled={disabled}
>
{({
getRootProps,
@ -1324,16 +1325,13 @@ export default class ImageControl extends React.Component<
alt={file.name}
thumbMode={thumbMode}
thumbRatio={thumbRatio}
/>
<div
key="overlay"
className={cx('ImageControl-itemOverlay')}
>
overlays={
<>
{file.info ? (
[
<div key="info">
{file.info.width} x {file.info.height}
{file.info.width} x{' '}
{file.info.height}
</div>,
file.info.len ? (
<div key="size">
@ -1368,9 +1366,15 @@ export default class ImageControl extends React.Component<
<a
data-tooltip={__('Image.crop')}
data-position="bottom"
onClick={this.editImage.bind(this, key)}
onClick={this.editImage.bind(
this,
key
)}
>
<Icon icon="pencil" className="icon" />
<Icon
icon="pencil"
className="icon"
/>
</a>
) : null}
{!disabled ? (
@ -1383,7 +1387,10 @@ export default class ImageControl extends React.Component<
key
)}
>
<Icon icon="remove" className="icon" />
<Icon
icon="remove"
className="icon"
/>
</a>
) : null}
<a
@ -1396,7 +1403,9 @@ export default class ImageControl extends React.Component<
>
<Icon icon="info" className="icon" />
</a>
</div>
</>
}
/>
</>
)}
</div>

12
src/renderers/Image.tsx
View File

@ -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,11 +134,13 @@ 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-thumbWrap')}>
<div
className={cx(
'Image-thumb',
@ -153,9 +156,10 @@ export class ImageThumb extends React.Component<ImageThumbProps> {
src={src}
alt={alt}
/>
{enlargeAble ? (
</div>
{enlargeAble || overlays ? (
<div key="overlay" className={cx('Image-overlay')}>
{enlargeAble ? (
<a
data-tooltip={__('Image.zoomIn')}
data-position="bottom"
@ -164,6 +168,8 @@ export class ImageThumb extends React.Component<ImageThumbProps> {
>
<Icon icon="view" className="icon" />
</a>
) : null}
{overlays}
</div>
) : null}
</div>