@ant-design/icons#GithubOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#GithubOutlined.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: BasicLayout.jsx From vpp with MIT License | 6 votes |
|
defaultFooterDom = (
<DefaultFooter
copyright={`${new Date().getFullYear()}`}
links={[
// {
// key: 'Ant Design Pro',
// title: 'Ant Design Pro',
// href: 'https://pro.ant.design',
// blankTarget: true,
// },
{
key: 'github',
title: <GithubOutlined />,
href: 'https://github.com/AmadeusGB/vpp',
blankTarget: true,
}
]}
/>
)
Example #2
| Source File: Header.js From website with MIT License | 6 votes |
|
Header = ({ className }) => {
return (
<header className={'header ' + className}>
<div className='header-container'>
<Logo />
<section className='cta-section'>
<a className='social' target='__blank' href={GITHUB_LINK}>
<GithubOutlined />
</a>
<a target='__blank' href={COLABORADORES_FORM}>
<Button type='primary' className='help-cta'>
Ajude-nos
</Button>
</a>
</section>
</div>
</header>
);
}
Example #3
| Source File: Footer.js From the-eye-knows-the-garbage with MIT License | 6 votes |
|
defaultLinks = [{
key: 'Ant Design Pro',
title: 'Ant Design Pro',
href: 'https://pro.ant.design',
blankTarget: true
}, {
key: 'github',
title: React.createElement(GithubOutlined, null),
href: 'https://github.com/ant-design/ant-design-pro',
blankTarget: true
}, {
key: 'Ant Design',
title: 'Ant Design',
href: 'https://ant.design',
blankTarget: true
}]
Example #4
| Source File: BasicLayout.jsx From the-eye-knows-the-garbage with MIT License | 6 votes |
|
defaultFooterDom = (
<DefaultFooter
copyright={`${new Date().getFullYear()} TyAdmin By mtianyan`}
links={[
{
key: 'TyAdmin',
title: 'TyAdmin',
href: 'https://pro.ant.design',
blankTarget: true,
},
{
key: 'github',
title: <GithubOutlined />,
href: 'https://github.com/mtianyan',
blankTarget: true,
},
{
key: 'Ant Design',
title: 'Ant Design Pro V4',
href: 'https://ant.design',
blankTarget: true,
},
]}
/>
)
Example #5
| Source File: Footer.js From website with MIT License | 5 votes |
|
Footer = ({ className }) => {
return (
<footer className={'header ' + className}>
<div className='footer-container'>
<div className='info-content'>
<div className='col'>
<Logo className='inverted' />
<Text>
O Corona Brasil é um projeto voluntário, de código aberto. Nosso
objetivo é ajudar no combate à pandemia do novo coronavírus
reunindo as informações essenciais que os cidadãos precisam para
trabalhar, prestar e solicitar serviços, fazer compras e realizar
atividades cotidianas.
</Text>
<div className='social'>
<a target='__blank' href={GITHUB_LINK}>
<GithubOutlined style={{ color: 'white' }} />
</a>
</div>
</div>
<div className='col'>
{/* <Title.h2>Lorem ipsum dolor sit amet,</Title.h2>
<Text>
Consectetur adipiscing elit. Maecenas eget justo ligula. Class
aptent taciti sociosqu
</Text> */}
</div>
<div className='col'>
{/* <Title.h2>Lorem ipsum dolor sit amet,</Title.h2>
<Text>
Consectetur adipiscing elit. Maecenas eget justo ligula. Class
aptent taciti sociosqu
</Text> */}
</div>
<div className='col'>
<Title.h2>Faça esse projeto crescer</Title.h2>
<a target='__blank' href={COLABORADORES_FORM}>
<Button type='primary' className='help-cta outline inverted'>
Ajude-nos
</Button>
</a>
</div>
</div>
<div className='copyright'>
<Text>© Corona Brasil 2020</Text>
</div>
</div>
</footer>
);
}
Example #6
| Source File: Nav.js From network-rc with Apache License 2.0 | 5 votes |
|
export default function Nav(props) {
return (
<Space
align="center"
size="large"
style={{ width: "100%", justifyContent: "center" }}
>
<a
href="https://network-rc.esonwong.com"
target="_blank"
rel="noopener noreferrer"
>
<HomeOutlined /> Network RC
</a>
<a
href="https://twitter.com/eson000"
target="_blank"
rel="noopener noreferrer"
>
<TwitterOutlined /> Twitter
</a>
<a
href="https://space.bilibili.com/96740361"
target="_blank"
rel="noopener noreferrer"
>
<Icon type="icon-bilibili-fill" /> B站
</a>
<a
href="https://www.youtube.com/channel/UCyQR6LHhhhpTFfxZo7VZddA"
target="_blank"
rel="noopener noreferrer"
>
<YoutubeOutlined /> Youtube
</a>
<a
href="https://github.com/itiwll/network-rc"
target="_blank"
rel="noopener noreferrer"
>
<GithubOutlined /> Github
</a>
<a
href="https://blog.esonwong.com/donate/"
target="_blank"
rel="noopener noreferrer"
>
<HeartOutlined /> 请我喝杯咖啡吧！
</a>
</Space>
);
}
Example #7
| Source File: UserLayout.jsx From the-eye-knows-the-garbage with MIT License | 5 votes |
|
UserLayout = props => {
const {
route = {
routes: [],
},
} = props;
const { routes = [] } = route;
const {
children,
location = {
pathname: '',
},
} = props;
const { formatMessage } = useIntl();
const { breadcrumb } = getMenuData(routes);
const title = getPageTitle({
pathname: location.pathname,
formatMessage,
breadcrumb,
...props,
});
return (
<HelmetProvider>
<Helmet>
<title>{title}</title>
<meta name="description" content={title} />
</Helmet>
<div className={styles.container}>
<div className={styles.lang}>
<SelectLang />
</div>
<div className={styles.content}>
<div className={styles.top}>
<div className={styles.header}>
<img alt="logo" className={styles.logo} src={logo} />
<span className={styles.title}>TyAdmin</span>
</div>
<div className={styles.desc}>Generate By TyAdmin Cli</div>
</div>
{children}
</div>
<DefaultFooter
copyright={`${new Date().getFullYear()} TyAdmin By mtianyan`}
links={[
{
key: 'TyAdmin',
title: 'TyAdmin',
href: 'https://github.com/mtianyan/tyadmin_api_cli',
blankTarget: true,
},
{
key: 'github',
title: <GithubOutlined />,
href: 'https://github.com/mtianyan',
blankTarget: true,
},
{
key: 'Ant Design',
title: 'Ant Design Pro V4',
href: 'https://ant.design',
blankTarget: true,
},
]}
/>
</div>
</HelmetProvider>
);
}
Example #8
| Source File: App.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<div style={{ position: "fixed" }}>
<Transition
items={this.state.logined}
native
from={{ opacity: 0 }}
enter={{ opacity: 1 }}
leave={{ opacity: 0, display: "none" }}
>
{(styles, item) => {
if (item && !this.state.loading) {
return (
<animated.div style={{ ...styles, width: "100vw", height: "100vh", backgroundImage: "url(" + require("./assets/mainBG.webp").default + ")", backgroundSize: "cover" }}>
<Layout style={{ backgroundColor: "rgba(0, 0, 0, 0)" }}>
<Sider
className={this.state.mobileBreakpoint ? "mobileSider" : ""}
breakpoint="md"
collapsedWidth={0}
onBreakpoint={(broken) => { broken ? this.setState({ mobileBreakpoint: true }) : this.setState({ mobileBreakpoint: false }) }}
style={{ boxShadow: "5px 0px 6px 3px rgba(0, 0, 0, .5)" }}
>
<div className="overflow-handle">
<div style={{ height: "9ch", padding: "15px", display: "flex", alignItems: "center", justifyItems: "center" }}>
<img alt="Sieberrsec Logo" src={require("./assets/sieberrsec_ctf.svg").default} style={{ width: "100%", height: "100%", marginRight: "1vw" }}></img>
</div>
<Dropdown overlay={
<Menu>
{this.state.team != "teams-disabled" && this.state.team != "loading" && (
<div>
<Menu.Item key="Team">
<NavLink to="/Team">
<span>
<b style={{ color: "#d89614" }}><u>{this.state.team ? this.state.team : "No Team"}</u></b>
<br />{this.state.team ? "Manage Team " : "Create/Join a Team "}
</span>
<TeamOutlined />
</NavLink>
</Menu.Item>
<Menu.Divider />
</div>
)}
<Menu.Item key="Profile">
<NavLink to="/Profile">
<span>Profile </span>
<UserOutlined />
</NavLink>
</Menu.Item>
<Menu.Item key="Settings">
<NavLink to="/Settings">
<span>Settings </span>
<SettingOutlined />
</NavLink>
</Menu.Item>
<Menu.Divider />
<Menu.Item key="logout" onClick={() => {
confirm({
title: 'Are you sure you want to logout?',
icon: <ExclamationCircleOutlined />,
onOk: (close) => { this.handleLogout(); close(); },
onCancel: () => { },
});
}}>
<span style={{ color: "#d32029" }}>Logout <LogoutOutlined /></span>
</Menu.Item>
</Menu>}
trigger={['click']}>
<div className="buttonHover"
style={{ display: "flex", flexDirection: "column", justifyContent: "center", alignContent: "center", alignItems: "center", height: "13ch", cursor: "pointer", paddingLeft: "2ch", marginBottom: "2vh" }}>
<div style={{ display: "flex", flexDirection: "row", justifyContent: "center", alignContent: "center", alignItems: "center", marginBottom: "1vh" }}>
<h3 style={{ marginRight: "1vw", fontSize: "2.3ch" }}>{this.state.username}</h3>
<Avatar size="large" src={"/static/profile/" + this.state.username + ".webp"} />
</div>
<div>
<h3 style={{ color: "#d89614", fontSize: "2.3ch" }}>{this.state.team !== "teams-disabled" && this.state.team != "loading" && this.state.team ? <b>Team Score:</b> : <b>Score:</b>} {this.state.userScore}</h3>
</div>
</div>
</Dropdown>
<Menu
selectedKeys={[this.state.current]}
onSelect={(selection) => { this.setState({ current: selection.key }) }}
mode="inline"
theme="dark"
> {/*
defaultSelectedKeys - default selected menu items
defaultOpenKeys - default opened sub menus
inline - Sidebar Menu
*/}
<Menu.Item key="" className="menu-item">
<NavLink to="/">
<HomeTwoTone className="menu-item-icon" />
<span>Home</span>
</NavLink>
</Menu.Item>
<Menu.Item key="Challenges" className="menu-item">
<NavLink to="/Challenges">
<FlagTwoTone className="menu-item-icon" />
<span>Challenges</span>
</NavLink>
</Menu.Item>
<Menu.Item key="Scoreboard" className="menu-item">
<NavLink to="/Scoreboard">
<FundTwoTone className="menu-item-icon" />
<span>Scoreboard</span>
</NavLink>
</Menu.Item>
<Menu.Divider />
{this.state.permissions === 1 && (
<Menu.Item key="CreateChallenge" className="menu-item">
<NavLink to="/CreateChallenge">
<PlusSquareTwoTone className="menu-item-icon" twoToneColor="#d89614" />
<span>Create Challenge</span>
</NavLink>
</Menu.Item>
)}
{this.state.permissions === 2 && (
<Menu.Item key="Admin" className="menu-item">
<NavLink to="/Admin">
<CodeTwoTone className="menu-item-icon" twoToneColor="#d32029" />
<span>Admin Panel</span>
</NavLink>
</Menu.Item>
)}
</Menu>
<div style={{ textAlign: "center", marginTop: "3ch", color: "#8c8c8c" }}>
<p>Sieberrsec CTF Platform {ctfxVersion} <a href="https://github.com/IRS-Cybersec/ctf_platform" target="_blank">Contribute <GithubOutlined /></a></p>
</div>
</div>
</Sider>
<Content style={{ height: "100vh", position: "static", overflow: "hidden", margin: "17.5px" }}>
<Route
render={({ location, ...rest }) => (
<Transition
native
items={location.pathname.split("/")[1]}
trail={5}
key={location.pathname.split("/")[1]}
from={{ opacity: 0 }}
enter={{ opacity: 1 }}
leave={{ opacity: 0, display: "none" }}>
{(style, loc) => (
<animated.div style={{ ...style, height: "95vh", overflowY: "auto", backgroundColor: "rgba(0, 0, 0, 0.7)", border: "5px solid transparent", borderRadius: "20px" }}>
<Suspense fallback={<div style={{ height: "100%", width: "100%", display: "flex", justifyContent: "center", alignItems: "center", zIndex: 15 }}>
<Ellipsis color="#177ddc" size={120} ></Ellipsis>
</div>}>
<Switch>
<Route exact path='/' render={(props) => <Home {...props} transition={style} />} />
<Route path='/Challenges/:categoryChall?' render={(props) => <Challenges {...props} permissions={this.state.permissions} transition={style} obtainScore={this.obtainScore.bind(this)} username={this.state.username} team={this.state.team} />} />
<Route exact path='/Scoreboard' render={(props) => <Scoreboard {...props} handleWebSocket={this.handleWebSocket.bind(this)} transition={style} scoreboardSocket={this.state.scoreboardSocket} />} />
<Route exact path='/Settings' render={(props) => <Settings {...props} transition={style} logout={this.handleLogout.bind(this)} username={this.state.username} />} />
<Route exact path='/Profile/:user?' render={(props) => <Profile {...props} transition={style} username={this.state.username} key={window.location.pathname} />} />
<Route exact path='/Team/:team?' render={(props) => <Teams {...props} transition={style} key={window.location.pathname} team={this.state.team} setTeam={this.setTeam.bind(this)} obtainScore={this.obtainScore.bind(this)} />} />
<Route exact path='/Team/join/:code' render={(props) => <Teams {...props} transition={style} key={window.location.pathname} team={this.state.team} setTeam={this.setTeam.bind(this)} obtainScore={this.obtainScore.bind(this)} />} />
{this.state.permissions >= 1 ? (
<Route exact path='/CreateChallenge' render={(props) => <UserChallengeCreate {...props} transition={style} />} />
) : (
<Route path='/Oops' render={(props) => { <Oops {...props} transition={style} /> }} />
)}
{this.state.permissions === 2 ? (
<Route path={['/Admin/:tabPane?']} render={(props) => <Admin {...props} transition={style} />} />
) : (
<Route path='/Oops' render={(props) => <Oops {...props} transition={style} />} />
)}
<Route path='/*' render={(props) => <Oops {...props} transition={style} />} />
</Switch>
</Suspense>
</animated.div>
)}
</Transition>
)}
/>
</Content>
</Layout>
</animated.div>
)
}
else {
if (!this.state.loading && !item && !this.state.token) {
return (
<animated.div style={{ ...styles, position: "absolute" }}>
<Suspense fallback={<div className="loading-style">
<Ellipsis color="#177ddc" size={120} ></Ellipsis>
</div>}>
<Login handleLogin={this.handleLogin.bind(this)}></Login>
</Suspense>
</animated.div>)
}
else {
return (
<animated.div style={{ ...styles, position: "absolute", height: "100vh", width: "100vw", display: "flex", justifyContent: "center", alignItems: "center", backgroundColor: "rgba(0, 0, 0, 0.95)" }}>
<Ellipsis color="#177ddc" size={120} ></Ellipsis>
</animated.div>
)
}
}
}
}
</Transition>
</div >
);
}
Example #9
| Source File: AppRouter.jsx From React-Nest-Admin with MIT License | 4 votes |
|
sidebar = () => {
return (
<Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]}>
<Menu.Item key="1">
<Link to={{ pathname: "/" }}>
<HomeOutlined />
<span>首页</span>
</Link>
</Menu.Item>
<Menu.Item key="5">
<Link to={{ pathname: "/user-management" }}>
<UserOutlined />
<span>用户管理</span>
</Link>
</Menu.Item>
<SubMenu
key="sub1"
title={
<span>
<FileOutlined />
<span>文件管理</span>
</span>
}
>
<Menu.Item key="sub1-1">
<Link to={{ pathname: "/file/list" }}>
<OrderedListOutlined />
<span>文件列表</span>
</Link>
</Menu.Item>
<Menu.Item key="sub1-2">
<Link to={{ pathname: "/file/add" }}>
<UploadOutlined />
<span>文件上传</span>
</Link>
</Menu.Item>
</SubMenu>
<SubMenu
key="sub2"
title={
<span>
<DashboardOutlined />
<span>可视化图表</span>
</span>
}
>
<Menu.Item key="sub2-1">
<Link to={{ pathname: "/charts/line-chart" }}>
<LineChartOutlined />
<span>折线图</span>
</Link>
</Menu.Item>
<Menu.Item key="sub2-2">
<Link to={{ pathname: "/charts/bar-chart" }}>
<BarChartOutlined />
<span>柱状图</span>
</Link>
</Menu.Item>
<Menu.Item key="sub2-3">
<Link to={{ pathname: "/charts/pie-chart" }}>
<PieChartOutlined />
<span>饼状图</span>
</Link>
</Menu.Item>
</SubMenu>
<SubMenu
key="sub5"
title={
<span>
<FileExcelOutlined />
<span>Excel表格</span>
</span>
}
>
<Menu.Item key="sub5-1">
<Link to={{ pathname: "/excel/export-csv" }}>
<ExportOutlined />
<span>Export csv</span>
</Link>
</Menu.Item>
</SubMenu>
<SubMenu
key="sub4"
title={
<span>
<EditOutlined />
<span>文本编辑器</span>
</span>
}
>
<Menu.Item key="sub4-1">
<Link to={{ pathname: "/rich-text-editor" }}>
<Html5Outlined />
<span>富文本编辑器</span>
</Link>
</Menu.Item>
<Menu.Item key="sub4-2">
<Link to={{ pathname: "/md-editor" }}>
<FileMarkdownOutlined />
<span>Markdown编辑器</span>
</Link>
</Menu.Item>
</SubMenu>
<SubMenu
key="sub3"
title={
<span>
<BugOutlined />
<span>错误页面</span>
</span>
}
>
<Menu.Item key="sub3-1">
<Link to={{ pathname: "/not-found" }}>
<InboxOutlined />
<span>404</span>
</Link>
</Menu.Item>
<Menu.Item key="sub3-2">
<Link to={{ pathname: "/not-allow" }}>
<StopOutlined />
<span>403</span>
</Link>
</Menu.Item>
</SubMenu>
<Menu.Item key="6">
<a
href="https://github.com/cnscorpions/React-Nest-Admin"
target="_blank"
rel="noopener noreferrer"
>
<GithubOutlined />
<span>Github</span>
</a>
</Menu.Item>
</Menu>
);
}
Example #10
| Source File: App.js From kafka-map with Apache License 2.0 | 4 votes |
|
render() {
const menu = (
<Menu>
<Menu.Item>
<a href="/#" onClick={() => {
this.setLocale('zh-cn');
}}>
简体中文
</a>
</Menu.Item>
<Menu.Item>
<a href="/#" onClick={() => {
this.setLocale('en-us');
}}>
English
</a>
</Menu.Item>
</Menu>
);
const infoMenu = (
<Menu>
<Menu.Item>
<Link to={`/info`}>
<FormattedMessage id="change-password"/>
</Link>
</Menu.Item>
<Menu.Item>
<a href="/#" onClick={() => {
this.logout();
}}>
<FormattedMessage id="logout"/>
</a>
</Menu.Item>
</Menu>
);
let messages = {}
messages['en-us'] = en_US;
messages['zh-cn'] = zh_CN;
return (
<IntlProvider locale={this.state.locale} messages={messages[this.state.locale]}>
<ConfigProvider locale={this.getAntDesignLocale(this.state.locale)}>
<div className="App">
<Switch>
<Route path="/login" component={Login}/>
<Route>
<Layout style={{minHeight: '100vh'}}>
<Header className="header">
<div className='km-header'>
<div style={{flex: '1 1 0%'}}>
<Link to={'/'}>
<span className='km-header-logo'>Kafka Map</span>
</Link>
</div>
<div className='km-header-right'>
<Dropdown overlay={infoMenu}>
<span className={'km-header-right-item'}>
{this.state.info.username}
</span>
</Dropdown>
</div>
<div className='km-header-right'>
<Dropdown overlay={menu}>
<span className={'km-header-right-item'}>
<i className="anticon">
<svg viewBox="0 0 24 24" focusable="false" width="1em"
height="1em"
fill="currentColor" aria-hidden="true">
<path d="M0 0h24v24H0z" fill="none"/>
<path
d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z "
className="css-c4d79v"/>
</svg>
</i>
</span>
</Dropdown>
</div>
<div className='km-header-right'>
<span className={'km-header-right-item'}>
<Tooltip title="star">
<Button type="text" style={{color: 'white'}} href='https://github.com/dushixiang/kafka-map' icon={<GithubOutlined/>}>
</Button>
</Tooltip>
</span>
</div>
</div>
</Header>
<Content className='km-container'>
<Layout>
<Content>
<Route path="/" exact component={Cluster}/>
<Route path="/topic" component={Topic}/>
<Route path="/broker" component={Broker}/>
<Route path="/consumer-group" component={ConsumerGroup}/>
<Route path="/consumer-group-info" component={ConsumerGroupInfo}/>
<Route path="/topic-info" component={TopicInfo}/>
<Route path="/topic-data" component={TopicData}/>
<Route path="/info" component={Info}/>
</Content>
</Layout>
</Content>
<Footer style={{textAlign: 'center'}}>kafka map ©2021 Created by dushixiang
Version:{this.state.package['version']}</Footer>
</Layout>
</Route>
</Switch>
</div>
</ConfigProvider>
</IntlProvider>
);
}
Example #11
| Source File: App.js From next-terminal with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const menu = (
<Menu>
<Menu.Item>
<Link to={'/info'}>
<SolutionOutlined/> 个人中心
</Link>
</Menu.Item>
<Menu.Divider/>
<Menu.Item>
<Popconfirm
key='login-btn-pop'
title="您确定要退出登录吗?"
onConfirm={this.confirm}
okText="确定"
cancelText="取消"
placement="left"
>
<LogoutOutlined/> 退出登录
</Popconfirm>
</Menu.Item>
</Menu>
);
return (
<Switch>
<Route path="/access" component={Access}/>
<Route path="/term" component={Term}/>
<Route path="/login"><Login updateUser={this.updateUser}/></Route>
<Route path="/">
<Layout className="layout" style={{minHeight: '100vh'}}>
{
isAdmin() ?
<>
<Sider collapsible collapsed={this.state.collapsed} trigger={null}>
<div className="logo">
<img src={this.state.logo} alt='logo' width={this.state.logoWidth}/>
</div>
<Menu
onClick={(e) => this.setCurrent(e.key)}
selectedKeys={[this.state.current]}
onOpenChange={this.subMenuChange}
defaultOpenKeys={this.state.openKeys}
theme="dark" mode="inline" defaultSelectedKeys={['dashboard']}
inlineCollapsed={this.state.collapsed}
style={{lineHeight: '64px'}}>
<Menu.Item key="dashboard" icon={<DashboardOutlined/>}>
<Link to={'/'}>
控制面板
</Link>
</Menu.Item>
<SubMenu key='resource' title='资源管理' icon={<CloudServerOutlined/>}>
<Menu.Item key="asset" icon={<DesktopOutlined/>}>
<Link to={'/asset'}>
资产列表
</Link>
</Menu.Item>
<Menu.Item key="credential" icon={<IdcardOutlined/>}>
<Link to={'/credential'}>
授权凭证
</Link>
</Menu.Item>
<Menu.Item key="dynamic-command" icon={<CodeOutlined/>}>
<Link to={'/dynamic-command'}>
动态指令
</Link>
</Menu.Item>
<Menu.Item key="access-gateway" icon={<ApiOutlined/>}>
<Link to={'/access-gateway'}>
接入网关
</Link>
</Menu.Item>
</SubMenu>
<SubMenu key='audit' title='会话审计' icon={<AuditOutlined/>}>
<Menu.Item key="online-session" icon={<LinkOutlined/>}>
<Link to={'/online-session'}>
在线会话
</Link>
</Menu.Item>
<Menu.Item key="offline-session" icon={<DisconnectOutlined/>}>
<Link to={'/offline-session'}>
历史会话
</Link>
</Menu.Item>
</SubMenu>
<SubMenu key='ops' title='系统运维' icon={<ControlOutlined/>}>
<Menu.Item key="login-log" icon={<LoginOutlined/>}>
<Link to={'/login-log'}>
登录日志
</Link>
</Menu.Item>
<Menu.Item key="job" icon={<BlockOutlined/>}>
<Link to={'/job'}>
计划任务
</Link>
</Menu.Item>
<Menu.Item key="access-security" icon={<SafetyCertificateOutlined/>}>
<Link to={'/access-security'}>
访问安全
</Link>
</Menu.Item>
<Menu.Item key="storage" icon={<HddOutlined/>}>
<Link to={'/storage'}>
磁盘空间
</Link>
</Menu.Item>
</SubMenu>
<SubMenu key='user-manage' title='用户管理' icon={<UserSwitchOutlined/>}>
<Menu.Item key="user" icon={<UserOutlined/>}>
<Link to={'/user'}>
用户管理
</Link>
</Menu.Item>
<Menu.Item key="user-group" icon={<TeamOutlined/>}>
<Link to={'/user-group'}>
用户组管理
</Link>
</Menu.Item>
<Menu.Item key="strategy" icon={<InsuranceOutlined/>}>
<Link to={'/strategy'}>
授权策略
</Link>
</Menu.Item>
</SubMenu>
<Menu.Item key="my-file" icon={<FolderOutlined/>}>
<Link to={'/my-file'}>
我的文件
</Link>
</Menu.Item>
<Menu.Item key="info" icon={<SolutionOutlined/>}>
<Link to={'/info'}>
个人中心
</Link>
</Menu.Item>
<Menu.Item key="setting" icon={<SettingOutlined/>}>
<Link to={'/setting'}>
系统设置
</Link>
</Menu.Item>
</Menu>
</Sider>
<Layout className="site-layout">
<Header className="site-layout-background"
style={{padding: 0, height: headerHeight, zIndex: 20}}>
<div className='layout-header'>
<div className='layout-header-left'>
{React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
className: 'trigger',
onClick: this.onCollapse,
})}
</div>
<div className='layout-header-right'>
<div className={'layout-header-right-item'}>
<a style={{color: 'black'}} target='_blank'
href='https://github.com/dushixiang/next-terminal'
rel='noreferrer noopener'>
<GithubOutlined/>
</a>
</div>
</div>
<div className='layout-header-right'>
<Dropdown overlay={menu}>
<div className='nickname layout-header-right-item'>
{getCurrentUser()['nickname']} <DownOutlined/>
</div>
</Dropdown>
</div>
</div>
</Header>
<Route path="/" exact component={Dashboard}/>
<Route path="/user" component={User}/>
<Route path="/user-group" component={UserGroup}/>
<Route path="/asset" component={Asset}/>
<Route path="/credential" component={Credential}/>
<Route path="/dynamic-command" component={DynamicCommand}/>
<Route path="/batch-command" component={BatchCommand}/>
<Route path="/online-session" component={OnlineSession}/>
<Route path="/offline-session" component={OfflineSession}/>
<Route path="/login-log" component={LoginLog}/>
<Route path="/info" component={Info}/>
<Route path="/setting" component={Setting}/>
<Route path="/job" component={Job}/>
<Route path="/access-security" component={Security}/>
<Route path="/access-gateway" component={AccessGateway}/>
<Route path="/my-file" component={MyFile}/>
<Route path="/storage" component={Storage}/>
<Route path="/strategy" component={Strategy}/>
<Footer style={{textAlign: 'center'}}>
Copyright © 2020-2022 dushixiang, All Rights Reserved.
Version:{this.state.package['version']}
</Footer>
</Layout>
</> :
<>
<Header style={{padding: 0}}>
<div className='km-header'>
<div style={{flex: '1 1 0%'}}>
<Link to={'/'}>
<img src={this.state.logo} alt='logo' width={120}/>
</Link>
<Link to={'/my-file'}>
<Button type="text" style={{color: 'white'}}
icon={<FolderOutlined/>}>
文件
</Button>
</Link>
<Link to={'/dynamic-command'}>
<Button type="text" style={{color: 'white'}}
icon={<CodeOutlined/>}>
指令
</Button>
</Link>
</div>
<div className='km-header-right'>
<Dropdown overlay={menu}>
<span className={'km-header-right-item'}>
{getCurrentUser()['nickname']}
</span>
</Dropdown>
</div>
</div>
</Header>
<Content className='km-container'>
<Layout>
<Route path="/" exact component={MyAsset}/>
<Content className={'kd-content'}>
<Route path="/info" component={Info}/>
<Route path="/my-file" component={MyFile}/>
<Route path="/dynamic-command" component={DynamicCommand}/>
</Content>
</Layout>
</Content>
<Footer style={{textAlign: 'center'}}>
Copyright © 2020-2022 dushixiang, All Rights Reserved.
Version:{this.state.package['version']}
</Footer>
</>
}
</Layout>
</Route>
</Switch>
);
}
Example #12
| Source File: ChatList.js From react-chat-app with MIT License | 4 votes |
|
ChatList = props => {
const didMountRef = useRef(false)
const [hasMoreChats, setHasMoreChats] = useState(true)
const [editingProfile, setEditingProfile] = useState(false)
const [logoSource, setLogoSource] = useState(chatLogo);
const [theme, setTheme] = useState("dark");
const { conn, chats, setChats, setActiveChat, activeChat } = useContext(ChatEngineContext)
const chat = chats && chats[activeChat];
const name = props.chatAppState.userName
const secret = props.chatAppState.userSecret
useEffect(() => {
const themeValue = localStorage.getItem("theme");
if (themeValue === "light") {
document.querySelector(".app").classList.add("light");
setLogoSource(chatLogoWhite)
} else if (themeValue === "dark") {
document.querySelector(".app").classList.remove("light");
setLogoSource(chatLogo)
} else {
localStorage.setItem("theme", theme);
}
}, [theme]);
function deleteActiveChat(chatID) {
var myHeaders = new Headers();
let otherPerson = chat.people.find(
(person) => person.person.username !== name
)
? chat.people.find((person) => person.person.username !== name)
: chat.people.find((person) => person.person.username === name);
myHeaders.append("Project-ID", process.env.REACT_APP_PROJECT_ID);
myHeaders.append("User-Name", name);
myHeaders.append("User-Secret", secret);
var raw = `{"username": "${name}"}`;
var raw2 = `{"username": "${otherPerson.person.username}"}`;
var firstUser = {
method: "DELETE",
headers: myHeaders,
body: raw,
redirect: "follow",
};
var secondUser = {
method: "DELETE",
headers: myHeaders,
body: raw2,
redirect: "follow",
};
fetch(`https://api.chatengine.io/chats/${chatID}/people/`, firstUser)
.then((response) => response.text())
.then((result) => console.log(result))
.catch((error) => console.log("error", error));
fetch(`https://api.chatengine.io/chats/${chatID}/people/`, secondUser)
.then((response) => response.text())
.then((result) => console.log(result))
.catch((error) => console.log("error", error));
}
function getDateTime(date, offset) {
if (!date) return ''
date = date.replace(' ', 'T')
offset = offset ? offset : 0
const year = date.substr(0, 4)
const month = date.substr(5, 2)
const day = date.substr(8, 2)
const hour = date.substr(11, 2)
const minute = date.substr(14, 2)
const second = date.substr(17, 2)
var d = new Date(`${year}-${month}-${day}T${hour}:${minute}:${second}`)
d.setHours(d.getHours() + offset)
return d
}
function renderChats(chats) {
return chats.map((chat, index) => {
if (!chat) {
return <div key={`chat_${index}`} />
} else if (props.chatAppState.renderChatCard) {
return <div key={`chat_${index}`}>{props.chatAppState.renderChatCard(chat, index)}</div>
} else {
return (""
)
}
})
}
function sortChats(chats) {
return chats.sort((a, b) => {
const aDate = a.last_message && a.last_message.created ? getDateTime(a.last_message.created, props.chatAppState.offset) : getDateTime(a.created, props.chatAppState.offset)
const bDate = b.last_message && b.last_message.created ? getDateTime(b.last_message.created, props.chatAppState.offset) : getDateTime(b.created, props.chatAppState.offset)
return new Date(bDate) - new Date(aDate);
})
}
function onGetChats(chatList) {
const oldChats = chats !== null ? chats : {}
const newChats = _.mapKeys({ ...chatList }, 'id')
const allChats = { ...oldChats, ...newChats }
setChats(allChats);
(count && count > Object.keys(allChats).length) && setHasMoreChats(false);
}
useEffect(() => {
if (!didMountRef.current && name && secret) {
didMountRef.current = true
getLatestChats(
props.chatAppState,
count,
(chats) => {
onGetChats(chats)
const chatList = sortChats(chats)
chatList.length > 0 && setActiveChat(chatList[0].id)
}
)
}
})
useEffect(() => {
if (!activeChat) {
activeConversation()
}
}, [chats, activeChat])
const chatList = sortChats(
chats ?
Object.values(chats) :
[{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
)
function activeConversation() {
if (chatList[0]) {
setActiveChat(chatList[0].id)
}
}
if (chats == null) return <div />;
return (
<div className="chat-left-wing">
<div className="chat-bar">
<div className="chat-bar-logo">
{(window.screen.availWidth > 700) ?
<img src={logoSource} alt="" /> :
<div className="mobile-toggler">
<CloseOutlined
onClick={() => {
document.querySelector(".chat-container").children[0].children[1].children[0].style.display = "none";
document.querySelector(".chat-container").children[0].children[1].children[1].style.display = "block";
}}
/>
</div>
}
</div>
<div className="chat-bar-options">
<div className="chat-bar-option">
<UserOutlined
onClick={
() => {
if (editingProfile && (window.screen.availWidth > 1150)) {
setEditingProfile(!editingProfile)
document.querySelector(".ce-chats-container").style.height = "530px"
}
else if (!editingProfile && (window.screen.availWidth > 1150)) {
setEditingProfile(!editingProfile)
document.querySelector(".ce-chats-container").style.height = "425px"
}
else if (editingProfile && (window.screen.availWidth <= 1150)) {
setEditingProfile(!editingProfile)
document.querySelector(".ce-chats-container").style.height = "calc(100vh - 76px)"
} else {
setEditingProfile(!editingProfile)
document.querySelector(".ce-chats-container").style.height = "calc(100vh - 166px)"
}
}
}
/>
</div>
<div className="chat-bar-option">
<BgColorsOutlined onClick={() => {
const themeValue = localStorage.getItem("theme");
if (themeValue === "dark") {
setTheme("light")
localStorage.setItem("theme", "light");
document.querySelector(".app").classList.add("light");
setLogoSource(chatLogoWhite)
} else if (themeValue === "light") {
setTheme("dark")
localStorage.setItem("theme", "dark");
document.querySelector(".app").classList.remove("light");
setLogoSource(chatLogo)
}
}} />
</div>
<div className="chat-bar-option">
<a href="https://github.com/matt765/react-chat-app" target="_blank"><GithubOutlined /></a>
</div>
<div className="chat-bar-option">
<DeleteOutlined onClick={() => {
if (name === "john%20doe") {
alert("Deleting conversations is disabled on sample account, sorry!");
return
}
if (window.confirm("Press OK if you want to delete active chat. Conversation with this person will be lost")) {
deleteActiveChat(activeChat)
}
}} />
</div>
<div className="chat-bar-option"> <LogoutOutlined onClick={() => {
if (window.confirm("Press OK if you want to logout")) {
fb.auth.signOut().then(console.log("logged out"))
document.querySelector(".app").classList.remove("light");
}
}} /></div>
</div>
</div>
<div className="chat-left-wing-list">
{editingProfile ?
<ChatProfile
chat={chat}
conn={conn}
name={props.chatAppState.userName}
secret={props.chatAppState.userSecret}
/> : ""}
<div style={styles.chatListContainer} className='ce-chat-list'>
{
props.chatAppState.renderNewChatForm ?
props.chatAppState.renderNewChatForm(conn) :
<NewChatForm onClose={props.chatAppState.onClose ? () => props.chatAppState.onClose() : undefined} />
}
<div style={styles.chatsContainer} className='ce-chats-container'>
{renderChats(chatList)}
{
hasMoreChats && chatList.length > 0 &&
<div>
<div style={{ height: '8px' }} />
</div>
}
</div>
</div>
</div>
</div>
)
}
