@contentful/field-editor-reference 6.15.1 → 6.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cjs/assets/WrappedAssetCard/WrappedAssetCard.js +19 -2
  2. package/dist/cjs/components/AssetThumbnail/AssetThumbnail.js +7 -5
  3. package/dist/esm/assets/WrappedAssetCard/WrappedAssetCard.js +19 -2
  4. package/dist/esm/components/AssetThumbnail/AssetThumbnail.js +7 -5
  5. package/package.json +3 -3
package/dist/cjs/assets/WrappedAssetCard/WrappedAssetCard.js CHANGED
@@ -86,8 +86,26 @@ function getFileType(file) {
86
86
  });
87
87
  return groupToIconMap[groupName] || 'archive';
88
88
  }
89
+ const THUMBNAIL_SIZE = 150;
89
90
  const WrappedAssetCard = ({ asset, className, size, localeCode, defaultLocaleCode, activeLocales, localesStatusMap, isDisabled, isSelected, isClickable, useLocalizedEntityStatus, renderDragHandle, getEntityScheduledActions, onEdit, getAssetUrl, onRemove, releaseEntityStatus, releaseStatusMap, release })=>{
90
91
  const status = _fieldeditorshared.entityHelpers.getEntityStatus(asset.sys, useLocalizedEntityStatus ? localeCode : undefined);
92
+ const entityFile = asset.fields.file ? asset.fields.file[localeCode] || asset.fields.file[defaultLocaleCode] : undefined;
93
+ const imageUrl = _react.useMemo(()=>{
94
+ if (!entityFile?.url) return '';
95
+ if (size === 'small') {
96
+ return _fieldeditorshared.entityHelpers.getResolvedImageUrl(entityFile.url, {
97
+ w: THUMBNAIL_SIZE,
98
+ h: THUMBNAIL_SIZE,
99
+ fit: 'thumb'
100
+ });
101
+ }
102
+ return _fieldeditorshared.entityHelpers.getResolvedImageUrl(entityFile.url, {
103
+ h: 300
104
+ });
105
+ }, [
106
+ entityFile?.url,
107
+ size
108
+ ]);
91
109
  if (status === 'deleted') {
92
110
  return /*#__PURE__*/ _react.createElement(_components.MissingAssetCard, {
93
111
  asSquare: true,
@@ -101,7 +119,6 @@ const WrappedAssetCard = ({ asset, className, size, localeCode, defaultLocaleCod
101
119
  defaultLocaleCode: defaultLocaleCode,
102
120
  defaultTitle: 'Untitled'
103
121
  });
104
- const entityFile = asset.fields.file ? asset.fields.file[localeCode] || asset.fields.file[defaultLocaleCode] : undefined;
105
122
  const href = getAssetUrl ? getAssetUrl(asset.sys.id) : undefined;
106
123
  return /*#__PURE__*/ _react.createElement(_f36components.AssetCard, {
107
124
  as: isClickable && href ? 'a' : 'article',
@@ -122,7 +139,7 @@ const WrappedAssetCard = ({ asset, className, size, localeCode, defaultLocaleCod
122
139
  releaseStatusMap: releaseStatusMap,
123
140
  release: release
124
141
  }),
125
- src: entityFile && entityFile.url ? size === 'small' ? `${entityFile.url}?w=150&h=150&fit=thumb` : `${entityFile.url}?h=300` : '',
142
+ src: imageUrl,
126
143
  onClick: isClickable ? (e)=>{
127
144
  e.preventDefault();
128
145
  onEdit && onEdit();
package/dist/cjs/components/AssetThumbnail/AssetThumbnail.js CHANGED
@@ -9,6 +9,7 @@ Object.defineProperty(exports, "AssetThumbnail", {
9
9
  }
10
10
  });
11
11
  const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
12
+ const _fieldeditorshared = require("@contentful/field-editor-shared");
12
13
  function _getRequireWildcardCache(nodeInterop) {
13
14
  if (typeof WeakMap !== "function") return null;
14
15
  var cacheBabelInterop = new WeakMap();
@@ -51,14 +52,15 @@ function _interop_require_wildcard(obj, nodeInterop) {
51
52
  return newObj;
52
53
  }
53
54
  const dimensions = {
54
- width: 70,
55
- height: 70
55
+ w: 70,
56
+ h: 70
56
57
  };
57
58
  function AssetThumbnail(props) {
59
+ const thumbnailUrl = _fieldeditorshared.entityHelpers.getResolvedImageUrl(props.file.url, dimensions);
58
60
  return /*#__PURE__*/ _react.createElement("img", {
59
61
  alt: props.file.fileName,
60
- src: `${props.file.url}?w=${dimensions.width}&h=${dimensions.height}&fit=thumb`,
61
- height: dimensions.height,
62
- width: dimensions.width
62
+ src: thumbnailUrl,
63
+ height: dimensions.h,
64
+ width: dimensions.w
63
65
  });
64
66
  }
package/dist/esm/assets/WrappedAssetCard/WrappedAssetCard.js CHANGED
@@ -30,8 +30,26 @@ function getFileType(file) {
30
30
  });
31
31
  return groupToIconMap[groupName] || 'archive';
32
32
  }
33
+ const THUMBNAIL_SIZE = 150;
33
34
  export const WrappedAssetCard = ({ asset, className, size, localeCode, defaultLocaleCode, activeLocales, localesStatusMap, isDisabled, isSelected, isClickable, useLocalizedEntityStatus, renderDragHandle, getEntityScheduledActions, onEdit, getAssetUrl, onRemove, releaseEntityStatus, releaseStatusMap, release })=>{
34
35
  const status = entityHelpers.getEntityStatus(asset.sys, useLocalizedEntityStatus ? localeCode : undefined);
36
+ const entityFile = asset.fields.file ? asset.fields.file[localeCode] || asset.fields.file[defaultLocaleCode] : undefined;
37
+ const imageUrl = React.useMemo(()=>{
38
+ if (!entityFile?.url) return '';
39
+ if (size === 'small') {
40
+ return entityHelpers.getResolvedImageUrl(entityFile.url, {
41
+ w: THUMBNAIL_SIZE,
42
+ h: THUMBNAIL_SIZE,
43
+ fit: 'thumb'
44
+ });
45
+ }
46
+ return entityHelpers.getResolvedImageUrl(entityFile.url, {
47
+ h: 300
48
+ });
49
+ }, [
50
+ entityFile?.url,
51
+ size
52
+ ]);
35
53
  if (status === 'deleted') {
36
54
  return /*#__PURE__*/ React.createElement(MissingAssetCard, {
37
55
  asSquare: true,
@@ -45,7 +63,6 @@ export const WrappedAssetCard = ({ asset, className, size, localeCode, defaultLo
45
63
  defaultLocaleCode: defaultLocaleCode,
46
64
  defaultTitle: 'Untitled'
47
65
  });
48
- const entityFile = asset.fields.file ? asset.fields.file[localeCode] || asset.fields.file[defaultLocaleCode] : undefined;
49
66
  const href = getAssetUrl ? getAssetUrl(asset.sys.id) : undefined;
50
67
  return /*#__PURE__*/ React.createElement(AssetCard, {
51
68
  as: isClickable && href ? 'a' : 'article',
@@ -66,7 +83,7 @@ export const WrappedAssetCard = ({ asset, className, size, localeCode, defaultLo
66
83
  releaseStatusMap: releaseStatusMap,
67
84
  release: release
68
85
  }),
69
- src: entityFile && entityFile.url ? size === 'small' ? `${entityFile.url}?w=150&h=150&fit=thumb` : `${entityFile.url}?h=300` : '',
86
+ src: imageUrl,
70
87
  onClick: isClickable ? (e)=>{
71
88
  e.preventDefault();
72
89
  onEdit && onEdit();
package/dist/esm/components/AssetThumbnail/AssetThumbnail.js CHANGED
@@ -1,13 +1,15 @@
1
1
  import * as React from 'react';
2
+ import { entityHelpers } from '@contentful/field-editor-shared';
2
3
  const dimensions = {
3
- width: 70,
4
- height: 70
4
+ w: 70,
5
+ h: 70
5
6
  };
6
7
  export function AssetThumbnail(props) {
8
+ const thumbnailUrl = entityHelpers.getResolvedImageUrl(props.file.url, dimensions);
7
9
  return /*#__PURE__*/ React.createElement("img", {
8
10
  alt: props.file.fileName,
9
- src: `${props.file.url}?w=${dimensions.width}&h=${dimensions.height}&fit=thumb`,
10
- height: dimensions.height,
11
- width: dimensions.width
11
+ src: thumbnailUrl,
12
+ height: dimensions.h,
13
+ width: dimensions.w
12
14
  });
13
15
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@contentful/field-editor-reference",
3
- "version": "6.15.1",
3
+ "version": "6.16.0",
4
4
  "main": "dist/cjs/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/types/index.d.ts",
@@ -39,7 +39,7 @@
39
39
  "@contentful/f36-components": "^5.4.1",
40
40
  "@contentful/f36-icons": "^5.4.1",
41
41
  "@contentful/f36-tokens": "^5.1.0",
42
- "@contentful/field-editor-shared": "^2.16.0",
42
+ "@contentful/field-editor-shared": "^2.17.0",
43
43
  "@contentful/mimetype": "^2.2.29",
44
44
  "@dnd-kit/core": "^6.0.8",
45
45
  "@dnd-kit/sortable": "^8.0.0",
@@ -68,5 +68,5 @@
68
68
  "publishConfig": {
69
69
  "registry": "https://npm.pkg.github.com/"
70
70
  },
71
- "gitHead": "c29a501efe92281b4a990adc129b78270ce1acff"
71
+ "gitHead": "c85b1e8cd6772eb796ed2b22ebb778c717f4a7f4"
72
72
  }