@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 } })
@@ -152,6 +170,7 @@ const AudiosQuery = (0, _apollo.gql)`
152
170
  }
153
171
  }
154
172
  `;
173
+
155
174
  function AudioSelector(props) {
156
175
  const [queryAudios, {
157
176
  loading,
@@ -164,40 +183,46 @@ function AudioSelector(props) {
164
183
  fetchPolicy: 'no-cache'
165
184
  });
166
185
  const [currentPage, setCurrentPage] = (0, _react.useState)(0); // page starts with 1, 0 is used to detect initialization
186
+
167
187
  const [searchText, setSearchText] = (0, _react.useState)('');
168
188
  const [selected, setSelected] = (0, _react.useState)([]);
169
189
  const pageSize = 6;
170
190
  const {
171
191
  onChange
172
192
  } = props;
193
+
173
194
  const onSave = () => {
174
195
  onChange(selected);
175
196
  };
197
+
176
198
  const onCancel = () => {
177
199
  onChange([]);
178
200
  };
201
+
179
202
  const onSearchBoxChange = async searchInput => {
180
203
  setSearchText(searchInput);
181
204
  setCurrentPage(1);
182
205
  };
206
+
183
207
  const onAudiosGridSelect = audioEntity => {
184
208
  setSelected(selected => {
185
209
  const filterdSelected = selected.filter(ele => {
186
210
  var _ele$audio;
211
+
187
212
  return ((_ele$audio = ele.audio) === null || _ele$audio === void 0 ? void 0 : _ele$audio.id) !== audioEntity.id;
188
- });
213
+ }); // deselect the audio
189
214
 
190
- // deselect the audio
191
215
  if (filterdSelected.length !== selected.length) {
192
216
  return filterdSelected;
193
- }
217
+ } // single select
218
+
194
219
 
195
- // single select
196
220
  return [{
197
221
  audio: audioEntity
198
222
  }];
199
223
  });
200
224
  };
225
+
201
226
  const selectedAudios = selected.map(ele => {
202
227
  return ele.audio;
203
228
  });
@@ -212,6 +237,7 @@ function AudioSelector(props) {
212
237
  });
213
238
  }
214
239
  }, [currentPage, searchText]);
240
+
215
241
  let searchResult = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(AudiosGrids, {
216
242
  audios: audioFiles,
217
243
  selected: selectedAudios,
@@ -224,12 +250,15 @@ function AudioSelector(props) {
224
250
  setCurrentPage(pageIndex);
225
251
  }
226
252
  }));
253
+
227
254
  if (loading) {
228
255
  searchResult = /*#__PURE__*/_react.default.createElement("p", null, "searching...");
229
256
  }
257
+
230
258
  if (error) {
231
259
  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
260
  }
261
+
233
262
  return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
234
263
  isOpen: true
235
264
  }, /*#__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 _ = {
20
33
  debounce: _debounce.default
21
34
  };
@@ -72,6 +85,7 @@ const ErrorWrapper = _styledComponents.default.div`
72
85
  margin: 0;
73
86
  }
74
87
  `;
88
+
75
89
  function ImageGrids(props) {
76
90
  const {
77
91
  images,
@@ -87,8 +101,10 @@ function ImageGrids(props) {
87
101
  });
88
102
  }));
89
103
  }
104
+
90
105
  function ImageGrid(props) {
91
106
  var _image$resized;
107
+
92
108
  const {
93
109
  image,
94
110
  onSelect,
@@ -103,10 +119,12 @@ function ImageGrid(props) {
103
119
  src: image === null || image === void 0 ? void 0 : (_image$resized = image.resized) === null || _image$resized === void 0 ? void 0 : _image$resized.w800,
104
120
  onError: e => {
105
121
  var _image$imageFile;
122
+
106
123
  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;
107
124
  }
108
125
  }));
109
126
  }
127
+
110
128
  function ImageMetaGrids(props) {
111
129
  const {
112
130
  imageMetas,
@@ -116,6 +134,7 @@ function ImageMetaGrids(props) {
116
134
  } = props;
117
135
  return /*#__PURE__*/_react.default.createElement(ImageMetaGridsWrapper, null, imageMetas.map(imageMeta => {
118
136
  var _imageMeta$image;
137
+
119
138
  return /*#__PURE__*/_react.default.createElement(ImageMetaGrid, {
120
139
  key: imageMeta === null || imageMeta === void 0 ? void 0 : (_imageMeta$image = imageMeta.image) === null || _imageMeta$image === void 0 ? void 0 : _imageMeta$image.id,
121
140
  imageMeta: imageMeta,
@@ -125,8 +144,10 @@ function ImageMetaGrids(props) {
125
144
  });
126
145
  }));
127
146
  }
147
+
128
148
  function ImageMetaGrid(props) {
129
149
  var _image$resized2;
150
+
130
151
  const {
131
152
  imageMeta,
132
153
  enableCaption,
@@ -142,6 +163,7 @@ function ImageMetaGrid(props) {
142
163
  src: image === null || image === void 0 ? void 0 : (_image$resized2 = image.resized) === null || _image$resized2 === void 0 ? void 0 : _image$resized2.w800,
143
164
  onError: e => {
144
165
  var _image$imageFile2;
166
+
145
167
  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;
146
168
  }
147
169
  }), enableCaption && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Label, {
@@ -174,6 +196,7 @@ function ImageMetaGrid(props) {
174
196
  })
175
197
  })));
176
198
  }
199
+
177
200
  function DelayInput(props) {
178
201
  const {
179
202
  delay,
@@ -190,6 +213,7 @@ function DelayInput(props) {
190
213
  }
191
214
  }));
192
215
  }
216
+
193
217
  const imagesQuery = (0, _apollo.gql)`
194
218
  query Photos($searchText: String!, $take: Int, $skip: Int) {
195
219
  photosCount(where: { name: { contains: $searchText } })
@@ -214,6 +238,7 @@ const imagesQuery = (0, _apollo.gql)`
214
238
  }
215
239
  }
216
240
  `;
241
+
217
242
  function ImageSelector(props) {
218
243
  const [queryImages, {
219
244
  loading,
@@ -226,6 +251,7 @@ function ImageSelector(props) {
226
251
  fetchPolicy: 'no-cache'
227
252
  });
228
253
  const [currentPage, setCurrentPage] = (0, _react.useState)(0); // page starts with 1, 0 is used to detect initialization
254
+
229
255
  const [searchText, setSearchText] = (0, _react.useState)('');
230
256
  const [selected, setSelected] = (0, _react.useState)([]);
231
257
  const [delay, setDelay] = (0, _react.useState)('5');
@@ -253,70 +279,84 @@ function ImageSelector(props) {
253
279
  enableDelay = false,
254
280
  onChange
255
281
  } = props;
282
+
256
283
  const onSave = () => {
257
284
  let adjustedDelay = +delay;
258
285
  adjustedDelay = adjustedDelay < 1 ? 1 : adjustedDelay;
259
286
  onChange(selected, align, adjustedDelay);
260
287
  };
288
+
261
289
  const onCancel = () => {
262
290
  onChange([]);
263
291
  };
292
+
264
293
  const onSearchBoxChange = async searchInput => {
265
294
  setSearchText(searchInput);
266
295
  setCurrentPage(1);
267
296
  };
297
+
268
298
  const onDealyChange = delay => {
269
299
  setDelay(delay);
270
300
  };
301
+
271
302
  const onAlignSelectChange = align => {
272
303
  setAlign(align);
273
304
  };
305
+
274
306
  const onAlignSelectOpen = () => {
275
307
  var _contentWrapperRef$cu;
308
+
276
309
  const scrollWrapper = (_contentWrapperRef$cu = contentWrapperRef.current) === null || _contentWrapperRef$cu === void 0 ? void 0 : _contentWrapperRef$cu.parentElement;
277
310
  scrollWrapper.scrollTop = scrollWrapper.scrollHeight;
278
311
  };
312
+
279
313
  const onImageMetaChange = imageEntityWithMeta => {
280
314
  if (enableMultiSelect) {
281
315
  const foundIndex = selected.findIndex(ele => {
282
316
  var _ele$image, _imageEntityWithMeta$;
317
+
283
318
  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);
284
319
  });
320
+
285
321
  if (foundIndex !== -1) {
286
322
  selected[foundIndex] = imageEntityWithMeta;
287
323
  setSelected(selected);
288
324
  }
325
+
289
326
  return;
290
327
  }
328
+
291
329
  setSelected([imageEntityWithMeta]);
292
330
  };
331
+
293
332
  const onImagesGridSelect = imageEntity => {
294
333
  setSelected(selected => {
295
334
  const filterdSelected = selected.filter(ele => {
296
335
  var _ele$image2;
336
+
297
337
  return ((_ele$image2 = ele.image) === null || _ele$image2 === void 0 ? void 0 : _ele$image2.id) !== imageEntity.id;
298
- });
338
+ }); // deselect the image
299
339
 
300
- // deselect the image
301
340
  if (filterdSelected.length !== selected.length) {
302
341
  return filterdSelected;
303
- }
342
+ } // add new selected one
343
+
304
344
 
305
- // add new selected one
306
345
  if (enableMultiSelect) {
307
346
  return selected.concat([{
308
347
  image: imageEntity,
309
348
  desc: ''
310
349
  }]);
311
- }
350
+ } // single select
351
+
312
352
 
313
- // single select
314
353
  return [{
315
354
  image: imageEntity,
316
355
  desc: ''
317
356
  }];
318
357
  });
319
358
  };
359
+
320
360
  const selectedImages = selected.map(ele => {
321
361
  return ele.image;
322
362
  });
@@ -331,6 +371,7 @@ function ImageSelector(props) {
331
371
  });
332
372
  }
333
373
  }, [currentPage, searchText]);
374
+
334
375
  let searchResult = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ImageGrids, {
335
376
  images: images,
336
377
  selected: selectedImages,
@@ -343,12 +384,15 @@ function ImageSelector(props) {
343
384
  setCurrentPage(pageIndex);
344
385
  }
345
386
  }));
387
+
346
388
  if (loading) {
347
389
  searchResult = /*#__PURE__*/_react.default.createElement("p", null, "searching...");
348
390
  }
391
+
349
392
  if (error) {
350
393
  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)));
351
394
  }
395
+
352
396
  return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
353
397
  isOpen: true
354
398
  }, /*#__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 } })
@@ -102,6 +112,7 @@ const ErrorWrapper = _styledComponents.default.div`
102
112
  margin: 0;
103
113
  }
104
114
  `;
115
+
105
116
  function PostGrids(props) {
106
117
  const {
107
118
  posts,
@@ -117,8 +128,10 @@ function PostGrids(props) {
117
128
  });
118
129
  }));
119
130
  }
131
+
120
132
  function PostGrid(props) {
121
133
  var _post$heroImage, _post$heroImage$resiz;
134
+
122
135
  const {
123
136
  post,
124
137
  onSelect,
@@ -133,24 +146,29 @@ function PostGrid(props) {
133
146
  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,
134
147
  onError: e => {
135
148
  var _post$heroImage2, _post$heroImage2$imag;
149
+
136
150
  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;
137
151
  }
138
152
  }), /*#__PURE__*/_react.default.createElement(PostTitle, null, post.name)));
139
153
  }
154
+
140
155
  function PostMetaGrids(props) {
141
156
  const {
142
157
  postMetas
143
158
  } = props;
144
159
  return /*#__PURE__*/_react.default.createElement(PostMetaGridsWrapper, null, postMetas.map(postMetas => {
145
160
  var _postMetas$post;
161
+
146
162
  return /*#__PURE__*/_react.default.createElement(PostMetaGrid, {
147
163
  key: postMetas === null || postMetas === void 0 ? void 0 : (_postMetas$post = postMetas.post) === null || _postMetas$post === void 0 ? void 0 : _postMetas$post.id,
148
164
  postMeta: postMetas
149
165
  });
150
166
  }));
151
167
  }
168
+
152
169
  function PostMetaGrid(props) {
153
170
  var _post$heroImage3, _post$heroImage3$resi;
171
+
154
172
  const {
155
173
  postMeta
156
174
  } = props;
@@ -161,10 +179,12 @@ function PostMetaGrid(props) {
161
179
  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,
162
180
  onError: e => {
163
181
  var _post$heroImage4, _post$heroImage4$imag;
182
+
164
183
  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;
165
184
  }
166
185
  }), /*#__PURE__*/_react.default.createElement(PostTitle, null, post === null || post === void 0 ? void 0 : post.name)));
167
186
  }
187
+
168
188
  function PostSelector(props) {
169
189
  const [queryPosts, {
170
190
  loading,
@@ -177,6 +197,7 @@ function PostSelector(props) {
177
197
  fetchPolicy: 'no-cache'
178
198
  });
179
199
  const [currentPage, setCurrentPage] = (0, _react.useState)(0); // page starts with 1, 0 is used to detect initialization
200
+
180
201
  const [searchText, setSearchText] = (0, _react.useState)('');
181
202
  const [selected, setSelected] = (0, _react.useState)([]);
182
203
  const [showErrorHint, setShowErrorHint] = (0, _react.useState)(false);
@@ -187,49 +208,57 @@ function PostSelector(props) {
187
208
  minSelectCount = 1,
188
209
  maxSelectCount = 3
189
210
  } = props;
211
+
190
212
  const onSave = () => {
191
213
  if (enableMultiSelect && minSelectCount && selected.length < minSelectCount) {
192
214
  setShowErrorHint(true);
193
215
  return;
194
216
  }
217
+
195
218
  onChange(selected);
196
219
  };
220
+
197
221
  const onCancel = () => {
198
222
  onChange([]);
199
223
  };
224
+
200
225
  const onSearchBoxChange = async searchInput => {
201
226
  setSearchText(searchInput);
202
227
  setCurrentPage(1);
203
228
  };
229
+
204
230
  const onPostsGridSelect = postEntity => {
205
231
  setSelected(selected => {
206
232
  const filterdSelected = selected.filter(ele => {
207
233
  var _ele$post;
234
+
208
235
  return ((_ele$post = ele.post) === null || _ele$post === void 0 ? void 0 : _ele$post.id) !== postEntity.id;
209
- });
236
+ }); // deselect the post
210
237
 
211
- // deselect the post
212
238
  if (filterdSelected.length !== selected.length) {
213
239
  return filterdSelected;
214
- }
240
+ } // add new selected one and check shrink the array if there is a limit
241
+
215
242
 
216
- // add new selected one and check shrink the array if there is a limit
217
243
  if (enableMultiSelect) {
218
244
  let newSelected = selected.concat([{
219
245
  post: postEntity
220
246
  }]);
247
+
221
248
  if (maxSelectCount && newSelected.length >= maxSelectCount) {
222
249
  newSelected = newSelected.slice(-maxSelectCount);
223
250
  }
251
+
224
252
  return newSelected;
225
- }
253
+ } // single select
254
+
226
255
 
227
- // single select
228
256
  return [{
229
257
  post: postEntity
230
258
  }];
231
259
  });
232
260
  };
261
+
233
262
  const selectedPosts = selected.map(ele => {
234
263
  return ele.post;
235
264
  });
@@ -244,6 +273,7 @@ function PostSelector(props) {
244
273
  });
245
274
  }
246
275
  }, [currentPage, searchText]);
276
+
247
277
  let searchResult = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(PostGrids, {
248
278
  posts: posts,
249
279
  selected: selectedPosts,
@@ -256,12 +286,15 @@ function PostSelector(props) {
256
286
  setCurrentPage(pageIndex);
257
287
  }
258
288
  }));
289
+
259
290
  if (loading) {
260
291
  searchResult = /*#__PURE__*/_react.default.createElement("p", null, "searching...");
261
292
  }
293
+
262
294
  if (error) {
263
295
  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)));
264
296
  }
297
+
265
298
  return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
266
299
  isOpen: true
267
300
  }, /*#__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,