zombiej
6 years ago
168 changed files with 8494 additions and 4272 deletions
@ -0,0 +1 @@ |
|||
~* |
|||
@ -0,0 +1,54 @@ |
|||
export function spyElementPrototypes(Element, properties) { |
|||
const propNames = Object.keys(properties); |
|||
const originDescriptors = {}; |
|||
|
|||
propNames.forEach(propName => { |
|||
const originDescriptor = Object.getOwnPropertyDescriptor(Element.prototype, propName); |
|||
originDescriptors[propName] = originDescriptor; |
|||
|
|||
const spyProp = properties[propName]; |
|||
|
|||
if (typeof spyProp === 'function') { |
|||
// If is a function
|
|||
Element.prototype[propName] = function spyFunc(...args) { |
|||
return spyProp.call(this, originDescriptor, ...args); |
|||
}; |
|||
} else { |
|||
// Otherwise tread as a property
|
|||
Object.defineProperty(Element.prototype, propName, { |
|||
...spyProp, |
|||
set(value) { |
|||
if (spyProp.set) { |
|||
return spyProp.set.call(this, originDescriptor, value); |
|||
} |
|||
return originDescriptor.set(value); |
|||
}, |
|||
get() { |
|||
if (spyProp.get) { |
|||
return spyProp.get.call(this, originDescriptor); |
|||
} |
|||
return originDescriptor.get(); |
|||
}, |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
return { |
|||
mockRestore() { |
|||
propNames.forEach(propName => { |
|||
const originDescriptor = originDescriptors[propName]; |
|||
if (typeof originDescriptor === 'function') { |
|||
Element.prototype[propName] = originDescriptor; |
|||
} else { |
|||
Object.defineProperty(Element.prototype, propName, originDescriptor); |
|||
} |
|||
}); |
|||
}, |
|||
}; |
|||
} |
|||
|
|||
export function spyElementPrototype(Element, propName, property) { |
|||
return spyElementPrototypes(Element, { |
|||
[propName]: property, |
|||
}); |
|||
} |
|||
File diff suppressed because it is too large
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 657 B After Width: | Height: | Size: 678 B |
@ -1,3 +1,3 @@ |
|||
import demoTest from '../../../tests/shared/demoTest'; |
|||
|
|||
demoTest('layout'); |
|||
demoTest('layout', { skip: ['custom-trigger-debug.md'] }); |
|||
|
|||
@ -0,0 +1,125 @@ |
|||
--- |
|||
order: 99 |
|||
title: |
|||
zh-CN: 自定义触发器 Debug |
|||
en-US: Custom trigger debug |
|||
debug: true |
|||
--- |
|||
|
|||
## zh-CN |
|||
|
|||
修改内容前，请尝试此 Demo 查看样式是否抖动。 |
|||
|
|||
````jsx |
|||
import { Layout, Menu, Icon } from 'antd'; |
|||
|
|||
const { Header, Sider, Content } = Layout; |
|||
const SubMenu = Menu.SubMenu; |
|||
|
|||
class SiderDemo extends React.Component { |
|||
state = { |
|||
collapsed: true, |
|||
}; |
|||
|
|||
toggle = () => { |
|||
this.setState({ |
|||
collapsed: !this.state.collapsed, |
|||
}); |
|||
}; |
|||
|
|||
render() { |
|||
return ( |
|||
<Layout> |
|||
<Sider trigger={null} collapsible collapsed={this.state.collapsed}> |
|||
<div className="logo" /> |
|||
<Menu |
|||
theme="dark" |
|||
mode="inline" |
|||
defaultSelectedKeys={['3']} |
|||
defaultOpenKeys={['sub1']} |
|||
> |
|||
<Menu.Item key="1"> |
|||
<Icon type="pie-chart" /> |
|||
<span>Option 1</span> |
|||
</Menu.Item> |
|||
<Menu.Item key="2"> |
|||
<Icon type="desktop" /> |
|||
<span>Option 2</span> |
|||
</Menu.Item> |
|||
<SubMenu |
|||
key="sub1" |
|||
title={ |
|||
<span> |
|||
<Icon type="user" /> |
|||
<span>User</span> |
|||
</span> |
|||
} |
|||
> |
|||
<Menu.Item key="3">Tom</Menu.Item> |
|||
<Menu.Item key="4">Bill</Menu.Item> |
|||
<Menu.Item key="5">Alex</Menu.Item> |
|||
</SubMenu> |
|||
<SubMenu |
|||
key="sub2" |
|||
title={ |
|||
<span> |
|||
<Icon type="team" /> |
|||
<span>Team</span> |
|||
</span> |
|||
} |
|||
> |
|||
<Menu.Item key="6">Team 1</Menu.Item> |
|||
<Menu.Item key="8">Team 2</Menu.Item> |
|||
</SubMenu> |
|||
<Menu.Item key="9"> |
|||
<Icon type="file" /> |
|||
<span>File</span> |
|||
</Menu.Item> |
|||
</Menu> |
|||
</Sider> |
|||
<Layout> |
|||
<Header style={{ background: '#fff', padding: 0 }}> |
|||
<Icon |
|||
className="trigger" |
|||
type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'} |
|||
onClick={this.toggle} |
|||
/> |
|||
</Header> |
|||
<Content |
|||
style={{ |
|||
margin: '24px 16px', |
|||
padding: 24, |
|||
background: '#fff', |
|||
minHeight: 280, |
|||
}} |
|||
> |
|||
Content |
|||
</Content> |
|||
</Layout> |
|||
</Layout> |
|||
); |
|||
} |
|||
} |
|||
|
|||
ReactDOM.render(<SiderDemo />, mountNode); |
|||
```` |
|||
|
|||
````css |
|||
#components-layout-demo-custom-trigger .trigger { |
|||
font-size: 18px; |
|||
line-height: 64px; |
|||
padding: 0 24px; |
|||
cursor: pointer; |
|||
transition: color .3s; |
|||
} |
|||
|
|||
#components-layout-demo-custom-trigger .trigger:hover { |
|||
color: #1890ff; |
|||
} |
|||
|
|||
#components-layout-demo-custom-trigger .logo { |
|||
height: 32px; |
|||
background: rgba(255,255,255,.2); |
|||
margin: 16px; |
|||
} |
|||
```` |
|||
File diff suppressed because it is too large
@ -0,0 +1,73 @@ |
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
|||
|
|||
exports[`Menu should controlled collapse work 1`] = ` |
|||
<ul |
|||
class="ant-menu ant-menu-light ant-menu-root ant-menu-inline" |
|||
role="menu" |
|||
> |
|||
<li |
|||
class="ant-menu-item" |
|||
role="menuitem" |
|||
style="padding-left: 24px;" |
|||
> |
|||
<i |
|||
aria-label="icon: pie-chart" |
|||
class="anticon anticon-pie-chart" |
|||
> |
|||
<svg |
|||
aria-hidden="true" |
|||
class="" |
|||
data-icon="pie-chart" |
|||
fill="currentColor" |
|||
focusable="false" |
|||
height="1em" |
|||
viewBox="64 64 896 896" |
|||
width="1em" |
|||
> |
|||
<path |
|||
d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 0 0-282.8 117.1 398.19 398.19 0 0 0-85.7 127.1A397.61 397.61 0 0 0 72 552a398.46 398.46 0 0 0 117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 0 0 472 952a398.46 398.46 0 0 0 282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 0 0 872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 0 1 470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 0 0 589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 0 1 166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z" |
|||
/> |
|||
</svg> |
|||
</i> |
|||
<span> |
|||
Option 1 |
|||
</span> |
|||
</li> |
|||
</ul> |
|||
`; |
|||
|
|||
exports[`Menu should controlled collapse work 2`] = ` |
|||
<ul |
|||
class="ant-menu ant-menu-light ant-menu-inline-collapsed ant-menu-root ant-menu-inline" |
|||
role="menu" |
|||
> |
|||
<li |
|||
class="ant-menu-item" |
|||
role="menuitem" |
|||
style="padding-left: 24px;" |
|||
> |
|||
<i |
|||
aria-label="icon: pie-chart" |
|||
class="anticon anticon-pie-chart" |
|||
> |
|||
<svg |
|||
aria-hidden="true" |
|||
class="" |
|||
data-icon="pie-chart" |
|||
fill="currentColor" |
|||
focusable="false" |
|||
height="1em" |
|||
viewBox="64 64 896 896" |
|||
width="1em" |
|||
> |
|||
<path |
|||
d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 0 0-282.8 117.1 398.19 398.19 0 0 0-85.7 127.1A397.61 397.61 0 0 0 72 552a398.46 398.46 0 0 0 117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 0 0 472 952a398.46 398.46 0 0 0 282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 0 0 872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 0 1 470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 0 0 589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 0 1 166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z" |
|||
/> |
|||
</svg> |
|||
</i> |
|||
<span> |
|||
Option 1 |
|||
</span> |
|||
</li> |
|||
</ul> |
|||
`; |
|||
@ -1,5 +1,5 @@ |
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
|||
|
|||
exports[`Popconfirm should show overlay when trigger is clicked 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><i aria-label=\\"icon: exclamation-circle\\" class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" class=\\"\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z\\"></path></svg></i><div class=\\"ant-popover-message-title\\">code</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div></div>"`; |
|||
exports[`Popconfirm should show overlay when trigger is clicked 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><i aria-label=\\"icon: exclamation-circle\\" class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" class=\\"\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z\\"></path></svg></i><div class=\\"ant-popover-message-title\\">code</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div></div>"`; |
|||
|
|||
exports[`Popconfirm should show overlay when trigger is clicked 2`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><i aria-label=\\"icon: exclamation-circle\\" class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" class=\\"\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z\\"></path></svg></i><div class=\\"ant-popover-message-title\\">code</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div></div>"`; |
|||
exports[`Popconfirm should show overlay when trigger is clicked 2`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><i aria-label=\\"icon: exclamation-circle\\" class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" class=\\"\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z\\"></path></svg></i><div class=\\"ant-popover-message-title\\">code</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div></div>"`; |
|||
|
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue