forked from p96170835/amis
Image 删掉压缩选项配置功能,裁剪样式调整
This commit is contained in:
liaoxuezhi
parent
976dff52b8
commit
443b51cd79
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue