Skip to content

Commit

Permalink
feat: 添加组件搜索栏 (#906,#781)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nullptr-z
nullptr-z committed Aug 25, 2022
1 parent e5574d5 commit 9b388f6
Show file tree
Hide file tree
Showing 2 changed files with 106 additions and 53 deletions.
22 changes: 21 additions & 1 deletion website/src/components/Nav/index.module.less
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,34 @@
.logo {
width: 32px;
width: 'auto';
padding: 25px 0 0 0;
margin: 0 auto;
z-index: 1;
display: flex;
justify-content: flex-start;

span {
display: none;
}

&.top {
padding-top: 0;

a {
display: flex;
align-items: center;
}

svg {
height: 32px;
margin-right: 10px;
}

span {
display: inline-table;
font-weight: bold;
color: #fff;
font-size: 16px;

sup {
font-weight: normal;
padding-left: 5px;
Expand All @@ -34,27 +40,34 @@
}

.nav {
align-items: center;
padding-top: 25px;
justify-content: space-between;
flex: 1;

svg {
height: 18px;
width: 18px;
margin: 0 auto;
margin-right: 6px;

path {
fill: currentColor;
}
}

a {
color: #9e9e9e;
display: block;
padding: 10px 0;
text-align: center;

&:global {
&:hover svg.gitee path {
fill: #c71d23 !important;
}
}

&:global(.active) {
color: #fff;
}
Expand All @@ -67,13 +80,16 @@
display: flex;
justify-content: center;
line-height: initial;

a {
padding: 0 10px;
display: flex;
}

svg {
display: flex;
}

// .logo {
// padding-top: 0;
// }
Expand All @@ -84,11 +100,13 @@
flex-direction: column;
align-items: stretch;
padding-bottom: 10px;

a {
display: block;
padding: 10px 0;
text-align: center;
}

button {
background-color: transparent;
border: 0;
Expand All @@ -100,9 +118,11 @@
flex-direction: row;
align-items: center;
padding-bottom: 0;

a {
padding: 0;
}

svg {
display: flex;
}
Expand Down
137 changes: 85 additions & 52 deletions website/src/components/Nav/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Fragment, useContext, ChangeEvent } from 'react';
import { Tooltip } from 'uiw';
import { Fragment, useContext, ChangeEvent, useMemo, useState } from 'react';
import { SearchSelect, Tooltip } from 'uiw';
import { NavLink, Link } from 'react-router-dom';
import styles from './index.module.less';
import { ThemeContext } from '../../contexts';
Expand All @@ -13,13 +13,31 @@ import data from '../../menu.json';
export default function Nav() {
const { state, dispatch } = useContext(ThemeContext);
const { t: trans, i18n } = useTranslation();
const [searchText, setSearchText] = useState('');
// eslint-disable-next-line react-hooks/exhaustive-deps
// const data = useMemo(() => JSON.parse(trans('menu')), [i18n.language]);
const menuSearchOption = useMemo(() => {
const components = data.find((m) => m.path === '/components')?.children || [];
const option = [];
for (let i = 0; i < components.length; i++) {
const com = components[i];
const label = com.name;
if (com.path && label.toLocaleLowerCase().includes(searchText.toLocaleLowerCase())) {
const item = { label, value: com.path || '' };
option.push(item);
}
}
return option;
}, [searchText, i18n.language]);

const changeLanguage = (e: ChangeEvent<HTMLSelectElement>) => {
i18n.changeLanguage(e.target.value);
};

const onSearchMenu = (searchText: string) => {
setSearchText(searchText);
};

return (
<Fragment>
<div className={[styles.logo, state.layout === 'left' ? null : styles.top].filter(Boolean).join(' ').trim()}>
Expand All @@ -33,71 +51,86 @@ export default function Nav() {
</Link>
</div>
<div className={[styles.nav, state.layout === 'left' ? null : styles.navTop].filter(Boolean).join(' ').trim()}>
{data.map(({ path, name, icon, translation }, idx: number) => {
if (Object.keys(nav).includes(icon)) {
icon = (nav as any)[icon];
}
let newName = translation ? trans(`menu.${translation}`) : trans(`menu.${path}`);
if (/^\//.test(path)) {
newName = trans(`menu.${path}`);
}
<div style={{ display: 'flex' }}>
{data.map(({ path, name, icon, translation }, idx: number) => {
if (Object.keys(nav).includes(icon)) {
icon = (nav as any)[icon];
}
let newName = translation ? trans(`menu.${translation}`) : trans(`menu.${path}`);
if (/^\//.test(path)) {
newName = trans(`menu.${path}`);
}

if (/^https?:(?:\/\/)?/.test(path)) {
if (/^https?:(?:\/\/)?/.test(path)) {
if (state.layout === 'top') {
return (
<a key={idx} target="__blank" href={path} className={styles.outerUrl}>
{icon} <span>{newName}</span>
</a>
);
}
return (
<Tooltip
usePortal={false}
key={idx}
placement={state.layout === 'left' ? 'right' : 'bottom'}
content={<span style={{ whiteSpace: 'nowrap' }}>{newName}</span>}
>
<a target="__blank" href={path} className={styles.outerUrl}>
{icon}
</a>
</Tooltip>
);
}
let activeStyle: React.CSSProperties = {
color: '#fff',
};
if (state.layout === 'top') {
return (
<a key={idx} target="__blank" href={path} className={styles.outerUrl}>
<NavLink
to={path}
key={idx}
// @ts-ignore
style={({ isActive }) => (isActive ? activeStyle : undefined)}
>
{icon} <span>{newName}</span>
</a>
</NavLink>
);
}

return (
<Tooltip
usePortal={false}
key={idx}
placement={state.layout === 'left' ? 'right' : 'bottom'}
content={<span style={{ whiteSpace: 'nowrap' }}>{newName}</span>}
>
<a target="__blank" href={path} className={styles.outerUrl}>
<NavLink
to={path}
// @ts-ignore
style={({ isActive }) => (isActive ? activeStyle : undefined)}
>
{icon}
</a>
</NavLink>
</Tooltip>
);
}
let activeStyle: React.CSSProperties = {
color: '#fff',
};
if (state.layout === 'top') {
return (
<NavLink
to={path}
key={idx}
// @ts-ignore
style={({ isActive }) => (isActive ? activeStyle : undefined)}
>
{icon} <span>{newName}</span>
</NavLink>
);
}

return (
<Tooltip
usePortal={false}
key={idx}
placement={state.layout === 'left' ? 'right' : 'bottom'}
content={<span style={{ whiteSpace: 'nowrap' }}>{newName}</span>}
>
<NavLink
to={path}
// @ts-ignore
style={({ isActive }) => (isActive ? activeStyle : undefined)}
>
{icon}
</NavLink>
</Tooltip>
);
})}
})}
</div>
<SearchSelect
size="large"
style={{ width: 400, top: 30, display: 'flex', alignItems: 'center', marginLeft: 5 }}
placeholder="搜索组件"
showSearch={true}
onSearch={onSearchMenu}
value={searchText}
option={menuSearchOption}
onSelect={(value) => {
const isHttp = new RegExp(`^http`).test(value as string);
if (isHttp) window.open(value as string);
else window.location.href = `/#/components/${value}`;
}}
/>
</div>

<div className={[styles.btn, state.layout === 'left' ? null : styles.btnTop].filter(Boolean).join(' ').trim()}>
<select value={i18n.language} onChange={(e) => changeLanguage(e)}>
<option value="zh-CN">简体中文</option>
Expand All @@ -109,9 +142,9 @@ export default function Nav() {
{menu.china}
</a>
</Tooltip>
<button onClick={() => dispatch({ ...state, layout: state.layout === 'left' ? 'top' : 'left' })}>
{/* <button onClick={() => dispatch({ ...state, layout: state.layout === 'left' ? 'top' : 'left' })}>
{state.layout === 'left' ? menu.menu : menu.menutop}
</button>
</button> */}
</div>
</Fragment>
);
Expand Down

0 comments on commit 9b388f6

Please sign in to comment.