docs: clean up getAsset usage
This commit is contained in:
parent
9f8dc68e8a
commit
0806236dec
@ -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,
|
||||
|
@ -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
|
||||
|
||||
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user