From a6285d15a8e708d757490dfd67daa34634219212 Mon Sep 17 00:00:00 2001 From: Amumu Date: Thu, 20 Apr 2023 10:21:53 +0800 Subject: [PATCH 01/15] feat: arrow support className (#449) * feat: arrow support className * chore: clear --- README.md | 2 +- package.json | 2 +- src/Tooltip.tsx | 4 ++-- tests/index.test.tsx | 19 ++++++++++++++++++- 4 files changed, 22 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 4522ff5d..450e1c86 100644 --- a/README.md +++ b/README.md @@ -170,7 +170,7 @@ Online examples: showArrow - boolean + boolean | { className?: string } true arrow visible diff --git a/package.json b/package.json index 40cd8254..4404efbf 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ }, "dependencies": { "@babel/runtime": "^7.11.2", - "@rc-component/trigger": "^1.0.4", + "@rc-component/trigger": "^1.10.0", "classnames": "^2.3.1" }, "devDependencies": { diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx index 56dfdffe..bc1a0d01 100644 --- a/src/Tooltip.tsx +++ b/src/Tooltip.tsx @@ -1,4 +1,4 @@ -import type { TriggerProps, TriggerRef } from '@rc-component/trigger'; +import type { TriggerProps, TriggerRef, ArrowType } from '@rc-component/trigger'; import Trigger from '@rc-component/trigger'; import type { ActionType, AlignType, AnimationType } from '@rc-component/trigger/lib/interface'; import * as React from 'react'; @@ -28,7 +28,7 @@ export interface TooltipProps extends Pick HTMLElement; destroyTooltipOnHide?: boolean; align?: AlignType; - showArrow?: boolean; + showArrow?: boolean | ArrowType; arrowContent?: React.ReactNode; id?: string; children?: React.ReactElement; diff --git a/tests/index.test.tsx b/tests/index.test.tsx index 6784be1a..e8529930 100644 --- a/tests/index.test.tsx +++ b/tests/index.test.tsx @@ -178,9 +178,26 @@ describe('rc-tooltip', () => { , ); fireEvent.click(container.querySelector('.target')); - console.log(container.innerHTML); expect(container.querySelector('.rc-tooltip-arrow')).toBeTruthy(); }); + it('should show tooltip arrow when showArrow is object', () => { + const { container } = render( + Tooltip content} + showArrow={{ + className: 'abc' + }} + > +
Click this
+ , + ); + fireEvent.click(container.querySelector('.target')); + expect(container.querySelector('.rc-tooltip-arrow')).toBeTruthy(); + expect(container.querySelector('.rc-tooltip-arrow').classList.contains('abc')).toBeTruthy(); + }); it('should hide tooltip arrow when showArrow is false', () => { const { container } = render( Date: Fri, 21 Apr 2023 10:32:46 +0800 Subject: [PATCH 02/15] docs: site doc (#450) --- .dumirc.ts | 8 +++ README.md | 169 ++++++++---------------------------------------- package.json | 3 +- src/Tooltip.tsx | 5 +- 4 files changed, 38 insertions(+), 147 deletions(-) diff --git a/.dumirc.ts b/.dumirc.ts index f7a1213b..e6e98c80 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -1,6 +1,12 @@ import { defineConfig } from 'dumi'; import path from 'path'; +const isProdSite = + // 不是预览模式 同时是生产环境 + process.env.PREVIEW !== 'true' && process.env.NODE_ENV === 'production'; + +const name = 'tooltip'; + export default defineConfig({ alias: { 'rc-tooltip$': path.resolve('src'), @@ -12,4 +18,6 @@ export default defineConfig({ name: 'Tooltip', logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4', }, + base: isProdSite ? `/${name}/` : '/', + publicPath: isProdSite ? `/${name}/` : '/', }); diff --git a/README.md b/README.md index 450e1c86..581e8aa2 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ React Tooltip -[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Test coverage][coveralls-image]][coveralls-url] [![gemnasium deps][gemnasium-image]][gemnasium-url] [![node version][node-image]][node-url] [![npm download][download-image]][download-url] +[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Test coverage][coveralls-image]][coveralls-url] [![gemnasium deps][gemnasium-image]][gemnasium-url] [![node version][node-image]][node-url] [![npm download][download-image]][download-url] [npm-image]: https://img.shields.io/npm/v/rc-tooltip.svg?style=flat-square [npm-url]: https://npmjs.org/package/rc-tooltip @@ -24,9 +24,8 @@ React Tooltip ## Browsers support | [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [Opera](http://godban.github.io/browsers-support-badges/)
Opera | -| --------- | --------- | --------- | --------- | --------- | -| IE 8 + ✔ | Firefox 31.0+ ✔ | Chrome 31.0+ ✔ | Safari 7.0+ ✔ | Opera 30.0+ ✔ | - +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| IE 8 + ✔ | Firefox 31.0+ ✔ | Chrome 31.0+ ✔ | Safari 7.0+ ✔ | Opera 30.0+ ✔ | ## Install @@ -47,7 +46,7 @@ ReactDOM.render( tooltip}> hover , - container + container, ); ``` @@ -62,144 +61,26 @@ Online examples: ### Props - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
nametypedefaultdescription
overlayClassNamestringadditional className added to popup overlay
triggerstring | string[]['hover']which actions cause tooltip shown. enum of 'hover','click','focus'
mouseEnterDelaynumber0delay time to show when mouse enter.unit: s.
mouseLeaveDelaynumber0.1delay time to hide when mouse leave.unit: s.
overlayStyleObjectadditional style of overlay node
prefixClsStringrc-tooltipprefix class name
transitionNameString|Objectsame as https://github.com/react-component/animate
onVisibleChangeFunctioncall when visible is changed
afterVisibleChangeFunctioncall after visible is changed
visiblebooleanwhether tooltip is visible
defaultVisiblebooleanwhether tooltip is visible initially
placementStringone of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'rightTop', 'rightBottom', 'leftTop', 'leftBottom']
alignObject: alignConfig of [dom-align](https://github.com/yiminghe/dom-align)value will be merged into placement's config
onPopupAlignfunction(popupDomNode, align)callback when popup node is aligned
overlayReact.Element | () => React.Elementpopup content
overlayInnerStyleObjectset overlay inner style
showArrowboolean | { className?: string }truearrow visible
arrowContentReact.Nodenullarrow content
getTooltipContainerfunctionFunction returning html node which will act as tooltip container. By default the tooltip attaches to the body. If you want to change the container, simply return a new element.
destroyTooltipOnHideboolean | { keepParent: boolean }falsewhether destroy tooltip when tooltip is hidden.In general, destroyTooltipOnHide will only remove itself instead of parent container of it. Parent container will be removed include tooltip when keepParent is true
idStringId which gets attached to the tooltip content. Can be used with aria-describedby to achieve Screenreader-Support.
+| name | type | default | description | +| -------------------- | ----------------------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| trigger | string \| string\[] | 'hover' | which actions cause tooltip shown. enum of 'hover','click','focus' | +| visible | boolean | false | whether tooltip is visible | +| defaultVisible | boolean | false | whether tooltip is visible by default | +| placement | string | 'right' | tooltip placement. enum of 'top','left','right','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom' | +| motion | object | | Config popup motion. Please ref demo for example | +| onVisibleChange | (visible: boolean) => void; | | Callback when visible change | +| afterVisibleChange | (visible: boolean) => void; | | Callback after visible change | +| overlay | ReactNode \| () => ReactNode | | tooltip overlay content | +| overlayStyle | object | | style of tooltip overlay | +| overlayClassName | string | | className of tooltip overlay | +| prefixCls | string | 'rc-tooltip' | prefix class name of tooltip | +| mouseEnterDelay | number | 0 | delay time (in second) before tooltip shows when mouse enter | +| mouseLeaveDelay | number | 0.1 | delay time (in second) before tooltip hides when mouse leave | +| getTooltipContainer | (triggerNode: HTMLElement) => HTMLElement | () => document.body | get container of tooltip, default to body | +| destroyTooltipOnHide | boolean | false | destroy tooltip when it is hidden | +| align | object | | align config of tooltip. Please ref demo for usage example | +| showArrow | boolean \| object | false | whether to show arrow of tooltip | +| zIndex | number | | config popup tooltip zIndex | ## Important Note @@ -208,6 +89,7 @@ Online examples: ## Accessibility For accessibility purpose you can use the `id` prop to link your tooltip with another element. For example attaching it to an input element: + ```js ``` + If you do it like this, a screenreader would read the content of your tooltip if you focus the input element. **NOTE:** `role="tooltip"` is also added to expose the purpose of the tooltip element to a screenreader. diff --git a/package.json b/package.json index 4404efbf..ff19db9c 100644 --- a/package.json +++ b/package.json @@ -32,10 +32,11 @@ "scripts": { "compile": "father build && lessc assets/bootstrap.less assets/bootstrap.css && lessc assets/bootstrap_white.less assets/bootstrap_white.css", "docs:build": "dumi build", - "docs:deploy": "gh-pages -d .doc", + "docs:deploy": "gh-pages -d dist", "lint": "eslint src/ --ext .tsx,.ts,.jsx,.js", "now-build": "npm run build", "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish", + "postpublish": "npm run docs:build && npm run docs:deploy", "start": "dumi dev", "test": "rc-test" }, diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx index bc1a0d01..0a1518ab 100644 --- a/src/Tooltip.tsx +++ b/src/Tooltip.tsx @@ -1,4 +1,4 @@ -import type { TriggerProps, TriggerRef, ArrowType } from '@rc-component/trigger'; +import type { ArrowType, TriggerProps, TriggerRef } from '@rc-component/trigger'; import Trigger from '@rc-component/trigger'; import type { ActionType, AlignType, AnimationType } from '@rc-component/trigger/lib/interface'; import * as React from 'react'; @@ -32,7 +32,6 @@ export interface TooltipProps extends Pick) => { const triggerRef = useRef(null); useImperativeHandle(ref, () => triggerRef.current); - const extraProps = { ...restProps }; + const extraProps: Partial = { ...restProps }; if ('visible' in props) { extraProps.popupVisible = props.visible; } From 595be48b3f135aae53d9c05f3dd56e485ba2a020 Mon Sep 17 00:00:00 2001 From: Charlie Blevins Date: Thu, 20 Jul 2023 00:00:56 -0400 Subject: [PATCH 03/15] patch: export tooltip ref (#454) * patch: export tooltip ref * patch: export TooltipRef as a type --------- Co-authored-by: Charlie Blevins --- src/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/index.tsx b/src/index.tsx index ff0529f7..6da28f5a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,6 +1,7 @@ -import Tooltip from './Tooltip'; import Popup from './Popup'; +import Tooltip from './Tooltip'; +export type { TooltipRef } from './Tooltip'; export { Popup }; export default Tooltip; From f3ffdb1c194bbe2778a12da3df3a4211d3fb9b84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Fri, 22 Sep 2023 14:24:11 +0800 Subject: [PATCH 04/15] feat: pass fresh (#456) --- package.json | 2 +- src/Tooltip.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index ff19db9c..36962987 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,7 @@ }, "dependencies": { "@babel/runtime": "^7.11.2", - "@rc-component/trigger": "^1.10.0", + "@rc-component/trigger": "^1.17.0", "classnames": "^2.3.1" }, "devDependencies": { diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx index 0a1518ab..67f69223 100644 --- a/src/Tooltip.tsx +++ b/src/Tooltip.tsx @@ -6,7 +6,8 @@ import { forwardRef, useImperativeHandle, useRef } from 'react'; import { placements } from './placements'; import Popup from './Popup'; -export interface TooltipProps extends Pick { +export interface TooltipProps + extends Pick { trigger?: ActionType | ActionType[]; defaultVisible?: boolean; visible?: boolean; From 6090a105fa9abadba9a26fb40dd87c0022e4cfda Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 22 Sep 2023 14:27:15 +0800 Subject: [PATCH 05/15] 6.1.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 36962987..733d590b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-tooltip", - "version": "6.0.1", + "version": "6.1.0", "description": "React Tooltip", "keywords": [ "react", From aca75b4a1e276bb236ffab1f4c2565f78497c9ab Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 10 Oct 2023 17:41:34 +0800 Subject: [PATCH 06/15] Update README.md --- README.md | 31 +++++++++++++++++++++---------- 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 581e8aa2..089a87ff 100644 --- a/README.md +++ b/README.md @@ -2,20 +2,31 @@ React Tooltip -[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Test coverage][coveralls-image]][coveralls-url] [![gemnasium deps][gemnasium-image]][gemnasium-url] [![node version][node-image]][node-url] [![npm download][download-image]][download-url] - -[npm-image]: https://img.shields.io/npm/v/rc-tooltip.svg?style=flat-square -[npm-url]: https://npmjs.org/package/rc-tooltip +[![NPM version][npm-image]][npm-url] +[![npm download][download-image]][download-url] +[![build status][github-actions-image]][github-actions-url] +[![Codecov][codecov-image]][codecov-url] +[![bundle size][bundlephobia-image]][bundlephobia-url] +[![dumi][dumi-image]][dumi-url] + +[npm-image]: http://img.shields.io/npm/v/rc-tooltip.svg?style=flat-square +[npm-url]: http://npmjs.org/package/rc-tooltip +[travis-image]: https://img.shields.io/travis/react-component/tooltip/master?style=flat-square +[travis-url]: https://travis-ci.com/react-component/tooltip [github-actions-image]: https://github.com/react-component/tooltip/workflows/CI/badge.svg [github-actions-url]: https://github.com/react-component/tooltip/actions -[coveralls-image]: https://img.shields.io/coveralls/react-component/tooltip.svg?style=flat-square -[coveralls-url]: https://coveralls.io/r/react-component/tooltip?branch=master -[gemnasium-image]: https://img.shields.io/gemnasium/react-component/tooltip.svg?style=flat-square -[gemnasium-url]: https://gemnasium.com/react-component/tooltip -[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square -[node-url]: https://nodejs.org/download/ +[codecov-image]: https://img.shields.io/codecov/c/github/react-component/tooltip/master.svg?style=flat-square +[codecov-url]: https://app.codecov.io/gh/react-component/tooltip +[david-url]: https://david-dm.org/react-component/tooltip +[david-image]: https://david-dm.org/react-component/tooltip/status.svg?style=flat-square +[david-dev-url]: https://david-dm.org/react-component/tooltip?type=dev +[david-dev-image]: https://david-dm.org/react-component/tooltip/dev-status.svg?style=flat-square [download-image]: https://img.shields.io/npm/dm/rc-tooltip.svg?style=flat-square [download-url]: https://npmjs.org/package/rc-tooltip +[bundlephobia-url]: https://bundlephobia.com/package/rc-tooltip +[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-tooltip +[dumi-url]: https://github.com/umijs/dumi +[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square ## Screenshot From 88ded8a08fe613161cff4b70ab224fe59cef4323 Mon Sep 17 00:00:00 2001 From: Amumu Date: Tue, 10 Oct 2023 05:42:12 -0500 Subject: [PATCH 07/15] fix: fix npm files (#458) * fix: fix npm files * chore: unused script --- package.json | 2 -- 1 file changed, 2 deletions(-) diff --git a/package.json b/package.json index 733d590b..e537def5 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,6 @@ "main": "lib/index", "module": "es/index", "files": [ - "dist", "lib", "es", "assets/*.css", @@ -34,7 +33,6 @@ "docs:build": "dumi build", "docs:deploy": "gh-pages -d dist", "lint": "eslint src/ --ext .tsx,.ts,.jsx,.js", - "now-build": "npm run build", "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish", "postpublish": "npm run docs:build && npm run docs:deploy", "start": "dumi dev", From 65b94dd0765e3e942ef4222e8d9e2c641f44aa64 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 10 Oct 2023 19:03:49 +0800 Subject: [PATCH 08/15] 6.1.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e537def5..edf6e539 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-tooltip", - "version": "6.1.0", + "version": "6.1.1", "description": "React Tooltip", "keywords": [ "react", From 966131ea949ac05706fadd7b6a2c9901fe0cd48e Mon Sep 17 00:00:00 2001 From: Amumu Date: Tue, 10 Oct 2023 20:53:27 -0500 Subject: [PATCH 09/15] chore: pick types from upstream (#459) * chore: pick from upstream type * chore: more types --- src/Tooltip.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx index 67f69223..6f6c2d94 100644 --- a/src/Tooltip.tsx +++ b/src/Tooltip.tsx @@ -7,7 +7,16 @@ import { placements } from './placements'; import Popup from './Popup'; export interface TooltipProps - extends Pick { + extends Pick< + TriggerProps, + | 'onPopupAlign' + | 'builtinPlacements' + | 'fresh' + | 'children' + | 'mouseLeaveDelay' + | 'mouseEnterDelay' + | 'prefixCls' + > { trigger?: ActionType | ActionType[]; defaultVisible?: boolean; visible?: boolean; @@ -23,16 +32,12 @@ export interface TooltipProps overlay: (() => React.ReactNode) | React.ReactNode; overlayStyle?: React.CSSProperties; overlayClassName?: string; - prefixCls?: string; - mouseEnterDelay?: number; - mouseLeaveDelay?: number; getTooltipContainer?: (node: HTMLElement) => HTMLElement; destroyTooltipOnHide?: boolean; align?: AlignType; showArrow?: boolean | ArrowType; arrowContent?: React.ReactNode; id?: string; - children?: React.ReactElement; overlayInnerStyle?: React.CSSProperties; zIndex?: number; } From 06cb7993450ffe2c39caaf8f43957f2ed61b7698 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Tue, 17 Oct 2023 21:21:30 +0800 Subject: [PATCH 10/15] docs: update demo (#461) --- assets/bootstrap_white.less | 2 ++ tsconfig.json | 22 +++++++++++++++++----- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/assets/bootstrap_white.less b/assets/bootstrap_white.less index b6deb247..e123dd12 100644 --- a/assets/bootstrap_white.less +++ b/assets/bootstrap_white.less @@ -104,6 +104,7 @@ margin-top: -@tooltip-arrow-width; border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0; border-right-color: @tooltip-arrow-color; + transform: translateX(calc(-100% + @tooltip-shadow-width)); } &-placement-right &-arrow-inner, @@ -135,6 +136,7 @@ margin-top: -@tooltip-arrow-width; border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width; border-left-color: @tooltip-arrow-color; + transform: translateX(calc(100% - @tooltip-shadow-width)); } &-placement-left &-arrow-inner, diff --git a/tsconfig.json b/tsconfig.json index 9d404f76..33bd1ce3 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,10 +8,22 @@ "skipLibCheck": true, "esModuleInterop": true, "paths": { - "@/*": ["src/*"], - "@@/*": [".dumi/tmp/*"], - "rc-tooltip": ["src/index.tsx"] + "@/*": [ + "src/*" + ], + "@@/*": [ + ".dumi/tmp/*" + ], + "rc-tooltip": [ + "src/index.tsx" + ] } }, - "include": [".dumi/**/*", ".dumirc.ts", "./src/**/*.ts", "./src/**/*.tsx", "./docs/**/*.tsx", "./tests/**/*.tsx"] -} + "include": [ + ".dumirc.ts", + "./src/**/*.ts", + "./src/**/*.tsx", + "./docs/**/*.tsx", + "./tests/**/*.tsx" + ] +} \ No newline at end of file From d02322908836892bcc6085ac28d033e8fe5cc3de Mon Sep 17 00:00:00 2001 From: Amumu Date: Tue, 17 Oct 2023 20:44:23 -0500 Subject: [PATCH 11/15] chore: So many chores (#460) * fix: fix dev * demo * chore: fix * demo redirect * fix * ci * ci --- .dumi/app.tsx | 10 ++++++++++ .dumi/tsconfig.json | 6 ++++++ .github/workflows/react-component-ci.yml | 8 ++++---- README.md | 4 ++-- package.json | 3 ++- src/Tooltip.tsx | 2 +- 6 files changed, 25 insertions(+), 8 deletions(-) create mode 100644 .dumi/app.tsx create mode 100644 .dumi/tsconfig.json diff --git a/.dumi/app.tsx b/.dumi/app.tsx new file mode 100644 index 00000000..32140877 --- /dev/null +++ b/.dumi/app.tsx @@ -0,0 +1,10 @@ +import { Navigate } from 'dumi'; +import * as React from 'react'; + +export function patchClientRoutes({ routes }) { + routes[0].children.unshift({ + id: 'demo-redirect', + path: '/demo', + element: , + }); +} diff --git a/.dumi/tsconfig.json b/.dumi/tsconfig.json new file mode 100644 index 00000000..79711a82 --- /dev/null +++ b/.dumi/tsconfig.json @@ -0,0 +1,6 @@ +{ + "extends": "../tsconfig.json", + "include": [ + "**/*" + ] +} \ No newline at end of file diff --git a/.github/workflows/react-component-ci.yml b/.github/workflows/react-component-ci.yml index 432a3fb3..467f037f 100644 --- a/.github/workflows/react-component-ci.yml +++ b/.github/workflows/react-component-ci.yml @@ -15,7 +15,7 @@ jobs: - uses: actions/setup-node@v1 with: - node-version: '12' + node-version: '14' - name: cache package-lock.json uses: actions/cache@v2 @@ -43,7 +43,7 @@ jobs: - name: install if: steps.node_modules_cache_id.outputs.cache-hit != 'true' run: npm ci - + lint: runs-on: ubuntu-latest steps: @@ -66,7 +66,7 @@ jobs: run: npm run lint needs: setup - + compile: runs-on: ubuntu-latest steps: @@ -89,7 +89,7 @@ jobs: run: npm run compile needs: setup - + coverage: runs-on: ubuntu-latest steps: diff --git a/README.md b/README.md index 089a87ff..42c4d808 100644 --- a/README.md +++ b/README.md @@ -64,9 +64,9 @@ ReactDOM.render( ## Examples `npm start` and then go to - + -Online examples: +Online demo: ## API diff --git a/package.json b/package.json index edf6e539..d5c48a62 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ ], "scripts": { "compile": "father build && lessc assets/bootstrap.less assets/bootstrap.css && lessc assets/bootstrap_white.less assets/bootstrap_white.css", + "prepare": "dumi setup", "docs:build": "dumi build", "docs:deploy": "gh-pages -d dist", "lint": "eslint src/ --ext .tsx,.ts,.jsx,.js", @@ -51,7 +52,7 @@ "@types/react-dom": "^18.0.10", "@types/warning": "^3.0.0", "cross-env": "^7.0.0", - "dumi": "^2.1.1", + "dumi": "^2.2.13", "eslint": "^7.1.0", "father": "^4.0.0", "gh-pages": "^3.1.0", diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx index 6f6c2d94..1cfc4150 100644 --- a/src/Tooltip.tsx +++ b/src/Tooltip.tsx @@ -74,7 +74,7 @@ const Tooltip = (props: TooltipProps, ref: React.Ref) => { } = props; const triggerRef = useRef(null); - useImperativeHandle(ref, () => triggerRef.current); + useImperativeHandle(ref, () => triggerRef.current as TriggerRef); const extraProps: Partial = { ...restProps }; if ('visible' in props) { From c8d83d1485b4d5dbd7f29eab037f45ae281f285b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Thu, 26 Oct 2023 17:53:42 +0800 Subject: [PATCH 12/15] feat: Tooltip ref support nativeElement (#463) --- package.json | 2 +- src/Tooltip.tsx | 3 ++- tests/index.test.tsx | 16 ++++++++++++++-- 3 files changed, 17 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index d5c48a62..6b6c22ec 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ }, "dependencies": { "@babel/runtime": "^7.11.2", - "@rc-component/trigger": "^1.17.0", + "@rc-component/trigger": "^1.18.0", "classnames": "^2.3.1" }, "devDependencies": { diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx index 1cfc4150..944f7119 100644 --- a/src/Tooltip.tsx +++ b/src/Tooltip.tsx @@ -43,6 +43,7 @@ export interface TooltipProps } export interface TooltipRef { + nativeElement: HTMLElement; forceAlign: VoidFunction; } @@ -74,7 +75,7 @@ const Tooltip = (props: TooltipProps, ref: React.Ref) => { } = props; const triggerRef = useRef(null); - useImperativeHandle(ref, () => triggerRef.current as TriggerRef); + useImperativeHandle(ref, () => triggerRef.current); const extraProps: Partial = { ...restProps }; if ('visible' in props) { diff --git a/tests/index.test.tsx b/tests/index.test.tsx index e8529930..d167d0cd 100644 --- a/tests/index.test.tsx +++ b/tests/index.test.tsx @@ -1,6 +1,6 @@ import { act, fireEvent, render } from '@testing-library/react'; import React from 'react'; -import Tooltip from '../src'; +import Tooltip, { TooltipRef } from '../src'; const verifyContent = (wrapper: HTMLElement, content: string) => { expect(wrapper.querySelector('.x-content').textContent).toBe(content); @@ -188,7 +188,7 @@ describe('rc-tooltip', () => { placement="left" overlay={Tooltip content} showArrow={{ - className: 'abc' + className: 'abc', }} >
Click this
@@ -239,4 +239,16 @@ describe('rc-tooltip', () => { fireEvent.click(container.querySelector('.target')); expect(container.querySelector('.x-content')).toBeTruthy(); }); + + it('ref support nativeElement', () => { + const nodeRef = React.createRef(); + + const { container } = render( + }> +