@daoyi/nmtl-ui 2.0.1-beta.10 → 2.0.1-beta.100

package/lib/components/Keywords.js

@@ -1 +1,343 @@
-import o,{useState as e,useEffect as r}from"react";import t from"prop-types";import{c as n}from"./index-11391ca3.js";import{i,a as l,r as a,M as d}from"./createSvgIcon-62b64929.js";import{Typography as s}from"@material-ui/core";import{u as c,c as m,s as k}from"./style-inject.es-c875d022.js";import"@material-ui/icons";import"./createTheme-7fffa109.js";import"@material-ui/styles";import"react-dom";var _=c(m((function(e,r){Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;var t=i(o),n=(0,l(a).default)(t.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");r.default=n})));k(".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 y=e=>{let{className:r,keywords:t,backgroundColor:i,textColor:l,limit:a,onMoreClick:d,onKeywordClick:c}=e;return Array.isArray(t)&&o.createElement("div",{className:n("keywordList",r)},(a?t.slice(0,a):t).map(((e,r)=>o.createElement(s,{color:"textSecondary",className:"keywordList__item",key:r.toString(),onClick:()=>c(e)},o.createElement("div",{style:{color:l,backgroundColor:i},className:"keywordList__item__hover"},e)))),a&&t.length>a&&o.createElement("div",{className:n("keywordList__item","keywordList__icon"),style:{backgroundColor:i},onClick:d},o.createElement("div",{className:"keywordList__item__hover",style:{color:l}},o.createElement(_,null))))};y.defaultProps={className:void 0,keywords:void 0,backgroundColor:void 0,textColor:void 0,limit:void 0,onMoreClick:()=>{},onKeywordClick:()=>{}},y.propTypes={className:t.string,backgroundColor:t.string,textColor:t.string,keywords:t.arrayOf(t.any),limit:t.number,onMoreClick:t.func,onKeywordClick:t.func};k(".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 C=e=>{const{visible:r,setVisible:t,cardData:n}=e,{modalTextColor:i,modalImageColor:l,backgroundColor:a,modalBackgroundColor:s,textColor:c}=e,{onKeywordClick:m,onTitleClick:k,onAuthorClick:_}=e,{author:C,imgUrl:u,title:w}=n||{},g=n&&n.keywords&&n.keywords.split("\n")||[],p=i||c;return o.createElement(d,{transparent:!0,size:"small",className:"keywordModal",visible:r,footer:null,onCancel:()=>t(!1)},o.createElement("div",{className:"keywordModal__content",style:{backgroundColor:s}},u&&o.createElement("div",{className:"keywordModal__content__image",style:{backgroundColor:l}},o.createElement("img",{className:"keywordModal__content__image__img",src:u,alt:""})),o.createElement("div",{className:"keywordModal__content__detail"},o.createElement("div",{title:w,className:"keywordModal__content__detail__title",style:{color:p},onClick:k},w),C&&o.createElement("div",{className:"keywordModal__content__detail__author",title:C,onClick:_,style:{color:p}},C),o.createElement(y,{keywords:g,textColor:c,backgroundColor:a,onKeywordClick:m}))))};C.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:()=>{}},C.propTypes={visible:t.bool,setVisible:t.func,cardData:t.objectOf(t.any),modalTextColor:t.string,modalImageColor:t.string,modalBackgroundColor:t.string,backgroundColor:t.string,textColor:t.string,onKeywordClick:t.func,onTitleClick:t.func,onAuthorClick:t.func};k(".keywords p {\n  font-family: 'Noto Sans TC', 'Arial', sans-serif !important; }\n");const u=t=>{const{className:i,keywords:l,cardData:a,limit:d,theme:s}=t,{backgroundColor:c,textColor:m,modalTextColor:k,modalImageColor:_,modalBackgroundColor:u}=s||{},{onKeywordClick:w,onMoreClick:g,onTitleClick:p,onAuthorClick:f}=t,v=a&&a.keywords&&a.keywords.split("\n")||l||[];if(0===v.filter((o=>o&&o.length>0)).length)return null;const[b,h]=e(),x=(()=>{const[o,t]=e("PC"),n=()=>{window.innerWidth>768?t("PC"):window.innerWidth>576?t("tablet"):t("mobile")};return r((()=>(n(),window.addEventListener("resize",n),()=>{window.removeEventListener("resize",n)})),[]),o})();return o.createElement("div",{className:n("keywords",i)},o.createElement(y,{limit:d||("mobile"===x?1:void 0),keywords:v,backgroundColor:c,textColor:m,onMoreClick:()=>a?h(!0):g(),onKeywordClick:w}),o.createElement(C,{visible:b,setVisible:h,modalTextColor:k,modalImageColor:_,modalBackgroundColor:u,cardData:a,backgroundColor:c,textColor:m,onKeywordClick:w,onTitleClick:p,onAuthorClick:f}))};u.defaultProps={className:void 0,keywords:void 0,cardData:void 0,limit:void 0,theme:void 0,onKeywordClick:()=>{},onMoreClick:()=>{},onTitleClick:()=>{},onAuthorClick:()=>{}},u.propTypes={className:t.string,keywords:t.arrayOf(t.any),cardData:t.objectOf(t.any),limit:t.number,theme:t.shape({backgroundColor:t.string,textColor:t.string,modalTextColor:t.string,modalImageColor:t.string,modalBackgroundColor:t.string}),onKeywordClick:t.func,onMoreClick:t.func,onTitleClick:t.func,onAuthorClick:t.func};export{u as default};
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-a52356f6.js';
+import React__default, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-b76a85f4.js';
+import { M as Modal } from './Modal-777fe87d.js';
+import { Typography } from '@material-ui/core';
+import { r as requireCreateSvgIcon, i as interopRequireDefault, a as interopRequireWildcard } from './createSvgIcon-e3803ee1.js';
+import { getIntl } from './globalConfig';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+import '@material-ui/icons';
+import './Button-305b69a0.js';
+import './Spin-8dc60bfe.js';
+import './_commonjsHelpers-70de2c37.js';
+import './defaultTheme-ed7746fe.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}\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}\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}\n.keywordList__item__hover:hover {\n  background: rgba(0, 0, 0, 0.1);\n}\n.keywordList__icon svg {\n  font-size: 1rem;\n  line-height: 1rem;\n}\n.keywordList__icon .keywordList__item__hover {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 0.125rem 0.875rem;\n}\n\n@media screen and (max-width: 484px) {\n  .keywordList__item {\n    font-size: 0.75rem !important;\n  }\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(),
+    role: "button",
+    tabIndex: 0,
+    "aria-label": `${keyword}${getIntl().formatMessage({
+      id: 'aria.keyword.searchHint'
+    })}`,
+    onClick: () => onKeywordClick(keyword),
+    onKeyDown: event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        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
+    },
+    role: "button",
+    tabIndex: 0,
+    "aria-haspopup": "dialog",
+    "aria-label": getIntl().formatMessage({
+      id: 'aria.keyword.more'
+    }),
+    onClick: onMoreClick,
+    onKeyDown: event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        onMoreClick();
+      }
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "keywordList__item__hover",
+    style: {
+      color: textColor
+    }
+  }, /*#__PURE__*/React__default.createElement(default_1, {
+    "aria-hidden": "true"
+  }))));
+};
+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}\n.keywordModal__content__image {\n  display: flex;\n  justify-content: center;\n  width: 100%;\n}\n.keywordModal__content__image__img {\n  height: 7.75rem;\n  object-fit: scale-down;\n}\n.keywordModal__content__detail {\n  width: 100%;\n  padding: 1rem 1.25rem;\n  border-radius: 5px;\n}\n.keywordModal__content__detail__title {\n  font-weight: bold;\n  font-size: 1.5rem;\n  text-decoration: underline;\n  cursor: pointer;\n}\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}\n.keywordModal__content__detail__author {\n  margin-top: 0.8rem;\n  font-size: 1.25rem;\n  cursor: pointer;\n}\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 +1,28 @@
-import e from"react";import{c as r}from"./index-b2745105.js";import{CircularProgress as a}from"@material-ui/core";import t from"prop-types";import{s}from"./style-inject.es-1f59c1d0.js";s(".loadingPage {\n  padding: 4rem 0;\n  color: #0087dc;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center; }\n");var n=function(t){var s=t.className;return e.createElement("div",{className:r("loadingPage",s)},e.createElement(a,{size:80}))};n.defaultProps={className:void 0},n.propTypes={className:t.string};export{n as default};
+import React__default from 'react';
+import { c as classNames } from './index-b76a85f4.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 };