Browse Source
* refactor: RM rc-animate * put rc-animate back * clean up * chore: Update snasphot * feat: suport collapsible and deprecated disabled of Panel * docs: remove disabled of Panel * chore: bump rc-collapse to 3.1.0 * chore: update deprecated info * clean up * chore: update demo and remove rc-animate * chore: update snapshot Co-authored-by: Kermit <kermitlx@outlook.com>pull/27738/head
二货机器人
4 years ago
committed by
GitHub
GitHub
14 changed files with 254 additions and 104 deletions
@ -1,7 +0,0 @@ |
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
|||
|
|||
exports[`Collapse rtl render component should be rendered correctly in RTL direction 1`] = ` |
|||
<div |
|||
class="ant-collapse ant-collapse-icon-position-right ant-collapse-rtl" |
|||
/> |
|||
`; |
|||
@ -1,26 +0,0 @@ |
|||
import mountTest from '../../../tests/shared/mountTest'; |
|||
import rtlTest from '../../../tests/shared/rtlTest'; |
|||
import Collapse from '..'; |
|||
import openAnimation from '../openAnimation'; |
|||
|
|||
describe('Collapse', () => { |
|||
mountTest(Collapse); |
|||
rtlTest(Collapse); |
|||
}); |
|||
|
|||
describe('openAnimation', () => { |
|||
it('should support openAnimation', () => { |
|||
const done = jest.fn(); |
|||
const domNode = document.createElement('div'); |
|||
expect(typeof openAnimation.enter).toBe('function'); |
|||
expect(typeof openAnimation.leave).toBe('function'); |
|||
expect(typeof openAnimation.appear).toBe('function'); |
|||
const appear = openAnimation.appear(domNode, done); |
|||
const enter = openAnimation.enter(domNode, done); |
|||
const leave = openAnimation.leave(domNode, done); |
|||
expect(typeof appear.stop).toBe('function'); |
|||
expect(typeof enter.stop).toBe('function'); |
|||
expect(typeof leave.stop).toBe('function'); |
|||
expect(done).toHaveBeenCalled(); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,51 @@ |
|||
--- |
|||
order: 7 |
|||
title: |
|||
zh-CN: 可折叠触发区域 |
|||
en-US: Collapsible |
|||
--- |
|||
|
|||
## zh-CN |
|||
|
|||
通过 `collapsible` 属性，可以设置面板的可折叠触发区域。 |
|||
|
|||
## en-US |
|||
|
|||
Specify the trigger area of collapsible by `collapsible`. |
|||
|
|||
```jsx |
|||
import { Collapse, Space } from 'antd'; |
|||
|
|||
const { Panel } = Collapse; |
|||
|
|||
const text = ` |
|||
A dog is a type of domesticated animal. |
|||
Known for its loyalty and faithfulness, |
|||
it can be found as a welcome guest in many households across the world. |
|||
`; |
|||
|
|||
ReactDOM.render( |
|||
<Space direction="vertical"> |
|||
<Collapse collapsible="header" defaultActiveKey={['1']}> |
|||
<Panel header="This panel can only be collapsed by clicking text" key="1"> |
|||
<p>{text}</p> |
|||
</Panel> |
|||
</Collapse> |
|||
<Collapse collapsible="disabled"> |
|||
<Panel header="This panel can't be collapsed" key="1"> |
|||
<p>{text}</p> |
|||
</Panel> |
|||
</Collapse> |
|||
</Space>, |
|||
mountNode, |
|||
); |
|||
``` |
|||
|
|||
<style> |
|||
[data-theme="compact"] p, p { |
|||
margin: 0; |
|||
} |
|||
#components-collapse-demo-collapsible .ant-space { |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
@ -1,51 +0,0 @@ |
|||
/** |
|||
* Deprecated. We should replace the animation with pure react motion instead of modify style directly. |
|||
* If you are creating new component with animation, please use `./motion`. |
|||
*/ |
|||
import cssAnimation from '@ant-design/css-animation'; |
|||
import raf from 'rc-util/lib/raf'; |
|||
|
|||
function animate(node: HTMLElement, show: boolean, done: () => void) { |
|||
let height: number; |
|||
let requestAnimationFrameId: number; |
|||
return cssAnimation(node, 'ant-motion-collapse-legacy', { |
|||
start() { |
|||
if (!show) { |
|||
node.style.height = `${node.offsetHeight}px`; |
|||
node.style.opacity = '1'; |
|||
} else { |
|||
height = node.offsetHeight; |
|||
node.style.height = '0px'; |
|||
node.style.opacity = '0'; |
|||
} |
|||
}, |
|||
active() { |
|||
requestAnimationFrameId = raf(() => { |
|||
node.style.height = `${show ? height : 0}px`; |
|||
node.style.opacity = show ? '1' : '0'; |
|||
}); |
|||
}, |
|||
end() { |
|||
if (requestAnimationFrameId) { |
|||
raf.cancel(requestAnimationFrameId); |
|||
} |
|||
node.style.height = ''; |
|||
node.style.opacity = ''; |
|||
done(); |
|||
}, |
|||
}); |
|||
} |
|||
|
|||
const animation = { |
|||
enter(node: HTMLElement, done: () => void) { |
|||
return animate(node, true, done); |
|||
}, |
|||
leave(node: HTMLElement, done: () => void) { |
|||
return animate(node, false, done); |
|||
}, |
|||
appear(node: HTMLElement, done: () => void) { |
|||
return animate(node, true, done); |
|||
}, |
|||
}; |
|||
|
|||
export default animation; |
|||
Loading…
Reference in new issue