Skip to content

Commit ad040b4

Browse files
bplok20010bplok20010
committed
update
1 parent d49aa98 commit ad040b4

File tree

6 files changed

+183
-317
lines changed

6 files changed

+183
-317
lines changed

‎.prettierrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"arrowParens": "avoid",
2+
"arrowParens": "always",
33
"bracketSpacing": true,
44
"endOfLine": "auto",
55
"htmlWhitespaceSensitivity": "css",

‎examples/demos/demo1.js‎

Lines changed: 33 additions & 217 deletions
Original file line numberDiff line numberDiff line change
@@ -1,220 +1,36 @@
1-
import React, { Component } from 'react';
2-
import { findDOMNode } from 'react-dom';
3-
import Trigger from '../../src';
4-
import Layout from 'react-widget-layout';
5-
import deferred from 'bplokjs-deferred';
6-
import getPlacement from 'bplokjs-placement';
7-
8-
const animateClassNames = {
9-
"appear": "animated",
10-
"appearActive": "fadeBottomIn",
11-
"enter": "animated",
12-
"enterActive": "fadeBottomIn",
13-
"enterDone": "",
14-
"exit": "animated",
15-
"exitActive": "fadeBottomOut",
16-
"exitDone": "",
17-
};
18-
19-
class Select extends React.Component {
20-
21-
componentDidMount() {
22-
this.promise.resolve({
23-
of: findDOMNode(this),
24-
...getPlacement('bottomLeft')
25-
});
26-
}
27-
28-
render() {
29-
30-
this.promise = deferred();
31-
32-
return (
33-
<div className="select">
34-
<input size={10} />
35-
<Trigger
36-
placement={this.promise}
37-
popup="AAAAAAAA"
38-
action="click"
39-
hideAction="resize,scroll"
40-
>
41-
<span className="arrow">V</span>
42-
</Trigger>
43-
</div>
44-
);
45-
}
46-
}
47-
48-
class TriggerBtn extends React.Component {
49-
50-
state = {
51-
visible: false
52-
}
53-
54-
render() {
55-
const { placement } = this.props;
56-
const { visible } = this.state;
57-
return (
58-
<Trigger
59-
offset={0}
60-
action="hover"
61-
delay={100}
62-
popup={<div className="trigger-container">{placement}</div>}
63-
placement={placement}
64-
>
65-
<button className="t-btn" onClick={() => this.setState({ visible: !visible })}>{placement}</button>
66-
</Trigger>
67-
);
68-
}
69-
}
70-
71-
72-
class AnimTriggerBtn extends React.Component {
73-
74-
state = {
75-
visible: false
76-
}
77-
78-
render() {
79-
const { placement } = this.props;
80-
const { visible } = this.state;
81-
return (
82-
<Trigger
83-
offset={0}
84-
action="hover"
85-
delay={100}
86-
popup={<div className="trigger-container">{placement}</div>}
87-
placement={placement}
88-
popupProps={{
89-
timeout: 300,
90-
transitionClassNames: animateClassNames
91-
}}
92-
>
93-
<button className="t-btn" onClick={() => this.setState({ visible: !visible })}>anim {placement}</button>
94-
</Trigger>
95-
);
96-
}
97-
}
1+
import React, { Component } from "react";
2+
import { findDOMNode } from "react-dom";
3+
import Trigger from "../../src";
4+
import Layout from "react-widget-layout";
985

996
export default class DEMO extends Component {
100-
101-
state = {
102-
visible: true,
103-
}
104-
105-
componentDidMount() {
106-
}
107-
108-
render() {
109-
110-
return (
111-
<Layout>
112-
<Layout.Header style={{
113-
textAlign: "center"
114-
}}>
115-
<TriggerBtn placement="topLeft" />
116-
<TriggerBtn placement="topCenter" />
117-
<TriggerBtn placement="topRight" />
118-
</Layout.Header>
119-
<Layout>
120-
<Layout.Sider style={{
121-
width: 80
122-
}}>
123-
<TriggerBtn placement="leftTop" />
124-
<TriggerBtn placement="leftCenter" />
125-
<TriggerBtn placement="leftBottom" />
126-
</Layout.Sider>
127-
<Layout.Content>
128-
</Layout.Content>
129-
<Layout.Sider style={{
130-
width: 80
131-
}}>
132-
<TriggerBtn placement="rightTop" />
133-
<TriggerBtn placement="rightCenter" />
134-
<TriggerBtn placement="rightBottom" />
135-
</Layout.Sider>
136-
</Layout>
137-
<Layout.Footer style={{
138-
textAlign: "center"
139-
}}>
140-
<TriggerBtn placement="bottomLeft" />
141-
<TriggerBtn placement="bottomCenter" />
142-
<TriggerBtn placement="bottomRight" />
143-
</Layout.Footer>
144-
145-
<Layout.Footer style={{
146-
textAlign: "center"
147-
}}>
148-
<Trigger
149-
offset={1}
150-
delay={0}
151-
action="contextMenu"
152-
hideAction="click"
153-
popup={<div className="trigger-container">contextMenu</div>}
154-
placement="rightCenter"
155-
>
156-
<button className="t-btn">contextMenu show</button>
157-
</Trigger>
158-
<Trigger
159-
offset={1}
160-
delay={100}
161-
action="click"
162-
popup={<div className="trigger-container">click</div>}
163-
placement="rightCenter"
164-
mask
165-
zIndex={10}
166-
>
167-
<button className="t-btn">click show</button>
168-
</Trigger>
169-
170-
<Trigger
171-
offset={1}
172-
delay={100}
173-
action="focus"
174-
popup={<div className="trigger-container">rightCenter</div>}
175-
placement="rightCenter"
176-
popupProps={{
177-
timeout: 300,
178-
transitionClassNames: animateClassNames
179-
}}
180-
>
181-
<input type="text" placeholder="focus show" />
182-
</Trigger>
183-
184-
</Layout.Footer>
185-
186-
<Layout.Footer style={{
187-
textAlign: "center"
188-
}}>
189-
<AnimTriggerBtn placement="bottomLeft" />
190-
<AnimTriggerBtn placement="bottomCenter" />
191-
<AnimTriggerBtn placement="bottomRight" />
192-
<Trigger
193-
offset={1}
194-
delay={100}
195-
action="click"
196-
popup={<div className="trigger-container">click animate show <TriggerBtn placement="bottomLeft" /></div>}
197-
placement="rightCenter"
198-
mask
199-
zIndex={10}
200-
popupProps={{
201-
timeout: 300,
202-
transitionClassNames: animateClassNames
203-
}}
204-
>
205-
206-
<button className="t-btn">
207-
click animate show
208-
</button>
209-
</Trigger>
210-
</Layout.Footer>
211-
<Layout.Footer style={{
212-
textAlign: "center"
213-
}}>
214-
<Select />
215-
</Layout.Footer>
216-
</Layout >
217-
);
218-
}
219-
7+
state = {
8+
visible: true,
9+
};
10+
11+
componentDidMount() {}
12+
13+
render() {
14+
return (
15+
<div>
16+
<Trigger
17+
placement="topLeft"
18+
offset={[0, 2]}
19+
popup={
20+
<div
21+
style={{
22+
border: "1px solid #ccc",
23+
padding: 5,
24+
backgroundColor: "#FFF",
25+
}}
26+
>
27+
test...
28+
</div>
29+
}
30+
>
31+
<button>Trigger</button>
32+
</Trigger>
33+
</div>
34+
);
35+
}
22036
}

‎examples/index.js‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
import React from 'react'
2-
import ReactDOM from 'react-dom';
1+
import React from "react";
2+
import ReactDOM from "react-dom";
33

4-
import './style/index.scss';
5-
import './style/animate.scss';
4+
import "./style/index.scss";
5+
import "./style/animate.scss";
66

7-
import '../src/style/index.scss';
8-
import "react-widget-popup/lib/style/index.css";
9-
import "react-widget-layout/lib/style/index.css";
7+
import "../src/style/index.css";
108

11-
import Demo from './Demo';
9+
import Demo from "./Demo";
1210

13-
ReactDOM.render(<Demo />, demo);
11+
ReactDOM.render(<Demo />, document.getElementById("demo"));

‎package.json‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,14 @@
4242
"react-dom": ">=16.8.0"
4343
},
4444
"dependencies": {
45-
"@types/react-transition-group": "^4.2.4",
4645
"@babel/runtime": "^7.9.2",
46+
"@types/react-transition-group": "^4.2.4",
47+
"bplokjs-placement": "^1.0.2",
4748
"classnames": "^2.2.6",
48-
"bplokjs-placement": "^1.0.2"
49+
"dom-helpers": "^5.1.4",
50+
"jq-position": "^1.0.0",
51+
"react-widget-popup": "^3.4.3",
52+
"react-widget-portal": "^1.2.0"
4953
},
5054
"devDependencies": {
5155
"@types/enzyme": "^3.10.5",
@@ -61,6 +65,7 @@
6165
"packez": "^4.1.2",
6266
"react": "^16.13.1",
6367
"react-dom": "^16.13.1",
68+
"react-widget-layout": "^1.0.2",
6469
"rimraf": "^3.0.2",
6570
"transform-es": "^5.0.3",
6671
"typescript": "^3.8.3"

‎src/getPlacement.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ function getOffset(h, v, offset) {
1515
// at: point(at)
1616
// my: point(at) position of target
1717

18-
type Placements =
18+
export type Placements =
1919
| "center"
2020
| "centerCenter"
2121
| "left"

0 commit comments

Comments
 (0)