@blaze-cms/plugin-media-ui 0.146.0-node18-core-styles-tooltips.45 → 0.146.0-node18-core-styles-tooltips.46
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/CHANGELOG.md +8 -0
- package/lib-es/components/CardMedia/CardMedia.js +233 -0
- package/lib-es/components/CardMedia/CardMedia.js.map +1 -0
- package/lib-es/components/CardMedia/index.js +3 -0
- package/lib-es/components/CardMedia/index.js.map +1 -0
- package/lib-es/components/EditMediaFile/EditMediaFile.js +187 -0
- package/lib-es/components/EditMediaFile/EditMediaFile.js.map +1 -0
- package/lib-es/components/EditMediaFile/EditMediaFilePage.js +109 -0
- package/lib-es/components/EditMediaFile/EditMediaFilePage.js.map +1 -0
- package/lib-es/components/EditMediaFile/index.js +3 -0
- package/lib-es/components/EditMediaFile/index.js.map +1 -0
- package/lib-es/components/EditorAdapter/EditorAdapter.js +48 -0
- package/lib-es/components/EditorAdapter/EditorAdapter.js.map +1 -0
- package/lib-es/components/EditorAdapter/index.js +3 -0
- package/lib-es/components/EditorAdapter/index.js.map +1 -0
- package/lib-es/components/FileList/FilesListContext/index.js +4 -0
- package/lib-es/components/FileList/FilesListContext/index.js.map +1 -0
- package/lib-es/components/FileList/FilesListProvider/index.js +36 -0
- package/lib-es/components/FileList/FilesListProvider/index.js.map +1 -0
- package/lib-es/components/FileList/useFileList/index.js +5 -0
- package/lib-es/components/FileList/useFileList/index.js.map +1 -0
- package/lib-es/components/FileList/useGetFiles/getFiles.js +179 -0
- package/lib-es/components/FileList/useGetFiles/getFiles.js.map +1 -0
- package/lib-es/components/FileList/useGetFiles/index.js +3 -0
- package/lib-es/components/FileList/useGetFiles/index.js.map +1 -0
- package/lib-es/components/FileList/useGetFiles/useGetFiles.js +114 -0
- package/lib-es/components/FileList/useGetFiles/useGetFiles.js.map +1 -0
- package/lib-es/components/FileList/useGetFilesList/getCounters.js +11 -0
- package/lib-es/components/FileList/useGetFilesList/getCounters.js.map +1 -0
- package/lib-es/components/FileList/useGetFilesList/index.js +3 -0
- package/lib-es/components/FileList/useGetFilesList/index.js.map +1 -0
- package/lib-es/components/FileList/useGetFilesList/useGetFilesList.js +172 -0
- package/lib-es/components/FileList/useGetFilesList/useGetFilesList.js.map +1 -0
- package/lib-es/components/FilePreview/Actions/index.js +38 -0
- package/lib-es/components/FilePreview/Actions/index.js.map +1 -0
- package/lib-es/components/FilePreview/Image/Image.js +40 -0
- package/lib-es/components/FilePreview/Image/Image.js.map +1 -0
- package/lib-es/components/FilePreview/Image/RawImage.js +31 -0
- package/lib-es/components/FilePreview/Image/RawImage.js.map +1 -0
- package/lib-es/components/FilePreview/Image/imageSchema.js +53 -0
- package/lib-es/components/FilePreview/Image/imageSchema.js.map +1 -0
- package/lib-es/components/FilePreview/Image/index.js +12 -0
- package/lib-es/components/FilePreview/Image/index.js.map +1 -0
- package/lib-es/components/FilePreview/ModalContext.js +3 -0
- package/lib-es/components/FilePreview/ModalContext.js.map +1 -0
- package/lib-es/components/FilePreview/PDF/PDF.js +49 -0
- package/lib-es/components/FilePreview/PDF/PDF.js.map +1 -0
- package/lib-es/components/FilePreview/PDF/RawPDF.js +33 -0
- package/lib-es/components/FilePreview/PDF/RawPDF.js.map +1 -0
- package/lib-es/components/FilePreview/PDF/index.js +12 -0
- package/lib-es/components/FilePreview/PDF/index.js.map +1 -0
- package/lib-es/components/FilePreview/PDF/schema.js +21 -0
- package/lib-es/components/FilePreview/PDF/schema.js.map +1 -0
- package/lib-es/components/FilePreview/get-preview.js +28 -0
- package/lib-es/components/FilePreview/get-preview.js.map +1 -0
- package/lib-es/components/FilePreview/index.js +104 -0
- package/lib-es/components/FilePreview/index.js.map +1 -0
- package/lib-es/components/FilePreview/previewDefault/PreviewDefault.js +41 -0
- package/lib-es/components/FilePreview/previewDefault/PreviewDefault.js.map +1 -0
- package/lib-es/components/FilePreview/previewDefault/RawPreviewDefault.js +39 -0
- package/lib-es/components/FilePreview/previewDefault/RawPreviewDefault.js.map +1 -0
- package/lib-es/components/FilePreview/previewDefault/icons/DefaultIcon.js +121 -0
- package/lib-es/components/FilePreview/previewDefault/icons/DefaultIcon.js.map +1 -0
- package/lib-es/components/FilePreview/previewDefault/icons/index.js +3 -0
- package/lib-es/components/FilePreview/previewDefault/icons/index.js.map +1 -0
- package/lib-es/components/FilePreview/previewDefault/index.js +12 -0
- package/lib-es/components/FilePreview/previewDefault/index.js.map +1 -0
- package/lib-es/components/FilePreview/previewDefault/previewDefaultSchema.js +25 -0
- package/lib-es/components/FilePreview/previewDefault/previewDefaultSchema.js.map +1 -0
- package/lib-es/components/FilePreviewReadOnly/FileList.js +18 -0
- package/lib-es/components/FilePreviewReadOnly/FileList.js.map +1 -0
- package/lib-es/components/FilePreviewReadOnly/FilePreviewList.js +22 -0
- package/lib-es/components/FilePreviewReadOnly/FilePreviewList.js.map +1 -0
- package/lib-es/components/FilePreviewReadOnly/FilePreviewReadOnly.js +68 -0
- package/lib-es/components/FilePreviewReadOnly/FilePreviewReadOnly.js.map +1 -0
- package/lib-es/components/FilePreviewReadOnly/index.js +3 -0
- package/lib-es/components/FilePreviewReadOnly/index.js.map +1 -0
- package/lib-es/components/FilePreviewReadOnly/mappers/format-initial-value.js +11 -0
- package/lib-es/components/FilePreviewReadOnly/mappers/format-initial-value.js.map +1 -0
- package/lib-es/components/FilePreviewReadOnly/mappers/index.js +3 -0
- package/lib-es/components/FilePreviewReadOnly/mappers/index.js.map +1 -0
- package/lib-es/components/FileUploadAdapter/FileList.js +52 -0
- package/lib-es/components/FileUploadAdapter/FileList.js.map +1 -0
- package/lib-es/components/FileUploadAdapter/FilePreviewList.js +22 -0
- package/lib-es/components/FileUploadAdapter/FilePreviewList.js.map +1 -0
- package/lib-es/components/FileUploadAdapter/FileReorderList.js +32 -0
- package/lib-es/components/FileUploadAdapter/FileReorderList.js.map +1 -0
- package/lib-es/components/FileUploadAdapter/FileReorderListItem.js +24 -0
- package/lib-es/components/FileUploadAdapter/FileReorderListItem.js.map +1 -0
- package/lib-es/components/FileUploadAdapter/FileUploadAdapter.js +391 -0
- package/lib-es/components/FileUploadAdapter/FileUploadAdapter.js.map +1 -0
- package/lib-es/components/FileUploadAdapter/index.js +3 -0
- package/lib-es/components/FileUploadAdapter/index.js.map +1 -0
- package/lib-es/components/FileUploadAdapter/mappers/format-initial-value.js +11 -0
- package/lib-es/components/FileUploadAdapter/mappers/format-initial-value.js.map +1 -0
- package/lib-es/components/FileUploadAdapter/mappers/get-button-text.js +11 -0
- package/lib-es/components/FileUploadAdapter/mappers/get-button-text.js.map +1 -0
- package/lib-es/components/FileUploadAdapter/mappers/get-format.js +12 -0
- package/lib-es/components/FileUploadAdapter/mappers/get-format.js.map +1 -0
- package/lib-es/components/FileUploadAdapter/mappers/get-number-files-pending-to-fetch.js +7 -0
- package/lib-es/components/FileUploadAdapter/mappers/get-number-files-pending-to-fetch.js.map +1 -0
- package/lib-es/components/FileUploadAdapter/mappers/index.js +8 -0
- package/lib-es/components/FileUploadAdapter/mappers/index.js.map +1 -0
- package/lib-es/components/FileUploadAdapter/mappers/is-unselecting.js +2 -0
- package/lib-es/components/FileUploadAdapter/mappers/is-unselecting.js.map +1 -0
- package/lib-es/components/FileUploadAdapter/mappers/transform-to-array.js +2 -0
- package/lib-es/components/FileUploadAdapter/mappers/transform-to-array.js.map +1 -0
- package/lib-es/components/FileUploadAdapter/useLimit.js +13 -0
- package/lib-es/components/FileUploadAdapter/useLimit.js.map +1 -0
- package/lib-es/components/FileUploadModal/FileUploadModal.js +178 -0
- package/lib-es/components/FileUploadModal/FileUploadModal.js.map +1 -0
- package/lib-es/components/FileUploadModal/index.js +3 -0
- package/lib-es/components/FileUploadModal/index.js.map +1 -0
- package/lib-es/components/FilterPanel/FilterPanel.js +135 -0
- package/lib-es/components/FilterPanel/FilterPanel.js.map +1 -0
- package/lib-es/components/FilterPanel/index.js +3 -0
- package/lib-es/components/FilterPanel/index.js.map +1 -0
- package/lib-es/components/ListingContainer/Listing/Listing.js +70 -0
- package/lib-es/components/ListingContainer/Listing/Listing.js.map +1 -0
- package/lib-es/components/ListingContainer/Listing/MediaListing/MediaFileList/MediaFileList.js +153 -0
- package/lib-es/components/ListingContainer/Listing/MediaListing/MediaFileList/MediaFileList.js.map +1 -0
- package/lib-es/components/ListingContainer/Listing/MediaListing/MediaFileList/index.js +3 -0
- package/lib-es/components/ListingContainer/Listing/MediaListing/MediaFileList/index.js.map +1 -0
- package/lib-es/components/ListingContainer/Listing/MediaListing/MediaListing.js +33 -0
- package/lib-es/components/ListingContainer/Listing/MediaListing/MediaListing.js.map +1 -0
- package/lib-es/components/ListingContainer/Listing/MediaListing/index.js +3 -0
- package/lib-es/components/ListingContainer/Listing/MediaListing/index.js.map +1 -0
- package/lib-es/components/ListingContainer/Listing/index.js +3 -0
- package/lib-es/components/ListingContainer/Listing/index.js.map +1 -0
- package/lib-es/components/ListingContainer/ListingContainer.js +115 -0
- package/lib-es/components/ListingContainer/ListingContainer.js.map +1 -0
- package/lib-es/components/ListingContainer/index.js +3 -0
- package/lib-es/components/ListingContainer/index.js.map +1 -0
- package/lib-es/components/ListingContainer/mappers/exist-previous.js +3 -0
- package/lib-es/components/ListingContainer/mappers/exist-previous.js.map +1 -0
- package/lib-es/components/ListingContainer/mappers/index.js +3 -0
- package/lib-es/components/ListingContainer/mappers/index.js.map +1 -0
- package/lib-es/components/MediaListing.js +29 -0
- package/lib-es/components/MediaListing.js.map +1 -0
- package/lib-es/constants.js +36 -0
- package/lib-es/constants.js.map +1 -0
- package/lib-es/icons/MediaLibraryIcon.js +70 -0
- package/lib-es/icons/MediaLibraryIcon.js.map +1 -0
- package/lib-es/icons/index.js +3 -0
- package/lib-es/icons/index.js.map +1 -0
- package/lib-es/index.js +61 -0
- package/lib-es/index.js.map +1 -0
- package/lib-es/utils/available-filters/available-filters.js +26 -0
- package/lib-es/utils/available-filters/available-filters.js.map +1 -0
- package/lib-es/utils/bustUrl.js +7 -0
- package/lib-es/utils/bustUrl.js.map +1 -0
- package/lib-es/utils/media-context/index.js +4 -0
- package/lib-es/utils/media-context/index.js.map +1 -0
- package/lib-es/utils/media-context/media-context.js +6 -0
- package/lib-es/utils/media-context/media-context.js.map +1 -0
- package/lib-es/utils/media-context/useMediaContext.js +4 -0
- package/lib-es/utils/media-context/useMediaContext.js.map +1 -0
- package/package.json +9 -8
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [0.146.0-node18-core-styles-tooltips.46](https://github.com/thebyte9/blaze/compare/v0.146.0-node18-core-styles-tooltips.45...v0.146.0-node18-core-styles-tooltips.46) (2026-01-16)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @blaze-cms/plugin-media-ui
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
# [0.146.0-node18-core-styles-tooltips.45](https://github.com/thebyte9/blaze/compare/v0.146.0-node18-core-styles-tooltips.44...v0.146.0-node18-core-styles-tooltips.45) (2026-01-15)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @blaze-cms/plugin-media-ui
|
|
@@ -0,0 +1,233 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import More from '@blaze-react/more';
|
|
3
|
+
import Button from '@blaze-react/button';
|
|
4
|
+
import { DeleteAction } from '@blaze-cms/admin';
|
|
5
|
+
import PropTypes from 'prop-types';
|
|
6
|
+
import { getQuery, getMutation } from '@blaze-cms/admin-ui-utils';
|
|
7
|
+
import { useMutation, useApolloClient } from '@apollo/client';
|
|
8
|
+
import classnames from 'classnames';
|
|
9
|
+
import { useToasts } from '@blaze-react/toaster';
|
|
10
|
+
import Modal from '@blaze-react/modal';
|
|
11
|
+
import { createPortal } from 'react-dom';
|
|
12
|
+
import { Link } from 'react-router-dom';
|
|
13
|
+
import EditMediaFile from '../EditMediaFile';
|
|
14
|
+
import bustUrl from '../../utils/bustUrl';
|
|
15
|
+
const CardMedia = ({
|
|
16
|
+
onSelected,
|
|
17
|
+
name,
|
|
18
|
+
url,
|
|
19
|
+
mimetype,
|
|
20
|
+
id,
|
|
21
|
+
selected,
|
|
22
|
+
displayLayout,
|
|
23
|
+
data,
|
|
24
|
+
updated,
|
|
25
|
+
modalTargetRef,
|
|
26
|
+
updateFile,
|
|
27
|
+
removeFile,
|
|
28
|
+
index,
|
|
29
|
+
openEditInModal
|
|
30
|
+
}) => {
|
|
31
|
+
const [displayDeleteModal, setDisplayDeleteModal] = useState(false);
|
|
32
|
+
const [displayEditModal, setDisplayEditModal] = useState(false);
|
|
33
|
+
const [enableSaveButton, setEnableSaveButton] = useState(false);
|
|
34
|
+
const [fileData, setFileData] = useState(null);
|
|
35
|
+
const {
|
|
36
|
+
addToast
|
|
37
|
+
} = useToasts();
|
|
38
|
+
const [deleteFile] = useMutation(getMutation('DELETE_FILE_BY_ID'));
|
|
39
|
+
const [type, extension] = mimetype.split('/');
|
|
40
|
+
const client = useApolloClient();
|
|
41
|
+
const deleteFileById = async () => {
|
|
42
|
+
setDisplayDeleteModal(false);
|
|
43
|
+
try {
|
|
44
|
+
await deleteFile({
|
|
45
|
+
variables: {
|
|
46
|
+
input: {
|
|
47
|
+
id
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
});
|
|
51
|
+
removeFile({
|
|
52
|
+
index
|
|
53
|
+
});
|
|
54
|
+
addToast(`File: ${name} has been deleted`, {
|
|
55
|
+
appearance: 'success',
|
|
56
|
+
autoDismiss: true
|
|
57
|
+
});
|
|
58
|
+
} catch (error) {
|
|
59
|
+
addToast(error.message, {
|
|
60
|
+
appearance: 'error',
|
|
61
|
+
autoDismiss: true
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
const handleClick = () => {
|
|
66
|
+
onSelected({
|
|
67
|
+
id,
|
|
68
|
+
url,
|
|
69
|
+
name,
|
|
70
|
+
data
|
|
71
|
+
});
|
|
72
|
+
};
|
|
73
|
+
const cardMediaClassNames = classnames('card card--media-list', {
|
|
74
|
+
'card--media-list--selected': selected,
|
|
75
|
+
[`card--media-${displayLayout}`]: displayLayout
|
|
76
|
+
});
|
|
77
|
+
const handleCloseModal = () => {
|
|
78
|
+
setDisplayEditModal(false);
|
|
79
|
+
};
|
|
80
|
+
const handleSaveButtonStatus = state => {
|
|
81
|
+
setEnableSaveButton(state);
|
|
82
|
+
};
|
|
83
|
+
const modalActions = [{
|
|
84
|
+
textButton: 'Cancel',
|
|
85
|
+
callback: handleCloseModal,
|
|
86
|
+
modifiers: ['cancel']
|
|
87
|
+
}, {
|
|
88
|
+
textButton: 'Apply',
|
|
89
|
+
callback: () => handleFormSave(),
|
|
90
|
+
modifiers: enableSaveButton ? [] : ['disabled']
|
|
91
|
+
}];
|
|
92
|
+
const handleFileChange = file => {
|
|
93
|
+
setFileData(file);
|
|
94
|
+
};
|
|
95
|
+
const handleFormSave = async () => {
|
|
96
|
+
try {
|
|
97
|
+
const {
|
|
98
|
+
data: {
|
|
99
|
+
updateFile: updatedFile
|
|
100
|
+
}
|
|
101
|
+
} = await client.mutate({
|
|
102
|
+
mutation: getMutation('UPDATE_FILE'),
|
|
103
|
+
variables: {
|
|
104
|
+
input: fileData
|
|
105
|
+
},
|
|
106
|
+
update(cache, {
|
|
107
|
+
data: {
|
|
108
|
+
updateFile: fileUpdated
|
|
109
|
+
}
|
|
110
|
+
}) {
|
|
111
|
+
cache.writeQuery({
|
|
112
|
+
query: getQuery('GET_FILE_BY_ID'),
|
|
113
|
+
variables: {
|
|
114
|
+
id
|
|
115
|
+
},
|
|
116
|
+
data: {
|
|
117
|
+
file: fileUpdated.result
|
|
118
|
+
}
|
|
119
|
+
});
|
|
120
|
+
}
|
|
121
|
+
});
|
|
122
|
+
updateFile({
|
|
123
|
+
file: updatedFile.result,
|
|
124
|
+
index
|
|
125
|
+
});
|
|
126
|
+
addToast(`File: ${fileData.name} has been updated`, {
|
|
127
|
+
appearance: 'success',
|
|
128
|
+
autoDismiss: true
|
|
129
|
+
});
|
|
130
|
+
} catch (e) {
|
|
131
|
+
addToast(`File: ${fileData.name} has not been updated`, {
|
|
132
|
+
appearance: 'error',
|
|
133
|
+
autoDismiss: true
|
|
134
|
+
});
|
|
135
|
+
console.error(e); //eslint-disable-line
|
|
136
|
+
}
|
|
137
|
+
handleCloseModal();
|
|
138
|
+
setEnableSaveButton(false);
|
|
139
|
+
};
|
|
140
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, displayEditModal && createPortal(/*#__PURE__*/React.createElement(Modal, {
|
|
141
|
+
title: "Edit",
|
|
142
|
+
actions: modalActions,
|
|
143
|
+
onClose: handleCloseModal
|
|
144
|
+
}, /*#__PURE__*/React.createElement(EditMediaFile, {
|
|
145
|
+
onChange: handleFileChange,
|
|
146
|
+
fileId: id,
|
|
147
|
+
handleSaveButtonStatus: handleSaveButtonStatus,
|
|
148
|
+
handleFormSave: handleFormSave,
|
|
149
|
+
enableSaveButton: enableSaveButton
|
|
150
|
+
})), modalTargetRef.current), /*#__PURE__*/React.createElement("div", {
|
|
151
|
+
className: cardMediaClassNames,
|
|
152
|
+
role: "button",
|
|
153
|
+
onClick: handleClick
|
|
154
|
+
}, displayDeleteModal && createPortal(/*#__PURE__*/React.createElement(DeleteAction, {
|
|
155
|
+
onClose: () => setDisplayDeleteModal(false),
|
|
156
|
+
deleteAction: () => deleteFileById(),
|
|
157
|
+
itemName: name
|
|
158
|
+
}), modalTargetRef.current), type === 'image' ? /*#__PURE__*/React.createElement("div", {
|
|
159
|
+
className: `card__image card__image--media-${displayLayout}`
|
|
160
|
+
}, /*#__PURE__*/React.createElement("img", {
|
|
161
|
+
src: bustUrl(url, updated),
|
|
162
|
+
alt: name
|
|
163
|
+
})) : /*#__PURE__*/React.createElement("div", {
|
|
164
|
+
className: "card__image card__image--media-list-document"
|
|
165
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
|
166
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
167
|
+
width: "100",
|
|
168
|
+
height: "100",
|
|
169
|
+
viewBox: "0 0 8 8"
|
|
170
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
171
|
+
d: "M0 0v8h7v-4h-4v-4h-3zm4 0v3h3l-3-3zm-3 2h1v1h-1v-1zm0 2h1v1h-1v-1zm0 2h4v1h-4v-1z"
|
|
172
|
+
}))), /*#__PURE__*/React.createElement("footer", {
|
|
173
|
+
className: `card__footer card__footer--media-${displayLayout}`
|
|
174
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
175
|
+
className: `card__details card__details--media-${displayLayout}`
|
|
176
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
177
|
+
className: `card__title card__title--media-${displayLayout}`
|
|
178
|
+
}, /*#__PURE__*/React.createElement("h2", null, name)), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("span", null, "format: ", extension))), /*#__PURE__*/React.createElement("div", {
|
|
179
|
+
className: `card__menu card__menu--${displayLayout}`
|
|
180
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
181
|
+
className: "more-menu__wrapper more-menu__wrapper--card"
|
|
182
|
+
}, /*#__PURE__*/React.createElement(More, {
|
|
183
|
+
displayBg: true
|
|
184
|
+
}, /*#__PURE__*/React.createElement(More.Avatar, {
|
|
185
|
+
isMoreMenu: true
|
|
186
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
187
|
+
className: "material-icons"
|
|
188
|
+
}, "more_vert")), /*#__PURE__*/React.createElement(More.Content, {
|
|
189
|
+
isMoreMenu: true
|
|
190
|
+
}, openEditInModal ? /*#__PURE__*/React.createElement(Button, {
|
|
191
|
+
onClick: event => {
|
|
192
|
+
event.preventDefault();
|
|
193
|
+
event.stopPropagation();
|
|
194
|
+
setDisplayEditModal(true);
|
|
195
|
+
},
|
|
196
|
+
className: "more-menu__link"
|
|
197
|
+
}, "Edit") : /*#__PURE__*/React.createElement(Link, {
|
|
198
|
+
to: `/media/edit/${id}`,
|
|
199
|
+
className: "more-menu__link"
|
|
200
|
+
}, "Edit"), /*#__PURE__*/React.createElement(Button, {
|
|
201
|
+
onClick: event => {
|
|
202
|
+
event.preventDefault();
|
|
203
|
+
event.stopPropagation();
|
|
204
|
+
setDisplayDeleteModal(true);
|
|
205
|
+
},
|
|
206
|
+
className: "more-menu__link"
|
|
207
|
+
}, "Delete"))))))));
|
|
208
|
+
};
|
|
209
|
+
CardMedia.propTypes = {
|
|
210
|
+
name: PropTypes.string.isRequired,
|
|
211
|
+
url: PropTypes.string.isRequired,
|
|
212
|
+
id: PropTypes.string.isRequired,
|
|
213
|
+
mimetype: PropTypes.string.isRequired,
|
|
214
|
+
displayLayout: PropTypes.string.isRequired,
|
|
215
|
+
data: PropTypes.object,
|
|
216
|
+
updated: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
217
|
+
onSelected: PropTypes.func,
|
|
218
|
+
updateFile: PropTypes.func.isRequired,
|
|
219
|
+
removeFile: PropTypes.func.isRequired,
|
|
220
|
+
selected: PropTypes.bool,
|
|
221
|
+
modalTargetRef: PropTypes.object.isRequired,
|
|
222
|
+
index: PropTypes.number.isRequired,
|
|
223
|
+
openEditInModal: PropTypes.bool
|
|
224
|
+
};
|
|
225
|
+
CardMedia.defaultProps = {
|
|
226
|
+
onSelected: () => {},
|
|
227
|
+
selected: false,
|
|
228
|
+
data: {},
|
|
229
|
+
updated: null,
|
|
230
|
+
openEditInModal: false
|
|
231
|
+
};
|
|
232
|
+
export default CardMedia;
|
|
233
|
+
//# sourceMappingURL=CardMedia.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CardMedia.js","names":["React","useState","More","Button","DeleteAction","PropTypes","getQuery","getMutation","useMutation","useApolloClient","classnames","useToasts","Modal","createPortal","Link","EditMediaFile","bustUrl","CardMedia","onSelected","name","url","mimetype","id","selected","displayLayout","data","updated","modalTargetRef","updateFile","removeFile","index","openEditInModal","displayDeleteModal","setDisplayDeleteModal","displayEditModal","setDisplayEditModal","enableSaveButton","setEnableSaveButton","fileData","setFileData","addToast","deleteFile","type","extension","split","client","deleteFileById","variables","input","appearance","autoDismiss","error","message","handleClick","cardMediaClassNames","handleCloseModal","handleSaveButtonStatus","state","modalActions","textButton","callback","modifiers","handleFormSave","handleFileChange","file","updatedFile","mutate","mutation","update","cache","fileUpdated","writeQuery","query","result","e","console","createElement","Fragment","title","actions","onClose","onChange","fileId","current","className","role","onClick","deleteAction","itemName","src","alt","xmlns","width","height","viewBox","d","displayBg","Avatar","isMoreMenu","Content","event","preventDefault","stopPropagation","to","propTypes","string","isRequired","object","oneOfType","number","func","bool","defaultProps"],"sources":["../../../src/components/CardMedia/CardMedia.js"],"sourcesContent":["import React, { useState } from 'react';\nimport More from '@blaze-react/more';\nimport Button from '@blaze-react/button';\nimport { DeleteAction } from '@blaze-cms/admin';\nimport PropTypes from 'prop-types';\nimport { getQuery, getMutation } from '@blaze-cms/admin-ui-utils';\nimport { useMutation, useApolloClient } from '@apollo/client';\nimport classnames from 'classnames';\nimport { useToasts } from '@blaze-react/toaster';\nimport Modal from '@blaze-react/modal';\nimport { createPortal } from 'react-dom';\nimport { Link } from 'react-router-dom';\nimport EditMediaFile from '../EditMediaFile';\nimport bustUrl from '../../utils/bustUrl';\n\nconst CardMedia = ({\n onSelected,\n name,\n url,\n mimetype,\n id,\n selected,\n displayLayout,\n data,\n updated,\n modalTargetRef,\n updateFile,\n removeFile,\n index,\n openEditInModal\n}) => {\n const [displayDeleteModal, setDisplayDeleteModal] = useState(false);\n const [displayEditModal, setDisplayEditModal] = useState(false);\n const [enableSaveButton, setEnableSaveButton] = useState(false);\n const [fileData, setFileData] = useState(null);\n const { addToast } = useToasts();\n const [deleteFile] = useMutation(getMutation('DELETE_FILE_BY_ID'));\n const [type, extension] = mimetype.split('/');\n const client = useApolloClient();\n\n const deleteFileById = async () => {\n setDisplayDeleteModal(false);\n try {\n await deleteFile({\n variables: { input: { id } }\n });\n\n removeFile({\n index\n });\n\n addToast(`File: ${name} has been deleted`, {\n appearance: 'success',\n autoDismiss: true\n });\n } catch (error) {\n addToast(error.message, {\n appearance: 'error',\n autoDismiss: true\n });\n }\n };\n\n const handleClick = () => {\n onSelected({ id, url, name, data });\n };\n\n const cardMediaClassNames = classnames('card card--media-list', {\n 'card--media-list--selected': selected,\n [`card--media-${displayLayout}`]: displayLayout\n });\n\n const handleCloseModal = () => {\n setDisplayEditModal(false);\n };\n\n const handleSaveButtonStatus = state => {\n setEnableSaveButton(state);\n };\n\n const modalActions = [\n {\n textButton: 'Cancel',\n callback: handleCloseModal,\n modifiers: ['cancel']\n },\n {\n textButton: 'Apply',\n callback: () => handleFormSave(),\n modifiers: enableSaveButton ? [] : ['disabled']\n }\n ];\n\n const handleFileChange = file => {\n setFileData(file);\n };\n\n const handleFormSave = async () => {\n try {\n const {\n data: { updateFile: updatedFile }\n } = await client.mutate({\n mutation: getMutation('UPDATE_FILE'),\n variables: { input: fileData },\n update(cache, { data: { updateFile: fileUpdated } }) {\n cache.writeQuery({\n query: getQuery('GET_FILE_BY_ID'),\n variables: { id },\n data: { file: fileUpdated.result }\n });\n }\n });\n\n updateFile({ file: updatedFile.result, index });\n addToast(`File: ${fileData.name} has been updated`, {\n appearance: 'success',\n autoDismiss: true\n });\n } catch (e) {\n addToast(`File: ${fileData.name} has not been updated`, {\n appearance: 'error',\n autoDismiss: true\n });\n console.error(e); //eslint-disable-line\n }\n handleCloseModal();\n setEnableSaveButton(false);\n };\n\n return (\n <>\n {displayEditModal &&\n createPortal(\n <Modal title=\"Edit\" actions={modalActions} onClose={handleCloseModal}>\n <EditMediaFile\n onChange={handleFileChange}\n fileId={id}\n handleSaveButtonStatus={handleSaveButtonStatus}\n handleFormSave={handleFormSave}\n enableSaveButton={enableSaveButton}\n />\n </Modal>,\n modalTargetRef.current\n )}\n <div className={cardMediaClassNames} role=\"button\" onClick={handleClick}>\n {displayDeleteModal &&\n createPortal(\n <DeleteAction\n onClose={() => setDisplayDeleteModal(false)}\n deleteAction={() => deleteFileById()}\n itemName={name}\n />,\n modalTargetRef.current\n )}\n\n {type === 'image' ? (\n <div className={`card__image card__image--media-${displayLayout}`}>\n <img src={bustUrl(url, updated)} alt={name} />\n </div>\n ) : (\n <div className=\"card__image card__image--media-list-document\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\" viewBox=\"0 0 8 8\">\n <path d=\"M0 0v8h7v-4h-4v-4h-3zm4 0v3h3l-3-3zm-3 2h1v1h-1v-1zm0 2h1v1h-1v-1zm0 2h4v1h-4v-1z\" />\n </svg>\n </div>\n )}\n\n <footer className={`card__footer card__footer--media-${displayLayout}`}>\n <div className={`card__details card__details--media-${displayLayout}`}>\n <div className={`card__title card__title--media-${displayLayout}`}>\n <h2>{name}</h2>\n </div>\n <p>\n <span>format: {extension}</span>\n </p>\n </div>\n <div className={`card__menu card__menu--${displayLayout}`}>\n <div className=\"more-menu__wrapper more-menu__wrapper--card\">\n <More displayBg>\n <More.Avatar isMoreMenu>\n <span className=\"material-icons\">more_vert</span>\n </More.Avatar>\n <More.Content isMoreMenu>\n {openEditInModal ? (\n <Button\n onClick={event => {\n event.preventDefault();\n event.stopPropagation();\n setDisplayEditModal(true);\n }}\n className=\"more-menu__link\">\n Edit\n </Button>\n ) : (\n <Link to={`/media/edit/${id}`} className=\"more-menu__link\">\n Edit\n </Link>\n )}\n <Button\n onClick={event => {\n event.preventDefault();\n event.stopPropagation();\n setDisplayDeleteModal(true);\n }}\n className=\"more-menu__link\">\n Delete\n </Button>\n </More.Content>\n </More>\n </div>\n </div>\n </footer>\n </div>\n </>\n );\n};\n\nCardMedia.propTypes = {\n name: PropTypes.string.isRequired,\n url: PropTypes.string.isRequired,\n id: PropTypes.string.isRequired,\n mimetype: PropTypes.string.isRequired,\n displayLayout: PropTypes.string.isRequired,\n data: PropTypes.object,\n updated: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n onSelected: PropTypes.func,\n updateFile: PropTypes.func.isRequired,\n removeFile: PropTypes.func.isRequired,\n selected: PropTypes.bool,\n modalTargetRef: PropTypes.object.isRequired,\n index: PropTypes.number.isRequired,\n openEditInModal: PropTypes.bool\n};\n\nCardMedia.defaultProps = {\n onSelected: () => {},\n selected: false,\n data: {},\n updated: null,\n openEditInModal: false\n};\n\nexport default CardMedia;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,OAAOC,IAAI,MAAM,mBAAmB;AACpC,OAAOC,MAAM,MAAM,qBAAqB;AACxC,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,QAAQ,EAAEC,WAAW,QAAQ,2BAA2B;AACjE,SAASC,WAAW,EAAEC,eAAe,QAAQ,gBAAgB;AAC7D,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,SAAS,QAAQ,sBAAsB;AAChD,OAAOC,KAAK,MAAM,oBAAoB;AACtC,SAASC,YAAY,QAAQ,WAAW;AACxC,SAASC,IAAI,QAAQ,kBAAkB;AACvC,OAAOC,aAAa,MAAM,kBAAkB;AAC5C,OAAOC,OAAO,MAAM,qBAAqB;AAEzC,MAAMC,SAAS,GAAGA,CAAC;EACjBC,UAAU;EACVC,IAAI;EACJC,GAAG;EACHC,QAAQ;EACRC,EAAE;EACFC,QAAQ;EACRC,aAAa;EACbC,IAAI;EACJC,OAAO;EACPC,cAAc;EACdC,UAAU;EACVC,UAAU;EACVC,KAAK;EACLC;AACF,CAAC,KAAK;EACJ,MAAM,CAACC,kBAAkB,EAAEC,qBAAqB,CAAC,GAAGhC,QAAQ,CAAC,KAAK,CAAC;EACnE,MAAM,CAACiC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGlC,QAAQ,CAAC,KAAK,CAAC;EAC/D,MAAM,CAACmC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGpC,QAAQ,CAAC,KAAK,CAAC;EAC/D,MAAM,CAACqC,QAAQ,EAAEC,WAAW,CAAC,GAAGtC,QAAQ,CAAC,IAAI,CAAC;EAC9C,MAAM;IAAEuC;EAAS,CAAC,GAAG7B,SAAS,CAAC,CAAC;EAChC,MAAM,CAAC8B,UAAU,CAAC,GAAGjC,WAAW,CAACD,WAAW,CAAC,mBAAmB,CAAC,CAAC;EAClE,MAAM,CAACmC,IAAI,EAAEC,SAAS,CAAC,GAAGtB,QAAQ,CAACuB,KAAK,CAAC,GAAG,CAAC;EAC7C,MAAMC,MAAM,GAAGpC,eAAe,CAAC,CAAC;EAEhC,MAAMqC,cAAc,GAAG,MAAAA,CAAA,KAAY;IACjCb,qBAAqB,CAAC,KAAK,CAAC;IAC5B,IAAI;MACF,MAAMQ,UAAU,CAAC;QACfM,SAAS,EAAE;UAAEC,KAAK,EAAE;YAAE1B;UAAG;QAAE;MAC7B,CAAC,CAAC;MAEFO,UAAU,CAAC;QACTC;MACF,CAAC,CAAC;MAEFU,QAAQ,CAAC,SAASrB,IAAI,mBAAmB,EAAE;QACzC8B,UAAU,EAAE,SAAS;QACrBC,WAAW,EAAE;MACf,CAAC,CAAC;IACJ,CAAC,CAAC,OAAOC,KAAK,EAAE;MACdX,QAAQ,CAACW,KAAK,CAACC,OAAO,EAAE;QACtBH,UAAU,EAAE,OAAO;QACnBC,WAAW,EAAE;MACf,CAAC,CAAC;IACJ;EACF,CAAC;EAED,MAAMG,WAAW,GAAGA,CAAA,KAAM;IACxBnC,UAAU,CAAC;MAAEI,EAAE;MAAEF,GAAG;MAAED,IAAI;MAAEM;IAAK,CAAC,CAAC;EACrC,CAAC;EAED,MAAM6B,mBAAmB,GAAG5C,UAAU,CAAC,uBAAuB,EAAE;IAC9D,4BAA4B,EAAEa,QAAQ;IACtC,CAAC,eAAeC,aAAa,EAAE,GAAGA;EACpC,CAAC,CAAC;EAEF,MAAM+B,gBAAgB,GAAGA,CAAA,KAAM;IAC7BpB,mBAAmB,CAAC,KAAK,CAAC;EAC5B,CAAC;EAED,MAAMqB,sBAAsB,GAAGC,KAAK,IAAI;IACtCpB,mBAAmB,CAACoB,KAAK,CAAC;EAC5B,CAAC;EAED,MAAMC,YAAY,GAAG,CACnB;IACEC,UAAU,EAAE,QAAQ;IACpBC,QAAQ,EAAEL,gBAAgB;IAC1BM,SAAS,EAAE,CAAC,QAAQ;EACtB,CAAC,EACD;IACEF,UAAU,EAAE,OAAO;IACnBC,QAAQ,EAAEA,CAAA,KAAME,cAAc,CAAC,CAAC;IAChCD,SAAS,EAAEzB,gBAAgB,GAAG,EAAE,GAAG,CAAC,UAAU;EAChD,CAAC,CACF;EAED,MAAM2B,gBAAgB,GAAGC,IAAI,IAAI;IAC/BzB,WAAW,CAACyB,IAAI,CAAC;EACnB,CAAC;EAED,MAAMF,cAAc,GAAG,MAAAA,CAAA,KAAY;IACjC,IAAI;MACF,MAAM;QACJrC,IAAI,EAAE;UAAEG,UAAU,EAAEqC;QAAY;MAClC,CAAC,GAAG,MAAMpB,MAAM,CAACqB,MAAM,CAAC;QACtBC,QAAQ,EAAE5D,WAAW,CAAC,aAAa,CAAC;QACpCwC,SAAS,EAAE;UAAEC,KAAK,EAAEV;QAAS,CAAC;QAC9B8B,MAAMA,CAACC,KAAK,EAAE;UAAE5C,IAAI,EAAE;YAAEG,UAAU,EAAE0C;UAAY;QAAE,CAAC,EAAE;UACnDD,KAAK,CAACE,UAAU,CAAC;YACfC,KAAK,EAAElE,QAAQ,CAAC,gBAAgB,CAAC;YACjCyC,SAAS,EAAE;cAAEzB;YAAG,CAAC;YACjBG,IAAI,EAAE;cAAEuC,IAAI,EAAEM,WAAW,CAACG;YAAO;UACnC,CAAC,CAAC;QACJ;MACF,CAAC,CAAC;MAEF7C,UAAU,CAAC;QAAEoC,IAAI,EAAEC,WAAW,CAACQ,MAAM;QAAE3C;MAAM,CAAC,CAAC;MAC/CU,QAAQ,CAAC,SAASF,QAAQ,CAACnB,IAAI,mBAAmB,EAAE;QAClD8B,UAAU,EAAE,SAAS;QACrBC,WAAW,EAAE;MACf,CAAC,CAAC;IACJ,CAAC,CAAC,OAAOwB,CAAC,EAAE;MACVlC,QAAQ,CAAC,SAASF,QAAQ,CAACnB,IAAI,uBAAuB,EAAE;QACtD8B,UAAU,EAAE,OAAO;QACnBC,WAAW,EAAE;MACf,CAAC,CAAC;MACFyB,OAAO,CAACxB,KAAK,CAACuB,CAAC,CAAC,CAAC,CAAC;IACpB;IACAnB,gBAAgB,CAAC,CAAC;IAClBlB,mBAAmB,CAAC,KAAK,CAAC;EAC5B,CAAC;EAED,oBACErC,KAAA,CAAA4E,aAAA,CAAA5E,KAAA,CAAA6E,QAAA,QACG3C,gBAAgB,IACfrB,YAAY,cACVb,KAAA,CAAA4E,aAAA,CAAChE,KAAK;IAACkE,KAAK,EAAC,MAAM;IAACC,OAAO,EAAErB,YAAa;IAACsB,OAAO,EAAEzB;EAAiB,gBACnEvD,KAAA,CAAA4E,aAAA,CAAC7D,aAAa;IACZkE,QAAQ,EAAElB,gBAAiB;IAC3BmB,MAAM,EAAE5D,EAAG;IACXkC,sBAAsB,EAAEA,sBAAuB;IAC/CM,cAAc,EAAEA,cAAe;IAC/B1B,gBAAgB,EAAEA;EAAiB,CACpC,CACI,CAAC,EACRT,cAAc,CAACwD,OACjB,CAAC,eACHnF,KAAA,CAAA4E,aAAA;IAAKQ,SAAS,EAAE9B,mBAAoB;IAAC+B,IAAI,EAAC,QAAQ;IAACC,OAAO,EAAEjC;EAAY,GACrErB,kBAAkB,IACjBnB,YAAY,cACVb,KAAA,CAAA4E,aAAA,CAACxE,YAAY;IACX4E,OAAO,EAAEA,CAAA,KAAM/C,qBAAqB,CAAC,KAAK,CAAE;IAC5CsD,YAAY,EAAEA,CAAA,KAAMzC,cAAc,CAAC,CAAE;IACrC0C,QAAQ,EAAErE;EAAK,CAChB,CAAC,EACFQ,cAAc,CAACwD,OACjB,CAAC,EAEFzC,IAAI,KAAK,OAAO,gBACf1C,KAAA,CAAA4E,aAAA;IAAKQ,SAAS,EAAE,kCAAkC5D,aAAa;EAAG,gBAChExB,KAAA,CAAA4E,aAAA;IAAKa,GAAG,EAAEzE,OAAO,CAACI,GAAG,EAAEM,OAAO,CAAE;IAACgE,GAAG,EAAEvE;EAAK,CAAE,CAC1C,CAAC,gBAENnB,KAAA,CAAA4E,aAAA;IAAKQ,SAAS,EAAC;EAA8C,gBAC3DpF,KAAA,CAAA4E,aAAA;IAAKe,KAAK,EAAC,4BAA4B;IAACC,KAAK,EAAC,KAAK;IAACC,MAAM,EAAC,KAAK;IAACC,OAAO,EAAC;EAAS,gBAChF9F,KAAA,CAAA4E,aAAA;IAAMmB,CAAC,EAAC;EAAmF,CAAE,CAC1F,CACF,CACN,eAED/F,KAAA,CAAA4E,aAAA;IAAQQ,SAAS,EAAE,oCAAoC5D,aAAa;EAAG,gBACrExB,KAAA,CAAA4E,aAAA;IAAKQ,SAAS,EAAE,sCAAsC5D,aAAa;EAAG,gBACpExB,KAAA,CAAA4E,aAAA;IAAKQ,SAAS,EAAE,kCAAkC5D,aAAa;EAAG,gBAChExB,KAAA,CAAA4E,aAAA,aAAKzD,IAAS,CACX,CAAC,eACNnB,KAAA,CAAA4E,aAAA,yBACE5E,KAAA,CAAA4E,aAAA,eAAM,UAAQ,EAACjC,SAAgB,CAC9B,CACA,CAAC,eACN3C,KAAA,CAAA4E,aAAA;IAAKQ,SAAS,EAAE,0BAA0B5D,aAAa;EAAG,gBACxDxB,KAAA,CAAA4E,aAAA;IAAKQ,SAAS,EAAC;EAA6C,gBAC1DpF,KAAA,CAAA4E,aAAA,CAAC1E,IAAI;IAAC8F,SAAS;EAAA,gBACbhG,KAAA,CAAA4E,aAAA,CAAC1E,IAAI,CAAC+F,MAAM;IAACC,UAAU;EAAA,gBACrBlG,KAAA,CAAA4E,aAAA;IAAMQ,SAAS,EAAC;EAAgB,GAAC,WAAe,CACrC,CAAC,eACdpF,KAAA,CAAA4E,aAAA,CAAC1E,IAAI,CAACiG,OAAO;IAACD,UAAU;EAAA,GACrBnE,eAAe,gBACd/B,KAAA,CAAA4E,aAAA,CAACzE,MAAM;IACLmF,OAAO,EAAEc,KAAK,IAAI;MAChBA,KAAK,CAACC,cAAc,CAAC,CAAC;MACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;MACvBnE,mBAAmB,CAAC,IAAI,CAAC;IAC3B,CAAE;IACFiD,SAAS,EAAC;EAAiB,GAAC,MAEtB,CAAC,gBAETpF,KAAA,CAAA4E,aAAA,CAAC9D,IAAI;IAACyF,EAAE,EAAE,eAAejF,EAAE,EAAG;IAAC8D,SAAS,EAAC;EAAiB,GAAC,MAErD,CACP,eACDpF,KAAA,CAAA4E,aAAA,CAACzE,MAAM;IACLmF,OAAO,EAAEc,KAAK,IAAI;MAChBA,KAAK,CAACC,cAAc,CAAC,CAAC;MACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;MACvBrE,qBAAqB,CAAC,IAAI,CAAC;IAC7B,CAAE;IACFmD,SAAS,EAAC;EAAiB,GAAC,QAEtB,CACI,CACV,CACH,CACF,CACC,CACL,CACL,CAAC;AAEP,CAAC;AAEDnE,SAAS,CAACuF,SAAS,GAAG;EACpBrF,IAAI,EAAEd,SAAS,CAACoG,MAAM,CAACC,UAAU;EACjCtF,GAAG,EAAEf,SAAS,CAACoG,MAAM,CAACC,UAAU;EAChCpF,EAAE,EAAEjB,SAAS,CAACoG,MAAM,CAACC,UAAU;EAC/BrF,QAAQ,EAAEhB,SAAS,CAACoG,MAAM,CAACC,UAAU;EACrClF,aAAa,EAAEnB,SAAS,CAACoG,MAAM,CAACC,UAAU;EAC1CjF,IAAI,EAAEpB,SAAS,CAACsG,MAAM;EACtBjF,OAAO,EAAErB,SAAS,CAACuG,SAAS,CAAC,CAACvG,SAAS,CAACoG,MAAM,EAAEpG,SAAS,CAACwG,MAAM,CAAC,CAAC;EAClE3F,UAAU,EAAEb,SAAS,CAACyG,IAAI;EAC1BlF,UAAU,EAAEvB,SAAS,CAACyG,IAAI,CAACJ,UAAU;EACrC7E,UAAU,EAAExB,SAAS,CAACyG,IAAI,CAACJ,UAAU;EACrCnF,QAAQ,EAAElB,SAAS,CAAC0G,IAAI;EACxBpF,cAAc,EAAEtB,SAAS,CAACsG,MAAM,CAACD,UAAU;EAC3C5E,KAAK,EAAEzB,SAAS,CAACwG,MAAM,CAACH,UAAU;EAClC3E,eAAe,EAAE1B,SAAS,CAAC0G;AAC7B,CAAC;AAED9F,SAAS,CAAC+F,YAAY,GAAG;EACvB9F,UAAU,EAAEA,CAAA,KAAM,CAAC,CAAC;EACpBK,QAAQ,EAAE,KAAK;EACfE,IAAI,EAAE,CAAC,CAAC;EACRC,OAAO,EAAE,IAAI;EACbK,eAAe,EAAE;AACnB,CAAC;AAED,eAAed,SAAS","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["CardMedia"],"sources":["../../../src/components/CardMedia/index.js"],"sourcesContent":["import CardMedia from './CardMedia';\n\nexport default CardMedia;\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,aAAa;AAEnC,eAAeA,SAAS","ignoreList":[]}
|
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
2
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
|
+
const _excluded = ["__typename"];
|
|
4
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
5
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
6
|
+
import React, { useState, useEffect } from 'react';
|
|
7
|
+
import PropTypes from 'prop-types';
|
|
8
|
+
import { getQuery } from '@blaze-cms/admin-ui-utils';
|
|
9
|
+
import { useQuery } from '@apollo/client';
|
|
10
|
+
import { useToasts } from '@blaze-react/toaster';
|
|
11
|
+
import FilePreview from '../FilePreview';
|
|
12
|
+
import FileUploadModal from '../FileUploadModal';
|
|
13
|
+
import { STORE_KEY, NAME } from '../../constants';
|
|
14
|
+
const EditMediaFile = ({
|
|
15
|
+
onChange,
|
|
16
|
+
handleSaveButtonStatus,
|
|
17
|
+
fileId,
|
|
18
|
+
showChangeButton,
|
|
19
|
+
fileUpdated
|
|
20
|
+
}) => {
|
|
21
|
+
const [formValues, setFormValues] = useState(null);
|
|
22
|
+
const [displayFileUploadModal, setDisplayFileUploadModal] = useState(false);
|
|
23
|
+
const {
|
|
24
|
+
addToast
|
|
25
|
+
} = useToasts();
|
|
26
|
+
const fileQuery = getQuery('GET_FILE_BY_ID');
|
|
27
|
+
const {
|
|
28
|
+
loading,
|
|
29
|
+
data: {
|
|
30
|
+
file
|
|
31
|
+
} = {},
|
|
32
|
+
refetch: refetchFile
|
|
33
|
+
} = useQuery(fileQuery, {
|
|
34
|
+
variables: {
|
|
35
|
+
id: fileId
|
|
36
|
+
},
|
|
37
|
+
fetchPolicy: 'cache-and-network'
|
|
38
|
+
});
|
|
39
|
+
const fileStoresType = getQuery('GET_FILE_STORES');
|
|
40
|
+
const {
|
|
41
|
+
data: {
|
|
42
|
+
getFileStores: storeType = []
|
|
43
|
+
} = {}
|
|
44
|
+
} = useQuery(fileStoresType, {
|
|
45
|
+
variables: {
|
|
46
|
+
visibleInAdmin: true
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
useEffect(() => {
|
|
50
|
+
if (file) {
|
|
51
|
+
setFormValues(prevFormValues => {
|
|
52
|
+
if (!prevFormValues || prevFormValues.updated !== file.updated) {
|
|
53
|
+
return file;
|
|
54
|
+
}
|
|
55
|
+
return prevFormValues;
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
}, [file]);
|
|
59
|
+
useEffect(() => {
|
|
60
|
+
if (fileUpdated && fileUpdated.updated) {
|
|
61
|
+
setFormValues(fileUpdated);
|
|
62
|
+
}
|
|
63
|
+
}, [fileUpdated]);
|
|
64
|
+
const handleFormChange = ({
|
|
65
|
+
isValid,
|
|
66
|
+
isNewValueSet,
|
|
67
|
+
valuesChecked
|
|
68
|
+
}) => {
|
|
69
|
+
const baseFile = formValues || file;
|
|
70
|
+
const valuesCheckedWithoutName = valuesChecked.filter(({
|
|
71
|
+
id
|
|
72
|
+
}) => id !== NAME && id !== STORE_KEY);
|
|
73
|
+
const dataValues = valuesCheckedWithoutName.reduce((acc, {
|
|
74
|
+
id,
|
|
75
|
+
value
|
|
76
|
+
}) => {
|
|
77
|
+
acc[id] = value;
|
|
78
|
+
return acc;
|
|
79
|
+
}, {});
|
|
80
|
+
const {
|
|
81
|
+
value: newFileName
|
|
82
|
+
} = valuesChecked.find(({
|
|
83
|
+
id
|
|
84
|
+
}) => id === NAME) || {};
|
|
85
|
+
const {
|
|
86
|
+
value: storeKey
|
|
87
|
+
} = valuesChecked.find(({
|
|
88
|
+
id
|
|
89
|
+
}) => id === STORE_KEY) || {};
|
|
90
|
+
const shouldEnableSaveButton = isNewValueSet && isValid;
|
|
91
|
+
handleSaveButtonStatus(shouldEnableSaveButton);
|
|
92
|
+
const updatedFile = _objectSpread(_objectSpread({}, baseFile), {}, {
|
|
93
|
+
name: newFileName || baseFile.name,
|
|
94
|
+
storeKey: storeKey || baseFile.storeKey,
|
|
95
|
+
data: _objectSpread(_objectSpread({}, baseFile.data || {}), dataValues)
|
|
96
|
+
});
|
|
97
|
+
setFormValues(updatedFile);
|
|
98
|
+
// Strip GraphQL metadata field __typename before passing data to onChange.
|
|
99
|
+
const _ref = updatedFile.data || {},
|
|
100
|
+
{
|
|
101
|
+
__typename
|
|
102
|
+
} = _ref,
|
|
103
|
+
cleanData = _objectWithoutProperties(_ref, _excluded);
|
|
104
|
+
onChange({
|
|
105
|
+
id: updatedFile.id,
|
|
106
|
+
name: updatedFile.name,
|
|
107
|
+
data: cleanData
|
|
108
|
+
});
|
|
109
|
+
};
|
|
110
|
+
const getFileWithStoreType = sourceFile => {
|
|
111
|
+
const base = sourceFile || file;
|
|
112
|
+
if (storeType && base) {
|
|
113
|
+
const storeOptions = storeType.map(type => [type.key, type.name]);
|
|
114
|
+
const defaultStore = storeType.find(type => type.isDefault) || null;
|
|
115
|
+
return _objectSpread(_objectSpread({}, base), {}, {
|
|
116
|
+
store: {
|
|
117
|
+
defaultStore,
|
|
118
|
+
storeOptions
|
|
119
|
+
}
|
|
120
|
+
});
|
|
121
|
+
}
|
|
122
|
+
return base;
|
|
123
|
+
};
|
|
124
|
+
const closeModalAndSetValue = async (isSaving, values, toastMessage) => {
|
|
125
|
+
if (toastMessage) {
|
|
126
|
+
addToast(toastMessage, {
|
|
127
|
+
appearance: 'success',
|
|
128
|
+
autoDismiss: true
|
|
129
|
+
});
|
|
130
|
+
}
|
|
131
|
+
if (values) {
|
|
132
|
+
const updated = values.id === fileId ? values : _objectSpread(_objectSpread(_objectSpread({}, formValues || file), values), {}, {
|
|
133
|
+
url: values.url || (formValues || file).url
|
|
134
|
+
});
|
|
135
|
+
setFormValues(updated);
|
|
136
|
+
onChange(updated);
|
|
137
|
+
handleSaveButtonStatus(true);
|
|
138
|
+
} else {
|
|
139
|
+
const {
|
|
140
|
+
data: {
|
|
141
|
+
file: refreshedFile
|
|
142
|
+
} = {}
|
|
143
|
+
} = await refetchFile({
|
|
144
|
+
id: fileId,
|
|
145
|
+
timestamp: Date.now()
|
|
146
|
+
});
|
|
147
|
+
if (refreshedFile) {
|
|
148
|
+
setFormValues(refreshedFile);
|
|
149
|
+
onChange(refreshedFile);
|
|
150
|
+
handleSaveButtonStatus(true);
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
setDisplayFileUploadModal(false);
|
|
154
|
+
};
|
|
155
|
+
if (loading) return /*#__PURE__*/React.createElement("div", null, "loading...");
|
|
156
|
+
const fileToRender = formValues || file;
|
|
157
|
+
const fileWithStoreType = getFileWithStoreType(fileToRender);
|
|
158
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, !!file && /*#__PURE__*/React.createElement(FilePreview, {
|
|
159
|
+
file: fileWithStoreType,
|
|
160
|
+
handleFormChange: handleFormChange,
|
|
161
|
+
handleChangeFile: () => setDisplayFileUploadModal(true),
|
|
162
|
+
displayForm: true,
|
|
163
|
+
showChangeButton: showChangeButton
|
|
164
|
+
}), displayFileUploadModal && /*#__PURE__*/React.createElement("div", {
|
|
165
|
+
className: "file-upload-modal-wrapper"
|
|
166
|
+
}, /*#__PURE__*/React.createElement(FileUploadModal, {
|
|
167
|
+
onClose: () => setDisplayFileUploadModal(false),
|
|
168
|
+
closeModalAndSetValue: closeModalAndSetValue,
|
|
169
|
+
simpleLayout: true,
|
|
170
|
+
fileId: fileId,
|
|
171
|
+
storeKey: file && file.storeKey,
|
|
172
|
+
getSelectedFiles: () => {}
|
|
173
|
+
})));
|
|
174
|
+
};
|
|
175
|
+
EditMediaFile.propTypes = {
|
|
176
|
+
fileId: PropTypes.string.isRequired,
|
|
177
|
+
onChange: PropTypes.func.isRequired,
|
|
178
|
+
handleSaveButtonStatus: PropTypes.func.isRequired,
|
|
179
|
+
showChangeButton: PropTypes.bool,
|
|
180
|
+
fileUpdated: PropTypes.object
|
|
181
|
+
};
|
|
182
|
+
EditMediaFile.defaultProps = {
|
|
183
|
+
showChangeButton: false,
|
|
184
|
+
fileUpdated: null
|
|
185
|
+
};
|
|
186
|
+
export default EditMediaFile;
|
|
187
|
+
//# sourceMappingURL=EditMediaFile.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EditMediaFile.js","names":["React","useState","useEffect","PropTypes","getQuery","useQuery","useToasts","FilePreview","FileUploadModal","STORE_KEY","NAME","EditMediaFile","onChange","handleSaveButtonStatus","fileId","showChangeButton","fileUpdated","formValues","setFormValues","displayFileUploadModal","setDisplayFileUploadModal","addToast","fileQuery","loading","data","file","refetch","refetchFile","variables","id","fetchPolicy","fileStoresType","getFileStores","storeType","visibleInAdmin","prevFormValues","updated","handleFormChange","isValid","isNewValueSet","valuesChecked","baseFile","valuesCheckedWithoutName","filter","dataValues","reduce","acc","value","newFileName","find","storeKey","shouldEnableSaveButton","updatedFile","_objectSpread","name","_ref","__typename","cleanData","_objectWithoutProperties","_excluded","getFileWithStoreType","sourceFile","base","storeOptions","map","type","key","defaultStore","isDefault","store","closeModalAndSetValue","isSaving","values","toastMessage","appearance","autoDismiss","url","refreshedFile","timestamp","Date","now","createElement","fileToRender","fileWithStoreType","Fragment","handleChangeFile","displayForm","className","onClose","simpleLayout","getSelectedFiles","propTypes","string","isRequired","func","bool","object","defaultProps"],"sources":["../../../src/components/EditMediaFile/EditMediaFile.js"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { getQuery } from '@blaze-cms/admin-ui-utils';\nimport { useQuery } from '@apollo/client';\nimport { useToasts } from '@blaze-react/toaster';\nimport FilePreview from '../FilePreview';\nimport FileUploadModal from '../FileUploadModal';\nimport { STORE_KEY, NAME } from '../../constants';\n\nconst EditMediaFile = ({\n onChange,\n handleSaveButtonStatus,\n fileId,\n showChangeButton,\n fileUpdated\n}) => {\n const [formValues, setFormValues] = useState(null);\n const [displayFileUploadModal, setDisplayFileUploadModal] = useState(false);\n const { addToast } = useToasts();\n\n const fileQuery = getQuery('GET_FILE_BY_ID');\n const {\n loading,\n data: { file } = {},\n refetch: refetchFile\n } = useQuery(fileQuery, {\n variables: { id: fileId },\n fetchPolicy: 'cache-and-network'\n });\n\n const fileStoresType = getQuery('GET_FILE_STORES');\n const { data: { getFileStores: storeType = [] } = {} } = useQuery(fileStoresType, {\n variables: { visibleInAdmin: true }\n });\n\n useEffect(() => {\n if (file) {\n setFormValues(prevFormValues => {\n if (!prevFormValues || prevFormValues.updated !== file.updated) {\n return file;\n }\n return prevFormValues;\n });\n }\n }, [file]);\n\n useEffect(() => {\n if (fileUpdated && fileUpdated.updated) {\n setFormValues(fileUpdated);\n }\n }, [fileUpdated]);\n\n const handleFormChange = ({ isValid, isNewValueSet, valuesChecked }) => {\n const baseFile = formValues || file;\n const valuesCheckedWithoutName = valuesChecked.filter(\n ({ id }) => id !== NAME && id !== STORE_KEY\n );\n\n const dataValues = valuesCheckedWithoutName.reduce((acc, { id, value }) => {\n acc[id] = value;\n return acc;\n }, {});\n\n const { value: newFileName } = valuesChecked.find(({ id }) => id === NAME) || {};\n const { value: storeKey } = valuesChecked.find(({ id }) => id === STORE_KEY) || {};\n\n const shouldEnableSaveButton = isNewValueSet && isValid;\n handleSaveButtonStatus(shouldEnableSaveButton);\n\n const updatedFile = {\n ...baseFile,\n name: newFileName || baseFile.name,\n storeKey: storeKey || baseFile.storeKey,\n data: { ...(baseFile.data || {}), ...dataValues }\n };\n\n setFormValues(updatedFile);\n // Strip GraphQL metadata field __typename before passing data to onChange.\n const { __typename, ...cleanData } = updatedFile.data || {};\n onChange({ id: updatedFile.id, name: updatedFile.name, data: cleanData });\n };\n\n const getFileWithStoreType = sourceFile => {\n const base = sourceFile || file;\n if (storeType && base) {\n const storeOptions = storeType.map(type => [type.key, type.name]);\n const defaultStore = storeType.find(type => type.isDefault) || null;\n return { ...base, store: { defaultStore, storeOptions } };\n }\n return base;\n };\n\n const closeModalAndSetValue = async (isSaving, values, toastMessage) => {\n if (toastMessage) {\n addToast(toastMessage, { appearance: 'success', autoDismiss: true });\n }\n\n if (values) {\n const updated =\n values.id === fileId\n ? values\n : {\n ...(formValues || file),\n ...values,\n url: values.url || (formValues || file).url\n };\n setFormValues(updated);\n onChange(updated);\n handleSaveButtonStatus(true);\n } else {\n const { data: { file: refreshedFile } = {} } = await refetchFile({\n id: fileId,\n timestamp: Date.now()\n });\n if (refreshedFile) {\n setFormValues(refreshedFile);\n onChange(refreshedFile);\n handleSaveButtonStatus(true);\n }\n }\n\n setDisplayFileUploadModal(false);\n };\n\n if (loading) return <div>loading...</div>;\n\n const fileToRender = formValues || file;\n const fileWithStoreType = getFileWithStoreType(fileToRender);\n\n return (\n <>\n {!!file && (\n <FilePreview\n file={fileWithStoreType}\n handleFormChange={handleFormChange}\n handleChangeFile={() => setDisplayFileUploadModal(true)}\n displayForm\n showChangeButton={showChangeButton}\n />\n )}\n {displayFileUploadModal && (\n <div className=\"file-upload-modal-wrapper\">\n <FileUploadModal\n onClose={() => setDisplayFileUploadModal(false)}\n closeModalAndSetValue={closeModalAndSetValue}\n simpleLayout\n fileId={fileId}\n storeKey={file && file.storeKey}\n getSelectedFiles={() => { }}\n />\n </div>\n )}\n </>\n );\n};\n\nEditMediaFile.propTypes = {\n fileId: PropTypes.string.isRequired,\n onChange: PropTypes.func.isRequired,\n handleSaveButtonStatus: PropTypes.func.isRequired,\n showChangeButton: PropTypes.bool,\n fileUpdated: PropTypes.object\n};\n\nEditMediaFile.defaultProps = {\n showChangeButton: false,\n fileUpdated: null\n};\n\nexport default EditMediaFile;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import { withRouter } from 'react-router-dom';
|
|
3
|
+
import PropTypes from 'prop-types';
|
|
4
|
+
import Button from '@blaze-react/button';
|
|
5
|
+
import { useApolloClient } from '@apollo/client';
|
|
6
|
+
import { getQuery, getMutation } from '@blaze-cms/admin-ui-utils';
|
|
7
|
+
import { useToasts } from '@blaze-react/toaster';
|
|
8
|
+
import EditMediaFile from './EditMediaFile';
|
|
9
|
+
const EditMediaFilePage = ({
|
|
10
|
+
match,
|
|
11
|
+
history
|
|
12
|
+
}) => {
|
|
13
|
+
const [shouldEnableSaveButton, setShouldEnableSaveButton] = useState(false);
|
|
14
|
+
const [file, setFile] = useState(null);
|
|
15
|
+
const client = useApolloClient();
|
|
16
|
+
const {
|
|
17
|
+
addToast
|
|
18
|
+
} = useToasts();
|
|
19
|
+
const handleFileChange = values => setFile(values);
|
|
20
|
+
const handleSaveButtonStatus = value => {
|
|
21
|
+
setShouldEnableSaveButton(value);
|
|
22
|
+
};
|
|
23
|
+
const handleFormSave = async () => {
|
|
24
|
+
if (!file) {
|
|
25
|
+
addToast('No file data to update', {
|
|
26
|
+
appearance: 'error',
|
|
27
|
+
autoDismiss: true
|
|
28
|
+
});
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
31
|
+
try {
|
|
32
|
+
const inputData = {
|
|
33
|
+
id: file.id,
|
|
34
|
+
name: file.name,
|
|
35
|
+
data: file.data,
|
|
36
|
+
storeKey: file.storeKey
|
|
37
|
+
};
|
|
38
|
+
const {
|
|
39
|
+
data: {
|
|
40
|
+
updateFile: updatedFile
|
|
41
|
+
}
|
|
42
|
+
} = await client.mutate({
|
|
43
|
+
mutation: getMutation('UPDATE_FILE'),
|
|
44
|
+
variables: {
|
|
45
|
+
input: inputData
|
|
46
|
+
},
|
|
47
|
+
update(cache, {
|
|
48
|
+
data: {
|
|
49
|
+
updateFile: fileUpdated
|
|
50
|
+
}
|
|
51
|
+
}) {
|
|
52
|
+
try {
|
|
53
|
+
cache.writeQuery({
|
|
54
|
+
query: getQuery('GET_FILE_BY_ID'),
|
|
55
|
+
variables: {
|
|
56
|
+
id: match.params.fileId
|
|
57
|
+
},
|
|
58
|
+
data: {
|
|
59
|
+
file: fileUpdated.result
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
} catch (e) {
|
|
63
|
+
console.error(e); //eslint-disable-line
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
setFile(updatedFile.result);
|
|
68
|
+
addToast(`File: ${file.name} has been updated`, {
|
|
69
|
+
appearance: 'success',
|
|
70
|
+
autoDismiss: true
|
|
71
|
+
});
|
|
72
|
+
} catch (e) {
|
|
73
|
+
addToast(`File: ${file.name} has not been updated`, {
|
|
74
|
+
appearance: 'error',
|
|
75
|
+
autoDismiss: true
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
setShouldEnableSaveButton(false);
|
|
79
|
+
};
|
|
80
|
+
const pushBack = () => history.push('/media');
|
|
81
|
+
const buttonModifiers = shouldEnableSaveButton ? [] : ['disabled'];
|
|
82
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
83
|
+
className: "page"
|
|
84
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
85
|
+
className: "page__content"
|
|
86
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
87
|
+
className: "page__content__mediaWrapper"
|
|
88
|
+
}, /*#__PURE__*/React.createElement(EditMediaFile, {
|
|
89
|
+
onChange: handleFileChange,
|
|
90
|
+
fileId: match.params.fileId,
|
|
91
|
+
handleSaveButtonStatus: handleSaveButtonStatus,
|
|
92
|
+
handleFormSave: handleFormSave,
|
|
93
|
+
showChangeButton: true,
|
|
94
|
+
fileUpdated: file
|
|
95
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
96
|
+
className: "page__content__mediaWrapperActions"
|
|
97
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
98
|
+
onClick: pushBack
|
|
99
|
+
}, "Cancel"), /*#__PURE__*/React.createElement(Button, {
|
|
100
|
+
onClick: handleFormSave,
|
|
101
|
+
modifiers: buttonModifiers
|
|
102
|
+
}, "Apply")))));
|
|
103
|
+
};
|
|
104
|
+
EditMediaFilePage.propTypes = {
|
|
105
|
+
match: PropTypes.object.isRequired,
|
|
106
|
+
history: PropTypes.object.isRequired
|
|
107
|
+
};
|
|
108
|
+
export default withRouter(EditMediaFilePage);
|
|
109
|
+
//# sourceMappingURL=EditMediaFilePage.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EditMediaFilePage.js","names":["React","useState","withRouter","PropTypes","Button","useApolloClient","getQuery","getMutation","useToasts","EditMediaFile","EditMediaFilePage","match","history","shouldEnableSaveButton","setShouldEnableSaveButton","file","setFile","client","addToast","handleFileChange","values","handleSaveButtonStatus","value","handleFormSave","appearance","autoDismiss","inputData","id","name","data","storeKey","updateFile","updatedFile","mutate","mutation","variables","input","update","cache","fileUpdated","writeQuery","query","params","fileId","result","e","console","error","pushBack","push","buttonModifiers","createElement","className","onChange","showChangeButton","onClick","modifiers","propTypes","object","isRequired"],"sources":["../../../src/components/EditMediaFile/EditMediaFilePage.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { withRouter } from 'react-router-dom';\nimport PropTypes from 'prop-types';\nimport Button from '@blaze-react/button';\nimport { useApolloClient } from '@apollo/client';\nimport { getQuery, getMutation } from '@blaze-cms/admin-ui-utils';\nimport { useToasts } from '@blaze-react/toaster';\nimport EditMediaFile from './EditMediaFile';\n\nconst EditMediaFilePage = ({ match, history }) => {\n const [shouldEnableSaveButton, setShouldEnableSaveButton] = useState(false);\n const [file, setFile] = useState(null);\n const client = useApolloClient();\n const { addToast } = useToasts();\n\n const handleFileChange = values => setFile(values);\n\n const handleSaveButtonStatus = value => {\n setShouldEnableSaveButton(value);\n };\n\n const handleFormSave = async () => {\n if (!file) {\n addToast('No file data to update', {\n appearance: 'error',\n autoDismiss: true\n });\n return;\n }\n\n try {\n const inputData = {\n id: file.id,\n name: file.name,\n data: file.data,\n storeKey: file.storeKey\n };\n\n const {\n data: { updateFile: updatedFile }\n } = await client.mutate({\n mutation: getMutation('UPDATE_FILE'),\n variables: {\n input: inputData\n },\n update(cache, { data: { updateFile: fileUpdated } }) {\n try {\n cache.writeQuery({\n query: getQuery('GET_FILE_BY_ID'),\n variables: { id: match.params.fileId },\n data: { file: fileUpdated.result }\n });\n } catch (e) {\n console.error(e); //eslint-disable-line\n }\n }\n });\n\n setFile(updatedFile.result);\n\n addToast(`File: ${file.name} has been updated`, {\n appearance: 'success',\n autoDismiss: true\n });\n } catch (e) {\n addToast(`File: ${file.name} has not been updated`, {\n appearance: 'error',\n autoDismiss: true\n });\n }\n setShouldEnableSaveButton(false);\n };\n\n const pushBack = () => history.push('/media');\n\n const buttonModifiers = shouldEnableSaveButton ? [] : ['disabled'];\n\n return (\n <div className=\"page\">\n <div className=\"page__content\">\n <div className=\"page__content__mediaWrapper\">\n <EditMediaFile\n onChange={handleFileChange}\n fileId={match.params.fileId}\n handleSaveButtonStatus={handleSaveButtonStatus}\n handleFormSave={handleFormSave}\n showChangeButton\n fileUpdated={file}\n />\n <div className=\"page__content__mediaWrapperActions\">\n <Button onClick={pushBack}>Cancel</Button>\n <Button onClick={handleFormSave} modifiers={buttonModifiers}>\n Apply\n </Button>\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nEditMediaFilePage.propTypes = {\n match: PropTypes.object.isRequired,\n history: PropTypes.object.isRequired\n};\n\nexport default withRouter(EditMediaFilePage);\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["EditMediaFile"],"sources":["../../../src/components/EditMediaFile/index.js"],"sourcesContent":["import EditMediaFile from './EditMediaFile';\n\nexport default EditMediaFile;\n"],"mappings":"AAAA,OAAOA,aAAa,MAAM,iBAAiB;AAE3C,eAAeA,aAAa","ignoreList":[]}
|