Skip to content

Commit 24fc6f8

Browse files
Andrey Okonetchnikovokonet
Andrey Okonetchnikov
authored and
okonet
committed
refactor: Reformat and re-lint
1 parent 7e98f2f commit 24fc6f8

File tree

2 files changed

+85
-79
lines changed

2 files changed

+85
-79
lines changed

‎src/FocusWithin.js

Lines changed: 43 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
1-
import React from "react";
2-
import PropTypes from "prop-types";
1+
/* eslint-env node, browser */
2+
/* eslint no-process-env: 0 */
3+
4+
import React from 'react'
5+
import PropTypes from 'prop-types'
36

47
const noOutlineStyles = {
5-
outline: "none"
6-
};
8+
outline: 'none'
9+
}
710

811
class FocusWithin extends React.Component {
912
state = {
1013
focused: false
11-
};
14+
}
1215

13-
ref = React.createRef();
16+
ref = React.createRef()
1417

1518
/**
1619
* Calls `focus` method on the container node
@@ -19,15 +22,15 @@ class FocusWithin extends React.Component {
1922
* @method focus
2023
* */
2124
focus() {
22-
const node = this.ref.current;
23-
if (node != null && typeof node.focus === "function") {
24-
node.focus();
25+
const node = this.ref.current
26+
if (node != null && typeof node.focus === 'function') {
27+
node.focus()
2528
}
2629
}
2730

2831
onFocus = evt => {
29-
const { onFocus } = this.props;
30-
const { focused } = this.state;
32+
const { onFocus } = this.props
33+
const { focused } = this.state
3134

3235
// TODO: Figure out if this check is "safe" or we should rely on SCU instead
3336
if (!focused) {
@@ -36,61 +39,61 @@ class FocusWithin extends React.Component {
3639
focused: true
3740
},
3841
() => {
39-
onFocus(evt);
42+
onFocus(evt)
4043
}
41-
);
44+
)
4245
}
43-
};
46+
}
4447

4548
onBlur = evt => {
46-
const { onBlur } = this.props;
47-
const { focused } = this.state;
49+
const { onBlur } = this.props
50+
const { focused } = this.state
4851

4952
// Do not blur if focus within the container or we're editing
5053
if (this.isFocusWithin(this.ref.current)) {
51-
evt.preventDefault();
52-
evt.stopPropagation();
53-
return;
54+
evt.preventDefault()
55+
evt.stopPropagation()
56+
return
5457
}
5558

5659
// Persist event object
57-
evt.persist();
60+
evt.persist()
5861

5962
if (focused) {
6063
this.setState(
6164
{
6265
focused: false
6366
},
6467
() => {
65-
onBlur(evt);
68+
onBlur(evt)
6669
}
67-
);
70+
)
6871
}
69-
};
72+
}
7073

7174
isFocusWithin = node => {
7275
// We need to check `:focus-within` on the the parent element in order to work
73-
if (process.env.NODE_ENV === "development") {
76+
if (process.env.NODE_ENV === 'development') {
7477
if (
7578
node == null ||
7679
node.parentNode == null ||
77-
typeof node.parentNode.querySelector !== "function"
80+
typeof node.parentNode.querySelector !== 'function'
7881
) {
7982
throw new Error(
80-
"A ref to a DOM Node with a valid parent Node must be supplied to" +
81-
" FocusWithin.\n" +
82-
" You have probably provided a ref to a React Element.\n See https://reactjs.org/docs/react-api.html#refs"
83-
);
83+
'A ref to a DOM Node with a valid parent Node must be supplied to' +
84+
' FocusWithin.\n' +
85+
' You have probably provided a ref to a React Element.\n See https://reactjs.org/docs/react-api.html#refs'
86+
)
8487
}
8588
}
86-
return !!node.parentNode.querySelector(":focus-within");
87-
};
89+
return !!node.parentNode.querySelector(':focus-within')
90+
}
8891

8992
render() {
90-
const { children } = this.props;
91-
const { focused } = this.state;
93+
const { children } = this.props
94+
const { focused } = this.state
9295

93-
if (typeof children === "function") {
96+
if (typeof children === 'function') {
9497
return React.cloneElement(
9598
children({
9699
focused,
@@ -100,19 +103,14 @@ class FocusWithin extends React.Component {
100103
onFocus: this.onFocus,
101104
onBlur: this.onBlur
102105
}
103-
);
106+
)
104107
}
105108

106109
return (
107-
<div
108-
ref={this.ref}
109-
onFocus={this.onFocus}
110-
onBlur={this.onBlur}
111-
style={noOutlineStyles}
112-
>
110+
<div ref={this.ref} onFocus={this.onFocus} onBlur={this.onBlur} style={noOutlineStyles}>
113111
{children}
114112
</div>
115-
);
113+
)
116114
}
117115
}
118116

@@ -124,11 +122,11 @@ FocusWithin.propTypes = {
124122
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
125123
onBlur: PropTypes.func,
126124
onFocus: PropTypes.func
127-
};
125+
}
128126

129127
FocusWithin.defaultProps = {
130128
onBlur: () => {},
131129
onFocus: () => {}
132-
};
130+
}
133131

134-
export default FocusWithin;
132+
export default FocusWithin

‎src/Readme.md

Lines changed: 42 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ Open developer console to see log messages.
99
```jsx harmony
1010
<FocusWithin
1111
onFocus={() => {
12-
console.log("Received focus");
12+
console.log('Received focus')
1313
}}
1414
onBlur={() => {
15-
console.log("Lost focus");
15+
console.log('Lost focus')
1616
}}
1717
>
1818
<input type="text" placeholder="Click to activate first input" />
@@ -28,15 +28,18 @@ If you want to react to the focus change, use function as a children pattern. Wh
2828
```jsx harmony
2929
<FocusWithin
3030
onFocus={() => {
31-
console.log("Received focus");
31+
console.log('Received focus')
3232
}}
3333
onBlur={() => {
34-
console.log("Lost focus");
34+
console.log('Lost focus')
3535
}}
3636
>
3737
{({ focused, getRef }) => (
3838
<form>
39-
<fieldset ref={getRef} style={{ borderColor: focused ? "blue" : "#999" }}>
39+
<fieldset
40+
ref={getRef}
41+
style={{ borderColor: focused ? 'blue' : '#999' }}
42+
>
4043
<label htmlFor="input1">First input</label>
4144
<input
4245
id="input1"
@@ -50,8 +53,8 @@ If you want to react to the focus change, use function as a children pattern. Wh
5053
placeholder="Use Tab to activate next input"
5154
/>
5255
<button type="submit">Submit</button>
53-
<p style={{ color: focused ? "danger" : "text" }}>
54-
{focused ? "Focus is inside" : "No focus here"}
56+
<p style={{ color: focused ? 'danger' : 'text' }}>
57+
{focused ? 'Focus is inside' : 'No focus here'}
5558
</p>
5659
</fieldset>
5760
</form>
@@ -64,76 +67,81 @@ If you want to react to the focus change, use function as a children pattern. Wh
6467
If you're using a CSS-in-JS library like [styled-components](https://www.styled-components.com) you need to pass a ref using `innerRef` prop. You can use `getRef` function from the parameters.
6568

6669
```js static
67-
({ focused: Boolean, getRef: Function }) => React.Element;
70+
;({ focused: Boolean, getRef: Function }) => React.Element
6871
```
6972

7073
```jsx harmony
71-
const styled = require("styled-components").default;
72-
const StyledBox = styled("div")`
74+
const styled = require('styled-components').default
75+
const StyledBox = styled('div')`
7376
padding: 20px;
7477
border: 1px solid;
75-
border-color: ${props => (props.focused ? "palevioletred" : "#999")};
78+
border-color: ${props =>
79+
props.focused ? 'palevioletred' : '#999'};
7680
7781
& > * + * {
7882
margin-left: 20px;
7983
}
80-
`;
81-
<FocusWithin
84+
`
85+
;<FocusWithin
8286
onFocus={() => {
83-
console.log("Received focus");
87+
console.log('Received focus')
8488
}}
8589
onBlur={() => {
86-
console.log("Lost focus");
90+
console.log('Lost focus')
8791
}}
8892
>
8993
{({ focused, getRef }) => (
9094
<StyledBox innerRef={getRef} focused={focused}>
91-
<input type="text" placeholder="Click to activate first input" />
92-
<input type="text" placeholder="Use Tab to activate next input" />
95+
<input
96+
type="text"
97+
placeholder="Click to activate first input"
98+
/>
99+
<input
100+
type="text"
101+
placeholder="Use Tab to activate next input"
102+
/>
93103
<button>A button to try focus</button>
94104
</StyledBox>
95105
)}
96-
</FocusWithin>;
106+
</FocusWithin>
97107
```
98108

99109
_Note:_ It's recommended to use `:focus-within` selector instead of interpoaltions whenever possible.
100110

101111
## Focus method
102112

103-
Sometimes it's needed to focus the container node programmatically. You can use the public method
104-
`focus`. Note that `tabIndex={-1}` needs to be set on non-interactive elements to make them
105-
receive focus.
113+
Sometimes it's needed to focus the container node programmatically. You can use the public method `focus`. Note that `tabIndex={-1}` needs to be set on non-interactive elements to make them receive focus.
106114

107115
```jsx harmony
108-
const ref = React.createRef();
109-
<div>
116+
const ref = React.createRef()
117+
;<div>
110118
<FocusWithin ref={ref}>
111119
{({ focused, getRef }) => (
112120
<span tabIndex={-1} ref={getRef}>
113-
{focused ? "Focused" : "Not focused"}
121+
{focused ? 'Focused' : 'Not focused'}
114122
</span>
115123
)}
116124
</FocusWithin>
117125
<button
118126
onClick={() => {
119-
ref.current.focus();
127+
ref.current.focus()
120128
}}
121129
>
122130
Focus the span
123131
</button>
124-
</div>;
132+
</div>
125133
```
126134

127135
## Naïve focus trap implementation
128136

129137
```jsx harmony
130-
const firstInput = React.createRef();
138+
const firstInput = React.createRef()
131139
initialState = {
132140
enabled: false
133-
};
134-
<FocusWithin
141+
}
142+
;<FocusWithin
135143
onBlur={() => {
136-
state.enabled && firstInput.current.focus();
144+
state.enabled && firstInput.current.focus()
137145
}}
138146
>
139147
<fieldset>
@@ -148,14 +156,14 @@ initialState = {
148156
onClick={() => {
149157
setState({
150158
enabled: !state.enabled
151-
});
159+
})
152160
if (!state.enabled) {
153-
firstInput.current.focus();
161+
firstInput.current.focus()
154162
}
155163
}}
156164
>
157-
{state.enabled ? "Disable" : "Enable"} focus trap
165+
{state.enabled ? 'Disable' : 'Enable'} focus trap
158166
</button>
159167
</fieldset>
160-
</FocusWithin>;
168+
</FocusWithin>
161169
```

0 commit comments

Comments
 (0)