docs: clean up getAsset usage

This commit is contained in:
Daniel Lautzenheiser 2023-02-02 10:21:04 -05:00
parent 9f8dc68e8a
commit 0806236dec
3 changed files with 7 additions and 26 deletions

View File

@ -34,7 +34,7 @@ The following parameters will be passed to your `react_component` during render:
| fields | object | The fields for the given collection |
| document | Document | The document object the preview is within. If rendered with a frame, it will be the frame's document |
| window | Window | The window object the preview is within. If rendered with a frame, it will be the frame's window |
| getAsset | Async function | Function that given a url returns (as a promise) a loaded asset |
| getAsset | Async function | __Deprecated__ Function that given a url returns (as a promise) a loaded asset |
| widgetFor | Function | Given a field name, returns the rendered preview of that field's widget and value |
| widgetsFor | Function | Given a field name, returns the rendered previews of that field's nested child widgets and values |
@ -43,7 +43,7 @@ The following parameters will be passed to your `react_component` during render:
<CodeTabs>
```js
const PostPreview = ({ widgetFor, getAsset, entry, collection, field }) => {
const PostPreview = ({ widgetFor, entry, collection, field }) => {
const imageUrl = useMediaAsset(entry.data.image, collection, field, entry);
return h(
@ -61,7 +61,7 @@ CMS.registerPreviewTemplate('posts', PostPreview);
```jsx
import CMS, { useMediaAsset } from '@staticcms/core';
const PostPreview = ({ widgetFor, getAsset, entry, collection, field }) => {
const PostPreview = ({ widgetFor, entry, collection, field }) => {
const imageUrl = useMediaAsset(entry.data.image, collection, field, entry);
return (
@ -92,7 +92,6 @@ interface Post {
const PostPreview = ({
widgetFor,
getAsset,
entry,
collection,
field,

View File

@ -58,7 +58,7 @@ The react component that renders the control. It receives the following props:
| forList | boolean | Specifices if the widget is within a `list` widget |
| isFieldDuplicate | function | Function that given a field configuration, returns if that field is a duplicate |
| isFieldHidden | function | Function that given a field configuration, returns if that field is hidden |
| getAsset | Async function | Function that given a url returns (as a promise) a loaded asset |
| getAsset | Async function | __Deprecated__ Function that given a url returns (as a promise) a loaded asset |
| locale | string<br />\| undefined | The current locale of the editor |
| mediaPaths | object | Key/value object of control IDs (passed to the media library) mapping to media paths |
| clearMediaControl | function | Clears a control ID's value from the internal store |
@ -107,7 +107,7 @@ The react component that renders the preview. It receives the following props:
| collection | object | The collection configuration for the current widget. See [Collections](/docs/collection-overview) |
| config | object | The current Static CMS config. See [configuration options](/docs/configuration-options) |
| entry | object | Object with a `data` field that contains the current value of all widgets in the editor |
| getAsset | Async function | Function that given a url returns (as a promise) a loaded asset |
| getAsset | Async function | __Deprecated__ Function that given a url returns (as a promise) a loaded asset |
### Options

View File

@ -59,7 +59,6 @@ const EditorControl: FC<WidgetControlProps<string, HtmlField>> = ({
value, // Typed as string | null | undefined
onChange,
openMediaLibrary,
getAsset,
mediaPaths
}) => {
...
@ -78,7 +77,6 @@ import type { HtmlField } from '../config';
const EditorPreview: FC<WidgetPreviewProps<string, HtmlField>> = ({
field, // Typed as a HtmlField
value, // Typed as string | null | undefined
getAsset,
}) => {
...
};
@ -103,26 +101,10 @@ interface PostPreviewData {
tags?: string[];
}
const PostPreview: FC<TemplatePreviewProps<PostPreviewData>> = ({ entry, widgetFor, getAsset }) => {
const PostPreview: FC<TemplatePreviewProps<PostPreviewData>> = ({ entry, widgetFor, collection, field }) => {
const dateString = useMemo(() => entry.data.date, [entry.data.date]);
const [image, setImage] = useState('');
useEffect(() => {
let alive = true;
const loadImage = async () => {
const loadedImage = await getAsset(entry.data.image ?? '');
if (alive) {
setImage(loadedImage.toString());
}
};
loadImage();
return () => {
alive = false;
};
}, [entry.data.image, getAsset]);
const image = useMediaAsset(entry.data.image ?? '', collection, field, entry);
return (
<div>