Skip to content

Commit 3b8b162

Browse files
zombieJzombieJ
committed
docs: update doc
1 parent 3b9766b commit 3b8b162

File tree

2 files changed

+6
-240
lines changed

2 files changed

+6
-240
lines changed

‎README.md

+6-239
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ React Trigger Component
3434

3535
## Usage
3636

37-
Include the default [styling](https://github.com/ant-design/v5-patch-for-react-19/blob/master/assets/index.less#L4:L11) and then:
37+
Import directly and will auto fill the patch on React 19:
3838

3939
```js
4040
import '@ant-design/v5-patch-for-react-19';
@@ -43,14 +43,14 @@ import '@ant-design/v5-patch-for-react-19';
4343
## Compatibility
4444

4545
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
46-
| --- | --- | --- | --- | --- |
47-
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
46+
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
47+
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
4848

4949
## Example
5050

51-
http://localhost:9001
51+
http://localhost:8000/
5252

53-
online example: http://ant-design.github.io/trigger/
53+
online example: http://ant-design.github.io/v5-patch-for-react-19/
5454

5555
## Development
5656

@@ -59,185 +59,10 @@ npm install
5959
npm start
6060
```
6161

62-
## API
63-
64-
### props
65-
66-
<table class="table table-bordered table-striped">
67-
<thead>
68-
<tr>
69-
<th style="width: 100px;">name</th>
70-
<th style="width: 50px;">type</th>
71-
<th style="width: 50px;">default</th>
72-
<th>description</th>
73-
</tr>
74-
</thead>
75-
<tbody>
76-
<tr>
77-
<td>alignPoint</td>
78-
<td>bool</td>
79-
<td>false</td>
80-
<td>Popup will align with mouse position (support action of 'click', 'hover' and 'contextMenu')</td>
81-
</tr>
82-
<tr>
83-
<td>popupClassName</td>
84-
<td>string</td>
85-
<td></td>
86-
<td>additional className added to popup</td>
87-
</tr>
88-
<tr>
89-
<td>forceRender</td>
90-
<td>boolean</td>
91-
<td>false</td>
92-
<td>whether render popup before first show</td>
93-
</tr>
94-
<tr>
95-
<td>destroyPopupOnHide</td>
96-
<td>boolean</td>
97-
<td>false</td>
98-
<td>whether destroy popup when hide</td>
99-
</tr>
100-
<tr>
101-
<td>getPopupClassNameFromAlign</td>
102-
<td>getPopupClassNameFromAlign(align: Object):String</td>
103-
<td></td>
104-
<td>additional className added to popup according to align</td>
105-
</tr>
106-
<tr>
107-
<td>action</td>
108-
<td>string[]</td>
109-
<td>['hover']</td>
110-
<td>which actions cause popup shown. enum of 'hover','click','focus','contextMenu'</td>
111-
</tr>
112-
<tr>
113-
<td>mouseEnterDelay</td>
114-
<td>number</td>
115-
<td>0</td>
116-
<td>delay time to show when mouse enter. unit: s.</td>
117-
</tr>
118-
<tr>
119-
<td>mouseLeaveDelay</td>
120-
<td>number</td>
121-
<td>0.1</td>
122-
<td>delay time to hide when mouse leave. unit: s.</td>
123-
</tr>
124-
<tr>
125-
<td>popupStyle</td>
126-
<td>Object</td>
127-
<td></td>
128-
<td>additional style of popup</td>
129-
</tr>
130-
<tr>
131-
<td>prefixCls</td>
132-
<td>String</td>
133-
<td>rc-trigger-popup</td>
134-
<td>prefix class name</td>
135-
</tr>
136-
<tr>
137-
<td>popupTransitionName</td>
138-
<td>String|Object</td>
139-
<td></td>
140-
<td>https://github.com/react-component/animate</td>
141-
</tr>
142-
<tr>
143-
<td>maskTransitionName</td>
144-
<td>String|Object</td>
145-
<td></td>
146-
<td>https://github.com/react-component/animate</td>
147-
</tr>
148-
<tr>
149-
<td>onPopupVisibleChange</td>
150-
<td>Function</td>
151-
<td></td>
152-
<td>call when popup visible is changed</td>
153-
</tr>
154-
<tr>
155-
<td>mask</td>
156-
<td>boolean</td>
157-
<td>false</td>
158-
<td>whether to support mask</td>
159-
</tr>
160-
<tr>
161-
<td>maskClosable</td>
162-
<td>boolean</td>
163-
<td>true</td>
164-
<td>whether to support click mask to hide</td>
165-
</tr>
166-
<tr>
167-
<td>popupVisible</td>
168-
<td>boolean</td>
169-
<td></td>
170-
<td>whether popup is visible</td>
171-
</tr>
172-
<tr>
173-
<td>zIndex</td>
174-
<td>number</td>
175-
<td></td>
176-
<td>popup's zIndex</td>
177-
</tr>
178-
<tr>
179-
<td>defaultPopupVisible</td>
180-
<td>boolean</td>
181-
<td></td>
182-
<td>whether popup is visible initially</td>
183-
</tr>
184-
<tr>
185-
<td>popupAlign</td>
186-
<td>Object: alignConfig of [dom-align](https://github.com/yiminghe/dom-align)</td>
187-
<td></td>
188-
<td>popup 's align config</td>
189-
</tr>
190-
<tr>
191-
<td>onPopupAlign</td>
192-
<td>function(popupDomNode, align)</td>
193-
<td></td>
194-
<td>callback when popup node is aligned</td>
195-
</tr>
196-
<tr>
197-
<td>popup</td>
198-
<td>React.Element | function() => React.Element</td>
199-
<td></td>
200-
<td>popup content</td>
201-
</tr>
202-
<tr>
203-
<td>getPopupContainer</td>
204-
<td>getPopupContainer(): HTMLElement</td>
205-
<td></td>
206-
<td>function returning html node which will act as popup container</td>
207-
</tr>
208-
<tr>
209-
<td>getDocument</td>
210-
<td>getDocument(): HTMLElement</td>
211-
<td></td>
212-
<td>function returning document node which will be attached click event to close trigger</td>
213-
</tr>
214-
<tr>
215-
<td>popupPlacement</td>
216-
<td>string</td>
217-
<td></td>
218-
<td>use preset popup align config from builtinPlacements, can be merged by popupAlign prop</td>
219-
</tr>
220-
<tr>
221-
<td>builtinPlacements</td>
222-
<td>object</td>
223-
<td></td>
224-
<td>builtin placement align map. used by placement prop</td>
225-
</tr>
226-
<tr>
227-
<td>stretch</td>
228-
<td>string</td>
229-
<td></td>
230-
<td>Let popup div stretch with trigger element. enums of 'width', 'minWidth', 'height', 'minHeight'. (You can also mixed with 'height minWidth')</td>
231-
</tr>
232-
</tbody>
233-
</table>
234-
235-
23662
## Test Case
23763

23864
```
23965
npm test
240-
npm run chrome-test
24166
```
24267

24368
## Coverage
@@ -248,64 +73,6 @@ npm run coverage
24873

24974
open coverage/ dir
25075

251-
## React 16 Note
252-
253-
After React 16, you won't access popup element's ref in parent component's componentDidMount, which means following code won't work.
254-
255-
```javascript
256-
class App extends React.Component {
257-
componentDidMount() {
258-
this.input.focus(); // error, this.input is undefined.
259-
}
260-
261-
render() {
262-
return (
263-
<Trigger
264-
action={['click']}
265-
popup={<div><input ref={node => this.input = node} type="text" /></div>}
266-
>
267-
<button>click</button>
268-
</Trigger>
269-
)
270-
}
271-
}
272-
```
273-
274-
Consider wrap your popup element to a separate component:
275-
276-
```javascript
277-
class InputPopup extends React.Component {
278-
componentDidMount() {
279-
this.props.onMount();
280-
}
281-
282-
render() {
283-
return (
284-
<div>
285-
<input ref={this.props.inputRef} type="text" />
286-
</div>
287-
);
288-
}
289-
}
290-
291-
class App extends React.Component {
292-
handlePopupMount() {
293-
this.input.focus(); // error, this.input is undefined.
294-
}
295-
296-
render() {
297-
return (
298-
<Trigger
299-
action={['click']}
300-
popup={<InputPopup inputRef={node => this.input = node} onMount={this.handlePopupMount} />}
301-
>
302-
<button>click</button>
303-
</Trigger>
304-
)
305-
}
306-
}
307-
```
308-
30976
## License
31077

311-
rc-trigger is released under the MIT license.
78+
Released under the MIT license.

‎docs/examples/antd-react.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ const App = () => {
99
Modal.info({
1010
title: 'Info',
1111
content: 'This is a message',
12-
onOk() {},
1312
});
1413
};
1514

0 commit comments

Comments
 (0)