@daoyi/nmtl-ui 2.0.1-beta.44 → 2.0.1-beta.46

package/lib/components/KeywordSearch-2d01266e.js

@@ -0,0 +1,139 @@
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-fde6d1c6.js';
+import React__default, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-f491ebce.js';
+import axios from 'axios';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+import { A as Autocomplete } from './Autocomplete-aa4a8d6c.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 +1,15 @@
-export{K as default}from"./KeywordSearch-224f84c1.js";import"./_rollupPluginBabelHelpers-fde6d1c6.js";import"react";import"prop-types";import"./vendor-851c6356.js";import"react-is";import"@material-ui/styles";import"react-dom";import"axios";import"./Autocomplete-5439ff22.js";import"@material-ui/lab";import"@material-ui/core";import"@material-ui/icons";import"./Empty-70f040a9.js";
+export { K as default } from './KeywordSearch-2d01266e.js';
+import './_rollupPluginBabelHelpers-fde6d1c6.js';
+import 'react';
+import 'prop-types';
+import './index-f491ebce.js';
+import 'axios';
+import './style-inject.es-1f59c1d0.js';
+import './Autocomplete-aa4a8d6c.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-3637b766.js';

package/lib/components/KeywordTicker.js

@@ -1 +1,180 @@
-import{a as e}from"./_rollupPluginBabelHelpers-fde6d1c6.js";import t,{useState as n,useRef as r,useEffect as i}from"react";import o from"prop-types";import{s as a,c}from"./vendor-851c6356.js";import"react-is";import"@material-ui/styles";import"react-dom";a(".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");var d=function(o){var a=o.className,d=o.tickerStyles,l=o.leftImg,s=o.tickerAttribute,f=o.setTickerAttribute,p=o.onClick,m=n(null),k=e(m,2),u=k[0],y=k[1],w=s||{result:[],mounted:!1,strp:0},x=w.result,g=w.mounted,h=w.step,v=d||{},T=v.fontColor,b=void 0===T?"#825c0d":T,_=v.backgroundColor,W=void 0===_?"#ece8c0":_,C=v.borderColor,N=void 0===C?"#fff":C,E=r(null),j=r(null);return i((function(){if(x&&!g&&E.current&&j.current){var e={trackWidth:E.current.offsetWidth||0,wordsWidth:j.current.offsetWidth||0},t=e.trackWidth,n=e.wordsWidth,r=Math.ceil(t/n)>0?Math.ceil(t/n):0,i=Array(2*r).fill(null).map((function(){return x})).flat();f({result:i,loading:!1,mounted:!0,step:r*n})}}),[x]),i((function(){if(g&&window){var e={wordsWidth:j.current.offsetWidth||0}.wordsWidth,t={buffer:0,speed:(c=window.innerWidth,(c?c<767?.036:c<480?.033:.06:.06)||.06)},n={start:0,end:e-h},r=n.start,i=n.end,o=(0+e-h)/t.speed,a=j.current.animate([{left:"".concat(r,"px")},{left:"-".concat(i,"px")}],{duration:o,iterations:1/0});y(a)}var c}),[g,h]),t.createElement("div",{className:c("keywordTicker",a)},l&&t.createElement("div",{className:"keywordTicker__img"},t.createElement("img",{src:l,alt:"hotKeyword"})),t.createElement("div",{className:"keywordTicker__track",ref:E,style:{backgroundColor:W},onMouseEnter:function(){u&&u.pause()},onMouseLeave:function(){u&&u.play()}},t.createElement("div",{className:"keywordTicker__items",ref:j},(x||[]).map((function(e,n){var r=e.keyword;return t.createElement("div",{className:"keywordTicker-item",key:n.toString(),onClick:function(){p&&p(r)}},t.createElement("div",{className:"keywordTicker-text",style:{color:b,borderColor:N}},r))})))))};d.defaultProps={className:void 0,leftImg:void 0,tickerStyles:void 0,tickerAttribute:void 0,setTickerAttribute:function(){},onClick:function(){}},d.propTypes={className:o.string,leftImg:o.string,tickerStyles:o.objectOf(o.any),tickerAttribute:o.objectOf(o.any),setTickerAttribute:o.func,onClick:o.func};export{d as default};
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-fde6d1c6.js';
+import React__default, { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-f491ebce.js';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+
+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() {
+      if (tracking) tracking.pause();
+    },
+    onMouseLeave: function onMouseLeave() {
+      if (tracking) 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("div", {
+      className: "keywordTicker-item",
+      key: index.toString(),
+      onClick: function onClick() {
+        if (_onClick) _onClick(keyword);
+      }
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "keywordTicker-text",
+      style: {
+        color: fontColor,
+        borderColor: borderColor
+      }
+    }, keyword));
+  }))));
+};
+KeywordTicker.defaultProps = {
+  className: undefined,
+  leftImg: undefined,
+  tickerStyles: undefined,
+  tickerAttribute: undefined,
+  setTickerAttribute: function setTickerAttribute() {},
+  onClick: function onClick() {}
+};
+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 +1,317 @@
-import{a as o}from"./_rollupPluginBabelHelpers-fde6d1c6.js";import e,{useState as r,useEffect as t}from"react";import n from"prop-types";import{s as i,c as l,T as a}from"./vendor-851c6356.js";import{M as d}from"./Modal-a7591b98.js";import{Typography as c}from"@material-ui/core";import"react-is";import"@material-ui/styles";import"react-dom";import"@material-ui/icons";import"./Button-63c7e9f3.js";import"./Spin-690a3597.js";i(".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");const s=o=>{let{className:r,keywords:t,backgroundColor:n,textColor:i,limit:d,onMoreClick:s,onKeywordClick:m}=o;return Array.isArray(t)&&e.createElement("div",{className:l("keywordList",r)},(d?t.slice(0,d):t).map(((o,r)=>e.createElement(c,{color:"textSecondary",className:"keywordList__item",key:r.toString(),onClick:()=>m(o)},e.createElement("div",{style:{color:i,backgroundColor:n},className:"keywordList__item__hover"},o)))),d&&t.length>d&&e.createElement("div",{className:l("keywordList__item","keywordList__icon"),style:{backgroundColor:n},onClick:s},e.createElement("div",{className:"keywordList__item__hover",style:{color:i}},e.createElement(a,null))))};s.defaultProps={className:void 0,keywords:void 0,backgroundColor:void 0,textColor:void 0,limit:void 0,onMoreClick:()=>{},onKeywordClick:()=>{}},s.propTypes={className:n.string,backgroundColor:n.string,textColor:n.string,keywords:n.arrayOf(n.any),limit:n.number,onMoreClick:n.func,onKeywordClick:n.func};i(".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");const m=o=>{const{visible:r,setVisible:t,cardData:n}=o,{modalTextColor:i,modalImageColor:l,backgroundColor:a,modalBackgroundColor:c,textColor:m}=o,{onKeywordClick:k,onTitleClick:_,onAuthorClick:u}=o,{author:y,imgUrl:C,title:w}=n||{},g=n&&n.keywords&&n.keywords.split("\n")||[],p=i||m;return e.createElement(d,{transparent:!0,size:"small",className:"keywordModal",visible:r,footer:null,onCancel:()=>t(!1)},e.createElement("div",{className:"keywordModal__content",style:{backgroundColor:c}},C&&e.createElement("div",{className:"keywordModal__content__image",style:{backgroundColor:l}},e.createElement("img",{className:"keywordModal__content__image__img",src:C,alt:""})),e.createElement("div",{className:"keywordModal__content__detail"},e.createElement("div",{title:w,className:"keywordModal__content__detail__title",style:{color:p},onClick:_},w),y&&e.createElement("div",{className:"keywordModal__content__detail__author",title:y,onClick:u,style:{color:p}},y),e.createElement(s,{keywords:g,textColor:m,backgroundColor:a,onKeywordClick:k}))))};m.defaultProps={visible:void 0,setVisible:()=>{},modalTextColor:void 0,modalImageColor:void 0,modalBackgroundColor:void 0,backgroundColor:void 0,textColor:void 0,cardData:void 0,onKeywordClick:()=>{},onTitleClick:()=>{},onAuthorClick:()=>{}},m.propTypes={visible:n.bool,setVisible:n.func,cardData:n.objectOf(n.any),modalTextColor:n.string,modalImageColor:n.string,modalBackgroundColor:n.string,backgroundColor:n.string,textColor:n.string,onKeywordClick:n.func,onTitleClick:n.func,onAuthorClick:n.func};i(".keywords p {\n  font-family: 'Noto Sans TC', 'Arial', sans-serif !important; }\n");var k=function(n){var i=n.className,a=n.keywords,d=n.cardData,c=n.limit,k=n.theme||{},_=k.backgroundColor,u=k.textColor,y=k.modalTextColor,C=k.modalImageColor,w=k.modalBackgroundColor,g=n.onKeywordClick,p=n.onMoreClick,f=n.onTitleClick,b=n.onAuthorClick,v=d&&d.keywords&&d.keywords.split("\n")||a||[];if(0===v.filter((function(o){return o&&o.length>0})).length)return null;var h=r(),x=o(h,2),M=x[0],N=x[1],E=(()=>{const[o,e]=r("PC"),n=()=>{window.innerWidth>768?e("PC"):window.innerWidth>576?e("tablet"):e("mobile")};return t((()=>(n(),window.addEventListener("resize",n),()=>{window.removeEventListener("resize",n)})),[]),o})();return e.createElement("div",{className:l("keywords",i)},e.createElement(s,{limit:c||("mobile"===E?1:void 0),keywords:v,backgroundColor:_,textColor:u,onMoreClick:function(){return d?N(!0):p()},onKeywordClick:g}),e.createElement(m,{visible:M,setVisible:N,modalTextColor:y,modalImageColor:C,modalBackgroundColor:w,cardData:d,backgroundColor:_,textColor:u,onKeywordClick:g,onTitleClick:f,onAuthorClick:b}))};k.defaultProps={className:void 0,keywords:void 0,cardData:void 0,limit:void 0,theme:void 0,onKeywordClick:function(){},onMoreClick:function(){},onTitleClick:function(){},onAuthorClick:function(){}},k.propTypes={className:n.string,keywords:n.arrayOf(n.any),cardData:n.objectOf(n.any),limit:n.number,theme:n.shape({backgroundColor:n.string,textColor:n.string,modalTextColor:n.string,modalImageColor:n.string,modalBackgroundColor:n.string}),onKeywordClick:n.func,onMoreClick:n.func,onTitleClick:n.func,onAuthorClick:n.func};export{k as default};
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-fde6d1c6.js';
+import React__default, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-f491ebce.js';
+import { M as Modal } from './Modal-572e17ea.js';
+import { Typography } from '@material-ui/core';
+import { r as requireCreateSvgIcon, i as interopRequireDefault, a as interopRequireWildcard } from './createSvgIcon-48da8b6e.js';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+import '@material-ui/icons';
+import './Button-2f8f0493.js';
+import './Spin-ebf79c17.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 };