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