fix: change getAsset to not return a promise (#3232)

* fix: change getAsset to not return a promise

* fix: update markdown widget per getAsset changes

* test: fix editor component image test

* docs: update getAsset docs
This commit is contained in:
Erez Rokah
2020-02-13 02:12:36 +02:00
committed by GitHub
parent 2457c29baf
commit ab685e8594
30 changed files with 317 additions and 355 deletions

View File

@ -2,9 +2,9 @@ import React from 'react';
import PropTypes from 'prop-types';
import styled from '@emotion/styled';
import { List } from 'immutable';
import { WidgetPreviewContainer, Asset } from 'netlify-cms-ui-default';
import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
const FileLink = styled(({ value: href, path }) => (
const FileLink = styled(({ href, path }) => (
<a href={href} rel="noopener noreferrer" target="_blank">
{path}
</a>
@ -12,25 +12,24 @@ const FileLink = styled(({ value: href, path }) => (
display: block;
`;
const FileLinkAsset = ({ value, getAsset }) => {
return <Asset path={value} getAsset={getAsset} component={FileLink} />;
};
function FileLinkList({ values, getAsset }) {
function FileLinkList({ values, getAsset, folder }) {
return (
<div>
{values.map(value => (
<FileLinkAsset key={value} value={value} getAsset={getAsset} />
<FileLink key={value} path={value} href={getAsset(value, folder)} />
))}
</div>
);
}
function FileContent({ value, getAsset }) {
function FileContent(props) {
const { value, getAsset, field } = props;
const folder = field.get('media_folder');
if (Array.isArray(value) || List.isList(value)) {
return <FileLinkList values={value} getAsset={getAsset} />;
return <FileLinkList values={value} getAsset={getAsset} folder={folder} />;
}
return <FileLinkAsset value={value} getAsset={getAsset} />;
return <FileLink key={value} path={value} href={getAsset(value, folder)} />;
}
const FilePreview = props => (

View File

@ -6,15 +6,7 @@ import { Map, List } from 'immutable';
import { once } from 'lodash';
import uuid from 'uuid/v4';
import { oneLine } from 'common-tags';
import {
lengths,
components,
buttons,
borders,
effects,
shadows,
Asset,
} from 'netlify-cms-ui-default';
import { lengths, components, buttons, borders, effects, shadows } from 'netlify-cms-ui-default';
const MAX_DISPLAY_LENGTH = 50;
@ -31,15 +23,13 @@ const ImageWrapper = styled.div`
${shadows.inset};
`;
const Image = styled(({ value: src }) => <img src={src || ''} role="presentation" />)`
const StyledImage = styled.img`
width: 100%;
height: 100%;
object-fit: contain;
`;
const ImageAsset = ({ getAsset, value, folder }) => {
return <Asset folder={folder} path={value} getAsset={getAsset} component={Image} />;
};
const Image = props => <StyledImage role="presentation" {...props} />;
const MultiImageWrapper = styled.div`
display: flex;
@ -118,9 +108,9 @@ export default function withFileControl({ forImage } = {}) {
shouldComponentUpdate(nextProps) {
/**
* Always update if the value changes.
* Always update if the value or getAsset changes.
*/
if (this.props.value !== nextProps.value) {
if (this.props.value !== nextProps.value || this.props.getAsset !== nextProps.getAsset) {
return true;
}
@ -228,15 +218,17 @@ export default function withFileControl({ forImage } = {}) {
<MultiImageWrapper>
{value.map(val => (
<ImageWrapper key={val}>
<ImageAsset getAsset={getAsset} value={val} folder={folder} />
<Image src={getAsset(val, folder) || ''} />
</ImageWrapper>
))}
</MultiImageWrapper>
);
}
const src = getAsset(value, folder);
return (
<ImageWrapper>
<ImageAsset getAsset={getAsset} value={value} folder={folder} />
<Image src={src || ''} />
</ImageWrapper>
);
};