@kids-reporter/draft-editor 0.4.1 → 0.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/.selector/align-selector.js +2 -11
- package/lib/.selector/audio-selector.js +7 -36
- package/lib/.selector/image-selector.js +12 -55
- package/lib/.selector/pagination.js +2 -6
- package/lib/.selector/post-selector.js +15 -46
- package/lib/.selector/search-box.js +0 -9
- package/lib/.selector/video-selector.js +7 -35
- package/lib/block-renderer-fn.js +0 -12
- package/lib/block-renderers/blockquote.js +2 -13
- package/lib/buttons/annotation.js +1 -20
- package/lib/buttons/blockquote.js +11 -30
- package/lib/buttons/bt-names.js +1 -0
- package/lib/buttons/embedded-code.js +5 -16
- package/lib/buttons/enlarge.js +0 -3
- package/lib/buttons/image.js +5 -16
- package/lib/buttons/info-box.js +12 -28
- package/lib/buttons/link.js +0 -19
- package/lib/buttons/select.js +0 -6
- package/lib/buttons/selector/align-selector.js +2 -11
- package/lib/buttons/selector/image-selector.js +10 -52
- package/lib/buttons/selector/pagination.js +2 -6
- package/lib/buttons/selector/search-box.js +0 -9
- package/lib/buttons/slideshow.js +5 -15
- package/lib/draft-editor.js +12 -68
- package/lib/index.js +18 -4
- package/package.json +2 -2
|
@@ -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"
|
|
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
|
|
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
|
|
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
|
|
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
|
-
});
|
|
175
|
+
});
|
|
201
176
|
|
|
177
|
+
// deselect the audio
|
|
202
178
|
if (filterdSelected.length !== selected.length) {
|
|
203
179
|
return filterdSelected;
|
|
204
|
-
}
|
|
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
|
|
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
|
|
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
|
|
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
|
-
});
|
|
301
|
+
});
|
|
341
302
|
|
|
303
|
+
// deselect the image
|
|
342
304
|
if (filterdSelected.length !== selected.length) {
|
|
343
305
|
return filterdSelected;
|
|
344
|
-
}
|
|
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
|
-
}
|
|
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;
|
|
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: () => {
|