Skip to content

Commit ecce26e

Browse files
luanraithzluanraithz
committed
remove useless code, change linceses to license, and creating disabled prop
1 parent 6dd9f25 commit ecce26e

File tree

6 files changed

+138
-7
lines changed

6 files changed

+138
-7
lines changed

‎examples/disabled.html‎

Whitespace-only changes.

‎examples/disabled.js‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import React from 'react'
2+
import ReactDOM from 'react-dom'
3+
import Trigger from 'rc-trigger';
4+
import 'rc-trigger/assets/index.less';
5+
import './disabled.less'
6+
import { builtinPlacements } from './simple'
7+
8+
class Test extends React.Component {
9+
10+
constructor(props) {
11+
super(props)
12+
this.state = {
13+
disabled: false
14+
}
15+
this.handleDisabledChanged = this.handleDisabledChanged.bind(this)
16+
}
17+
18+
handleDisabledChanged(event) {
19+
this.setState({ disabled: event.target.checked })
20+
}
21+
22+
render() {
23+
const { disabled } = this.state
24+
return (
25+
<div className="container">
26+
<div className="disabledWrapper">
27+
<input onChange={this.handleDisabledChanged} type="checkbox"/>
28+
<label> Disabled </label>
29+
</div>
30+
<div className="examples">
31+
<div className="trigger-example">
32+
<Trigger
33+
onPopupVisibleChange={() => console.log('Click popup visible changed')}
34+
popupPlacement={'bottom'}
35+
builtinPlacements={builtinPlacements}
36+
action={['click']}
37+
disabled={disabled}
38+
popup={
39+
<div>I'm a popup</div>
40+
}
41+
>
42+
<label>Click me {disabled && '(I\'m disabled)'}</label>
43+
</Trigger>
44+
</div>
45+
<div className="trigger-example">
46+
<Trigger
47+
onPopupVisibleChange={() => console.log('Hover popup visible changed')}
48+
popupPlacement={'bottom'}
49+
builtinPlacements={builtinPlacements}
50+
action={['hover']}
51+
disabled={disabled}
52+
popup={
53+
<div>
54+
I'm a popup
55+
</div>
56+
}
57+
>
58+
<label> Hover me {disabled && '(I\'m disabled)'} </label>
59+
</Trigger>
60+
</div>
61+
<div className="trigger-example">
62+
<Trigger
63+
onPopupVisibleChange={() => console.log('Hover popup visible changed')}
64+
popupPlacement={'contextMenu'}
65+
builtinPlacements={builtinPlacements}
66+
action={['hover']}
67+
disabled={disabled}
68+
popupAlign={{
69+
points: ['tl', 'bl'],
70+
offset: [0, 3]
71+
}}
72+
popup={
73+
<div>
74+
I'm a popup
75+
</div>
76+
}
77+
>
78+
<label> Context Menu {disabled && '(I\'m disabled)'} </label>
79+
</Trigger>
80+
</div>
81+
<Trigger
82+
onPopupVisibleChange={() => console.log('Focus popup visible changed')}
83+
popupPlacement={'bottom'}
84+
builtinPlacements={builtinPlacements}
85+
action={['focus']}
86+
disabled={disabled}
87+
popup={
88+
<div>
89+
I'm a popup
90+
</div>
91+
}
92+
>
93+
<input placeholder={`Focus me ${disabled ? '(I\'m disabled)': ''}`} />
94+
</Trigger>
95+
</div>
96+
</div>
97+
)
98+
}
99+
}
100+
101+
ReactDOM.render(<Test />, document.getElementById('__react-content'));

‎examples/disabled.less‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.container {
2+
display: flex;
3+
flex-direction: column;
4+
height: 300px;
5+
.disabledWrapper {
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
height: 50px;
10+
font-size: 24px;
11+
input {
12+
margin-right: 10px;
13+
width: 20px;
14+
height: 20px;
15+
}
16+
}
17+
.examples {
18+
display: flex;
19+
.trigger-example {
20+
flex: 1;
21+
display: flex;
22+
justify-content: center;
23+
align-items: center;
24+
}
25+
}
26+
}

‎examples/simple.js‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ function getPopupAlign(state) {
1515
};
1616
}
1717

18-
const builtinPlacements = {
18+
export const builtinPlacements = {
1919
left: {
2020
points: ['cr', 'cl'],
2121
},
@@ -107,10 +107,6 @@ class Test extends React.Component {
107107
});
108108
}
109109

110-
onVisibleChange = (visible) => {
111-
console.log('tooltip', visible);
112-
}
113-
114110
onMask = (e) => {
115111
this.setState({
116112
mask: e.target.checked,
@@ -271,7 +267,6 @@ class Test extends React.Component {
271267
</div>
272268
<div style={{ margin: 120, position: 'relative' }}>
273269
<Trigger
274-
getPopupContainer={undefined && getPopupContainer}
275270
popupAlign={getPopupAlign(state)}
276271
popupPlacement={state.placement}
277272
destroyPopupOnHide={this.state.destroyPopupOnHide}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"lib",
2323
"assets/*.css"
2424
],
25-
"licenses": "MIT",
25+
"license": "MIT",
2626
"main": "./lib/index",
2727
"module": "./es/index",
2828
"config": {

‎src/index.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ export default class Trigger extends React.Component {
7878
maskAnimation: PropTypes.string,
7979
stretch: PropTypes.string,
8080
alignPoint: PropTypes.bool, // Maybe we can support user pass position in the future
81+
disabled: PropTypes.bool
8182
};
8283

8384
static contextTypes = contextTypes;
@@ -105,6 +106,7 @@ export default class Trigger extends React.Component {
105106
action: [],
106107
showAction: [],
107108
hideAction: [],
109+
disabled: false
108110
};
109111

110112
constructor(props) {
@@ -209,6 +211,7 @@ export default class Trigger extends React.Component {
209211
}
210212

211213
onMouseEnter = (e) => {
214+
if (this.props.disabled) return
212215
const { mouseEnterDelay } = this.props;
213216
this.fireEvents('onMouseEnter', e);
214217
this.delaySetPopupVisible(true, mouseEnterDelay, mouseEnterDelay ? null : e);
@@ -220,6 +223,7 @@ export default class Trigger extends React.Component {
220223
};
221224

222225
onMouseLeave = (e) => {
226+
if (this.props.disabled) return
223227
this.fireEvents('onMouseLeave', e);
224228
this.delaySetPopupVisible(false, this.props.mouseLeaveDelay);
225229
}
@@ -229,6 +233,7 @@ export default class Trigger extends React.Component {
229233
}
230234

231235
onPopupMouseLeave = (e) => {
236+
if (this.props.disabled) return
232237
// https://github.com/react-component/trigger/pull/13
233238
// react bug?
234239
if (e.relatedTarget && !e.relatedTarget.setTimeout &&
@@ -241,6 +246,7 @@ export default class Trigger extends React.Component {
241246
}
242247

243248
onFocus = (e) => {
249+
if (this.props.disabled) return
244250
this.fireEvents('onFocus', e);
245251
// incase focusin and focusout
246252
this.clearDelayTimer();
@@ -261,6 +267,7 @@ export default class Trigger extends React.Component {
261267
}
262268

263269
onBlur = (e) => {
270+
if (this.props.disabled) return
264271
this.fireEvents('onBlur', e);
265272
this.clearDelayTimer();
266273
if (this.isBlurToHide()) {
@@ -269,6 +276,7 @@ export default class Trigger extends React.Component {
269276
}
270277

271278
onContextMenu = (e) => {
279+
if (this.props.disabled) return
272280
e.preventDefault();
273281
this.fireEvents('onContextMenu', e);
274282
this.setPopupVisible(true, e);
@@ -281,6 +289,7 @@ export default class Trigger extends React.Component {
281289
}
282290

283291
onClick = (event) => {
292+
if (this.props.disabled) return
284293
this.fireEvents('onClick', event);
285294
// focus will trigger click
286295
if (this.focusTime) {

0 commit comments

Comments
 (0)