@contentful/field-editor-reference 5.28.3 → 5.29.1

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 (26) hide show
  1. package/dist/cjs/assets/WrappedAssetCard/FetchingWrappedAssetCard.js +2 -1
  2. package/dist/cjs/assets/WrappedAssetCard/WrappedAssetCard.js +7 -17
  3. package/dist/cjs/assets/WrappedAssetCard/WrappedAssetLink.js +6 -24
  4. package/dist/cjs/components/EntityStatusBadge/EntityStatusBadge.js +40 -0
  5. package/dist/cjs/components/EntityStatusBadge/index.js +18 -0
  6. package/dist/cjs/components/ScheduledIconWithTooltip/ScheduledIconWithTooltip.js +41 -9
  7. package/dist/cjs/components/index.js +4 -0
  8. package/dist/cjs/entries/WrappedEntryCard/FetchingWrappedEntryCard.js +2 -1
  9. package/dist/cjs/entries/WrappedEntryCard/WrappedEntryCard.js +9 -24
  10. package/dist/esm/assets/WrappedAssetCard/FetchingWrappedAssetCard.js +2 -1
  11. package/dist/esm/assets/WrappedAssetCard/WrappedAssetCard.js +9 -19
  12. package/dist/esm/assets/WrappedAssetCard/WrappedAssetLink.js +7 -20
  13. package/dist/esm/components/EntityStatusBadge/EntityStatusBadge.js +25 -0
  14. package/dist/esm/components/EntityStatusBadge/index.js +1 -0
  15. package/dist/esm/components/ScheduledIconWithTooltip/ScheduledIconWithTooltip.js +30 -6
  16. package/dist/esm/components/index.js +1 -0
  17. package/dist/esm/entries/WrappedEntryCard/FetchingWrappedEntryCard.js +2 -1
  18. package/dist/esm/entries/WrappedEntryCard/WrappedEntryCard.js +11 -21
  19. package/dist/types/assets/WrappedAssetCard/WrappedAssetCard.d.ts +2 -1
  20. package/dist/types/common/customCardTypes.d.ts +1 -0
  21. package/dist/types/components/EntityStatusBadge/EntityStatusBadge.d.ts +8 -0
  22. package/dist/types/components/EntityStatusBadge/index.d.ts +1 -0
  23. package/dist/types/components/ScheduledIconWithTooltip/ScheduledIconWithTooltip.d.ts +7 -1
  24. package/dist/types/components/index.d.ts +1 -0
  25. package/dist/types/entries/WrappedEntryCard/WrappedEntryCard.d.ts +1 -0
  26. package/package.json +6 -6
@@ -123,7 +123,8 @@ function FetchingWrappedAssetCard(props) {
123
123
  renderDragHandle: props.renderDragHandle,
124
124
  onEdit,
125
125
  onRemove,
126
- useLocalizedEntityStatus: props.sdk.parameters.instance.useLocalizedEntityStatus
126
+ useLocalizedEntityStatus: props.sdk.parameters.instance.useLocalizedEntityStatus,
127
+ isLocalized: !!('localized' in props.sdk.field && props.sdk.field.localized)
127
128
  };
128
129
  if (props.viewType === 'link') {
129
130
  if (status === 'loading') {
@@ -10,11 +10,8 @@ Object.defineProperty(exports, "WrappedAssetCard", {
10
10
  });
11
11
  const _react = _interop_require_wildcard(require("react"));
12
12
  const _f36components = require("@contentful/f36-components");
13
- const _f36icons = require("@contentful/f36-icons");
14
- const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
15
13
  const _fieldeditorshared = require("@contentful/field-editor-shared");
16
14
  const _mimetype = _interop_require_default(require("@contentful/mimetype"));
17
- const _emotion = require("emotion");
18
15
  const _components = require("../../components");
19
16
  const _AssetCardActions = require("./AssetCardActions");
20
17
  function _interop_require_default(obj) {
@@ -76,11 +73,6 @@ const groupToIconMap = {
76
73
  code: 'code',
77
74
  markup: 'markup'
78
75
  };
79
- const styles = {
80
- scheduleIcon: (0, _emotion.css)({
81
- marginRight: _f36tokens.default.spacing2Xs
82
- })
83
- };
84
76
  const defaultProps = {
85
77
  isClickable: true
86
78
  };
@@ -119,17 +111,15 @@ const WrappedAssetCard = (props)=>{
119
111
  className: className,
120
112
  isSelected: isSelected,
121
113
  href: href,
122
- status: status,
123
- icon: _react.createElement(_components.ScheduledIconWithTooltip, {
114
+ badge: _react.createElement(_components.EntityStatusBadge, {
124
115
  getEntityScheduledActions: props.getEntityScheduledActions,
125
116
  entityType: "Asset",
126
- entityId: props.asset.sys.id
127
- }, _react.createElement(_f36icons.ClockIcon, {
128
- className: styles.scheduleIcon,
129
- size: "small",
130
- variant: "muted",
131
- testId: "schedule-icon"
132
- })),
117
+ entityId: props.asset.sys.id,
118
+ status: status
119
+ }),
120
+ icon: !props.isLocalized && props.useLocalizedEntityStatus ? _react.createElement(_f36components.Badge, {
121
+ variant: "secondary"
122
+ }, "Default") : null,
133
123
  src: entityFile && entityFile.url ? size === 'small' ? `${entityFile.url}?w=150&h=150&fit=thumb` : `${entityFile.url}?h=300` : '',
134
124
  onClick: isClickable ? (e)=>{
135
125
  e.preventDefault();
@@ -10,17 +10,9 @@ Object.defineProperty(exports, "WrappedAssetLink", {
10
10
  });
11
11
  const _react = _interop_require_wildcard(require("react"));
12
12
  const _f36components = require("@contentful/f36-components");
13
- const _f36icons = require("@contentful/f36-icons");
14
- const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
15
13
  const _fieldeditorshared = require("@contentful/field-editor-shared");
16
- const _emotion = require("emotion");
17
14
  const _components = require("../../components");
18
15
  const _AssetCardActions = require("./AssetCardActions");
19
- function _interop_require_default(obj) {
20
- return obj && obj.__esModule ? obj : {
21
- default: obj
22
- };
23
- }
24
16
  function _getRequireWildcardCache(nodeInterop) {
25
17
  if (typeof WeakMap !== "function") return null;
26
18
  var cacheBabelInterop = new WeakMap();
@@ -62,11 +54,6 @@ function _interop_require_wildcard(obj, nodeInterop) {
62
54
  }
63
55
  return newObj;
64
56
  }
65
- const styles = {
66
- scheduleIcon: (0, _emotion.css)({
67
- marginRight: _f36tokens.default.spacing2Xs
68
- })
69
- };
70
57
  const WrappedAssetLink = (props)=>{
71
58
  const { className, href, onEdit, onRemove, isDisabled } = props;
72
59
  const status = _fieldeditorshared.entityHelpers.getEntityStatus(props.asset.sys, props.useLocalizedEntityStatus ? props.localeCode : undefined);
@@ -90,20 +77,15 @@ const WrappedAssetLink = (props)=>{
90
77
  className: className,
91
78
  href: href,
92
79
  size: "small",
93
- status: status,
80
+ badge: _react.createElement(_components.EntityStatusBadge, {
81
+ getEntityScheduledActions: props.getEntityScheduledActions,
82
+ entityType: "Asset",
83
+ entityId: props.asset.sys.id,
84
+ status: status
85
+ }),
94
86
  thumbnailElement: entityFile && (0, _fieldeditorshared.isValidImage)(entityFile) ? _react.createElement(_components.AssetThumbnail, {
95
87
  file: entityFile
96
88
  }) : undefined,
97
- icon: _react.createElement(_components.ScheduledIconWithTooltip, {
98
- getEntityScheduledActions: props.getEntityScheduledActions,
99
- entityType: "Asset",
100
- entityId: props.asset.sys.id
101
- }, _react.createElement(_f36icons.ClockIcon, {
102
- className: styles.scheduleIcon,
103
- size: "small",
104
- variant: "muted",
105
- testId: "schedule-icon"
106
- })),
107
89
  onClick: (e)=>{
108
90
  e.preventDefault();
109
91
  onEdit();
@@ -0,0 +1,40 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "EntityStatusBadge", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return EntityStatusBadge;
9
+ }
10
+ });
11
+ const _react = _interop_require_default(require("react"));
12
+ const _f36components = require("@contentful/f36-components");
13
+ const _ScheduledIconWithTooltip = require("../ScheduledIconWithTooltip/ScheduledIconWithTooltip");
14
+ const _ScheduleTooltip = require("../ScheduledIconWithTooltip/ScheduleTooltip");
15
+ function _interop_require_default(obj) {
16
+ return obj && obj.__esModule ? obj : {
17
+ default: obj
18
+ };
19
+ }
20
+ function EntityStatusBadge({ entityId, entityType, getEntityScheduledActions, status, ...props }) {
21
+ const { isError, isLoading, jobs } = (0, _ScheduledIconWithTooltip.useScheduledActions)({
22
+ entityId,
23
+ entityType,
24
+ getEntityScheduledActions
25
+ });
26
+ if (isError || isLoading || jobs.length === 0) {
27
+ return _react.default.createElement(_f36components.EntityStatusBadge, {
28
+ ...props,
29
+ entityStatus: status
30
+ });
31
+ }
32
+ return _react.default.createElement(_ScheduleTooltip.ScheduleTooltip, {
33
+ job: jobs[0],
34
+ jobsCount: jobs.length
35
+ }, _react.default.createElement(_f36components.EntityStatusBadge, {
36
+ ...props,
37
+ entityStatus: status,
38
+ isScheduled: true
39
+ }));
40
+ }
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ _export_star(require("./EntityStatusBadge"), exports);
6
+ function _export_star(from, to) {
7
+ Object.keys(from).forEach(function(k) {
8
+ if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
9
+ Object.defineProperty(to, k, {
10
+ enumerable: true,
11
+ get: function() {
12
+ return from[k];
13
+ }
14
+ });
15
+ }
16
+ });
17
+ return from;
18
+ }
@@ -2,10 +2,18 @@
2
2
  Object.defineProperty(exports, "__esModule", {
3
3
  value: true
4
4
  });
5
- Object.defineProperty(exports, "ScheduledIconWithTooltip", {
6
- enumerable: true,
7
- get: function() {
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ ScheduledIconWithTooltip: function() {
8
13
  return ScheduledIconWithTooltip;
14
+ },
15
+ useScheduledActions: function() {
16
+ return useScheduledActions;
9
17
  }
10
18
  });
11
19
  const _react = _interop_require_wildcard(require("react"));
@@ -51,7 +59,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
51
59
  }
52
60
  return newObj;
53
61
  }
54
- const ScheduledIconWithTooltip = ({ entityType, entityId, getEntityScheduledActions, children })=>{
62
+ function useScheduledActions({ getEntityScheduledActions, entityId, entityType }) {
55
63
  const [status, setStatus] = _react.useState({
56
64
  type: 'loading'
57
65
  });
@@ -68,16 +76,40 @@ const ScheduledIconWithTooltip = ({ entityType, entityId, getEntityScheduledActi
68
76
  });
69
77
  });
70
78
  }, []);
71
- if (status.type === 'loading' || status.type === 'error') {
72
- return null;
79
+ if (status.type === 'loading') {
80
+ return {
81
+ isLoading: true,
82
+ isError: false,
83
+ jobs: []
84
+ };
85
+ }
86
+ if (status.type === 'error') {
87
+ return {
88
+ isLoading: false,
89
+ isError: true,
90
+ jobs: []
91
+ };
92
+ }
93
+ return {
94
+ isLoading: false,
95
+ isError: false,
96
+ jobs: status.jobs || []
97
+ };
98
+ }
99
+ const ScheduledIconWithTooltip = ({ entityType, entityId, getEntityScheduledActions, children })=>{
100
+ const { isError, isLoading, jobs } = useScheduledActions({
101
+ entityType,
102
+ entityId,
103
+ getEntityScheduledActions
104
+ });
105
+ if (isLoading || isError) {
106
+ return children;
73
107
  }
74
- const jobs = status.jobs ?? [];
75
108
  if (jobs.length === 0) {
76
109
  return null;
77
110
  }
78
- const mostRelevantJob = jobs[0];
79
111
  return _react.createElement(_ScheduleTooltip.ScheduleTooltip, {
80
- job: mostRelevantJob,
112
+ job: jobs[0],
81
113
  jobsCount: jobs.length
82
114
  }, children);
83
115
  };
@@ -21,6 +21,9 @@ _export(exports, {
21
21
  CreateEntryMenuTrigger: function() {
22
22
  return _CreateEntryMenuTrigger.CreateEntryMenuTrigger;
23
23
  },
24
+ EntityStatusBadge: function() {
25
+ return _EntityStatusBadge.EntityStatusBadge;
26
+ },
24
27
  LinkEntityActions: function() {
25
28
  return _LinkEntityActions.LinkEntityActions;
26
29
  },
@@ -50,3 +53,4 @@ const _ScheduledIconWithTooltip = require("./ScheduledIconWithTooltip/ScheduledI
50
53
  const _ScheduleTooltip = require("./ScheduledIconWithTooltip/ScheduleTooltip");
51
54
  const _AssetThumbnail = require("./AssetThumbnail/AssetThumbnail");
52
55
  const _ResourceEntityErrorCard = require("./ResourceEntityErrorCard/ResourceEntityErrorCard");
56
+ const _EntityStatusBadge = require("./EntityStatusBadge");
@@ -160,7 +160,8 @@ function FetchingWrappedEntryCard(props) {
160
160
  onMoveTop: props.onMoveTop,
161
161
  onMoveBottom: props.onMoveBottom,
162
162
  isBeingDragged: props.isBeingDragged,
163
- useLocalizedEntityStatus: props.sdk.parameters.instance.useLocalizedEntityStatus
163
+ useLocalizedEntityStatus: props.sdk.parameters.instance.useLocalizedEntityStatus,
164
+ isLocalized: !!('localized' in props.sdk.field && props.sdk.field.localized)
164
165
  };
165
166
  const { hasCardEditActions, hasCardMoveActions, hasCardRemoveActions } = props;
166
167
  function renderDefaultCard(props) {
@@ -10,17 +10,9 @@ Object.defineProperty(exports, "WrappedEntryCard", {
10
10
  });
11
11
  const _react = _interop_require_wildcard(require("react"));
12
12
  const _f36components = require("@contentful/f36-components");
13
- const _f36icons = require("@contentful/f36-icons");
14
- const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
15
13
  const _fieldeditorshared = require("@contentful/field-editor-shared");
16
- const _emotion = require("emotion");
17
14
  const _components = require("../../components");
18
15
  const _SpaceName = require("../../components/SpaceName/SpaceName");
19
- function _interop_require_default(obj) {
20
- return obj && obj.__esModule ? obj : {
21
- default: obj
22
- };
23
- }
24
16
  function _getRequireWildcardCache(nodeInterop) {
25
17
  if (typeof WeakMap !== "function") return null;
26
18
  var cacheBabelInterop = new WeakMap();
@@ -63,11 +55,6 @@ function _interop_require_wildcard(obj, nodeInterop) {
63
55
  return newObj;
64
56
  }
65
57
  const { getEntryTitle, getEntityDescription, getEntityStatus, getEntryImage } = _fieldeditorshared.entityHelpers;
66
- const styles = {
67
- scheduleIcon: (0, _emotion.css)({
68
- marginRight: _f36tokens.default.spacing2Xs
69
- })
70
- };
71
58
  const defaultProps = {
72
59
  isClickable: true,
73
60
  hasCardEditActions: true,
@@ -126,20 +113,18 @@ function WrappedEntryCard(props) {
126
113
  contentType: contentType?.name,
127
114
  size: props.size,
128
115
  isSelected: props.isSelected,
129
- status: status,
116
+ badge: _react.createElement(_components.EntityStatusBadge, {
117
+ status: status,
118
+ entityId: props.entry.sys.id,
119
+ entityType: "Entry",
120
+ getEntityScheduledActions: props.getEntityScheduledActions
121
+ }),
130
122
  icon: props.spaceName ? _react.createElement(_SpaceName.SpaceName, {
131
123
  spaceName: props.spaceName,
132
124
  environmentName: props.entry.sys.environment.sys.id
133
- }) : _react.createElement(_components.ScheduledIconWithTooltip, {
134
- getEntityScheduledActions: props.getEntityScheduledActions,
135
- entityType: "Entry",
136
- entityId: props.entry.sys.id
137
- }, _react.createElement(_f36icons.ClockIcon, {
138
- className: styles.scheduleIcon,
139
- size: "small",
140
- variant: "muted",
141
- testId: "schedule-icon"
142
- })),
125
+ }) : !props.isLocalized && props.useLocalizedEntityStatus ? _react.createElement(_f36components.Badge, {
126
+ variant: "secondary"
127
+ }, "Default") : null,
143
128
  thumbnailElement: file && (0, _fieldeditorshared.isValidImage)(file) ? _react.createElement(_components.AssetThumbnail, {
144
129
  file: file
145
130
  }) : undefined,
@@ -72,7 +72,8 @@ export function FetchingWrappedAssetCard(props) {
72
72
  renderDragHandle: props.renderDragHandle,
73
73
  onEdit,
74
74
  onRemove,
75
- useLocalizedEntityStatus: props.sdk.parameters.instance.useLocalizedEntityStatus
75
+ useLocalizedEntityStatus: props.sdk.parameters.instance.useLocalizedEntityStatus,
76
+ isLocalized: !!('localized' in props.sdk.field && props.sdk.field.localized)
76
77
  };
77
78
  if (props.viewType === 'link') {
78
79
  if (status === 'loading') {
@@ -1,11 +1,8 @@
1
1
  import * as React from 'react';
2
- import { AssetCard } from '@contentful/f36-components';
3
- import { ClockIcon } from '@contentful/f36-icons';
4
- import tokens from '@contentful/f36-tokens';
2
+ import { AssetCard, Badge } from '@contentful/f36-components';
5
3
  import { entityHelpers } from '@contentful/field-editor-shared';
6
4
  import mimetype from '@contentful/mimetype';
7
- import { css } from 'emotion';
8
- import { MissingAssetCard, ScheduledIconWithTooltip } from '../../components';
5
+ import { EntityStatusBadge, MissingAssetCard } from '../../components';
9
6
  import { renderActions, renderAssetInfo } from './AssetCardActions';
10
7
  const groupToIconMap = {
11
8
  image: 'image',
@@ -20,11 +17,6 @@ const groupToIconMap = {
20
17
  code: 'code',
21
18
  markup: 'markup'
22
19
  };
23
- const styles = {
24
- scheduleIcon: css({
25
- marginRight: tokens.spacing2Xs
26
- })
27
- };
28
20
  const defaultProps = {
29
21
  isClickable: true
30
22
  };
@@ -63,17 +55,15 @@ export const WrappedAssetCard = (props)=>{
63
55
  className: className,
64
56
  isSelected: isSelected,
65
57
  href: href,
66
- status: status,
67
- icon: React.createElement(ScheduledIconWithTooltip, {
58
+ badge: React.createElement(EntityStatusBadge, {
68
59
  getEntityScheduledActions: props.getEntityScheduledActions,
69
60
  entityType: "Asset",
70
- entityId: props.asset.sys.id
71
- }, React.createElement(ClockIcon, {
72
- className: styles.scheduleIcon,
73
- size: "small",
74
- variant: "muted",
75
- testId: "schedule-icon"
76
- })),
61
+ entityId: props.asset.sys.id,
62
+ status: status
63
+ }),
64
+ icon: !props.isLocalized && props.useLocalizedEntityStatus ? React.createElement(Badge, {
65
+ variant: "secondary"
66
+ }, "Default") : null,
77
67
  src: entityFile && entityFile.url ? size === 'small' ? `${entityFile.url}?w=150&h=150&fit=thumb` : `${entityFile.url}?h=300` : '',
78
68
  onClick: isClickable ? (e)=>{
79
69
  e.preventDefault();
@@ -1,16 +1,8 @@
1
1
  import * as React from 'react';
2
2
  import { EntryCard } from '@contentful/f36-components';
3
- import { ClockIcon } from '@contentful/f36-icons';
4
- import tokens from '@contentful/f36-tokens';
5
3
  import { entityHelpers, isValidImage } from '@contentful/field-editor-shared';
6
- import { css } from 'emotion';
7
- import { AssetThumbnail, MissingAssetCard, ScheduledIconWithTooltip } from '../../components';
4
+ import { AssetThumbnail, EntityStatusBadge, MissingAssetCard } from '../../components';
8
5
  import { renderActions, renderAssetInfo } from './AssetCardActions';
9
- const styles = {
10
- scheduleIcon: css({
11
- marginRight: tokens.spacing2Xs
12
- })
13
- };
14
6
  export const WrappedAssetLink = (props)=>{
15
7
  const { className, href, onEdit, onRemove, isDisabled } = props;
16
8
  const status = entityHelpers.getEntityStatus(props.asset.sys, props.useLocalizedEntityStatus ? props.localeCode : undefined);
@@ -34,20 +26,15 @@ export const WrappedAssetLink = (props)=>{
34
26
  className: className,
35
27
  href: href,
36
28
  size: "small",
37
- status: status,
29
+ badge: React.createElement(EntityStatusBadge, {
30
+ getEntityScheduledActions: props.getEntityScheduledActions,
31
+ entityType: "Asset",
32
+ entityId: props.asset.sys.id,
33
+ status: status
34
+ }),
38
35
  thumbnailElement: entityFile && isValidImage(entityFile) ? React.createElement(AssetThumbnail, {
39
36
  file: entityFile
40
37
  }) : undefined,
41
- icon: React.createElement(ScheduledIconWithTooltip, {
42
- getEntityScheduledActions: props.getEntityScheduledActions,
43
- entityType: "Asset",
44
- entityId: props.asset.sys.id
45
- }, React.createElement(ClockIcon, {
46
- className: styles.scheduleIcon,
47
- size: "small",
48
- variant: "muted",
49
- testId: "schedule-icon"
50
- })),
51
38
  onClick: (e)=>{
52
39
  e.preventDefault();
53
40
  onEdit();
@@ -0,0 +1,25 @@
1
+ import React from 'react';
2
+ import { EntityStatusBadge as StatusBadge } from '@contentful/f36-components';
3
+ import { useScheduledActions } from '../ScheduledIconWithTooltip/ScheduledIconWithTooltip';
4
+ import { ScheduleTooltip } from '../ScheduledIconWithTooltip/ScheduleTooltip';
5
+ export function EntityStatusBadge({ entityId, entityType, getEntityScheduledActions, status, ...props }) {
6
+ const { isError, isLoading, jobs } = useScheduledActions({
7
+ entityId,
8
+ entityType,
9
+ getEntityScheduledActions
10
+ });
11
+ if (isError || isLoading || jobs.length === 0) {
12
+ return React.createElement(StatusBadge, {
13
+ ...props,
14
+ entityStatus: status
15
+ });
16
+ }
17
+ return React.createElement(ScheduleTooltip, {
18
+ job: jobs[0],
19
+ jobsCount: jobs.length
20
+ }, React.createElement(StatusBadge, {
21
+ ...props,
22
+ entityStatus: status,
23
+ isScheduled: true
24
+ }));
25
+ }
@@ -0,0 +1 @@
1
+ export * from './EntityStatusBadge';
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { ScheduleTooltip } from './ScheduleTooltip';
3
- export const ScheduledIconWithTooltip = ({ entityType, entityId, getEntityScheduledActions, children })=>{
3
+ export function useScheduledActions({ getEntityScheduledActions, entityId, entityType }) {
4
4
  const [status, setStatus] = React.useState({
5
5
  type: 'loading'
6
6
  });
@@ -17,16 +17,40 @@ export const ScheduledIconWithTooltip = ({ entityType, entityId, getEntitySchedu
17
17
  });
18
18
  });
19
19
  }, []);
20
- if (status.type === 'loading' || status.type === 'error') {
21
- return null;
20
+ if (status.type === 'loading') {
21
+ return {
22
+ isLoading: true,
23
+ isError: false,
24
+ jobs: []
25
+ };
26
+ }
27
+ if (status.type === 'error') {
28
+ return {
29
+ isLoading: false,
30
+ isError: true,
31
+ jobs: []
32
+ };
33
+ }
34
+ return {
35
+ isLoading: false,
36
+ isError: false,
37
+ jobs: status.jobs || []
38
+ };
39
+ }
40
+ export const ScheduledIconWithTooltip = ({ entityType, entityId, getEntityScheduledActions, children })=>{
41
+ const { isError, isLoading, jobs } = useScheduledActions({
42
+ entityType,
43
+ entityId,
44
+ getEntityScheduledActions
45
+ });
46
+ if (isLoading || isError) {
47
+ return children;
22
48
  }
23
- const jobs = status.jobs ?? [];
24
49
  if (jobs.length === 0) {
25
50
  return null;
26
51
  }
27
- const mostRelevantJob = jobs[0];
28
52
  return React.createElement(ScheduleTooltip, {
29
- job: mostRelevantJob,
53
+ job: jobs[0],
30
54
  jobsCount: jobs.length
31
55
  }, children);
32
56
  };
@@ -8,3 +8,4 @@ export { ScheduledIconWithTooltip } from './ScheduledIconWithTooltip/ScheduledIc
8
8
  export { getScheduleTooltipContent } from './ScheduledIconWithTooltip/ScheduleTooltip';
9
9
  export { AssetThumbnail } from './AssetThumbnail/AssetThumbnail';
10
10
  export { ResourceEntityErrorCard } from './ResourceEntityErrorCard/ResourceEntityErrorCard';
11
+ export { EntityStatusBadge } from './EntityStatusBadge';
@@ -104,7 +104,8 @@ export function FetchingWrappedEntryCard(props) {
104
104
  onMoveTop: props.onMoveTop,
105
105
  onMoveBottom: props.onMoveBottom,
106
106
  isBeingDragged: props.isBeingDragged,
107
- useLocalizedEntityStatus: props.sdk.parameters.instance.useLocalizedEntityStatus
107
+ useLocalizedEntityStatus: props.sdk.parameters.instance.useLocalizedEntityStatus,
108
+ isLocalized: !!('localized' in props.sdk.field && props.sdk.field.localized)
108
109
  };
109
110
  const { hasCardEditActions, hasCardMoveActions, hasCardRemoveActions } = props;
110
111
  function renderDefaultCard(props) {
@@ -1,17 +1,9 @@
1
1
  import * as React from 'react';
2
- import { EntryCard, MenuItem, MenuDivider } from '@contentful/f36-components';
3
- import { ClockIcon } from '@contentful/f36-icons';
4
- import tokens from '@contentful/f36-tokens';
2
+ import { EntryCard, MenuItem, MenuDivider, Badge } from '@contentful/f36-components';
5
3
  import { entityHelpers, isValidImage } from '@contentful/field-editor-shared';
6
- import { css } from 'emotion';
7
- import { AssetThumbnail, MissingEntityCard, ScheduledIconWithTooltip } from '../../components';
4
+ import { AssetThumbnail, MissingEntityCard, EntityStatusBadge } from '../../components';
8
5
  import { SpaceName } from '../../components/SpaceName/SpaceName';
9
6
  const { getEntryTitle, getEntityDescription, getEntityStatus, getEntryImage } = entityHelpers;
10
- const styles = {
11
- scheduleIcon: css({
12
- marginRight: tokens.spacing2Xs
13
- })
14
- };
15
7
  const defaultProps = {
16
8
  isClickable: true,
17
9
  hasCardEditActions: true,
@@ -70,20 +62,18 @@ export function WrappedEntryCard(props) {
70
62
  contentType: contentType?.name,
71
63
  size: props.size,
72
64
  isSelected: props.isSelected,
73
- status: status,
65
+ badge: React.createElement(EntityStatusBadge, {
66
+ status: status,
67
+ entityId: props.entry.sys.id,
68
+ entityType: "Entry",
69
+ getEntityScheduledActions: props.getEntityScheduledActions
70
+ }),
74
71
  icon: props.spaceName ? React.createElement(SpaceName, {
75
72
  spaceName: props.spaceName,
76
73
  environmentName: props.entry.sys.environment.sys.id
77
- }) : React.createElement(ScheduledIconWithTooltip, {
78
- getEntityScheduledActions: props.getEntityScheduledActions,
79
- entityType: "Entry",
80
- entityId: props.entry.sys.id
81
- }, React.createElement(ClockIcon, {
82
- className: styles.scheduleIcon,
83
- size: "small",
84
- variant: "muted",
85
- testId: "schedule-icon"
86
- })),
74
+ }) : !props.isLocalized && props.useLocalizedEntityStatus ? React.createElement(Badge, {
75
+ variant: "secondary"
76
+ }, "Default") : null,
87
77
  thumbnailElement: file && isValidImage(file) ? React.createElement(AssetThumbnail, {
88
78
  file: file
89
79
  }) : undefined,
@@ -15,7 +15,8 @@ export interface WrappedAssetCardProps {
15
15
  size: 'default' | 'small';
16
16
  renderDragHandle?: RenderDragFn;
17
17
  isClickable: boolean;
18
- useLocalizedEntityStatus: boolean;
18
+ useLocalizedEntityStatus?: boolean;
19
+ isLocalized?: boolean;
19
20
  }
20
21
  export declare const WrappedAssetCard: {
21
22
  (props: WrappedAssetCardProps): JSX.Element;
@@ -26,5 +26,6 @@ export type CustomEntityCardProps = {
26
26
  onMoveTop?: () => void;
27
27
  onMoveBottom?: () => void;
28
28
  isBeingDragged?: boolean;
29
+ isLocalized?: boolean;
29
30
  useLocalizedEntityStatus?: boolean;
30
31
  };
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ import { type EntityStatus } from '@contentful/f36-components';
3
+ import { type UseScheduledActionsProps } from '../ScheduledIconWithTooltip/ScheduledIconWithTooltip';
4
+ type EntityStatusBadgeProps = UseScheduledActionsProps & {
5
+ status: EntityStatus;
6
+ };
7
+ export declare function EntityStatusBadge({ entityId, entityType, getEntityScheduledActions, status, ...props }: EntityStatusBadgeProps): JSX.Element;
8
+ export {};
@@ -0,0 +1 @@
1
+ export * from './EntityStatusBadge';
@@ -1,5 +1,11 @@
1
1
  import * as React from 'react';
2
- import { SpaceAPI } from '@contentful/app-sdk';
2
+ import { ScheduledAction, SpaceAPI } from '@contentful/app-sdk';
3
+ export type UseScheduledActionsProps = Pick<ScheduledIconWithTooltipProps, 'entityId' | 'entityType' | 'getEntityScheduledActions'>;
4
+ export declare function useScheduledActions({ getEntityScheduledActions, entityId, entityType, }: UseScheduledActionsProps): {
5
+ isLoading: boolean;
6
+ isError: boolean;
7
+ jobs: ScheduledAction[];
8
+ };
3
9
  type ScheduledIconWithTooltipProps = {
4
10
  getEntityScheduledActions: SpaceAPI['getEntityScheduledActions'];
5
11
  entityType: 'Entry' | 'Asset';
@@ -9,3 +9,4 @@ export { ScheduledIconWithTooltip } from './ScheduledIconWithTooltip/ScheduledIc
9
9
  export { getScheduleTooltipContent } from './ScheduledIconWithTooltip/ScheduleTooltip';
10
10
  export { AssetThumbnail } from './AssetThumbnail/AssetThumbnail';
11
11
  export { ResourceEntityErrorCard } from './ResourceEntityErrorCard/ResourceEntityErrorCard';
12
+ export { EntityStatusBadge } from './EntityStatusBadge';
@@ -23,6 +23,7 @@ export interface WrappedEntryCardProps {
23
23
  hasCardEditActions: boolean;
24
24
  hasCardMoveActions?: boolean;
25
25
  hasCardRemoveActions?: boolean;
26
+ isLocalized?: boolean;
26
27
  useLocalizedEntityStatus?: boolean;
27
28
  }
28
29
  export declare function WrappedEntryCard(props: WrappedEntryCardProps): JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@contentful/field-editor-reference",
3
- "version": "5.28.3",
3
+ "version": "5.29.1",
4
4
  "main": "dist/cjs/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/types/index.d.ts",
@@ -35,9 +35,9 @@
35
35
  "tsc": "tsc -p ./ --noEmit"
36
36
  },
37
37
  "dependencies": {
38
- "@contentful/f36-components": "^4.60.0",
39
- "@contentful/f36-icons": "^4.27.0",
40
- "@contentful/f36-tokens": "^4.0.4",
38
+ "@contentful/f36-components": "^4.67.0",
39
+ "@contentful/f36-icons": "^4.28.2",
40
+ "@contentful/f36-tokens": "^4.0.5",
41
41
  "@contentful/field-editor-shared": "^1.5.3",
42
42
  "@contentful/mimetype": "^2.2.29",
43
43
  "@dnd-kit/core": "^6.0.8",
@@ -45,7 +45,7 @@
45
45
  "@dnd-kit/sortable": "^7.0.2",
46
46
  "@tanstack/react-query": "^4.3.9",
47
47
  "@types/deep-equal": "^1.0.1",
48
- "constate": "3.2.0",
48
+ "constate": "^3.3.2",
49
49
  "contentful-management": "^10.14.0 || ^11.0.0",
50
50
  "deep-equal": "2.2.2",
51
51
  "emotion": "^10.0.17",
@@ -67,5 +67,5 @@
67
67
  "publishConfig": {
68
68
  "registry": "https://npm.pkg.github.com/"
69
69
  },
70
- "gitHead": "6287e6c00cd65f5f3625526707551c213d58d3e3"
70
+ "gitHead": "ccdc6872e06f777bd7218ae870c44d2e3401e99e"
71
71
  }