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