6db83a7675
Summary: We've had a bunch of different options that were all binary switches with very different ways of displaying them. This consolidates them all to use ToggleSwitches. I think it may still make sense to move them all to a sidebar as it's the case for the Analytics plugin, but that's for another diff. Reviewed By: danielbuechele Differential Revision: D14933392 fbshipit-source-id: 7ef286b61142a564a7cde6de875266ac8641704b
67 lines
1.4 KiB
JavaScript
67 lines
1.4 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.js';
|
|
|
|
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',
|
|
},
|
|
}));
|
|
|
|
type Props = {
|
|
/**
|
|
* onClick handler.
|
|
*/
|
|
onClick?: (event: SyntheticMouseEvent<>) => void,
|
|
/**
|
|
* whether the button is toggled
|
|
*/
|
|
toggled?: boolean,
|
|
className?: 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}
|
|
/>
|
|
);
|
|
}
|
|
}
|