jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Focusable Box

Browse Source 
Summary: _typescript_

Reviewed By: bnelo12

Differential Revision: D16830533

fbshipit-source-id: c7e9aa9c1e2086ca81754ef1e50aa0335fc57e7c
This commit is contained in:
Daniel Büchele
2019-08-20 03:18:32 -07:00
committed by Facebook Github Bot
parent 4eff1dc073
commit 2520ad4cea
2 changed files with 19 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/ui/components/FocusableBox.js → src/ui/components/FocusableBox.tsx
View File

@@ -6,9 +6,10 @@
*/ */
import {Component} from 'react'; import {Component} from 'react';
import Box from './Box.js'; import Box from './Box';
import {colors} from './colors.tsx'; import {colors} from './colors';
import styled from '../styled/index.js'; import styled from 'react-emotion';
import React from 'react';
const FocusableBoxBorder = styled(Box)({ const FocusableBoxBorder = styled(Box)({
border: `1px solid ${colors.highlight}`, border: `1px solid ${colors.highlight}`,
@@ -20,13 +21,19 @@ const FocusableBoxBorder = styled(Box)({
top: '0', top: '0',
}); });
type Props = {
onBlur?: (e: React.FocusEvent) => void;
onFocus?: (e: React.FocusEvent) => void;
focusable?: boolean;
};
export default class FocusableBox extends Component< export default class FocusableBox extends Component<
Object, Props,
{| {
focused: boolean, focused: boolean;
|}, }
> { > {
constructor(props: Object, context: Object) { constructor(props: Props, context: Object) {
super(props, context); super(props, context);
this.state = {focused: false}; this.state = {focused: false};
} }
@@ -35,7 +42,7 @@ export default class FocusableBox extends Component<
focusable: true, focusable: true,
}; };
onBlur = (e: SyntheticFocusEvent<>) => { onBlur = (e: React.FocusEvent) => {
const {onBlur} = this.props; const {onBlur} = this.props;
if (onBlur) { if (onBlur) {
onBlur(e); onBlur(e);
@@ -45,7 +52,7 @@ export default class FocusableBox extends Component<
} }
}; };
onFocus = (e: SyntheticFocusEvent<>) => { onFocus = (e: React.FocusEvent) => {
const {onFocus} = this.props; const {onFocus} = this.props;
if (onFocus) { if (onFocus) {
onFocus(e); onFocus(e);
@@ -59,7 +66,7 @@ export default class FocusableBox extends Component<
const {props} = this; const {props} = this;
return ( return (
<Box {...props} onFocus={this.onFocus} onBlur={this.onBlur} tabIndex="0"> <Box {...props} onFocus={this.onFocus} onBlur={this.onBlur} tabIndex={0}>
{props.children} {props.children}
{this.state.focused && <FocusableBoxBorder />} {this.state.focused && <FocusableBoxBorder />}
</Box> </Box>

2
src/ui/index.js
View File

@@ -115,7 +115,7 @@ export {
export {default as View} from './components/View.tsx'; export {default as View} from './components/View.tsx';
export {default as ViewWithSize} from './components/ViewWithSize.tsx'; export {default as ViewWithSize} from './components/ViewWithSize.tsx';
export {default as Block} from './components/Block.js'; export {default as Block} from './components/Block.js';
export {default as FocusableBox} from './components/FocusableBox.js'; export {default as FocusableBox} from './components/FocusableBox.tsx';
export {default as Sidebar} from './components/Sidebar.tsx'; export {default as Sidebar} from './components/Sidebar.tsx';
export {default as SidebarLabel} from './components/SidebarLabel.tsx'; export {default as SidebarLabel} from './components/SidebarLabel.tsx';
export {default as Box} from './components/Box.js'; export {default as Box} from './components/Box.js';