@mirrormedia/lilith-draft-editor 1.1.0-alpha.3 → 1.1.0-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (72) hide show
  1. package/lib/draft-js/buttons/annotation.js +22 -0
  2. package/lib/draft-js/buttons/audio.js +16 -3
  3. package/lib/draft-js/buttons/background-color.js +26 -0
  4. package/lib/draft-js/buttons/background-image.js +32 -13
  5. package/lib/draft-js/buttons/background-video.js +32 -13
  6. package/lib/draft-js/buttons/color-box.js +21 -5
  7. package/lib/draft-js/buttons/divider.js +12 -3
  8. package/lib/draft-js/buttons/embedded-code.js +16 -5
  9. package/lib/draft-js/buttons/enlarge.js +3 -0
  10. package/lib/draft-js/buttons/font-color.js +26 -0
  11. package/lib/draft-js/buttons/image.js +16 -5
  12. package/lib/draft-js/buttons/info-box.js +21 -5
  13. package/lib/draft-js/buttons/link.js +19 -0
  14. package/lib/draft-js/buttons/media.js +16 -3
  15. package/lib/draft-js/buttons/related-post.js +14 -3
  16. package/lib/draft-js/buttons/selector/align-selector.js +11 -2
  17. package/lib/draft-js/buttons/selector/audio-selector.js +33 -4
  18. package/lib/draft-js/buttons/selector/image-selector.js +50 -6
  19. package/lib/draft-js/buttons/selector/pagination.js +6 -2
  20. package/lib/draft-js/buttons/selector/post-selector.js +39 -6
  21. package/lib/draft-js/buttons/selector/search-box.js +9 -0
  22. package/lib/draft-js/buttons/selector/video-selector.js +33 -4
  23. package/lib/draft-js/buttons/side-index.js +31 -15
  24. package/lib/draft-js/buttons/slideshow.js +16 -7
  25. package/lib/draft-js/buttons/table.js +11 -5
  26. package/lib/draft-js/buttons/text-align.js +14 -0
  27. package/lib/draft-js/buttons/video.js +16 -3
  28. package/lib/draft-js/const.js +2 -0
  29. package/lib/draft-js/draft-converter/api-data-instance.js +14 -0
  30. package/lib/draft-js/draft-converter/atomic-block-processor.js +41 -12
  31. package/lib/draft-js/draft-converter/entities.js +0 -1
  32. package/lib/draft-js/draft-converter/index.js +29 -10
  33. package/lib/draft-js/draft-converter/inline-styles-processor.js +55 -22
  34. package/lib/draft-js/modifier.js +13 -5
  35. package/lib/index.js +4 -0
  36. package/lib/website/mirrormedia/block-renderer/background-image-block.js +14 -2
  37. package/lib/website/mirrormedia/block-renderer/background-video-block.js +14 -2
  38. package/lib/website/mirrormedia/block-renderer/color-box-block.js +14 -2
  39. package/lib/website/mirrormedia/block-renderer/embedded-code-block.js +12 -3
  40. package/lib/website/mirrormedia/block-renderer/info-box-block.js +14 -2
  41. package/lib/website/mirrormedia/block-renderer/side-index-block.js +13 -2
  42. package/lib/website/mirrormedia/block-renderer/slideshow-block.js +11 -4
  43. package/lib/website/mirrormedia/block-renderer/table-block.js +62 -28
  44. package/lib/website/mirrormedia/block-renderer-fn.js +30 -0
  45. package/lib/website/mirrormedia/draft-editor.js +106 -10
  46. package/lib/website/mirrormedia/entity-decorator.js +4 -0
  47. package/lib/website/mirrormedia/index.js +3 -0
  48. package/lib/website/mirrormedia/selector/align-selector.js +11 -2
  49. package/lib/website/mirrormedia/selector/audio-selector.js +33 -4
  50. package/lib/website/mirrormedia/selector/image-selector.js +49 -6
  51. package/lib/website/mirrormedia/selector/pagination.js +6 -2
  52. package/lib/website/mirrormedia/selector/post-selector.js +39 -6
  53. package/lib/website/mirrormedia/selector/search-box.js +9 -0
  54. package/lib/website/mirrormedia/selector/video-selector.js +32 -4
  55. package/lib/website/readr/block-renderer/background-image-block.js +14 -2
  56. package/lib/website/readr/block-renderer/background-video-block.js +14 -2
  57. package/lib/website/readr/block-renderer/color-box-block.js +14 -2
  58. package/lib/website/readr/block-renderer/info-box-block.js +14 -2
  59. package/lib/website/readr/block-renderer/side-index-block.js +13 -2
  60. package/lib/website/readr/block-renderer/table-block.js +62 -28
  61. package/lib/website/readr/block-renderer-fn.js +28 -0
  62. package/lib/website/readr/draft-editor.js +106 -10
  63. package/lib/website/readr/entity-decorator.js +4 -0
  64. package/lib/website/readr/index.js +3 -0
  65. package/lib/website/readr/selector/align-selector.js +11 -2
  66. package/lib/website/readr/selector/audio-selector.js +33 -16
  67. package/lib/website/readr/selector/image-selector.js +49 -6
  68. package/lib/website/readr/selector/pagination.js +6 -2
  69. package/lib/website/readr/selector/post-selector.js +39 -6
  70. package/lib/website/readr/selector/search-box.js +9 -0
  71. package/lib/website/readr/selector/video-selector.js +32 -4
  72. 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,8 +85,10 @@ 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,
@@ -95,20 +108,24 @@ function AudioGrid(props) {
95
108
  src: audio === null || audio === void 0 ? void 0 : (_audio$file = audio.file) === null || _audio$file === void 0 ? void 0 : _audio$file.url
96
109
  })), /*#__PURE__*/_react.default.createElement(AudioName, null, audio === null || audio === void 0 ? void 0 : audio.name));
97
110
  }
111
+
98
112
  function AudioMetaGrids(props) {
99
113
  const {
100
114
  audioMetas
101
115
  } = props;
102
116
  return /*#__PURE__*/_react.default.createElement(AudioMetaGridsWrapper, null, audioMetas.map(audioMeta => {
103
117
  var _audioMeta$audio;
118
+
104
119
  return /*#__PURE__*/_react.default.createElement(AudioMetaGrid, {
105
120
  key: audioMeta === null || audioMeta === void 0 ? void 0 : (_audioMeta$audio = audioMeta.audio) === null || _audioMeta$audio === void 0 ? void 0 : _audioMeta$audio.id,
106
121
  audioMeta: audioMeta
107
122
  });
108
123
  }));
109
124
  }
125
+
110
126
  function AudioMetaGrid(props) {
111
127
  var _audio$file2;
128
+
112
129
  const {
113
130
  audioMeta
114
131
  } = props;
@@ -123,6 +140,7 @@ function AudioMetaGrid(props) {
123
140
  src: audio === null || audio === void 0 ? void 0 : (_audio$file2 = audio.file) === null || _audio$file2 === void 0 ? void 0 : _audio$file2.url
124
141
  })), /*#__PURE__*/_react.default.createElement(AudioName, null, audio === null || audio === void 0 ? void 0 : audio.name));
125
142
  }
143
+
126
144
  const AudiosQuery = (0, _apollo.gql)`
127
145
  query Audios($searchText: String!, $take: Int, $skip: Int) {
128
146
  audioFilesCount(where: { name: { contains: $searchText } })
@@ -137,21 +155,10 @@ const AudiosQuery = (0, _apollo.gql)`
137
155
  file {
138
156
  url
139
157
  }
140
- heroImage {
141
- imageFile {
142
- url
143
- }
144
- resized {
145
- w480
146
- w800
147
- w1200
148
- w1600
149
- w2400
150
- }
151
- }
152
158
  }
153
159
  }
154
160
  `;
161
+
155
162
  function AudioSelector(props) {
156
163
  const [queryAudios, {
157
164
  loading,
@@ -164,40 +171,46 @@ function AudioSelector(props) {
164
171
  fetchPolicy: 'no-cache'
165
172
  });
166
173
  const [currentPage, setCurrentPage] = (0, _react.useState)(0); // page starts with 1, 0 is used to detect initialization
174
+
167
175
  const [searchText, setSearchText] = (0, _react.useState)('');
168
176
  const [selected, setSelected] = (0, _react.useState)([]);
169
177
  const pageSize = 6;
170
178
  const {
171
179
  onChange
172
180
  } = props;
181
+
173
182
  const onSave = () => {
174
183
  onChange(selected);
175
184
  };
185
+
176
186
  const onCancel = () => {
177
187
  onChange([]);
178
188
  };
189
+
179
190
  const onSearchBoxChange = async searchInput => {
180
191
  setSearchText(searchInput);
181
192
  setCurrentPage(1);
182
193
  };
194
+
183
195
  const onAudiosGridSelect = audioEntity => {
184
196
  setSelected(selected => {
185
197
  const filterdSelected = selected.filter(ele => {
186
198
  var _ele$audio;
199
+
187
200
  return ((_ele$audio = ele.audio) === null || _ele$audio === void 0 ? void 0 : _ele$audio.id) !== audioEntity.id;
188
- });
201
+ }); // deselect the audio
189
202
 
190
- // deselect the audio
191
203
  if (filterdSelected.length !== selected.length) {
192
204
  return filterdSelected;
193
- }
205
+ } // single select
206
+
194
207
 
195
- // single select
196
208
  return [{
197
209
  audio: audioEntity
198
210
  }];
199
211
  });
200
212
  };
213
+
201
214
  const selectedAudios = selected.map(ele => {
202
215
  return ele.audio;
203
216
  });
@@ -212,6 +225,7 @@ function AudioSelector(props) {
212
225
  });
213
226
  }
214
227
  }, [currentPage, searchText]);
228
+
215
229
  let searchResult = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(AudiosGrids, {
216
230
  audios: audioFiles,
217
231
  selected: selectedAudios,
@@ -224,12 +238,15 @@ function AudioSelector(props) {
224
238
  setCurrentPage(pageIndex);
225
239
  }
226
240
  }));
241
+
227
242
  if (loading) {
228
243
  searchResult = /*#__PURE__*/_react.default.createElement("p", null, "searching...");
229
244
  }
245
+
230
246
  if (error) {
231
247
  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
248
  }
249
+
233
250
  return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
234
251
  isOpen: true
235
252
  }, /*#__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: { name: { 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.name)));
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,