cd10856c3e
Summary: _typescript_ Reviewed By: priteshrnandgaonkar Differential Revision: D16828226 fbshipit-source-id: e6dd9946ae642a27ebc8a3f6dfce6773051f5a7a
77 lines
1.6 KiB
JavaScript
77 lines
1.6 KiB
JavaScript
/**
|
|
* Copyright 2018-present Facebook.
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
* @format
|
|
*/
|
|
|
|
import React from 'react';
|
|
import styled from '../styled/index.js';
|
|
import {colors} from './colors.tsx';
|
|
import Text from './Text';
|
|
|
|
export const StyledButton = styled('div')(props => ({
|
|
cursor: 'pointer',
|
|
width: '30px',
|
|
height: '16px',
|
|
background: props.toggled ? colors.green : colors.grey,
|
|
display: 'block',
|
|
borderRadius: '100px',
|
|
position: 'relative',
|
|
marginLeft: '15px',
|
|
'&::after': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
top: '3px',
|
|
left: props.toggled ? '18px' : '3px',
|
|
width: '10px',
|
|
height: '10px',
|
|
background: 'white',
|
|
borderRadius: '100px',
|
|
transition: 'all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s',
|
|
},
|
|
}));
|
|
|
|
const Label = styled(Text)({
|
|
marginLeft: 7,
|
|
marginRight: 7,
|
|
});
|
|
|
|
type Props = {
|
|
/**
|
|
* onClick handler.
|
|
*/
|
|
onClick?: (event: SyntheticMouseEvent<>) => void,
|
|
/**
|
|
* whether the button is toggled
|
|
*/
|
|
toggled?: boolean,
|
|
className?: string,
|
|
label?: string,
|
|
};
|
|
|
|
/**
|
|
* Toggle Button.
|
|
*
|
|
* **Usage**
|
|
*
|
|
* ```jsx
|
|
* import {ToggleButton} from 'flipper';
|
|
* <ToggleButton onClick={handler} toggled={boolean}/>
|
|
* ```
|
|
*/
|
|
export default class ToggleButton extends React.Component<Props> {
|
|
render() {
|
|
return (
|
|
<>
|
|
<StyledButton
|
|
className={this.props.className}
|
|
toggled={this.props.toggled}
|
|
onClick={this.props.onClick}
|
|
/>
|
|
{this.props.label && <Label>{this.props.label}</Label>}
|
|
</>
|
|
);
|
|
}
|
|
}
|