@daoyi/nmtl-ui 1.1.43-beta.56 → 1.1.43-beta.57
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-8fbf3a0b.js";import{useHistory as d,useRouteMatch as p,NavLink as c}from"react-router-dom";import{List as m,ListItem as h,ListItemIcon as g,ListItemText as _,IconButton as u,Drawer as f,Divider as y,Typography as w}from"@material-ui/core";import{DehazeRounded as x,SearchOutlined as k}from"@material-ui/icons";import{S as v}from"./Select-f549bbe0.js";import"./_commonjsHelpers-ae1b5db5.js";import"axios";import"./isObjectLike-75179648.js";import"@material-ui/lab";import"./_rollupPluginBabelHelpers-1b8c042f.js";import"./Empty-31faff49.js";const b=({language:e,supportLanguages:a})=>a.some((({value:a})=>a===e))?e:a[0].value,E=({drawerList:a,setOpen:n})=>{const r=d(),{url:t}=p();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})))))};E.defaultProps={},E.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(y,null),e.createElement(E,{drawerList:(Array.isArray(i)?i:[]).filter((({showInHeader:e})=>e)),setOpen:d}),e.createElement(y,null),Array.isArray(o)&&o.length>0&&e.createElement(v,{className:"drawer__lang",defaultValue:b({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,typographyColor:y,className:x}=t,{searchAPI:E,searchPlaceholder:L,smallUseSearchIcon:C}=t,{onSearch:N,setDarkMode:I,onLanguageChange:A,onSearchIconClick:O}=t,
|
|
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-8fbf3a0b.js";import{useHistory as d,useRouteMatch as p,NavLink as c}from"react-router-dom";import{List as m,ListItem as h,ListItemIcon as g,ListItemText as _,IconButton as u,Drawer as f,Divider as y,Typography as w}from"@material-ui/core";import{DehazeRounded as x,SearchOutlined as k}from"@material-ui/icons";import{S as v}from"./Select-f549bbe0.js";import"./_commonjsHelpers-ae1b5db5.js";import"axios";import"./isObjectLike-75179648.js";import"@material-ui/lab";import"./_rollupPluginBabelHelpers-1b8c042f.js";import"./Empty-31faff49.js";const b=({language:e,supportLanguages:a})=>a.some((({value:a})=>a===e))?e:a[0].value,E=({drawerList:a,setOpen:n})=>{const r=d(),{url:t}=p();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})))))};E.defaultProps={},E.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(y,null),e.createElement(E,{drawerList:(Array.isArray(i)?i:[]).filter((({showInHeader:e})=>e)),setOpen:d}),e.createElement(y,null),Array.isArray(o)&&o.length>0&&e.createElement(v,{className:"drawer__lang",defaultValue:b({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,typographyColor:y,className:x}=t,{searchAPI:E,searchPlaceholder:L,smallUseSearchIcon:C}=t,{onSearch:N,setDarkMode:I,onLanguageChange:A,onSearchIconClick:O}=t,P=d(),{location:{search:j}}=P,{url:z}=p(),[M,T]=a(!1),[U,D]=a(!1),R=n(l((()=>T(window.scrollY>100)),10)).current;return r((()=>(window.addEventListener("scroll",R),()=>{window.removeEventListener("scroll",R)})),[]),r((()=>{D(!1)}),[j]),e.createElement("div",{className:i("MuiPaper-root","header",{"header--smallUseSearchIcon":C},{"header--hide":M},{"header--focus":U},x)},e.createElement("div",{className:"header__logo",onClick:()=>P.push(`/${h}`)},m&&e.createElement("div",{className:"header__logo__img"},m),!U&&o&&e.createElement(w,{color:y,className:"header__logo__title"},o)),E&&e.createElement(s,{animation:!0,searchAPI:E,placeholder:L,menuOpen:U,setMenuOpen:D,onSearch:N}),e.createElement("div",{className:i("header__links",{"header__links--full":!E})},(Array.isArray(_)?_:[]).filter((({showInHeader:e})=>e)).map((({path:a="",name:n},r)=>{const t=e.createElement(w,{className:"header__links__item",color:y},n);return a.indexOf("http")>-1?e.createElement("a",{key:r.toString(),href:a,className:"header__links__item--active"},t):e.createElement(c,{key:r.toString(),to:`${z}${a}`,activeClassName:"header__links__item--active"},t)}))),e.createElement(u,{className:"header__searchIcon",onClick:O},e.createElement(k,{fontSize:"large"})),false,Array.isArray(g)&&g.length>0&&e.createElement(v,{className:"header__language",defaultValue:b({language:h,supportLanguages:g}),onChange:e=>A(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,typographyColor:"primary",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,typographyColor:t.oneOf(["initial","inherit","primary","secondary","textPrimary","textSecondary","error"]),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