c33dbce242
Summary: Also improved some paddings Reviewed By: passy Differential Revision: D19640179 fbshipit-source-id: 44aa91d452fc857533c638e00d4fe9648592b6f2
48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
*/
|
|
|
|
import {PureComponent} from 'react';
|
|
import styled from '@emotion/styled';
|
|
import React from 'react';
|
|
|
|
type CheckboxProps = {
|
|
/** Whether the checkbox is checked. */
|
|
checked: boolean;
|
|
/** Called when a state change is triggered */
|
|
onChange: (checked: boolean) => void;
|
|
disabled?: boolean;
|
|
};
|
|
|
|
const CheckboxContainer = styled.input({
|
|
display: 'inline-block',
|
|
marginRight: 5,
|
|
verticalAlign: 'middle',
|
|
});
|
|
CheckboxContainer.displayName = 'Checkbox:CheckboxContainer';
|
|
|
|
/**
|
|
* A checkbox to toggle UI state
|
|
*/
|
|
export default class Checkbox extends PureComponent<CheckboxProps> {
|
|
onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
this.props.onChange(e.target.checked);
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<CheckboxContainer
|
|
type="checkbox"
|
|
checked={this.props.checked}
|
|
onChange={this.onChange}
|
|
disabled={this.props.disabled}
|
|
/>
|
|
);
|
|
}
|
|
}
|