@daoyi/nmtl-ui 1.1.43-beta.18 → 1.1.43-beta.19
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
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 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-6c440878.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 L=({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(b,{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:E({language:t,supportLanguages:o}),onChange:e=>l(e),options:o})))};L.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:()=>{}},L.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 .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\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 S=t=>{const{title:o,logo:m,locale:h,supportLanguages:g,pages:_,darkMode:f,className:y}=t,{searchAPI:x,searchPlaceholder:b,smallUseSearchIcon:S}=t,{onSearch:N,setDarkMode:C,onLanguageChange:I,onSearchIconClick:A}=t,O=d(),{location:{search:z}}=O,{url:j}=c(),[P,M]=a(!1),[T,U]=a(!1),D=n(l((()=>M(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":S},{"header--hide":P},{"header--focus":T},y)},e.createElement("div",{className:"header__logo",onClick:()=>O.push(`/${h}`)},m&&e.createElement("div",{className:"header__logo__img"},m),!T&&o&&e.createElement(w,{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(w,{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:`${j}${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=>I(e),options:g}),e.createElement(L,{title:o,logo:m,drawerList:_,supportLanguages:g}))};S.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:()=>{}},S.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{S as default};
|
|
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 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-6c440878.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 L=({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(b,{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:E({language:t,supportLanguages:o}),onChange:e=>l(e),options:o})))};L.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:()=>{}},L.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\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 S=t=>{const{title:o,logo:m,locale:h,supportLanguages:g,pages:_,darkMode:f,className:y}=t,{searchAPI:x,searchPlaceholder:b,smallUseSearchIcon:S}=t,{onSearch:N,setDarkMode:C,onLanguageChange:I,onSearchIconClick:A}=t,O=d(),{location:{search:z}}=O,{url:j}=c(),[P,M]=a(!1),[T,U]=a(!1),D=n(l((()=>M(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":S},{"header--hide":P},{"header--focus":T},y)},e.createElement("div",{className:"header__logo",onClick:()=>O.push(`/${h}`)},m&&e.createElement("div",{className:"header__logo__img"},m),!T&&o&&e.createElement(w,{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(w,{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:`${j}${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=>I(e),options:g}),e.createElement(L,{title:o,logo:m,drawerList:_,supportLanguages:g}))};S.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:()=>{}},S.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{S as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e,{useState as o,useEffect as r}from"react";import t from"prop-types";import{s as n,c as i}from"./style-inject.es-22541f49.js";import{i as a,a as l,r as d,M as s}from"./createSvgIcon-8a1a5d79.js";import{Typography as c}from"@material-ui/core";import{u as m,c as k}from"./_commonjsHelpers-ae1b5db5.js";import"@material-ui/icons";import"./withStyles-12e04256.js";import"@material-ui/styles";import"react-dom";var _=m(k((function(o,r){Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;var t=a(e),n=(0,l(d).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})));n(".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=({className:o,keywords:r,backgroundColor:t,textColor:n,limit:a,onMoreClick:l,onKeywordClick:d})=>Array.isArray(r)&&e.createElement("div",{className:i("keywordList",o)},(a?r.slice(0,a):r).map(((o,r)=>e.createElement(c,{color:
|
|
1
|
+
import e,{useState as o,useEffect as r}from"react";import t from"prop-types";import{s as n,c as i}from"./style-inject.es-22541f49.js";import{i as a,a as l,r as d,M as s}from"./createSvgIcon-8a1a5d79.js";import{Typography as c}from"@material-ui/core";import{u as m,c as k}from"./_commonjsHelpers-ae1b5db5.js";import"@material-ui/icons";import"./withStyles-12e04256.js";import"@material-ui/styles";import"react-dom";var _=m(k((function(o,r){Object.defineProperty(r,"__esModule",{value:!0}),r.default=void 0;var t=a(e),n=(0,l(d).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})));n(".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=({className:o,keywords:r,backgroundColor:t,textColor:n,limit:a,onMoreClick:l,onKeywordClick:d})=>Array.isArray(r)&&e.createElement("div",{className:i("keywordList",o)},(a?r.slice(0,a):r).map(((o,r)=>e.createElement(c,{color:"textSecondary",className:"keywordList__item",key:r.toString(),onClick:()=>d(o)},e.createElement("div",{style:{color:n,background:t},className:"keywordList__item__hover"},o)))),a&&r.length>a&&e.createElement("div",{className:i("keywordList__item","keywordList__icon"),style:{backgroundColor:t},onClick:l},e.createElement("div",{className:"keywordList__item__hover"},e.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};n(".keywordModal__content {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n border-radius: 5px; }\n .keywordModal__content__img {\n margin: auto;\n height: 7.75rem;\n object-fit: scale-down; }\n .keywordModal__content__detail {\n width: 100%;\n padding: 1rem 1.25rem;\n background: rgba(255, 255, 255, 0.6);\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 w=({visible:o,setVisible:r,cardData:t,backgroundColor:n,textColor:i,onKeywordClick:a,onAuthorClick:l})=>{const{author:d,imgUrl:c,title:m}=t||{},k=t&&t.keywords&&t.keywords.split("\n")||[];return e.createElement(s,{transparent:!0,size:"small",className:"keywordModal",visible:o,footer:null,onCancel:()=>r(!1)},e.createElement("div",{className:"keywordModal__content",style:{backgroundColor:n}},c&&e.createElement("img",{className:"keywordModal__content__img",src:c,alt:""}),e.createElement("div",{className:"keywordModal__content__detail",style:{color:i}},e.createElement("div",{title:m,className:"keywordModal__content__detail__title"},m),d&&e.createElement("div",{className:"keywordModal__content__detail__author",title:d,onClick:l},d),e.createElement(y,{keywords:k,textColor:i,backgroundColor:n,onKeywordClick:a}))))};w.defaultProps={visible:void 0,setVisible:()=>{},backgroundColor:void 0,textColor:void 0,cardData:void 0,onKeywordClick:()=>{},onAuthorClick:()=>{}},w.propTypes={visible:t.bool,setVisible:t.func,cardData:t.objectOf(t.any),backgroundColor:t.string,textColor:t.string,onKeywordClick:t.func,onAuthorClick:t.func};n(".keywords p {\n font-family: 'Noto Sans TC', 'Arial', sans-serif !important; }\n");const u=({className:t,keywords:n,cardData:a,limit:l,backgroundColor:d,textColor:s,onKeywordClick:c,onMoreClick:m,onAuthorClick:k})=>{const _=a&&a.keywords&&a.keywords.split("\n")||n||[];if(0===_.filter((e=>e&&e.length>0)).length)return null;const[u,p]=o(),C=(()=>{const[e,t]=o("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)})),[]),e})();return e.createElement("div",{className:i("keywords",t)},e.createElement(y,{limit:l||("mobile"===C?1:void 0),keywords:_,backgroundColor:d,textColor:s,onMoreClick:()=>a?p(!0):m(),onKeywordClick:c}),e.createElement(w,{visible:u,setVisible:p,cardData:a,backgroundColor:d,textColor:s,onKeywordClick:c,onAuthorClick:k}))};u.defaultProps={className:void 0,keywords:void 0,cardData:void 0,limit:void 0,backgroundColor:void 0,textColor:void 0,onKeywordClick:()=>{},onMoreClick:()=>{},onAuthorClick:()=>{}},u.propTypes={className:t.string,keywords:t.arrayOf(t.any),cardData:t.objectOf(t.any),limit:t.number,backgroundColor:t.string,textColor:t.string,onKeywordClick:t.func,onMoreClick:t.func,onAuthorClick:t.func};export{u as default};
|
package/package.json
CHANGED