@daoyi/nmtl-ui 2.0.1-beta.45 → 2.0.1-beta.47

package/lib/components/ForwardLink.js

@@ -1 +1,106 @@
-import{c as e}from"./_rollupPluginBabelHelpers-fde6d1c6.js";import t,{useMemo as r}from"react";import{s as a,E as i,c as n}from"./vendor-851c6356.js";import o from"prop-types";import{useHistory as s,Link as l}from"react-router-dom";import{Tooltip as c}from"@material-ui/core";import"react-is";import"@material-ui/styles";import"react-dom";a(".forwardLink {\n  width: -moz-fit-content;\n  width: fit-content; }\n  .forwardLink__link {\n    color: unset;\n    text-decoration: none;\n    cursor: pointer; }\n    .forwardLink__link--disabled {\n      cursor: not-allowed; }\n");var d=["className","title","target","disabled","children","tip","onClick"],m=function(a){var o=a.className,m=a.title,p=a.target,f=a.disabled,h=a.children,u=a.tip;a.onClick;var v=e(a,d),k=s(),g=r((function(){var e;if(f)return{};var t=null===(e=v.pathname)||void 0===e?void 0:e.indexOf("?");return t>-1?{pathname:v.pathname.substring(0,t),search:v.pathname.substring(t)}:{pathname:v.pathname||"/",search:"string"==typeof v.search?v.search:i.stringify(v.search)}}),[k,f,v.pathname,v.search]),_=g.pathname,b=void 0===_?"":_,w=g.search,N=void 0===w?"":w,y=t.createElement("div",{className:n("forwardLink",o)},f?t.createElement("div",{title:u?void 0:m,className:"forwardLink__link--disabled"},h):t.createElement(l,{className:"forwardLink__link",target:p,title:u?void 0:m,to:{pathname:"".concat("/zh-tw").concat(b),search:N}},h));return u?t.createElement(c,{title:u,placement:"top"},y):y};m.defaultProps={className:void 0,title:void 0,target:"_blank",disabled:void 0,children:void 0,search:void 0,tip:void 0,onClick:function(){return!0}},m.propTypes={className:o.string,title:o.string,target:o.oneOf(["_self","_blank","_parent","_top"]),disabled:o.bool,children:o.node,pathname:o.string.isRequired,search:o.oneOfType([o.object,o.string]),tip:o.string,onClick:o.func};export{m as default};
+import { c as _objectWithoutProperties } from './_rollupPluginBabelHelpers-fde6d1c6.js';
+import React__default, { useMemo } from 'react';
+import { s as styleInject, E as queryString, c as classNames } from './vendor-851c6356.js';
+import PropTypes from 'prop-types';
+import { useHistory, Link } from 'react-router-dom';
+import { Tooltip } from '@material-ui/core';
+import 'react-is';
+import '@material-ui/styles';
+import 'react-dom';
+
+var css_248z = ".forwardLink {\n  width: -moz-fit-content;\n  width: fit-content; }\n  .forwardLink__link {\n    color: unset;\n    text-decoration: none;\n    cursor: pointer; }\n    .forwardLink__link--disabled {\n      cursor: not-allowed; }\n";
+styleInject(css_248z);
+
+var _excluded = ["className", "title", "target", "disabled", "children", "tip", "onClick"];
+var locale = '/zh-tw'; // 20230318 暫時寫死，若套件納入語系控制，可將其置換
+
+var ForwardLink = function ForwardLink(_ref) {
+  var className = _ref.className,
+    title = _ref.title,
+    target = _ref.target,
+    disabled = _ref.disabled,
+    children = _ref.children,
+    tip = _ref.tip;
+    _ref.onClick;
+    var rest = _objectWithoutProperties(_ref, _excluded);
+  var history = useHistory();
+  var _useMemo = useMemo(function () {
+      var _rest$pathname;
+      if (disabled) return {};
+      /*
+       * 若將 search 寫在 pathname 中，意即 pathname=/asd?zxc=qwe
+       * 會導致換頁時 React route dom 無法匹配 => 空白畫面
+       * 若真有此情況發生 需把 search 提領出來
+       */
+      var foundIndex = (_rest$pathname = rest.pathname) === null || _rest$pathname === void 0 ? void 0 : _rest$pathname.indexOf('?');
+      if (foundIndex > -1) return {
+        pathname: rest.pathname.substring(0, foundIndex),
+        search: rest.pathname.substring(foundIndex)
+      };
+      return {
+        pathname: rest.pathname || '/',
+        search: typeof rest.search === 'string' ? rest.search : queryString.stringify(rest.search)
+      };
+    }, [history, disabled, rest.pathname, rest.search]),
+    _useMemo$pathname = _useMemo.pathname,
+    pathname = _useMemo$pathname === void 0 ? '' : _useMemo$pathname,
+    _useMemo$search = _useMemo.search,
+    search = _useMemo$search === void 0 ? '' : _useMemo$search;
+  var linkComponent = /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('forwardLink', className)
+  }, disabled ? /*#__PURE__*/React__default.createElement("div", {
+    title: tip ? undefined : title,
+    className: "forwardLink__link--disabled"
+  }, children) : /*#__PURE__*/React__default.createElement(Link, {
+    className: "forwardLink__link",
+    target: target,
+    title: tip ? undefined : title,
+    to: {
+      pathname: "".concat(locale).concat(pathname),
+      search: search
+    }
+  }, children));
+  if (tip) {
+    return /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: tip,
+      placement: "top"
+    }, linkComponent);
+  }
+  return linkComponent;
+};
+ForwardLink.defaultProps = {
+  className: undefined,
+  title: undefined,
+  target: '_blank',
+  disabled: undefined,
+  children: undefined,
+  search: undefined,
+  tip: undefined,
+  onClick: function onClick() {
+    return true;
+  }
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+ForwardLink.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** DOM title */
+  title: PropTypes.string,
+  /** DOM title */
+  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+  /** 是否取消點擊 */
+  disabled: PropTypes.bool,
+  /** 子項目 */
+  children: PropTypes.node,
+  /** 欲前往的連結 */
+  pathname: PropTypes.string.isRequired,
+  /** 欲前往連結的參數 */
+  search: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  /** 彈跳提示文字 */
+  tip: PropTypes.string,
+  /** 元件被點即時的callback，返回false會停止元件導向 */
+  onClick: PropTypes.func
+};
+
+export { ForwardLink as default };

package/lib/components/Header.js

@@ -1 +1,186 @@
-import{a as e}from"./_rollupPluginBabelHelpers-fde6d1c6.js";import n,{useState as a,useRef as r,useEffect as t}from"react";import o from"prop-types";import{s as i,d as l,c as s}from"./vendor-851c6356.js";import{useHistory as c,useRouteMatch as d,NavLink as p}from"react-router-dom";import{Typography as m,IconButton as h}from"@material-ui/core";import{SearchOutlined as g}from"@material-ui/icons";import{K as u}from"./KeywordSearch-224f84c1.js";import{S as _}from"./Select-98a8e973.js";import{c as f,D as y,d as x}from"./Drawer-af3ed21a.js";import"react-is";import"@material-ui/styles";import"react-dom";import"axios";import"./Autocomplete-5439ff22.js";import"@material-ui/lab";import"./Empty-70f040a9.js";i("@charset \"UTF-8\";\n.header {\n  display: flex;\n  align-items: center;\n  background: rgba(255, 255, 255, 0.6);\n  background-color: rgba(255, 255, 255, 0.6);\n  padding: 12px 36px !important;\n  position: fixed;\n  top: 0;\n  z-index: 10;\n  width: 100% !important;\n  transition: top 0.3s ease-in-out;\n  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);\n  -webkit-backdrop-filter: blur(4px);\n          backdrop-filter: blur(4px); }\n  .header__logo {\n    display: flex;\n    width: -moz-fit-content !important;\n    width: fit-content !important;\n    margin-right: 30px !important;\n    cursor: pointer; }\n    .header__logo__img {\n      display: flex;\n      align-items: center; }\n    .header__logo__title {\n      white-space: nowrap;\n      margin-left: 1rem !important;\n      font-size: 1.5rem !important;\n      font-weight: 700 !important;\n      font-family: 'Noto Sans TC' !important; }\n  .header__links {\n    display: flex;\n    justify-content: flex-end;\n    padding-right: 14px; }\n    .header__links a {\n      text-decoration: none; }\n    .header__links--full {\n      flex: 1; }\n    .header__links__item {\n      color: rgba(0, 0, 0, 0.85);\n      font-size: 1.125rem !important;\n      font-weight: 500 !important;\n      white-space: nowrap;\n      padding: 6px 14px;\n      font-family: 'Noto Sans TC' !important; }\n      .header__links__item--active .header__links__item {\n        font-weight: 800 !important;\n        background: transparent;\n        border-radius: 45px; }\n      .header__links__item:hover {\n        font-weight: 800 !important; }\n  .header__language {\n    min-width: 100px !important; }\n  .header__searchIcon {\n    display: none !important; }\n  @media screen and (max-width: 768px) {\n    .header--smallUseSearchIcon .header__searchIcon {\n      display: flex !important;\n      margin-right: 10px !important; }\n    .header--smallUseSearchIcon .keywordSearch {\n      visibility: hidden;\n      flex: 1;\n      width: 0; } }\n  .header--hide {\n    top: -100px; }\n  .header--focus .header__links {\n    display: none; }\n  .header .MuiTypography-root {\n    width: 100%;\n    display: flex;\n    align-items: center; }\n  .header .autocomplete {\n    float: right; }\n    .header .autocomplete .MuiAutocomplete-inputRoot[class*='MuiOutlinedInput-root'] {\n      padding: 1px 8px !important; }\n  .header .keywordSearch {\n    margin-right: 8px; }\n    .header .keywordSearch--focus .autocomplete {\n      width: 100% !important; }\n    .header .keywordSearch--animation .autocomplete {\n      width: 240px;\n      transition: width 0.3s ease-in-out; }\n\n/* 避免寬度460以下炸版 */\n@media screen and (max-width: 460px) {\n  .header .keywordSearch--animation .autocomplete {\n    width: 100%; } }\n\n@media screen and (max-width: 768px) {\n  .header {\n    padding: 12px 15px !important; }\n    .header__logo {\n      margin-right: 16px !important; }\n      .header__logo__title {\n        display: none !important; }\n    .header__links {\n      display: none; }\n      .header__links__item {\n        font-size: 1rem !important; }\n    .header__language {\n      display: none !important; }\n    .header--focus .header__logo {\n      display: none !important; }\n  .autocomplete__icon {\n    display: none !important; } }\n");var k=function(o){var i=o.title,x=o.logo,k=o.locale,w=o.supportLanguages,v=o.pages;o.darkMode;var S=o.typographyColor,b=o.className,I=o.searchAPI,E=o.searchPlaceholder,C=o.smallUseSearchIcon,N=o.onSearch;o.setDarkMode;var L=o.onLanguageChange,M=o.onSearchIconClick,P=c(),A=P.location.search,j=d().url,O=a(!1),U=e(O,2),z=U[0],D=U[1],T=a(!1),H=e(T,2),K=H[0],R=H[1],q=r(l((function(){return D(window.scrollY>100)}),10)).current;return t((function(){return window.addEventListener("scroll",q),function(){window.removeEventListener("scroll",q)}}),[]),t((function(){R(!1)}),[A]),n.createElement("div",{className:s("MuiPaper-root","header",{"header--smallUseSearchIcon":C},{"header--hide":z},{"header--focus":K},b)},n.createElement("div",{className:"header__logo",onClick:function(){return P.push("/".concat(k))}},x&&n.createElement("div",{className:"header__logo__img"},x),!K&&i&&n.createElement(m,{color:S,className:"header__logo__title"},i)),I&&n.createElement(u,{animation:!0,searchAPI:I,placeholder:E,menuOpen:K,setMenuOpen:R,onSearch:N}),n.createElement("div",{className:s("header__links",{"header__links--full":!I})},(Array.isArray(v)?v:[]).filter((function(e){return e.showInHeader})).map((function(e,a){var r=e.path,t=void 0===r?"":r,o=e.name,i=n.createElement(m,{className:"header__links__item",color:S},o);return t.indexOf("http")>-1?n.createElement("a",{key:a.toString(),href:t,className:"header__links__item--active"},i):n.createElement(p,{key:a.toString(),to:"".concat(j).concat(t),activeClassName:"header__links__item--active"},i)}))),n.createElement(h,{className:"header__searchIcon",onClick:M},n.createElement(g,{fontSize:"large"})),false,Array.isArray(w)&&w.length>0&&n.createElement(_,{className:"header__language",defaultValue:f({language:k,supportLanguages:w}),onChange:function(e){return L(e)},options:w}),n.createElement(y,{title:i,logo:x,drawerList:v,supportLanguages:w}))};k.defaultProps={className:void 0,title:void 0,logo:void 0,locale:void 0,supportLanguages:x,darkMode:!1,typographyColor:"primary",searchAPI:void 0,searchPlaceholder:void 0,smallUseSearchIcon:void 0,onSearch:function(){},setDarkMode:function(){},onLanguageChange:function(){},onSearchIconClick:function(){}},k.propTypes={className:o.string,title:o.string,logo:o.node,locale:o.string,supportLanguages:o.arrayOf(o.any),pages:o.arrayOf(o.any).isRequired,darkMode:o.bool,typographyColor:o.oneOf(["initial","inherit","primary","secondary","textPrimary","textSecondary","error"]),searchAPI:o.string,searchPlaceholder:o.string,smallUseSearchIcon:o.bool,onSearch:o.func,setDarkMode:o.func,onLanguageChange:o.func,onSearchIconClick:o.func};export{k as default};
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-fde6d1c6.js';
+import React__default, { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { s as styleInject, d as debounce_1, c as classNames } from './vendor-851c6356.js';
+import { useHistory, useRouteMatch, NavLink } from 'react-router-dom';
+import { Typography, IconButton } from '@material-ui/core';
+import { SearchOutlined } from '@material-ui/icons';
+import { K as KeywordSearch } from './KeywordSearch-224f84c1.js';
+import { S as Select } from './Select-98a8e973.js';
+import { c as checkLanguageSupport, D as Drawer, d as defaultSupportLanguage } from './Drawer-af3ed21a.js';
+import 'react-is';
+import '@material-ui/styles';
+import 'react-dom';
+import 'axios';
+import './Autocomplete-5439ff22.js';
+import '@material-ui/lab';
+import './Empty-70f040a9.js';
+
+var css_248z = "@charset \"UTF-8\";\n.header {\n  display: flex;\n  align-items: center;\n  background: rgba(255, 255, 255, 0.6);\n  background-color: rgba(255, 255, 255, 0.6);\n  padding: 12px 36px !important;\n  position: fixed;\n  top: 0;\n  z-index: 10;\n  width: 100% !important;\n  transition: top 0.3s ease-in-out;\n  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);\n  -webkit-backdrop-filter: blur(4px);\n          backdrop-filter: blur(4px); }\n  .header__logo {\n    display: flex;\n    width: -moz-fit-content !important;\n    width: fit-content !important;\n    margin-right: 30px !important;\n    cursor: pointer; }\n    .header__logo__img {\n      display: flex;\n      align-items: center; }\n    .header__logo__title {\n      white-space: nowrap;\n      margin-left: 1rem !important;\n      font-size: 1.5rem !important;\n      font-weight: 700 !important;\n      font-family: 'Noto Sans TC' !important; }\n  .header__links {\n    display: flex;\n    justify-content: flex-end;\n    padding-right: 14px; }\n    .header__links a {\n      text-decoration: none; }\n    .header__links--full {\n      flex: 1; }\n    .header__links__item {\n      color: rgba(0, 0, 0, 0.85);\n      font-size: 1.125rem !important;\n      font-weight: 500 !important;\n      white-space: nowrap;\n      padding: 6px 14px;\n      font-family: 'Noto Sans TC' !important; }\n      .header__links__item--active .header__links__item {\n        font-weight: 800 !important;\n        background: transparent;\n        border-radius: 45px; }\n      .header__links__item:hover {\n        font-weight: 800 !important; }\n  .header__language {\n    min-width: 100px !important; }\n  .header__searchIcon {\n    display: none !important; }\n  @media screen and (max-width: 768px) {\n    .header--smallUseSearchIcon .header__searchIcon {\n      display: flex !important;\n      margin-right: 10px !important; }\n    .header--smallUseSearchIcon .keywordSearch {\n      visibility: hidden;\n      flex: 1;\n      width: 0; } }\n  .header--hide {\n    top: -100px; }\n  .header--focus .header__links {\n    display: none; }\n  .header .MuiTypography-root {\n    width: 100%;\n    display: flex;\n    align-items: center; }\n  .header .autocomplete {\n    float: right; }\n    .header .autocomplete .MuiAutocomplete-inputRoot[class*='MuiOutlinedInput-root'] {\n      padding: 1px 8px !important; }\n  .header .keywordSearch {\n    margin-right: 8px; }\n    .header .keywordSearch--focus .autocomplete {\n      width: 100% !important; }\n    .header .keywordSearch--animation .autocomplete {\n      width: 240px;\n      transition: width 0.3s ease-in-out; }\n\n/* 避免寬度460以下炸版 */\n@media screen and (max-width: 460px) {\n  .header .keywordSearch--animation .autocomplete {\n    width: 100%; } }\n\n@media screen and (max-width: 768px) {\n  .header {\n    padding: 12px 15px !important; }\n    .header__logo {\n      margin-right: 16px !important; }\n      .header__logo__title {\n        display: none !important; }\n    .header__links {\n      display: none; }\n      .header__links__item {\n        font-size: 1rem !important; }\n    .header__language {\n      display: none !important; }\n    .header--focus .header__logo {\n      display: none !important; }\n  .autocomplete__icon {\n    display: none !important; } }\n";
+styleInject(css_248z);
+
+var showDarkModeSwitch = false;
+var Header = function Header(props) {
+  var title = props.title,
+    logo = props.logo,
+    locale = props.locale,
+    supportLanguages = props.supportLanguages,
+    pages = props.pages;
+    props.darkMode;
+    var typographyColor = props.typographyColor,
+    className = props.className;
+  var searchAPI = props.searchAPI,
+    searchPlaceholder = props.searchPlaceholder,
+    smallUseSearchIcon = props.smallUseSearchIcon;
+  var onSearch = props.onSearch;
+    props.setDarkMode;
+    var onLanguageChange = props.onLanguageChange,
+    onSearchIconClick = props.onSearchIconClick;
+  var history = useHistory();
+  var search = history.location.search;
+  var _useRouteMatch = useRouteMatch(),
+    url = _useRouteMatch.url;
+  // const { keyword } = queryString.parse(search);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hideHeader = _useState2[0],
+    setHideHeader = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    menuOpen = _useState4[0],
+    setMenuOpen = _useState4[1];
+  var handleScroll = useRef(debounce_1(function () {
+    return setHideHeader(window.scrollY > 100);
+  }, 10)).current;
+  useEffect(function () {
+    window.addEventListener('scroll', handleScroll);
+    return function () {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+  useEffect(function () {
+    setMenuOpen(false);
+  }, [search]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('MuiPaper-root', 'header', {
+      'header--smallUseSearchIcon': smallUseSearchIcon
+    }, {
+      'header--hide': hideHeader
+    }, {
+      'header--focus': menuOpen
+    }, className)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "header__logo",
+    onClick: function onClick() {
+      return history.push("/".concat(locale));
+    }
+  }, logo && /*#__PURE__*/React__default.createElement("div", {
+    className: "header__logo__img"
+  }, logo), !menuOpen && title && /*#__PURE__*/React__default.createElement(Typography, {
+    color: typographyColor,
+    className: "header__logo__title"
+  }, title)), searchAPI && /*#__PURE__*/React__default.createElement(KeywordSearch, {
+    animation: true
+    // keyword={keyword}
+    ,
+    searchAPI: searchAPI,
+    placeholder: searchPlaceholder,
+    menuOpen: menuOpen,
+    setMenuOpen: setMenuOpen,
+    onSearch: onSearch
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: classNames('header__links', {
+      'header__links--full': !searchAPI
+    })
+  }, (Array.isArray(pages) ? pages : []).filter(function (_ref) {
+    var showInHeader = _ref.showInHeader;
+    return showInHeader;
+  }).map(function (_ref2, i) {
+    var _ref2$path = _ref2.path,
+      path = _ref2$path === void 0 ? '' : _ref2$path,
+      name = _ref2.name;
+    var label = /*#__PURE__*/React__default.createElement(Typography, {
+      className: "header__links__item",
+      color: typographyColor
+    }, name);
+    return path.indexOf('http') > -1 ? /*#__PURE__*/React__default.createElement("a", {
+      key: i.toString(),
+      href: path,
+      className: "header__links__item--active"
+    }, label) : /*#__PURE__*/React__default.createElement(NavLink, {
+      key: i.toString(),
+      to: "".concat(url).concat(path),
+      activeClassName: "header__links__item--active"
+    }, label);
+  })), /*#__PURE__*/React__default.createElement(IconButton, {
+    className: "header__searchIcon",
+    onClick: onSearchIconClick
+  }, /*#__PURE__*/React__default.createElement(SearchOutlined, {
+    fontSize: "large"
+  })), showDarkModeSwitch , Array.isArray(supportLanguages) && supportLanguages.length > 0 && /*#__PURE__*/React__default.createElement(Select, {
+    className: "header__language",
+    defaultValue: checkLanguageSupport({
+      language: locale,
+      supportLanguages: supportLanguages
+    }),
+    onChange: function onChange(value) {
+      return onLanguageChange(value);
+    },
+    options: supportLanguages
+  }), /*#__PURE__*/React__default.createElement(Drawer, {
+    title: title,
+    logo: logo,
+    drawerList: pages,
+    supportLanguages: supportLanguages
+  }));
+};
+Header.defaultProps = {
+  className: undefined,
+  title: undefined,
+  logo: undefined,
+  locale: undefined,
+  supportLanguages: defaultSupportLanguage,
+  darkMode: false,
+  typographyColor: 'primary',
+  searchAPI: undefined,
+  searchPlaceholder: undefined,
+  smallUseSearchIcon: undefined,
+  onSearch: function onSearch() {},
+  setDarkMode: function setDarkMode() {},
+  onLanguageChange: function onLanguageChange() {},
+  onSearchIconClick: function onSearchIconClick() {}
+};
+Header.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 標題(通常為網站名稱) */
+  title: PropTypes.string,
+  /** 網站Logo */
+  logo: PropTypes.node,
+  /** 語系 */
+  locale: PropTypes.string,
+  /** 支援的語系 */
+  supportLanguages: PropTypes.arrayOf(PropTypes.any),
+  /** 頁面列表 */
+  pages: PropTypes.arrayOf(PropTypes.any).isRequired,
+  /** 是否為黑暗模式 */
+  darkMode: PropTypes.bool,
+  /** 文字色系() */
+  typographyColor: PropTypes.oneOf(['initial', 'inherit', 'primary', 'secondary', 'textPrimary', 'textSecondary', 'error']),
+  /** SearchBar的API */
+  searchAPI: PropTypes.string,
+  /** SearchBar的提示字 */
+  searchPlaceholder: PropTypes.string,
+  /** 是否在小畫面的時候使用SearchIcon取代KeywordSearch */
+  smallUseSearchIcon: PropTypes.bool,
+  /** SearchBar啟動搜尋的callback */
+  onSearch: PropTypes.func,
+  /** 設定黑暗模式的callback */
+  setDarkMode: PropTypes.func,
+  /** 語系變動時的callback */
+  onLanguageChange: PropTypes.func,
+  /** SearchIcon點擊時的callback */
+  onSearchIconClick: PropTypes.func
+};
+
+export { Header as default };

package/lib/components/Image.js

@@ -1 +1,58 @@
-import{a as r}from"./_rollupPluginBabelHelpers-fde6d1c6.js";import e,{useState as t}from"react";import{s as i,c as a,b as s}from"./vendor-851c6356.js";import o from"prop-types";import"react-is";import"@material-ui/styles";import"react-dom";i(".image {\n  cursor: pointer; }\n");var n=function(i){var o=i.className,n=i.src,l=i.width,m=i.thumbnailSrc,c=t(!1),p=r(c,2),u=p[0],d=p[1];return e.createElement("div",null,e.createElement("img",{src:m||n,className:a("image",o),style:{width:"".concat(l,"px")},alt:"preview",onClick:function(){return d(!0)}}),u?e.createElement(s,{image:n,showTitle:!1,onClose:function(){return d(!1)}}):null)};n.defaultProps={className:void 0,src:void 0,width:200,thumbnailSrc:void 0},n.propTypes={className:o.string,src:o.string,width:o.number,thumbnailSrc:o.string};export{n as default};
+import { a as _slicedToArray } from './_rollupPluginBabelHelpers-fde6d1c6.js';
+import React__default, { useState } from 'react';
+import { s as styleInject, c as classNames, b as build } from './vendor-851c6356.js';
+import PropTypes from 'prop-types';
+import 'react-is';
+import '@material-ui/styles';
+import 'react-dom';
+
+var css_248z = ".image {\n  cursor: pointer; }\n";
+styleInject(css_248z);
+
+var Image = function Image(_ref) {
+  var className = _ref.className,
+    src = _ref.src,
+    width = _ref.width,
+    thumbnailSrc = _ref.thumbnailSrc;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("img", {
+    src: thumbnailSrc || src,
+    className: classNames('image', className),
+    style: {
+      width: "".concat(width, "px")
+    },
+    alt: "preview",
+    onClick: function onClick() {
+      return setIsOpen(true);
+    }
+  }), isOpen ? /*#__PURE__*/React__default.createElement(build, {
+    image: src,
+    showTitle: false,
+    onClose: function onClose() {
+      return setIsOpen(false);
+    }
+  }) : null);
+};
+Image.defaultProps = {
+  className: undefined,
+  src: undefined,
+  width: 200,
+  thumbnailSrc: undefined
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+Image.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** 圖片來源 */
+  src: PropTypes.string,
+  /** 預覽圖片寬度 */
+  width: PropTypes.number,
+  /** 縮圖來源 */
+  thumbnailSrc: PropTypes.string
+};
+
+export { Image as default };

package/lib/components/Input.js

@@ -1 +1,79 @@
-import e from"react";import t from"prop-types";import{s as r,c as a}from"./vendor-851c6356.js";import{OutlinedInput as n}from"@material-ui/core";import"react-is";import"@material-ui/styles";import"react-dom";r(".input {\n  padding: 12px; }\n");var o=function(t){var r=t.className,o=t.placeholder,s=t.defaultValue,l=t.value,i=t.type,u=t.onChange,p=t.onKeyPress,d=t.onPressEnter,f=t.suffix,c={inputProps:{className:a("input",r)},placeholder:o,defaultValue:s,onChange:function(e){var t=e.target;u&&u(t.value)},onKeyPress:function(e){"Enter"===e.key&&d&&d(e.key,e.target.value),p&&p(e)},value:l,endAdornment:f&&e.isValidElement(f)?f:null,type:i};return e.createElement(n,c)};o.defaultProps={className:void 0,placeholder:"Please enter text",defaultValue:void 0,value:void 0,onChange:void 0,onKeyPress:void 0,onPressEnter:void 0,suffix:null,type:"text"},o.propTypes={className:t.string,placeholder:t.string,defaultValue:t.string,value:t.string,onChange:t.func,onKeyPress:t.func,onPressEnter:t.func,suffix:t.node,type:t.string};export{o as default};
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { s as styleInject, c as classNames } from './vendor-851c6356.js';
+import { OutlinedInput } from '@material-ui/core';
+import 'react-is';
+import '@material-ui/styles';
+import 'react-dom';
+
+var css_248z = ".input {\n  padding: 12px; }\n";
+styleInject(css_248z);
+
+var Input = function Input(props) {
+  var className = props.className,
+    placeholder = props.placeholder,
+    defaultValue = props.defaultValue,
+    value = props.value,
+    type = props.type; // Attributes
+
+  var _onChange = props.onChange,
+    _onKeyPress = props.onKeyPress,
+    onPressEnter = props.onPressEnter; // Call Back Functions
+
+  var suffix = props.suffix; // Dom Status
+
+  var OutlinedInputProps = {
+    inputProps: {
+      className: classNames('input', className)
+    },
+    placeholder: placeholder,
+    defaultValue: defaultValue,
+    onChange: function onChange(_ref) {
+      var target = _ref.target;
+      if (_onChange) _onChange(target.value);
+    },
+    onKeyPress: function onKeyPress(e) {
+      if (e.key === 'Enter' && onPressEnter) onPressEnter(e.key, e.target.value);
+      if (_onKeyPress) _onKeyPress(e);
+    },
+    value: value,
+    endAdornment: suffix && /*#__PURE__*/React__default.isValidElement(suffix) ? suffix : null,
+    type: type
+  };
+  return /*#__PURE__*/React__default.createElement(OutlinedInput, OutlinedInputProps);
+};
+Input.defaultProps = {
+  className: undefined,
+  placeholder: 'Please enter text',
+  defaultValue: undefined,
+  value: undefined,
+  onChange: undefined,
+  onKeyPress: undefined,
+  onPressEnter: undefined,
+  suffix: null,
+  type: 'text'
+};
+
+/* Write props detail information and 'npm run updateStory' will help you generate stories's argTypes */
+Input.propTypes = {
+  /** Css Name */
+  className: PropTypes.string,
+  /** Placeholder */
+  placeholder: PropTypes.string,
+  /** Default Value */
+  defaultValue: PropTypes.string,
+  /** Value */
+  value: PropTypes.string,
+  /** onChange Call Back */
+  onChange: PropTypes.func,
+  /** onKeyPress Call Back */
+  onKeyPress: PropTypes.func,
+  /** onPressEnter Call Back */
+  onPressEnter: PropTypes.func,
+  /** Custom Icon Area */
+  suffix: PropTypes.node,
+  /** HTML5 Input type */
+  type: PropTypes.string
+};
+
+export { Input as default };