p96170835
/
amis
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Image 删掉压缩选项配置功能,裁剪样式调整

This commit is contained in:
liaoxuezhi 2019-10-23 10:10:21 +08:00
parent 976dff52b8
commit 443b51cd79
2 changed files with 44 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -184,27 +184,30 @@
&-uploadBtn {
margin-top: 5px;
}
}
&-cropperWrapper {
position: relative;
// todo
.cropper-wrapper {
position: relative;
img {
max-width: 100%;
max-height: 400px;
img {
max-width: 100%;
max-height: 400px;
}
}
.btn {
&-croperToolbar {
display: inline-flex;
width: 50px;
position: absolute;
bottom: 0;
right: 0;
}
bottom: 0;
flex-direction: column;
align-items: flex-end;
.btn:nth-child(2n + 1) {
bottom: 40px;
right: 4px;
>a {
color: #fff;
padding: 2px 5px;
cursor: pointer;
font-size: 20px;
}
}
}

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

@ -32,6 +32,12 @@ export interface ImageProps extends FormControlProps {
aspectRatio?: number;
aspectRatioLabel?: string;
};
crop?:
| boolean
| {
aspectRatio?: number;
[propName: string]: any;
};
accept?: string;
btnUploadClassName?: string;
btnClassName?: string;
@ -53,7 +59,7 @@ export interface ImageState {
maxHeight?: number;
};
files: Array<FileValue | FileX>;
crop?: object;
crop?: any;
error?: string;
cropFile?: FileValue;
submitOnChange?: boolean;
@ -725,73 +731,6 @@ export default class ImageControl extends React.Component<ImageProps, ImageState
}
}
renderCompressOptions() {
const showCompressOptions = this.props.showCompressOptions;
const cx = this.props.classnames;
const classPrefix = this.props.classPrefix;
if (!showCompressOptions) {
return;
}
return (
<div key="options" className="m-t">
<Switch
classPrefix={classPrefix}
checked={!!this.state.compress}
onChange={checked => this.setState({compress: checked})}
disabled={this.props.disabled}
/>
<span className="m-l-xs">开启缩放?</span>
{this.state.compress && (
<div className="inline">
<input
className="form-control w-xs inline m-l-xs m-r-xs"
type="text"
value={
typeof this.state.compressOptions.maxWidth === 'undefined'
? 800
: this.state.compressOptions.maxWidth
}
onChange={e =>
this.setState({
compressOptions: {
...this.state.compressOptions,
maxWidth: parseInt(e.currentTarget.value, 10) || 0
}
})
}
disabled={this.props.disabled}
/>
<span className=" m-l-xs m-r-xs">X</span>
<input
className="form-control w-xs inline m-l-xs m-r-xs"
type="text"
value={
typeof this.state.compressOptions.maxHeight === 'undefined'
? 600
: this.state.compressOptions.maxHeight
}
onChange={e =>
this.setState({
compressOptions: {
...this.state.compressOptions,
maxHeight: parseInt(e.currentTarget.value, 10) || 0
}
})
}
disabled={this.props.disabled}
/>
</div>
)}
</div>
);
}
render() {
const {
className,
@ -814,14 +753,26 @@ export default class ImageControl extends React.Component<ImageProps, ImageState
return (
<div className={cx(`ImageControl`, className)} tabIndex={-1} onPaste={this.handlePaste}>
{cropFile ? (
<div className="cropper-wrapper">
<div className={cx('ImageControl-cropperWrapper')}>
<Cropper {...crop} ref="cropper" src={cropFile.preview} />
<button type="button" className="btn-sm btn btn-link" onClick={this.handleCrop}>
<i className="fa fa-2x fa-check text-warning" />
</button>
<button type="button" className="btn-sm btn btn-link" onClick={this.cancelCrop}>
<i className="fa fa-2x fa-times text-white" />
</button>
<div className={cx('ImageControl-croperToolbar')}>
<a
className={cx('ImageControl-cropCancel')}
onClick={this.cancelCrop}
data-tooltip="取消"
data-position="left"
>
<Icon icon="close" className="icon" />
</a>
<a
className={cx('ImageControl-cropConfirm')}
onClick={this.handleCrop}
data-tooltip="确认"
data-position="left"
>
<Icon icon="check" className="icon" />
</a>
</div>
</div>
) : (
<DropZone
@ -949,8 +900,6 @@ export default class ImageControl extends React.Component<ImageProps, ImageState
</DropZone>
)}
{this.renderCompressOptions()}
{!autoUpload && !hideUploadButton && files.length ? (
<Button
level="default"