Skip to content

Commit a8e6b88

Browse files
bplok20010bplok20010
committed
Init
1 parent b937cc5 commit a8e6b88

22 files changed

+20360
-1
lines changed

‎.gitignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/node_modules
2+
/lib
3+
/cjs
4+
/esm
5+
/dist

‎.prettierignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
*.md

‎.prettierrc

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"arrowParens": "always",
3+
"bracketSpacing": true,
4+
"endOfLine": "auto",
5+
"htmlWhitespaceSensitivity": "css",
6+
"insertPragma": false,
7+
"jsxBracketSameLine": false,
8+
"jsxSingleQuote": false,
9+
"printWidth": 100,
10+
"proseWrap": "preserve",
11+
"quoteProps": "as-needed",
12+
"requirePragma": false,
13+
"semi": true,
14+
"singleQuote": false,
15+
"tabWidth": 4,
16+
"trailingComma": "es5",
17+
"useTabs": true
18+
}

‎LICENSE

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2020 react-widget
3+
Copyright (c) 2020 react-widget-tooltip
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎babel.config.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
module.exports = api => {
2+
const isTest = api.env("test");
3+
if (!isTest) return {};
4+
5+
return {
6+
presets: [
7+
[
8+
"babel-preset-packez",
9+
{
10+
modules: "cjs",
11+
},
12+
],
13+
],
14+
};
15+
};

‎examples/Demo.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React, { Component } from "react";
2+
import DemoList from "./DemoList";
3+
4+
export default class Demo extends Component {
5+
state = {
6+
current: DemoList[0],
7+
};
8+
9+
onDemoChange(item, e) {
10+
this.setState({
11+
current: item,
12+
});
13+
}
14+
15+
render() {
16+
const { current } = this.state;
17+
return (
18+
<div className="container">
19+
<div className="slider">
20+
{DemoList.map((item, i) => {
21+
return (
22+
<div
23+
key={i}
24+
className={current === item ? "active" : ""}
25+
onClick={this.onDemoChange.bind(this, item)}
26+
>
27+
{item.label}
28+
</div>
29+
);
30+
})}
31+
</div>
32+
<div className="content">{current ? <current.component /> : null}</div>
33+
</div>
34+
);
35+
}
36+
}

‎examples/DemoList.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Demo1 from "./demos/demo1";
2+
3+
export default [
4+
{
5+
label: "基本功能",
6+
component: Demo1,
7+
},
8+
];

‎examples/demos/demo1.js

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import React, { Component } from "react";
2+
import Tooltip from "../../src";
3+
4+
const animateClassNames = {
5+
appear: "animated",
6+
appearActive: "fadeBottomIn",
7+
enter: "animated",
8+
enterActive: "fadeBottomIn",
9+
enterDone: "",
10+
exit: "animated",
11+
exitActive: "fadeBottomOut",
12+
exitDone: "",
13+
};
14+
15+
function TooltipButton({ text, ...props }) {
16+
return (
17+
<Tooltip
18+
// maskClosable={false}
19+
title="Title"
20+
content="Content"
21+
{...props}
22+
>
23+
<button>{text || props.placement}</button>
24+
</Tooltip>
25+
);
26+
}
27+
28+
export default class DEMO extends Component {
29+
state = {
30+
visible: true,
31+
};
32+
33+
componentDidMount() {}
34+
35+
render() {
36+
return (
37+
<div>
38+
<TooltipButton action="hover" placement="bottomLeft" />
39+
<TooltipButton action="hover" placement="bottom" />
40+
<TooltipButton action="hover" placement="bottomRight" />
41+
<hr />
42+
<TooltipButton action="hover" placement="topLeft" />
43+
<TooltipButton action="hover" placement="top" />
44+
<TooltipButton action="hover" placement="topRight" />
45+
<hr />
46+
<TooltipButton action="hover" placement="leftTop" />
47+
<div
48+
style={{
49+
position: "relative",
50+
}}
51+
>
52+
<TooltipButton action="hover" usePortal={false} placement="left" />
53+
</div>
54+
<TooltipButton action="hover" placement="leftBottom" />
55+
<hr />
56+
<TooltipButton action="hover" placement="rightTop" />
57+
<div
58+
style={{
59+
position: "relative",
60+
}}
61+
>
62+
<TooltipButton action="hover" usePortal={false} placement="right" />
63+
</div>
64+
<TooltipButton action="hover" placement="rightBottom" />
65+
<hr />
66+
<TooltipButton
67+
placement="bottomLeft"
68+
action="contextMenu"
69+
hideAction="mouseDown"
70+
text="action:contextMenu"
71+
popupTransition={{ classNames: animateClassNames, timeout: 300 }}
72+
/>
73+
<TooltipButton
74+
placement="bottomLeft"
75+
action="click"
76+
// hideAction="mouseDown"
77+
text="action:click"
78+
popupTransition={{ classNames: animateClassNames, timeout: 300 }}
79+
/>
80+
<TooltipButton
81+
placement="bottomLeft"
82+
action="hover"
83+
text="action:hover"
84+
delay={200}
85+
popupTransition={{ classNames: animateClassNames, timeout: 300 }}
86+
/>
87+
<TooltipButton
88+
placement="bottomLeft"
89+
action="focus"
90+
text="action:focus"
91+
popupTransition={{ classNames: animateClassNames, timeout: 300 }}
92+
/>
93+
<TooltipButton
94+
placement="bottomLeft"
95+
action="mouseDown"
96+
text="action:mouseDown"
97+
popupTransition={{ classNames: animateClassNames, timeout: 300 }}
98+
/>
99+
<hr />
100+
<TooltipButton placement="bottomLeft" mask text="mask" />
101+
<TooltipButton
102+
placement="bottomLeft"
103+
popupTransition={{ classNames: animateClassNames, timeout: 300 }}
104+
text="popupTransition"
105+
/>
106+
</div>
107+
);
108+
}
109+
}

‎examples/index.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Tooltip</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"
9+
/>
10+
<style type="text/css">
11+
.demo {
12+
width: 80%;
13+
margin: 100px auto;
14+
background: #fff;
15+
font-size: 12px;
16+
overflow: auto;
17+
}
18+
</style>
19+
</head>
20+
21+
<body style="background: #f5f5f5;">
22+
<div class="demo" id="demo"></div>
23+
</body>
24+
</html>

‎examples/index.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
4+
import "./style/index.scss";
5+
6+
import "../src/style/index.css";
7+
8+
import Demo from "./Demo";
9+
10+
ReactDOM.render(<Demo />, document.getElementById("demo"));

‎examples/style/index.scss

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
.container {
2+
display: flex;
3+
height: 100%;
4+
}
5+
6+
.slider {
7+
width: 200px;
8+
border-right: 1px solid #f2f2fe;
9+
> div {
10+
padding: 10px;
11+
border-bottom: 1px solid #f2f2fe;
12+
cursor: pointer;
13+
}
14+
15+
.active {
16+
background: #3399ff;
17+
color: #fff;
18+
}
19+
}
20+
21+
.content {
22+
overflow: auto;
23+
padding: 10px;
24+
25+
flex: 1;
26+
}
27+
28+
.upload-test {
29+
width: 400px;
30+
margin: 0 auto;
31+
}
32+
33+
.upload1 {
34+
border: 2px dashed rgb(236, 236, 236);
35+
border-radius: 5px;
36+
height: 100px;
37+
line-height: 96px;
38+
position: relative;
39+
text-align: center;
40+
}
41+
42+
.tips {
43+
position: absolute;
44+
bottom: 0;
45+
left: 0;
46+
right: 0;
47+
text-align: center;
48+
padding: 30px;
49+
}
50+
51+
.upload2 {
52+
margin-top: 20px;
53+
text-align: center;
54+
}
55+
56+
.upload2 button {
57+
width: 100%;
58+
padding: 8px;
59+
}
60+
61+
button {
62+
line-height: 26px;
63+
}

‎jest.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
transform: {
3+
"^.+\\.[t|j]sx?$": "babel-jest",
4+
},
5+
};

0 commit comments

Comments
 (0)