@mirrormedia/lilith-draft-editor 1.1.0-alpha.3 → 1.1.0-alpha.5
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/lib/draft-js/buttons/annotation.js +22 -0
- package/lib/draft-js/buttons/audio.js +16 -3
- package/lib/draft-js/buttons/background-color.js +26 -0
- package/lib/draft-js/buttons/background-image.js +32 -13
- package/lib/draft-js/buttons/background-video.js +32 -13
- package/lib/draft-js/buttons/color-box.js +21 -5
- package/lib/draft-js/buttons/divider.js +12 -3
- package/lib/draft-js/buttons/embedded-code.js +16 -5
- package/lib/draft-js/buttons/enlarge.js +3 -0
- package/lib/draft-js/buttons/font-color.js +26 -0
- package/lib/draft-js/buttons/image.js +16 -5
- package/lib/draft-js/buttons/info-box.js +21 -5
- package/lib/draft-js/buttons/link.js +19 -0
- package/lib/draft-js/buttons/media.js +16 -3
- package/lib/draft-js/buttons/related-post.js +14 -3
- package/lib/draft-js/buttons/selector/align-selector.js +11 -2
- package/lib/draft-js/buttons/selector/audio-selector.js +33 -5
- package/lib/draft-js/buttons/selector/image-selector.js +50 -6
- package/lib/draft-js/buttons/selector/pagination.js +6 -2
- package/lib/draft-js/buttons/selector/post-selector.js +39 -6
- package/lib/draft-js/buttons/selector/search-box.js +9 -0
- package/lib/draft-js/buttons/selector/video-selector.js +33 -4
- package/lib/draft-js/buttons/side-index.js +31 -15
- package/lib/draft-js/buttons/slideshow.js +16 -7
- package/lib/draft-js/buttons/table.js +11 -5
- package/lib/draft-js/buttons/text-align.js +14 -0
- package/lib/draft-js/buttons/video.js +16 -3
- package/lib/draft-js/const.js +2 -0
- package/lib/draft-js/draft-converter/api-data-instance.js +14 -0
- package/lib/draft-js/draft-converter/atomic-block-processor.js +41 -12
- package/lib/draft-js/draft-converter/entities.js +0 -1
- package/lib/draft-js/draft-converter/index.js +29 -10
- package/lib/draft-js/draft-converter/inline-styles-processor.js +55 -22
- package/lib/draft-js/modifier.js +13 -5
- package/lib/index.js +4 -0
- package/lib/website/mirrormedia/block-renderer/background-image-block.js +14 -2
- package/lib/website/mirrormedia/block-renderer/background-video-block.js +14 -2
- package/lib/website/mirrormedia/block-renderer/color-box-block.js +14 -2
- package/lib/website/mirrormedia/block-renderer/embedded-code-block.js +12 -3
- package/lib/website/mirrormedia/block-renderer/info-box-block.js +14 -2
- package/lib/website/mirrormedia/block-renderer/side-index-block.js +13 -2
- package/lib/website/mirrormedia/block-renderer/slideshow-block.js +11 -4
- package/lib/website/mirrormedia/block-renderer/table-block.js +62 -28
- package/lib/website/mirrormedia/block-renderer-fn.js +30 -0
- package/lib/website/mirrormedia/draft-editor.js +106 -10
- package/lib/website/mirrormedia/entity-decorator.js +4 -0
- package/lib/website/mirrormedia/index.js +3 -0
- package/lib/website/mirrormedia/selector/align-selector.js +11 -2
- package/lib/website/mirrormedia/selector/audio-selector.js +33 -5
- package/lib/website/mirrormedia/selector/image-selector.js +49 -6
- package/lib/website/mirrormedia/selector/pagination.js +6 -2
- package/lib/website/mirrormedia/selector/post-selector.js +39 -6
- package/lib/website/mirrormedia/selector/search-box.js +9 -0
- package/lib/website/mirrormedia/selector/video-selector.js +32 -4
- package/lib/website/readr/block-renderer/background-image-block.js +14 -2
- package/lib/website/readr/block-renderer/background-video-block.js +14 -2
- package/lib/website/readr/block-renderer/color-box-block.js +14 -2
- package/lib/website/readr/block-renderer/info-box-block.js +14 -2
- package/lib/website/readr/block-renderer/side-index-block.js +13 -2
- package/lib/website/readr/block-renderer/table-block.js +62 -28
- package/lib/website/readr/block-renderer-fn.js +29 -1
- package/lib/website/readr/draft-editor.js +106 -10
- package/lib/website/readr/entity-decorator.js +4 -0
- package/lib/website/readr/index.js +3 -0
- package/lib/website/readr/selector/align-selector.js +11 -2
- package/lib/website/readr/selector/audio-selector.js +33 -17
- package/lib/website/readr/selector/image-selector.js +49 -6
- package/lib/website/readr/selector/pagination.js +6 -2
- package/lib/website/readr/selector/post-selector.js +39 -6
- package/lib/website/readr/selector/search-box.js +9 -0
- package/lib/website/readr/selector/video-selector.js +32 -4
- package/package.json +2 -2
|
@@ -4,15 +4,25 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.AudioSelector = AudioSelector;
|
|
7
|
+
|
|
7
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
8
10
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
|
+
|
|
9
12
|
var _modals = require("@keystone-ui/modals");
|
|
13
|
+
|
|
10
14
|
var _apollo = require("@keystone-6/core/admin-ui/apollo");
|
|
15
|
+
|
|
11
16
|
var _searchBox = require("./search-box");
|
|
17
|
+
|
|
12
18
|
var _pagination = require("./pagination");
|
|
19
|
+
|
|
13
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
|
+
|
|
14
22
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
23
|
+
|
|
15
24
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
25
|
+
|
|
16
26
|
const AudioSearchBox = (0, _styledComponents.default)(_searchBox.SearchBox)`
|
|
17
27
|
margin-top: 10px;
|
|
18
28
|
`;
|
|
@@ -59,6 +69,7 @@ const ErrorWrapper = _styledComponents.default.div`
|
|
|
59
69
|
margin: 0;
|
|
60
70
|
}
|
|
61
71
|
`;
|
|
72
|
+
|
|
62
73
|
function AudiosGrids(props) {
|
|
63
74
|
const {
|
|
64
75
|
audios,
|
|
@@ -74,14 +85,15 @@ function AudiosGrids(props) {
|
|
|
74
85
|
});
|
|
75
86
|
}));
|
|
76
87
|
}
|
|
88
|
+
|
|
77
89
|
function AudioGrid(props) {
|
|
78
90
|
var _audio$file;
|
|
91
|
+
|
|
79
92
|
const {
|
|
80
93
|
audio,
|
|
81
94
|
onSelect,
|
|
82
95
|
isSelected
|
|
83
96
|
} = props;
|
|
84
|
-
console.log('audio', audio);
|
|
85
97
|
return /*#__PURE__*/_react.default.createElement(AudioGridWrapper, {
|
|
86
98
|
key: audio === null || audio === void 0 ? void 0 : audio.id,
|
|
87
99
|
onClick: () => onSelect(audio)
|
|
@@ -95,20 +107,24 @@ function AudioGrid(props) {
|
|
|
95
107
|
src: audio === null || audio === void 0 ? void 0 : (_audio$file = audio.file) === null || _audio$file === void 0 ? void 0 : _audio$file.url
|
|
96
108
|
})), /*#__PURE__*/_react.default.createElement(AudioName, null, audio === null || audio === void 0 ? void 0 : audio.name));
|
|
97
109
|
}
|
|
110
|
+
|
|
98
111
|
function AudioMetaGrids(props) {
|
|
99
112
|
const {
|
|
100
113
|
audioMetas
|
|
101
114
|
} = props;
|
|
102
115
|
return /*#__PURE__*/_react.default.createElement(AudioMetaGridsWrapper, null, audioMetas.map(audioMeta => {
|
|
103
116
|
var _audioMeta$audio;
|
|
117
|
+
|
|
104
118
|
return /*#__PURE__*/_react.default.createElement(AudioMetaGrid, {
|
|
105
119
|
key: audioMeta === null || audioMeta === void 0 ? void 0 : (_audioMeta$audio = audioMeta.audio) === null || _audioMeta$audio === void 0 ? void 0 : _audioMeta$audio.id,
|
|
106
120
|
audioMeta: audioMeta
|
|
107
121
|
});
|
|
108
122
|
}));
|
|
109
123
|
}
|
|
124
|
+
|
|
110
125
|
function AudioMetaGrid(props) {
|
|
111
126
|
var _audio$file2;
|
|
127
|
+
|
|
112
128
|
const {
|
|
113
129
|
audioMeta
|
|
114
130
|
} = props;
|
|
@@ -123,6 +139,7 @@ function AudioMetaGrid(props) {
|
|
|
123
139
|
src: audio === null || audio === void 0 ? void 0 : (_audio$file2 = audio.file) === null || _audio$file2 === void 0 ? void 0 : _audio$file2.url
|
|
124
140
|
})), /*#__PURE__*/_react.default.createElement(AudioName, null, audio === null || audio === void 0 ? void 0 : audio.name));
|
|
125
141
|
}
|
|
142
|
+
|
|
126
143
|
const AudiosQuery = (0, _apollo.gql)`
|
|
127
144
|
query Audios($searchText: String!, $take: Int, $skip: Int) {
|
|
128
145
|
audioFilesCount(where: { name: { contains: $searchText } })
|
|
@@ -152,6 +169,7 @@ const AudiosQuery = (0, _apollo.gql)`
|
|
|
152
169
|
}
|
|
153
170
|
}
|
|
154
171
|
`;
|
|
172
|
+
|
|
155
173
|
function AudioSelector(props) {
|
|
156
174
|
const [queryAudios, {
|
|
157
175
|
loading,
|
|
@@ -164,40 +182,46 @@ function AudioSelector(props) {
|
|
|
164
182
|
fetchPolicy: 'no-cache'
|
|
165
183
|
});
|
|
166
184
|
const [currentPage, setCurrentPage] = (0, _react.useState)(0); // page starts with 1, 0 is used to detect initialization
|
|
185
|
+
|
|
167
186
|
const [searchText, setSearchText] = (0, _react.useState)('');
|
|
168
187
|
const [selected, setSelected] = (0, _react.useState)([]);
|
|
169
188
|
const pageSize = 6;
|
|
170
189
|
const {
|
|
171
190
|
onChange
|
|
172
191
|
} = props;
|
|
192
|
+
|
|
173
193
|
const onSave = () => {
|
|
174
194
|
onChange(selected);
|
|
175
195
|
};
|
|
196
|
+
|
|
176
197
|
const onCancel = () => {
|
|
177
198
|
onChange([]);
|
|
178
199
|
};
|
|
200
|
+
|
|
179
201
|
const onSearchBoxChange = async searchInput => {
|
|
180
202
|
setSearchText(searchInput);
|
|
181
203
|
setCurrentPage(1);
|
|
182
204
|
};
|
|
205
|
+
|
|
183
206
|
const onAudiosGridSelect = audioEntity => {
|
|
184
207
|
setSelected(selected => {
|
|
185
208
|
const filterdSelected = selected.filter(ele => {
|
|
186
209
|
var _ele$audio;
|
|
210
|
+
|
|
187
211
|
return ((_ele$audio = ele.audio) === null || _ele$audio === void 0 ? void 0 : _ele$audio.id) !== audioEntity.id;
|
|
188
|
-
});
|
|
212
|
+
}); // deselect the audio
|
|
189
213
|
|
|
190
|
-
// deselect the audio
|
|
191
214
|
if (filterdSelected.length !== selected.length) {
|
|
192
215
|
return filterdSelected;
|
|
193
|
-
}
|
|
216
|
+
} // single select
|
|
217
|
+
|
|
194
218
|
|
|
195
|
-
// single select
|
|
196
219
|
return [{
|
|
197
220
|
audio: audioEntity
|
|
198
221
|
}];
|
|
199
222
|
});
|
|
200
223
|
};
|
|
224
|
+
|
|
201
225
|
const selectedAudios = selected.map(ele => {
|
|
202
226
|
return ele.audio;
|
|
203
227
|
});
|
|
@@ -212,6 +236,7 @@ function AudioSelector(props) {
|
|
|
212
236
|
});
|
|
213
237
|
}
|
|
214
238
|
}, [currentPage, searchText]);
|
|
239
|
+
|
|
215
240
|
let searchResult = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(AudiosGrids, {
|
|
216
241
|
audios: audioFiles,
|
|
217
242
|
selected: selectedAudios,
|
|
@@ -224,12 +249,15 @@ function AudioSelector(props) {
|
|
|
224
249
|
setCurrentPage(pageIndex);
|
|
225
250
|
}
|
|
226
251
|
}));
|
|
252
|
+
|
|
227
253
|
if (loading) {
|
|
228
254
|
searchResult = /*#__PURE__*/_react.default.createElement("p", null, "searching...");
|
|
229
255
|
}
|
|
256
|
+
|
|
230
257
|
if (error) {
|
|
231
258
|
searchResult = /*#__PURE__*/_react.default.createElement(ErrorWrapper, null, /*#__PURE__*/_react.default.createElement("h3", null, "Errors occurs in the `audios` query"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Message:"), /*#__PURE__*/_react.default.createElement("div", null, error.message), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Stack:"), /*#__PURE__*/_react.default.createElement("div", null, error.stack), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Query:"), /*#__PURE__*/_react.default.createElement("pre", null, AudiosQuery.loc.source.body)));
|
|
232
259
|
}
|
|
260
|
+
|
|
233
261
|
return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
|
|
234
262
|
isOpen: true
|
|
235
263
|
}, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
|
|
@@ -4,18 +4,31 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.ImageSelector = ImageSelector;
|
|
7
|
+
|
|
7
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
8
10
|
var _debounce = _interopRequireDefault(require("lodash/debounce"));
|
|
11
|
+
|
|
9
12
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
13
|
+
|
|
10
14
|
var _fields = require("@keystone-ui/fields");
|
|
15
|
+
|
|
11
16
|
var _modals = require("@keystone-ui/modals");
|
|
17
|
+
|
|
12
18
|
var _apollo = require("@keystone-6/core/admin-ui/apollo");
|
|
19
|
+
|
|
13
20
|
var _alignSelector = require("./align-selector");
|
|
21
|
+
|
|
14
22
|
var _searchBox = require("./search-box");
|
|
23
|
+
|
|
15
24
|
var _pagination = require("./pagination");
|
|
25
|
+
|
|
16
26
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
27
|
+
|
|
17
28
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
29
|
+
|
|
18
30
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
31
|
+
|
|
19
32
|
const imagesQuery = (0, _apollo.gql)`
|
|
20
33
|
query Photos($searchText: String!, $take: Int, $skip: Int) {
|
|
21
34
|
photosCount(where: { name: { contains: $searchText } })
|
|
@@ -99,6 +112,7 @@ const ErrorWrapper = _styledComponents.default.div`
|
|
|
99
112
|
const ImageName = _styledComponents.default.p`
|
|
100
113
|
text-align: center;
|
|
101
114
|
`;
|
|
115
|
+
|
|
102
116
|
function ImageGrids(props) {
|
|
103
117
|
const {
|
|
104
118
|
images,
|
|
@@ -114,8 +128,10 @@ function ImageGrids(props) {
|
|
|
114
128
|
});
|
|
115
129
|
}));
|
|
116
130
|
}
|
|
131
|
+
|
|
117
132
|
function ImageGrid(props) {
|
|
118
133
|
var _image$resized;
|
|
134
|
+
|
|
119
135
|
const {
|
|
120
136
|
image,
|
|
121
137
|
onSelect,
|
|
@@ -130,10 +146,12 @@ function ImageGrid(props) {
|
|
|
130
146
|
src: image === null || image === void 0 ? void 0 : (_image$resized = image.resized) === null || _image$resized === void 0 ? void 0 : _image$resized.w800,
|
|
131
147
|
onError: e => {
|
|
132
148
|
var _image$imageFile;
|
|
149
|
+
|
|
133
150
|
return e.currentTarget.src = image === null || image === void 0 ? void 0 : (_image$imageFile = image.imageFile) === null || _image$imageFile === void 0 ? void 0 : _image$imageFile.url;
|
|
134
151
|
}
|
|
135
152
|
}));
|
|
136
153
|
}
|
|
154
|
+
|
|
137
155
|
function ImageMetaGrids(props) {
|
|
138
156
|
const {
|
|
139
157
|
imageMetas,
|
|
@@ -143,6 +161,7 @@ function ImageMetaGrids(props) {
|
|
|
143
161
|
} = props;
|
|
144
162
|
return /*#__PURE__*/_react.default.createElement(ImageMetaGridsWrapper, null, imageMetas.map(imageMeta => {
|
|
145
163
|
var _imageMeta$image;
|
|
164
|
+
|
|
146
165
|
return /*#__PURE__*/_react.default.createElement(ImageMetaGrid, {
|
|
147
166
|
key: imageMeta === null || imageMeta === void 0 ? void 0 : (_imageMeta$image = imageMeta.image) === null || _imageMeta$image === void 0 ? void 0 : _imageMeta$image.id,
|
|
148
167
|
imageMeta: imageMeta,
|
|
@@ -152,8 +171,10 @@ function ImageMetaGrids(props) {
|
|
|
152
171
|
});
|
|
153
172
|
}));
|
|
154
173
|
}
|
|
174
|
+
|
|
155
175
|
function ImageMetaGrid(props) {
|
|
156
176
|
var _image$resized2;
|
|
177
|
+
|
|
157
178
|
const {
|
|
158
179
|
imageMeta,
|
|
159
180
|
enableCaption,
|
|
@@ -169,6 +190,7 @@ function ImageMetaGrid(props) {
|
|
|
169
190
|
src: image === null || image === void 0 ? void 0 : (_image$resized2 = image.resized) === null || _image$resized2 === void 0 ? void 0 : _image$resized2.w800,
|
|
170
191
|
onError: e => {
|
|
171
192
|
var _image$imageFile2;
|
|
193
|
+
|
|
172
194
|
return e.currentTarget.src = image === null || image === void 0 ? void 0 : (_image$imageFile2 = image.imageFile) === null || _image$imageFile2 === void 0 ? void 0 : _image$imageFile2.url;
|
|
173
195
|
}
|
|
174
196
|
}), /*#__PURE__*/_react.default.createElement(ImageName, null, image === null || image === void 0 ? void 0 : image.name), enableCaption && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Label, {
|
|
@@ -201,6 +223,7 @@ function ImageMetaGrid(props) {
|
|
|
201
223
|
})
|
|
202
224
|
})));
|
|
203
225
|
}
|
|
226
|
+
|
|
204
227
|
function DelayInput(props) {
|
|
205
228
|
const {
|
|
206
229
|
delay,
|
|
@@ -217,6 +240,7 @@ function DelayInput(props) {
|
|
|
217
240
|
}
|
|
218
241
|
}));
|
|
219
242
|
}
|
|
243
|
+
|
|
220
244
|
function ImageSelector(props) {
|
|
221
245
|
const [queryImages, {
|
|
222
246
|
loading,
|
|
@@ -229,6 +253,7 @@ function ImageSelector(props) {
|
|
|
229
253
|
fetchPolicy: 'no-cache'
|
|
230
254
|
});
|
|
231
255
|
const [currentPage, setCurrentPage] = (0, _react.useState)(0); // page starts with 1, 0 is used to detect initialization
|
|
256
|
+
|
|
232
257
|
const [searchText, setSearchText] = (0, _react.useState)('');
|
|
233
258
|
const [selected, setSelected] = (0, _react.useState)([]);
|
|
234
259
|
const [delay, setDelay] = (0, _react.useState)('5');
|
|
@@ -256,70 +281,84 @@ function ImageSelector(props) {
|
|
|
256
281
|
enableDelay = false,
|
|
257
282
|
onChange
|
|
258
283
|
} = props;
|
|
284
|
+
|
|
259
285
|
const onSave = () => {
|
|
260
286
|
let adjustedDelay = +delay;
|
|
261
287
|
adjustedDelay = adjustedDelay < 1 ? 1 : adjustedDelay;
|
|
262
288
|
onChange(selected, align, adjustedDelay);
|
|
263
289
|
};
|
|
290
|
+
|
|
264
291
|
const onCancel = () => {
|
|
265
292
|
onChange([]);
|
|
266
293
|
};
|
|
294
|
+
|
|
267
295
|
const onSearchBoxChange = async searchInput => {
|
|
268
296
|
setSearchText(searchInput);
|
|
269
297
|
setCurrentPage(1);
|
|
270
298
|
};
|
|
299
|
+
|
|
271
300
|
const onDealyChange = delay => {
|
|
272
301
|
setDelay(delay);
|
|
273
302
|
};
|
|
303
|
+
|
|
274
304
|
const onAlignSelectChange = align => {
|
|
275
305
|
setAlign(align);
|
|
276
306
|
};
|
|
307
|
+
|
|
277
308
|
const onAlignSelectOpen = () => {
|
|
278
309
|
var _contentWrapperRef$cu;
|
|
310
|
+
|
|
279
311
|
const scrollWrapper = (_contentWrapperRef$cu = contentWrapperRef.current) === null || _contentWrapperRef$cu === void 0 ? void 0 : _contentWrapperRef$cu.parentElement;
|
|
280
312
|
scrollWrapper.scrollTop = scrollWrapper.scrollHeight;
|
|
281
313
|
};
|
|
314
|
+
|
|
282
315
|
const onImageMetaChange = imageEntityWithMeta => {
|
|
283
316
|
if (enableMultiSelect) {
|
|
284
317
|
const foundIndex = selected.findIndex(ele => {
|
|
285
318
|
var _ele$image, _imageEntityWithMeta$;
|
|
319
|
+
|
|
286
320
|
return (ele === null || ele === void 0 ? void 0 : (_ele$image = ele.image) === null || _ele$image === void 0 ? void 0 : _ele$image.id) === (imageEntityWithMeta === null || imageEntityWithMeta === void 0 ? void 0 : (_imageEntityWithMeta$ = imageEntityWithMeta.image) === null || _imageEntityWithMeta$ === void 0 ? void 0 : _imageEntityWithMeta$.id);
|
|
287
321
|
});
|
|
322
|
+
|
|
288
323
|
if (foundIndex !== -1) {
|
|
289
324
|
selected[foundIndex] = imageEntityWithMeta;
|
|
290
325
|
setSelected(selected);
|
|
291
326
|
}
|
|
327
|
+
|
|
292
328
|
return;
|
|
293
329
|
}
|
|
330
|
+
|
|
294
331
|
setSelected([imageEntityWithMeta]);
|
|
295
332
|
};
|
|
333
|
+
|
|
296
334
|
const onImagesGridSelect = imageEntity => {
|
|
297
335
|
setSelected(selected => {
|
|
298
336
|
const filterdSelected = selected.filter(ele => {
|
|
299
337
|
var _ele$image2;
|
|
338
|
+
|
|
300
339
|
return ((_ele$image2 = ele.image) === null || _ele$image2 === void 0 ? void 0 : _ele$image2.id) !== imageEntity.id;
|
|
301
|
-
});
|
|
340
|
+
}); // deselect the image
|
|
302
341
|
|
|
303
|
-
// deselect the image
|
|
304
342
|
if (filterdSelected.length !== selected.length) {
|
|
305
343
|
return filterdSelected;
|
|
306
|
-
}
|
|
344
|
+
} // add new selected one
|
|
345
|
+
|
|
307
346
|
|
|
308
|
-
// add new selected one
|
|
309
347
|
if (enableMultiSelect) {
|
|
310
348
|
return selected.concat([{
|
|
311
349
|
image: imageEntity,
|
|
312
350
|
desc: ''
|
|
313
351
|
}]);
|
|
314
|
-
}
|
|
352
|
+
} // single select
|
|
353
|
+
|
|
315
354
|
|
|
316
|
-
// single select
|
|
317
355
|
return [{
|
|
318
356
|
image: imageEntity,
|
|
319
357
|
desc: ''
|
|
320
358
|
}];
|
|
321
359
|
});
|
|
322
360
|
};
|
|
361
|
+
|
|
323
362
|
const selectedImages = selected.map(ele => {
|
|
324
363
|
return ele.image;
|
|
325
364
|
});
|
|
@@ -334,6 +373,7 @@ function ImageSelector(props) {
|
|
|
334
373
|
});
|
|
335
374
|
}
|
|
336
375
|
}, [currentPage, searchText]);
|
|
376
|
+
|
|
337
377
|
let searchResult = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ImageGrids, {
|
|
338
378
|
images: images,
|
|
339
379
|
selected: selectedImages,
|
|
@@ -346,12 +386,15 @@ function ImageSelector(props) {
|
|
|
346
386
|
setCurrentPage(pageIndex);
|
|
347
387
|
}
|
|
348
388
|
}));
|
|
389
|
+
|
|
349
390
|
if (loading) {
|
|
350
391
|
searchResult = /*#__PURE__*/_react.default.createElement("p", null, "searching...");
|
|
351
392
|
}
|
|
393
|
+
|
|
352
394
|
if (error) {
|
|
353
395
|
searchResult = /*#__PURE__*/_react.default.createElement(ErrorWrapper, null, /*#__PURE__*/_react.default.createElement("h3", null, "Errors occurs in the `images` query"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Message:"), /*#__PURE__*/_react.default.createElement("div", null, error.message), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Stack:"), /*#__PURE__*/_react.default.createElement("div", null, error.stack), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Query:"), /*#__PURE__*/_react.default.createElement("pre", null, imagesQuery.loc.source.body)));
|
|
354
396
|
}
|
|
397
|
+
|
|
355
398
|
return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
|
|
356
399
|
isOpen: true
|
|
357
400
|
}, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
|
|
@@ -4,9 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.Pagination = Pagination;
|
|
7
|
+
|
|
7
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
8
10
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
|
+
|
|
9
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
+
|
|
10
14
|
const PaginationWrapper = _styledComponents.default.div`
|
|
11
15
|
display: flex;
|
|
12
16
|
justify-content: end;
|
|
@@ -29,6 +33,7 @@ const ArrowButtonWrapper = _styledComponents.default.a`
|
|
|
29
33
|
}
|
|
30
34
|
}}
|
|
31
35
|
`;
|
|
36
|
+
|
|
32
37
|
function Pagination({
|
|
33
38
|
currentPage,
|
|
34
39
|
total,
|
|
@@ -38,9 +43,8 @@ function Pagination({
|
|
|
38
43
|
const minPage = 1;
|
|
39
44
|
const limit = Math.ceil(total / pageSize);
|
|
40
45
|
const nextPage = currentPage + 1;
|
|
41
|
-
const prevPage = currentPage - 1;
|
|
46
|
+
const prevPage = currentPage - 1; // Don't render the pagiantion component if the pageSize is greater than the total number of items in the list.
|
|
42
47
|
|
|
43
|
-
// Don't render the pagiantion component if the pageSize is greater than the total number of items in the list.
|
|
44
48
|
if (total <= pageSize) return null;
|
|
45
49
|
return /*#__PURE__*/_react.default.createElement(PaginationWrapper, null, /*#__PURE__*/_react.default.createElement("div", null, currentPage, " of ", limit, " pages"), /*#__PURE__*/_react.default.createElement(Arrows, null, /*#__PURE__*/_react.default.createElement(ArrowButtonWrapper, {
|
|
46
50
|
onClick: () => {
|
|
@@ -4,15 +4,25 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.PostSelector = PostSelector;
|
|
7
|
+
|
|
7
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
8
10
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
|
+
|
|
9
12
|
var _modals = require("@keystone-ui/modals");
|
|
13
|
+
|
|
10
14
|
var _apollo = require("@keystone-6/core/admin-ui/apollo");
|
|
15
|
+
|
|
11
16
|
var _searchBox = require("./search-box");
|
|
17
|
+
|
|
12
18
|
var _pagination = require("./pagination");
|
|
19
|
+
|
|
13
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
|
+
|
|
14
22
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
23
|
+
|
|
15
24
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
25
|
+
|
|
16
26
|
const postsQuery = (0, _apollo.gql)`
|
|
17
27
|
query Posts($searchText: String!, $take: Int, $skip: Int) {
|
|
18
28
|
postsCount(where: { title: { contains: $searchText } })
|
|
@@ -103,6 +113,7 @@ const ErrorWrapper = _styledComponents.default.div`
|
|
|
103
113
|
margin: 0;
|
|
104
114
|
}
|
|
105
115
|
`;
|
|
116
|
+
|
|
106
117
|
function PostGrids(props) {
|
|
107
118
|
const {
|
|
108
119
|
posts,
|
|
@@ -118,8 +129,10 @@ function PostGrids(props) {
|
|
|
118
129
|
});
|
|
119
130
|
}));
|
|
120
131
|
}
|
|
132
|
+
|
|
121
133
|
function PostGrid(props) {
|
|
122
134
|
var _post$heroImage, _post$heroImage$resiz;
|
|
135
|
+
|
|
123
136
|
const {
|
|
124
137
|
post,
|
|
125
138
|
onSelect,
|
|
@@ -134,24 +147,29 @@ function PostGrid(props) {
|
|
|
134
147
|
src: (_post$heroImage = post.heroImage) === null || _post$heroImage === void 0 ? void 0 : (_post$heroImage$resiz = _post$heroImage.resized) === null || _post$heroImage$resiz === void 0 ? void 0 : _post$heroImage$resiz.original,
|
|
135
148
|
onError: e => {
|
|
136
149
|
var _post$heroImage2, _post$heroImage2$imag;
|
|
150
|
+
|
|
137
151
|
return e.currentTarget.src = (_post$heroImage2 = post.heroImage) === null || _post$heroImage2 === void 0 ? void 0 : (_post$heroImage2$imag = _post$heroImage2.imageFile) === null || _post$heroImage2$imag === void 0 ? void 0 : _post$heroImage2$imag.url;
|
|
138
152
|
}
|
|
139
153
|
}), /*#__PURE__*/_react.default.createElement(PostTitle, null, post.title)));
|
|
140
154
|
}
|
|
155
|
+
|
|
141
156
|
function PostMetaGrids(props) {
|
|
142
157
|
const {
|
|
143
158
|
postMetas
|
|
144
159
|
} = props;
|
|
145
160
|
return /*#__PURE__*/_react.default.createElement(PostMetaGridsWrapper, null, postMetas.map(postMetas => {
|
|
146
161
|
var _postMetas$post;
|
|
162
|
+
|
|
147
163
|
return /*#__PURE__*/_react.default.createElement(PostMetaGrid, {
|
|
148
164
|
key: postMetas === null || postMetas === void 0 ? void 0 : (_postMetas$post = postMetas.post) === null || _postMetas$post === void 0 ? void 0 : _postMetas$post.id,
|
|
149
165
|
postMeta: postMetas
|
|
150
166
|
});
|
|
151
167
|
}));
|
|
152
168
|
}
|
|
169
|
+
|
|
153
170
|
function PostMetaGrid(props) {
|
|
154
171
|
var _post$heroImage3, _post$heroImage3$resi;
|
|
172
|
+
|
|
155
173
|
const {
|
|
156
174
|
postMeta
|
|
157
175
|
} = props;
|
|
@@ -162,10 +180,12 @@ function PostMetaGrid(props) {
|
|
|
162
180
|
src: post === null || post === void 0 ? void 0 : (_post$heroImage3 = post.heroImage) === null || _post$heroImage3 === void 0 ? void 0 : (_post$heroImage3$resi = _post$heroImage3.resized) === null || _post$heroImage3$resi === void 0 ? void 0 : _post$heroImage3$resi.original,
|
|
163
181
|
onError: e => {
|
|
164
182
|
var _post$heroImage4, _post$heroImage4$imag;
|
|
183
|
+
|
|
165
184
|
return e.currentTarget.src = post === null || post === void 0 ? void 0 : (_post$heroImage4 = post.heroImage) === null || _post$heroImage4 === void 0 ? void 0 : (_post$heroImage4$imag = _post$heroImage4.imageFile) === null || _post$heroImage4$imag === void 0 ? void 0 : _post$heroImage4$imag.url;
|
|
166
185
|
}
|
|
167
186
|
}), /*#__PURE__*/_react.default.createElement(PostTitle, null, post === null || post === void 0 ? void 0 : post.name)));
|
|
168
187
|
}
|
|
188
|
+
|
|
169
189
|
function PostSelector(props) {
|
|
170
190
|
const [queryPosts, {
|
|
171
191
|
loading,
|
|
@@ -178,6 +198,7 @@ function PostSelector(props) {
|
|
|
178
198
|
fetchPolicy: 'no-cache'
|
|
179
199
|
});
|
|
180
200
|
const [currentPage, setCurrentPage] = (0, _react.useState)(0); // page starts with 1, 0 is used to detect initialization
|
|
201
|
+
|
|
181
202
|
const [searchText, setSearchText] = (0, _react.useState)('');
|
|
182
203
|
const [selected, setSelected] = (0, _react.useState)([]);
|
|
183
204
|
const [showErrorHint, setShowErrorHint] = (0, _react.useState)(false);
|
|
@@ -188,49 +209,57 @@ function PostSelector(props) {
|
|
|
188
209
|
minSelectCount = 1,
|
|
189
210
|
maxSelectCount = 3
|
|
190
211
|
} = props;
|
|
212
|
+
|
|
191
213
|
const onSave = () => {
|
|
192
214
|
if (enableMultiSelect && minSelectCount && selected.length < minSelectCount) {
|
|
193
215
|
setShowErrorHint(true);
|
|
194
216
|
return;
|
|
195
217
|
}
|
|
218
|
+
|
|
196
219
|
onChange(selected);
|
|
197
220
|
};
|
|
221
|
+
|
|
198
222
|
const onCancel = () => {
|
|
199
223
|
onChange([]);
|
|
200
224
|
};
|
|
225
|
+
|
|
201
226
|
const onSearchBoxChange = async searchInput => {
|
|
202
227
|
setSearchText(searchInput);
|
|
203
228
|
setCurrentPage(1);
|
|
204
229
|
};
|
|
230
|
+
|
|
205
231
|
const onPostsGridSelect = postEntity => {
|
|
206
232
|
setSelected(selected => {
|
|
207
233
|
const filterdSelected = selected.filter(ele => {
|
|
208
234
|
var _ele$post;
|
|
235
|
+
|
|
209
236
|
return ((_ele$post = ele.post) === null || _ele$post === void 0 ? void 0 : _ele$post.id) !== postEntity.id;
|
|
210
|
-
});
|
|
237
|
+
}); // deselect the post
|
|
211
238
|
|
|
212
|
-
// deselect the post
|
|
213
239
|
if (filterdSelected.length !== selected.length) {
|
|
214
240
|
return filterdSelected;
|
|
215
|
-
}
|
|
241
|
+
} // add new selected one and check shrink the array if there is a limit
|
|
242
|
+
|
|
216
243
|
|
|
217
|
-
// add new selected one and check shrink the array if there is a limit
|
|
218
244
|
if (enableMultiSelect) {
|
|
219
245
|
let newSelected = selected.concat([{
|
|
220
246
|
post: postEntity
|
|
221
247
|
}]);
|
|
248
|
+
|
|
222
249
|
if (maxSelectCount && newSelected.length >= maxSelectCount) {
|
|
223
250
|
newSelected = newSelected.slice(-maxSelectCount);
|
|
224
251
|
}
|
|
252
|
+
|
|
225
253
|
return newSelected;
|
|
226
|
-
}
|
|
254
|
+
} // single select
|
|
255
|
+
|
|
227
256
|
|
|
228
|
-
// single select
|
|
229
257
|
return [{
|
|
230
258
|
post: postEntity
|
|
231
259
|
}];
|
|
232
260
|
});
|
|
233
261
|
};
|
|
262
|
+
|
|
234
263
|
const selectedPosts = selected.map(ele => {
|
|
235
264
|
return ele.post;
|
|
236
265
|
});
|
|
@@ -245,6 +274,7 @@ function PostSelector(props) {
|
|
|
245
274
|
});
|
|
246
275
|
}
|
|
247
276
|
}, [currentPage, searchText]);
|
|
277
|
+
|
|
248
278
|
let searchResult = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(PostGrids, {
|
|
249
279
|
posts: posts,
|
|
250
280
|
selected: selectedPosts,
|
|
@@ -257,12 +287,15 @@ function PostSelector(props) {
|
|
|
257
287
|
setCurrentPage(pageIndex);
|
|
258
288
|
}
|
|
259
289
|
}));
|
|
290
|
+
|
|
260
291
|
if (loading) {
|
|
261
292
|
searchResult = /*#__PURE__*/_react.default.createElement("p", null, "searching...");
|
|
262
293
|
}
|
|
294
|
+
|
|
263
295
|
if (error) {
|
|
264
296
|
searchResult = /*#__PURE__*/_react.default.createElement(ErrorWrapper, null, /*#__PURE__*/_react.default.createElement("h3", null, "Errors occurs in the `posts` query"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Message:"), /*#__PURE__*/_react.default.createElement("div", null, error.message), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Stack:"), /*#__PURE__*/_react.default.createElement("div", null, error.stack), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("b", null, "Query:"), /*#__PURE__*/_react.default.createElement("pre", null, postsQuery.loc.source.body)));
|
|
265
297
|
}
|
|
298
|
+
|
|
266
299
|
return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
|
|
267
300
|
isOpen: true
|
|
268
301
|
}, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
|
|
@@ -4,16 +4,25 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.SearchBox = SearchBox;
|
|
7
|
+
|
|
7
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
8
10
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
11
|
+
|
|
9
12
|
var _button = require("@keystone-ui/button");
|
|
13
|
+
|
|
10
14
|
var _fields = require("@keystone-ui/fields");
|
|
15
|
+
|
|
11
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
+
|
|
12
18
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
19
|
+
|
|
13
20
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
21
|
+
|
|
14
22
|
const SearchBoxWrapper = _styledComponents.default.div`
|
|
15
23
|
display: flex;
|
|
16
24
|
`;
|
|
25
|
+
|
|
17
26
|
function SearchBox(props) {
|
|
18
27
|
const {
|
|
19
28
|
onChange,
|