@kids-reporter/draft-editor 0.1.0 → 0.2.0

package/lib/buttons/selector/audio-selector.js

@@ -1,279 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AudioSelector = AudioSelector;
-
-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 AudioSearchBox = (0, _styledComponents.default)(_searchBox.SearchBox)`
-  margin-top: 10px;
-`;
-const AudioSelectionWrapper = _styledComponents.default.div`
-  overflow: auto;
-  margin-top: 10px;
-`;
-const AudioGridsWrapper = _styledComponents.default.div`
-  display: flex;
-  flex-wrap: wrap;
-  overflow: auto;
-`;
-const AudioGridWrapper = _styledComponents.default.div`
-  flex: 0 0 50%;
-  cursor: pointer;
-  padding: 0 10px 10px;
-`;
-const AudioMetaGridsWrapper = _styledComponents.default.div`
-  display: flex;
-  flex-wrap: wrap;
-  overflow: auto;
-`;
-const AudioMetaGridWrapper = _styledComponents.default.div`
-  flex: 0 0 50%;
-  cursor: pointer;
-  padding: 0 10px 10px;
-`;
-const Audio = _styledComponents.default.audio`
-  width: 100%;
-`;
-const AudioName = _styledComponents.default.p`
-  text-align: center;
-`;
-const SeparationLine = _styledComponents.default.div`
-  border: #e1e5e9 1px solid;
-  margin-top: 10px;
-  margin-bottom: 10px;
-`;
-const AudioSelected = _styledComponents.default.div`
-  height: 1.4rem;
-`;
-const ErrorWrapper = _styledComponents.default.div`
-  & * {
-    margin: 0;
-  }
-`;
-
-function AudiosGrids(props) {
-  const {
-    audios,
-    selected,
-    onSelect
-  } = props;
-  return /*#__PURE__*/_react.default.createElement(AudioGridsWrapper, null, audios.map(audio => {
-    return /*#__PURE__*/_react.default.createElement(AudioGrid, {
-      key: audio.id,
-      isSelected: selected === null || selected === void 0 ? void 0 : selected.includes(audio),
-      onSelect: () => onSelect(audio),
-      audio: audio
-    });
-  }));
-}
-
-function AudioGrid(props) {
-  var _audio$file;
-
-  const {
-    audio,
-    onSelect,
-    isSelected
-  } = props;
-  return /*#__PURE__*/_react.default.createElement(AudioGridWrapper, {
-    key: audio === null || audio === void 0 ? void 0 : audio.id,
-    onClick: () => onSelect(audio)
-  }, /*#__PURE__*/_react.default.createElement(AudioSelected, null, isSelected ? /*#__PURE__*/_react.default.createElement("i", {
-    className: "fas fa-check-circle"
-  }) : null), /*#__PURE__*/_react.default.createElement(Audio, {
-    controls: true
-  }, /*#__PURE__*/_react.default.createElement("source", {
-    src: audio === null || audio === void 0 ? void 0 : audio.urlOriginal
-  }), /*#__PURE__*/_react.default.createElement("source", {
-    src: audio === null || audio === void 0 ? void 0 : (_audio$file = audio.file) === null || _audio$file === void 0 ? void 0 : _audio$file.url
-  })), /*#__PURE__*/_react.default.createElement(AudioName, null, audio === null || audio === void 0 ? void 0 : audio.name));
-}
-
-function AudioMetaGrids(props) {
-  const {
-    audioMetas
-  } = props;
-  return /*#__PURE__*/_react.default.createElement(AudioMetaGridsWrapper, null, audioMetas.map(audioMeta => {
-    var _audioMeta$audio;
-
-    return /*#__PURE__*/_react.default.createElement(AudioMetaGrid, {
-      key: audioMeta === null || audioMeta === void 0 ? void 0 : (_audioMeta$audio = audioMeta.audio) === null || _audioMeta$audio === void 0 ? void 0 : _audioMeta$audio.id,
-      audioMeta: audioMeta
-    });
-  }));
-}
-
-function AudioMetaGrid(props) {
-  var _audio$file2;
-
-  const {
-    audioMeta
-  } = props;
-  const {
-    audio
-  } = audioMeta;
-  return /*#__PURE__*/_react.default.createElement(AudioMetaGridWrapper, null, /*#__PURE__*/_react.default.createElement(Audio, {
-    controls: true
-  }, /*#__PURE__*/_react.default.createElement("source", {
-    src: audio === null || audio === void 0 ? void 0 : audio.urlOriginal
-  }), /*#__PURE__*/_react.default.createElement("source", {
-    src: audio === null || audio === void 0 ? void 0 : (_audio$file2 = audio.file) === null || _audio$file2 === void 0 ? void 0 : _audio$file2.url
-  })), /*#__PURE__*/_react.default.createElement(AudioName, null, audio === null || audio === void 0 ? void 0 : audio.name));
-}
-
-const AudiosQuery = (0, _apollo.gql)`
-  query Audios($searchText: String!, $take: Int, $skip: Int) {
-    audioFilesCount(where: { name: { contains: $searchText } })
-    audioFiles(
-      where: { name: { contains: $searchText } }
-      take: $take
-      skip: $skip
-    ) {
-      id
-      name
-      file {
-        url
-      }
-      heroImage {
-        imageFile {
-          url
-        }
-        resized {
-          original
-          tiny
-          small 
-          medium 
-          large
-        }
-      }
-    }
-  }
-`;
-
-function AudioSelector(props) {
-  const [queryAudios, {
-    loading,
-    error,
-    data: {
-      audioFiles = [],
-      audioFilesCount = 0
-    } = {}
-  }] = (0, _apollo.useLazyQuery)(AudiosQuery, {
-    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 onAudiosGridSelect = audioEntity => {
-    setSelected(selected => {
-      const filterdSelected = selected.filter(ele => {
-        var _ele$audio;
-
-        return ((_ele$audio = ele.audio) === null || _ele$audio === void 0 ? void 0 : _ele$audio.id) !== audioEntity.id;
-      }); // deselect the audio
-
-      if (filterdSelected.length !== selected.length) {
-        return filterdSelected;
-      } // single select
-
-
-      return [{
-        audio: audioEntity
-      }];
-    });
-  };
-
-  const selectedAudios = selected.map(ele => {
-    return ele.audio;
-  });
-  (0, _react.useEffect)(() => {
-    if (currentPage !== 0) {
-      queryAudios({
-        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(AudiosGrids, {
-    audios: audioFiles,
-    selected: selectedAudios,
-    onSelect: onAudiosGridSelect
-  }), /*#__PURE__*/_react.default.createElement(_pagination.Pagination, {
-    currentPage: currentPage,
-    total: audioFilesCount,
-    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 `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)));
-  }
-
-  return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
-    isOpen: true
-  }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
-    title: "Select audio",
-    actions: {
-      cancel: {
-        label: 'Cancel',
-        action: onCancel
-      },
-      confirm: {
-        label: 'Confirm',
-        action: onSave
-      }
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(AudioSearchBox, {
-    onChange: onSearchBoxChange
-  }), /*#__PURE__*/_react.default.createElement(AudioSelectionWrapper, null, /*#__PURE__*/_react.default.createElement("div", null, searchResult), !!selected.length && /*#__PURE__*/_react.default.createElement(SeparationLine, null), /*#__PURE__*/_react.default.createElement(AudioMetaGrids, {
-    audioMetas: selected
-  })))));
-}

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

@@ -1,317 +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
-      name
-      type
-      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, _post$heroImage$resiz;
-
-  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 ? void 0 : (_post$heroImage$resiz = _post$heroImage.resized) === null || _post$heroImage$resiz === void 0 ? void 0 : _post$heroImage$resiz.original,
-    onError: e => {
-      var _post$heroImage2, _post$heroImage2$imag;
-
-      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;
-    }
-  }), /*#__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 ? void 0 : (_postMetas$post = postMetas.post) === null || _postMetas$post === void 0 ? void 0 : _postMetas$post.id,
-      postMeta: postMetas
-    });
-  }));
-}
-
-function PostMetaGrid(props) {
-  var _post$heroImage3, _post$heroImage3$resi;
-
-  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 ? 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,
-    onError: e => {
-      var _post$heroImage4, _post$heroImage4$imag;
-
-      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;
-    }
-  }), /*#__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,
-    maxSelectCount = 3
-  } = 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) {
-        let newSelected = selected.concat([{
-          post: postEntity
-        }]);
-
-        if (maxSelectCount && newSelected.length >= maxSelectCount) {
-          newSelected = newSelected.slice(-maxSelectCount);
-        }
-
-        return newSelected;
-      } // 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")))));
-}