@searpent/react-image-annotate 2.1.1 → 2.1.2
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.
- package/Annotator/exampleImages_bugdemo_15_1.js +80 -0
- package/Annotator/examplePhotos_repr.js +7052 -0
- package/Annotator/index.story_bugdemo_15_1.js +882 -0
- package/Annotator/index.story_repr.js +1075 -0
- package/Editor/index.js +3 -7
- package/Editor/index_bugdemo_15_1.js +147 -0
- package/MainLayout/index.js +4 -2
- package/MainLayout/index_bugdemo_15_1.js +588 -0
- package/MetadataEditorSidebarBox/index_14_01_25.js +231 -0
- package/MetadataEditorSidebarBox/index_repr.js +271 -0
- package/package.json +1 -1
|
@@ -0,0 +1,231 @@
|
|
|
1
|
+
import React, { memo } from "react";
|
|
2
|
+
import SidebarBoxContainer from "../SidebarBoxContainer";
|
|
3
|
+
import DescriptionIcon from "@mui/icons-material/Description";
|
|
4
|
+
import { styled } from "@mui/material/styles";
|
|
5
|
+
import { createTheme, ThemeProvider } from "@mui/material/styles";
|
|
6
|
+
import { grey } from "@mui/material/colors";
|
|
7
|
+
var MetadataItemDiv = styled("div")(function (_ref) {
|
|
8
|
+
var theme = _ref.theme;
|
|
9
|
+
return {
|
|
10
|
+
display: "flex",
|
|
11
|
+
flexDirection: "row",
|
|
12
|
+
marginBottom: ".5em",
|
|
13
|
+
"& > label": {
|
|
14
|
+
fontSize: "1rem",
|
|
15
|
+
marginBottom: ".5em",
|
|
16
|
+
textTransform: "capitalize",
|
|
17
|
+
wordWrap: "break-word"
|
|
18
|
+
},
|
|
19
|
+
label: {
|
|
20
|
+
width: "50%"
|
|
21
|
+
},
|
|
22
|
+
select: {
|
|
23
|
+
width: "100%"
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
var MetadataItem = function MetadataItem(_ref2) {
|
|
29
|
+
var _metadataConfig$optio, _metadataConfig$optio2;
|
|
30
|
+
|
|
31
|
+
var name = _ref2.name,
|
|
32
|
+
value = _ref2.value,
|
|
33
|
+
metadataId = _ref2.metadataId,
|
|
34
|
+
imageIndex = _ref2.imageIndex,
|
|
35
|
+
groupId = _ref2.groupId,
|
|
36
|
+
onChange = _ref2.onChange,
|
|
37
|
+
_ref2$metadataConfig = _ref2.metadataConfig,
|
|
38
|
+
metadataConfig = _ref2$metadataConfig === void 0 ? {} : _ref2$metadataConfig;
|
|
39
|
+
|
|
40
|
+
var handleChange = function handleChange(e) {
|
|
41
|
+
e.preventDefault();
|
|
42
|
+
var _e$target = e.target,
|
|
43
|
+
name = _e$target.name,
|
|
44
|
+
value = _e$target.value;
|
|
45
|
+
onChange({
|
|
46
|
+
name: name,
|
|
47
|
+
value: value,
|
|
48
|
+
imageIndex: imageIndex,
|
|
49
|
+
groupId: groupId,
|
|
50
|
+
metadataId: metadataId
|
|
51
|
+
});
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
return /*#__PURE__*/React.createElement(MetadataItemDiv, null, /*#__PURE__*/React.createElement("label", {
|
|
55
|
+
for: name
|
|
56
|
+
}, name), /*#__PURE__*/React.createElement("div", {
|
|
57
|
+
style: {
|
|
58
|
+
width: "50%"
|
|
59
|
+
}
|
|
60
|
+
}, (metadataConfig === null || metadataConfig === void 0 ? void 0 : metadataConfig.selectable) !== true && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
|
|
61
|
+
type: "text",
|
|
62
|
+
value: value,
|
|
63
|
+
name: name,
|
|
64
|
+
onChange: handleChange,
|
|
65
|
+
id: name,
|
|
66
|
+
list: "".concat(name, "-list"),
|
|
67
|
+
style: {
|
|
68
|
+
width: "100%"
|
|
69
|
+
}
|
|
70
|
+
}), /*#__PURE__*/React.createElement("datalist", {
|
|
71
|
+
id: "".concat(name, "-list")
|
|
72
|
+
}, metadataConfig === null || metadataConfig === void 0 ? void 0 : (_metadataConfig$optio = metadataConfig.options) === null || _metadataConfig$optio === void 0 ? void 0 : _metadataConfig$optio.map(function (opt) {
|
|
73
|
+
if (opt.value && opt.label) {
|
|
74
|
+
return /*#__PURE__*/React.createElement("option", {
|
|
75
|
+
key: opt.value,
|
|
76
|
+
value: opt.value
|
|
77
|
+
}, opt.label);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
return /*#__PURE__*/React.createElement("option", {
|
|
81
|
+
key: opt,
|
|
82
|
+
value: opt
|
|
83
|
+
});
|
|
84
|
+
}))), (metadataConfig === null || metadataConfig === void 0 ? void 0 : metadataConfig.selectable) === true && /*#__PURE__*/React.createElement("select", {
|
|
85
|
+
name: name,
|
|
86
|
+
id: name,
|
|
87
|
+
value: value || '',
|
|
88
|
+
onChange: handleChange,
|
|
89
|
+
style: {
|
|
90
|
+
width: '100%'
|
|
91
|
+
}
|
|
92
|
+
}, metadataConfig === null || metadataConfig === void 0 ? void 0 : (_metadataConfig$optio2 = metadataConfig.options) === null || _metadataConfig$optio2 === void 0 ? void 0 : _metadataConfig$optio2.map(function (opt) {
|
|
93
|
+
if (opt.value && opt.label) {
|
|
94
|
+
return /*#__PURE__*/React.createElement("option", {
|
|
95
|
+
key: opt.value,
|
|
96
|
+
value: opt.value
|
|
97
|
+
}, opt.label);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
return /*#__PURE__*/React.createElement("option", {
|
|
101
|
+
key: opt,
|
|
102
|
+
value: opt
|
|
103
|
+
});
|
|
104
|
+
}))));
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
var MetadataList = function MetadataList(_ref3) {
|
|
108
|
+
var title = _ref3.title,
|
|
109
|
+
metadata = _ref3.metadata,
|
|
110
|
+
imageIndex = _ref3.imageIndex,
|
|
111
|
+
onMetadataChange = _ref3.onMetadataChange,
|
|
112
|
+
_ref3$metadataConfigs = _ref3.metadataConfigs,
|
|
113
|
+
metadataConfigs = _ref3$metadataConfigs === void 0 ? [] : _ref3$metadataConfigs,
|
|
114
|
+
groupId = _ref3.groupId;
|
|
115
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h2", null, title), metadata && metadata.map(function (_ref4) {
|
|
116
|
+
var key = _ref4.key,
|
|
117
|
+
value = _ref4.value,
|
|
118
|
+
metadataId = _ref4.metadataId;
|
|
119
|
+
return /*#__PURE__*/React.createElement(MetadataItem, {
|
|
120
|
+
name: key,
|
|
121
|
+
value: value,
|
|
122
|
+
imageIndex: imageIndex,
|
|
123
|
+
metadataId: metadataId,
|
|
124
|
+
groupId: groupId,
|
|
125
|
+
onChange: onMetadataChange,
|
|
126
|
+
metadataConfig: metadataConfigs.find(function (i) {
|
|
127
|
+
return i.key === key;
|
|
128
|
+
})
|
|
129
|
+
});
|
|
130
|
+
}));
|
|
131
|
+
};
|
|
132
|
+
|
|
133
|
+
var theme = createTheme();
|
|
134
|
+
var DivContainer = styled("div")(function (_ref5) {
|
|
135
|
+
var theme = _ref5.theme;
|
|
136
|
+
return {
|
|
137
|
+
paddingLeft: 16,
|
|
138
|
+
paddingRight: 16,
|
|
139
|
+
fontSize: 12,
|
|
140
|
+
"& h1": {
|
|
141
|
+
fontSize: 18
|
|
142
|
+
},
|
|
143
|
+
"& h2": {
|
|
144
|
+
fontSize: 14
|
|
145
|
+
},
|
|
146
|
+
"& h3": {
|
|
147
|
+
fontSize: 12
|
|
148
|
+
},
|
|
149
|
+
"& h4": {
|
|
150
|
+
fontSize: 12
|
|
151
|
+
},
|
|
152
|
+
"& h5": {
|
|
153
|
+
fontSize: 12
|
|
154
|
+
},
|
|
155
|
+
"& h6": {
|
|
156
|
+
fontSize: 12
|
|
157
|
+
},
|
|
158
|
+
"& p": {
|
|
159
|
+
fontSize: 12
|
|
160
|
+
},
|
|
161
|
+
"& a": {},
|
|
162
|
+
"& img": {
|
|
163
|
+
width: "100%"
|
|
164
|
+
}
|
|
165
|
+
};
|
|
166
|
+
});
|
|
167
|
+
export var MetadataEditorSidebarBox = function MetadataEditorSidebarBox(_ref6) {
|
|
168
|
+
var _state$images$state$s, _state$images$state$s2, _state$images$state$s3, _state$images$state$s4;
|
|
169
|
+
|
|
170
|
+
var state = _ref6.state,
|
|
171
|
+
onMetadataChange = _ref6.onMetadataChange;
|
|
172
|
+
var metadataConfigs = state.metadataConfigs || [];
|
|
173
|
+
var selectedPhotoMetadata = state === null || state === void 0 ? void 0 : (_state$images$state$s = state.images[state.selectedImage]) === null || _state$images$state$s === void 0 ? void 0 : _state$images$state$s.metadata;
|
|
174
|
+
var selectedGroupId = state === null || state === void 0 ? void 0 : (_state$images$state$s2 = state.images[state.selectedImage]) === null || _state$images$state$s2 === void 0 ? void 0 : (_state$images$state$s3 = _state$images$state$s2.regions) === null || _state$images$state$s3 === void 0 ? void 0 : (_state$images$state$s4 = _state$images$state$s3.find(function (r) {
|
|
175
|
+
return r.highlighted === true;
|
|
176
|
+
})) === null || _state$images$state$s4 === void 0 ? void 0 : _state$images$state$s4.groupId;
|
|
177
|
+
var articleMetadata = []; // example: [{key: "previousArticleId", value "123-123-123-123-123"}]
|
|
178
|
+
|
|
179
|
+
if (selectedGroupId !== undefined) {
|
|
180
|
+
var articleMetadataRegion = state === null || state === void 0 ? void 0 : state.images[state.selectedImage].regions.find(function (r) {
|
|
181
|
+
return r.cls === 'metadata' && "".concat(r.groupId) === selectedGroupId;
|
|
182
|
+
});
|
|
183
|
+
|
|
184
|
+
if (articleMetadataRegion) {
|
|
185
|
+
var metadata = JSON.parse(articleMetadataRegion.text);
|
|
186
|
+
articleMetadata = metadata;
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
191
|
+
theme: theme
|
|
192
|
+
}, /*#__PURE__*/React.createElement(SidebarBoxContainer, {
|
|
193
|
+
title: "Metadata",
|
|
194
|
+
icon: /*#__PURE__*/React.createElement(DescriptionIcon, {
|
|
195
|
+
style: {
|
|
196
|
+
color: grey[700]
|
|
197
|
+
}
|
|
198
|
+
}),
|
|
199
|
+
expandedByDefault: true
|
|
200
|
+
}, /*#__PURE__*/React.createElement(DivContainer, {
|
|
201
|
+
style: {
|
|
202
|
+
height: "600px"
|
|
203
|
+
}
|
|
204
|
+
}, articleMetadata.length > 0 && /*#__PURE__*/React.createElement(MetadataList, {
|
|
205
|
+
title: "Article",
|
|
206
|
+
metadata: articleMetadata,
|
|
207
|
+
imageIndex: state.selectedImage,
|
|
208
|
+
groupId: selectedGroupId,
|
|
209
|
+
onMetadataChange: onMetadataChange,
|
|
210
|
+
metadataConfigs: metadataConfigs.filter(function (mfc) {
|
|
211
|
+
return mfc.level === 'photo_metadata-engine';
|
|
212
|
+
})
|
|
213
|
+
}), selectedPhotoMetadata && /*#__PURE__*/React.createElement(MetadataList, {
|
|
214
|
+
title: "Page",
|
|
215
|
+
metadata: selectedPhotoMetadata,
|
|
216
|
+
imageIndex: state.selectedImage,
|
|
217
|
+
onMetadataChange: onMetadataChange,
|
|
218
|
+
metadataConfigs: metadataConfigs.filter(function (mfc) {
|
|
219
|
+
return mfc.level === 'photo';
|
|
220
|
+
})
|
|
221
|
+
}), /*#__PURE__*/React.createElement(MetadataList, {
|
|
222
|
+
title: "Issue",
|
|
223
|
+
metadata: state.albumMetadata,
|
|
224
|
+
onMetadataChange: onMetadataChange,
|
|
225
|
+
id: "metadata-album",
|
|
226
|
+
metadataConfigs: metadataConfigs.filter(function (mfc) {
|
|
227
|
+
return mfc.level === 'album';
|
|
228
|
+
})
|
|
229
|
+
}))));
|
|
230
|
+
};
|
|
231
|
+
export default memo(MetadataEditorSidebarBox);
|
|
@@ -0,0 +1,271 @@
|
|
|
1
|
+
import React, { memo } from "react";
|
|
2
|
+
import SidebarBoxContainer from "../SidebarBoxContainer";
|
|
3
|
+
import DescriptionIcon from "@mui/icons-material/Description";
|
|
4
|
+
import { styled } from "@mui/material/styles";
|
|
5
|
+
import { createTheme, ThemeProvider } from "@mui/material/styles";
|
|
6
|
+
import { grey } from "@mui/material/colors";
|
|
7
|
+
|
|
8
|
+
var isStorybookHangReproModeEnabled = function isStorybookHangReproModeEnabled() {
|
|
9
|
+
return typeof window !== "undefined" && window.__RIA_ALLOW_UNCONTROLLED_METADATA_INPUTS__ === true;
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
var MetadataItemDiv = styled("div")(function (_ref) {
|
|
13
|
+
var theme = _ref.theme;
|
|
14
|
+
return {
|
|
15
|
+
display: "flex",
|
|
16
|
+
flexDirection: "row",
|
|
17
|
+
marginBottom: ".5em",
|
|
18
|
+
"& > label": {
|
|
19
|
+
fontSize: "1rem",
|
|
20
|
+
marginBottom: ".5em",
|
|
21
|
+
textTransform: "capitalize",
|
|
22
|
+
wordWrap: "break-word"
|
|
23
|
+
},
|
|
24
|
+
label: {
|
|
25
|
+
width: "50%"
|
|
26
|
+
},
|
|
27
|
+
select: {
|
|
28
|
+
width: "100%"
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
var MetadataItem = function MetadataItem(_ref2) {
|
|
34
|
+
var _metadataConfig$optio, _metadataConfig$optio2;
|
|
35
|
+
|
|
36
|
+
var name = _ref2.name,
|
|
37
|
+
value = _ref2.value,
|
|
38
|
+
metadataId = _ref2.metadataId,
|
|
39
|
+
imageIndex = _ref2.imageIndex,
|
|
40
|
+
groupId = _ref2.groupId,
|
|
41
|
+
onChange = _ref2.onChange,
|
|
42
|
+
_ref2$metadataConfig = _ref2.metadataConfig,
|
|
43
|
+
metadataConfig = _ref2$metadataConfig === void 0 ? {} : _ref2$metadataConfig;
|
|
44
|
+
// For Storybook reproduction of "hanging" values:
|
|
45
|
+
// If the next article's metadata provides `value` as `undefined` (missing field),
|
|
46
|
+
// and the input is effectively uncontrolled, the browser DOM may keep the previous value.
|
|
47
|
+
//
|
|
48
|
+
// We keep the default behavior safe/controlled (coalesce to ""), but allow Storybook
|
|
49
|
+
// to opt into the buggy behavior via a global flag.
|
|
50
|
+
var allowUncontrolledForDebug = isStorybookHangReproModeEnabled();
|
|
51
|
+
|
|
52
|
+
var handleChange = function handleChange(e) {
|
|
53
|
+
e.preventDefault();
|
|
54
|
+
var _e$target = e.target,
|
|
55
|
+
name = _e$target.name,
|
|
56
|
+
value = _e$target.value;
|
|
57
|
+
onChange({
|
|
58
|
+
name: name,
|
|
59
|
+
value: value,
|
|
60
|
+
imageIndex: imageIndex,
|
|
61
|
+
groupId: groupId,
|
|
62
|
+
metadataId: metadataId
|
|
63
|
+
});
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
return /*#__PURE__*/React.createElement(MetadataItemDiv, null, /*#__PURE__*/React.createElement("label", {
|
|
67
|
+
for: name
|
|
68
|
+
}, name), /*#__PURE__*/React.createElement("div", {
|
|
69
|
+
style: {
|
|
70
|
+
width: "50%"
|
|
71
|
+
}
|
|
72
|
+
}, (metadataConfig === null || metadataConfig === void 0 ? void 0 : metadataConfig.selectable) !== true && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
|
|
73
|
+
type: "text",
|
|
74
|
+
value: allowUncontrolledForDebug ? value : value ?? "",
|
|
75
|
+
name: name,
|
|
76
|
+
onChange: handleChange,
|
|
77
|
+
id: name,
|
|
78
|
+
list: "".concat(name, "-list"),
|
|
79
|
+
style: {
|
|
80
|
+
width: "100%"
|
|
81
|
+
}
|
|
82
|
+
}), /*#__PURE__*/React.createElement("datalist", {
|
|
83
|
+
id: "".concat(name, "-list")
|
|
84
|
+
}, metadataConfig === null || metadataConfig === void 0 ? void 0 : (_metadataConfig$optio = metadataConfig.options) === null || _metadataConfig$optio === void 0 ? void 0 : _metadataConfig$optio.map(function (opt) {
|
|
85
|
+
if (opt.value && opt.label) {
|
|
86
|
+
return /*#__PURE__*/React.createElement("option", {
|
|
87
|
+
key: opt.value,
|
|
88
|
+
value: opt.value
|
|
89
|
+
}, opt.label);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
return /*#__PURE__*/React.createElement("option", {
|
|
93
|
+
key: opt,
|
|
94
|
+
value: opt
|
|
95
|
+
});
|
|
96
|
+
}))), (metadataConfig === null || metadataConfig === void 0 ? void 0 : metadataConfig.selectable) === true && /*#__PURE__*/React.createElement("select", {
|
|
97
|
+
name: name,
|
|
98
|
+
id: name,
|
|
99
|
+
value: value || '',
|
|
100
|
+
onChange: handleChange,
|
|
101
|
+
style: {
|
|
102
|
+
width: '100%'
|
|
103
|
+
}
|
|
104
|
+
}, metadataConfig === null || metadataConfig === void 0 ? void 0 : (_metadataConfig$optio2 = metadataConfig.options) === null || _metadataConfig$optio2 === void 0 ? void 0 : _metadataConfig$optio2.map(function (opt) {
|
|
105
|
+
if (opt.value && opt.label) {
|
|
106
|
+
return /*#__PURE__*/React.createElement("option", {
|
|
107
|
+
key: opt.value,
|
|
108
|
+
value: opt.value
|
|
109
|
+
}, opt.label);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
return /*#__PURE__*/React.createElement("option", {
|
|
113
|
+
key: opt,
|
|
114
|
+
value: opt
|
|
115
|
+
});
|
|
116
|
+
}))));
|
|
117
|
+
};
|
|
118
|
+
|
|
119
|
+
var MetadataList = function MetadataList(_ref3) {
|
|
120
|
+
var title = _ref3.title,
|
|
121
|
+
metadata = _ref3.metadata,
|
|
122
|
+
imageIndex = _ref3.imageIndex,
|
|
123
|
+
onMetadataChange = _ref3.onMetadataChange,
|
|
124
|
+
_ref3$metadataConfigs = _ref3.metadataConfigs,
|
|
125
|
+
metadataConfigs = _ref3$metadataConfigs === void 0 ? [] : _ref3$metadataConfigs,
|
|
126
|
+
groupId = _ref3.groupId;
|
|
127
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h2", null, title), metadata && metadata.map(function (_ref4) {
|
|
128
|
+
var key = _ref4.key,
|
|
129
|
+
value = _ref4.value,
|
|
130
|
+
metadataId = _ref4.metadataId;
|
|
131
|
+
|
|
132
|
+
// In Storybook hang repro mode, deliberately remove React keys so React is
|
|
133
|
+
// more likely to reuse the same DOM <input> across article switches.
|
|
134
|
+
if (isStorybookHangReproModeEnabled()) {
|
|
135
|
+
return /*#__PURE__*/React.createElement(MetadataItem, {
|
|
136
|
+
name: key,
|
|
137
|
+
value: value,
|
|
138
|
+
imageIndex: imageIndex,
|
|
139
|
+
metadataId: metadataId,
|
|
140
|
+
groupId: groupId,
|
|
141
|
+
onChange: onMetadataChange,
|
|
142
|
+
metadataConfig: metadataConfigs.find(function (i) {
|
|
143
|
+
return i.key === key;
|
|
144
|
+
})
|
|
145
|
+
});
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
return /*#__PURE__*/React.createElement(MetadataItem, {
|
|
149
|
+
key: "".concat(groupId, "-").concat(key),
|
|
150
|
+
name: key,
|
|
151
|
+
value: value,
|
|
152
|
+
imageIndex: imageIndex,
|
|
153
|
+
metadataId: metadataId,
|
|
154
|
+
groupId: groupId,
|
|
155
|
+
onChange: onMetadataChange,
|
|
156
|
+
metadataConfig: metadataConfigs.find(function (i) {
|
|
157
|
+
return i.key === key;
|
|
158
|
+
})
|
|
159
|
+
});
|
|
160
|
+
}));
|
|
161
|
+
};
|
|
162
|
+
|
|
163
|
+
var theme = createTheme();
|
|
164
|
+
var DivContainer = styled("div")(function (_ref5) {
|
|
165
|
+
var theme = _ref5.theme;
|
|
166
|
+
return {
|
|
167
|
+
paddingLeft: 16,
|
|
168
|
+
paddingRight: 16,
|
|
169
|
+
fontSize: 12,
|
|
170
|
+
"& h1": {
|
|
171
|
+
fontSize: 18
|
|
172
|
+
},
|
|
173
|
+
"& h2": {
|
|
174
|
+
fontSize: 14
|
|
175
|
+
},
|
|
176
|
+
"& h3": {
|
|
177
|
+
fontSize: 12
|
|
178
|
+
},
|
|
179
|
+
"& h4": {
|
|
180
|
+
fontSize: 12
|
|
181
|
+
},
|
|
182
|
+
"& h5": {
|
|
183
|
+
fontSize: 12
|
|
184
|
+
},
|
|
185
|
+
"& h6": {
|
|
186
|
+
fontSize: 12
|
|
187
|
+
},
|
|
188
|
+
"& p": {
|
|
189
|
+
fontSize: 12
|
|
190
|
+
},
|
|
191
|
+
"& a": {},
|
|
192
|
+
"& img": {
|
|
193
|
+
width: "100%"
|
|
194
|
+
}
|
|
195
|
+
};
|
|
196
|
+
});
|
|
197
|
+
export var MetadataEditorSidebarBox = function MetadataEditorSidebarBox(_ref6) {
|
|
198
|
+
var _state$images$state$s, _state$images$state$s2, _state$images$state$s3, _state$images$state$s4;
|
|
199
|
+
|
|
200
|
+
var state = _ref6.state,
|
|
201
|
+
onMetadataChange = _ref6.onMetadataChange;
|
|
202
|
+
var metadataConfigs = state.metadataConfigs || [];
|
|
203
|
+
var selectedPhotoMetadata = state === null || state === void 0 ? void 0 : (_state$images$state$s = state.images[state.selectedImage]) === null || _state$images$state$s === void 0 ? void 0 : _state$images$state$s.metadata;
|
|
204
|
+
var selectedGroupId = state === null || state === void 0 ? void 0 : (_state$images$state$s2 = state.images[state.selectedImage]) === null || _state$images$state$s2 === void 0 ? void 0 : (_state$images$state$s3 = _state$images$state$s2.regions) === null || _state$images$state$s3 === void 0 ? void 0 : (_state$images$state$s4 = _state$images$state$s3.find(function (r) {
|
|
205
|
+
return r.highlighted === true;
|
|
206
|
+
})) === null || _state$images$state$s4 === void 0 ? void 0 : _state$images$state$s4.groupId;
|
|
207
|
+
var articleMetadata = []; // example: [{key: "previousArticleId", value "123-123-123-123-123"}]
|
|
208
|
+
|
|
209
|
+
if (selectedGroupId !== undefined) {
|
|
210
|
+
var articleMetadataRegion = state === null || state === void 0 ? void 0 : state.images[state.selectedImage].regions.find(function (r) {
|
|
211
|
+
return r.cls === 'metadata' && "".concat(r.groupId) === selectedGroupId;
|
|
212
|
+
});
|
|
213
|
+
|
|
214
|
+
if (articleMetadataRegion) {
|
|
215
|
+
var metadata = JSON.parse(articleMetadataRegion.text);
|
|
216
|
+
articleMetadata = metadata;
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
221
|
+
theme: theme
|
|
222
|
+
}, /*#__PURE__*/React.createElement(SidebarBoxContainer, {
|
|
223
|
+
title: "Metadata",
|
|
224
|
+
icon: /*#__PURE__*/React.createElement(DescriptionIcon, {
|
|
225
|
+
style: {
|
|
226
|
+
color: grey[700]
|
|
227
|
+
}
|
|
228
|
+
}),
|
|
229
|
+
expandedByDefault: true
|
|
230
|
+
}, /*#__PURE__*/React.createElement(DivContainer, {
|
|
231
|
+
style: {
|
|
232
|
+
height: "600px"
|
|
233
|
+
}
|
|
234
|
+
}, articleMetadata.length > 0 && (isStorybookHangReproModeEnabled() ? /*#__PURE__*/React.createElement(MetadataList, {
|
|
235
|
+
title: "Article",
|
|
236
|
+
metadata: articleMetadata,
|
|
237
|
+
imageIndex: state.selectedImage,
|
|
238
|
+
groupId: selectedGroupId,
|
|
239
|
+
onMetadataChange: onMetadataChange,
|
|
240
|
+
metadataConfigs: metadataConfigs.filter(function (mfc) {
|
|
241
|
+
return mfc.level === 'photo_metadata-engine';
|
|
242
|
+
})
|
|
243
|
+
}) : /*#__PURE__*/React.createElement(MetadataList, {
|
|
244
|
+
key: "article-".concat(selectedGroupId),
|
|
245
|
+
title: "Article",
|
|
246
|
+
metadata: articleMetadata,
|
|
247
|
+
imageIndex: state.selectedImage,
|
|
248
|
+
groupId: selectedGroupId,
|
|
249
|
+
onMetadataChange: onMetadataChange,
|
|
250
|
+
metadataConfigs: metadataConfigs.filter(function (mfc) {
|
|
251
|
+
return mfc.level === 'photo_metadata-engine';
|
|
252
|
+
})
|
|
253
|
+
})), selectedPhotoMetadata && /*#__PURE__*/React.createElement(MetadataList, {
|
|
254
|
+
title: "Page",
|
|
255
|
+
metadata: selectedPhotoMetadata,
|
|
256
|
+
imageIndex: state.selectedImage,
|
|
257
|
+
onMetadataChange: onMetadataChange,
|
|
258
|
+
metadataConfigs: metadataConfigs.filter(function (mfc) {
|
|
259
|
+
return mfc.level === 'photo';
|
|
260
|
+
})
|
|
261
|
+
}), /*#__PURE__*/React.createElement(MetadataList, {
|
|
262
|
+
title: "Issue",
|
|
263
|
+
metadata: state.albumMetadata,
|
|
264
|
+
onMetadataChange: onMetadataChange,
|
|
265
|
+
id: "metadata-album",
|
|
266
|
+
metadataConfigs: metadataConfigs.filter(function (mfc) {
|
|
267
|
+
return mfc.level === 'album';
|
|
268
|
+
})
|
|
269
|
+
}))));
|
|
270
|
+
};
|
|
271
|
+
export default memo(MetadataEditorSidebarBox);
|