gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: clean up getAsset usage

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/docs/content/docs/custom-previews.mdx
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 | | 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 | | 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 | | 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 | | 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 | | 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> <CodeTabs>
```js ```js
const PostPreview = ({ widgetFor, getAsset, entry, collection, field }) => { const PostPreview = ({ widgetFor, entry, collection, field }) => {
const imageUrl = useMediaAsset(entry.data.image, collection, field, entry); const imageUrl = useMediaAsset(entry.data.image, collection, field, entry);
return h( return h(
@ -61,7 +61,7 @@ CMS.registerPreviewTemplate('posts', PostPreview);
```jsx ```jsx
import CMS, { useMediaAsset } from '@staticcms/core'; 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); const imageUrl = useMediaAsset(entry.data.image, collection, field, entry);
return ( return (
@ -92,7 +92,6 @@ interface Post {
const PostPreview = ({ const PostPreview = ({
widgetFor, widgetFor,
getAsset,
entry, entry,
collection, collection,
field, field,

4
packages/docs/content/docs/custom-widgets.mdx
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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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) | | 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) | | 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 | | 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 ### Options

22
packages/docs/content/docs/typescript.mdx
View File

@ -59,7 +59,6 @@ const EditorControl: FC<WidgetControlProps<string, HtmlField>> = ({
value, // Typed as string | null | undefined value, // Typed as string | null | undefined
onChange, onChange,
openMediaLibrary, openMediaLibrary,
getAsset,
mediaPaths mediaPaths
}) => { }) => {
... ...
@ -78,7 +77,6 @@ import type { HtmlField } from '../config';
const EditorPreview: FC<WidgetPreviewProps<string, HtmlField>> = ({ const EditorPreview: FC<WidgetPreviewProps<string, HtmlField>> = ({
field, // Typed as a HtmlField field, // Typed as a HtmlField
value, // Typed as string | null | undefined value, // Typed as string | null | undefined
getAsset,
}) => { }) => {
... ...
}; };
@ -103,26 +101,10 @@ interface PostPreviewData {
tags?: string[]; 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 dateString = useMemo(() => entry.data.date, [entry.data.date]);
const [image, setImage] = useState(''); const image = useMediaAsset(entry.data.image ?? '', collection, field, entry);
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]);
return ( return (
<div> <div>