-
{html}
-
{
- this.container = ref;
- }}
- >
-
{
- this.view = ref;
- }}
- />
-
-
-
- {
- addStyle(this.view, {
- 'font-size': '16px',
- color: '#F00'
- });
- this.showView();
- }}
- >
- addStyle
-
-
- {
- removeStyle(this.view, ['font-size', 'color']);
- this.showView();
- }}
- >
- removeStyle
-
-
- {
- console.log(getStyle(this.view));
- alert(getStyle(this.view, 'font-size'));
- }}
- >
- getStyle
-
-
-
- );
- }
-}
-
-ReactDOM.render(
);
-```
-
-
diff --git a/docs/pages/components/dom-helper/fragments/class-helper.md b/docs/pages/components/dom-helper/fragments/class-helper.md
new file mode 100644
index 000000000..821a2dcc8
--- /dev/null
+++ b/docs/pages/components/dom-helper/fragments/class-helper.md
@@ -0,0 +1,60 @@
+
+
+```js
+const App = () => {
+ const [html, setHtml] = React.useState('
');
+ const containerRef = React.useRef();
+ const viewRef = React.useRef();
+ const viewHtmlCode = () => {
+ setHtml(containerRef.current.innerHTML);
+ };
+ return (
+
+
{html}
+
+
+
+ {
+ addClass(viewRef.current, 'custom');
+ viewHtmlCode();
+ }}
+ >
+ addClass
+
+
+ {
+ removeClass(viewRef.current, 'custom');
+ viewHtmlCode();
+ }}
+ >
+ removeClass
+
+
+ {
+ toggleClass(viewRef.current, 'custom');
+ viewHtmlCode();
+ }}
+ >
+ toggleClass
+
+ {
+ alert(hasClass(viewRef.current, 'custom'));
+ }}
+ >
+ hasClass
+
+
+
+ );
+};
+
+ReactDOM.render(
);
+```
+
+
diff --git a/docs/pages/components/dom-helper/fragments/dom-mouse-move-tracker.md b/docs/pages/components/dom-helper/fragments/dom-mouse-move-tracker.md
new file mode 100644
index 000000000..acb7cbf68
--- /dev/null
+++ b/docs/pages/components/dom-helper/fragments/dom-mouse-move-tracker.md
@@ -0,0 +1,47 @@
+
+
+```js
+const App = () => {
+ const [left, setLeft] = React.useState(0);
+ const [top, setTop] = React.useState(0);
+
+ const mouseMoveTracker = React.useRef();
+
+ const onMove = React.useCallback((deltaX, deltaY) => {
+ setLeft(x => x + deltaX);
+ setTop(y => y + deltaY);
+ }, []);
+
+ const onMoveEnd = React.useCallback(() => {
+ if (mouseMoveTracker.current) {
+ mouseMoveTracker.current.releaseMouseMoves();
+ }
+ }, []);
+
+ const getMouseMoveTracker = React.useCallback(() => {
+ return mouseMoveTracker.current || new DOMMouseMoveTracker(onMove, onMoveEnd, document.body);
+ }, []);
+
+ const handleMouseDown = React.useCallback(event => {
+ mouseMoveTracker.current = getMouseMoveTracker();
+ mouseMoveTracker.current.captureMouseMoves(event);
+ }, []);
+
+ return (
+
+ {left}, {top}
+
+ Drag me
+
+
+ );
+};
+
+ReactDOM.render(
);
+```
+
+
diff --git a/docs/pages/components/dom-helper/fragments/event-helper.md b/docs/pages/components/dom-helper/fragments/event-helper.md
new file mode 100644
index 000000000..1865bf687
--- /dev/null
+++ b/docs/pages/components/dom-helper/fragments/event-helper.md
@@ -0,0 +1,39 @@
+
+
+```js
+const App = () => {
+ const btnRef = React.useRef();
+ const listenerRef = React.useRef();
+
+ const handleOnEvent = () => {
+ if (!listenerRef.current) {
+ listenerRef.current = on(btnRef.current, 'click', () => {
+ alert('click');
+ });
+ }
+ };
+
+ const handleOffEvent = () => {
+ if (listenerRef.current) {
+ listenerRef.current.off();
+ listenerRef.current = null;
+ }
+ };
+
+ return (
+
+
+ click me
+
+
+
+ on
+ off
+
+
+ );
+};
+ReactDOM.render(
);
+```
+
+
diff --git a/docs/pages/components/dom-helper/fragments/import.md b/docs/pages/components/dom-helper/fragments/import.md
new file mode 100644
index 000000000..bb4089cfa
--- /dev/null
+++ b/docs/pages/components/dom-helper/fragments/import.md
@@ -0,0 +1,6 @@
+```js
+import { DOMHelper } from 'rsuite';
+
+// or
+import DOMHelper from 'rsuite/lib/DOMHelper';
+```
diff --git a/docs/pages/components/dom-helper/fragments/query.md b/docs/pages/components/dom-helper/fragments/query.md
new file mode 100644
index 000000000..aed1869c0
--- /dev/null
+++ b/docs/pages/components/dom-helper/fragments/query.md
@@ -0,0 +1,41 @@
+
+
+```js
+const App = () => {
+ const nodeRef = React.useRef();
+ return (
+
+
Node
+
+ {
+ alert(JSON.stringify(getOffset(nodeRef.current)));
+ }}
+ >
+ getOffset
+
+
+ {
+ alert(getOffsetParent(nodeRef.current));
+ }}
+ >
+ getOffsetParent
+
+
+ {
+ alert(JSON.stringify(getPosition(nodeRef.current)));
+ }}
+ >
+ getPosition
+
+
+
+ );
+};
+
+ReactDOM.render(
);
+```
+
+
diff --git a/docs/pages/components/dom-helper/fragments/scroll-helper.md b/docs/pages/components/dom-helper/fragments/scroll-helper.md
new file mode 100644
index 000000000..3d40a1b9f
--- /dev/null
+++ b/docs/pages/components/dom-helper/fragments/scroll-helper.md
@@ -0,0 +1,31 @@
+
+
+```js
+const App = () => {
+ return (
+
+
+ {
+ scrollTop(window, 1500);
+ }}
+ >
+ scrollTop 1500
+
+
+ {
+ alert(scrollTop(window));
+ }}
+ >
+ get scrollTop
+
+
+
+ );
+};
+
+ReactDOM.render(
);
+```
+
+
diff --git a/docs/pages/components/dom-helper/fragments/style-helper.md b/docs/pages/components/dom-helper/fragments/style-helper.md
new file mode 100644
index 000000000..5cd1af6f2
--- /dev/null
+++ b/docs/pages/components/dom-helper/fragments/style-helper.md
@@ -0,0 +1,57 @@
+
+
+```js
+const App = () => {
+ const [html, setHtml] = React.useState('
');
+ const containerRef = React.useRef();
+ const viewRef = React.useRef();
+
+ const viewHtmlCode = () => {
+ setHtml(containerRef.current.innerHTML);
+ };
+ return (
+
+
{html}
+
+
+
+ {
+ addStyle(viewRef.current, {
+ 'font-size': '16px',
+ color: '#F00'
+ });
+ viewHtmlCode();
+ }}
+ >
+ addStyle
+
+
+ {
+ removeStyle(viewRef.current, ['font-size', 'color']);
+ viewHtmlCode();
+ }}
+ >
+ removeStyle
+
+
+ {
+ console.log(getStyle(viewRef.current));
+ alert(getStyle(viewRef.current, 'font-size'));
+ }}
+ >
+ getStyle
+
+
+
+ );
+};
+
+ReactDOM.render(
);
+```
+
+
diff --git a/docs/pages/components/dom-helper/index.tsx b/docs/pages/components/dom-helper/index.tsx
index e3dd6cbf0..9a98221fa 100644
--- a/docs/pages/components/dom-helper/index.tsx
+++ b/docs/pages/components/dom-helper/index.tsx
@@ -3,17 +3,5 @@ import { ButtonToolbar, Button, DOMHelper } from 'rsuite';
import DefaultPage from '@/components/Page';
export default function Page() {
- return (
-
- );
+ return
;
}
diff --git a/docs/pages/components/dom-helper/zh-CN/class-helper.md b/docs/pages/components/dom-helper/zh-CN/class-helper.md
deleted file mode 100644
index 6dd2311ed..000000000
--- a/docs/pages/components/dom-helper/zh-CN/class-helper.md
+++ /dev/null
@@ -1,85 +0,0 @@
-### class
-
-```typescript
-hasClass: (node: HTMLElement, className: string) => boolean;
-addClass: (node: HTMLElement, className: string) => HTMLElement;
-removeClass: (node: HTMLElement, className: string) => HTMLElement;
-toggleClass: (node: HTMLElement, className: string) => HTMLElement;
-```
-
-
-
-```js
-class Demo extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- html: '
'
- };
- }
- showView() {
- const html = this.container.innerHTML;
- this.setState({ html });
- }
- render() {
- const { html } = this.state;
- return (
-
-
{html}
-
{
- this.container = ref;
- }}
- >
-
{
- this.view = ref;
- }}
- />
-
-
-
- {
- addClass(this.view, 'custom');
- this.showView();
- }}
- >
- addClass
-
-
- {
- removeClass(this.view, 'custom');
- this.showView();
- }}
- >
- removeClass
-
-
- {
- toggleClass(this.view, 'custom');
- this.showView();
- }}
- >
- toggleClass
-
- {
- alert(hasClass(this.view, 'custom'));
- }}
- >
- hasClass
-
-
-
- );
- }
-}
-
-ReactDOM.render(
);
-```
-
-
diff --git a/docs/pages/components/dom-helper/zh-CN/dom-mouse-move-tracker.md b/docs/pages/components/dom-helper/zh-CN/dom-mouse-move-tracker.md
deleted file mode 100644
index 3b288e39c..000000000
--- a/docs/pages/components/dom-helper/zh-CN/dom-mouse-move-tracker.md
+++ /dev/null
@@ -1,76 +0,0 @@
-### DOMMouseMoveTracker
-
-鼠标拖拽跟踪器
-
-```typescript
-new DOMMouseMoveTracker(
- onMove:(deltaX: number, deltaY: number, moveEvent: Object) => void,
- onMoveEnd:() => void,
- node: HTMLElement
-);
-```
-
-
-
-```js
-class Demo extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- left: 0,
- top: 0
- };
- this.onMove = this.onMove.bind(this);
- this.onMoveEnd = this.onMoveEnd.bind(this);
- this.handleMouseDown = this.handleMouseDown.bind(this);
- }
- onMove(deltaX: number, deltaY: number) {
- const { left, top } = this.state;
- this.setState({
- left: left + deltaX,
- top: top + deltaY
- });
- }
- onMoveEnd() {
- if (this.mouseMoveTracker) {
- this.mouseMoveTracker.releaseMouseMoves();
- }
- }
- getMouseMoveTracker() {
- return (
- this.mouseMoveTracker || new DOMMouseMoveTracker(this.onMove, this.onMoveEnd, document.body)
- );
- }
- handleMouseDown(event) {
- this.mouseMoveTracker = this.getMouseMoveTracker();
- this.mouseMoveTracker.captureMouseMoves(event);
- }
- render() {
- const { left, top } = this.state;
- return (
-
- {left}, {top}
-
- Drag me
-
-
- );
- }
-}
-
-ReactDOM.render(
);
-```
-
-
diff --git a/docs/pages/components/dom-helper/zh-CN/event-helper.md b/docs/pages/components/dom-helper/zh-CN/event-helper.md
deleted file mode 100644
index 63407c1ff..000000000
--- a/docs/pages/components/dom-helper/zh-CN/event-helper.md
+++ /dev/null
@@ -1,55 +0,0 @@
-### events
-
-```typescript
-on: (target: HTMLElement, eventName: string, listener: Function, capture: boolean = false) => {off: Function};
-off: (target: HTMLElement, eventName: string, listener: Function, capture: boolean = false) => void;
-```
-
-
-
-```js
-class Demo extends React.Component {
- constructor(props) {
- super(props);
- this.handleOnEvent = this.handleOnEvent.bind(this);
- this.handleOffEvent = this.handleOffEvent.bind(this);
- }
- handleOnEvent() {
- if (!this.listener) {
- this.listener = on(this.btn, 'click', () => {
- alert('click');
- });
- }
- }
- handleOffEvent() {
- if (this.listener) {
- this.listener.off();
- this.listener = null;
- }
- }
- render() {
- return (
-
-
- {
- this.btn = ref;
- }}
- >
- click me
-
-
-
-
- on
- off
-
-
- );
- }
-}
-
-ReactDOM.render(
);
-```
-
-
diff --git a/docs/pages/components/dom-helper/zh-CN/index.md b/docs/pages/components/dom-helper/zh-CN/index.md
index d68d83ceb..47d6d98a4 100644
--- a/docs/pages/components/dom-helper/zh-CN/index.md
+++ b/docs/pages/components/dom-helper/zh-CN/index.md
@@ -2,14 +2,89 @@
在 React 项目中，我们不推荐直接操作 DOM ， 但是在 RSUITE 组件内部，为了一些考虑不得不直接操作 DOM， 如果您也有类似的需求，可以直接使用这组方法。
-获取方法
+## 获取方法
-```js
-import { DOMHelper } from 'rsuite';
-const { addClass } = DOMHelper;
+
+
+## APIs
+
+### class
+
+```typescript
+hasClass: (node: HTMLElement, className: string) => boolean;
+addClass: (node: HTMLElement, className: string) => HTMLElement;
+removeClass: (node: HTMLElement, className: string) => HTMLElement;
+toggleClass: (node: HTMLElement, className: string) => HTMLElement;
+```
+
+
+
+### style
+
+```typescript
+addStyle: (node: HTMLElement, property: string, value: string) => void;
+addStyle: (node: HTMLElement, style: Object) => void;
+
+removeStyle: (node: HTMLElement, property: string) => void;
+removeStyle: (node: HTMLElement, propertys: Array
) => void;
+
+getStyle: (node: HTMLElement, property: string) => string;
+getStyle: (node: HTMLElement) => Object;
+
+
+translateDOMPositionXY: (style: Object, x: number, y: number) => Object;
+
+```
+
+
+
+### events
+
+```typescript
+on: (target: HTMLElement, eventName: string, listener: Function, capture: boolean = false) => {off: Function};
+off: (target: HTMLElement, eventName: string, listener: Function, capture: boolean = false) => void;
+```
+
+
+
+### scroll
+
+```typescript
+scrollLeft: (node: HTMLElement) => number;
+scrollLeft: (node: HTMLElement, value: number) => void;
+
+scrollTop: (node: HTMLElement) => number;
+scrollTop: (node: HTMLElement, value: number) => void;
+```
+
+
+
+### query
+
+```typescript
+getHeight: (node: HTMLElement, client: HTMLElement) => number;
+getWidth: (node: HTMLElement, client: HTMLElement) => number;
+getOffset: (node: HTMLElement) => Object;
+getOffsetParent: (node: HTMLElement) => HTMLElement;
+getPosition: (node: HTMLElement, offsetParent: HTMLElement) => Object;
+contains: (context: HTMLElement, node: HTMLElement) => boolean;
+```
+
+
+
+### DOMMouseMoveTracker
+
+Mouse drag tracker
+
+```typescript
+new DOMMouseMoveTracker(
+ onMove:(deltaX: number, deltaY: number, moveEvent: Object) => void,
+ onMoveEnd:() => void,
+ node: HTMLElement
+);
```
-
+
### 参考及使用的项目
diff --git a/docs/pages/components/dom-helper/zh-CN/query.md b/docs/pages/components/dom-helper/zh-CN/query.md
deleted file mode 100644
index 24aa4e300..000000000
--- a/docs/pages/components/dom-helper/zh-CN/query.md
+++ /dev/null
@@ -1,53 +0,0 @@
-### query
-
-```typescript
-getHeight: (node: HTMLElement, client: HTMLElement) => number;
-getWidth: (node: HTMLElement, client: HTMLElement) => number;
-getOffset: (node: HTMLElement) => Object;
-getOffsetParent: (node: HTMLElement) => HTMLElement;
-getPosition: (node: HTMLElement, offsetParent: HTMLElement) => Object;
-contains: (context: HTMLElement, node: HTMLElement) => boolean;
-```
-
-
-
-```js
-class Demo extends React.Component {
- render() {
- return (
-
-
(this.node = ref)}>Node
-
- {
- alert(JSON.stringify(getOffset(this.node)));
- }}
- >
- getOffset
-
-
- {
- alert(getOffsetParent(this.node));
- }}
- >
- getOffsetParent
-
-
- {
- alert(JSON.stringify(getPosition(this.node)));
- }}
- >
- getPosition
-
-
-
-
- {
- scrollTop(window, 1500);
- }}
- >
- scrollTop 1500
-
-
- {
- alert(scrollTop(window));
- }}
- >
- get scrollTop
-
-
-
- );
- }
-}
-
-ReactDOM.render() => void;
-
-getStyle: (node: HTMLElement, property: string) => string;
-getStyle: (node: HTMLElement) => Object;
-
-
-translateDOMPositionXY: (style: Object, x: number, y: number) => Object;
-
-```
-
-
-
-```js
-class Demo extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- html: '
'
- };
- }
- showView() {
- const html = this.container.innerHTML;
- this.setState({ html });
- }
- render() {
- const { html } = this.state;
- return (
-
-
{html}
-
{
- this.container = ref;
- }}
- >
-
{
- this.view = ref;
- }}
- />
-
-
-
- {
- addStyle(this.view, {
- 'font-size': '16px',
- color: '#F00'
- });
- this.showView();
- }}
- >
- addStyle
-
-
- {
- removeStyle(this.view, ['font-size', 'color']);
- this.showView();
- }}
- >
- removeStyle
-
-
- {
- console.log(getStyle(this.view));
- alert(getStyle(this.view, 'font-size'));
- }}
- >
- getStyle
-
-
-
- );
- }
-}
-
-ReactDOM.render(
);
-```
-
-
diff --git a/docs/pages/components/form/en-US/custom-check-trigger.md b/docs/pages/components/form/en-US/custom-check-trigger.md
deleted file mode 100644
index 47c71a7d3..000000000
--- a/docs/pages/components/form/en-US/custom-check-trigger.md
+++ /dev/null
@@ -1,100 +0,0 @@
-### Custom trigger verification
-
-In some cases, there is no need for real-time validation of the form data. You can customize the way the control is validated and configure the `checkTrigger` parameter.
-
-The default value of `checkTrigger` is `'change'`, options includes:
-
-- `'change'` : trigger verification when data change
-- `'blur'` : trigger verification when component blur
-- `'none'` : Only valid when calling the `check()` method of `