@kids-reporter/draft-editor 0.4.1 → 0.4.2

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.
@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.AlignSelector = AlignSelector;
7
-
8
7
  var _react = _interopRequireWildcard(require("react"));
9
-
10
8
  var _styledComponents = _interopRequireDefault(require("styled-components"));
11
-
12
9
  var _fields = require("@keystone-ui/fields");
13
-
14
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
-
16
11
  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); }
17
-
18
12
  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; }
19
-
20
13
  const Label = _styledComponents.default.label`
21
14
  display: block;
22
15
  margin: 10px 0;
@@ -29,7 +22,6 @@ const AlignSelect = (0, _styledComponents.default)(_fields.Select)`
29
22
  return `margin-bottom: ${menuHeight}px;`;
30
23
  }}
31
24
  `;
32
-
33
25
  function AlignSelector(props) {
34
26
  const [isOpen, setIsOpen] = (0, _react.useState)(false);
35
27
  const [menuHeight, setMenuHeight] = (0, _react.useState)(0);
@@ -41,7 +33,6 @@ function AlignSelector(props) {
41
33
  } = props;
42
34
  (0, _react.useEffect)(() => {
43
35
  const selectMenu = document.querySelector('.css-nabggt-menu');
44
-
45
36
  if (selectMenu) {
46
37
  const styles = window.getComputedStyle(selectMenu);
47
38
  const margin = parseFloat(styles['marginTop']) + parseFloat(styles['marginBottom']);
@@ -49,7 +40,6 @@ function AlignSelector(props) {
49
40
  } else {
50
41
  setMenuHeight(0);
51
42
  }
52
-
53
43
  if (isOpen && onOpen) {
54
44
  onOpen();
55
45
  }
@@ -57,7 +47,8 @@ function AlignSelector(props) {
57
47
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Label, {
58
48
  htmlFor: "alignment"
59
49
  }, "\u5C0D\u9F4A"), /*#__PURE__*/_react.default.createElement(AlignSelect, {
60
- id: "alignment" // default align === undefined
50
+ id: "alignment"
51
+ // default align === undefined
61
52
  ,
62
53
  value: options.find(option => option.value === align),
63
54
  options: options,
@@ -4,25 +4,15 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.AudioSelector = AudioSelector;
7
-
8
7
  var _react = _interopRequireWildcard(require("react"));
9
-
10
8
  var _styledComponents = _interopRequireDefault(require("styled-components"));
11
-
12
9
  var _modals = require("@keystone-ui/modals");
13
-
14
10
  var _apollo = require("@keystone-6/core/admin-ui/apollo");
15
-
16
11
  var _searchBox = require("./search-box");
17
-
18
12
  var _pagination = require("./pagination");
19
-
20
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
-
22
14
  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
-
24
15
  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
-
26
16
  const AudioSearchBox = (0, _styledComponents.default)(_searchBox.SearchBox)`
27
17
  margin-top: 10px;
28
18
  `;
@@ -69,7 +59,6 @@ const ErrorWrapper = _styledComponents.default.div`
69
59
  margin: 0;
70
60
  }
71
61
  `;
72
-
73
62
  function AudiosGrids(props) {
74
63
  const {
75
64
  audios,
@@ -85,10 +74,8 @@ function AudiosGrids(props) {
85
74
  });
86
75
  }));
87
76
  }
88
-
89
77
  function AudioGrid(props) {
90
78
  var _audio$file;
91
-
92
79
  const {
93
80
  audio,
94
81
  onSelect,
@@ -104,27 +91,23 @@ function AudioGrid(props) {
104
91
  }, /*#__PURE__*/_react.default.createElement("source", {
105
92
  src: audio === null || audio === void 0 ? void 0 : audio.url
106
93
  }), /*#__PURE__*/_react.default.createElement("source", {
107
- src: audio === null || audio === void 0 ? void 0 : (_audio$file = audio.file) === null || _audio$file === void 0 ? void 0 : _audio$file.url
94
+ src: audio === null || audio === void 0 || (_audio$file = audio.file) === null || _audio$file === void 0 ? void 0 : _audio$file.url
108
95
  })), /*#__PURE__*/_react.default.createElement(AudioName, null, audio === null || audio === void 0 ? void 0 : audio.name));
109
96
  }
110
-
111
97
  function AudioMetaGrids(props) {
112
98
  const {
113
99
  audioMetas
114
100
  } = props;
115
101
  return /*#__PURE__*/_react.default.createElement(AudioMetaGridsWrapper, null, audioMetas.map(audioMeta => {
116
102
  var _audioMeta$audio;
117
-
118
103
  return /*#__PURE__*/_react.default.createElement(AudioMetaGrid, {
119
- key: audioMeta === null || audioMeta === void 0 ? void 0 : (_audioMeta$audio = audioMeta.audio) === null || _audioMeta$audio === void 0 ? void 0 : _audioMeta$audio.id,
104
+ key: audioMeta === null || audioMeta === void 0 || (_audioMeta$audio = audioMeta.audio) === null || _audioMeta$audio === void 0 ? void 0 : _audioMeta$audio.id,
120
105
  audioMeta: audioMeta
121
106
  });
122
107
  }));
123
108
  }
124
-
125
109
  function AudioMetaGrid(props) {
126
110
  var _audio$file2;
127
-
128
111
  const {
129
112
  audioMeta
130
113
  } = props;
@@ -136,10 +119,9 @@ function AudioMetaGrid(props) {
136
119
  }, /*#__PURE__*/_react.default.createElement("source", {
137
120
  src: audio === null || audio === void 0 ? void 0 : audio.url
138
121
  }), /*#__PURE__*/_react.default.createElement("source", {
139
- src: audio === null || audio === void 0 ? void 0 : (_audio$file2 = audio.file) === null || _audio$file2 === void 0 ? void 0 : _audio$file2.url
122
+ src: audio === null || audio === void 0 || (_audio$file2 = audio.file) === null || _audio$file2 === void 0 ? void 0 : _audio$file2.url
140
123
  })), /*#__PURE__*/_react.default.createElement(AudioName, null, audio === null || audio === void 0 ? void 0 : audio.name));
141
124
  }
142
-
143
125
  const AudiosQuery = (0, _apollo.gql)`
144
126
  query Audios($searchText: String!, $take: Int, $skip: Int) {
145
127
  audioFilesCount(where: { name: { contains: $searchText } })
@@ -157,7 +139,6 @@ const AudiosQuery = (0, _apollo.gql)`
157
139
  }
158
140
  }
159
141
  `;
160
-
161
142
  function AudioSelector(props) {
162
143
  const [queryAudios, {
163
144
  loading,
@@ -170,46 +151,40 @@ function AudioSelector(props) {
170
151
  fetchPolicy: 'no-cache'
171
152
  });
172
153
  const [currentPage, setCurrentPage] = (0, _react.useState)(0); // page starts with 1, 0 is used to detect initialization
173
-
174
154
  const [searchText, setSearchText] = (0, _react.useState)('');
175
155
  const [selected, setSelected] = (0, _react.useState)([]);
176
156
  const pageSize = 6;
177
157
  const {
178
158
  onChange
179
159
  } = props;
180
-
181
160
  const onSave = () => {
182
161
  onChange(selected);
183
162
  };
184
-
185
163
  const onCancel = () => {
186
164
  onChange([]);
187
165
  };
188
-
189
166
  const onSearchBoxChange = async searchInput => {
190
167
  setSearchText(searchInput);
191
168
  setCurrentPage(1);
192
169
  };
193
-
194
170
  const onAudiosGridSelect = audioEntity => {
195
171
  setSelected(selected => {
196
172
  const filterdSelected = selected.filter(ele => {
197
173
  var _ele$audio;
198
-
199
174
  return ((_ele$audio = ele.audio) === null || _ele$audio === void 0 ? void 0 : _ele$audio.id) !== audioEntity.id;
200
- }); // deselect the audio
175
+ });
201
176
 
177
+ // deselect the audio
202
178
  if (filterdSelected.length !== selected.length) {
203
179
  return filterdSelected;
204
- } // single select
205
-
180
+ }
206
181
 
182
+ // single select
207
183
  return [{
208
184
  audio: audioEntity
209
185
  }];
210
186
  });
211
187
  };
212
-
213
188
  const selectedAudios = selected.map(ele => {
214
189
  return ele.audio;
215
190
  });
@@ -224,7 +199,6 @@ function AudioSelector(props) {
224
199
  });
225
200
  }
226
201
  }, [currentPage, searchText]);
227
-
228
202
  let searchResult = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(AudiosGrids, {
229
203
  audios: audioFiles,
230
204
  selected: selectedAudios,
@@ -237,15 +211,12 @@ function AudioSelector(props) {
237
211
  setCurrentPage(pageIndex);
238
212
  }
239
213
  }));
240
-
241
214
  if (loading) {
242
215
  searchResult = /*#__PURE__*/_react.default.createElement("p", null, "searching...");
243
216
  }
244
-
245
217
  if (error) {
246
218
  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)));
247
219
  }
248
-
249
220
  return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
250
221
  isOpen: true
251
222
  }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
@@ -4,31 +4,18 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.ImageSelector = ImageSelector;
7
-
8
7
  var _react = _interopRequireWildcard(require("react"));
9
-
10
8
  var _debounce = _interopRequireDefault(require("lodash/debounce"));
11
-
12
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
13
-
14
10
  var _fields = require("@keystone-ui/fields");
15
-
16
11
  var _modals = require("@keystone-ui/modals");
17
-
18
12
  var _apollo = require("@keystone-6/core/admin-ui/apollo");
19
-
20
13
  var _alignSelector = require("./align-selector");
21
-
22
14
  var _searchBox = require("./search-box");
23
-
24
15
  var _pagination = require("./pagination");
25
-
26
16
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
27
-
28
17
  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
-
30
18
  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
-
32
19
  const imagesQuery = (0, _apollo.gql)`
33
20
  query Photos($searchText: String!, $take: Int, $skip: Int) {
34
21
  photosCount(where: { name: { contains: $searchText } })
@@ -112,7 +99,6 @@ const ErrorWrapper = _styledComponents.default.div`
112
99
  const ImageName = _styledComponents.default.p`
113
100
  text-align: center;
114
101
  `;
115
-
116
102
  function ImageGrids(props) {
117
103
  const {
118
104
  images,
@@ -128,10 +114,8 @@ function ImageGrids(props) {
128
114
  });
129
115
  }));
130
116
  }
131
-
132
117
  function ImageGrid(props) {
133
118
  var _image$resized;
134
-
135
119
  const {
136
120
  image,
137
121
  onSelect,
@@ -143,15 +127,13 @@ function ImageGrid(props) {
143
127
  }, /*#__PURE__*/_react.default.createElement(ImageSelected, null, isSelected ? /*#__PURE__*/_react.default.createElement("i", {
144
128
  className: "fas fa-check-circle"
145
129
  }) : null), /*#__PURE__*/_react.default.createElement(Image, {
146
- src: image === null || image === void 0 ? void 0 : (_image$resized = image.resized) === null || _image$resized === void 0 ? void 0 : _image$resized.w800,
130
+ src: image === null || image === void 0 || (_image$resized = image.resized) === null || _image$resized === void 0 ? void 0 : _image$resized.w800,
147
131
  onError: e => {
148
132
  var _image$imageFile;
149
-
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;
133
+ return e.currentTarget.src = image === null || image === void 0 || (_image$imageFile = image.imageFile) === null || _image$imageFile === void 0 ? void 0 : _image$imageFile.url;
151
134
  }
152
135
  }));
153
136
  }
154
-
155
137
  function ImageMetaGrids(props) {
156
138
  const {
157
139
  imageMetas,
@@ -161,9 +143,8 @@ function ImageMetaGrids(props) {
161
143
  } = props;
162
144
  return /*#__PURE__*/_react.default.createElement(ImageMetaGridsWrapper, null, imageMetas.map(imageMeta => {
163
145
  var _imageMeta$image;
164
-
165
146
  return /*#__PURE__*/_react.default.createElement(ImageMetaGrid, {
166
- key: imageMeta === null || imageMeta === void 0 ? void 0 : (_imageMeta$image = imageMeta.image) === null || _imageMeta$image === void 0 ? void 0 : _imageMeta$image.id,
147
+ key: imageMeta === null || imageMeta === void 0 || (_imageMeta$image = imageMeta.image) === null || _imageMeta$image === void 0 ? void 0 : _imageMeta$image.id,
167
148
  imageMeta: imageMeta,
168
149
  enableCaption: enableCaption,
169
150
  enableUrl: enableUrl,
@@ -171,10 +152,8 @@ function ImageMetaGrids(props) {
171
152
  });
172
153
  }));
173
154
  }
174
-
175
155
  function ImageMetaGrid(props) {
176
156
  var _image$resized2;
177
-
178
157
  const {
179
158
  imageMeta,
180
159
  enableCaption,
@@ -187,11 +166,10 @@ function ImageMetaGrid(props) {
187
166
  url
188
167
  } = imageMeta;
189
168
  return /*#__PURE__*/_react.default.createElement(ImageMetaGridWrapper, null, /*#__PURE__*/_react.default.createElement(Image, {
190
- src: image === null || image === void 0 ? void 0 : (_image$resized2 = image.resized) === null || _image$resized2 === void 0 ? void 0 : _image$resized2.w800,
169
+ src: image === null || image === void 0 || (_image$resized2 = image.resized) === null || _image$resized2 === void 0 ? void 0 : _image$resized2.w800,
191
170
  onError: e => {
192
171
  var _image$imageFile2;
193
-
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;
172
+ return e.currentTarget.src = image === null || image === void 0 || (_image$imageFile2 = image.imageFile) === null || _image$imageFile2 === void 0 ? void 0 : _image$imageFile2.url;
195
173
  }
196
174
  }), /*#__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, {
197
175
  htmlFor: "caption"
@@ -223,7 +201,6 @@ function ImageMetaGrid(props) {
223
201
  })
224
202
  })));
225
203
  }
226
-
227
204
  function DelayInput(props) {
228
205
  const {
229
206
  delay,
@@ -240,7 +217,6 @@ function DelayInput(props) {
240
217
  }
241
218
  }));
242
219
  }
243
-
244
220
  function ImageSelector(props) {
245
221
  const [queryImages, {
246
222
  loading,
@@ -253,7 +229,6 @@ function ImageSelector(props) {
253
229
  fetchPolicy: 'no-cache'
254
230
  });
255
231
  const [currentPage, setCurrentPage] = (0, _react.useState)(0); // page starts with 1, 0 is used to detect initialization
256
-
257
232
  const [searchText, setSearchText] = (0, _react.useState)('');
258
233
  const [selected, setSelected] = (0, _react.useState)([]);
259
234
  const [delay, setDelay] = (0, _react.useState)('5');
@@ -281,84 +256,70 @@ function ImageSelector(props) {
281
256
  enableDelay = false,
282
257
  onChange
283
258
  } = props;
284
-
285
259
  const onSave = () => {
286
260
  let adjustedDelay = +delay;
287
261
  adjustedDelay = adjustedDelay < 1 ? 1 : adjustedDelay;
288
262
  onChange(selected, align, adjustedDelay);
289
263
  };
290
-
291
264
  const onCancel = () => {
292
265
  onChange([]);
293
266
  };
294
-
295
267
  const onSearchBoxChange = async searchInput => {
296
268
  setSearchText(searchInput);
297
269
  setCurrentPage(1);
298
270
  };
299
-
300
271
  const onDealyChange = delay => {
301
272
  setDelay(delay);
302
273
  };
303
-
304
274
  const onAlignSelectChange = align => {
305
275
  setAlign(align);
306
276
  };
307
-
308
277
  const onAlignSelectOpen = () => {
309
278
  var _contentWrapperRef$cu;
310
-
311
279
  const scrollWrapper = (_contentWrapperRef$cu = contentWrapperRef.current) === null || _contentWrapperRef$cu === void 0 ? void 0 : _contentWrapperRef$cu.parentElement;
312
280
  scrollWrapper.scrollTop = scrollWrapper.scrollHeight;
313
281
  };
314
-
315
282
  const onImageMetaChange = imageEntityWithMeta => {
316
283
  if (enableMultiSelect) {
317
284
  const foundIndex = selected.findIndex(ele => {
318
285
  var _ele$image, _imageEntityWithMeta$;
319
-
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);
286
+ return (ele === null || ele === void 0 || (_ele$image = ele.image) === null || _ele$image === void 0 ? void 0 : _ele$image.id) === (imageEntityWithMeta === null || imageEntityWithMeta === void 0 || (_imageEntityWithMeta$ = imageEntityWithMeta.image) === null || _imageEntityWithMeta$ === void 0 ? void 0 : _imageEntityWithMeta$.id);
321
287
  });
322
-
323
288
  if (foundIndex !== -1) {
324
289
  selected[foundIndex] = imageEntityWithMeta;
325
290
  setSelected(selected);
326
291
  }
327
-
328
292
  return;
329
293
  }
330
-
331
294
  setSelected([imageEntityWithMeta]);
332
295
  };
333
-
334
296
  const onImagesGridSelect = imageEntity => {
335
297
  setSelected(selected => {
336
298
  const filterdSelected = selected.filter(ele => {
337
299
  var _ele$image2;
338
-
339
300
  return ((_ele$image2 = ele.image) === null || _ele$image2 === void 0 ? void 0 : _ele$image2.id) !== imageEntity.id;
340
- }); // deselect the image
301
+ });
341
302
 
303
+ // deselect the image
342
304
  if (filterdSelected.length !== selected.length) {
343
305
  return filterdSelected;
344
- } // add new selected one
345
-
306
+ }
346
307
 
308
+ // add new selected one
347
309
  if (enableMultiSelect) {
348
310
  return selected.concat([{
349
311
  image: imageEntity,
350
312
  desc: ''
351
313
  }]);
352
- } // single select
353
-
314
+ }
354
315
 
316
+ // single select
355
317
  return [{
356
318
  image: imageEntity,
357
319
  desc: ''
358
320
  }];
359
321
  });
360
322
  };
361
-
362
323
  const selectedImages = selected.map(ele => {
363
324
  return ele.image;
364
325
  });
@@ -373,7 +334,6 @@ function ImageSelector(props) {
373
334
  });
374
335
  }
375
336
  }, [currentPage, searchText]);
376
-
377
337
  let searchResult = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ImageGrids, {
378
338
  images: images,
379
339
  selected: selectedImages,
@@ -386,15 +346,12 @@ function ImageSelector(props) {
386
346
  setCurrentPage(pageIndex);
387
347
  }
388
348
  }));
389
-
390
349
  if (loading) {
391
350
  searchResult = /*#__PURE__*/_react.default.createElement("p", null, "searching...");
392
351
  }
393
-
394
352
  if (error) {
395
353
  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)));
396
354
  }
397
-
398
355
  return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
399
356
  isOpen: true
400
357
  }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.Pagination = Pagination;
7
-
8
7
  var _react = _interopRequireDefault(require("react"));
9
-
10
8
  var _styledComponents = _interopRequireDefault(require("styled-components"));
11
-
12
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
-
14
10
  const PaginationWrapper = _styledComponents.default.div`
15
11
  display: flex;
16
12
  justify-content: end;
@@ -33,7 +29,6 @@ const ArrowButtonWrapper = _styledComponents.default.a`
33
29
  }
34
30
  }}
35
31
  `;
36
-
37
32
  function Pagination({
38
33
  currentPage,
39
34
  total,
@@ -43,8 +38,9 @@ function Pagination({
43
38
  const minPage = 1;
44
39
  const limit = Math.ceil(total / pageSize);
45
40
  const nextPage = 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.
41
+ const prevPage = currentPage - 1;
47
42
 
43
+ // Don't render the pagiantion component if the pageSize is greater than the total number of items in the list.
48
44
  if (total <= pageSize) return null;
49
45
  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, {
50
46
  onClick: () => {