umi#Link JavaScript Examples
The following examples show how to use
umi#Link.
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: index.js From acy-dex-interface with MIT License | 6 votes |
|
render() {
const { collapsed, isMobile, logo } = this.props;
return (
<div className={styles.header}>
<Link to="/" className={styles.logo} key="logo">
<AcyIcon width={24} name="acy" />
</Link>
<RightContent {...this.props} />
</div>
);
}
Example #2
| Source File: SiderMenu.js From acy-dex-interface with MIT License | 6 votes |
|
render() {
const { logo, collapsed, onCollapse, fixSiderbar, theme } = this.props;
const { openKeys } = this.state;
const defaultProps = collapsed ? {} : { openKeys };
const siderClassName = classNames(styles.sider, {
[styles.fixSiderbar]: fixSiderbar,
[styles.light]: theme === 'light',
});
return (
<Sider
trigger={null}
collapsible
collapsed={collapsed}
breakpoint="lg"
onCollapse={onCollapse}
width={256}
theme={theme}
className={siderClassName}
>
<div className={styles.logo} id="logo">
<Link to="/">
<img src={logo} alt="logo" />
<h1>Ant Design Pro</h1>
</Link>
</div>
<Suspense fallback={<PageLoading />}>
<BaseMenu
{...this.props}
mode="inline"
handleOpenChange={this.handleOpenChange}
onOpenChange={this.handleOpenChange}
style={{ padding: '16px 0', width: '100%' }}
{...defaultProps}
/>
</Suspense>
</Sider>
);
}
Example #3
| Source File: sideNav.js From acy-dex-interface with MIT License | 6 votes |
|
render() {
const { theme, contentWidth, menuData, logo } = this.props;
const { maxWidth } = this.state;
const flatMenuKeys = getFlatMenuKeys(menuData);
return (
<div className={`${styles.head} ${theme === 'light' ? styles.light : ''}`}>
<div
ref={ref => {
this.maim = ref;
}}
className={`${styles.main} ${contentWidth === 'Fixed' ? styles.wide : ''}`}
>
<div className={styles.left}>
<div className={styles.logo} key="logo" id="logo">
<Link to="/">
<AcyIcon name="acy" width={32}/>
</Link>
</div>
<div
style={{
maxWidth
}}
>
<BaseMenu {...this.props} flatMenuKeys={flatMenuKeys} className={styles.menu} />
</div>
</div>
{/* <RightContent {...this.props} /> */}
</div>
</div>
);
}
Example #4
| Source File: BasicLayout.jsx From vpp with MIT License | 6 votes |
|
noMatch = (
<Result
status={403}
title="403"
subTitle="Sorry, you are not authorized to access this page."
extra={
<Button type="primary">
<Link to="/user/login">Go Login</Link>
</Button>
}
/>
)
Example #5
| Source File: BasicLayout.jsx From the-eye-knows-the-garbage with MIT License | 6 votes |
|
noMatch = (
<Result
status={403}
title="403"
subTitle="Sorry, you are not authorized to access this page."
extra={
<Button type="primary">
<Link to="/user/login">Go Login</Link>
</Button>
}
/>
)
Example #6
| Source File: BasicLayout.jsx From vpp with MIT License | 5 votes |
|
BasicLayout = props => {
const {
dispatch,
children,
settings,
location = {
pathname: '/',
},
} = props;
/**
* constructor
*/
useEffect(() => {
if (dispatch) {
dispatch({
type: 'user/fetchCurrent',
});
}
}, []);
/**
* init variables
*/
const handleMenuCollapse = payload => {
if (dispatch) {
dispatch({
type: 'global/changeLayoutCollapsed',
payload,
});
}
}; // get children authority
const authorized = getAuthorityFromRouter(props.route.routes, location.pathname || '/') || {
authority: undefined,
};
const { formatMessage } = useIntl();
return (
<ProLayout
logo={logo}
formatMessage={formatMessage}
onCollapse={handleMenuCollapse}
onMenuHeaderClick={() => history.push('/')}
menuItemRender={(menuItemProps, defaultDom) => {
if (menuItemProps.isUrl || !menuItemProps.path) {
return defaultDom;
}
return <Link to={menuItemProps.path}>{defaultDom}</Link>;
}}
breadcrumbRender={(routers = []) => [
{
path: '/',
breadcrumbName: formatMessage({
id: 'menu.home',
}),
},
...routers,
]}
itemRender={(route, params, routes, paths) => {
const first = routes.indexOf(route) === 0;
return first ? (
<Link to={paths.join('/')}>{route.breadcrumbName}</Link>
) : (
<span>{route.breadcrumbName}</span>
);
}}
footerRender={() => defaultFooterDom}
menuDataRender={menuDataRender}
rightContentRender={() => <RightContent />}
{...props}
{...settings}
>
<Authorized authority={authorized.authority} noMatch={noMatch}>
{children}
</Authorized>
</ProLayout>
);
}
Example #7
| Source File: UserLayout.jsx From vpp 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}>
<Link to="/">
<img alt="logo" className={styles.logo} src={logo} />
<span className={styles.title}>Vpp Front End</span>
</Link>
</div>
</div>
{children}
</div>
</div>
</HelmetProvider>
);
}
Example #8
| Source File: login.js From react-drag with MIT License | 5 votes |
|
login = props => {
const { form, dispatch } = props;
const { getFieldDecorator } = form;
const submitForm = e => {
console.log(e);
const {
form: { validateFields },
} = props;
validateFields((err, values) => {
if (!err) {
const payload = {
username: values.username,
password: values.password,
};
dispatch({
type: 'user/login',
payload,
});
console.log('values', values);
}
});
};
return (
<>
<div className={styles.container}>
<div className={styles.title}>
<h2>react-drag 前端可视化构建平台</h2>
</div>
<div className={styles.logForm}>
<h2>登陆</h2>
<div className={styles.form}>
<Form labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
<Form.Item label="用户名">
{getFieldDecorator('username', {
rules: [{ required: true, message: '请输入用户名' }],
})(<Input />)}
</Form.Item>
<Form.Item label="密码">
{getFieldDecorator('password', {
rules: [{ required: true, message: '请输入密码' }],
})(<Input.Password />)}
</Form.Item>
<Button
type="primary"
htmlType="submit"
onClick={submitForm}
className={styles.btn}
>
登陆
</Button>
<Link to="/register" className={styles.link}>
注册
</Link>
</Form>
</div>
</div>
</div>
</>
);
}
Example #9
| Source File: register.js From react-drag with MIT License | 5 votes |
|
login = props => {
const { form, dispatch } = props;
const { getFieldDecorator } = form;
const submitFormResigster = e => {
console.log(e);
const {
form: { validateFields },
} = props;
validateFields((err, values) => {
if (!err) {
const payload = {
username: values.username,
password: values.password,
};
dispatch({
type: 'user/register',
payload,
});
}
});
};
return (
<>
<div className={styles.container}>
<div className={styles.title}>
<h2>react-drag 前端可视化构建平台</h2>
</div>
<div className={styles.logForm}>
<h2>注册</h2>
<div className={styles.form}>
<Form labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
<Form.Item label="用户名">
{getFieldDecorator('username', {
rules: [{ required: true, message: '请输入用户名' }],
})(<Input />)}
</Form.Item>
<Form.Item label="密码">
{getFieldDecorator('password', {
rules: [{ required: true, message: '请输入密码' }],
})(<Input.Password />)}
</Form.Item>
<Form.Item label="再次输入密码">
{getFieldDecorator('repassword', {
rules: [{ required: true, message: '请输入二次确认密码' }],
})(<Input.Password />)}
</Form.Item>
<Button
type="primary"
htmlType="submit"
onClick={submitFormResigster}
className={styles.btn}
>
注册
</Button>
<Link to="/login" className={styles.link}>
登陆
</Link>
</Form>
</div>
</div>
</div>
</>
);
}
Example #10
| Source File: General.js From ant-back with MIT License | 4 votes |
|
render() {
const { loading, currentTab, list } = this.state;
const { user } = this.props;
const { currentUser } = user;
return (
<PageHeaderWrapper title="今日概况">
<Row gutter={16}>
<Col xl={8} lg={24} style={{ marginBottom: 20 }}>
<Card
style={{
height: '210px',
}}
loading={loading}
>
<Row className={styles.myInfoHeader} />
<Meta
avatar={
<Avatar
size={64}
src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png"
/>
}
title={<span>你好！{currentUser.realName}</span>}
description={
<Description onLogout={this.handleLogout} time={currentUser.loginDate} />
}
/>
</Card>
</Col>
<Col xl={16} lg={24} style={{ marginBottom: 20 }}>
<Card style={{ height: '210px' }} loading={loading} title="使用说明">
<Row className="flexSpace">
<Link to="/article/detail?id=2" className="remark">
如何新建一个页面
</Link>
<Divider type="vertical" />
<Link to="/article/detail?id=7" className="remark">
如何添加新的接口
</Link>
<Divider type="vertical" />
<Link to="/article/detail?id=8" className="remark">
如何给页面添加子权限
</Link>
</Row>
<Row className="flexSpace marginTop">
<Link to="/article/detail?id=5" className="remark">
接口文档——基础列表页
</Link>
<Divider type="vertical" />
<Link to="/article/detail?id=6" className="remark">
如何模拟接口数据
</Link>
<Divider type="vertical" />
<a className="remark" target="_blank" href="https://bizcharts.net/">
{' '}
图表建议使用BizCharts
</a>
</Row>
</Card>
</Col>
</Row>
<Row gutter={16}>
<Col xl={6} lg={24}>
<ChartCard
bordered={false}
style={{ height: 200 }}
title="饼状图"
action={
<Info title="饼状图">
<Icon type="info-circle-o" />
</Info>
}
loading={loading}
>
<Chart height={150} data={pieData} scale={cols} padding="auto" forceFit>
<Coord type="theta" radius={0.65} innerRadius={0.45} />
<Axis name="percent" />
<Legend position="right-center" />
<Tooltip showTitle={false} />
<Geom
type="intervalStack"
position="percent"
color="item"
tooltip={[
'item*percent',
(item, percent) => {
percent = `${percent * 100}%`;
return {
name: item,
value: percent,
};
},
]}
style={{
lineWidth: 1,
stroke: '#fff',
}}
/>
</Chart>
</ChartCard>
</Col>
<Col xl={6} lg={24}>
<ChartCard
bordered={false}
style={{ height: 200 }}
title="迷你条形图"
action={
<Info title="迷你条形图">
<Icon type="info-circle-o" />
</Info>
}
loading={loading}
total={() => numeral(132456).format('0,0')}
footer={<Field label="日访问量" value={numeral(1234).format('0,0')} />}
>
<MiniBar height={50} data={visitData} />
</ChartCard>
</Col>
<Col xl={6} lg={24}>
<ChartCard
bordered={false}
style={{ height: 200 }}
title="面积图"
action={
<Info title="面积图">
<Icon type="info-circle-o" />
</Info>
}
loading={loading}
total={() => numeral(132456).format('0,0')}
footer={<Field label="日访问量" value={numeral(1234).format('0,0')} />}
>
<MiniArea height={50} color="#975FE4" data={visitData} />
</ChartCard>
</Col>
<Col xl={6} lg={24}>
<ChartCard
bordered={false}
style={{ height: 200 }}
title="进度条"
action={
<Info title="进度条">
<Icon type="info-circle-o" />
</Info>
}
loading={loading}
total="80%"
contentHeight={50}
footer={<Field label="进度" value="80%" />}
>
<MiniProgress percent={80} strokeWidth={8} target={80} color="#13C2C2" />
</ChartCard>
</Col>
</Row>
<Row style={{ marginTop: 20 }}>
<Card
tabList={tabList}
activeTabKey={currentTab}
onTabChange={key => {
this.onTabChange(key);
}}
>
{currentTab === 'tab1' ? (
<Chart height={300} data={list} scale={cols} forceFit>
<Axis name="time" />
<Axis name="amount" />
<Tooltip
crosshairs={{
type: 'y',
}}
/>
<Geom
type="line"
position="time*amount"
size={2}
color="type"
shape="smooth"
tooltip={[
'type*amount',
(type, amount) => {
return {
value: `交易金额：${yuan(amount)}`,
};
},
]}
/>
</Chart>
) : (
<Chart height={300} data={list} scale={cols} forceFit>
<Axis name="time" />
<Axis name="num" />
<Tooltip
crosshairs={{
type: 'y',
}}
/>
<Geom
type="line"
position="time*num"
size={2}
color="type"
shape="smooth"
tooltip={[
'type*num',
(type, num) => {
return {
value: `交易笔数：${num}`,
};
},
]}
/>
</Chart>
)}
</Card>
</Row>
</PageHeaderWrapper>
);
}
Example #11
| Source File: BasicLayout.jsx From the-eye-knows-the-garbage with MIT License | 4 votes |
|
BasicLayout = props => {
const [menuData, setMenuData] = useState([]);
const {
dispatch,
children,
settings,
location = {
pathname: '/',
},
} = props;
/**
* constructor
*/
useEffect(() => {
if (dispatch) {
dispatch({
type: 'user/fetchCurrent',
});
}
}, []);
useEffect(() => {
queryMenu().then(data => {
let menuData = data.data
menuData.map((item)=>{
item.icon = <DynamicIcon type={item.icon} />
})
setMenuData(menuData || []);
});
}, []);
/**
* init variables
*/
const handleMenuCollapse = payload => {
if (dispatch) {
dispatch({
type: 'global/changeLayoutCollapsed',
payload,
});
}
}; // get children authority
const authorized = getAuthorityFromRouter(props.route.routes, location.pathname || '/') || {
authority: undefined,
};
console.log("authorized")
console.log(authorized)
const { formatMessage } = useIntl();
return (
<ProLayout
logo={logo}
formatMessage={formatMessage}
onCollapse={handleMenuCollapse}
onMenuHeaderClick={() => history.push('/xadmin')}
menuItemRender={(menuItemProps, defaultDom) => {
if (menuItemProps.isUrl || !menuItemProps.path) {
return defaultDom;
}
return <Link to={menuItemProps.path}>{defaultDom}</Link>;
}}
breadcrumbRender={(routers = []) => [
{
path: '/',
breadcrumbName: formatMessage({
id: 'menu.home',
}),
},
...routers,
]}
itemRender={(route, params, routes, paths) => {
const first = routes.indexOf(route) === 0;
return first ? (
// <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
<Link to={'/xadmin'}>{route.breadcrumbName}</Link>
) : (
<span>{route.breadcrumbName}</span>
);
}}
footerRender={() => defaultFooterDom}
// menuDataRender={menuDataRender}
menuDataRender={() =>menuData}
rightContentRender={() => <RightContent />}
{...props}
{...settings}
>
<Authorized authority={authorized.authority} noMatch={noMatch}>
{children}
</Authorized>
</ProLayout>
);
}
