@daoyi/nmtl-ui 2.0.1-beta.52 → 2.0.1-beta.53

package/lib/components/KeywordSearch-568a8a44.js

@@ -0,0 +1,139 @@
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-3d9c8289.js';
+import React__default, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-66babe67.js';
+import axios from 'axios';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+import { A as Autocomplete } from './Autocomplete-3dae80ca.js';
+
+var css_248z = ".keywordSearch {\n  border-radius: 4px;\n  width: 100%;\n  margin-right: 14px; }\n  .keywordSearch--animation .autocomplete {\n    transition: max-width 0.3s ease-out;\n    max-width: 240px; }\n  .keywordSearch--focus {\n    flex: 1; }\n    .keywordSearch--focus .autocomplete {\n      max-width: 100%; }\n  .keywordSearch .MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon .MuiAutocomplete-inputRoot[class*='MuiOutlinedInput-root'] {\n    border-radius: 10px;\n    background-color: #ffffff66; }\n";
+styleInject(css_248z);
+
+const removeDuplicateItem = function (array) {
+  let key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'value';
+  if (Array.isArray(array)) return array.filter((v, i, a) => a.findIndex(t => t[key] === v[key]) === i);
+  return [];
+};
+
+// 必須要有的參數：name
+var FILTER_ID = 'id';
+var FILTER_KEY = 'name';
+var KeywordSearch = function KeywordSearch(_ref) {
+  var className = _ref.className,
+    animation = _ref.animation,
+    filterSameName = _ref.filterSameName,
+    keyword = _ref.keyword,
+    searchAPI = _ref.searchAPI,
+    placeholder = _ref.placeholder,
+    setMenuOpen = _ref.setMenuOpen,
+    menuOpen = _ref.menuOpen,
+    onSearch = _ref.onSearch;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    options = _useState4[0],
+    setOptions = _useState4[1];
+  var _useState5 = useState(keyword),
+    _useState6 = _slicedToArray(_useState5, 2),
+    currentKeyword = _useState6[0],
+    setCurrentKeyword = _useState6[1];
+  var fetchSearchList = function fetchSearchList(text) {
+    if (!text || text.length === 0) return;
+    setLoading(true);
+    axios.get(searchAPI, {
+      params: {
+        keyword: text
+      }
+    }).then(function (response) {
+      if (response.data && response.data.data) {
+        setOptions(removeDuplicateItem(response.data.data, FILTER_ID));
+      }
+    }).finally(function () {
+      return setLoading(false);
+    });
+  };
+
+  /* 偵測keyword變動時開始搜尋 */
+  useEffect(function () {
+    return fetchSearchList(currentKeyword);
+  }, [currentKeyword]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('keywordSearch', {
+      'keywordSearch--animation': animation
+    }, {
+      'keywordSearch--focus': menuOpen
+    }, className)
+  }, /*#__PURE__*/React__default.createElement(Autocomplete, {
+    freeTyping: true,
+    renderAfterDefaultValueChange: true,
+    defaultValue: {
+      label: keyword,
+      value: keyword
+    },
+    loading: loading,
+    options: (filterSameName ? removeDuplicateItem(options, FILTER_KEY) : options).map(function (_ref2) {
+      var name = _ref2.name,
+        id = _ref2.id,
+        value = _ref2.value,
+        label = _ref2.label;
+      return {
+        value: id || value || name,
+        label: name || label
+      };
+    }),
+    placeholder: placeholder,
+    onSearch: setCurrentKeyword,
+    onChange: function onChange(result) {
+      if (result) onSearch(options.find(function (_ref3) {
+        var id = _ref3.id,
+          value = _ref3.value;
+        return id === result.value || value === result.value;
+      }) || result);
+    },
+    onEnter: function onEnter(event, result) {
+      return onSearch(result);
+    },
+    onFocus: function onFocus() {
+      return setMenuOpen(true);
+    },
+    onBlur: function onBlur() {
+      return setMenuOpen(false);
+    }
+  }));
+};
+KeywordSearch.defaultProps = {
+  className: undefined,
+  animation: false,
+  filterSameName: true,
+  keyword: undefined,
+  searchAPI: undefined,
+  placeholder: undefined,
+  menuOpen: false,
+  setMenuOpen: function setMenuOpen() {},
+  onSearch: function onSearch() {}
+};
+KeywordSearch.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 點擊後自動展開(動畫) */
+  animation: PropTypes.bool,
+  /** 是否過濾相同名字的項目 */
+  filterSameName: PropTypes.bool,
+  /** 預設的關鍵字 */
+  keyword: PropTypes.string,
+  /** SearchBar的API */
+  searchAPI: PropTypes.string,
+  /** 提示字 */
+  placeholder: PropTypes.string,
+  /** Dropdown是否開啟 */
+  menuOpen: PropTypes.bool,
+  /** 設定Dropdown開啟 */
+  setMenuOpen: PropTypes.func,
+  /** 搜尋後點擊的callback */
+  onSearch: PropTypes.func
+};
+
+export { KeywordSearch as K };

package/lib/components/KeywordSearch.js

@@ -0,0 +1,15 @@
+export { K as default } from './KeywordSearch-568a8a44.js';
+import './_rollupPluginBabelHelpers-3d9c8289.js';
+import 'react';
+import 'prop-types';
+import './index-66babe67.js';
+import 'axios';
+import './style-inject.es-1f59c1d0.js';
+import './Autocomplete-3dae80ca.js';
+import './debounce-127da66c.js';
+import './isObjectLike-e111475d.js';
+import './_commonjsHelpers-70de2c37.js';
+import '@material-ui/lab';
+import '@material-ui/core';
+import '@material-ui/icons';
+import './Empty-7318f658.js';

package/lib/components/KeywordTicker.js

@@ -0,0 +1,190 @@
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-3d9c8289.js';
+import React__default, { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-66babe67.js';
+import { F as ForwardLink } from './ForwardLink-0571e627.js';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+import './index-fdcc884e.js';
+import 'react-router-dom';
+import '@material-ui/core';
+
+var css_248z = ".keywordTicker {\n  width: 100%;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center; }\n  .keywordTicker__track {\n    display: flex;\n    width: 100%;\n    padding: 20px 0px;\n    background-color: #ece8c0;\n    overflow: hidden;\n    margin-left: -80px;\n    padding-left: 100px;\n    z-index: 1;\n    position: relative; }\n  .keywordTicker__items {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    flex-wrap: nowrap;\n    position: relative; }\n  .keywordTicker-item {\n    width: auto;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    white-space: nowrap;\n    cursor: pointer; }\n  .keywordTicker-text {\n    font-size: 1.5rem;\n    z-index: 2;\n    font-weight: bold;\n    color: #825c0d;\n    border-left: 2px solid #fff;\n    padding: 0px 40px; }\n  .keywordTicker__img {\n    z-index: 2;\n    position: relative;\n    display: flex; }\n    .keywordTicker__img img {\n      height: 100%;\n      max-height: 195px;\n      image-rendering: -webkit-optimize-contrast;\n      position: relative; }\n  .keywordTicker--fake {\n    position: absolute;\n    opacity: 0;\n    width: 100%; }\n\n@media only screen and (max-width: 768px) {\n  .keywordTicker-text {\n    font-size: 1.5rem;\n    padding: 0px 15px; }\n  .keywordTicker__img img {\n    max-height: 104px;\n    left: -60px; }\n  .keywordTicker__track {\n    padding: 10px 0px;\n    margin-left: -100px; } }\n\n@media only screen and (max-width: 484px) {\n  .keywordTicker-text {\n    font-size: 14px; } }\n";
+styleInject(css_248z);
+
+var KeywordTicker = function KeywordTicker(_ref) {
+  var className = _ref.className,
+    tickerStyles = _ref.tickerStyles,
+    leftImg = _ref.leftImg,
+    tickerAttribute = _ref.tickerAttribute,
+    setTickerAttribute = _ref.setTickerAttribute,
+    _onClick = _ref.onClick;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    tracking = _useState2[0],
+    setTracking = _useState2[1];
+  var _ref2 = tickerAttribute || {
+      result: [],
+      mounted: false,
+      strp: 0
+    },
+    result = _ref2.result,
+    mounted = _ref2.mounted,
+    step = _ref2.step;
+  var _ref3 = tickerStyles || {},
+    _ref3$fontColor = _ref3.fontColor,
+    fontColor = _ref3$fontColor === void 0 ? '#825c0d' : _ref3$fontColor,
+    _ref3$backgroundColor = _ref3.backgroundColor,
+    backgroundColor = _ref3$backgroundColor === void 0 ? '#ece8c0' : _ref3$backgroundColor,
+    _ref3$borderColor = _ref3.borderColor,
+    borderColor = _ref3$borderColor === void 0 ? '#fff' : _ref3$borderColor;
+  var track = useRef(null);
+  var words = useRef(null);
+
+  // 1.算出api長出UI的長度, 並計算需溢出次數
+  useEffect(function () {
+    // 第一次mount且參考的dom皆就緒
+    if (result && !mounted && track.current && words.current) {
+      // dom初始值
+      var _trackWidth$wordsWidt = {
+          trackWidth: track.current.offsetWidth || 0,
+          wordsWidth: words.current.offsetWidth || 0
+        },
+        trackWidth = _trackWidth$wordsWidt.trackWidth,
+        wordsWidth = _trackWidth$wordsWidt.wordsWidth;
+      var wordsNum = Math.ceil(trackWidth / wordsWidth) > 0 ? Math.ceil(trackWidth / wordsWidth) : 0;
+      var newResults = Array(wordsNum * 2).fill(null).map(function () {
+        return result;
+      }).flat();
+      setTickerAttribute({
+        result: newResults,
+        loading: false,
+        mounted: true,
+        step: wordsNum * wordsWidth
+      });
+    }
+  }, [result]);
+
+  // 2.取得溢出後的文字長度製作無限跑馬燈動畫 (跑馬燈動畫核心)
+  useEffect(function () {
+    if (mounted && window) {
+      // dom初始值
+      var _wordsWidth = {
+          wordsWidth: words.current.offsetWidth || 0
+        },
+        wordsWidth = _wordsWidth.wordsWidth;
+
+      // 不同螢幕寬度時取得不同播放速度
+      var responsiveSpeed = function responsiveSpeed(width) {
+        if (width) {
+          if (width < 767) return 0.06 * 0.6;
+          if (width < 480) return 0.06 * 0.55;
+          return 0.06;
+        }
+        return 0.06;
+      };
+
+      // 起始點為0
+      var startLine = 0;
+
+      // animation config
+      var _buffer$speed = {
+          buffer: startLine,
+          // 左側跑馬燈進入buffer
+          speed: responsiveSpeed(window.innerWidth) || 0.06 // 速度
+        },
+        speed = _buffer$speed.speed;
+      var _start$end = {
+          start: startLine,
+          end: wordsWidth - step
+        },
+        start = _start$end.start,
+        end = _start$end.end;
+
+      // 固定移動速度並計算動畫時間
+      var distance = startLine + wordsWidth - step; // 減掉單次畫面溢出的長度
+      var duration = distance / speed;
+      var initTracking = words.current.animate(
+      // keyframes
+      [{
+        left: "".concat(start, "px")
+      }, {
+        left: "-".concat(end, "px")
+      }],
+      // timing options
+      {
+        duration: duration,
+        iterations: Infinity
+      });
+
+      // 初始化並將狀態傳出
+      setTracking(initTracking);
+    }
+  }, [mounted, step]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('keywordTicker', className)
+  }, leftImg && /*#__PURE__*/React__default.createElement("div", {
+    className: "keywordTicker__img"
+  }, /*#__PURE__*/React__default.createElement("img", {
+    src: leftImg,
+    alt: "hotKeyword"
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "keywordTicker__track",
+    ref: track,
+    style: {
+      backgroundColor: backgroundColor
+    },
+    onMouseEnter: function onMouseEnter() {
+      return tracking === null || tracking === void 0 ? void 0 : tracking.pause();
+    },
+    onMouseLeave: function onMouseLeave() {
+      return tracking === null || tracking === void 0 ? void 0 : tracking.play();
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "keywordTicker__items",
+    ref: words
+  }, (result || []).map(function (_ref4, index) {
+    var keyword = _ref4.keyword;
+    return /*#__PURE__*/React__default.createElement(ForwardLink, {
+      key: index.toString(),
+      className: "keywordTicker-item",
+      pathname: "/knowledge/keyword",
+      search: {
+        keyword: keyword
+      },
+      disabled: _onClick
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "keywordTicker-text",
+      style: {
+        color: fontColor,
+        borderColor: borderColor
+      },
+      onClick: function onClick() {
+        return _onClick === null || _onClick === void 0 ? void 0 : _onClick(keyword);
+      }
+    }, keyword));
+  }))));
+};
+KeywordTicker.defaultProps = {
+  className: undefined,
+  leftImg: undefined,
+  tickerStyles: undefined,
+  tickerAttribute: undefined,
+  setTickerAttribute: function setTickerAttribute() {},
+  onClick: undefined
+};
+KeywordTicker.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** Custom image by each project */
+  leftImg: PropTypes.string,
+  /** Items Color */
+  tickerStyles: PropTypes.objectOf(PropTypes.any),
+  /** Attribute of result, loading, mounted, step */
+  tickerAttribute: PropTypes.objectOf(PropTypes.any),
+  /** Set Attribute */
+  setTickerAttribute: PropTypes.func,
+  /** Click callback */
+  onClick: PropTypes.func
+};
+
+export { KeywordTicker as default };

package/lib/components/Keywords.js

@@ -0,0 +1,317 @@
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-3d9c8289.js';
+import React__default, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-66babe67.js';
+import { M as Modal } from './Modal-64c4ab0d.js';
+import { Typography } from '@material-ui/core';
+import { r as requireCreateSvgIcon, i as interopRequireDefault, a as interopRequireWildcard } from './createSvgIcon-a79ae4b1.js';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+import '@material-ui/icons';
+import './Button-433372aa.js';
+import './Spin-8a5a600d.js';
+import './_commonjsHelpers-70de2c37.js';
+import './defaultTheme-19a14721.js';
+import 'react-is';
+import '@material-ui/styles';
+import 'react-dom';
+
+const useRWD = () => {
+  const [device, setDevice] = useState('PC');
+  const handleRWD = () => {
+    if (window.innerWidth > 768) setDevice('PC');else if (window.innerWidth > 576) setDevice('tablet');else setDevice('mobile');
+  };
+  useEffect(() => {
+    handleRWD();
+    window.addEventListener('resize', handleRWD);
+    return () => {
+      window.removeEventListener('resize', handleRWD);
+    };
+  }, []);
+  return device;
+};
+
+var MoreHoriz = {};
+
+var _interopRequireDefault = interopRequireDefault.exports;
+
+var _interopRequireWildcard = interopRequireWildcard.exports;
+
+Object.defineProperty(MoreHoriz, "__esModule", {
+  value: true
+});
+var default_1 = MoreHoriz.default = void 0;
+
+var React = _interopRequireWildcard(React__default);
+
+var _createSvgIcon = _interopRequireDefault(requireCreateSvgIcon());
+
+var _default = (0, _createSvgIcon.default)( /*#__PURE__*/React.createElement("path", {
+  d: "M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+}), 'MoreHoriz');
+
+default_1 = MoreHoriz.default = _default;
+
+var css_248z$2 = ".keywordList {\n  display: flex;\n  flex-wrap: wrap;\n  margin-top: 0.8rem; }\n  .keywordList__item {\n    font-size: 1.125rem !important;\n    border-radius: 5px;\n    margin-right: 0.5rem !important;\n    margin-bottom: 0.5rem !important;\n    cursor: pointer; }\n    .keywordList__item__hover {\n      border-radius: 5px;\n      line-height: normal;\n      padding: 0.125rem 0.625rem;\n      background: transparent;\n      transition: 0.3s background ease-in-out; }\n      .keywordList__item__hover:hover {\n        background: rgba(0, 0, 0, 0.1); }\n  .keywordList__icon svg {\n    font-size: 1rem;\n    line-height: 1rem; }\n  .keywordList__icon .keywordList__item__hover {\n    display: flex;\n    align-items: center;\n    height: 100%;\n    padding: 0.125rem 0.875rem; }\n\n@media screen and (max-width: 484px) {\n  .keywordList__item {\n    font-size: 0.75rem !important; } }\n";
+styleInject(css_248z$2);
+
+const KeywordList = _ref => {
+  let {
+    className,
+    keywords,
+    backgroundColor,
+    textColor,
+    limit,
+    onMoreClick,
+    onKeywordClick
+  } = _ref;
+  return Array.isArray(keywords) && /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('keywordList', className)
+  }, (limit ? keywords.slice(0, limit) : keywords).map((keyword, i) => /*#__PURE__*/React__default.createElement(Typography, {
+    color: "textSecondary",
+    className: "keywordList__item",
+    key: i.toString(),
+    onClick: () => onKeywordClick(keyword)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      color: textColor,
+      backgroundColor
+    },
+    className: "keywordList__item__hover"
+  }, keyword))), limit && keywords.length > limit && /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('keywordList__item', 'keywordList__icon'),
+    style: {
+      backgroundColor
+    },
+    onClick: onMoreClick
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "keywordList__item__hover",
+    style: {
+      color: textColor
+    }
+  }, /*#__PURE__*/React__default.createElement(default_1, null))));
+};
+KeywordList.defaultProps = {
+  className: undefined,
+  keywords: undefined,
+  backgroundColor: undefined,
+  textColor: undefined,
+  limit: undefined,
+  onMoreClick: () => {},
+  onKeywordClick: () => {}
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+KeywordList.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 背景顏色 */
+  backgroundColor: PropTypes.string,
+  /** 文字顏色 */
+  textColor: PropTypes.string,
+  /** 關鍵字 */
+  keywords: PropTypes.arrayOf(PropTypes.any),
+  /** 關鍵字限制(用來評估是否要啟用顯示更多) */
+  limit: PropTypes.number,
+  /** 顯示更多被按時 */
+  onMoreClick: PropTypes.func,
+  /** 關鍵字被按時 */
+  onKeywordClick: PropTypes.func
+};
+
+var css_248z$1 = ".keywordModal__content {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  border-radius: 5px; }\n  .keywordModal__content__image {\n    display: flex;\n    justify-content: center;\n    width: 100%; }\n    .keywordModal__content__image__img {\n      height: 7.75rem;\n      object-fit: scale-down; }\n  .keywordModal__content__detail {\n    width: 100%;\n    padding: 1rem 1.25rem;\n    border-radius: 5px; }\n    .keywordModal__content__detail__title {\n      font-weight: bold;\n      font-size: 1.5rem;\n      text-decoration: underline;\n      cursor: pointer; }\n    .keywordModal__content__detail__desc {\n      margin-top: 0.8rem;\n      font-size: 1rem;\n      display: -webkit-box;\n      overflow: hidden;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical; }\n    .keywordModal__content__detail__author {\n      margin-top: 0.8rem;\n      font-size: 1.25rem;\n      cursor: pointer; }\n      .keywordModal__content__detail__author:hover {\n        text-decoration: underline; }\n\n.keywordModal p {\n  font-family: 'Noto Sans TC', 'Arial', sans-serif !important; }\n\n.keywordModal .MuiPaper-root {\n  min-width: initial !important; }\n";
+styleInject(css_248z$1);
+
+const KeywordModal = props => {
+  const {
+    visible,
+    setVisible,
+    cardData
+  } = props;
+  const {
+    modalTextColor,
+    modalImageColor,
+    backgroundColor,
+    modalBackgroundColor,
+    textColor
+  } = props;
+  const {
+    onKeywordClick,
+    onTitleClick,
+    onAuthorClick
+  } = props;
+  const {
+    author,
+    imgUrl,
+    title
+  } = cardData || {};
+  const keywords = cardData && cardData.keywords && cardData.keywords.split('\n') || [];
+  const contentColor = modalTextColor || textColor;
+  // const desc = introduction || description;
+
+  return /*#__PURE__*/React__default.createElement(Modal, {
+    transparent: true,
+    size: "small",
+    className: "keywordModal",
+    visible: visible,
+    footer: null,
+    onCancel: () => setVisible(false)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "keywordModal__content",
+    style: {
+      backgroundColor: modalBackgroundColor
+    }
+  }, imgUrl && /*#__PURE__*/React__default.createElement("div", {
+    className: "keywordModal__content__image",
+    style: {
+      backgroundColor: modalImageColor
+    }
+  }, /*#__PURE__*/React__default.createElement("img", {
+    className: "keywordModal__content__image__img",
+    src: imgUrl,
+    alt: ""
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "keywordModal__content__detail"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    title: title,
+    className: "keywordModal__content__detail__title",
+    style: {
+      color: contentColor
+    },
+    onClick: onTitleClick
+  }, title), author && /*#__PURE__*/React__default.createElement("div", {
+    className: "keywordModal__content__detail__author",
+    title: author,
+    onClick: onAuthorClick,
+    style: {
+      color: contentColor
+    }
+  }, author), /*#__PURE__*/React__default.createElement(KeywordList, {
+    keywords,
+    textColor,
+    backgroundColor,
+    onKeywordClick
+  }))));
+};
+KeywordModal.defaultProps = {
+  visible: undefined,
+  setVisible: () => {},
+  modalTextColor: undefined,
+  modalImageColor: undefined,
+  modalBackgroundColor: undefined,
+  backgroundColor: undefined,
+  textColor: undefined,
+  cardData: undefined,
+  onKeywordClick: () => {},
+  onTitleClick: () => {},
+  onAuthorClick: () => {}
+};
+KeywordModal.propTypes = {
+  visible: PropTypes.bool,
+  setVisible: PropTypes.func,
+  cardData: PropTypes.objectOf(PropTypes.any),
+  modalTextColor: PropTypes.string,
+  modalImageColor: PropTypes.string,
+  modalBackgroundColor: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  textColor: PropTypes.string,
+  onKeywordClick: PropTypes.func,
+  onTitleClick: PropTypes.func,
+  onAuthorClick: PropTypes.func
+};
+
+var css_248z = ".keywords p {\n  font-family: 'Noto Sans TC', 'Arial', sans-serif !important; }\n";
+styleInject(css_248z);
+
+var Keywords = function Keywords(props) {
+  var className = props.className,
+    keywords = props.keywords,
+    cardData = props.cardData,
+    limit = props.limit,
+    theme = props.theme;
+  var _ref = theme || {},
+    backgroundColor = _ref.backgroundColor,
+    textColor = _ref.textColor,
+    modalTextColor = _ref.modalTextColor,
+    modalImageColor = _ref.modalImageColor,
+    modalBackgroundColor = _ref.modalBackgroundColor;
+  var onKeywordClick = props.onKeywordClick,
+    _onMoreClick = props.onMoreClick,
+    onTitleClick = props.onTitleClick,
+    onAuthorClick = props.onAuthorClick;
+  var currentKeywords = cardData && cardData.keywords && cardData.keywords.split('\n') || keywords || [];
+  if (currentKeywords.filter(function (keyword) {
+    return keyword && keyword.length > 0;
+  }).length === 0) return null;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    modalVisible = _useState2[0],
+    setModalVisible = _useState2[1];
+  var device = useRWD();
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('keywords', className)
+  }, /*#__PURE__*/React__default.createElement(KeywordList, {
+    limit: limit || (device === 'mobile' ? 1 : undefined),
+    keywords: currentKeywords,
+    backgroundColor: backgroundColor,
+    textColor: textColor,
+    onMoreClick: function onMoreClick() {
+      return cardData ? setModalVisible(true) : _onMoreClick();
+    },
+    onKeywordClick: onKeywordClick
+  }), /*#__PURE__*/React__default.createElement(KeywordModal, {
+    visible: modalVisible,
+    setVisible: setModalVisible,
+    modalTextColor: modalTextColor,
+    modalImageColor: modalImageColor,
+    modalBackgroundColor: modalBackgroundColor,
+    cardData: cardData,
+    backgroundColor: backgroundColor,
+    textColor: textColor,
+    onKeywordClick: onKeywordClick,
+    onTitleClick: onTitleClick,
+    onAuthorClick: onAuthorClick
+  }));
+};
+Keywords.defaultProps = {
+  className: undefined,
+  keywords: undefined,
+  cardData: undefined,
+  limit: undefined,
+  theme: undefined,
+  onKeywordClick: function onKeywordClick() {},
+  onMoreClick: function onMoreClick() {},
+  onTitleClick: function onTitleClick() {},
+  onAuthorClick: function onAuthorClick() {}
+};
+Keywords.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 關鍵字 */
+  keywords: PropTypes.arrayOf(PropTypes.any),
+  /** 卡片資訊 */
+  cardData: PropTypes.objectOf(PropTypes.any),
+  /** 關鍵字限制(用來評估是否要啟用顯示更多) */
+  limit: PropTypes.number,
+  theme: PropTypes.shape({
+    /** 背景顏色 */
+    backgroundColor: PropTypes.string,
+    /** 文字顏色 */
+    textColor: PropTypes.string,
+    /** Modal標題顏色 */
+    modalTextColor: PropTypes.string,
+    /** Modal圖片背景顏色 */
+    modalImageColor: PropTypes.string,
+    /** Modal背景顏色 */
+    modalBackgroundColor: PropTypes.string
+  }),
+  /** 當關鍵字被點擊時 */
+  onKeywordClick: PropTypes.func,
+  /** 顯示更多被按時 */
+  onMoreClick: PropTypes.func,
+  /** 標題被按時 */
+  onTitleClick: PropTypes.func,
+  /** 作者被按時 */
+  onAuthorClick: PropTypes.func
+};
+
+export { Keywords as default };

package/lib/components/Loading.js

@@ -0,0 +1,28 @@
+import React__default from 'react';
+import { c as classNames } from './index-66babe67.js';
+import { CircularProgress } from '@material-ui/core';
+import PropTypes from 'prop-types';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+var css_248z = ".loadingPage {\n  padding: 4rem 0;\n  color: #0087dc;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center; }\n";
+styleInject(css_248z);
+
+var Loading = function Loading(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('loadingPage', className)
+  }, /*#__PURE__*/React__default.createElement(CircularProgress, {
+    size: 80
+  }));
+};
+Loading.defaultProps = {
+  className: undefined
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+Loading.propTypes = {
+  /** Css Name */
+  className: PropTypes.string
+};
+
+export { Loading as default };