新增className,style属性

react-widget · Aug 5, 2020 · 6a3a378 · 6a3a378
1 parent 1b23f98
commit 6a3a378
Show file tree

Hide file tree

Showing 11 changed files with 31 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -40,6 +40,10 @@ export default function App() {
 
 ```ts
 export interface TooltipProps extends Omit<TriggerProps, "popup" | "defaultPopupVisible" | "popupVisible" | "destroyPopupOnHide" | "action" | "popupTransition" | "adjustPosition"> {
+    /** 提示框样式 */
+    className?: string;
+    /** 提示框样式属性 */
+	style?: React.CSSProperties;
     /** 提示文字 */
     title?: React.ReactNode | (() => React.ReactNode);
     /** 提示框位置，可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom */

diff --git a/docs/asset-manifest.json b/docs/asset-manifest.json
@@ -1,7 +1,7 @@
 {
-  "index.css": "static/css/index.fa4784b4.chunk.css",
-  "index.js": "static/js/index.fa4784b4.chunk.js",
+  "index.css": "static/css/index.79eefb4a.chunk.css",
+  "index.js": "static/js/index.79eefb4a.chunk.js",
   "runtime-index.js": "static/js/runtime-index.92eae014.js",
-  "static/js/2.b694e620.chunk.js": "static/js/2.b694e620.chunk.js",
+  "static/js/2.91961bd0.chunk.js": "static/js/2.91961bd0.chunk.js",
   "index.html": "index.html"
 }
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!doctype html><html><head><meta charset="utf-8"/><title>Tooltip</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"/><style>.demo{width:80%;margin:100px auto;background:#fff;font-size:12px;overflow:auto}</style><link href="static/css/index.fa4784b4.chunk.css" rel="stylesheet"></head><body style="background:#f5f5f5"><div class="demo" id="demo"></div><script src="static/js/runtime-index.92eae014.js"></script><script src="static/js/2.b694e620.chunk.js"></script><script src="static/js/index.fa4784b4.chunk.js"></script></body></html>
+<!doctype html><html><head><meta charset="utf-8"/><title>Tooltip</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"/><style>.demo{width:80%;margin:100px auto;background:#fff;font-size:12px;overflow:auto}</style><link href="static/css/index.79eefb4a.chunk.css" rel="stylesheet"></head><body style="background:#f5f5f5"><div class="demo" id="demo"></div><script src="static/js/runtime-index.92eae014.js"></script><script src="static/js/2.91961bd0.chunk.js"></script><script src="static/js/index.79eefb4a.chunk.js"></script></body></html>
diff --git a/docs/static/css/index.fa4784b4.chunk.css → docs/static/css/index.79eefb4a.chunk.css b/docs/static/css/index.fa4784b4.chunk.css → docs/static/css/index.79eefb4a.chunk.css
diff --git a/docs/static/js/2.b694e620.chunk.js → docs/static/js/2.91961bd0.chunk.js b/docs/static/js/2.b694e620.chunk.js → docs/static/js/2.91961bd0.chunk.js
diff --git a/docs/static/js/index.79eefb4a.chunk.js b/docs/static/js/index.79eefb4a.chunk.js
diff --git a/docs/static/js/index.fa4784b4.chunk.js b/docs/static/js/index.fa4784b4.chunk.js
diff --git a/examples/demos/demo1.js b/examples/demos/demo1.js
@@ -30,7 +30,7 @@ export default class DEMO extends Component {
 	render() {
 		return (
 			<div>
-				<TooltipButton placement="bottomLeft" />
+				<TooltipButton placement="bottomLeft" style={{ border: "1px solid red" }} />
 				<TooltipButton placement="bottom" />
 				<TooltipButton placement="bottomRight" />
 				<hr />

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "react-widget-tooltip",
-	"version": "1.0.1",
+	"version": "1.0.2",
 	"description": "react-widget-tooltip",
 	"main": "cjs/index.js",
 	"module": "esm/index.js",
@@ -40,7 +40,7 @@
 		"@babel/runtime": "^7.9.2",
 		"classnames": "^2.2.6",
 		"dom-helpers-extra": "^0.2.1",
-		"react-widget-trigger": "^2.0.8"
+		"react-widget-trigger": "^2.0.10"
 	},
 	"author": "[email protected]",
 	"license": "MIT",

diff --git a/src/index.tsx b/src/index.tsx
@@ -13,7 +13,13 @@ export interface TooltipProps
 		| "action"
 		| "popupTransition"
 		| "adjustPosition"
+		| "popupClassName"
+		| "popupStyle"
 	> {
+	/** 提示框样式 */
+	className?: string;
+	/** 提示框样式属性 */
+	style?: React.CSSProperties;
 	/** 提示文字 */
 	title?: React.ReactNode | (() => React.ReactNode);
 	/** 提示框位置，可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom */
@@ -169,6 +175,8 @@ export class Tooltip extends React.Component<TooltipProps, TooltipState> {
 
 	render() {
 		const {
+			className,
+			style,
 			title,
 			visible,
 			defaultVisible,
@@ -188,6 +196,8 @@ export class Tooltip extends React.Component<TooltipProps, TooltipState> {
 			<Trigger
 				{...restProps}
 				ref={this.triggerRef}
+				popupClassName={className}
+				popupStyle={style}
 				popupTransition={this.getDefaultTransition()}
 				action={trigger}
 				adjustPosition={this.saveFeedback}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html><head><meta charset="utf-8"/><title>Tooltip</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"/><style>.demo{width:80%;margin:100px auto;background:#fff;font-size:12px;overflow:auto}</style><link href="static/css/index.fa4784b4.chunk.css" rel="stylesheet"></head><body style="background:#f5f5f5"><div class="demo" id="demo"></div><script src="static/js/runtime-index.92eae014.js"></script><script src="static/js/2.b694e620.chunk.js"></script><script src="static/js/index.fa4784b4.chunk.js"></script></body></html>
		<!doctype html><html><head><meta charset="utf-8"/><title>Tooltip</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"/><style>.demo{width:80%;margin:100px auto;background:#fff;font-size:12px;overflow:auto}</style><link href="static/css/index.79eefb4a.chunk.css" rel="stylesheet"></head><body style="background:#f5f5f5"><div class="demo" id="demo"></div><script src="static/js/runtime-index.92eae014.js"></script><script src="static/js/2.91961bd0.chunk.js"></script><script src="static/js/index.79eefb4a.chunk.js"></script></body></html>