@kids-reporter/draft-editor 0.4.12 → 0.4.14

package/lib/.selector/pagination.js

@@ -1,78 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Pagination = Pagination;
-var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const PaginationWrapper = _styledComponents.default.div`
-  display: flex;
-  justify-content: end;
-`;
-const Arrows = _styledComponents.default.div`
-  display: flex;
-`;
-const ArrowButtonWrapper = _styledComponents.default.a`
-  color: #415269;
-  cursor: pointer;
-  ${({
-  disable
-}) => {
-  if (disable) {
-    return `
-        pointer-events: none;
-        opacity: 0.65;
-        cursor: unset;
-      `;
-  }
-}}
-`;
-function Pagination({
-  currentPage,
-  total,
-  pageSize,
-  onChange
-}) {
-  const minPage = 1;
-  const limit = Math.ceil(total / pageSize);
-  const nextPage = currentPage + 1;
-  const prevPage = currentPage - 1;
-
-  // Don't render the pagiantion component if the pageSize is greater than the total number of items in the list.
-  if (total <= pageSize) return null;
-  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, {
-    onClick: () => {
-      onChange(prevPage);
-    },
-    disable: prevPage < minPage
-  }, /*#__PURE__*/_react.default.createElement("svg", {
-    "aria-hidden": "true",
-    focusable: "false",
-    height: "24px",
-    width: "24px",
-    role: "img",
-    viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg",
-    className: "css-bztyua"
-  }, /*#__PURE__*/_react.default.createElement("polyline", {
-    points: "15 18 9 12 15 6"
-  }), ' ')), /*#__PURE__*/_react.default.createElement(ArrowButtonWrapper, {
-    onClick: () => {
-      onChange(nextPage);
-    },
-    disable: nextPage > limit
-  }, /*#__PURE__*/_react.default.createElement("svg", {
-    "aria-hidden": "true",
-    focusable: "false",
-    height: "24px",
-    width: "24px",
-    role: "img",
-    viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg",
-    className: "css-bztyua"
-  }, /*#__PURE__*/_react.default.createElement("polyline", {
-    points: "9 18 15 12 9 6"
-  })))));
-}

package/lib/.selector/post-selector.js

@@ -1,280 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PostSelector = PostSelector;
-var _react = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _modals = require("@keystone-ui/modals");
-var _apollo = require("@keystone-6/core/admin-ui/apollo");
-var _searchBox = require("./search-box");
-var _pagination = require("./pagination");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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); }
-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; }
-const postsQuery = (0, _apollo.gql)`
-  query Posts($searchText: String!, $take: Int, $skip: Int) {
-    postsCount(where: { name: { contains: $searchText } })
-    posts(
-      where: { name: { contains: $searchText } }
-      take: $take
-      skip: $skip
-    ) {
-      id
-      slug
-      name
-      subtitle
-      heroImage {
-        id
-        name
-        imageFile {
-          url
-        }
-        #resized {
-        #  original
-        #}
-      }
-      ogImage {
-        id
-        name
-        imageFile {
-          url
-        }
-        #resized {
-        #  original
-        #}
-      }
-    }
-  }
-`;
-const PostSearchBox = (0, _styledComponents.default)(_searchBox.SearchBox)`
-  margin-top: 10px;
-`;
-const PostSelectionWrapper = _styledComponents.default.div`
-  overflow: auto;
-  margin-top: 10px;
-`;
-const PostGridsWrapper = _styledComponents.default.div`
-  display: flex;
-  flex-wrap: wrap;
-  overflow: auto;
-`;
-const PostGridWrapper = _styledComponents.default.div`
-  flex: 0 0 33.3333%;
-  cursor: pointer;
-  padding: 0 10px 10px;
-`;
-const PostMetaGridsWrapper = _styledComponents.default.div`
-  display: flex;
-  flex-wrap: wrap;
-  overflow: auto;
-`;
-const PostMetaGridWrapper = _styledComponents.default.div`
-  flex: 0 0 33.3333%;
-  cursor: pointer;
-  padding: 0 10px 10px;
-`;
-const Post = _styledComponents.default.div`
-  width: 100%;
-`;
-const SeparationLine = _styledComponents.default.div`
-  border: #e1e5e9 1px solid;
-  margin-top: 10px;
-  margin-bottom: 10px;
-`;
-const ErrorHint = _styledComponents.default.span`
-  color: red;
-`;
-const PostSelected = _styledComponents.default.div`
-  height: 1.4rem;
-`;
-const PostImage = _styledComponents.default.img`
-  display: block;
-  width: 100%;
-  aspect-ratio: 2;
-  object-fit: cover;
-`;
-const PostTitle = _styledComponents.default.div`
-  padding: 0 5px;
-`;
-const ErrorWrapper = _styledComponents.default.div`
-  & * {
-    margin: 0;
-  }
-`;
-function PostGrids(props) {
-  const {
-    posts,
-    selected,
-    onSelect
-  } = props;
-  return /*#__PURE__*/_react.default.createElement(PostGridsWrapper, null, posts.map(post => {
-    return /*#__PURE__*/_react.default.createElement(PostGrid, {
-      key: post.id,
-      isSelected: selected === null || selected === void 0 ? void 0 : selected.includes(post),
-      onSelect: () => onSelect(post),
-      post: post
-    });
-  }));
-}
-function PostGrid(props) {
-  var _post$heroImage;
-  const {
-    post,
-    onSelect,
-    isSelected
-  } = props;
-  return /*#__PURE__*/_react.default.createElement(PostGridWrapper, {
-    key: post === null || post === void 0 ? void 0 : post.id,
-    onClick: () => onSelect(post)
-  }, /*#__PURE__*/_react.default.createElement(PostSelected, null, isSelected ? /*#__PURE__*/_react.default.createElement("i", {
-    className: "fas fa-check-circle"
-  }) : null), /*#__PURE__*/_react.default.createElement(Post, null, /*#__PURE__*/_react.default.createElement(PostImage, {
-    src: (_post$heroImage = post.heroImage) === null || _post$heroImage === void 0 || (_post$heroImage = _post$heroImage.resized) === null || _post$heroImage === void 0 ? void 0 : _post$heroImage.original,
-    onError: e => {
-      var _post$heroImage2;
-      return e.currentTarget.src = (_post$heroImage2 = post.heroImage) === null || _post$heroImage2 === void 0 || (_post$heroImage2 = _post$heroImage2.imageFile) === null || _post$heroImage2 === void 0 ? void 0 : _post$heroImage2.url;
-    }
-  }), /*#__PURE__*/_react.default.createElement(PostTitle, null, post.name)));
-}
-function PostMetaGrids(props) {
-  const {
-    postMetas
-  } = props;
-  return /*#__PURE__*/_react.default.createElement(PostMetaGridsWrapper, null, postMetas.map(postMetas => {
-    var _postMetas$post;
-    return /*#__PURE__*/_react.default.createElement(PostMetaGrid, {
-      key: postMetas === null || postMetas === void 0 || (_postMetas$post = postMetas.post) === null || _postMetas$post === void 0 ? void 0 : _postMetas$post.id,
-      postMeta: postMetas
-    });
-  }));
-}
-function PostMetaGrid(props) {
-  var _post$heroImage3;
-  const {
-    postMeta
-  } = props;
-  const {
-    post
-  } = postMeta;
-  return /*#__PURE__*/_react.default.createElement(PostMetaGridWrapper, null, /*#__PURE__*/_react.default.createElement(Post, null, /*#__PURE__*/_react.default.createElement(PostImage, {
-    src: post === null || post === void 0 || (_post$heroImage3 = post.heroImage) === null || _post$heroImage3 === void 0 || (_post$heroImage3 = _post$heroImage3.resized) === null || _post$heroImage3 === void 0 ? void 0 : _post$heroImage3.original,
-    onError: e => {
-      var _post$heroImage4;
-      return e.currentTarget.src = post === null || post === void 0 || (_post$heroImage4 = post.heroImage) === null || _post$heroImage4 === void 0 || (_post$heroImage4 = _post$heroImage4.imageFile) === null || _post$heroImage4 === void 0 ? void 0 : _post$heroImage4.url;
-    }
-  }), /*#__PURE__*/_react.default.createElement(PostTitle, null, post === null || post === void 0 ? void 0 : post.name)));
-}
-function PostSelector(props) {
-  const [queryPosts, {
-    loading,
-    error,
-    data: {
-      posts = [],
-      postsCount = 0
-    } = {}
-  }] = (0, _apollo.useLazyQuery)(postsQuery, {
-    fetchPolicy: 'no-cache'
-  });
-  const [currentPage, setCurrentPage] = (0, _react.useState)(0); // page starts with 1, 0 is used to detect initialization
-  const [searchText, setSearchText] = (0, _react.useState)('');
-  const [selected, setSelected] = (0, _react.useState)([]);
-  const [showErrorHint, setShowErrorHint] = (0, _react.useState)(false);
-  const pageSize = 6;
-  const {
-    onChange,
-    enableMultiSelect = false,
-    minSelectCount = 1
-  } = props;
-  const onSave = () => {
-    if (enableMultiSelect && minSelectCount && selected.length < minSelectCount) {
-      setShowErrorHint(true);
-      return;
-    }
-    onChange(selected);
-  };
-  const onCancel = () => {
-    onChange([]);
-  };
-  const onSearchBoxChange = async searchInput => {
-    setSearchText(searchInput);
-    setCurrentPage(1);
-  };
-  const onPostsGridSelect = postEntity => {
-    setSelected(selected => {
-      const filterdSelected = selected.filter(ele => {
-        var _ele$post;
-        return ((_ele$post = ele.post) === null || _ele$post === void 0 ? void 0 : _ele$post.id) !== postEntity.id;
-      });
-
-      // deselect the post
-      if (filterdSelected.length !== selected.length) {
-        return filterdSelected;
-      }
-
-      // add new selected one and check shrink the array if there is a limit
-      if (enableMultiSelect) {
-        return selected.concat([{
-          post: postEntity
-        }]);
-      }
-
-      // single select
-      return [{
-        post: postEntity
-      }];
-    });
-  };
-  const selectedPosts = selected.map(ele => {
-    return ele.post;
-  });
-  (0, _react.useEffect)(() => {
-    if (currentPage !== 0) {
-      queryPosts({
-        variables: {
-          searchText: searchText,
-          skip: (currentPage - 1) * pageSize,
-          take: pageSize
-        }
-      });
-    }
-  }, [currentPage, searchText]);
-  let searchResult = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(PostGrids, {
-    posts: posts,
-    selected: selectedPosts,
-    onSelect: onPostsGridSelect
-  }), /*#__PURE__*/_react.default.createElement(_pagination.Pagination, {
-    currentPage: currentPage,
-    total: postsCount,
-    pageSize: pageSize,
-    onChange: pageIndex => {
-      setCurrentPage(pageIndex);
-    }
-  }));
-  if (loading) {
-    searchResult = /*#__PURE__*/_react.default.createElement("p", null, "searching...");
-  }
-  if (error) {
-    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)));
-  }
-  return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
-    isOpen: true
-  }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
-    title: "Select post",
-    actions: {
-      cancel: {
-        label: 'Cancel',
-        action: onCancel
-      },
-      confirm: {
-        label: 'Confirm',
-        action: onSave
-      }
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(PostSearchBox, {
-    onChange: onSearchBoxChange
-  }), /*#__PURE__*/_react.default.createElement(PostSelectionWrapper, null, /*#__PURE__*/_react.default.createElement("div", null, searchResult, " "), !!selected.length && /*#__PURE__*/_react.default.createElement(SeparationLine, null), /*#__PURE__*/_react.default.createElement(PostMetaGrids, {
-    postMetas: selected
-  }), showErrorHint && /*#__PURE__*/_react.default.createElement(ErrorHint, null, "\u8ACB\u81F3\u5C11\u9078\u64C7", minSelectCount, "\u5247\u6587\u7AE0")))));
-}

package/lib/.selector/search-box.js

@@ -1,37 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SearchBox = SearchBox;
-var _react = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _button = require("@keystone-ui/button");
-var _fields = require("@keystone-ui/fields");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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); }
-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; }
-const SearchBoxWrapper = _styledComponents.default.div`
-  display: flex;
-`;
-function SearchBox(props) {
-  const {
-    onChange,
-    className
-  } = props;
-  const [searchInput, setSearchInput] = (0, _react.useState)('');
-  return /*#__PURE__*/_react.default.createElement(SearchBoxWrapper, {
-    className: className
-  }, /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
-    type: "text",
-    placeholder: "\u8ACB\u8F38\u5165\u95DC\u9375\u5B57\u641C\u5C0B",
-    value: searchInput,
-    onChange: e => {
-      setSearchInput(e.target.value);
-    }
-  }), /*#__PURE__*/_react.default.createElement(_button.Button, {
-    onClick: () => {
-      onChange(searchInput);
-    }
-  }, "Search"));
-}

package/lib/.selector/video-selector.js

@@ -1,257 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.VideoSelector = VideoSelector;
-var _react = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _modals = require("@keystone-ui/modals");
-var _apollo = require("@keystone-6/core/admin-ui/apollo");
-var _searchBox = require("./search-box");
-var _pagination = require("./pagination");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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); }
-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; }
-const videosQuery = (0, _apollo.gql)`
-  query Videos($searchText: String!, $take: Int, $skip: Int) {
-    videosCount(where: { name: { contains: $searchText } })
-    videos(
-      where: { name: { contains: $searchText } }
-      take: $take
-      skip: $skip
-    ) {
-      id
-      name
-      url
-      file {
-        filename
-        filesize
-        url
-      }
-      coverPhoto {
-        id
-        name
-        imageFile {
-          url
-        }
-        #resized {
-        #  original
-        #}
-      }
-    }
-  }
-`;
-const VideoSearchBox = (0, _styledComponents.default)(_searchBox.SearchBox)`
-  margin-top: 10px;
-`;
-const VideoSelectionWrapper = _styledComponents.default.div`
-  overflow: auto;
-  margin-top: 10px;
-`;
-const VideoGridsWrapper = _styledComponents.default.div`
-  display: flex;
-  flex-wrap: wrap;
-  overflow: auto;
-`;
-const VideoGridWrapper = _styledComponents.default.div`
-  flex: 0 0 33.3333%;
-  cursor: pointer;
-  padding: 0 10px 10px;
-`;
-const VideoMetaGridsWrapper = _styledComponents.default.div`
-  display: flex;
-  flex-wrap: wrap;
-  overflow: auto;
-`;
-const VideoMetaGridWrapper = _styledComponents.default.div`
-  flex: 0 0 33.3333%;
-  cursor: pointer;
-  padding: 0 10px 10px;
-`;
-const Video = _styledComponents.default.video`
-  display: block;
-  width: 100%;
-  aspect-ratio: 2;
-  object-fit: cover;
-`;
-const SeparationLine = _styledComponents.default.div`
-  border: #e1e5e9 1px solid;
-  margin-top: 10px;
-  margin-bottom: 10px;
-`;
-const VideoSelected = _styledComponents.default.div`
-  height: 1.4rem;
-`;
-const ErrorWrapper = _styledComponents.default.div`
-  & * {
-    margin: 0;
-  }
-`;
-const VideoName = _styledComponents.default.p`
-  text-align: center;
-`;
-function VideosGrids(props) {
-  const {
-    videos,
-    selected,
-    onSelect
-  } = props;
-  return /*#__PURE__*/_react.default.createElement(VideoGridsWrapper, null, videos.map(video => {
-    return /*#__PURE__*/_react.default.createElement(VideoGrid, {
-      key: video.id,
-      isSelected: selected === null || selected === void 0 ? void 0 : selected.includes(video),
-      onSelect: () => onSelect(video),
-      video: video
-    });
-  }));
-}
-function VideoGrid(props) {
-  var _video$file;
-  const {
-    video,
-    onSelect,
-    isSelected
-  } = props;
-  return /*#__PURE__*/_react.default.createElement(VideoGridWrapper, {
-    key: video === null || video === void 0 ? void 0 : video.id,
-    onClick: () => onSelect(video)
-  }, /*#__PURE__*/_react.default.createElement(VideoSelected, null, isSelected ? /*#__PURE__*/_react.default.createElement("i", {
-    className: "fas fa-check-circle"
-  }) : null), /*#__PURE__*/_react.default.createElement(Video, {
-    muted: true,
-    loop: true
-  }, /*#__PURE__*/_react.default.createElement("source", {
-    src: video === null || video === void 0 ? void 0 : video.url
-  }), /*#__PURE__*/_react.default.createElement("source", {
-    src: video === null || video === void 0 || (_video$file = video.file) === null || _video$file === void 0 ? void 0 : _video$file.url
-  })));
-}
-function VideoMetaGrids(props) {
-  const {
-    videoMetas
-  } = props;
-  return /*#__PURE__*/_react.default.createElement(VideoMetaGridsWrapper, null, videoMetas.map(videoMeta => {
-    var _videoMeta$video;
-    return /*#__PURE__*/_react.default.createElement(VideoMetaGrid, {
-      key: videoMeta === null || videoMeta === void 0 || (_videoMeta$video = videoMeta.video) === null || _videoMeta$video === void 0 ? void 0 : _videoMeta$video.id,
-      videoMeta: videoMeta
-    });
-  }));
-}
-function VideoMetaGrid(props) {
-  var _video$file2;
-  const {
-    videoMeta
-  } = props;
-  const {
-    video
-  } = videoMeta;
-  return /*#__PURE__*/_react.default.createElement(VideoMetaGridWrapper, null, /*#__PURE__*/_react.default.createElement(Video, {
-    muted: true,
-    autoPlay: true,
-    loop: true
-  }, /*#__PURE__*/_react.default.createElement("source", {
-    src: video === null || video === void 0 ? void 0 : video.url
-  }), /*#__PURE__*/_react.default.createElement("source", {
-    src: video === null || video === void 0 || (_video$file2 = video.file) === null || _video$file2 === void 0 ? void 0 : _video$file2.url
-  })), /*#__PURE__*/_react.default.createElement(VideoName, null, video === null || video === void 0 ? void 0 : video.name));
-}
-function VideoSelector(props) {
-  const [queryVideos, {
-    loading,
-    error,
-    data: {
-      videos = [],
-      videosCount = 0
-    } = {}
-  }] = (0, _apollo.useLazyQuery)(videosQuery, {
-    fetchPolicy: 'no-cache'
-  });
-  const [currentPage, setCurrentPage] = (0, _react.useState)(0); // page starts with 1, 0 is used to detect initialization
-  const [searchText, setSearchText] = (0, _react.useState)('');
-  const [selected, setSelected] = (0, _react.useState)([]);
-  const pageSize = 6;
-  const {
-    onChange
-  } = props;
-  const onSave = () => {
-    onChange(selected);
-  };
-  const onCancel = () => {
-    onChange([]);
-  };
-  const onSearchBoxChange = async searchInput => {
-    setSearchText(searchInput);
-    setCurrentPage(1);
-  };
-  const onVideosGridSelect = videoEntity => {
-    setSelected(selected => {
-      const filterdSelected = selected.filter(ele => {
-        var _ele$video;
-        return ((_ele$video = ele.video) === null || _ele$video === void 0 ? void 0 : _ele$video.id) !== videoEntity.id;
-      });
-
-      // deselect the video
-      if (filterdSelected.length !== selected.length) {
-        return filterdSelected;
-      }
-
-      // single select
-      return [{
-        video: videoEntity
-      }];
-    });
-  };
-  const selectedVideos = selected.map(ele => {
-    return ele.video;
-  });
-  (0, _react.useEffect)(() => {
-    if (currentPage !== 0) {
-      queryVideos({
-        variables: {
-          searchText: searchText,
-          skip: (currentPage - 1) * pageSize,
-          take: pageSize
-        }
-      });
-    }
-  }, [currentPage, searchText]);
-  let searchResult = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(VideosGrids, {
-    videos: videos,
-    selected: selectedVideos,
-    onSelect: onVideosGridSelect
-  }), /*#__PURE__*/_react.default.createElement(_pagination.Pagination, {
-    currentPage: currentPage,
-    total: videosCount,
-    pageSize: pageSize,
-    onChange: pageIndex => {
-      setCurrentPage(pageIndex);
-    }
-  }));
-  if (loading) {
-    searchResult = /*#__PURE__*/_react.default.createElement("p", null, "searching...");
-  }
-  if (error) {
-    searchResult = /*#__PURE__*/_react.default.createElement(ErrorWrapper, null, /*#__PURE__*/_react.default.createElement("h3", null, "Errors occurs in the `videos` 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, videosQuery.loc.source.body)));
-  }
-  return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
-    isOpen: true
-  }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
-    title: "Select video",
-    actions: {
-      cancel: {
-        label: 'Cancel',
-        action: onCancel
-      },
-      confirm: {
-        label: 'Confirm',
-        action: onSave
-      }
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(VideoSearchBox, {
-    onChange: onSearchBoxChange
-  }), /*#__PURE__*/_react.default.createElement(VideoSelectionWrapper, null, /*#__PURE__*/_react.default.createElement("div", null, searchResult), !!selected.length && /*#__PURE__*/_react.default.createElement(SeparationLine, null), /*#__PURE__*/_react.default.createElement(VideoMetaGrids, {
-    videoMetas: selected
-  })))));
-}