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

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 (79) 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 +18 -7
  12. package/lib/draft-js/buttons/info-box.js +21 -5
  13. package/lib/draft-js/buttons/link.js +68 -22
  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 -5
  18. package/lib/draft-js/buttons/selector/image-selector.js +64 -16
  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 +19 -5
  28. package/lib/draft-js/buttons/youtube.js +147 -0
  29. package/lib/draft-js/const.js +2 -0
  30. package/lib/draft-js/draft-converter/api-data-instance.js +14 -0
  31. package/lib/draft-js/draft-converter/atomic-block-processor.js +42 -12
  32. package/lib/draft-js/draft-converter/entities.js +3 -1
  33. package/lib/draft-js/draft-converter/index.js +29 -10
  34. package/lib/draft-js/draft-converter/inline-styles-processor.js +55 -22
  35. package/lib/draft-js/modifier.js +13 -5
  36. package/lib/draft-js/util.js +32 -0
  37. package/lib/index.js +4 -0
  38. package/lib/website/mirrormedia/block-renderer/background-image-block.js +14 -2
  39. package/lib/website/mirrormedia/block-renderer/background-video-block.js +14 -2
  40. package/lib/website/mirrormedia/block-renderer/color-box-block.js +14 -2
  41. package/lib/website/mirrormedia/block-renderer/embedded-code-block.js +12 -3
  42. package/lib/website/mirrormedia/block-renderer/image-block.js +108 -0
  43. package/lib/website/mirrormedia/block-renderer/info-box-block.js +14 -2
  44. package/lib/website/mirrormedia/block-renderer/side-index-block.js +13 -2
  45. package/lib/website/mirrormedia/block-renderer/slideshow-block.js +93 -7
  46. package/lib/website/mirrormedia/block-renderer/table-block.js +62 -28
  47. package/lib/website/mirrormedia/block-renderer-fn.js +48 -5
  48. package/lib/website/mirrormedia/draft-editor.js +138 -14
  49. package/lib/website/mirrormedia/entity-decorator.js +12 -1
  50. package/lib/website/mirrormedia/index.js +3 -0
  51. package/lib/website/mirrormedia/selector/align-selector.js +11 -2
  52. package/lib/website/mirrormedia/selector/audio-selector.js +34 -5
  53. package/lib/website/mirrormedia/selector/image-selector.js +75 -18
  54. package/lib/website/mirrormedia/selector/pagination.js +6 -2
  55. package/lib/website/mirrormedia/selector/post-selector.js +40 -6
  56. package/lib/website/mirrormedia/selector/search-box.js +9 -0
  57. package/lib/website/mirrormedia/selector/video-selector.js +36 -7
  58. package/lib/website/mirrormedia/shared-style/index.js +17 -0
  59. package/lib/website/mirrormedia/theme/index.js +28 -0
  60. package/lib/website/readr/block-renderer/background-image-block.js +66 -6
  61. package/lib/website/readr/block-renderer/background-video-block.js +76 -6
  62. package/lib/website/readr/block-renderer/color-box-block.js +14 -2
  63. package/lib/website/readr/block-renderer/image-block.js +106 -0
  64. package/lib/website/readr/block-renderer/info-box-block.js +14 -2
  65. package/lib/website/readr/block-renderer/side-index-block.js +13 -2
  66. package/lib/website/readr/block-renderer/table-block.js +62 -28
  67. package/lib/website/readr/block-renderer-fn.js +32 -3
  68. package/lib/website/readr/draft-editor.js +112 -12
  69. package/lib/website/readr/entity-decorator.js +4 -0
  70. package/lib/website/readr/index.js +3 -0
  71. package/lib/website/readr/selector/align-selector.js +11 -2
  72. package/lib/website/readr/selector/audio-selector.js +34 -17
  73. package/lib/website/readr/selector/image-selector.js +62 -16
  74. package/lib/website/readr/selector/pagination.js +6 -2
  75. package/lib/website/readr/selector/post-selector.js +40 -13
  76. package/lib/website/readr/selector/search-box.js +9 -0
  77. package/lib/website/readr/selector/video-selector.js +33 -4
  78. package/lib/website/readr/theme/index.js +39 -0
  79. package/package.json +8 -8
@@ -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,11 +139,13 @@ 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 } })
129
146
  audioFiles(
130
147
  where: { name: { contains: $searchText } }
148
+ orderBy: { id: desc }
131
149
  take: $take
132
150
  skip: $skip
133
151
  ) {
@@ -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,23 +4,37 @@ 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 } })
22
35
  photos(
23
36
  where: { name: { contains: $searchText } }
37
+ orderBy: { id: desc }
24
38
  take: $take
25
39
  skip: $skip
26
40
  ) {
@@ -99,6 +113,7 @@ const ErrorWrapper = _styledComponents.default.div`
99
113
  const ImageName = _styledComponents.default.p`
100
114
  text-align: center;
101
115
  `;
116
+
102
117
  function ImageGrids(props) {
103
118
  const {
104
119
  images,
@@ -114,8 +129,10 @@ function ImageGrids(props) {
114
129
  });
115
130
  }));
116
131
  }
132
+
117
133
  function ImageGrid(props) {
118
134
  var _image$resized;
135
+
119
136
  const {
120
137
  image,
121
138
  onSelect,
@@ -130,10 +147,12 @@ function ImageGrid(props) {
130
147
  src: image === null || image === void 0 ? void 0 : (_image$resized = image.resized) === null || _image$resized === void 0 ? void 0 : _image$resized.w800,
131
148
  onError: e => {
132
149
  var _image$imageFile;
150
+
133
151
  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
152
  }
135
153
  }));
136
154
  }
155
+
137
156
  function ImageMetaGrids(props) {
138
157
  const {
139
158
  imageMetas,
@@ -143,6 +162,7 @@ function ImageMetaGrids(props) {
143
162
  } = props;
144
163
  return /*#__PURE__*/_react.default.createElement(ImageMetaGridsWrapper, null, imageMetas.map(imageMeta => {
145
164
  var _imageMeta$image;
165
+
146
166
  return /*#__PURE__*/_react.default.createElement(ImageMetaGrid, {
147
167
  key: imageMeta === null || imageMeta === void 0 ? void 0 : (_imageMeta$image = imageMeta.image) === null || _imageMeta$image === void 0 ? void 0 : _imageMeta$image.id,
148
168
  imageMeta: imageMeta,
@@ -152,8 +172,10 @@ function ImageMetaGrids(props) {
152
172
  });
153
173
  }));
154
174
  }
175
+
155
176
  function ImageMetaGrid(props) {
156
177
  var _image$resized2;
178
+
157
179
  const {
158
180
  imageMeta,
159
181
  enableCaption,
@@ -169,6 +191,7 @@ function ImageMetaGrid(props) {
169
191
  src: image === null || image === void 0 ? void 0 : (_image$resized2 = image.resized) === null || _image$resized2 === void 0 ? void 0 : _image$resized2.w800,
170
192
  onError: e => {
171
193
  var _image$imageFile2;
194
+
172
195
  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
196
  }
174
197
  }), /*#__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 +224,7 @@ function ImageMetaGrid(props) {
201
224
  })
202
225
  })));
203
226
  }
227
+
204
228
  function DelayInput(props) {
205
229
  const {
206
230
  delay,
@@ -217,7 +241,18 @@ function DelayInput(props) {
217
241
  }
218
242
  }));
219
243
  }
244
+
220
245
  function ImageSelector(props) {
246
+ const {
247
+ enableMultiSelect = false,
248
+ enableCaption = false,
249
+ enableUrl = false,
250
+ enableAlignment = false,
251
+ enableDelay = false,
252
+ onChange,
253
+ initialSelected = [],
254
+ initialAlign
255
+ } = props;
221
256
  const [queryImages, {
222
257
  loading,
223
258
  error,
@@ -229,10 +264,11 @@ function ImageSelector(props) {
229
264
  fetchPolicy: 'no-cache'
230
265
  });
231
266
  const [currentPage, setCurrentPage] = (0, _react.useState)(0); // page starts with 1, 0 is used to detect initialization
267
+
232
268
  const [searchText, setSearchText] = (0, _react.useState)('');
233
- const [selected, setSelected] = (0, _react.useState)([]);
269
+ const [selected, setSelected] = (0, _react.useState)(initialSelected);
234
270
  const [delay, setDelay] = (0, _react.useState)('5');
235
- const [align, setAlign] = (0, _react.useState)(undefined);
271
+ const [align, setAlign] = (0, _react.useState)(initialAlign);
236
272
  const contentWrapperRef = (0, _react.useRef)();
237
273
  const pageSize = 6;
238
274
  const options = [{
@@ -248,78 +284,84 @@ function ImageSelector(props) {
248
284
  label: 'right',
249
285
  isDisabled: false
250
286
  }];
251
- const {
252
- enableMultiSelect = false,
253
- enableCaption = false,
254
- enableUrl = false,
255
- enableAlignment = false,
256
- enableDelay = false,
257
- onChange
258
- } = props;
287
+
259
288
  const onSave = () => {
260
289
  let adjustedDelay = +delay;
261
290
  adjustedDelay = adjustedDelay < 1 ? 1 : adjustedDelay;
262
291
  onChange(selected, align, adjustedDelay);
263
292
  };
293
+
264
294
  const onCancel = () => {
265
295
  onChange([]);
266
296
  };
297
+
267
298
  const onSearchBoxChange = async searchInput => {
268
299
  setSearchText(searchInput);
269
300
  setCurrentPage(1);
270
301
  };
302
+
271
303
  const onDealyChange = delay => {
272
304
  setDelay(delay);
273
305
  };
306
+
274
307
  const onAlignSelectChange = align => {
275
308
  setAlign(align);
276
309
  };
310
+
277
311
  const onAlignSelectOpen = () => {
278
312
  var _contentWrapperRef$cu;
313
+
279
314
  const scrollWrapper = (_contentWrapperRef$cu = contentWrapperRef.current) === null || _contentWrapperRef$cu === void 0 ? void 0 : _contentWrapperRef$cu.parentElement;
280
315
  scrollWrapper.scrollTop = scrollWrapper.scrollHeight;
281
316
  };
317
+
282
318
  const onImageMetaChange = imageEntityWithMeta => {
283
319
  if (enableMultiSelect) {
284
320
  const foundIndex = selected.findIndex(ele => {
285
321
  var _ele$image, _imageEntityWithMeta$;
322
+
286
323
  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
324
  });
325
+
288
326
  if (foundIndex !== -1) {
289
327
  selected[foundIndex] = imageEntityWithMeta;
290
328
  setSelected(selected);
291
329
  }
330
+
292
331
  return;
293
332
  }
333
+
294
334
  setSelected([imageEntityWithMeta]);
295
335
  };
336
+
296
337
  const onImagesGridSelect = imageEntity => {
297
338
  setSelected(selected => {
298
339
  const filterdSelected = selected.filter(ele => {
299
340
  var _ele$image2;
341
+
300
342
  return ((_ele$image2 = ele.image) === null || _ele$image2 === void 0 ? void 0 : _ele$image2.id) !== imageEntity.id;
301
- });
343
+ }); // deselect the image
302
344
 
303
- // deselect the image
304
345
  if (filterdSelected.length !== selected.length) {
305
346
  return filterdSelected;
306
- }
347
+ } // add new selected one
348
+
307
349
 
308
- // add new selected one
309
350
  if (enableMultiSelect) {
310
351
  return selected.concat([{
311
352
  image: imageEntity,
312
353
  desc: ''
313
354
  }]);
314
- }
355
+ } // single select
356
+
315
357
 
316
- // single select
317
358
  return [{
318
359
  image: imageEntity,
319
360
  desc: ''
320
361
  }];
321
362
  });
322
363
  };
364
+
323
365
  const selectedImages = selected.map(ele => {
324
366
  return ele.image;
325
367
  });
@@ -334,6 +376,7 @@ function ImageSelector(props) {
334
376
  });
335
377
  }
336
378
  }, [currentPage, searchText]);
379
+
337
380
  let searchResult = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ImageGrids, {
338
381
  images: images,
339
382
  selected: selectedImages,
@@ -346,12 +389,15 @@ function ImageSelector(props) {
346
389
  setCurrentPage(pageIndex);
347
390
  }
348
391
  }));
392
+
349
393
  if (loading) {
350
394
  searchResult = /*#__PURE__*/_react.default.createElement("p", null, "searching...");
351
395
  }
396
+
352
397
  if (error) {
353
398
  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
399
  }
400
+
355
401
  return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
356
402
  isOpen: true
357
403
  }, /*#__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,20 +4,31 @@ 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 } })
19
29
  posts(
20
30
  where: { name: { contains: $searchText } }
31
+ orderBy: { id: desc }
21
32
  take: $take
22
33
  skip: $skip
23
34
  ) {
@@ -103,6 +114,7 @@ const ErrorWrapper = _styledComponents.default.div`
103
114
  margin: 0;
104
115
  }
105
116
  `;
117
+
106
118
  function PostGrids(props) {
107
119
  const {
108
120
  posts,
@@ -118,8 +130,10 @@ function PostGrids(props) {
118
130
  });
119
131
  }));
120
132
  }
133
+
121
134
  function PostGrid(props) {
122
135
  var _post$heroImage, _post$heroImage$resiz;
136
+
123
137
  const {
124
138
  post,
125
139
  onSelect,
@@ -134,24 +148,29 @@ function PostGrid(props) {
134
148
  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
149
  onError: e => {
136
150
  var _post$heroImage2, _post$heroImage2$imag;
151
+
137
152
  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
153
  }
139
154
  }), /*#__PURE__*/_react.default.createElement(PostTitle, null, post.name)));
140
155
  }
156
+
141
157
  function PostMetaGrids(props) {
142
158
  const {
143
159
  postMetas
144
160
  } = props;
145
161
  return /*#__PURE__*/_react.default.createElement(PostMetaGridsWrapper, null, postMetas.map(postMetas => {
146
162
  var _postMetas$post;
163
+
147
164
  return /*#__PURE__*/_react.default.createElement(PostMetaGrid, {
148
165
  key: postMetas === null || postMetas === void 0 ? void 0 : (_postMetas$post = postMetas.post) === null || _postMetas$post === void 0 ? void 0 : _postMetas$post.id,
149
166
  postMeta: postMetas
150
167
  });
151
168
  }));
152
169
  }
170
+
153
171
  function PostMetaGrid(props) {
154
172
  var _post$heroImage3, _post$heroImage3$resi;
173
+
155
174
  const {
156
175
  postMeta
157
176
  } = props;
@@ -162,10 +181,12 @@ function PostMetaGrid(props) {
162
181
  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
182
  onError: e => {
164
183
  var _post$heroImage4, _post$heroImage4$imag;
184
+
165
185
  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
186
  }
167
187
  }), /*#__PURE__*/_react.default.createElement(PostTitle, null, post === null || post === void 0 ? void 0 : post.name)));
168
188
  }
189
+
169
190
  function PostSelector(props) {
170
191
  const [queryPosts, {
171
192
  loading,
@@ -178,6 +199,7 @@ function PostSelector(props) {
178
199
  fetchPolicy: 'no-cache'
179
200
  });
180
201
  const [currentPage, setCurrentPage] = (0, _react.useState)(0); // page starts with 1, 0 is used to detect initialization
202
+
181
203
  const [searchText, setSearchText] = (0, _react.useState)('');
182
204
  const [selected, setSelected] = (0, _react.useState)([]);
183
205
  const [showErrorHint, setShowErrorHint] = (0, _react.useState)(false);
@@ -185,52 +207,53 @@ function PostSelector(props) {
185
207
  const {
186
208
  onChange,
187
209
  enableMultiSelect = false,
188
- minSelectCount = 1,
189
- maxSelectCount = 3
210
+ minSelectCount = 1
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
- let newSelected = selected.concat([{
245
+ return selected.concat([{
220
246
  post: postEntity
221
247
  }]);
222
- if (maxSelectCount && newSelected.length >= maxSelectCount) {
223
- newSelected = newSelected.slice(-maxSelectCount);
224
- }
225
- return newSelected;
226
- }
248
+ } // single select
249
+
227
250
 
228
- // single select
229
251
  return [{
230
252
  post: postEntity
231
253
  }];
232
254
  });
233
255
  };
256
+
234
257
  const selectedPosts = selected.map(ele => {
235
258
  return ele.post;
236
259
  });
@@ -245,6 +268,7 @@ function PostSelector(props) {
245
268
  });
246
269
  }
247
270
  }, [currentPage, searchText]);
271
+
248
272
  let searchResult = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(PostGrids, {
249
273
  posts: posts,
250
274
  selected: selectedPosts,
@@ -257,12 +281,15 @@ function PostSelector(props) {
257
281
  setCurrentPage(pageIndex);
258
282
  }
259
283
  }));
284
+
260
285
  if (loading) {
261
286
  searchResult = /*#__PURE__*/_react.default.createElement("p", null, "searching...");
262
287
  }
288
+
263
289
  if (error) {
264
290
  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
291
  }
292
+
266
293
  return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
267
294
  isOpen: true
268
295
  }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {