mirror of
https://github.com/zhigang1992/react.git
synced 2026-04-28 20:25:29 +08:00
feat(button): forward the ref of the original element
This commit is contained in:
unix
@@ -33,66 +33,66 @@ exports[`ButtonIcon should render correctly 1`] = `
|
||||
padding-right: 0;
|
||||
}
|
||||
</style></div><style>
|
||||
.btn {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
padding: 0 1.375rem;
|
||||
height: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
min-width: 12.5rem;
|
||||
width: auto;
|
||||
border-radius: 5px;
|
||||
font-weight: 400;
|
||||
font-size: .875rem;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
text-transform: capitalize;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
|
||||
border 200ms ease 0ms, color 200ms ease 0ms;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #666;
|
||||
background-color: #fff;
|
||||
border: 1px solid #eaeaea;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: none;
|
||||
--zeit-ui-button-padding: 1.375rem;
|
||||
--zeit-ui-button-height: 2.5rem;
|
||||
--zeit-ui-button-color: #666;
|
||||
}
|
||||
.btn {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
padding: 0 1.375rem;
|
||||
height: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
min-width: 12.5rem;
|
||||
width: auto;
|
||||
border-radius: 5px;
|
||||
font-weight: 400;
|
||||
font-size: .875rem;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
text-transform: capitalize;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
|
||||
border 200ms ease 0ms, color 200ms ease 0ms;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #666;
|
||||
background-color: #fff;
|
||||
border: 1px solid #eaeaea;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: none;
|
||||
--zeit-ui-button-padding: 1.375rem;
|
||||
--zeit-ui-button-height: 2.5rem;
|
||||
--zeit-ui-button-color: #666;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
color: #000;
|
||||
--zeit-ui-button-color: #000;
|
||||
background-color: #fff;
|
||||
border-color: #000;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: none;
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
.btn:hover {
|
||||
color: #000;
|
||||
--zeit-ui-button-color: #000;
|
||||
background-color: #fff;
|
||||
border-color: #000;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: none;
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
|
||||
.btn :global(.text) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
line-height: inherit;
|
||||
top: -1px;
|
||||
}
|
||||
.btn :global(.text) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
line-height: inherit;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.btn :global(.text p),
|
||||
.btn :global(.text pre),
|
||||
.btn :global(.text div) {
|
||||
margin: 0;
|
||||
}
|
||||
</style></button>"
|
||||
.btn :global(.text p),
|
||||
.btn :global(.text pre),
|
||||
.btn :global(.text div) {
|
||||
margin: 0;
|
||||
}
|
||||
</style></button>"
|
||||
`;
|
||||
|
||||
exports[`ButtonIcon should work with right 1`] = `
|
||||
@@ -128,64 +128,64 @@ exports[`ButtonIcon should work with right 1`] = `
|
||||
padding-right: 0;
|
||||
}
|
||||
</style></div><style>
|
||||
.btn {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
padding: 0 1.375rem;
|
||||
height: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
min-width: 12.5rem;
|
||||
width: auto;
|
||||
border-radius: 5px;
|
||||
font-weight: 400;
|
||||
font-size: .875rem;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
text-transform: capitalize;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
|
||||
border 200ms ease 0ms, color 200ms ease 0ms;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #666;
|
||||
background-color: #fff;
|
||||
border: 1px solid #eaeaea;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: none;
|
||||
--zeit-ui-button-padding: 1.375rem;
|
||||
--zeit-ui-button-height: 2.5rem;
|
||||
--zeit-ui-button-color: #666;
|
||||
}
|
||||
.btn {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
padding: 0 1.375rem;
|
||||
height: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
min-width: 12.5rem;
|
||||
width: auto;
|
||||
border-radius: 5px;
|
||||
font-weight: 400;
|
||||
font-size: .875rem;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
text-transform: capitalize;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
|
||||
border 200ms ease 0ms, color 200ms ease 0ms;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #666;
|
||||
background-color: #fff;
|
||||
border: 1px solid #eaeaea;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: none;
|
||||
--zeit-ui-button-padding: 1.375rem;
|
||||
--zeit-ui-button-height: 2.5rem;
|
||||
--zeit-ui-button-color: #666;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
color: #000;
|
||||
--zeit-ui-button-color: #000;
|
||||
background-color: #fff;
|
||||
border-color: #000;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: none;
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
.btn:hover {
|
||||
color: #000;
|
||||
--zeit-ui-button-color: #000;
|
||||
background-color: #fff;
|
||||
border-color: #000;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: none;
|
||||
transform: translate3d(0px, 0px, 0px);
|
||||
}
|
||||
|
||||
.btn :global(.text) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
line-height: inherit;
|
||||
top: -1px;
|
||||
}
|
||||
.btn :global(.text) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
line-height: inherit;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.btn :global(.text p),
|
||||
.btn :global(.text pre),
|
||||
.btn :global(.text div) {
|
||||
margin: 0;
|
||||
}
|
||||
</style></button>"
|
||||
.btn :global(.text p),
|
||||
.btn :global(.text pre),
|
||||
.btn :global(.text div) {
|
||||
margin: 0;
|
||||
}
|
||||
</style></button>"
|
||||
`;
|
||||
|
||||
@@ -1,35 +1,13 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Button should render empty button correctly 1`] = `
|
||||
<Memo(Button)
|
||||
auto={false}
|
||||
className=""
|
||||
disabled={false}
|
||||
effect={true}
|
||||
ghost={false}
|
||||
htmlType="button"
|
||||
loading={false}
|
||||
shadow={false}
|
||||
size="medium"
|
||||
type="default"
|
||||
/>
|
||||
`;
|
||||
exports[`Button should render empty button correctly 1`] = `<Memo />`;
|
||||
|
||||
exports[`Button should render special styles 1`] = `ReactWrapper {}`;
|
||||
|
||||
exports[`Button should render special styles 2`] = `
|
||||
<Memo(Button)
|
||||
auto={false}
|
||||
className=""
|
||||
disabled={false}
|
||||
effect={true}
|
||||
ghost={false}
|
||||
htmlType="button"
|
||||
<Memo
|
||||
loading={true}
|
||||
shadow={false}
|
||||
size="medium"
|
||||
type="default"
|
||||
>
|
||||
button
|
||||
</Memo(Button)>
|
||||
</Memo>
|
||||
`;
|
||||
|
||||
@@ -131,4 +131,11 @@ describe('Button', () => {
|
||||
await sleep(500)
|
||||
expect(wrapper.find('.loading-container').length).not.toBe(0)
|
||||
})
|
||||
|
||||
it('ref should be forwarded', () => {
|
||||
const ref = React.createRef<HTMLButtonElement>()
|
||||
const wrapper = mount(<Button ref={ref}>action</Button>)
|
||||
expect(wrapper.find('button').getDOMNode()).toEqual(ref.current)
|
||||
expect(() => wrapper.unmount()).not.toThrow()
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user