ddcat1115
9 years ago
29 changed files with 291 additions and 216 deletions
@ -1,45 +0,0 @@ |
|||
export const imgMap = { |
|||
user: 'https://gw.alipayobjects.com/zos/rmsportal/UjusLxePxWGkttaqqmUI.png', |
|||
a: 'https://gw.alipayobjects.com/zos/rmsportal/ZrkcSjizAKNWwJTwcadT.png', |
|||
b: 'https://gw.alipayobjects.com/zos/rmsportal/KYlwHMeomKQbhJDRUVvt.png', |
|||
c: 'https://gw.alipayobjects.com/zos/rmsportal/gabvleTstEvzkbQRfjxu.png', |
|||
d: 'https://gw.alipayobjects.com/zos/rmsportal/jvpNzacxUYLlNsHTtrAD.png', |
|||
}; |
|||
|
|||
// refers: https://www.sitepoint.com/get-url-parameters-with-javascript/
|
|||
export function getUrlParams(url) { |
|||
const d = decodeURIComponent; |
|||
let queryString = url ? url.split('?')[1] : window.location.search.slice(1); |
|||
const obj = {}; |
|||
if (queryString) { |
|||
queryString = queryString.split('#')[0]; // eslint-disable-line
|
|||
const arr = queryString.split('&'); |
|||
for (let i = 0; i < arr.length; i += 1) { |
|||
const a = arr[i].split('='); |
|||
let paramNum; |
|||
const paramName = a[0].replace(/\[\d*\]/, (v) => { |
|||
paramNum = v.slice(1, -1); |
|||
return ''; |
|||
}); |
|||
const paramValue = typeof (a[1]) === 'undefined' ? true : a[1]; |
|||
if (obj[paramName]) { |
|||
if (typeof obj[paramName] === 'string') { |
|||
obj[paramName] = d([obj[paramName]]); |
|||
} |
|||
if (typeof paramNum === 'undefined') { |
|||
obj[paramName].push(d(paramValue)); |
|||
} else { |
|||
obj[paramName][paramNum] = d(paramValue); |
|||
} |
|||
} else { |
|||
obj[paramName] = d(paramValue); |
|||
} |
|||
} |
|||
} |
|||
return obj; |
|||
} |
|||
|
|||
export default { |
|||
getUrlParams, |
|||
imgMap, |
|||
}; |
|||
@ -1,12 +1,10 @@ |
|||
import * as React from "react"; |
|||
import * as React from 'react'; |
|||
export interface EllipsisProps { |
|||
tooltip?: boolean; |
|||
length?: number; |
|||
lines?: number; |
|||
style?: React.CSSProperties; |
|||
className?: string; |
|||
} |
|||
|
|||
export default class Ellipsis extends React.Component< |
|||
EllipsisProps, |
|||
any |
|||
> {} |
|||
export default class Ellipsis extends React.Component<EllipsisProps, any> {} |
|||
|
|||
@ -1,36 +1,44 @@ |
|||
--- |
|||
order: 0 |
|||
title: 演示 |
|||
title: |
|||
- zh-CN: 演示 |
|||
- en-US: demo |
|||
iframe: 400 |
|||
--- |
|||
|
|||
## zh-CN |
|||
|
|||
浮动固定页脚。 |
|||
|
|||
## en-US |
|||
|
|||
Fixed to the footer. |
|||
|
|||
````jsx |
|||
import FooterToolbar from 'ant-design-pro/lib/FooterToolbar'; |
|||
import { Button } from 'antd'; |
|||
|
|||
ReactDOM.render( |
|||
<div style={{ background: '#f7f7f7', padding: 24 }}> |
|||
<p>页面内容 页面内容 页面内容 页面内容</p> |
|||
<p>页面内容 页面内容 页面内容 页面内容</p> |
|||
<p>页面内容 页面内容 页面内容 页面内容</p> |
|||
<p>页面内容 页面内容 页面内容 页面内容</p> |
|||
<p>页面内容 页面内容 页面内容 页面内容</p> |
|||
<p>页面内容 页面内容 页面内容 页面内容</p> |
|||
<p>页面内容 页面内容 页面内容 页面内容</p> |
|||
<p>页面内容 页面内容 页面内容 页面内容</p> |
|||
<p>页面内容 页面内容 页面内容 页面内容</p> |
|||
<p>页面内容 页面内容 页面内容 页面内容</p> |
|||
<p>页面内容 页面内容 页面内容 页面内容</p> |
|||
<p>页面内容 页面内容 页面内容 页面内容</p> |
|||
<p>页面内容 页面内容 页面内容 页面内容</p> |
|||
<p>页面内容 页面内容 页面内容 页面内容</p> |
|||
<p>页面内容 页面内容 页面内容 页面内容</p> |
|||
<FooterToolbar extra="提示信息"> |
|||
<Button>取消</Button> |
|||
<Button type="primary">提交</Button> |
|||
<p>Content Content Content Content</p> |
|||
<p>Content Content Content Content</p> |
|||
<p>Content Content Content Content</p> |
|||
<p>Content Content Content Content</p> |
|||
<p>Content Content Content Content</p> |
|||
<p>Content Content Content Content</p> |
|||
<p>Content Content Content Content</p> |
|||
<p>Content Content Content Content</p> |
|||
<p>Content Content Content Content</p> |
|||
<p>Content Content Content Content</p> |
|||
<p>Content Content Content Content</p> |
|||
<p>Content Content Content Content</p> |
|||
<p>Content Content Content Content</p> |
|||
<p>Content Content Content Content</p> |
|||
<p>Content Content Content Content</p> |
|||
<FooterToolbar extra="extra information"> |
|||
<Button>Cancel</Button> |
|||
<Button type="primary">Submit</Button> |
|||
</FooterToolbar> |
|||
</div> |
|||
, mountNode); |
|||
```` |
|||
```` |
|||
@ -0,0 +1,18 @@ |
|||
--- |
|||
title: FooterToolbar |
|||
cols: 1 |
|||
order: 6 |
|||
--- |
|||
|
|||
A toolbar fixed at the bottom. |
|||
|
|||
## Usage |
|||
|
|||
It is fixed at the bottom of the content area and does not move along with the scroll bar, which is usually used for data collection and submission for long pages. |
|||
|
|||
## API |
|||
|
|||
Property | Description | Type | Default |
|||
---------|-------------|------|-------- |
|||
children | toolbar content, align to the right | ReactNode | - |
|||
extra | extra information, align to the left | ReactNode | - |
|||
@ -1,7 +1,5 @@ |
|||
--- |
|||
title: |
|||
en-US: FooterToolbar |
|||
zh-CN: FooterToolbar |
|||
title: FooterToolbar |
|||
subtitle: 底部工具栏 |
|||
cols: 1 |
|||
order: 6 |
|||
@ -0,0 +1,71 @@ |
|||
import { getBreadcrumb, urlToList } from './index'; |
|||
|
|||
describe('test urlToList', () => { |
|||
it('A path', () => { |
|||
expect(urlToList('/userinfo')).toEqual(['/userinfo']); |
|||
}); |
|||
it('Secondary path', () => { |
|||
expect(urlToList('/userinfo/2144')).toEqual([ |
|||
'/userinfo', |
|||
'/userinfo/2144', |
|||
]); |
|||
}); |
|||
it('Three paths', () => { |
|||
expect(urlToList('/userinfo/2144/addr')).toEqual([ |
|||
'/userinfo', |
|||
'/userinfo/2144', |
|||
'/userinfo/2144/addr', |
|||
]); |
|||
}); |
|||
}); |
|||
|
|||
const routerData = { |
|||
'/dashboard/analysis': { |
|||
name: '分析页', |
|||
}, |
|||
'/userinfo': { |
|||
name: '用户列表', |
|||
}, |
|||
'/userinfo/:id': { |
|||
name: '用户信息', |
|||
}, |
|||
'/userinfo/:id/addr': { |
|||
name: '收货订单', |
|||
}, |
|||
}; |
|||
describe('test getBreadcrumb', () => { |
|||
it('Simple url', () => { |
|||
expect(getBreadcrumb(routerData, '/dashboard/analysis').name).toEqual( |
|||
'分析页' |
|||
); |
|||
}); |
|||
it('Parameters url', () => { |
|||
expect(getBreadcrumb(routerData, '/userinfo/2144').name).toEqual( |
|||
'用户信息' |
|||
); |
|||
}); |
|||
it('The middle parameter url', () => { |
|||
expect(getBreadcrumb(routerData, '/userinfo/2144/addr').name).toEqual( |
|||
'收货订单' |
|||
); |
|||
}); |
|||
it('Loop through the parameters', () => { |
|||
const urlNameList = urlToList('/userinfo/2144/addr').map((url) => { |
|||
return getBreadcrumb(routerData, url).name; |
|||
}); |
|||
expect(urlNameList).toEqual(['用户列表', '用户信息', '收货订单']); |
|||
}); |
|||
|
|||
it('a path', () => { |
|||
const urlNameList = urlToList('/userinfo').map((url) => { |
|||
return getBreadcrumb(routerData, url).name; |
|||
}); |
|||
expect(urlNameList).toEqual(['用户列表']); |
|||
}); |
|||
it('Secondary path', () => { |
|||
const urlNameList = urlToList('/userinfo/2144').map((url) => { |
|||
return getBreadcrumb(routerData, url).name; |
|||
}); |
|||
expect(urlNameList).toEqual(['用户列表', '用户信息']); |
|||
}); |
|||
}); |
|||
Loading…
Reference in new issue