@kids-reporter/draft-renderer 0.4.6 → 0.4.8

package/lib/block-renderer-fn.js

@@ -10,7 +10,8 @@ const {
   EmbeddedCodeInArticleBody,
   ImageInArticleBody,
   InfoBoxInArticleBody,
-  SlideshowInArticleBody
+  SlideshowInArticleBody,
+  NewsReading
 } = _blockRenderers.blockRenderers;
 const AtomicBlock = props => {
   const entity = props.contentState.getEntity(props.block.getEntityAt(0));
@@ -47,6 +48,12 @@ const AtomicBlock = props => {
           data: entityData
         });
       }
+    case 'NEWS_READING':
+      {
+        return NewsReading({
+          data: entityData
+        });
+      }
   }
   return null;
 };

package/lib/block-renderers/dropdown.js

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dropdown = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+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 DropdownOptionList = _styledComponents.default.ul`
+  margin: 0;
+  position: relative;
+  padding: 4px 0;
+  max-height: 240px;
+  background: #ffffff;
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 16px;
+    left: 16px;
+    height: 1px;
+    background-color: #e0e0e0;
+  }
+`;
+const DropdownOption = _styledComponents.default.li`
+  color: #000928;
+  padding: 8px 16px;
+  &:hover {
+    color: #fff;
+    background-color: #04295e;
+  }
+`;
+const Container = _styledComponents.default.div`
+  width: 100%;
+  overflow: hidden;
+  cursor: pointer;
+
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 1.5;
+`;
+const InputBlock = _styledComponents.default.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 16px;
+  align-items: center;
+`;
+const Input = _styledComponents.default.input`
+  background: #ffffff;
+  font-size: 18px;
+  padding: 12px 0;
+  outline: none;
+  border: none;
+  cursor: pointer;
+`;
+const More = _styledComponents.default.span`
+  margin-left: 10px;
+  font-size: 14px;
+`;
+const Arrow = _styledComponents.default.span`
+  margin-left: auto;
+
+  width: 20px;
+  height: 20px;
+  background-color: #27b5f7;
+  border-radius: 50%;
+  display: flex;
+
+  &::after {
+    content: '';
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 7px;
+    border-style: solid;
+    border-width: 6px;
+    border-color: #fff transparent transparent transparent;
+    transition: transform 0.1s linear;
+    transform: ${({
+  $isListOpen
+}) => $isListOpen ? 'rotate(180deg)' : 'rotate(0deg)'};
+    transform-origin: center 2.5px;
+  }
+`;
+const Dropdown = function ({
+  className,
+  options,
+  onChange,
+  labelForMore = ''
+}) {
+  const [isListOpen, setIsListOpen] = (0, _react.useState)(false);
+  const [selectedOption, setSelectedOption] = (0, _react.useState)(options === null || options === void 0 ? void 0 : options[0]);
+  const toggleList = () => {
+    setIsListOpen(!isListOpen);
+  };
+  const selectOption = option => {
+    toggleList();
+    onChange(option);
+    setSelectedOption(option);
+  };
+  const optionItem = options.map((option, idx) => /*#__PURE__*/_react.default.createElement(DropdownOption, {
+    onClick: () => selectOption(option),
+    key: `option-${idx}`
+  }, option.name));
+  return /*#__PURE__*/_react.default.createElement(Container, {
+    className: className
+  }, /*#__PURE__*/_react.default.createElement(InputBlock, {
+    onClick: toggleList
+  }, /*#__PURE__*/_react.default.createElement(Input, {
+    disabled: true,
+    readOnly: true,
+    placeholder: "\u8ACB\u9078\u64C7",
+    value: selectedOption.name
+  }), options.length > 1 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Arrow, {
+    $isListOpen: isListOpen
+  }), labelForMore && /*#__PURE__*/_react.default.createElement(More, null, labelForMore))), isListOpen && /*#__PURE__*/_react.default.createElement(DropdownOptionList, null, optionItem));
+};
+exports.Dropdown = Dropdown;

package/lib/block-renderers/embedded-code-block.js

@@ -27,11 +27,9 @@ const Block = _styledComponents.default.div`
 `;
 exports.Block = Block;
 const Caption = _styledComponents.default.div`
+  font-size: 14px;
   line-height: 1.43;
   letter-spacing: 0.4px;
-  ${({
-  theme
-}) => theme.fontSize.xs};
   color: #808080;
   padding: 15px 15px 0 15px;
 `;

package/lib/block-renderers/index.js

@@ -9,6 +9,7 @@ var _embeddedCodeBlock = require("./embedded-code-block");
 var _imageBlock = require("./image-block");
 var _infoBoxBlock = require("./info-box-block");
 var _slideshowBlock = require("./slideshow-block");
+var _newsReading = require("./news-reading");
 const blockRenderers = {
   BlockquoteInArticleBody: _blockquote.BlockquoteInArticleBody,
   EmbeddedCodeBlock: _embeddedCodeBlock.EmbeddedCodeBlock,
@@ -16,6 +17,7 @@ const blockRenderers = {
   ImageBlock: _imageBlock.ImageBlock,
   ImageInArticleBody: _imageBlock.ImageInArticleBody,
   InfoBoxInArticleBody: _infoBoxBlock.InfoBoxInArticleBody,
+  NewsReading: _newsReading.NewsReading,
   SlideshowBlock: _slideshowBlock.SlideshowBlock,
   SlideshowInArticleBody: _slideshowBlock.SlideshowInArticleBody
 };

package/lib/block-renderers/news-reading.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NewsReading = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _dropdown = require("./dropdown");
+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 ArticleBodyContainer = _styledComponents.default.div`
+  max-width: 600px;
+  width: calc(280 / 320 * 100%);
+  border: 1px solid #eaeaea;
+  border-radius: 20px;
+  margin-left: auto;
+  margin-right: auto;
+`;
+const Divider = _styledComponents.default.div`
+  border: 1px solid #eaeaea;
+  margin-bottom: 20px;
+`;
+const IframeContainer = _styledComponents.default.div`
+  padding: 20px;
+`;
+const NewsReading = function ({
+  className,
+  data
+}) {
+  const {
+    readings
+  } = data;
+  const options = (0, _react.useMemo)(() => readings.map(r => {
+    return {
+      name: r.name,
+      value: r.name
+    };
+  }), [readings]);
+  const [selectedOption, setSelectedOption] = (0, _react.useState)(options[0]);
+  const selectedReading = readings.find(r => r.name === selectedOption.value);
+  return /*#__PURE__*/_react.default.createElement(ArticleBodyContainer, {
+    className: className
+  }, /*#__PURE__*/_react.default.createElement(_dropdown.Dropdown, {
+    options: options,
+    onChange: option => setSelectedOption(option),
+    labelForMore: "\u66F4\u591A\u8A9E\u8A00"
+  }), /*#__PURE__*/_react.default.createElement(Divider, null), (selectedReading === null || selectedReading === void 0 ? void 0 : selectedReading.embedCode) && /*#__PURE__*/_react.default.createElement(IframeContainer, null, /*#__PURE__*/_react.default.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: selectedReading.embedCode
+    }
+  })));
+};
+exports.NewsReading = NewsReading;

package/lib/utils/media-query.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mediaQuery = exports.breakpoints = void 0;
+const breakpoints = {
+  small: 320,
+  medium: 760,
+  large: 1440
+};
+exports.breakpoints = breakpoints;
+const mediaQuery = {
+  smallOnly: `@media (max-width: ${breakpoints.medium - 1}px)`,
+  mediumOnly: `@media (min-width: ${breakpoints.medium}px) and (max-width: ${breakpoints.large - 1}px)`,
+  mediumAbove: `@media (min-width: ${breakpoints.medium}px)`,
+  largeBelow: `@media (max-width: ${breakpoints.large - 1}px)`,
+  largeOnly: `@media (min-width: ${breakpoints.large}px)`
+};
+exports.mediaQuery = mediaQuery;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kids-reporter/draft-renderer",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "description": "",
   "main": "lib/index.js",
   "scripts": {