@daoyi/nmtl-ui 2.0.1-beta.13 → 2.0.1-beta.131

package/lib/components/KeywordSearch-fec33a2c.js

@@ -0,0 +1,156 @@
+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 axios from 'axios';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+import { A as Autocomplete } from './Autocomplete-3b418e5f.js';
+
+var css_248z = ".keywordSearch {\n  border-radius: 4px;\n  width: 100%;\n  margin-right: 14px;\n}\n.keywordSearch--animation .autocomplete {\n  transition: max-width 0.3s ease-out;\n  max-width: 240px;\n}\n.keywordSearch--focus {\n  flex: 1;\n}\n.keywordSearch--focus .autocomplete {\n  max-width: 100%;\n}\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,
+    ariaLabel = _ref.ariaLabel,
+    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 escapeRegExpKeyword = function escapeRegExpKeyword(string) {
+    return string.replace(/[-"':.*+?^${}()|[\]\\ ]/g, '\\\\$&');
+  }; // $& means the whole matched string
+  var fetchSearchList = function fetchSearchList(text) {
+    if (!text || text.length === 0) return;
+    setLoading(true);
+    axios.get(searchAPI, {
+      params: {
+        keyword: escapeRegExpKeyword(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, {
+    ariaLabel: ariaLabel,
+    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);
+    },
+    onKeyDown: function onKeyDown(event) {
+      /* WCAG 2.1.1：搜尋框聚焦時 header--focus 會 display:none 隱藏導覽連結，
+         瀏覽器在 keydown 當下就決定 Tab 的下一個焦點目標——若等 blur 才收合，
+         導覽連結永遠不在焦點順序中。改在 Tab 按下時同步收合（React 事件結尾
+         同步 re-render，早於瀏覽器預設移焦），讓導覽連結恢復可聚焦。 */
+      if (event.key === 'Tab') setMenuOpen(false);
+    }
+  }));
+};
+KeywordSearch.defaultProps = {
+  className: undefined,
+  animation: false,
+  filterSameName: true,
+  keyword: undefined,
+  searchAPI: undefined,
+  placeholder: undefined,
+  ariaLabel: 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,
+  /** 輸入框可及名稱（可含輸入後效果提示；未提供時以 placeholder 代替） */
+  ariaLabel: 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,22 @@
-import"react";import"prop-types";import"./index-11391ca3.js";import"axios";export{K as default}from"./KeywordSearch-5a393f12.js";import"./style-inject.es-c875d022.js";import"./isObjectLike-2f1983fe.js";import"@material-ui/lab";import"./_rollupPluginBabelHelpers-1b8c042f.js";import"@material-ui/core";import"@material-ui/icons";import"./Empty-54b79907.js";
+export { K as default } from './KeywordSearch-fec33a2c.js';
+import './_rollupPluginBabelHelpers-a52356f6.js';
+import 'react';
+import 'prop-types';
+import './index-b76a85f4.js';
+import 'axios';
+import './style-inject.es-1f59c1d0.js';
+import './Autocomplete-3b418e5f.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 './createSvgIcon-e3803ee1.js';
+import './defaultTheme-ed7746fe.js';
+import 'react-is';
+import '@material-ui/styles';
+import 'react-dom';
+import './toConsumableArray-dbe8af76.js';
+import './globalConfig';
+import './Empty-c6a44967.js';

package/lib/components/KeywordTicker.js

@@ -1 +1,224 @@
-import e,{useState as t,useRef as n,useEffect as r}from"react";import i from"prop-types";import{c as o}from"./index-11391ca3.js";import{s as d}from"./style-inject.es-c875d022.js";d(".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");const c=i=>{let{className:d,tickerStyles:c,leftImg:a,tickerAttribute:s,setTickerAttribute:l,onClick:p}=i;const[k,m]=t(null),{result:f,mounted:y,step:u}=s||{result:[],mounted:!1,strp:0},{fontColor:w="#825c0d",backgroundColor:x="#ece8c0",borderColor:g="#fff"}=c||{},h=n(null),T=n(null);return r((()=>{if(f&&!y&&h.current&&T.current){const{trackWidth:e,wordsWidth:t}={trackWidth:h.current.offsetWidth||0,wordsWidth:T.current.offsetWidth||0},n=Math.ceil(e/t)>0?Math.ceil(e/t):0,r=Array(2*n).fill(null).map((()=>f)).flat();l({result:r,loading:!1,mounted:!0,step:n*t})}}),[f]),r((()=>{if(y&&window){const{wordsWidth:e}={wordsWidth:T.current.offsetWidth||0},t=e=>e?e<767?.036:e<480?.033:.06:.06,n=0,{speed:r}={buffer:n,speed:t(window.innerWidth)||.06},{start:i,end:o}={start:n,end:e-u},d=(n+e-u)/r,c=T.current.animate([{left:`${i}px`},{left:`-${o}px`}],{duration:d,iterations:1/0});m(c)}}),[y,u]),e.createElement("div",{className:o("keywordTicker",d)},a&&e.createElement("div",{className:"keywordTicker__img"},e.createElement("img",{src:a,alt:"hotKeyword"})),e.createElement("div",{className:"keywordTicker__track",ref:h,style:{backgroundColor:x},onMouseEnter:()=>{k&&k.pause()},onMouseLeave:()=>{k&&k.play()}},e.createElement("div",{className:"keywordTicker__items",ref:T},(f||[]).map(((t,n)=>{let{keyword:r}=t;return e.createElement("div",{className:"keywordTicker-item",key:n.toString(),onClick:()=>{p&&p(r)}},e.createElement("div",{className:"keywordTicker-text",style:{color:w,borderColor:g}},r))})))))};c.defaultProps={className:void 0,leftImg:void 0,tickerStyles:void 0,tickerAttribute:void 0,setTickerAttribute:()=>{},onClick:()=>{}},c.propTypes={className:i.string,leftImg:i.string,tickerStyles:i.objectOf(i.any),tickerAttribute:i.objectOf(i.any),setTickerAttribute:i.func,onClick:i.func};export{c as default};
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-a52356f6.js';
+import React__default, { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { c as classNames } from './index-b76a85f4.js';
+import { F as ForwardLink } from './ForwardLink-5fbd2705.js';
+import { getIntl } from './globalConfig';
+import { s as styleInject } from './style-inject.es-1f59c1d0.js';
+import './index-b47819f3.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  position: relative;\n}\n.keywordTicker__playToggle {\n  flex-shrink: 0;\n  order: -1;\n  z-index: 3;\n  margin-right: 8px;\n  padding: 4px 10px;\n  background: rgba(0, 0, 0, 0.75);\n  color: #fff;\n  border: 1px solid #fff;\n  border-radius: 4px;\n  font-size: 1rem;\n  white-space: nowrap;\n  cursor: pointer;\n}\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}\n.keywordTicker__items {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  flex-wrap: nowrap;\n  position: relative;\n}\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}\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}\n.keywordTicker__img {\n  z-index: 2;\n  position: relative;\n  display: flex;\n}\n.keywordTicker__img img {\n  height: 100%;\n  max-height: 195px;\n  image-rendering: -webkit-optimize-contrast;\n  position: relative;\n}\n.keywordTicker--fake {\n  position: absolute;\n  opacity: 0;\n  width: 100%;\n}\n\n@media only screen and (max-width: 768px) {\n  .keywordTicker-text {\n    font-size: 1.5rem;\n    padding: 0px 15px;\n  }\n  .keywordTicker__img img {\n    max-height: 104px;\n    left: -60px;\n  }\n  .keywordTicker__track {\n    padding: 10px 0px;\n    margin-left: -100px;\n  }\n}\n@media only screen and (max-width: 484px) {\n  .keywordTicker-text {\n    font-size: 0.875rem;\n  }\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];
+  /* WCAG 2.2.2 自動移動內容需提供暫停控制；並尊重「減少動態效果」偏好預設暫停（WCAG 2.3.3） */
+  var _useState3 = useState(typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches),
+    _useState4 = _slicedToArray(_useState3, 2),
+    paused = _useState4[0],
+    setPaused = _useState4[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]);
+
+  /* 暫停狀態同步到動畫（含 prefers-reduced-motion 預設暫停） */
+  useEffect(function () {
+    if (!tracking) return;
+    if (paused) tracking.pause();else tracking.play();
+  }, [tracking, paused]);
+
+  /* WCAG 2.1.1/2.4.7 跑馬燈連結為無限輪播重複複製且持續移動，鍵盤逐一 Tab 體驗惡劣：
+     本體標記 aria-hidden 並將內部連結移出 Tab 順序（消費端另以等效清單提供鍵盤操作）。
+     跑馬燈重渲染後需重設。 */
+  useEffect(function () {
+    if (track.current) {
+      track.current.querySelectorAll('a').forEach(function (a) {
+        return a.setAttribute('tabindex', '-1');
+      });
+    }
+  }, [result]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('keywordTicker', className)
+  }, /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    className: "keywordTicker__playToggle",
+    "aria-pressed": paused,
+    onClick: function onClick() {
+      return setPaused(!paused);
+    }
+  }, getIntl().formatMessage({
+    id: paused ? 'aria.ticker.play' : 'aria.ticker.pause'
+  })), leftImg && /*#__PURE__*/React__default.createElement("div", {
+    className: "keywordTicker__img"
+  }, /*#__PURE__*/React__default.createElement("img", {
+    src: leftImg,
+    alt: "",
+    "aria-hidden": "true"
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "keywordTicker__track",
+    ref: track,
+    style: {
+      backgroundColor: backgroundColor
+    },
+    "aria-hidden": "true",
+    onMouseEnter: function onMouseEnter() {
+      return tracking === null || tracking === void 0 ? void 0 : tracking.pause();
+    },
+    onMouseLeave: function onMouseLeave() {
+      if (!paused && 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(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 };