mirror of
https://github.com/strapi/strapi.git
synced 2025-09-27 09:25:46 +00:00
Fix bug delete picture and fix ImgPreview slider
This commit is contained in:
parent
03668670dc
commit
8a33b6cea2
@ -8,7 +8,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { FormattedMessage } from 'react-intl';
|
import { FormattedMessage } from 'react-intl';
|
||||||
import { cloneDeep, get, isEmpty, isObject, size } from 'lodash';
|
import { cloneDeep, get, has, isEmpty, isObject, size } from 'lodash';
|
||||||
import cn from 'classnames';
|
import cn from 'classnames';
|
||||||
|
|
||||||
import BkgImg from 'assets/icons/icon_upload.svg';
|
import BkgImg from 'assets/icons/icon_upload.svg';
|
||||||
@ -25,6 +25,7 @@ class ImgPreview extends React.Component {
|
|||||||
isOver: false,
|
isOver: false,
|
||||||
isOverArrow: false,
|
isOverArrow: false,
|
||||||
isImg: false,
|
isImg: false,
|
||||||
|
isInitValue: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
@ -43,16 +44,14 @@ class ImgPreview extends React.Component {
|
|||||||
this.updateFilePosition(nextProps.files.length - 1);
|
this.updateFilePosition(nextProps.files.length - 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Update the preview
|
// Update the preview or slide pictures or init the component
|
||||||
if (nextProps.didDeleteFile !== this.props.didDeleteFile) {
|
if (nextProps.didDeleteFile !== this.props.didDeleteFile || nextProps.position !== this.props.position || size(nextProps.files) !== size(this.props.files) && !this.state.isInitValue) {
|
||||||
const file = nextProps.files[nextProps.position] || '';
|
const file = nextProps.files[nextProps.position] || '';
|
||||||
this.generateImgURL(file)
|
this.generateImgURL(file)
|
||||||
}
|
|
||||||
|
|
||||||
// Slide pictures
|
if (!this.state.isInitValue) {
|
||||||
if (nextProps.position !== this.props.position) {
|
this.setState({ isInitValue: true });
|
||||||
const file = nextProps.files[nextProps.position] || '';
|
}
|
||||||
this.generateImgURL(file);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -68,7 +67,7 @@ class ImgPreview extends React.Component {
|
|||||||
* @return {URL}
|
* @return {URL}
|
||||||
*/
|
*/
|
||||||
generateImgURL = (file) => {
|
generateImgURL = (file) => {
|
||||||
if (this.isPictureType(file.name)) {
|
if (this.isPictureType(file.name) && !has(file, 'url')) {
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
reader.onloadend = () => {
|
reader.onloadend = () => {
|
||||||
this.setState({
|
this.setState({
|
||||||
@ -78,6 +77,9 @@ class ImgPreview extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
reader.readAsDataURL(file);
|
reader.readAsDataURL(file);
|
||||||
|
} else if (has(file, 'url')) {
|
||||||
|
const isImg = this.isPictureType(file.name);
|
||||||
|
this.setState({ isImg, imgURL: `${strapi.backendURL}${file.url}` });
|
||||||
} else {
|
} else {
|
||||||
this.setState({ isImg: false, imgURL: file.name });
|
this.setState({ isImg: false, imgURL: file.name });
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
.imgPreviewHint {
|
.imgPreviewHint {
|
||||||
display: block;
|
display: block;
|
||||||
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 49px;
|
top: 49px;
|
||||||
padding: 12px 75px 0 75px;
|
padding: 12px 75px 0 75px;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user