Fix bug delete picture and fix ImgPreview slider

This commit is contained in:
cyril lopez 2018-02-27 18:26:16 +01:00
parent 03668670dc
commit 8a33b6cea2
2 changed files with 12 additions and 9 deletions

View File

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

View File

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