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

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

@@ -1,139 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,190 +0,0 @@
-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

@@ -1,317 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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 };