@daoyi/nmtl-ui 1.1.43-beta.38 → 1.1.43-beta.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/Header.js +1 -1
- package/package.json +1 -1
package/lib/components/Header.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import e,{useState as a,useRef as n,useEffect as r}from"react";import t from"prop-types";import{s as o,c as i}from"./style-inject.es-22541f49.js";import{d as l,K as s}from"./KeywordSearch-1a4e22fd.js";import{useHistory as d,useRouteMatch as c,NavLink as p}from"react-router-dom";import{List as m,ListItem as h,ListItemIcon as g,ListItemText as _,IconButton as u,Drawer as f,Divider as w,Typography as y}from"@material-ui/core";import{DehazeRounded as x,SearchOutlined as k}from"@material-ui/icons";import{S as v}from"./Select-c286cde1.js";import"./_commonjsHelpers-ae1b5db5.js";import"axios";import"./isObjectLike-75179648.js";import"@material-ui/lab";import"./Empty-f614b463.js";const E=({language:e,supportLanguages:a})=>a.some((({value:a})=>a===e))?e:a[0].value,b=({drawerList:a,setOpen:n})=>{const r=d(),{url:t}=c();return e.createElement(m,{className:"drawer__list"},Array.isArray(a)&&a.map((({name:a,icon:o,path:i},l)=>e.createElement(h,{button:!0,key:l.toString(),onClick:()=>{i.indexOf("http")>-1?window.location=i:r.push({pathname:`${t}${i}`}),n(!1)}},o&&e.createElement(g,{style:{marginRight:24}},o),e.createElement(_,{primary:a})))))};b.defaultProps={},b.propTypes={drawerList:t.arrayOf(t.any).isRequired,setOpen:t.func.isRequired};o(".drawer__icon {\n display: none !important; }\n\n.drawer__header {\n display: flex;\n align-items: center;\n padding: 20px; }\n .drawer__header-title {\n font-size: 18px;\n font-weight: bold; }\n\n.drawer__list {\n padding: 10px !important; }\n .drawer__list .MuiSvgIcon-root {\n margin-left: 8px; }\n\n.drawer__lang {\n margin: 24px 36px !important; }\n\n@media screen and (max-width: 768px) {\n .drawer {\n display: flex;\n justify-content: flex-end; }\n .drawer__icon {\n display: flex !important; } }\n");const S=({title:n,logo:r,locale:t,supportLanguages:o,drawerList:i,onLanguageChange:l})=>{const[s,d]=a(!1);return e.createElement("div",{className:"drawer"},e.createElement(u,{className:"drawer__icon",onClick:()=>d(!0)},e.createElement(x,{fontSize:"large"})),e.createElement(f,{anchor:"right",open:s,onClose:()=>d(!1),onKeyDown:()=>d(!1)},(r||n)&&e.createElement("div",{className:"drawer__header"},e.createElement("div",{className:"drawer__header-logo"},r),e.createElement("div",{className:"drawer__header-title"},n)),e.createElement(w,null),e.createElement(b,{drawerList:(Array.isArray(i)?i:[]).filter((({showInHeader:e})=>e)),setOpen:d}),e.createElement(w,null),Array.isArray(o)&&o.length>0&&e.createElement(v,{className:"drawer__lang",defaultValue:E({language:t,supportLanguages:o}),onChange:e=>l(e),options:o})))};S.defaultProps={title:void 0,logo:void 0,locale:void 0,supportLanguages:[{value:"en",label:"English"},{value:"zh-tw",label:"繁體中文"},{value:"zh-cn",label:"簡體中文"}],drawerList:void 0,onLanguageChange:()=>{}},S.propTypes={title:t.string,logo:t.node,locale:t.string,supportLanguages:t.arrayOf(t.any),drawerList:t.arrayOf(t.any),onLanguageChange:t.func};o(".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
|
|
1
|
+
import e,{useState as a,useRef as n,useEffect as r}from"react";import t from"prop-types";import{s as o,c as i}from"./style-inject.es-22541f49.js";import{d as l,K as s}from"./KeywordSearch-1a4e22fd.js";import{useHistory as d,useRouteMatch as c,NavLink as p}from"react-router-dom";import{List as m,ListItem as h,ListItemIcon as g,ListItemText as _,IconButton as u,Drawer as f,Divider as w,Typography as y}from"@material-ui/core";import{DehazeRounded as x,SearchOutlined as k}from"@material-ui/icons";import{S as v}from"./Select-c286cde1.js";import"./_commonjsHelpers-ae1b5db5.js";import"axios";import"./isObjectLike-75179648.js";import"@material-ui/lab";import"./Empty-f614b463.js";const E=({language:e,supportLanguages:a})=>a.some((({value:a})=>a===e))?e:a[0].value,b=({drawerList:a,setOpen:n})=>{const r=d(),{url:t}=c();return e.createElement(m,{className:"drawer__list"},Array.isArray(a)&&a.map((({name:a,icon:o,path:i},l)=>e.createElement(h,{button:!0,key:l.toString(),onClick:()=>{i.indexOf("http")>-1?window.location=i:r.push({pathname:`${t}${i}`}),n(!1)}},o&&e.createElement(g,{style:{marginRight:24}},o),e.createElement(_,{primary:a})))))};b.defaultProps={},b.propTypes={drawerList:t.arrayOf(t.any).isRequired,setOpen:t.func.isRequired};o(".drawer__icon {\n display: none !important; }\n\n.drawer__header {\n display: flex;\n align-items: center;\n padding: 20px; }\n .drawer__header-title {\n font-size: 18px;\n font-weight: bold; }\n\n.drawer__list {\n padding: 10px !important; }\n .drawer__list .MuiSvgIcon-root {\n margin-left: 8px; }\n\n.drawer__lang {\n margin: 24px 36px !important; }\n\n@media screen and (max-width: 768px) {\n .drawer {\n display: flex;\n justify-content: flex-end; }\n .drawer__icon {\n display: flex !important; } }\n");const S=({title:n,logo:r,locale:t,supportLanguages:o,drawerList:i,onLanguageChange:l})=>{const[s,d]=a(!1);return e.createElement("div",{className:"drawer"},e.createElement(u,{className:"drawer__icon",onClick:()=>d(!0)},e.createElement(x,{fontSize:"large"})),e.createElement(f,{anchor:"right",open:s,onClose:()=>d(!1),onKeyDown:()=>d(!1)},(r||n)&&e.createElement("div",{className:"drawer__header"},e.createElement("div",{className:"drawer__header-logo"},r),e.createElement("div",{className:"drawer__header-title"},n)),e.createElement(w,null),e.createElement(b,{drawerList:(Array.isArray(i)?i:[]).filter((({showInHeader:e})=>e)),setOpen:d}),e.createElement(w,null),Array.isArray(o)&&o.length>0&&e.createElement(v,{className:"drawer__lang",defaultValue:E({language:t,supportLanguages:o}),onChange:e=>l(e),options:o})))};S.defaultProps={title:void 0,logo:void 0,locale:void 0,supportLanguages:[{value:"en",label:"English"},{value:"zh-tw",label:"繁體中文"},{value:"zh-cn",label:"簡體中文"}],drawerList:void 0,onLanguageChange:()=>{}},S.propTypes={title:t.string,logo:t.node,locale:t.string,supportLanguages:t.arrayOf(t.any),drawerList:t.arrayOf(t.any),onLanguageChange:t.func};o(".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@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");const L=t=>{const{title:o,logo:m,locale:h,supportLanguages:g,pages:_,darkMode:f,className:w}=t,{searchAPI:x,searchPlaceholder:b,smallUseSearchIcon:L}=t,{onSearch:N,setDarkMode:I,onLanguageChange:C,onSearchIconClick:A}=t,O=d(),{location:{search:z}}=O,{url:M}=c(),[j,P]=a(!1),[T,U]=a(!1),D=n(l((()=>P(window.scrollY>100)),10)).current;return r((()=>(window.addEventListener("scroll",D),()=>{window.removeEventListener("scroll",D)})),[]),r((()=>{U(!1)}),[z]),e.createElement("div",{className:i("MuiPaper-root","header",{"header--smallUseSearchIcon":L},{"header--hide":j},{"header--focus":T},w)},e.createElement("div",{className:"header__logo",onClick:()=>O.push(`/${h}`)},m&&e.createElement("div",{className:"header__logo__img"},m),!T&&o&&e.createElement(y,{color:"primary",className:"header__logo__title"},o)),x&&e.createElement(s,{animation:!0,searchAPI:x,placeholder:b,menuOpen:T,setMenuOpen:U,onSearch:N}),e.createElement("div",{className:i("header__links",{"header__links--full":!x})},(Array.isArray(_)?_:[]).filter((({showInHeader:e})=>e)).map((({path:a="",name:n},r)=>{const t=e.createElement(y,{className:"header__links__item",color:"primary"},n);return a.indexOf("http")>-1?e.createElement("a",{key:r.toString(),href:a,className:"header__links__item--active"},t):e.createElement(p,{key:r.toString(),to:`${M}${a}`,activeClassName:"header__links__item--active"},t)}))),e.createElement(u,{className:"header__searchIcon",onClick:A},e.createElement(k,{fontSize:"large"})),false,Array.isArray(g)&&g.length>0&&e.createElement(v,{className:"header__language",defaultValue:E({language:h,supportLanguages:g}),onChange:e=>C(e),options:g}),e.createElement(S,{title:o,logo:m,drawerList:_,supportLanguages:g}))};L.defaultProps={className:void 0,title:void 0,logo:void 0,locale:void 0,supportLanguages:[{value:"en",label:"English"},{value:"zh-tw",label:"繁體中文"},{value:"zh-cn",label:"簡體中文"}],darkMode:!1,searchAPI:void 0,searchPlaceholder:void 0,smallUseSearchIcon:void 0,onSearch:()=>{},setDarkMode:()=>{},onLanguageChange:()=>{},onSearchIconClick:()=>{}},L.propTypes={className:t.string,title:t.string,logo:t.node,locale:t.string,supportLanguages:t.arrayOf(t.any),pages:t.arrayOf(t.any).isRequired,darkMode:t.bool,searchAPI:t.string,searchPlaceholder:t.string,smallUseSearchIcon:t.bool,onSearch:t.func,setDarkMode:t.func,onLanguageChange:t.func,onSearchIconClick:t.func};export{L as default};
|
package/package.json
CHANGED