@kids-reporter/draft-renderer 0.4.7 → 0.4.9

package/lib/block-render-map.js

@@ -14,30 +14,26 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // @ts-ignore pkg does not contain ts header file
 
-const ParagraphBlock = _styledComponents.default.div`
+const Paragraph = _styledComponents.default.div`
   width: 100%;
   max-width: 700px;
-  margin: 0 auto 27px auto;
   font-size: 18px;
   font-weight: 500;
   color: #3a4f66;
   letter-spacing: 0.9px;
   line-height: 2;
+  margin: 0 auto;
 
   ${_mediaQuery.default.mobileOnly`
     padding-left: 15px;
     padding-right: 15px;
   `}
+
+  > div[data-block="true"] {
+    margin-bottom: 27px;
+  }
 `;
-function Paragraph({
-  className,
-  children
-}) {
-  return /*#__PURE__*/_react.default.createElement(ParagraphBlock, {
-    className: className
-  }, children);
-}
-const HeadingBlock = _styledComponents.default.div`
+const Heading = _styledComponents.default.div`
   font-weight: 700;
   line-height: 1.5;
   color: #232323;
@@ -73,15 +69,7 @@ const HeadingBlock = _styledComponents.default.div`
     padding-right: 15px;
   `}
 `;
-function Heading({
-  className,
-  children
-}) {
-  return /*#__PURE__*/_react.default.createElement(HeadingBlock, {
-    className: className
-  }, children);
-}
-const ListBlock = _styledComponents.default.ol`
+const List = _styledComponents.default.ol`
   width: 100%;
   max-width: 700px;
   margin: 0 auto 27px auto;
@@ -94,26 +82,16 @@ const ListBlock = _styledComponents.default.ol`
     margin-bottom: 6px;
   }
 `;
-function OrderdedList({
-  children,
-  className
-}) {
-  return /*#__PURE__*/_react.default.createElement(ListBlock, {
-    className: className
-  }, children);
-}
-function UnorderdedList({
-  children,
-  className
-}) {
-  return /*#__PURE__*/_react.default.createElement(ListBlock, {
-    as: "ul",
-    className: className
-  }, children);
-}
+const Atomic = _styledComponents.default.div`
+  /* hide empty block which immediately follows atomic block */
+  & + ${Paragraph} {
+    display: none;
+  }
+`;
 const _blockRenderMap = _immutable.default.Map({
   atomic: {
-    element: 'div'
+    element: 'div',
+    wrapper: /*#__PURE__*/_react.default.createElement(Atomic, null)
   },
   'header-two': {
     element: 'h2',
@@ -133,11 +111,13 @@ const _blockRenderMap = _immutable.default.Map({
   },
   'ordered-list-item': {
     element: 'li',
-    wrapper: /*#__PURE__*/_react.default.createElement(OrderdedList, null)
+    wrapper: /*#__PURE__*/_react.default.createElement(List, null)
   },
   'unordered-list-item': {
     element: 'li',
-    wrapper: /*#__PURE__*/_react.default.createElement(UnorderdedList, null)
+    wrapper: /*#__PURE__*/_react.default.createElement(List, {
+      as: "ul"
+    })
   },
   unstyled: {
     element: 'div',
@@ -149,20 +129,19 @@ exports.blockRenderMap = blockRenderMap;
 const ParagraphForIntroduction = (0, _styledComponents.default)(Paragraph)`
   color: #575757;
 `;
-const OrderdedListForIntroduction = (0, _styledComponents.default)(OrderdedList)`
-  color: #575757;
-`;
-const UnorderdedListForIntroduction = (0, _styledComponents.default)(UnorderdedList)`
+const ListForIntroduction = (0, _styledComponents.default)(List)`
   color: #575757;
 `;
 const blockRenderMapForIntroduction = _draftJs.DefaultDraftBlockRenderMap.merge(_immutable.default.Map({
   'ordered-list-item': {
     element: 'li',
-    wrapper: /*#__PURE__*/_react.default.createElement(OrderdedListForIntroduction, null)
+    wrapper: /*#__PURE__*/_react.default.createElement(ListForIntroduction, null)
   },
   'unordered-list-item': {
     element: 'li',
-    wrapper: /*#__PURE__*/_react.default.createElement(UnorderdedListForIntroduction, null)
+    wrapper: /*#__PURE__*/_react.default.createElement(ListForIntroduction, {
+      as: "ul"
+    })
   },
   unstyled: {
     element: 'div',
@@ -173,12 +152,7 @@ exports.blockRenderMapForIntroduction = blockRenderMapForIntroduction;
 const HeadingForAnnotation = (0, _styledComponents.default)(Heading)`
   margin: 0 auto 27px auto;
 `;
-const OrderdedListForAnnotation = (0, _styledComponents.default)(OrderdedList)`
-  li {
-    font-size: 16px;
-  }
-`;
-const UnorderdedListForAnnotation = (0, _styledComponents.default)(UnorderdedList)`
+const ListForAnnotation = (0, _styledComponents.default)(List)`
   li {
     font-size: 16px;
   }
@@ -203,11 +177,13 @@ const _blockRenderMapForAnnotation = _immutable.default.Map({
   },
   'ordered-list-item': {
     element: 'li',
-    wrapper: /*#__PURE__*/_react.default.createElement(OrderdedListForAnnotation, null)
+    wrapper: /*#__PURE__*/_react.default.createElement(ListForAnnotation, null)
   },
   'unordered-list-item': {
     element: 'li',
-    wrapper: /*#__PURE__*/_react.default.createElement(UnorderdedListForAnnotation, null)
+    wrapper: /*#__PURE__*/_react.default.createElement(ListForAnnotation, {
+      as: "ul"
+    })
   },
   unstyled: {
     element: 'div',

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/image-block.js

@@ -59,12 +59,6 @@ const ArticleBodyContainer = _styledComponents.default.div`
     margin: 0;
   }
 
-  &::after {
-    content: '';
-    display: table;
-    clear: both;
-  }
-
   max-width: 100%;
   margin: 0 auto 27px auto;
 
@@ -81,31 +75,23 @@ const ArticleBodyContainer = _styledComponents.default.div`
     case 'paragraph-width':
       return `
           ${_index.theme.breakpoint.xl} {
-            figure {
-              width: 700px;
-              margin-left: auto;
-              margin-right: auto;
-            }
+            max-width: 700px;
           }
         `;
     case 'right':
       return `
           ${_index.theme.breakpoint.xl} {
-            figure {
-              width: 361px;
-              float: right;
-              margin: 5px 0px 5px 27px;
-            }
+            width: 361px;
+            float: right;
+            margin: 5px 0px 5px 27px;
           }
         `;
     case 'left':
       return `
           ${_index.theme.breakpoint.xl} {
-            figure {
-              width: 361px;
-              float: left;
-              margin: 5px 27px 5px 0px;
-            }
+            width: 361px;
+            float: left;
+            margin: 5px 27px 5px 0px;
           }
         `;
   }
@@ -130,40 +116,15 @@ const InfoBoxContainer = _styledComponents.default.div`
   margin-bottom: 30px;
   width: fit-content;
 
-  &::after {
-    content: '';
-    display: table;
-    clear: both;
-  }
-
   ${props => {
   switch (props.$alignment) {
-    case 'paragraph-width':
-      {
-        return `
-          figure {
-            margin-left: auto;
-            margin-right: auto;
-          }
-          `;
-      }
-    case 'left':
+    case 'center':
       {
-        return `
-          figure {
-            max-width: 50%; 
-            margin-right: auto;
-          }
-          `;
+        return `margin-left: auto; margin-right: auto;`;
       }
     case 'right':
       {
-        return `
-          figure {
-            max-width: 50%;
-            margin-left: auto;
-          }
-        `;
+        return `margin-left: auto`;
       }
   }
 }}

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.7",
+  "version": "0.4.9",
   "description": "",
   "main": "lib/index.js",
   "scripts": {