diff --git a/scss/components/form/_image.scss b/scss/components/form/_image.scss index 6c70fde6..80969561 100644 --- a/scss/components/form/_image.scss +++ b/scss/components/form/_image.scss @@ -176,6 +176,14 @@ transition: ease-out width 0.3s; } + &-item.is-invalid &-itemClear { + display: none; + } + + &-item.is-invalid:hover &-itemClear { + display: block; + } + &-retryBtn { margin: 0; width: px2rem(108px); diff --git a/src/renderers/Form/Image.tsx b/src/renderers/Form/Image.tsx index 8d38b63a..a29b2a26 100644 --- a/src/renderers/Form/Image.tsx +++ b/src/renderers/Form/Image.tsx @@ -148,6 +148,7 @@ export default class ImageControl extends React.Component< dropzone = React.createRef(); current: FileValue | FileX | null = null; resolve?: (value?: any) => void; + emitValue: any; constructor(props: ImageProps) { super(props); @@ -197,7 +198,7 @@ export default class ImageControl extends React.Component< componentWillReceiveProps(nextProps: ImageProps) { const props = this.props; - if (props.value !== nextProps.value) { + if (props.value !== nextProps.value && this.emitValue !== nextProps.value) { const value: string | Array | FileValue = nextProps.value; const multiple = nextProps.multiple; @@ -305,7 +306,7 @@ export default class ImageControl extends React.Component< ); } - startUpload() { + startUpload(retry: boolean = false) { if (this.state.uploading) { return; } @@ -315,7 +316,7 @@ export default class ImageControl extends React.Component< uploading: true, locked: true, files: this.files = this.files.map(file => { - if (file.state === 'error') { + if (retry && file.state === 'error') { file.state = 'pending'; } @@ -497,13 +498,32 @@ export default class ImageControl extends React.Component< : newValue; } - onChange(newValue); + onChange((this.emitValue = newValue)); } handleSelect() { this.dropzone.current && this.dropzone.current.open(); } + handleRetry(index: number) { + const files = this.files.concat(); + const file = files[index]; + + if (file.state !== 'invalid' && file.state !== 'error') { + return; + } + + file.state = 'pending'; + file.progress = 0; + + this.setState( + { + files: files + }, + this.startUpload + ); + } + handleDrop(files: Array) { const {multiple, crop} = this.props; @@ -905,17 +925,32 @@ export default class ImageControl extends React.Component< > {file.state === 'invalid' || file.state === 'error' ? ( - - -

- 重新上传 -

-
+ <> + + + + + + +

+ 重新上传 +

+
+ ) : file.state === 'uploading' ? ( <> ) : null}