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